|
|
<template>
|
|
|
<div class="ai-chat-container">
|
|
|
<!-- 左侧会话栏 -->
|
|
|
<div :class="['sidebar', { collapsed }]">
|
|
|
<div class="sidebar-header">
|
|
|
<svg-icon class-name="search-icon" icon-class="aichat"/>
|
|
|
<span class="logo-text">AI助手</span>
|
|
|
<el-button
|
|
|
v-if="!collapsed"
|
|
|
class="collapse-btn"
|
|
|
circle
|
|
|
size="small"
|
|
|
@click="collapsed = true"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<ArrowLeft/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="sidebar-content">
|
|
|
<el-button class="new-chat-btn" type="primary" @click="createNewChat">
|
|
|
<el-icon>
|
|
|
<Plus/>
|
|
|
</el-icon>
|
|
|
新建对话
|
|
|
</el-button>
|
|
|
|
|
|
<div class="chat-list">
|
|
|
<template v-for="(group, groupKey) in groupedChats" :key="groupKey">
|
|
|
<div v-if="group.length > 0" class="group-section">
|
|
|
<div class="group-header">{{ getGroupTitle(groupKey) }}</div>
|
|
|
<div
|
|
|
v-for="chat in group"
|
|
|
:key="chat.sessionId"
|
|
|
:class="['chat-item', { active: chat.sessionId === activeChatSessionId }]"
|
|
|
@click="selectChat(chat.sessionId)"
|
|
|
>
|
|
|
<div class="chat-info">
|
|
|
<div class="chat-title-row">
|
|
|
<span class="chat-title">{{ chat.messageTopic }}</span>
|
|
|
<!-- 加载动画 -->
|
|
|
<div v-if="loadingChatId === chat.sessionId" class="loading-indicator">
|
|
|
<el-icon class="is-loading">
|
|
|
<Loading/>
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<!-- 编辑状态指示器 -->
|
|
|
<div v-if="editingChatId === chat.sessionId" class="editing-indicator">
|
|
|
<el-icon class="is-loading">
|
|
|
<Edit/>
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<!-- 删除状态指示器 -->
|
|
|
<div v-if="deletingChatId === chat.sessionId" class="deleting-indicator">
|
|
|
<el-icon class="is-loading">
|
|
|
<Delete/>
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chat-bottom-row">
|
|
|
<span class="chat-time">{{ formatTime(chat.updatedAt) }}</span>
|
|
|
<div class="chat-actions">
|
|
|
<el-button
|
|
|
circle
|
|
|
size="small"
|
|
|
@click.stop="editChatTitle(chat)"
|
|
|
title="重命名"
|
|
|
:loading="editingChatId === chat.sessionId"
|
|
|
:disabled="editingChatId === chat.sessionId || deletingChatId === chat.sessionId"
|
|
|
>
|
|
|
<el-icon v-if="editingChatId !== chat.sessionId">
|
|
|
<Edit/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
circle
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
@click.stop="handleDelete(chat.sessionId)"
|
|
|
title="删除"
|
|
|
:loading="deletingChatId === chat.sessionId"
|
|
|
:disabled="deletingChatId === chat.sessionId || editingChatId === chat.sessionId"
|
|
|
>
|
|
|
<el-icon v-if="deletingChatId !== chat.sessionId">
|
|
|
<Delete/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主内容区左上角 -->
|
|
|
<el-button
|
|
|
v-if="collapsed"
|
|
|
class="expand-btn"
|
|
|
circle
|
|
|
size="small"
|
|
|
@click="collapsed = false"
|
|
|
style="position: absolute; left: 0; top: 24px; z-index: 10;"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<ArrowRight/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
|
|
|
<!-- 主对话区 -->
|
|
|
<main class="main-content">
|
|
|
<header class="chat-header">
|
|
|
<div class="header-left">
|
|
|
<h2>{{ currentChat?.messageTopic || '新对话' }}</h2>
|
|
|
</div>
|
|
|
<div class="header-right">
|
|
|
<el-select v-model="selectedModel" placeholder="选择模型" @change="onModelChange">
|
|
|
<el-option
|
|
|
v-for="model in aiModelList"
|
|
|
:key="model.modelId"
|
|
|
:label="model.modelName"
|
|
|
:value="model.modelId"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<!-- <el-button @click="showSettings = true" title="设置">-->
|
|
|
<!-- <el-icon>-->
|
|
|
<!-- <Setting/>-->
|
|
|
<!-- </el-icon>-->
|
|
|
<!-- </el-button>-->
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<!-- 聊天消息区域 -->
|
|
|
<div class="chat-messages" ref="messagesRef">
|
|
|
<!-- 加载动画 -->
|
|
|
<div v-if="loadingChatId && activeChatSessionId && (!currentChat?.messages || currentChat.messages.length === 0)" class="loading-container">
|
|
|
<div class="loading-spinner">
|
|
|
<el-icon class="is-loading">
|
|
|
<Loading/>
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
<div class="loading-text">正在加载对话内容...</div>
|
|
|
</div>
|
|
|
|
|
|
<div v-else-if="!currentChat || !currentChat.messages || currentChat.messages.length === 0" class="welcome-message">
|
|
|
<div class="welcome-icon">🤖</div>
|
|
|
<h3>欢迎使用AI助手</h3>
|
|
|
<p>我可以帮助你回答问题、编写代码、分析数据等</p>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
v-for="(message, index) in currentChat?.messages || []"
|
|
|
:key="index"
|
|
|
:class="['message', message.role]"
|
|
|
>
|
|
|
<div class="message-avatar">
|
|
|
<img
|
|
|
v-if="message.role === 'assistant'"
|
|
|
:src="platformIcon"
|
|
|
:alt="provider"
|
|
|
/>
|
|
|
<img
|
|
|
v-else
|
|
|
src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=user"
|
|
|
alt="User"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="message-content">
|
|
|
<div class="message-text" v-html="formatMessage(message.content)"></div>
|
|
|
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 正在输入指示器 -->
|
|
|
<div v-if="isStreaming" class="message assistant">
|
|
|
<div class="message-avatar">
|
|
|
<img :src="platformIcon" alt="AI"/>
|
|
|
</div>
|
|
|
<div class="message-content">
|
|
|
<div class="message-text">
|
|
|
<div class="streaming-text" v-html="formatMessage(streamingContent)"></div>
|
|
|
<span class="cursor">|</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="message-actions">-->
|
|
|
<!-- <el-button-->
|
|
|
<!-- size="small"-->
|
|
|
<!-- type="danger"-->
|
|
|
<!-- @click="stopStreaming"-->
|
|
|
<!-- class="stop-btn"-->
|
|
|
<!-- >-->
|
|
|
<!-- <el-icon>-->
|
|
|
<!-- <Close/>-->
|
|
|
<!-- </el-icon>-->
|
|
|
<!-- 停止-->
|
|
|
<!-- </el-button>-->
|
|
|
<!-- </div>-->
|
|
|
</div>
|
|
|
|
|
|
<!-- 继续按钮区域 -->
|
|
|
<div
|
|
|
v-if="!isStreaming && streamingContent && !currentChat?.messages.some(m => m.role === 'assistant' && m.content === streamingContent)"
|
|
|
class="message assistant">
|
|
|
<div class="message-avatar">
|
|
|
<img src="https://chat.deepseek.com/logo192.png" alt="AI"/>
|
|
|
</div>
|
|
|
<div class="message-content">
|
|
|
<div class="message-text">
|
|
|
<div class="streaming-text" v-html="formatMessage(streamingContent)"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="message-actions">
|
|
|
<el-button
|
|
|
size="small"
|
|
|
type="primary"
|
|
|
@click="continueStreaming"
|
|
|
class="continue-btn"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<Position/>
|
|
|
</el-icon>
|
|
|
继续
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 输入区域 -->
|
|
|
<footer class="chat-input">
|
|
|
<div class="input-container">
|
|
|
<div class="suggestion-bar align-to-textarea">
|
|
|
<span
|
|
|
v-for="(sug, i) in suggestions"
|
|
|
:key="i"
|
|
|
class="suggestion-item"
|
|
|
@click="handleSuggestion(sug)"
|
|
|
>{{ sug }}</span>
|
|
|
</div>
|
|
|
<div class="input-area input-area-with-icons">
|
|
|
<div class="input-icons">
|
|
|
<el-button
|
|
|
circle
|
|
|
size="small"
|
|
|
@click="clearInput"
|
|
|
title="清空输入"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<Delete/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
circle
|
|
|
size="small"
|
|
|
@click="toggleHistory"
|
|
|
:type="carryHistory ? 'primary' : ''"
|
|
|
title="携带历史"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<Collection/>
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<textarea
|
|
|
v-model="inputMessage"
|
|
|
class="message-input"
|
|
|
:placeholder="inputPlaceholder"
|
|
|
:disabled="isStreaming"
|
|
|
@keydown="handleKeydown"
|
|
|
@input="autoResize"
|
|
|
ref="inputRef"
|
|
|
/>
|
|
|
<div class="input-actions">
|
|
|
<!-- <el-upload-->
|
|
|
<!-- :show-file-list="false"-->
|
|
|
<!-- :before-upload="handleFileUpload"-->
|
|
|
<!-- accept=".txt,.md,.json,.csv"-->
|
|
|
<!-- >-->
|
|
|
<!-- <el-button circle size="small" title="上传文件">-->
|
|
|
<!-- <el-icon>-->
|
|
|
<!-- <Upload/>-->
|
|
|
<!-- </el-icon>-->
|
|
|
<!-- </el-button>-->
|
|
|
<!-- </el-upload>-->
|
|
|
<!-- <el-button-->
|
|
|
<!-- type="primary"-->
|
|
|
<!-- @click="isStreaming ? stopStreaming() : sendMessage()"-->
|
|
|
<!-- >-->
|
|
|
<!-- <el-icon>-->
|
|
|
<!-- <Position v-if="!isStreaming"/>-->
|
|
|
<!-- <Close v-else/>-->
|
|
|
<!-- </el-icon>-->
|
|
|
<!-- {{ isStreaming ? '停止' : '发送' }}-->
|
|
|
<!-- </el-button>-->
|
|
|
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@click="sendMessage()"
|
|
|
:disabled = "isStreaming"
|
|
|
:loading = "isStreaming"
|
|
|
>
|
|
|
<el-icon>
|
|
|
<Position/>
|
|
|
</el-icon>
|
|
|
发送
|
|
|
</el-button>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</main>
|
|
|
|
|
|
<!-- 设置弹窗 -->
|
|
|
<el-dialog v-model="showSettings" title="AI设置" width="500px">
|
|
|
<el-form :model="settings" label-width="100px">
|
|
|
<el-form-item label="API Key">
|
|
|
<el-input v-model="settings.apiKey" placeholder="请输入API Key" show-password/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="API端点">
|
|
|
<el-input v-model="settings.apiEndpoint" placeholder="API端点地址"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="温度">
|
|
|
<el-slider
|
|
|
v-model="settings.temperature"
|
|
|
:min="0"
|
|
|
:max="2"
|
|
|
:step="0.1"
|
|
|
show-input
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="最大令牌">
|
|
|
<el-input-number
|
|
|
v-model="settings.maxTokens"
|
|
|
:min="1"
|
|
|
:max="8000"
|
|
|
:step="100"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<el-button @click="showSettings = false">取消</el-button>
|
|
|
<el-button type="primary" @click="saveSettings">保存</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import {ref, reactive, computed, nextTick, onMounted, onUnmounted} from 'vue'
|
|
|
import axios from 'axios'
|
|
|
import request from '@/utils/request';
|
|
|
import {getToken} from "@/utils/auth";
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
|
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
|
|
import {
|
|
|
ArrowLeft,
|
|
|
Plus,
|
|
|
Delete,
|
|
|
Edit,
|
|
|
Setting,
|
|
|
Position,
|
|
|
Upload,
|
|
|
Collection,
|
|
|
ArrowRight,
|
|
|
Close,
|
|
|
Loading
|
|
|
} from '@element-plus/icons-vue'
|
|
|
import service from "@/utils/request";
|
|
|
|
|
|
import {getAiModelJoinList, getAiChatMessageList, getAiChatMessages,updateAiMessageTopic,delAiMessage} from "@/api/ai/skill/aiChat"
|
|
|
import {AIModelVO} from '@/api/ai/skill/aiChat/types';
|
|
|
import {HttpStatus} from "@/enums/RespEnum";
|
|
|
|
|
|
// 类型定义
|
|
|
interface ChatMessage {
|
|
|
role: 'user' | 'assistant' | 'system'
|
|
|
content: string
|
|
|
timestamp: number
|
|
|
}
|
|
|
|
|
|
interface ChatSession {
|
|
|
sessionId: string
|
|
|
messageTopic: string
|
|
|
messages: ChatMessage[]
|
|
|
createdAt: number
|
|
|
updatedAt: number
|
|
|
}
|
|
|
|
|
|
interface ModelConfig {
|
|
|
label: string
|
|
|
value: string
|
|
|
apiEndpoint: string
|
|
|
modelType: string
|
|
|
}
|
|
|
|
|
|
interface Settings {
|
|
|
apiKey: string
|
|
|
apiEndpoint: string
|
|
|
temperature: number
|
|
|
maxTokens: number
|
|
|
}
|
|
|
|
|
|
// 响应式数据
|
|
|
const collapsed = ref(false)
|
|
|
const activeChatSessionId = ref('')//当前对话会话id
|
|
|
const inputMessage = ref('') //输入框输入的信息
|
|
|
const isStreaming = ref(false) //代表是否正在发送信息
|
|
|
const streamingContent = ref('')
|
|
|
const showSettings = ref(false)
|
|
|
const carryHistory = ref(true)
|
|
|
const messagesRef = ref<HTMLElement>()
|
|
|
const inputRef = ref<HTMLTextAreaElement>()
|
|
|
const loading = ref(false)
|
|
|
|
|
|
// 添加请求取消控制器
|
|
|
const currentRequestController = ref<AbortController | null>(null)
|
|
|
|
|
|
// 添加加载状态跟踪
|
|
|
const loadingChatId = ref<string | null>(null)
|
|
|
|
|
|
// 添加编辑状态跟踪
|
|
|
const editingChatId = ref<string | null>(null)
|
|
|
|
|
|
// const sessionMap = ref(new Map());//根据sessionId组装会话内容
|
|
|
|
|
|
const aiModelList = ref<AIModelVO[]>([])
|
|
|
const provider = ref('');//ai平台编码
|
|
|
const platformIcon = ref('');//ai平台图标
|
|
|
|
|
|
// 聊天会话列表
|
|
|
const chatList = ref<ChatSession[]>([])
|
|
|
|
|
|
|
|
|
// 可用模型
|
|
|
// const availableModels = ref<ModelConfig[]>([
|
|
|
// {label: 'DeepSeek R1', value: 'deepseek-r1', apiEndpoint: 'https://api.deepseek.com/v1/chat/completions'},
|
|
|
// {label: 'GPT-3.5 Turbo', value: 'gpt-3.5-turbo', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
|
|
|
// {label: 'GPT-4', value: 'gpt-4', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
|
|
|
// {
|
|
|
// label: '文心一言',
|
|
|
// value: 'ernie-bot',
|
|
|
// apiEndpoint: 'https://wenxin.baidu.com/moduleApi/portal/api/rest/1.0/ernie_bot'
|
|
|
// },
|
|
|
// ])
|
|
|
|
|
|
const selectedModel = ref(0)
|
|
|
|
|
|
const getAiChatSessions = async () => {
|
|
|
// loading.value = true;
|
|
|
const res = await getAiChatMessageList({});
|
|
|
chatList.value = res.data;
|
|
|
console.log(res)
|
|
|
// platformList.value = res.data;
|
|
|
// loading.value = false;
|
|
|
}
|
|
|
|
|
|
|
|
|
const getAiModelList = async () => {
|
|
|
// loading.value = true;
|
|
|
const res = await getAiModelJoinList({modelTypeId: 1});
|
|
|
aiModelList.value = res.data;
|
|
|
await setDefaultAiModel();
|
|
|
console.log(res)
|
|
|
// platformList.value = res.data;
|
|
|
// loading.value = false;
|
|
|
}
|
|
|
|
|
|
const setDefaultAiModel = async () => {
|
|
|
aiModelList.value.forEach((item: AIModelVO) => {
|
|
|
if (item.defaultFlag === "1") {
|
|
|
// alert(JSON.stringify(item))
|
|
|
selectedModel.value = item.modelId;
|
|
|
provider.value = item.platformCode;
|
|
|
console.log(item.platformIcon)
|
|
|
platformIcon.value = item.platformIcon;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 设置
|
|
|
const settings = reactive<Settings>({
|
|
|
apiKey: '',
|
|
|
apiEndpoint: 'https://api.deepseek.com/v1/chat/completions',
|
|
|
temperature: 0.7,
|
|
|
maxTokens: 2048
|
|
|
})
|
|
|
|
|
|
// 当前对话
|
|
|
const currentChat = computed(() =>
|
|
|
chatList.value.find(chat => chat.sessionId === activeChatSessionId.value)
|
|
|
)
|
|
|
|
|
|
const inputPlaceholder = computed(() =>
|
|
|
isStreaming.value ? 'AI正在思考中...' : '输入消息，按Enter发送，Shift+Enter换行'
|
|
|
)
|
|
|
|
|
|
// 按时间分组的聊天列表
|
|
|
const groupedChats = computed(() => {
|
|
|
const now = new Date()
|
|
|
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
|
|
const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
|
|
|
const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
|
const monthAgo = new Date(today.getFullYear(), now.getMonth() - 1, now.getDate())
|
|
|
|
|
|
const groups = {
|
|
|
today: [] as ChatSession[],
|
|
|
yesterday: [] as ChatSession[],
|
|
|
week: [] as ChatSession[],
|
|
|
month: [] as ChatSession[],
|
|
|
older: [] as ChatSession[]
|
|
|
}
|
|
|
|
|
|
chatList.value.forEach(chat => {
|
|
|
const chatDate = new Date(chat.updatedAt)
|
|
|
if (chatDate >= today) {
|
|
|
groups.today.push(chat)
|
|
|
} else if (chatDate >= yesterday) {
|
|
|
groups.yesterday.push(chat)
|
|
|
} else if (chatDate >= weekAgo) {
|
|
|
groups.week.push(chat)
|
|
|
} else if (chatDate >= monthAgo) {
|
|
|
groups.month.push(chat)
|
|
|
} else {
|
|
|
groups.older.push(chat)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
return groups
|
|
|
})
|
|
|
|
|
|
// 获取分组标题
|
|
|
const getGroupTitle = (groupKey: string) => {
|
|
|
const titles = {
|
|
|
today: '今天',
|
|
|
yesterday: '昨天',
|
|
|
week: '一周内',
|
|
|
month: '一月内',
|
|
|
older: '更早'
|
|
|
}
|
|
|
return titles[groupKey] || ''
|
|
|
}
|
|
|
|
|
|
// 检查分组是否有内容
|
|
|
const hasGroupContent = (groupKey: string) => {
|
|
|
return groupedChats.value[groupKey] && groupedChats.value[groupKey].length > 0
|
|
|
}
|
|
|
|
|
|
//新建对话
|
|
|
function createNewChat(){
|
|
|
activeChatSessionId.value = undefined
|
|
|
inputMessage.value = ''
|
|
|
}
|
|
|
|
|
|
|
|
|
// 新建对话后第一次问答
|
|
|
function newChatFirstMessage() {
|
|
|
const newChat: ChatSession = {
|
|
|
sessionId: generateUUID(),
|
|
|
messageTopic: '',
|
|
|
messages: [],
|
|
|
createdAt: Date.now(),
|
|
|
updatedAt: Date.now()
|
|
|
}
|
|
|
chatList.value.unshift(newChat)
|
|
|
activeChatSessionId.value = newChat.sessionId
|
|
|
nextTick(() => {
|
|
|
scrollToBottom()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const selectChat = async (chatSessionId: string) => {
|
|
|
// 取消之前的请求
|
|
|
if (currentRequestController.value) {
|
|
|
currentRequestController.value.abort()
|
|
|
currentRequestController.value = null
|
|
|
}
|
|
|
|
|
|
// 清理之前的编辑状态
|
|
|
editingChatId.value = null
|
|
|
// 清理之前的删除状态
|
|
|
deletingChatId.value = null
|
|
|
|
|
|
activeChatSessionId.value = chatSessionId
|
|
|
console.log(activeChatSessionId.value)
|
|
|
|
|
|
if (!currentChat.value.messages) {
|
|
|
console.log("----")
|
|
|
|
|
|
// 设置加载状态
|
|
|
loadingChatId.value = chatSessionId
|
|
|
|
|
|
// 创建新的AbortController
|
|
|
currentRequestController.value = new AbortController()
|
|
|
|
|
|
try {
|
|
|
const res = await getAiChatMessages(activeChatSessionId.value);
|
|
|
|
|
|
// 验证当前会话ID是否还是用户选择的那个
|
|
|
if (activeChatSessionId.value === chatSessionId) {
|
|
|
console.log(res)
|
|
|
// res.data已经是对象数组
|
|
|
currentChat.value.messages = res.data.map(item => {
|
|
|
return {
|
|
|
role: item.role,
|
|
|
content: item.content,
|
|
|
timestamp: item.timestamp
|
|
|
// 可以根据需要转换字段
|
|
|
};
|
|
|
});
|
|
|
} else {
|
|
|
console.log('会话已切换，忽略此请求结果')
|
|
|
return
|
|
|
}
|
|
|
} catch (error: any) {
|
|
|
// 如果是取消请求导致的错误，不显示错误信息
|
|
|
if (error.name !== 'AbortError') {
|
|
|
console.error('加载消息失败:', error)
|
|
|
ElMessage.error('加载消息失败')
|
|
|
}
|
|
|
} finally {
|
|
|
// 清除加载状态
|
|
|
if (loadingChatId.value === chatSessionId) {
|
|
|
loadingChatId.value = null
|
|
|
}
|
|
|
currentRequestController.value = null
|
|
|
}
|
|
|
} else {
|
|
|
// 如果消息已存在，清除加载状态
|
|
|
loadingChatId.value = null
|
|
|
}
|
|
|
|
|
|
// console.log("-=-"+JSON.stringify(currentChat.value.messages, null, 2))
|
|
|
nextTick(() => {
|
|
|
scrollToBottom()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
// function selectChat(chatSessionId: string) {
|
|
|
// activeChatSessionId.value = chatSessionId
|
|
|
// messages.value = sessionMap.value.get(activeChatSessionId.value)
|
|
|
// if(!messages.value){
|
|
|
// messages.value = [];
|
|
|
// const res = await getAiChatMessages(activeChatSessionId.value);
|
|
|
// chatList.value = res.data;
|
|
|
//
|
|
|
// }
|
|
|
// console.log(messages.value)
|
|
|
//
|
|
|
// nextTick(() => {
|
|
|
// scrollToBottom()
|
|
|
// })
|
|
|
// }
|
|
|
const editChatTitle = async (chat: ChatSession) => {
|
|
|
ElMessageBox.prompt('请输入新的对话标题', '重命名', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
inputValue: chat.messageTopic
|
|
|
}).then(({value}) => {
|
|
|
if (value && value.trim()) {
|
|
|
// 设置编辑状态，显示加载动画
|
|
|
editingChatId.value = chat.sessionId
|
|
|
|
|
|
updateAiMessageTopic({sessionId:chat.sessionId,messageTopic:value.trim()}).then((res: any) => {
|
|
|
chat.messageTopic = value.trim()
|
|
|
chat.updatedAt = Date.now()
|
|
|
ElMessage.success('重命名成功')
|
|
|
// 清除编辑状态，隐藏加载动画
|
|
|
editingChatId.value = null
|
|
|
}).catch((error: any) => {
|
|
|
console.error('重命名失败:', error)
|
|
|
ElMessage.error('重命名失败，请重试')
|
|
|
// 清除编辑状态，隐藏加载动画
|
|
|
editingChatId.value = null
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
// function editChatTitle(chat: ChatSession) {
|
|
|
// ElMessageBox.prompt('请输入新的对话标题', '重命名', {
|
|
|
// confirmButtonText: '确定',
|
|
|
// cancelButtonText: '取消',
|
|
|
// inputValue: chat.messageTopic
|
|
|
// }).then(({value}) => {
|
|
|
// if (value && value.trim()) {
|
|
|
// const res = await updateAiMessageTopic({sessionId:chat.sessionId,messageTopic:value.trim()});
|
|
|
//
|
|
|
// chat.messageTopic = value.trim()
|
|
|
// chat.updatedAt = Date.now()
|
|
|
// ElMessage.success('重命名成功')
|
|
|
// }
|
|
|
// })
|
|
|
// }
|
|
|
|
|
|
// 添加删除状态跟踪
|
|
|
const deletingChatId = ref<string | null>(null)
|
|
|
|
|
|
/** 删除按钮操作 */
|
|
|
const handleDelete = async (sessionId: string) => {
|
|
|
// 如果正在删除，阻止重复操作
|
|
|
if (deletingChatId.value) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
// 显示确认对话框
|
|
|
await proxy?.$modal.confirm('确定要删除这个对话么？')
|
|
|
|
|
|
// 设置删除状态，显示加载动画
|
|
|
deletingChatId.value = sessionId
|
|
|
|
|
|
// 调用删除API
|
|
|
await delAiMessage(sessionId)
|
|
|
|
|
|
// 删除成功，从本地列表中移除
|
|
|
const index = chatList.value.findIndex(chat => chat.sessionId === sessionId)
|
|
|
if (index > -1) {
|
|
|
chatList.value.splice(index, 1)
|
|
|
|
|
|
// 判断删除的是否是当前会话
|
|
|
if (activeChatSessionId.value === sessionId) {
|
|
|
createNewChat()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
proxy?.$modal.msgSuccess("删除成功")
|
|
|
|
|
|
} catch (error: any) {
|
|
|
if (error !== 'cancel') { // 不是用户取消
|
|
|
console.error('删除失败:', error)
|
|
|
ElMessage.error('删除失败，请重试')
|
|
|
}
|
|
|
} finally {
|
|
|
// 清除删除状态，隐藏加载动画
|
|
|
deletingChatId.value = null
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function deleteChat(sessionId: string) {
|
|
|
ElMessageBox.confirm('确定要删除这个对话吗？', '确认删除', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
const index = chatList.value.findIndex(chat => chat.sessionId === sessionId)
|
|
|
if (index > -1) {
|
|
|
chatList.value.splice(index, 1)
|
|
|
if (activeChatSessionId.value === sessionId) {
|
|
|
activeChatSessionId.value = chatList.value[0]?.sessionId || ''
|
|
|
}
|
|
|
ElMessage.success('删除成功')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function onModelChange() {
|
|
|
const model = aiModelList.value.find(m => m.modelId === selectedModel.value)
|
|
|
if (model) {
|
|
|
provider.value = model.platformCode
|
|
|
platformIcon.value = model.platformIcon;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function clearInput() {
|
|
|
inputMessage.value = ''
|
|
|
nextTick(() => {
|
|
|
autoResize()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function toggleHistory() {
|
|
|
carryHistory.value = !carryHistory.value
|
|
|
ElMessage.info(carryHistory.value ? '已开启历史记录' : '已关闭历史记录')
|
|
|
}
|
|
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
|
e.preventDefault()
|
|
|
sendMessage()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function autoResize() {
|
|
|
const textarea = inputRef.value
|
|
|
if (textarea) {
|
|
|
textarea.style.height = 'auto'
|
|
|
textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleFileUpload(file: File) {
|
|
|
const reader = new FileReader()
|
|
|
reader.onload = (e) => {
|
|
|
const content = e.target?.result as string
|
|
|
inputMessage.value = `文件内容：\n${content}`
|
|
|
autoResize()
|
|
|
}
|
|
|
reader.readAsText(file)
|
|
|
return false // 阻止自动上传
|
|
|
}
|
|
|
|
|
|
function generateUUID() {
|
|
|
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
|
|
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 发送消息
|
|
|
const sendMessage = async () => {
|
|
|
// 使用
|
|
|
//输入信息。isStreaming代表是否正在发送信息
|
|
|
if (!inputMessage.value.trim() || isStreaming.value) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
console.log(activeChatSessionId.value)
|
|
|
// 如果没有当前对话，自动创建一个新的
|
|
|
if (!currentChat.value) {
|
|
|
newChatFirstMessage()
|
|
|
}
|
|
|
|
|
|
const userMsg = inputMessage.value.trim()
|
|
|
|
|
|
//用户当前发送的内容
|
|
|
const userMessage: ChatMessage = {
|
|
|
role: 'user',
|
|
|
content: userMsg,
|
|
|
timestamp: Date.now()
|
|
|
}
|
|
|
|
|
|
// 添加用户消息
|
|
|
currentChat.value.messages.push(userMessage)
|
|
|
currentChat.value.updatedAt = Date.now()
|
|
|
|
|
|
// 更新标题（如果是第一条消息）
|
|
|
if (currentChat.value.messages.length === 1) {
|
|
|
currentChat.value.messageTopic = userMessage.content.slice(0, 20) + (userMessage.content.length > 20 ? '...' : '')
|
|
|
}
|
|
|
|
|
|
inputMessage.value = ''
|
|
|
loading.value = true
|
|
|
isStreaming.value = true
|
|
|
streamingContent.value = ''
|
|
|
|
|
|
scrollToBottom()
|
|
|
|
|
|
try {
|
|
|
//判断是否携带历史记录
|
|
|
let sendMessages = [];
|
|
|
if (carryHistory.value) {
|
|
|
sendMessages = currentChat.value.messages;
|
|
|
} else {
|
|
|
sendMessages.push(userMessage);
|
|
|
}
|
|
|
|
|
|
console.log(sendMessages.map(m => ({role: m.role, content: m.content})));
|
|
|
|
|
|
const response = await service.post('/ai/assistant/chatStream?provider=' + provider.value, {
|
|
|
messages: sendMessages.map(m => ({role: m.role, content: m.content})),
|
|
|
carryHistoryFlag: carryHistory.value ? "1" : "0",
|
|
|
modelId: selectedModel.value,
|
|
|
sessionId: activeChatSessionId.value
|
|
|
}, {
|
|
|
responseType: 'text',
|
|
|
headers: {
|
|
|
'Authorization': 'Bearer ' + getToken(),
|
|
|
'Content-Type': 'application/json'
|
|
|
},
|
|
|
onDownloadProgress: progress => {
|
|
|
const raw = progress.event.target.responseText
|
|
|
console.log(1)
|
|
|
console.log(raw)
|
|
|
console.log(2)
|
|
|
processStream(raw)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
console.log("----" + streamingContent.value);
|
|
|
// 添加用户消息到messages数组
|
|
|
currentChat.value.messages.push({
|
|
|
role: 'assistant',
|
|
|
content: streamingContent.value,
|
|
|
timestamp: Date.now()
|
|
|
})
|
|
|
} catch (error) {
|
|
|
currentChat.value.messages.push({
|
|
|
role: 'assistant',
|
|
|
content: '出错: ' + (error as Error).message,
|
|
|
timestamp: Date.now()
|
|
|
})
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
isStreaming.value = false;
|
|
|
streamingContent.value = ''
|
|
|
scrollToBottom()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 处理流数据
|
|
|
const processStream = (raw) => {
|
|
|
const chunks = raw.split('\n\n').filter(c => c.startsWith('data:'))
|
|
|
let fullText = ''
|
|
|
|
|
|
chunks.forEach(chunk => {
|
|
|
// console.log(chunk)
|
|
|
const content = chunk.substring(5)
|
|
|
if (content && content !== '[DONE]') {
|
|
|
fullText += content
|
|
|
}
|
|
|
})
|
|
|
|
|
|
fullText = fullText.replaceAll("data:", "");
|
|
|
if (fullText.length > streamingContent.value.length) {
|
|
|
streamingContent.value = fullText
|
|
|
scrollToBottom()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
async function streamChatResponse(userInput: string) {
|
|
|
if (!currentChat.value) return
|
|
|
|
|
|
// 构建消息历史
|
|
|
const messages = carryHistory.value
|
|
|
? currentChat.value.messages.map(msg => ({role: msg.role, content: msg.content}))
|
|
|
: [{role: 'user' as const, content: userInput}]
|
|
|
|
|
|
// 创建流式请求
|
|
|
const stream = await createStreamRequest(messages)
|
|
|
const reader = stream.getReader()
|
|
|
const decoder = new TextDecoder()
|
|
|
|
|
|
// 添加AI消息占位
|
|
|
currentChat.value.messages.push({
|
|
|
role: 'assistant',
|
|
|
content: '',
|
|
|
timestamp: Date.now()
|
|
|
})
|
|
|
|
|
|
try {
|
|
|
while (true) {
|
|
|
const {done, value} = await reader.read()
|
|
|
if (done) break
|
|
|
|
|
|
const chunk = decoder.decode(value)
|
|
|
const lines = chunk.split('\n')
|
|
|
|
|
|
for (const line of lines) {
|
|
|
if (line.startsWith('data: ')) {
|
|
|
const data = line.slice(6)
|
|
|
if (data === '[DONE]') {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const parsed = JSON.parse(data)
|
|
|
if (parsed.choices?.[0]?.delta?.content) {
|
|
|
const content = parsed.choices[0].delta.content
|
|
|
streamingContent.value += content
|
|
|
|
|
|
// 更新最后一条AI消息
|
|
|
const lastMessage = currentChat.value.messages[currentChat.value.messages.length - 1]
|
|
|
if (lastMessage.role === 'assistant') {
|
|
|
lastMessage.content = streamingContent.value
|
|
|
}
|
|
|
|
|
|
nextTick(() => {
|
|
|
scrollToBottom()
|
|
|
})
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error('解析流式数据失败:', e)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} finally {
|
|
|
reader.releaseLock()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function createStreamRequest(messages: Array<{ role: string; content: string }>) {
|
|
|
// 用 fetch 发送 POST 请求，接收流式响应
|
|
|
const response = await fetch('/api/ai/chat/stream', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json'
|
|
|
// 如果有token等鉴权信息可加在这里
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
messages,
|
|
|
model: selectedModel.value,
|
|
|
temperature: settings.temperature,
|
|
|
max_tokens: settings.maxTokens,
|
|
|
api_key: settings.apiKey,
|
|
|
api_endpoint: settings.apiEndpoint
|
|
|
})
|
|
|
});
|
|
|
|
|
|
if (!response.body) throw new Error('No response body');
|
|
|
// 直接返回 ReadableStream，兼容原有逻辑
|
|
|
return response.body;
|
|
|
}
|
|
|
|
|
|
function stopStreaming() {
|
|
|
isStreaming.value = false;
|
|
|
streamingContent.value = '';
|
|
|
ElMessage.info('已停止AI思考');
|
|
|
}
|
|
|
|
|
|
function continueStreaming() {
|
|
|
isStreaming.value = true;
|
|
|
streamingContent.value = '';
|
|
|
sendMessage();
|
|
|
}
|
|
|
|
|
|
function scrollToBottom() {
|
|
|
nextTick(() => {
|
|
|
if (messagesRef.value) {
|
|
|
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function formatMessage(content: string) {
|
|
|
// 简单的markdown格式化
|
|
|
return content
|
|
|
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
|
|
.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
|
|
.replace(/`(.*?)`/g, '<code>$1</code>')
|
|
|
.replace(/\n/g, '<br>')
|
|
|
}
|
|
|
|
|
|
function formatTime(timestamp: number) {
|
|
|
const date = new Date(timestamp)
|
|
|
const now = new Date()
|
|
|
const diff = now.getTime() - date.getTime()
|
|
|
|
|
|
if (diff < 60000) { // 1分钟内
|
|
|
return '刚刚'
|
|
|
} else if (diff < 3600000) { // 1小时内
|
|
|
return `${Math.floor(diff / 60000)}分钟前`
|
|
|
} else if (diff < 86400000) { // 1天内
|
|
|
return `${Math.floor(diff / 3600000)}小时前`
|
|
|
} else {
|
|
|
return date.toLocaleDateString()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function saveSettings() {
|
|
|
// 保存设置到localStorage
|
|
|
localStorage.setItem('ai-chat-settings', JSON.stringify(settings))
|
|
|
ElMessage.success('设置已保存')
|
|
|
showSettings.value = false
|
|
|
}
|
|
|
|
|
|
const suggestions = [
|
|
|
'智能制造MES介绍',
|
|
|
'仓储管理介绍',
|
|
|
'质量管理介绍',
|
|
|
'设备管理介绍',
|
|
|
]
|
|
|
|
|
|
function handleSuggestion(sug: string) {
|
|
|
if (isStreaming.value) return
|
|
|
createNewChat()
|
|
|
inputMessage.value = sug
|
|
|
nextTick(() => {
|
|
|
autoResize()
|
|
|
sendMessage()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 生命周期
|
|
|
onMounted(() => {
|
|
|
getAiChatSessions();
|
|
|
getAiModelList();
|
|
|
|
|
|
// availableModels.value = [
|
|
|
// {label: '产品知识库', value: 'deepseek-r1', apiEndpoint: 'https://api.deepseek.com/v1/chat/completions'},
|
|
|
// {label: '设备知识库', value: 'gpt-3.5-turbo', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
|
|
|
// {label: '维修知识库', value: 'gpt-4', apiEndpoint: 'https://api.openai.com/v1/chat/completions'},
|
|
|
// ]
|
|
|
|
|
|
// 添加mock数据
|
|
|
const mockChats: ChatSession[] = [
|
|
|
{
|
|
|
sessionId: '1',
|
|
|
messageTopic: '如何配置产品参数？',
|
|
|
messages: [
|
|
|
{
|
|
|
role: 'user',
|
|
|
content: '我想了解如何配置产品参数',
|
|
|
timestamp: Date.now() - 2 * 60 * 60 * 1000 // 2小时前
|
|
|
},
|
|
|
{
|
|
|
role: 'assistant',
|
|
|
content: '产品参数配置需要按照以下步骤进行...',
|
|
|
timestamp: Date.now() - 2 * 60 * 60 * 1000 + 60000
|
|
|
}
|
|
|
],
|
|
|
createdAt: Date.now() - 2 * 60 * 60 * 1000,
|
|
|
updatedAt: Date.now() - 2 * 60 * 60 * 1000
|
|
|
},
|
|
|
{
|
|
|
sessionId: '2',
|
|
|
messageTopic: '设备故障排查指南',
|
|
|
messages: [
|
|
|
{
|
|
|
role: 'user',
|
|
|
content: '设备出现故障，需要排查指南',
|
|
|
timestamp: Date.now() - 24 * 60 * 60 * 1000 // 1天前
|
|
|
},
|
|
|
{
|
|
|
role: 'assistant',
|
|
|
content: '设备故障排查需要按照以下流程...',
|
|
|
timestamp: Date.now() - 24 * 60 * 60 * 1000 + 60000
|
|
|
}
|
|
|
],
|
|
|
createdAt: Date.now() - 24 * 60 * 60 * 1000,
|
|
|
updatedAt: Date.now() - 24 * 60 * 60 * 1000
|
|
|
},
|
|
|
{
|
|
|
sessionId: '3',
|
|
|
messageTopic: '维修知识库查询',
|
|
|
messages: [
|
|
|
{
|
|
|
role: 'user',
|
|
|
content: '查询维修相关的知识',
|
|
|
timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000 // 3天前
|
|
|
},
|
|
|
{
|
|
|
role: 'assistant',
|
|
|
content: '维修知识库包含以下内容...',
|
|
|
timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000 + 60000
|
|
|
}
|
|
|
],
|
|
|
createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000,
|
|
|
updatedAt: Date.now() - 3 * 24 * 60 * 60 * 1000
|
|
|
},
|
|
|
{
|
|
|
sessionId: '4',
|
|
|
messageTopic: '系统配置优化建议',
|
|
|
messages: [
|
|
|
{
|
|
|
role: 'user',
|
|
|
content: '系统配置需要优化，有什么建议？',
|
|
|
timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 // 1周前
|
|
|
},
|
|
|
{
|
|
|
role: 'assistant',
|
|
|
content: '系统配置优化建议如下...',
|
|
|
timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 60000
|
|
|
}
|
|
|
],
|
|
|
createdAt: Date.now() - 7 * 24 * 60 * 60 * 1000,
|
|
|
updatedAt: Date.now() - 7 * 24 * 60 * 60 * 1000
|
|
|
},
|
|
|
{
|
|
|
sessionId: '5',
|
|
|
messageTopic: '历史数据分析报告',
|
|
|
messages: [
|
|
|
{
|
|
|
role: 'user',
|
|
|
content: '需要分析历史数据，生成报告',
|
|
|
timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 // 1月前
|
|
|
},
|
|
|
{
|
|
|
role: 'assistant',
|
|
|
content: '历史数据分析报告已生成...',
|
|
|
timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 60000
|
|
|
}
|
|
|
],
|
|
|
createdAt: Date.now() - 30 * 24 * 60 * 60 * 1000,
|
|
|
updatedAt: Date.now() - 30 * 24 * 60 * 60 * 1000
|
|
|
}
|
|
|
]
|
|
|
|
|
|
// 将mock数据添加到聊天列表
|
|
|
// chatList.value = mockChats
|
|
|
|
|
|
// 加载设置
|
|
|
const savedSettings = localStorage.getItem('ai-chat-settings')
|
|
|
if (savedSettings) {
|
|
|
Object.assign(settings, JSON.parse(savedSettings))
|
|
|
}
|
|
|
|
|
|
// 创建默认对话 - 确保用户进入时就有新建对话状态
|
|
|
// createNewChat()
|
|
|
|
|
|
// 下拉列表默认值：根据settings.apiEndpoint自动匹配
|
|
|
// const matched = availableModels.value.find(m => m.apiEndpoint === settings.apiEndpoint)
|
|
|
// if (matched) {
|
|
|
// selectedModel.value = matched.value
|
|
|
// } else if (!selectedModel.value && availableModels.value.length > 0) {
|
|
|
// selectedModel.value = availableModels.value[0].value
|
|
|
// }
|
|
|
|
|
|
// 自动调整输入框高度
|
|
|
autoResize()
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
// 清理工作
|
|
|
if (currentRequestController.value) {
|
|
|
currentRequestController.value.abort()
|
|
|
}
|
|
|
// 清理加载状态
|
|
|
loadingChatId.value = null
|
|
|
// 清理编辑状态
|
|
|
editingChatId.value = null
|
|
|
// 清理删除状态
|
|
|
deletingChatId.value = null
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.ai-chat-container {
|
|
|
display: flex;
|
|
|
height: 93vh;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
width: 300px;
|
|
|
background: #f1f2f4;
|
|
|
/* border-right: 1px solid #e0e0e0; */
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
transition: all 0.3s ease;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.sidebar.collapsed {
|
|
|
width: 60px;
|
|
|
}
|
|
|
|
|
|
.sidebar-header {
|
|
|
padding: 12px 16px;
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.logo-img {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
.logo-text {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.collapse-btn {
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
|
|
|
.sidebar-content {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 12px 6px 12px 6px;
|
|
|
overflow: hidden;
|
|
|
min-height: 0;
|
|
|
}
|
|
|
|
|
|
.new-chat-btn {
|
|
|
margin-bottom: 16px;
|
|
|
width: 100%;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.chat-list {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
padding-right: 8px;
|
|
|
min-height: 0;
|
|
|
}
|
|
|
|
|
|
.group-header {
|
|
|
font-size: 14px;
|
|
|
color: #999;
|
|
|
padding: 6px 0;
|
|
|
margin-bottom: 6px;
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
}
|
|
|
|
|
|
.group-section {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
.chat-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 8px;
|
|
|
margin-bottom: 6px;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.chat-item:hover {
|
|
|
background: #f0f0f0;
|
|
|
}
|
|
|
|
|
|
.chat-item.active {
|
|
|
background: #e3f2fd;
|
|
|
border: 1px solid #2196f3;
|
|
|
}
|
|
|
|
|
|
.chat-info {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.chat-title-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
margin-bottom: 2px;
|
|
|
}
|
|
|
|
|
|
.chat-title {
|
|
|
display: block;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
max-width: calc(100% - 110px);
|
|
|
}
|
|
|
|
|
|
.loading-indicator {
|
|
|
margin-left: 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.loading-indicator .el-icon {
|
|
|
font-size: 14px;
|
|
|
color: #409EFF;
|
|
|
animation: rotate 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes rotate {
|
|
|
from {
|
|
|
transform: rotate(0deg);
|
|
|
}
|
|
|
to {
|
|
|
transform: rotate(360deg);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.editing-indicator {
|
|
|
margin-left: 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.editing-indicator .el-icon {
|
|
|
font-size: 14px;
|
|
|
color: #E6A23C;
|
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
0%, 100% {
|
|
|
opacity: 1;
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
50% {
|
|
|
opacity: 0.7;
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.deleting-indicator {
|
|
|
margin-left: 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.deleting-indicator .el-icon {
|
|
|
font-size: 14px;
|
|
|
color: #F56C6C;
|
|
|
animation: shake 0.5s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes shake {
|
|
|
0%, 100% {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
25% {
|
|
|
transform: translateX(-2px);
|
|
|
}
|
|
|
75% {
|
|
|
transform: translateX(2px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat-bottom-row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.chat-time {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.chat-actions {
|
|
|
display: flex;
|
|
|
gap: 4px;
|
|
|
justify-content: flex-end;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.2s;
|
|
|
}
|
|
|
|
|
|
.chat-item:hover .chat-actions {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
.chat-header {
|
|
|
padding: 16px 24px;
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.header-left h2 {
|
|
|
margin: 0;
|
|
|
font-size: 20px;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.header-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
width: 260px;
|
|
|
}
|
|
|
|
|
|
.chat-messages {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
padding: 24px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
}
|
|
|
|
|
|
.loading-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 80px 0;
|
|
|
color: #999;
|
|
|
min-height: 300px;
|
|
|
}
|
|
|
|
|
|
.loading-spinner {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.loading-spinner .el-icon {
|
|
|
font-size: 48px;
|
|
|
color: #409EFF;
|
|
|
animation: rotate 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
.loading-text {
|
|
|
font-size: 16px;
|
|
|
color: #666;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.welcome-message {
|
|
|
text-align: center;
|
|
|
padding: 60px 20px;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.welcome-icon {
|
|
|
font-size: 48px;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
.welcome-message h3 {
|
|
|
margin: 0 0 8px 0;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.welcome-message p {
|
|
|
margin: 0;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
max-width: 70%;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.message.user {
|
|
|
align-self: flex-end;
|
|
|
flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
.message-avatar {
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.message-avatar img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.message-text {
|
|
|
padding: 12px 16px;
|
|
|
border-radius: 12px;
|
|
|
background: #f0f0f0;
|
|
|
color: #333;
|
|
|
line-height: 1.5;
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
.message.user .message-text {
|
|
|
background: #2196f3;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.message.assistant .message-text {
|
|
|
background: #f5f5f5;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.message-actions {
|
|
|
position: absolute;
|
|
|
right: -80px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.stop-btn, .continue-btn {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
margin-top: 4px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.message.user .message-time {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.streaming-text {
|
|
|
display: inline;
|
|
|
}
|
|
|
|
|
|
.cursor {
|
|
|
animation: blink 1s infinite;
|
|
|
color: #2196f3;
|
|
|
}
|
|
|
|
|
|
@keyframes blink {
|
|
|
0%, 50% {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
51%, 100% {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat-input {
|
|
|
padding: 16px 24px;
|
|
|
border-top: 1px solid #e0e0e0;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.input-container {
|
|
|
max-width: 800px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.input-toolbar {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.input-toolbar.left-toolbar {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.suggestion-bar {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 12px;
|
|
|
margin-bottom: 8px;
|
|
|
/* 新增：与输入区宽度对齐 */
|
|
|
max-width: 100%;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 0;
|
|
|
padding-right: 0;
|
|
|
}
|
|
|
|
|
|
.suggestion-item {
|
|
|
background: #f0f6ff;
|
|
|
color: #409EFF;
|
|
|
border-radius: 16px;
|
|
|
padding: 6px 18px;
|
|
|
font-size: 15px;
|
|
|
cursor: pointer;
|
|
|
transition: background 0.2s, color 0.2s;
|
|
|
border: 1px solid #e0eaff;
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
.suggestion-item:hover {
|
|
|
background: #409EFF;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.input-area {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.input-area.input-area-with-icons {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
gap: 8px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.input-icons {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 600px) {
|
|
|
.input-icons {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
margin-bottom: 0;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.message-input {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.message-input {
|
|
|
flex: 1;
|
|
|
min-height: 44px;
|
|
|
max-height: 200px;
|
|
|
padding: 12px 16px;
|
|
|
border: 1px solid #d0d0d0;
|
|
|
border-radius: 8px;
|
|
|
resize: none;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
outline: none;
|
|
|
transition: border-color 0.2s;
|
|
|
}
|
|
|
|
|
|
.message-input:focus {
|
|
|
border-color: #2196f3;
|
|
|
}
|
|
|
|
|
|
.message-input:disabled {
|
|
|
background: #f5f5f5;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
.input-actions {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 768px) {
|
|
|
.sidebar {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
height: 100vh;
|
|
|
z-index: 1000;
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
|
|
|
.sidebar:not(.collapsed) {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
max-width: 90%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 滚动条样式 */
|
|
|
.chat-messages::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
}
|
|
|
|
|
|
.chat-messages::-webkit-scrollbar-track {
|
|
|
background: #f1f1f1;
|
|
|
}
|
|
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb {
|
|
|
background: #c1c1c1;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb:hover {
|
|
|
background: #a8a8a8;
|
|
|
}
|
|
|
|
|
|
/* 左侧滚动条样式 */
|
|
|
.chat-list::-webkit-scrollbar {
|
|
|
width: 8px;
|
|
|
}
|
|
|
|
|
|
.chat-list::-webkit-scrollbar-track {
|
|
|
background: #f0f0f0;
|
|
|
border-radius: 4px;
|
|
|
margin: 4px 0;
|
|
|
}
|
|
|
|
|
|
.chat-list::-webkit-scrollbar-thumb {
|
|
|
background: #b0b0b0;
|
|
|
border-radius: 4px;
|
|
|
transition: background 0.2s;
|
|
|
border: 1px solid #e0e0e0;
|
|
|
}
|
|
|
|
|
|
.chat-list::-webkit-scrollbar-thumb:hover {
|
|
|
background: #909090;
|
|
|
}
|
|
|
|
|
|
.chat-list::-webkit-scrollbar-corner {
|
|
|
background: #f0f0f0;
|
|
|
}
|
|
|
|
|
|
/* 确保左侧滚动条在Firefox中也能显示 */
|
|
|
.chat-list {
|
|
|
scrollbar-width: thin;
|
|
|
scrollbar-color: #b0b0b0 #f0f0f0;
|
|
|
}
|
|
|
|
|
|
.suggestion-bar.align-to-textarea {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 12px;
|
|
|
margin-bottom: 8px;
|
|
|
max-width: 100%;
|
|
|
width: calc(100% - 160px); /* 80px = 左侧图标宽度+间距 */
|
|
|
margin-left: 80px;
|
|
|
box-sizing: border-box;
|
|
|
padding-left: 0;
|
|
|
padding-right: 0;
|
|
|
}
|
|
|
</style>
|