|
@@ -1,48 +1,98 @@
|
|
<template>
|
|
<template>
|
|
- <div class="chat-container">
|
|
|
|
- <div class="messages">
|
|
|
|
- <ul>
|
|
|
|
- <li
|
|
|
|
- v-for="message in messages"
|
|
|
|
- :key="message.id"
|
|
|
|
- :class="[message.user, message.user === 'user' ? 'user-message' : '']"
|
|
|
|
- >
|
|
|
|
- <!-- 添加判断,如果是机器人的消息也显示头像 -->
|
|
|
|
- <div class="message_name">
|
|
|
|
- <div
|
|
|
|
- class="avatar"
|
|
|
|
- :class="{
|
|
|
|
- 'user-avatar': message.user === 'user',
|
|
|
|
- 'bot-avatar': message.user === 'bot',
|
|
|
|
- }"
|
|
|
|
- ></div>
|
|
|
|
- <div class="name">
|
|
|
|
- <span class="sender-name" style="color: #666666;" v-if="message.user === 'user'">你</span>
|
|
|
|
- <span class="sender-name" v-if="message.user === 'bot'"
|
|
|
|
- >轻良AI助理</span
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="chat-container" >
|
|
|
|
+ <div class="header" style="margin-top: 15px;">
|
|
|
|
+ <el-select v-model="AImodel" placeholder="请选择模型">
|
|
|
|
+ <el-option label="请选择模型" value="1"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <el-select v-model="AIknowledgeBase" placeholder="请选择知识库">
|
|
|
|
+ <el-option label="请选择知识库" value="1"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <el-select v-model="AIFile" placeholder="请选择文件">
|
|
|
|
+ <el-option label="请选择文件" value="1"> </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content">
|
|
|
|
+ <div class="left">
|
|
|
|
+ <div class="chat-history">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(chat, index) in chatHistory"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="chat-item"
|
|
|
|
+ >
|
|
|
|
+ <div class="chat-header">
|
|
|
|
+ <img
|
|
|
|
+ src="../../assets/images/logo.png"
|
|
|
|
+ alt="User avatar"
|
|
|
|
+ class="avatar"
|
|
|
|
+ />
|
|
|
|
+ <div class="user-info">
|
|
|
|
+ <div class="info_header">
|
|
|
|
+ <div class="username">{{ chat.username }}</div>
|
|
|
|
+ <div class="timestamp">{{ chat.timestamp }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="chat-message">{{ chat.message }}</div>
|
|
|
|
+ <div class="chat-preview">{{ chat.preview }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="more-options">...</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- 使用 v-html 来渲染 Markdown 文本 -->
|
|
|
|
- <div class="message-content">
|
|
|
|
- <div
|
|
|
|
- class="message-text"
|
|
|
|
- v-html="renderMarkdown(message.message)"
|
|
|
|
- @click="handleLinkClick"
|
|
|
|
- ></div>
|
|
|
|
- </div>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <div class="input-container">
|
|
|
|
- <textarea
|
|
|
|
- v-model="userInput"
|
|
|
|
- rows="4"
|
|
|
|
- @keydown="handleKeydown"
|
|
|
|
- placeholder="发送消息..."
|
|
|
|
- ></textarea>
|
|
|
|
- <button @click="sendMessage" class="btn">发送</button>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="right" style="position: relative">
|
|
|
|
+ <div class="messages">
|
|
|
|
+ <ul>
|
|
|
|
+ <li
|
|
|
|
+ v-for="message in messages"
|
|
|
|
+ :key="message.id"
|
|
|
|
+ :class="[
|
|
|
|
+ message.user,
|
|
|
|
+ message.user === 'user' ? 'user-message' : '',
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
|
|
+ <!-- 添加判断,如果是机器人的消息也显示头像 -->
|
|
|
|
+ <div class="message_name">
|
|
|
|
+ <div
|
|
|
|
+ class="avatar"
|
|
|
|
+ :class="{
|
|
|
|
+ 'user-avatar': message.user === 'user',
|
|
|
|
+ 'bot-avatar': message.user === 'bot',
|
|
|
|
+ }"
|
|
|
|
+ ></div>
|
|
|
|
+ <div class="name">
|
|
|
|
+ <span
|
|
|
|
+ class="sender-name"
|
|
|
|
+ style="color: #666666"
|
|
|
|
+ v-if="message.user === 'user'"
|
|
|
|
+ >你</span
|
|
|
|
+ >
|
|
|
|
+ <span class="sender-name" v-if="message.user === 'bot'"
|
|
|
|
+ >轻良AI助理</span
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 使用 v-html 来渲染 Markdown 文本 -->
|
|
|
|
+ <div class="message-content">
|
|
|
|
+ <div
|
|
|
|
+ class="message-text"
|
|
|
|
+ v-html="renderMarkdown(message.message)"
|
|
|
|
+ @click="handleLinkClick"
|
|
|
|
+ ></div>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-container">
|
|
|
|
+ <textarea
|
|
|
|
+ v-model="userInput"
|
|
|
|
+ rows="4"
|
|
|
|
+ @keydown="handleKeydown"
|
|
|
|
+ placeholder="发送消息..."
|
|
|
|
+ ></textarea>
|
|
|
|
+ <button @click="sendMessage" class="btn">发送</button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<!-- 添加 LoginModal 组件 -->
|
|
<!-- 添加 LoginModal 组件 -->
|
|
<LoginModal
|
|
<LoginModal
|
|
:visible.sync="showLoginModal"
|
|
:visible.sync="showLoginModal"
|