1286 lines
45 KiB
HTML
1286 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>问问ima - RAG AI助手</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
background-color: #f5f5f5;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 左侧边栏 */
|
||
.sidebar {
|
||
width: 240px;
|
||
background-color: #ffffff;
|
||
border-right: 1px solid #e5e5e5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20px;
|
||
}
|
||
|
||
.logo-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.panda-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: linear-gradient(135deg, #4ade80, #22c55e);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.new-chat-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: white;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
transition: all 0.2s;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.new-chat-btn:hover {
|
||
background: #f5f5f5;
|
||
border-color: #d0d0d0;
|
||
}
|
||
|
||
.nav-links {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 12px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
transition: background 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.nav-link-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.login-hint {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.about-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 12px;
|
||
color: #666;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
transition: background 0.2s;
|
||
cursor: pointer;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.about-link:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
/* 主内容区 */
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
}
|
||
|
||
.chat-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 40px 20px 120px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.welcome-screen {
|
||
text-align: center;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.panda-avatar {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin: 0 auto 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.panda-avatar-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(circle, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.1) 50%, transparent 70%);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.panda-avatar-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: linear-gradient(135deg, #4ade80, #22c55e);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 40px;
|
||
position: relative;
|
||
z-index: 1;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.welcome-title {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.welcome-desc {
|
||
font-size: 16px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.messages {
|
||
width: 100%;
|
||
max-width: 800px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.message {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.message.user {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.message-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message.user .message-avatar {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.message.assistant .message-avatar {
|
||
background: linear-gradient(135deg, #4ade80, #22c55e);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.message-content {
|
||
flex: 1;
|
||
padding: 12px 16px;
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.message.user .message-content {
|
||
background: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
/* 输入区域 */
|
||
.input-area {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 240px;
|
||
right: 0;
|
||
background: white;
|
||
border-top: 1px solid #e5e5e5;
|
||
padding: 16px 20px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.input-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-select {
|
||
padding: 6px 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 6px;
|
||
background: white;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.control-select:hover {
|
||
border-color: #d0d0d0;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.input-wrapper {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
background: #f5f5f5;
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.file-input-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.file-input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.file-btn, .send-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
transition: background 0.2s;
|
||
color: #666;
|
||
}
|
||
|
||
.file-btn:hover, .send-btn:hover {
|
||
background: #e5e5e5;
|
||
}
|
||
|
||
.send-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.text-input {
|
||
flex: 1;
|
||
border: none;
|
||
background: transparent;
|
||
font-size: 15px;
|
||
padding: 8px 12px;
|
||
resize: none;
|
||
max-height: 200px;
|
||
outline: none;
|
||
font-family: inherit;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 知识库上传模态框 */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
width: 90%;
|
||
max-width: 500px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.close-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
transition: background 0.2s;
|
||
font-size: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.form-input:focus {
|
||
border-color: #4ade80;
|
||
}
|
||
|
||
.file-upload-area {
|
||
border: 2px dashed #e5e5e5;
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.file-upload-area:hover {
|
||
border-color: #4ade80;
|
||
background: #f0fdf4;
|
||
}
|
||
|
||
.file-upload-area.dragover {
|
||
border-color: #22c55e;
|
||
background: #f0fdf4;
|
||
}
|
||
|
||
.file-list {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: #f5f5f5;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.remove-file {
|
||
color: #ef4444;
|
||
cursor: pointer;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.remove-file:hover {
|
||
background: #fee2e2;
|
||
}
|
||
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #4ade80;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover:not(:disabled) {
|
||
background: #22c55e;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #e5e5e5;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.loading {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2px solid #f3f3f3;
|
||
border-top: 2px solid #4ade80;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.error-message {
|
||
color: #ef4444;
|
||
font-size: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 左侧边栏 -->
|
||
<div class="sidebar">
|
||
<div class="logo-section">
|
||
<div class="logo">
|
||
<div class="panda-icon">🐼</div>
|
||
<span>ima</span>
|
||
</div>
|
||
</div>
|
||
<button class="new-chat-btn" onclick="newChat()">
|
||
<span>💬</span>
|
||
<span>新对话</span>
|
||
</button>
|
||
<div class="nav-links">
|
||
<div class="nav-link" onclick="openKnowledgeBaseModal()">
|
||
<div class="nav-link-icon">
|
||
<span>📍</span>
|
||
<span>我的知识库</span>
|
||
</div>
|
||
<span>→</span>
|
||
</div>
|
||
<div class="nav-link">
|
||
<div class="nav-link-icon">
|
||
<span>🌐</span>
|
||
<span>知识库广场</span>
|
||
</div>
|
||
<span>→</span>
|
||
</div>
|
||
<div class="nav-link">
|
||
<div class="nav-link-icon">
|
||
<span>🕐</span>
|
||
<span>问答历史</span>
|
||
</div>
|
||
<span>→</span>
|
||
</div>
|
||
</div>
|
||
<div class="login-hint">登录以同步历史会话</div>
|
||
<div class="about-link">
|
||
<div class="nav-link-icon">
|
||
<span>ℹ️</span>
|
||
<span>关于ima</span>
|
||
</div>
|
||
<span>→</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="main-content">
|
||
<div class="chat-container" id="chatContainer">
|
||
<div class="welcome-screen" id="welcomeScreen">
|
||
<div class="panda-avatar">
|
||
<div class="panda-avatar-bg"></div>
|
||
<div class="panda-avatar-icon">🐼</div>
|
||
</div>
|
||
<div class="welcome-title">问问ima</div>
|
||
<div class="welcome-desc">我可以基于全网或知识库内容,为你答疑解惑、创作内容</div>
|
||
</div>
|
||
<div class="messages" id="messages" style="display: none;"></div>
|
||
</div>
|
||
|
||
<!-- 输入区域 -->
|
||
<div class="input-area">
|
||
<div class="input-controls">
|
||
<select class="control-select" id="modelSelect">
|
||
<option value="deepseek-r1:7b">deepseek-r1:7b</option>
|
||
<option value="deepseek-r1:1.5b">deepseek-r1:1.5b</option>
|
||
</select>
|
||
<select class="control-select" id="knowledgeBaseSelect">
|
||
<option value="">选择知识库</option>
|
||
</select>
|
||
</div>
|
||
<div class="input-wrapper">
|
||
<div class="file-input-wrapper">
|
||
<input type="file" id="fileInput" class="file-input" multiple accept="*/*">
|
||
<button class="file-btn" onclick="document.getElementById('fileInput').click()" title="上传知识库">
|
||
📎
|
||
</button>
|
||
</div>
|
||
<textarea
|
||
class="text-input"
|
||
id="textInput"
|
||
placeholder="有问题尽管问"
|
||
rows="1"
|
||
onkeydown="handleKeyDown(event)"
|
||
oninput="autoResize(this)"
|
||
></textarea>
|
||
<button class="send-btn" id="sendBtn" onclick="sendMessage()" title="发送">
|
||
✈️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 知识库上传模态框 -->
|
||
<div class="modal" id="uploadModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div class="modal-title">上传知识库</div>
|
||
<button class="close-btn" onclick="closeUploadModal()">×</button>
|
||
</div>
|
||
<form id="uploadForm" onsubmit="uploadKnowledgeBase(event)">
|
||
<div class="form-group">
|
||
<label class="form-label">知识库名称 *</label>
|
||
<input
|
||
type="text"
|
||
class="form-input"
|
||
id="knowledgeBaseName"
|
||
placeholder="请输入知识库名称"
|
||
required
|
||
>
|
||
<div class="error-message" id="nameError"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">选择文件 *</label>
|
||
<div
|
||
class="file-upload-area"
|
||
id="fileUploadArea"
|
||
onclick="document.getElementById('uploadFileInput').click()"
|
||
ondrop="handleDrop(event)"
|
||
ondragover="handleDragOver(event)"
|
||
ondragleave="handleDragLeave(event)"
|
||
>
|
||
<div>📁 点击或拖拽文件到此处</div>
|
||
<div style="font-size: 12px; color: #999; margin-top: 8px;">支持多文件上传</div>
|
||
</div>
|
||
<input
|
||
type="file"
|
||
id="uploadFileInput"
|
||
class="file-input"
|
||
multiple
|
||
accept="*/*"
|
||
onchange="handleFileSelect(event)"
|
||
style="display: none;"
|
||
>
|
||
<div class="file-list" id="fileList"></div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" onclick="closeUploadModal()">取消</button>
|
||
<button type="submit" class="btn btn-primary" id="uploadBtn">
|
||
<span id="uploadBtnText">上传</span>
|
||
<span id="uploadLoading" class="loading" style="display: none; margin-left: 8px;"></span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let selectedFiles = [];
|
||
let currentMessageId = null;
|
||
|
||
// 页面加载时获取知识库列表
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
loadKnowledgeBaseList();
|
||
// 测试后端连接
|
||
testBackendConnection();
|
||
});
|
||
|
||
// 测试后端连接
|
||
async function testBackendConnection() {
|
||
try {
|
||
console.log('========== 测试后端连接 ==========');
|
||
console.log('测试URL: http://localhost:8090/api/v1/rag/query_rag_tag_list');
|
||
const response = await fetch('http://localhost:8090/api/v1/rag/query_rag_tag_list', {
|
||
method: 'GET',
|
||
mode: 'cors'
|
||
});
|
||
console.log('✅ 后端连接测试成功，状态码:', response.status);
|
||
console.log('✅ CORS配置正常，可以正常通信');
|
||
} catch (error) {
|
||
console.error('❌ 后端连接测试失败');
|
||
console.error('错误:', error);
|
||
if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
|
||
console.error('⚠️ 这是CORS跨域问题！');
|
||
console.error('后端需要配置CORS才能允许前端跨域请求');
|
||
console.error('请查看页面上的CORS配置说明');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加载知识库列表
|
||
async function loadKnowledgeBaseList() {
|
||
try {
|
||
const response = await fetch('http://localhost:8090/api/v1/rag/query_rag_tag_list');
|
||
|
||
if (!response.ok) {
|
||
console.error('加载知识库列表失败，HTTP状态:', response.status);
|
||
return;
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log('知识库列表响应:', data);
|
||
|
||
const select = document.getElementById('knowledgeBaseSelect');
|
||
select.innerHTML = '<option value="">选择知识库</option>';
|
||
|
||
if (data.code === '0000' && data.data) {
|
||
// 处理不同的数据格式
|
||
let tagList = [];
|
||
|
||
if (Array.isArray(data.data)) {
|
||
tagList = data.data;
|
||
} else if (data.data.tags && Array.isArray(data.data.tags)) {
|
||
tagList = data.data.tags;
|
||
} else if (data.data.list && Array.isArray(data.data.list)) {
|
||
tagList = data.data.list;
|
||
}
|
||
|
||
if (tagList.length > 0) {
|
||
tagList.forEach(item => {
|
||
const option = document.createElement('option');
|
||
// 如果是字符串，直接使用
|
||
if (typeof item === 'string') {
|
||
option.value = item;
|
||
option.textContent = item;
|
||
} else {
|
||
// 如果是对象，尝试获取tag或name字段
|
||
option.value = item.tag || item.name || item.id || String(item);
|
||
option.textContent = item.name || item.tag || item.label || String(item);
|
||
}
|
||
select.appendChild(option);
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载知识库列表失败:', error);
|
||
// 不显示错误提示，避免影响用户体验
|
||
}
|
||
}
|
||
|
||
// 新对话
|
||
function newChat() {
|
||
document.getElementById('messages').innerHTML = '';
|
||
document.getElementById('messages').style.display = 'none';
|
||
document.getElementById('welcomeScreen').style.display = 'block';
|
||
document.getElementById('textInput').value = '';
|
||
currentMessageId = null;
|
||
}
|
||
|
||
// 打开知识库上传模态框
|
||
function openKnowledgeBaseModal() {
|
||
document.getElementById('uploadModal').classList.add('active');
|
||
selectedFiles = [];
|
||
document.getElementById('fileList').innerHTML = '';
|
||
document.getElementById('knowledgeBaseName').value = '';
|
||
}
|
||
|
||
// 关闭上传模态框
|
||
function closeUploadModal() {
|
||
document.getElementById('uploadModal').classList.remove('active');
|
||
selectedFiles = [];
|
||
document.getElementById('fileList').innerHTML = '';
|
||
document.getElementById('knowledgeBaseName').value = '';
|
||
}
|
||
|
||
// 处理文件选择
|
||
function handleFileSelect(event) {
|
||
const files = Array.from(event.target.files);
|
||
addFiles(files);
|
||
}
|
||
|
||
// 处理拖拽
|
||
function handleDragOver(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.currentTarget.classList.add('dragover');
|
||
}
|
||
|
||
function handleDragLeave(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.currentTarget.classList.remove('dragover');
|
||
}
|
||
|
||
function handleDrop(event) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.currentTarget.classList.remove('dragover');
|
||
const files = Array.from(event.dataTransfer.files);
|
||
addFiles(files);
|
||
}
|
||
|
||
// 添加文件到列表
|
||
function addFiles(files) {
|
||
files.forEach(file => {
|
||
if (!selectedFiles.find(f => f.name === file.name && f.size === file.size)) {
|
||
selectedFiles.push(file);
|
||
}
|
||
});
|
||
updateFileList();
|
||
}
|
||
|
||
// 更新文件列表显示
|
||
function updateFileList() {
|
||
const fileList = document.getElementById('fileList');
|
||
fileList.innerHTML = '';
|
||
|
||
selectedFiles.forEach((file, index) => {
|
||
const fileItem = document.createElement('div');
|
||
fileItem.className = 'file-item';
|
||
fileItem.innerHTML = `
|
||
<span>${file.name} (${formatFileSize(file.size)})</span>
|
||
<span class="remove-file" onclick="removeFile(${index})">删除</span>
|
||
`;
|
||
fileList.appendChild(fileItem);
|
||
});
|
||
}
|
||
|
||
// 移除文件
|
||
function removeFile(index) {
|
||
selectedFiles.splice(index, 1);
|
||
updateFileList();
|
||
}
|
||
|
||
// 格式化文件大小
|
||
function formatFileSize(bytes) {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||
}
|
||
|
||
// 上传知识库
|
||
async function uploadKnowledgeBase(event) {
|
||
event.preventDefault();
|
||
|
||
const name = document.getElementById('knowledgeBaseName').value.trim();
|
||
const nameError = document.getElementById('nameError');
|
||
|
||
if (!name) {
|
||
nameError.textContent = '请输入知识库名称';
|
||
return;
|
||
}
|
||
nameError.textContent = '';
|
||
|
||
if (selectedFiles.length === 0) {
|
||
alert('请至少选择一个文件');
|
||
return;
|
||
}
|
||
|
||
const uploadBtn = document.getElementById('uploadBtn');
|
||
const uploadBtnText = document.getElementById('uploadBtnText');
|
||
const uploadLoading = document.getElementById('uploadLoading');
|
||
|
||
uploadBtn.disabled = true;
|
||
uploadBtnText.textContent = '上传中...';
|
||
uploadLoading.style.display = 'inline-block';
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('ragTag', name);
|
||
|
||
// 添加所有文件，使用相同的参数名 'file' 以匹配后端的 List<MultipartFile> files
|
||
selectedFiles.forEach((file, index) => {
|
||
formData.append('file', file);
|
||
console.log(`添加文件 ${index + 1}:`, file.name, '大小:', file.size, '类型:', file.type);
|
||
});
|
||
|
||
// 验证FormData内容
|
||
console.log('FormData内容:');
|
||
for (let pair of formData.entries()) {
|
||
if (pair[1] instanceof File) {
|
||
console.log(pair[0] + ':', pair[1].name, pair[1].size, 'bytes');
|
||
} else {
|
||
console.log(pair[0] + ':', pair[1]);
|
||
}
|
||
}
|
||
|
||
console.log('========== 开始上传请求 ==========');
|
||
console.log('知识库名称:', name);
|
||
console.log('文件数量:', selectedFiles.length);
|
||
console.log('请求URL: http://localhost:8090/api/v1/rag/file/upload');
|
||
console.log('请求方法: POST');
|
||
console.log('FormData参数:');
|
||
console.log(' - ragTag:', name);
|
||
selectedFiles.forEach((file, i) => {
|
||
console.log(` - file[${i}]:`, file.name, `(${file.size} bytes, ${file.type || 'unknown type'})`);
|
||
});
|
||
|
||
// 发送请求
|
||
const startTime = Date.now();
|
||
console.log('发送请求时间:', new Date().toISOString());
|
||
|
||
const response = await fetch('http://localhost:8090/api/v1/rag/file/upload', {
|
||
method: 'POST',
|
||
// 不设置 Content-Type，让浏览器自动设置 multipart/form-data 和 boundary
|
||
body: formData,
|
||
// 添加mode和credentials以处理CORS
|
||
mode: 'cors',
|
||
credentials: 'omit'
|
||
});
|
||
|
||
const endTime = Date.now();
|
||
console.log('收到响应时间:', new Date().toISOString());
|
||
console.log('请求耗时:', (endTime - startTime) + 'ms');
|
||
console.log('========== 响应信息 ==========');
|
||
|
||
console.log('收到响应，状态码:', response.status, response.statusText);
|
||
console.log('响应头:', Object.fromEntries(response.headers.entries()));
|
||
|
||
// 检查响应内容类型
|
||
const contentType = response.headers.get('content-type');
|
||
let result;
|
||
|
||
if (contentType && contentType.includes('application/json')) {
|
||
result = await response.json();
|
||
} else {
|
||
// 如果不是JSON，尝试读取文本
|
||
const text = await response.text();
|
||
console.log('响应文本:', text);
|
||
try {
|
||
result = JSON.parse(text);
|
||
} catch (e) {
|
||
// 如果解析失败，创建一个结果对象
|
||
result = {
|
||
code: response.ok ? '0000' : '9999',
|
||
info: text || '未知错误',
|
||
message: text || '未知错误'
|
||
};
|
||
}
|
||
}
|
||
|
||
console.log('响应结果:', result);
|
||
|
||
if (result.code === '0000' || response.ok) {
|
||
alert('上传成功！');
|
||
closeUploadModal();
|
||
// 延迟一下再加载列表，确保后端已处理完成
|
||
setTimeout(() => {
|
||
loadKnowledgeBaseList();
|
||
}, 500);
|
||
} else {
|
||
const errorMsg = result.info || result.message || result.error || '未知错误';
|
||
alert('上传失败: ' + errorMsg);
|
||
console.error('上传失败详情:', result);
|
||
}
|
||
} catch (error) {
|
||
console.error('========== 上传失败 ==========');
|
||
console.error('完整错误信息:', error);
|
||
console.error('错误类型:', error.name);
|
||
console.error('错误消息:', error.message);
|
||
console.error('错误堆栈:', error.stack);
|
||
|
||
let errorMessage = '';
|
||
let isCorsError = false;
|
||
|
||
if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
|
||
isCorsError = true;
|
||
errorMessage = '❌ 请求被阻止：CORS跨域问题\n\n';
|
||
errorMessage += '🔍 问题诊断：\n';
|
||
errorMessage += '请求没有到达后端服务器，被浏览器CORS策略阻止。\n\n';
|
||
errorMessage += '✅ 解决方案：\n';
|
||
errorMessage += '后端需要添加CORS配置，允许前端跨域请求。\n\n';
|
||
errorMessage += '📝 后端配置示例（Spring Boot）：\n';
|
||
errorMessage += '在Controller类或方法上添加：\n';
|
||
errorMessage += '@CrossOrigin(origins = "*")\n';
|
||
errorMessage += '或配置全局CORS：\n';
|
||
errorMessage += '@Configuration\n';
|
||
errorMessage += 'public class CorsConfig implements WebMvcConfigurer {\n';
|
||
errorMessage += ' @Override\n';
|
||
errorMessage += ' public void addCorsMappings(CorsRegistry registry) {\n';
|
||
errorMessage += ' registry.addMapping("/**")\n';
|
||
errorMessage += ' .allowedOrigins("*")\n';
|
||
errorMessage += ' .allowedMethods("*")\n';
|
||
errorMessage += ' .allowedHeaders("*");\n';
|
||
errorMessage += ' }\n';
|
||
errorMessage += '}\n\n';
|
||
errorMessage += '⚠️ 注意：生产环境应指定具体的前端域名，不要使用 "*"';
|
||
} else if (error.name === 'TypeError' && error.message.includes('fetch')) {
|
||
errorMessage = '网络请求失败\n\n请检查：\n1. 后端服务是否运行在 http://localhost:8090\n2. 网络连接是否正常';
|
||
} else if (error.message) {
|
||
errorMessage = '上传失败: ' + error.message;
|
||
} else {
|
||
errorMessage = '未知错误，请查看控制台（F12）获取详细信息';
|
||
}
|
||
|
||
// 显示详细的错误信息
|
||
console.error('========== 错误详情 ==========');
|
||
if (isCorsError) {
|
||
console.error('这是CORS跨域问题，后端需要配置允许跨域请求');
|
||
console.error('请将上述配置添加到后端代码中');
|
||
}
|
||
|
||
alert(errorMessage);
|
||
} finally {
|
||
uploadBtn.disabled = false;
|
||
uploadBtnText.textContent = '上传';
|
||
uploadLoading.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// 处理文件输入（直接上传知识库）
|
||
document.getElementById('fileInput').addEventListener('change', (event) => {
|
||
if (event.target.files.length > 0) {
|
||
openKnowledgeBaseModal();
|
||
addFiles(Array.from(event.target.files));
|
||
}
|
||
});
|
||
|
||
// 发送消息
|
||
async function sendMessage() {
|
||
const input = document.getElementById('textInput');
|
||
const message = input.value.trim();
|
||
|
||
if (!message) return;
|
||
|
||
// 隐藏欢迎界面，显示消息区域
|
||
document.getElementById('welcomeScreen').style.display = 'none';
|
||
const messagesDiv = document.getElementById('messages');
|
||
messagesDiv.style.display = 'flex';
|
||
|
||
// 添加用户消息
|
||
addMessage('user', message);
|
||
input.value = '';
|
||
autoResize(input);
|
||
|
||
// 禁用发送按钮
|
||
const sendBtn = document.getElementById('sendBtn');
|
||
sendBtn.disabled = true;
|
||
|
||
// 获取选中的模型和知识库
|
||
const model = document.getElementById('modelSelect').value;
|
||
const knowledgeBase = document.getElementById('knowledgeBaseSelect').value;
|
||
|
||
// 创建助手消息容器
|
||
const assistantMessageId = 'msg-' + Date.now();
|
||
currentMessageId = assistantMessageId;
|
||
addMessage('assistant', '', assistantMessageId);
|
||
|
||
try {
|
||
// 构建请求URL
|
||
const params = new URLSearchParams({
|
||
model: model,
|
||
message: message
|
||
});
|
||
|
||
if (knowledgeBase) {
|
||
params.append('ragTag', knowledgeBase);
|
||
}
|
||
|
||
const url = `http://localhost:8090/api/v1/rag/generate_stream_rag?${params.toString()}`;
|
||
console.log('========== 发送聊天请求 ==========');
|
||
console.log('请求URL:', url);
|
||
console.log('模型:', model);
|
||
console.log('知识库:', knowledgeBase || '未选择');
|
||
console.log('消息:', message);
|
||
|
||
// 发送普通请求（非流式）
|
||
const startTime = Date.now();
|
||
const response = await fetch(url, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Accept': 'application/json',
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
const endTime = Date.now();
|
||
console.log('响应状态:', response.status, response.statusText);
|
||
console.log('响应Content-Type:', response.headers.get('content-type'));
|
||
console.log('请求耗时:', (endTime - startTime) + 'ms');
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text();
|
||
console.error('响应错误:', errorText);
|
||
throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
|
||
}
|
||
|
||
// 解析JSON响应
|
||
const data = await response.json();
|
||
console.log('收到响应数据:', data);
|
||
|
||
// 提取响应内容
|
||
let content = '';
|
||
|
||
// 处理ChatResponse对象，根据实际响应结构提取内容
|
||
// 优先处理 result.output.content 或 results[0].output.content
|
||
if (data.result && data.result.output && data.result.output.content !== undefined) {
|
||
content = String(data.result.output.content);
|
||
} else if (data.results && Array.isArray(data.results) && data.results.length > 0) {
|
||
// 处理 results 数组
|
||
const firstResult = data.results[0];
|
||
if (firstResult.output && firstResult.output.content !== undefined) {
|
||
content = String(firstResult.output.content);
|
||
} else if (firstResult.content !== undefined) {
|
||
content = String(firstResult.content);
|
||
}
|
||
} else if (data.content !== undefined && data.content !== null) {
|
||
content = String(data.content);
|
||
} else if (data.text !== undefined && data.text !== null) {
|
||
content = String(data.text);
|
||
} else if (data.message !== undefined && data.message !== null) {
|
||
content = String(data.message);
|
||
} else if (data.response !== undefined && data.response !== null) {
|
||
content = String(data.response);
|
||
} else if (data.answer !== undefined && data.answer !== null) {
|
||
content = String(data.answer);
|
||
} else if (data.output && typeof data.output === 'object' && data.output.content !== undefined) {
|
||
content = String(data.output.content);
|
||
} else if (data.output && typeof data.output === 'string') {
|
||
content = String(data.output);
|
||
} else if (data.result && typeof data.result === 'object') {
|
||
// 如果result是对象，尝试提取其中的content
|
||
if (data.result.content !== undefined) {
|
||
content = String(data.result.content);
|
||
} else if (data.result.output && data.result.output.content !== undefined) {
|
||
content = String(data.result.output.content);
|
||
}
|
||
} else if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
|
||
// 处理类似OpenAI格式的响应
|
||
const choice = data.choices[0];
|
||
if (choice.message && choice.message.content) {
|
||
content = String(choice.message.content);
|
||
} else if (choice.text) {
|
||
content = String(choice.text);
|
||
}
|
||
} else if (data.data && data.data.content) {
|
||
// 如果响应被包装在data字段中
|
||
content = String(data.data.content);
|
||
} else if (typeof data === 'string') {
|
||
content = data;
|
||
} else {
|
||
// 如果无法提取内容，打印整个对象用于调试
|
||
console.warn('无法提取内容，原始数据:', data);
|
||
content = JSON.stringify(data, null, 2);
|
||
}
|
||
|
||
// 处理内容：移除推理过程
|
||
if (content) {
|
||
// 移除 <think>...</think> 标签及其内容
|
||
content = content.replace(/<think>[\s\S]*?<\/redacted_reasoning>/gi, '');
|
||
// 移除其他可能的推理标签（如果存在）
|
||
content = content.replace(/<think>[\s\S]*?<\/think>/gi, '');
|
||
// 清理多余的换行和空格（多个连续换行变为两个）
|
||
content = content.replace(/\n{3,}/g, '\n\n');
|
||
content = content.trim();
|
||
}
|
||
|
||
// 更新消息
|
||
if (content) {
|
||
console.log('提取的内容长度:', content.length);
|
||
updateMessage(assistantMessageId, content);
|
||
} else {
|
||
console.warn('未找到响应内容，显示原始数据');
|
||
updateMessage(assistantMessageId, JSON.stringify(data, null, 2));
|
||
}
|
||
|
||
console.log('========== 响应处理完成 ==========');
|
||
sendBtn.disabled = false;
|
||
|
||
} catch (error) {
|
||
console.error('========== 发送消息失败 ==========');
|
||
console.error('错误类型:', error.name);
|
||
console.error('错误消息:', error.message);
|
||
console.error('错误堆栈:', error.stack);
|
||
|
||
let errorMsg = '抱歉，发生了错误: ';
|
||
if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
|
||
errorMsg += '无法连接到后端服务，请检查后端是否运行并配置了CORS';
|
||
} else if (error.name === 'SyntaxError' && error.message.includes('JSON')) {
|
||
errorMsg += '响应格式错误，无法解析JSON';
|
||
} else {
|
||
errorMsg += error.message;
|
||
}
|
||
|
||
updateMessage(assistantMessageId, errorMsg);
|
||
sendBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// 添加消息
|
||
function addMessage(role, content, messageId = null) {
|
||
const messagesDiv = document.getElementById('messages');
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `message ${role}`;
|
||
|
||
if (messageId) {
|
||
messageDiv.id = messageId;
|
||
}
|
||
|
||
const avatar = document.createElement('div');
|
||
avatar.className = 'message-avatar';
|
||
avatar.textContent = role === 'user' ? 'U' : '🐼';
|
||
|
||
const contentDiv = document.createElement('div');
|
||
contentDiv.className = 'message-content';
|
||
contentDiv.textContent = content;
|
||
|
||
messageDiv.appendChild(avatar);
|
||
messageDiv.appendChild(contentDiv);
|
||
messagesDiv.appendChild(messageDiv);
|
||
|
||
// 滚动到底部
|
||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||
}
|
||
|
||
// 更新消息内容
|
||
function updateMessage(messageId, content) {
|
||
const messageDiv = document.getElementById(messageId);
|
||
if (messageDiv) {
|
||
const contentDiv = messageDiv.querySelector('.message-content');
|
||
if (contentDiv) {
|
||
contentDiv.textContent = content;
|
||
// 滚动到底部
|
||
const messagesDiv = document.getElementById('messages');
|
||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 处理键盘事件
|
||
function handleKeyDown(event) {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault();
|
||
sendMessage();
|
||
}
|
||
}
|
||
|
||
// 自动调整输入框高度
|
||
function autoResize(textarea) {
|
||
textarea.style.height = 'auto';
|
||
textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|