添加prompt生成,修改通用智能页面

This commit is contained in:
junleea 2025-03-27 16:09:22 +08:00
parent aa68813b0a
commit 6941fde0ca
14 changed files with 833 additions and 338 deletions

9
package-lock.json generated
View File

@ -23,6 +23,7 @@
"js-md5": "^0.8.3",
"katex": "^0.16.21",
"markdown-it": "^14.1.0",
"markdown-it-highlightjs": "^4.2.0",
"markdown-it-katex": "^2.0.3",
"markdown-it-mermaid": "^0.2.5",
"marked": "^15.0.7",
@ -3313,6 +3314,14 @@
"markdown-it": "bin/markdown-it.mjs"
}
},
"node_modules/markdown-it-highlightjs": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz",
"integrity": "sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==",
"dependencies": {
"highlight.js": "^11.9.0"
}
},
"node_modules/markdown-it-katex": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz",

View File

@ -23,6 +23,7 @@
"js-md5": "^0.8.3",
"katex": "^0.16.21",
"markdown-it": "^14.1.0",
"markdown-it-highlightjs": "^4.2.0",
"markdown-it-katex": "^2.0.3",
"markdown-it-mermaid": "^0.2.5",
"marked": "^15.0.7",

BIN
src/assets/img/prompt.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -199,6 +199,12 @@ export const menuData: Menus[] = [
index: '/gen-chat',
title: '通用人机对话',
},
{
id: '55',
icon: 'ChatDotSquare',
index: '/gen-prompt',
title: '提示词生成',
},
{
id: '6',
icon: 'DocumentAdd',

View File

@ -68,6 +68,15 @@ const routes: RouteRecordRaw[] = [
},
component: () => import(/* webpackChunkName: "gen-chat" */ '../views/system/gen-chat.vue'),
},
{
path: '/gen-prompt',
name: 'gen-prompt',
meta: {
title: 'prompt生成',
permiss: '55',
},
component: () => import(/* webpackChunkName: "gen-prompt" */ '../views/system/prompt-gen.vue'),
},
{
path: '/system-role',
name: 'system-role',

View File

@ -51,6 +51,7 @@ export const usePermissStore = defineStore('permiss', {
'52', //模型管理
'53', //通用人机对话
'54', //功能管理
'55', //提示词生成
],
user: ['0', '8', '7','9', '61','53'],
},

View File

@ -15,6 +15,7 @@ export interface FormOptionList {
opts?: any[];
format?: string;
activeValue?: any;
multiple?: boolean;
inactiveValue?: any;
activeText?: string;
inactiveText?: string;

View File

@ -0,0 +1,467 @@
<template>
<div class="chat-app">
<!-- 历史会话侧边栏 -->
<div class="history-sessions" v-if="sessionIsShow">
<div >
<el-button type="primary" @click="clearCurrent">新会话</el-button>
</div>
<el-card class="session-card">
<template #header>
<h3>当前会话</h3>
</template>
<ul>
<li>{{ getShortenedName(sessionName) }}</li>
</ul>
</el-card>
<el-card class="session-card2">
<template #header>
<h3>历史会话</h3>
</template>
<el-scrollbar style="height: 400px; scrollbar-width: none">
<ul>
<li
v-for="(session, index) in historySessions"
:key="index"
@click="loadSession(session.ID)"
>
{{ getShortenedName(session.Name) }}
</li>
</ul>
</el-scrollbar>
</el-card>
</div>
<!-- 原有的聊天区域 -->
<div class="chat-container">
<div>
<div @click="showSession" style="cursor: pointer">
<el-icon v-if="sessionIsShow">
<Expand />
</el-icon>
<el-icon v-else>
<Fold />
</el-icon>
</div>
</div>
<!-- 消息列表 -->
<el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
<div
v-for="(message, index) in messages"
:key="index"
:class="['message', message.role]"
>
<div class="message-avatar">
<span v-if="message.role === 'assistant'">💬</span>
<span v-else>👤</span>
</div>
<div class="message-content">
<div v-html="renderMarkdown(message.content)"></div>
<!-- 添加复制 -->
<div>
<el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
</div>
</div>
</div>
<div v-if="loading" class="loading-indicator">Loading...</div>
</el-card>
<!-- 输入区域 -->
<el-card class="chat-input" shadow="never">
<el-row :gutter="10">
<el-col :span="20">
<el-input
v-model="inputMessage"
type="textarea"
:rows="2"
placeholder="输入消息..."
@keyup.enter="sendMessage"
/>
<el-text v-model="inputMessage" aria-placeholder="输入信息...."></el-text>
</el-col>
<el-col :span="4" style="text-align: center">
<el-button @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
</el-col>
</el-row>
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { ElCard, ElInput, ElButton } from "element-plus";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im";
import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
import MarkdownIt from "markdown-it";
import markdownItMermaid from "markdown-it-mermaid";
import hljs from "highlight.js";
import { Session } from "@/types/session";
import bash from "highlight.js/lib/languages/bash";
import { FindSessionService } from "@/api/session";
import javascript from "highlight.js/lib/languages/javascript";
import typescript from "highlight.js/lib/languages/typescript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import nginx from "highlight.js/lib/languages/nginx";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/yaml";
import xml from "highlight.js/lib/languages/xml";
import shell from "highlight.js/lib/languages/shell";
import "katex/dist/katex.min.css";
interface Message {
role: "user" | "assistant";
content: string;
finished?: boolean;
}
hljs.registerLanguage("bash", bash);
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("nginx", nginx);
hljs.registerLanguage("json", json);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("shell", shell);
const md = new MarkdownIt({
html: true,
linkify: true,
breaks: true,
xhtmlOut: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return `<pre class="hljs"><code>${
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
}</code></pre>`;
} catch (__) {}
}
return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
},
});
const historySessions = ref<Session[]>([]);
const loading = ref(false);
const isUserScrolling = ref<boolean>(false);
const messages = reactive([]);
const inputMessage = ref("");
const socket = ref(null);
const currentAIMessage = ref("");
const sessionID = ref(0);
const messagesContainer = ref<HTMLDivElement | null>(null);
const sessionIsShow = ref(false);
const sessionName = ref("");
const renderMarkdown = (content: string) => {
return md.render(content);
};
const scrollToBottom = () => {
let x = document.getElementsByClassName("chat-messages")[0];
x.scrollTop = x.scrollHeight; //
};
onMounted(() => {
// if (typeof window !== 'undefined') {
// //
// md.use(markdownItMermaid);
// }
let url =
"wss://pm.ljsea.top/im/ai_chat_ws?" +
"token=" +
localStorage.getItem("token");
socket.value = new WebSocket(url);
socket.value.onopen = () => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
//getMessage(125);
messagesContainer.value = document.querySelector(".chat-messages");
socket.value.onmessage = (event) => {
let msg: WSMessage = JSON.parse(event.data);
const existingMessage = messages.find(
(msg) => msg.role === "assistant" && !msg.finished
);
if (existingMessage) {
//
existingMessage.content += msg.msg.msg.response;
} else {
//
messages.push({
role: "assistant",
content: msg.msg.msg.response,
finished: false,
});
}
//console.log("resp:", msg);
sessionID.value = msg.session_id;
currentAIMessage.value += msg.msg.msg.response;
if (msg.msg.msg.done) {
const assistantMessage = messages[messages.length - 1];
assistantMessage.finished = true;
loading.value = false;
}
nextTick(() => {
scrollToBottom(); //
});
};
socket.value.onclose = () => {
console.log("WebSocket 连接已关闭");
ElMessage.error("连接已关闭");
//
socket.value = new WebSocket(url);
};
socket.value.onerror = (error) => {
console.error("WebSocket 发生错误:", error);
};
});
onUnmounted(() => {
if (socket.value) {
socket.value.close();
}
});
const sendMessage = () => {
if (inputMessage.value.trim() === "") {
ElMessage.warning("消息不能为空");
return;
}
let msg = {
msg: inputMessage.value,
type: "ollama",
function: "gen-ai-chat",
session_id: sessionID.value,
};
messages.push({ role: "user", content: inputMessage.value, finished: true });
socket.value.send(JSON.stringify(msg));
inputMessage.value = "";
scrollToBottom();
loading.value = true;
if (sessionID.value == 0) {
sessionName.value = msg.msg;
}
};
const loadSession = async (session_id: number) => {
sessionID.value = session_id;
messages.length = 0; //
sessionName.value = historySessions.value.find(
(session) => session.ID == session_id
)?.Name;
await getMessage(session_id);
scrollToBottom();
};
const clearCurrent = () => {
sessionID.value = 0;
messages.length = 0; //
sessionName.value = "新会话";
ElMessage.success("新会话已创建!可以开始聊天了");
};
const showSession = async () => {
//
let req = {
token: localStorage.getItem("token"),
type: "UserID",
};
let result = await FindSessionService(req);
historySessions.value = result.data;
sessionIsShow.value = !sessionIsShow.value;
};
const getShortenedName = (name: string) => {
if (name.length > 10) {
return name.slice(0, 10) + "...";
}
return name;
};
const getMessage = async (session_id: number) => {
let result = {};
try {
let req = {
token: localStorage.getItem("token"),
session_id: session_id,
};
result = await GetMessageService(req);
if (result["code"] === 0) {
console.log(result["data"]);
let data = result["data"];
for (let i = 0; i < data.length; i++) {
if (data[i]["Type"] === 3) {
messages.push({
role: "user",
content: data[i]["Msg"],
finished: true,
});
} else if (data[i]["Type"] === 4) {
messages.push({
role: "assistant",
content: data[i]["Msg"],
finished: true,
});
} else {
console.log("未知消息类型");
}
}
}
} catch (e) {
console.log(e);
}
return {};
};
const copyMessage = (content: string) => {
navigator.clipboard.writeText(content).then(() => {
ElMessage.success('复制成功');
}).catch((error) => {
ElMessage.error('复制失败: ' + error);
});
};
</script>
<style scoped>
.chat-app {
display: flex;
height: 100%;
}
.history-sessions {
width: 15%;
padding: 20px;
height: 100%;
overflow-y: auto;
border-right: 1px solid #e1e1e1;
scrollbar-width: none;
}
.history-sessions ul {
list-style-type: none;
padding: 0;
}
.history-sessions li {
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #e1e1e1;
}
.history-sessions li:hover {
background-color: #f0f0f0;
}
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
}
.chat-messages {
flex: 1;
overflow-y: auto; /* 允许垂直滚动 */
padding: 10px;
margin-bottom: 20px;
scrollbar-width: 20px;
position: relative;
display: flex;
flex-direction: column;
}
.messages-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto; /* 确保内部可以滚动 */
height: 100%;
}
.message {
display: flex;
margin-bottom: 15px;
}
.message.user {
justify-content: flex-end;
}
.message-avatar {
width: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
margin-right: 10px;
}
.message.assistant .message-avatar {
margin-right: 0;
margin-left: 10px;
}
.message-content {
background-color: #f0f9eb;
border: 1px solid #e1f3d8;
border-radius: 4px;
padding: 10px 15px;
white-space: pre-wrap;
max-width: 70%;
}
.message.assistant .message-content {
background-color: #f3f4f6;
border: 1px solid #dce4eb;
max-width: 70%;
}
.loading-indicator {
text-align: center;
color: #999;
font-size: 16px;
}
.chat-input {
width: 100%;
}
.el-input {
width: 100%;
}
.session-card {
margin-bottom: 20px;
height: 20%;
}
.session-card2 {
margin-bottom: 20px;
height: 70%;
}
.session-card ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.session-card li {
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #e1e1e1;
}
.session-card li:hover {
background-color: #f0f0f0;
}
.scroll-wrapper {
height: 100%;
overflow-y: auto;
}
</style>

View File

@ -124,7 +124,7 @@ let options_edit = ref<FormOption>({
span: 12,
list: [
{ type: 'input', label: '名称', prop: 'Name', required: true },
{ type: 'select', label: '模型', prop: 'ModelID', required: true, opts:model_select_opts.value},
{ type: 'select', label: '模型', prop: 'ModelID', required: true, opts:model_select_opts.value, multiple: true},
{ type: 'input', label: '功能', prop: 'Function', required: true },
{ type: 'input', label: '描述', prop: 'Info', required: true },
]

View File

@ -44,7 +44,7 @@
</div>
</div>
<!-- 消息列表 -->
<el-card class="chat-messages" shadow="never" ref="messagesContainer">
<el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
<div
v-for="(message, index) in messages"
:key="index"
@ -56,6 +56,10 @@
</div>
<div class="message-content">
<div v-html="renderMarkdown(message.content)"></div>
<!-- 添加复制 -->
<div>
<el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
</div>
</div>
</div>
<div v-if="loading" class="loading-indicator">Loading...</div>
@ -89,22 +93,14 @@ import { ElCard, ElInput, ElButton } from "element-plus";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im";
import {Check, Loading} from '@element-plus/icons-vue'
import {Check, Loading, DocumentCopy} from '@element-plus/icons-vue'
import MarkdownIt from "markdown-it";
import markdownItMermaid from "markdown-it-mermaid";
import hljs from "highlight.js";
import { Session } from "@/types/session";
import bash from "highlight.js/lib/languages/bash";
import { FindSessionService } from "@/api/session";
import javascript from "highlight.js/lib/languages/javascript";
import typescript from "highlight.js/lib/languages/typescript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import nginx from "highlight.js/lib/languages/nginx";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/yaml";
import xml from "highlight.js/lib/languages/xml";
import shell from "highlight.js/lib/languages/shell";
import markdownItHighlightjs from 'markdown-it-highlightjs';
import "katex/dist/katex.min.css";
interface Message {
role: "user" | "assistant";
@ -112,33 +108,12 @@ interface Message {
finished?: boolean;
}
hljs.registerLanguage("bash", bash);
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("nginx", nginx);
hljs.registerLanguage("json", json);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("shell", shell);
const md = new MarkdownIt({
html: true,
linkify: true,
breaks: true,
xhtmlOut: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return `<pre class="hljs"><code>${
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
}</code></pre>`;
} catch (__) {}
}
return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
},
});
const md = new MarkdownIt();
md.use(markdownItHighlightjs,{
hljs,
auto: true,
code: true
})
const historySessions = ref<Session[]>([]);
const loading = ref(false);
@ -161,6 +136,30 @@ const scrollToBottom = () => {
x.scrollTop = x.scrollHeight; //
};
const copyCode = (code: string) => {
navigator.clipboard.writeText(code).then(() => {
ElMessage.success("代码已复制到剪贴板");
});
};
const doButtonD = () => {
const codeBlocks = document.querySelectorAll('pre code');
codeBlocks.forEach((codeBlock) => {
//
const copyButton = document.createElement('button');
copyButton.textContent = '复制代码';
copyButton.classList.add('copy-code-button');
copyButton.addEventListener('click', () => {
copyCode(codeBlock.textContent);
});
// 便
const pre = codeBlock.parentNode;
pre.style.position = 'relative';
//
pre.appendChild(copyButton);
});
};
onMounted(() => {
// if (typeof window !== 'undefined') {
// //
@ -175,7 +174,7 @@ onMounted(() => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
getMessage(125);
//getMessage(125);
messagesContainer.value = document.querySelector(".chat-messages");
socket.value.onmessage = (event) => {
@ -253,6 +252,8 @@ const loadSession = async (session_id: number) => {
(session) => session.ID == session_id
)?.Name;
await getMessage(session_id);
scrollToBottom();
//doButtonD();
};
const clearCurrent = () => {
@ -313,6 +314,13 @@ const getMessage = async (session_id: number) => {
}
return {};
};
const copyMessage = (content: string) => {
navigator.clipboard.writeText(content).then(() => {
ElMessage.success('复制成功');
}).catch((error) => {
ElMessage.error('复制失败: ' + error);
});
};
</script>
<style scoped>
.chat-app {
@ -451,4 +459,15 @@ const getMessage = async (session_id: number) => {
height: 100%;
overflow-y: auto;
}
.copy-code-button {
position: absolute;
top: 5px;
right: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
}
</style>

View File

@ -0,0 +1,271 @@
<template>
<div class="app-wrapper">
<!-- 顶部区域 -->
<div class="header">
<div class="logo">
<img src="../../assets/img/prompt.jpg" alt="Logo">
<span>欢迎使用 Prompt 优解</span>
</div>
<div class="description">
激发模型潜能轻松优化Prompt
</div>
</div>
<!-- 主体内容区域 -->
<div class="main-content">
<!-- 左侧任务区域 -->
<div class="task-section">
<h2>你的任务</h2>
<el-input
type="textarea"
placeholder="试试示例任务或简单描述你的任务,如总结文档摘要"
v-model="taskInput"
rows="10"
/>
<el-button type="primary" @click="generatePrompt">生成Prompt</el-button>
<div class="prompt-template">
<h3>Prompt 模板</h3>
<el-button type="success" size="small" @click="addTemplate">模板新增</el-button>
<div v-for="(template, index) in templates" :key="index" class="template-item">
<div class="template-title">{{ template.title }}</div>
<div class="template-desc">{{ template.desc }}</div>
</div>
</div>
</div>
<!-- 右侧结果及模型参数区域 -->
<div class="result-section">
<h2>生成后的 Prompt</h2>
<el-input
type="textarea"
placeholder="这里将展示AI根据任务描述辅助生成的Prompt"
v-model="resultPrompt"
rows="25"
/>
<el-dropdown trigger="click" class="model-dropdown">
<span class="el-dropdown-link">
<img :src="selectedModel.logo" alt="Model Logo" class="model-logo">
{{ selectedModel.name }}
<el-icon><ArrowDown /></el-icon>
</span>
<template #dropdown>
<div class="dropdown-content">
<div class="model-list">
<div
v-for="(model, index) in models"
:key="index"
class="model-item"
@click="selectModel(model)"
>
<img :src="model.logo" alt="Model Logo" class="model-logo">
<div class="model-info">
<div class="model-name">{{ model.name }}</div>
<div class="model-version">{{ model.version }}</div>
</div>
</div>
</div>
<div class="model-params">
<h4>模型参数</h4>
<el-slider v-model="temperature" :min="0" :max="2" :step="0.1"></el-slider>
<div class="param-value">{{ temperature }}</div>
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
<div class="param-value">{{ topP }}</div>
</div>
</div>
</template>
</el-dropdown>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
// Prompt
const taskInput = ref('');
const resultPrompt = ref('');
const socket = ref(null);
//
const models = ref([
{
logo: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.-FZbTC72cXtUasfnISVDHgHaHa?rs=1&pid=ImgDetMain',
name: 'Deepseek-R1',
version: 'Deepseek-R1'
},
]);
const selectedModel = ref(models.value[0]);
// Top P
const temperature = ref(1);
const topP = ref(0.7);
// ID
const sessionID = ref(0);
// Prompt
const templates = ref([
{
title: '给我写一封电子邮件',
desc: '起草回复客户投诉的电子邮件并提供解决方案。'
},
{
title: '文档总结',
desc: '从提供的文档中提取总结要点要点数量不超过10个。'
},
]);
// Prompt
const generatePrompt = () => {
// APIPrompt
//resultPrompt.value = 'Prompt';
resultPrompt.value = '';
sendMessage();
};
//
const addTemplate = () => {
//
console.log('添加模板功能待实现');
};
//
const selectModel = (model) => {
selectedModel.value = model;
};
//
onMounted(() => {
// if (typeof window !== 'undefined') {
// //
// md.use(markdownItMermaid);
// }
let url =
"wss://pm.ljsea.top/im/ai_chat_ws?" +
"token=" +
localStorage.getItem("token");
socket.value = new WebSocket(url);
socket.value.onopen = () => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
socket.value.onmessage = (event) => {
let msg: WSMessage = JSON.parse(event.data);
receiveMessage(msg);
};
socket.value.onclose = () => {
console.log("WebSocket 连接已关闭");
ElMessage.error("连接已关闭");
//
socket.value = new WebSocket(url);
};
socket.value.onerror = (error) => {
console.error("WebSocket 发生错误:", error);
};
});
const receiveMessage = (msg:WSMessage) => {
resultPrompt.value += msg.msg.msg.response;
};
const sendMessage = () => {
if (taskInput.value.trim() === "") {
ElMessage.warning("消息不能为空");
return;
}
let msg = {
msg: taskInput.value,
type: "ollama",
function: "gen-prompt",
session_id: sessionID.value,
};
socket.value.send(JSON.stringify(msg));
};
onUnmounted(() => {
if (socket.value) {
socket.value.close();
}
});
</script>
<style scoped>
.app-wrapper {
padding: 20px;
background-color: #f4f4f4;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 24px;
height: 24px;
margin-right: 10px;
}
.main-content {
display: flex;
height: 80%;
}
.task-section,
.result-section {
width: 50%;
background-color: white;
padding: 20px;
margin-right: 20px;
}
.prompt-template {
margin-top: 20px;
}
.template-item {
border: 1px solid #e4e4e4;
padding: 10px;
margin-bottom: 10px;
}
.template-title {
font-weight: bold;
margin-bottom: 5px;
}
.model-dropdown {
margin-top: 10px;
}
.model-logo {
width: 20px;
height: 20px;
margin-right: 5px;
}
.dropdown-content {
width: 300px;
padding: 10px;
}
.model-list {
max-height: 200px;
overflow-y: auto;
}
.model-item {
display: flex;
align-items: center;
padding: 5px 0;
cursor: pointer;
}
.model-info {
margin-left: 10px;
}
.model-params {
margin-top: 10px;
}
.param-value {
margin-top: 5px;
text-align: right;
}
</style>

View File

@ -1,296 +0,0 @@
<template>
<div @click="sessionIsShow = !sessionIsShow" style="cursor: pointer;">
<el-icon v-if="sessionIsShow" >
<Expand />
</el-icon>
<el-icon v-else>
<Fold />
</el-icon>
</div>
<div class="chat-container">
<!-- 消息列表 -->
<el-card class="chat-messages" shadow="never" ref="messagesContainer">
<div
v-for="(message, index) in messages"
:key="index"
:class="['message', message.role]"
>
<div class="message-avatar">
<span v-if="message.role === 'assistant'">💬</span>
<span v-else>👤</span>
</div>
<div class="message-content">
<div v-html="renderMarkdown(message.content)"></div>
</div>
</div>
<div v-if="loading" class="loading-indicator">Loading...</div>
</el-card>
<!-- 输入区域 -->
<el-card class="chat-input" shadow="never">
<el-row :gutter="10">
<el-col :span="20">
<el-input
v-model="inputMessage"
type="textarea"
:rows="2"
placeholder="输入消息..."
@keyup.enter="sendMessage"
/>
</el-col>
<el-col :span="4" style="text-align: center;" >
<el-button type="primary" @click="sendMessage" >发送</el-button>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import { ElCard, ElInput, ElButton } from "element-plus";
import { WSMessage, AIQMessage, OllamaMessage } from "@/types/im";
import { ElMessage } from "element-plus";
import { GetMessageService } from "@/api/im";
import MarkdownIt from "markdown-it";
import markdownItMermaid from "markdown-it-mermaid";
import hljs from "highlight.js";
import bash from "highlight.js/lib/languages/bash";
import javascript from "highlight.js/lib/languages/javascript";
import typescript from "highlight.js/lib/languages/typescript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import nginx from "highlight.js/lib/languages/nginx";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/yaml";
import xml from "highlight.js/lib/languages/xml";
import shell from "highlight.js/lib/languages/shell";
import 'katex/dist/katex.min.css';
interface Message {
role: "user" | "assistant";
content: string;
finished?: boolean;
}
hljs.registerLanguage("bash", bash);
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("nginx", nginx);
hljs.registerLanguage("json", json);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("shell", shell);
const md = new MarkdownIt({
html: true,
linkify: true,
breaks: true,
xhtmlOut: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
} catch (__) {}
}
return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
},
});
const loading = ref(false);
const isUserScrolling = ref<boolean>(false);
const messages = reactive([]);
const inputMessage = ref("");
const socket = ref(null);
const currentAIMessage = ref("");
const sessionID = ref(0);
const messagesContainer = ref<HTMLDivElement | null>(null);
const sessionIsShow = ref(false);
const renderMarkdown = (content: string) => {
return md.render(content);
};
const scrollToBottom = () => {
let x=document.getElementsByClassName("chat-messages")[0]
x.scrollTop=x.scrollHeight //
};
onMounted(() => {
// if (typeof window !== 'undefined') {
// //
// md.use(markdownItMermaid);
// }
let url =
"wss://pm.ljsea.top/im/ai_chat_ws?" +
"token=" +
localStorage.getItem("token");
socket.value = new WebSocket(url);
socket.value.onopen = () => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
getMessage(125);
messagesContainer.value = document.querySelector(".chat-messages");
socket.value.onmessage = (event) => {
let msg: WSMessage = JSON.parse(event.data);
const existingMessage = messages.find(
(msg) => msg.role === "assistant" && !msg.finished
);
if (existingMessage) {
//
existingMessage.content += msg.msg.msg.response;
} else {
//
messages.push({
role: "assistant",
content: msg.msg.msg.response,
finished: false,
});
}
console.log("resp:", msg);
sessionID.value = msg.session_id;
currentAIMessage.value += msg.msg.msg.response;
if (msg.msg.msg.done) {
const assistantMessage = messages[messages.length - 1];
assistantMessage.finished = true;
loading.value = false;
}
nextTick(() => {
scrollToBottom(); //
});
};
socket.value.onclose = () => {
console.log("WebSocket 连接已关闭");
ElMessage.error("连接已关闭");
};
socket.value.onerror = (error) => {
console.error("WebSocket 发生错误:", error);
};
});
onUnmounted(() => {
if (socket.value) {
socket.value.close();
}
});
const sendMessage = () => {
let msg = {
msg: inputMessage.value,
type: "ollama",
function: "gen-ai-chat",
session_id: sessionID.value,
};
if (inputMessage.value.trim() === "") return;
messages.push({ role: "user", content: inputMessage.value, finished: true });
socket.value.send(JSON.stringify(msg));
inputMessage.value = "";
scrollToBottom();
loading.value = true;
};
const getMessage = async (session_id:number) => {
let result = {};
try {
let req = {
token: localStorage.getItem("token"),
session_id: session_id,
};
result = await GetMessageService(req);
if (result["code"] === 0) {
console.log(result["data"]);
}
} catch (e) {
console.log(e);
}
return {};
};
</script>
<style scoped>
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
.chat-messages {
flex: 1;
overflow-y: auto; /* 允许垂直滚动 */
padding: 10px;
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
}
.messages-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto; /* 确保内部可以滚动 */
height: 100%;
}
.message {
display: flex;
margin-bottom: 15px;
}
.message.user {
justify-content: flex-end;
}
.message-avatar {
width: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
margin-right: 10px;
}
.message.assistant .message-avatar {
margin-right: 0;
margin-left: 10px;
}
.message-content {
background-color: #f0f9eb;
border: 1px solid #e1f3d8;
border-radius: 4px;
padding: 10px 15px;
white-space: pre-wrap;
max-width: 70%;
}
.message.assistant .message-content {
background-color: #f3f4f6;
border: 1px solid #dce4eb;
max-width: 70%;
}
.loading-indicator {
text-align: center;
color: #999;
font-size: 16px;
}
.chat-input {
width: 100%;
}
.el-input {
width: 100%;
}
</style>

View File

@ -2153,6 +2153,13 @@ magic-string@^0.30.7:
dependencies:
"@jridgewell/sourcemap-codec" "^1.4.15"
markdown-it-highlightjs@^4.2.0:
version "4.2.0"
resolved "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz"
integrity sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==
dependencies:
highlight.js "^11.9.0"
markdown-it-katex@^2.0.3:
version "2.0.3"
resolved "https://registry.npmjs.org/markdown-it-katex/-/markdown-it-katex-2.0.3.tgz"