- 新增AI助手和知识库菜单项，增加界面入口 - 添加AI聊天相关API接口及数据类型定义 - 实现AI聊天界面，支持多会话管理、消息流式接收及展示 - 支持聊天消息中的参考文档显示和管理 - 实现知识库文档上传、列表展示、删除及重新索引功能 - 完成知识库管理界面，支持项目选择及文件上传过滤 - 路由配置新增aiChat和knowledgeBase模块，确保访问路径正确 - 国际化资源更新，支持AI助手和知识库菜单名称显示
This commit is contained in:
787
src/views/ai-chat/index.vue
Normal file
787
src/views/ai-chat/index.vue
Normal file
@@ -0,0 +1,787 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, onUnmounted, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
getChatSessions,
|
||||
getSessionMessages,
|
||||
deleteChatSession,
|
||||
createChatSession,
|
||||
buildSSEUrl,
|
||||
type ChatSessionVO,
|
||||
type ChatMessageVO,
|
||||
type ReferencedDocVO,
|
||||
type SSEStartData,
|
||||
type SSEChunkData,
|
||||
type SSEReferencesData,
|
||||
type SSECompleteData,
|
||||
type SSEErrorData
|
||||
} from "@/api/ai-chat";
|
||||
import { getProjectList, type ProjectItem } from "@/api/project";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import SendIcon from "~icons/ri/send-plane-fill";
|
||||
import AddIcon from "~icons/ri/add-line";
|
||||
import DeleteIcon from "~icons/ep/delete";
|
||||
import DocumentIcon from "~icons/ri/file-text-line";
|
||||
import RefreshIcon from "~icons/ri/refresh-line";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChat"
|
||||
});
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const sessions = ref<ChatSessionVO[]>([]);
|
||||
const currentSession = ref<ChatSessionVO | null>(null);
|
||||
const messages = ref<ChatMessageVO[]>([]);
|
||||
const inputMessage = ref("");
|
||||
const sending = ref(false);
|
||||
const projects = ref<ProjectItem[]>([]);
|
||||
const projectLoading = ref(false);
|
||||
const showProjectSelect = ref(false);
|
||||
|
||||
// SSE连接
|
||||
let eventSource: EventSource | null = null;
|
||||
|
||||
// 消息容器引用
|
||||
const messagesContainer = ref<HTMLElement | null>(null);
|
||||
|
||||
// 会话中的临时消息（用于流式显示）
|
||||
const streamingMessage = ref<string>("");
|
||||
const streamingReferences = ref<ReferencedDocVO[]>([]);
|
||||
|
||||
// 加载项目列表
|
||||
async function loadProjects() {
|
||||
projectLoading.value = true;
|
||||
try {
|
||||
const res = await getProjectList({ pageNum: 1, pageSize: 100 });
|
||||
if (res.code === 200) {
|
||||
projects.value = res.data?.rows || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载项目列表失败:", error);
|
||||
} finally {
|
||||
projectLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载会话列表
|
||||
async function loadSessions(projectId?: number) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getChatSessions(
|
||||
projectId || currentSession.value?.projectId || 0
|
||||
);
|
||||
if (res.code === 200) {
|
||||
sessions.value = res.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载会话列表失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择会话
|
||||
async function selectSession(session: ChatSessionVO) {
|
||||
currentSession.value = session;
|
||||
await loadMessages(session.sessionId);
|
||||
}
|
||||
|
||||
// 加载会话消息
|
||||
async function loadMessages(sessionId: string) {
|
||||
try {
|
||||
const res = await getSessionMessages(sessionId);
|
||||
if (res.code === 200) {
|
||||
messages.value = res.data || [];
|
||||
scrollToBottom();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载消息失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新会话
|
||||
async function createNewSession() {
|
||||
if (!currentSession.value?.projectId && projects.value.length === 0) {
|
||||
await loadProjects();
|
||||
}
|
||||
showProjectSelect.value = true;
|
||||
}
|
||||
|
||||
// 选择项目后创建会话
|
||||
async function handleProjectSelect(project: ProjectItem) {
|
||||
showProjectSelect.value = false;
|
||||
currentSession.value = {
|
||||
sessionId: "",
|
||||
sessionTitle: "新对话",
|
||||
projectId: Number(project.id),
|
||||
projectName: project.projectName || "",
|
||||
lastMessageTime: new Date().toISOString(),
|
||||
messageCount: 0,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value = [];
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
async function sendMessage() {
|
||||
if (!inputMessage.value.trim() || sending.value) return;
|
||||
|
||||
const message = inputMessage.value.trim();
|
||||
inputMessage.value = "";
|
||||
|
||||
// 如果没有会话，需要先创建
|
||||
if (!currentSession.value?.projectId) {
|
||||
ElMessage.warning("请先选择项目");
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加用户消息
|
||||
const userMessage: ChatMessageVO = {
|
||||
id: Date.now(),
|
||||
role: "user",
|
||||
content: message,
|
||||
messageIndex: messages.value.length + 1,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value.push(userMessage);
|
||||
|
||||
sending.value = true;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
|
||||
// 建立SSE连接
|
||||
const sseUrl = buildSSEUrl({
|
||||
sessionId: currentSession.value.sessionId || undefined,
|
||||
projectId: currentSession.value.projectId,
|
||||
message: message,
|
||||
useRag: true
|
||||
});
|
||||
|
||||
// 关闭之前的连接
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
|
||||
eventSource = new EventSource(sseUrl);
|
||||
|
||||
eventSource.addEventListener("start", (e: MessageEvent) => {
|
||||
const data: SSEStartData = JSON.parse(e.data);
|
||||
if (data.isNewSession || !currentSession.value.sessionId) {
|
||||
currentSession.value = {
|
||||
...currentSession.value,
|
||||
sessionId: data.sessionId,
|
||||
sessionTitle: message.slice(0, 20)
|
||||
};
|
||||
loadSessions(currentSession.value.projectId);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener("chunk", (e: MessageEvent) => {
|
||||
const data: SSEChunkData = JSON.parse(e.data);
|
||||
streamingMessage.value += data.content;
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
eventSource.addEventListener("references", (e: MessageEvent) => {
|
||||
const data: SSEReferencesData = JSON.parse(e.data);
|
||||
streamingReferences.value = data.docs || [];
|
||||
});
|
||||
|
||||
eventSource.addEventListener("complete", (e: MessageEvent) => {
|
||||
const data: SSECompleteData = JSON.parse(e.data);
|
||||
|
||||
// 添加AI回复消息
|
||||
const assistantMessage: ChatMessageVO = {
|
||||
id: data.messageId,
|
||||
role: "assistant",
|
||||
content: streamingMessage.value,
|
||||
referencedDocs: streamingReferences.value,
|
||||
tokensUsed: data.tokensUsed,
|
||||
messageIndex: messages.value.length + 1,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value.push(assistantMessage);
|
||||
|
||||
// 重置状态
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
sending.value = false;
|
||||
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
|
||||
loadSessions(currentSession.value?.projectId);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
eventSource.addEventListener("error", (e: MessageEvent) => {
|
||||
const data: SSEErrorData = JSON.parse(e.data);
|
||||
ElMessage.error(data.message || "对话发生错误");
|
||||
sending.value = false;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
});
|
||||
|
||||
eventSource.onerror = () => {
|
||||
ElMessage.error("连接服务器失败");
|
||||
sending.value = false;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
};
|
||||
}
|
||||
|
||||
// 删除会话
|
||||
async function handleDeleteSession(session: ChatSessionVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm("确定要删除这个会话吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
});
|
||||
|
||||
const res = await deleteChatSession(session.sessionId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("删除成功");
|
||||
loadSessions(currentSession.value?.projectId);
|
||||
|
||||
if (currentSession.value?.sessionId === session.sessionId) {
|
||||
currentSession.value = null;
|
||||
messages.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== "cancel") {
|
||||
console.error("删除会话失败:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(time: string) {
|
||||
return dayjs(time).format("MM-DD HH:mm");
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes: number) {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
// 组件卸载时关闭SSE连接
|
||||
onUnmounted(() => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化加载
|
||||
loadProjects();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ai-chat-container">
|
||||
<!-- 左侧会话列表 -->
|
||||
<div class="session-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>AI 助手</h3>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddIcon)"
|
||||
@click="createNewSession"
|
||||
>
|
||||
新对话
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 项目选择 -->
|
||||
<div v-if="showProjectSelect" class="project-select-panel">
|
||||
<div class="panel-header">
|
||||
<span>选择项目</span>
|
||||
<el-button link @click="showProjectSelect = false">
|
||||
<component :is="useRenderIcon('ri/close-line')" />
|
||||
</el-button>
|
||||
</div>
|
||||
<el-scrollbar height="300px">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
class="project-item"
|
||||
@click="handleProjectSelect(project)"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/folder-line')" class="mr-2" />
|
||||
{{ project.projectName }}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 会话列表 -->
|
||||
<el-scrollbar class="session-list">
|
||||
<div v-if="loading" class="loading-placeholder">
|
||||
<el-icon class="is-loading"
|
||||
><component :is="useRenderIcon('ri/loader-4-line')"
|
||||
/></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="session in sessions"
|
||||
:key="session.sessionId"
|
||||
:class="[
|
||||
'session-item',
|
||||
{ active: currentSession?.sessionId === session.sessionId }
|
||||
]"
|
||||
@click="selectSession(session)"
|
||||
>
|
||||
<div class="session-info">
|
||||
<div class="session-title">{{ session.sessionTitle }}</div>
|
||||
<div class="session-meta">
|
||||
<span>{{ session.projectName }}</span>
|
||||
<span>{{ formatTime(session.lastMessageTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
link
|
||||
class="delete-btn"
|
||||
@click.stop="handleDeleteSession(session)"
|
||||
>
|
||||
<component :is="useRenderIcon(DeleteIcon)" />
|
||||
</el-button>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="sessions.length === 0"
|
||||
description="暂无会话"
|
||||
:image-size="80"
|
||||
/>
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右侧聊天区域 -->
|
||||
<div class="chat-main">
|
||||
<template v-if="currentSession">
|
||||
<!-- 会话头部 -->
|
||||
<div class="chat-header">
|
||||
<div class="header-info">
|
||||
<h4>{{ currentSession.sessionTitle }}</h4>
|
||||
<span class="project-name">{{ currentSession.projectName }}</span>
|
||||
</div>
|
||||
<el-button
|
||||
:icon="useRenderIcon(RefreshIcon)"
|
||||
@click="loadMessages(currentSession.sessionId)"
|
||||
>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div ref="messagesContainer" class="messages-container">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['message-item', msg.role]"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<el-avatar v-if="msg.role === 'user'" :size="32">
|
||||
<component :is="useRenderIcon('ri/user-line')" />
|
||||
</el-avatar>
|
||||
<el-avatar
|
||||
v-else
|
||||
:size="32"
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/robot-line')" />
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div
|
||||
class="message-text"
|
||||
v-html="msg.content.replace(/\n/g, '<br>')"
|
||||
/>
|
||||
<!-- 引用文档 -->
|
||||
<div v-if="msg.referencedDocs?.length" class="referenced-docs">
|
||||
<div class="ref-title">
|
||||
<component :is="useRenderIcon(DocumentIcon)" />
|
||||
参考文档
|
||||
</div>
|
||||
<div
|
||||
v-for="doc in msg.referencedDocs"
|
||||
:key="doc.id"
|
||||
class="ref-doc"
|
||||
>
|
||||
<span class="doc-title">{{ doc.title }}</span>
|
||||
<el-tag size="small" type="info"
|
||||
>相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-time">{{ formatTime(msg.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流式输出中的消息 -->
|
||||
<div v-if="streamingMessage" class="message-item assistant streaming">
|
||||
<div class="message-avatar">
|
||||
<el-avatar
|
||||
:size="32"
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/robot-line')" />
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div
|
||||
class="message-text"
|
||||
v-html="streamingMessage.replace(/\n/g, '<br>')"
|
||||
/>
|
||||
<div v-if="streamingReferences.length" class="referenced-docs">
|
||||
<div class="ref-title">
|
||||
<component :is="useRenderIcon(DocumentIcon)" />
|
||||
参考文档
|
||||
</div>
|
||||
<div
|
||||
v-for="doc in streamingReferences"
|
||||
:key="doc.id"
|
||||
class="ref-doc"
|
||||
>
|
||||
<span class="doc-title">{{ doc.title }}</span>
|
||||
<el-tag size="small" type="info"
|
||||
>相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-area">
|
||||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="输入您的问题..."
|
||||
:disabled="sending"
|
||||
@keydown.enter.ctrl="sendMessage"
|
||||
/>
|
||||
<div class="input-actions">
|
||||
<span class="tip">Ctrl + Enter 发送</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(SendIcon)"
|
||||
:loading="sending"
|
||||
:disabled="!inputMessage.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 未选择会话时的提示 -->
|
||||
<div v-else class="empty-chat">
|
||||
<div class="empty-icon">
|
||||
<component
|
||||
:is="useRenderIcon('ri/chat-3-line')"
|
||||
style="font-size: 64px; color: var(--el-color-primary)"
|
||||
/>
|
||||
</div>
|
||||
<h3>开始新的对话</h3>
|
||||
<p class="text-gray-400">选择一个项目开始与AI助手对话</p>
|
||||
<el-button type="primary" class="mt-4" @click="createNewSession">
|
||||
<template #icon>
|
||||
<component :is="useRenderIcon(AddIcon)" />
|
||||
</template>
|
||||
新建对话
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-chat-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.session-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-select-panel {
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.loading-placeholder {
|
||||
padding: 20px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.session-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
&:hover .delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.header-info {
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
color: #fff;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.streaming {
|
||||
.message-text {
|
||||
background: var(--el-fill-color);
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
flex-shrink: 0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
|
||||
.message-text {
|
||||
padding: 12px 16px;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: break-word;
|
||||
background: var(--el-fill-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.referenced-docs {
|
||||
padding: 8px 12px;
|
||||
margin-top: 8px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
border-radius: 8px;
|
||||
|
||||
.ref-title {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.ref-doc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
|
||||
.doc-title {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
padding: 16px 20px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-chat {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user