+
+
+
+
+ 当前会话
+
+
+ - {{ getShortenedName(sessionName) }}
+
+
+
+
+ 历史会话
+
+
+
+ -
+ {{ getShortenedName(session.Name) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
Loading...
-
+
+
+
+ Loading...
+
-
-
-
-
-
-
-
- Send
-
-
-
+
+
+
+
+
+
+
+ 发送
+
+
+
+
@@ -45,8 +89,11 @@ 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 { 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";
@@ -56,11 +103,13 @@ 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);
@@ -71,30 +120,25 @@ 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: function (str, lang) {
+ highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
- return (
- '
' +
- hljs.highlight(lang, str, true).value +
- "
"
- );
+ return `
${
+ hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
+ }
`;
} catch (__) {}
}
-
- return (
- '
' + md.utils.escapeHtml(str) + "
"
- );
+ return `
${md.utils.escapeHtml(str)}
`;
},
});
+const historySessions = ref
([]);
const loading = ref(false);
const isUserScrolling = ref(false);
const messages = reactive([]);
@@ -103,20 +147,23 @@ const socket = ref(null);
const currentAIMessage = ref("");
const sessionID = ref(0);
const messagesContainer = ref(null);
+const sessionIsShow = ref(false);
+const sessionName = ref("");
const renderMarkdown = (content: string) => {
return md.render(content);
};
const scrollToBottom = () => {
- nextTick(() => {
- if (messagesContainer.value) {
- messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
- }
- });
+ 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=" +
@@ -126,6 +173,7 @@ onMounted(() => {
console.log("WebSocket 连接已建立");
ElMessage.success("连接成功");
};
+ getMessage(125);
messagesContainer.value = document.querySelector(".chat-messages");
socket.value.onmessage = (event) => {
@@ -144,7 +192,7 @@ onMounted(() => {
finished: false,
});
}
- console.log("resp:", msg);
+ //console.log("resp:", msg);
sessionID.value = msg.session_id;
currentAIMessage.value += msg.msg.msg.response;
if (msg.msg.msg.done) {
@@ -174,32 +222,87 @@ onUnmounted(() => {
});
const sendMessage = () => {
+ if (inputMessage.value.trim() === "") {
+ ElMessage.warning("消息不能为空");
+ return;
+ }
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;
- //getMessage();
+ 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);
+};
-const getMessage = async () => {
+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: sessionID.value,
+ 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);
@@ -207,12 +310,40 @@ const getMessage = async () => {
return {};
};
-
diff --git a/src/views/system/prompt-generate.vue b/src/views/system/prompt-generate.vue
new file mode 100644
index 0000000..cc751e9
--- /dev/null
+++ b/src/views/system/prompt-generate.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+ 发送
+
+
+
+
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-The web management system solution based on Vue3 and ElementPlus。[live demo](https://lin-xin.gitee.io/example/work/)
-
-Please check the version of vue2 in [tag V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
-
-## Donation
-
-
-
-## Preface
-
-The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue3 and ElementPlus. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
-
-## Function
-
-- [x] Element-UI
-- [x] Login/Logout
-- [x] Dashboard
-- [x] Table
-- [x] Tabs
-- [x] From
-- [x] Chart :bar_chart:
-- [x] Editor
-- [x] Markdown
-- [x] Upload pictures by clipping or dragging
-- [x] Permission
-- [x] Three level menu
-- [x] Custom icon
-
-## Installation steps
-
- git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
- cd vue-manage-system // Enter template directory
- npm install // Installation dependency
-
-## Local development
-
- npm run dev
-
-## Constructing production
-
- // Constructing project
- npm run build
-
-## Component description and presentation
-
-### vue-schart
-
-Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/lin-xin/vue-schart#/)
-
-```html
-
-