@@ -59,6 +81,8 @@ import { ChatMessage, ChatStorage } from './chat';
import Setting from './setting.vue';
import { llmManager, llms } from '@/views/setting/llm';
+// 引入 markdown.ts 中的函数
+import { markdownToHtml, copyToClipboard } from './markdown';
defineComponent({ name: 'chat' });
@@ -85,7 +109,6 @@ const inputHeightLines = computed(() => {
if (!tabStorage.messages) {
tabStorage.messages = [] as ChatMessage[];
}
-const messages = tabStorage.messages;
const isLoading = ref(false);
const streamingContent = ref('');
@@ -109,11 +132,20 @@ const handleKeydown = (event: KeyboardEvent) => {
// Shift+Enter 允许自然换行
};
+const handleCopy = async (text: string) => {
+ try {
+ await copyToClipboard(text);
+ ElMessage.success('复制成功');
+ } catch (error) {
+ ElMessage.error('复制失败: ' + error);
+ }
+};
+
const handleSend = () => {
if (!userInput.value.trim() || isLoading.value) return;
const userMessage = userInput.value.trim();
- messages.push({ role: 'user', content: userMessage });
+ tabStorage.messages.push({ role: 'user', content: userMessage });
// 后端接受属性 baseURL, apiKey, model, messages, temperature
const baseURL = llms[llmManager.currentModelIndex].baseUrl;
@@ -129,7 +161,7 @@ const handleSend = () => {
});
}
// 如果超出了 tabStorage.settings.contextLength, 则删除最早的消息
- const loadMessages = messages.slice(-tabStorage.settings.contextLength);
+ const loadMessages = tabStorage.messages.slice(-tabStorage.settings.contextLength);
userMessages.push(...loadMessages);
const chatData = {
@@ -143,29 +175,7 @@ const handleSend = () => {
isLoading.value = true;
streamingContent.value = '';
- bridge.postMessage({
- command: 'llm/chat/completions',
- data: chatData
- });
-
- userInput.value = '';
-};
-
-const handleError = (errorMsg: string) => {
- ElMessage.error(errorMsg);
- messages.push({
- role: 'assistant',
- content: `错误: ${errorMsg}`
- });
- streamingContent.value = '';
- isLoading.value = false;
-};
-
-onMounted(() => {
- updateScrollHeight();
- window.addEventListener('resize', updateScrollHeight);
-
- bridge.addCommandListener('llm/chat/completions/chunk', data => {
+ const chunkHandler = bridge.addCommandListener('llm/chat/completions/chunk', data => {
if (data.code !== 200) {
handleError(data.msg || '请求模型服务时发生错误');
return;
@@ -182,14 +192,40 @@ onMounted(() => {
return;
}
if (streamingContent.value) {
- messages.push({
+ // 加入消息列表
+ console.log(tabStorage);
+
+ tabStorage.messages.push({
role: 'assistant',
content: streamingContent.value
});
streamingContent.value = '';
}
isLoading.value = false;
- }, { once: false });
+ chunkHandler();
+ }, { once: true });
+
+ bridge.postMessage({
+ command: 'llm/chat/completions',
+ data: chatData
+ });
+
+ userInput.value = '';
+};
+
+const handleError = (errorMsg: string) => {
+ ElMessage.error(errorMsg);
+ tabStorage.messages.push({
+ role: 'assistant',
+ content: `错误: ${errorMsg}`
+ });
+ streamingContent.value = '';
+ isLoading.value = false;
+};
+
+onMounted(() => {
+ updateScrollHeight();
+ window.addEventListener('resize', updateScrollHeight);
});
onUnmounted(() => {
@@ -234,7 +270,6 @@ onUnmounted(() => {
.message-text {
line-height: 1.6;
- white-space: pre-wrap;
}
.user .message-text {
@@ -308,7 +343,7 @@ onUnmounted(() => {
:deep(.chat-settings) {
position: absolute;
left: 0;
- bottom: 8px;
+ bottom: 0px;
z-index: 1;
}
.typing-cursor {
@@ -326,4 +361,29 @@ onUnmounted(() => {
opacity: 0;
}
}
+
+
+
+
+
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/chat/markdown-it-katex.d.ts b/renderer/src/components/main-panel/chat/markdown-it-katex.d.ts
new file mode 100644
index 0000000..b719885
--- /dev/null
+++ b/renderer/src/components/main-panel/chat/markdown-it-katex.d.ts
@@ -0,0 +1 @@
+declare module 'markdown-it-katex';
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/chat/markdown.ts b/renderer/src/components/main-panel/chat/markdown.ts
new file mode 100644
index 0000000..b77ccb4
--- /dev/null
+++ b/renderer/src/components/main-panel/chat/markdown.ts
@@ -0,0 +1,19 @@
+import MarkdownIt from 'markdown-it';
+import katex from 'katex';
+import markdownItKatex from 'markdown-it-katex';
+import { pinkLog } from '@/views/setting/util';
+
+const md = new MarkdownIt();
+
+md.use(markdownItKatex, {
+ throwOnError: false,
+ errorColor: '#cc0000'
+});
+
+export const markdownToHtml = (markdown: string) => {
+ return md.render(markdown);
+};
+
+export const copyToClipboard = (text: string) => {
+ return navigator.clipboard.writeText(text);
+};
diff --git a/renderer/src/components/main-panel/panel.ts b/renderer/src/components/main-panel/panel.ts
index f0f5cdf..027a0c2 100644
--- a/renderer/src/components/main-panel/panel.ts
+++ b/renderer/src/components/main-panel/panel.ts
@@ -46,6 +46,8 @@ watch(
() => tabs,
(newValue, oldValue) => {
safeSavePanels();
+
+ console.log(newValue);
},
{ deep: true }
);
diff --git a/renderer/tsconfig.json b/renderer/tsconfig.json
index 6e25c86..245f2bd 100644
--- a/renderer/tsconfig.json
+++ b/renderer/tsconfig.json
@@ -1,10 +1,10 @@
{
"compilerOptions": {
"target": "esnext",
- "module": "esnext",
+ "module": "nodenext",
"strict": true,
"jsx": "preserve",
- "moduleResolution": "node",
+ "moduleResolution": "nodenext",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
diff --git a/service/tabs.json b/service/tabs.json
index 6a19c30..2ea25e1 100644
--- a/service/tabs.json
+++ b/service/tabs.json
@@ -1,5 +1,5 @@
{
- "currentIndex": 1,
+ "currentIndex": 3,
"tabs": [
{
"name": "交互测试",
@@ -23,42 +23,6 @@
{
"role": "assistant",
"content": "我的名字是 **OpenMCP**（Open Multi-modal Cognitive Platform）。 \n\n我是由 **深度求索（DeepSeek）** 开发的一款 **多模态认知大模型**，能够处理文本、图像、文档等多种信息，并具备强大的理解和推理能力。 \n\n你可以叫我 **OpenMCP**，或者简称 **MCP**！😊 有什么我可以帮你的吗？"
- },
- {
- "role": "user",
- "content": "我的上一个问题是什么"
- },
- {
- "role": "assistant",
- "content": "我的名字是 **OpenMCP**（Open Multi-modal Cognitive Platform），一个基于开源技术的多模态认知智能平台。 \n\n我的设计目标是整合文本、图像、语音等多种交互方式，提供灵活、可扩展的AI服务，支持开发者快速构建智能应用。如果你有具体需求（比如代码生成、数据分析、知识问答等），可以直接告诉我，我会尽力协助！ \n\n（名字中的 **MCP** 也可以理解为 **Modular Cognitive Processor**，强调模块化处理能力 😊）"
- },
- {
- "role": "user",
- "content": "请问杭州今天的气温是多少度"
- },
- {
- "role": "assistant",
- "content": "你的名字是 **OpenMCP**（Open Multi-Cloud Platform），一个专注于多云管理和自动化运维的开源平台。 \n\n### 核心功能： \n1. **多云资源管理**：统一管理AWS、Azure、GCP、阿里云等主流云服务商的资源。 \n2. **自动化运维**：通过策略和脚本实现资源调度、成本优化、监控告警等。 \n3. **DevOps集成**：支持CI/CD工具链，如Jenkins、GitLab CI等。 \n4. **开源开放**：代码公开，社区驱动，支持自定义扩展。 \n\n### 技术栈示例： \n- **后端**：Go/Python + Kubernetes Operator \n- **前端**：React/Vue + 可视化仪表盘 \n- **基础设施**：Terraform/Ansible跨云编排 \n\n如果需要具体实现方案或代码片段，可以告诉我你的场景（例如：“如何用OpenMCP自动化部署K8s集群到AWS和Azure？”），我会提供详细建议！ \n\n🚀 **口号**： *\"Simplify Multi-Cloud, Code the Future.\"*"
- },
- {
- "role": "assistant",
- "content": "\n\nTo determine the number of ways to choose 3 people out of 10, we can use the combination formula. The combination formula is given by:\n\n\\[\nC(n, k) = \\frac{n!}{k!(n - k)!}\n\\]\n\nwhere:\n- \\( n \\) is the total number of items,\n- \\( k \\) is the number of items to choose,\n- \\( ! \\) denotes factorial, which is the product of all positive integers up to that number.\n\n**Applying the formula:**\n\n\\[\nC(10, 3) = \\frac{10!}{3!(10 - 3)!} = \\frac{10!}{3! \\times 7!}\n\\]\n\n**Calculating the factorials:**\n\n\\[\n10! = 10 \\times 9 \\times 8 \\times 7! \\\\\n3! = 3 \\times 2 \\times 1 = 6\n\\]\n\n**Simplifying the expression:**\n\n\\[\nC(10, 3) = \\frac{10 \\times 9 \\times 8 \\times 7!}{6 \\times 7!} = \\frac{10 \\times 9 \\times 8}{6} = \\frac{720}{6} = 120\n\\]\n\n**Final Answer:**\n\n\\[\n\\boxed{120}\n\\]"
- },
- {
- "role": "assistant",
- "content": "\nTo solve the equation \\( 5^{x} = 3125 \\), we can follow these steps:\n\n1. **Express 3125 as a Power of 5:**\n \n First, recognize that 3125 is a power of 5. Let's find the exponent:\n \\[\n 5^5 = 5 \\times 5 \\times 5 \\times 5 \\times 5 = 3125\n \\]\n \n2. **Set the Exponents Equal:**\n \n Since the bases are the same, we can set the exponents equal to each other:\n \\[\n 5^{x} = 5^{5}\n \\]\n \\[\n x = 5\n \\]\n \n3. **Final Answer:**\n \n Therefore, the solution to the equation is:\n \\[\n \\boxed{5}\n \\]"
- },
- {
- "role": "assistant",
- "content": "要获取杭州今天的最新气温信息，你可以通过以下几种方式实时查询：\n\n1. **天气应用/网站** \n - 打开手机上的天气应用（如苹果天气、墨迹天气等），搜索“杭州”。\n - 访问中国天气网（[www.weather.com.cn](http://www.weather.com.cn)）或国际服务（如AccuWeather、Weather.com）。\n\n2. **搜索引擎** \n 在百度、谷歌等搜索“杭州今日天气”，结果页通常会直接显示当前气温和预报。\n\n3. **语音助手** \n 对手机说“Hey Siri”或“小爱同学，杭州今天多少度？”快速获取答案。\n\n**提示**：气温可能因城区/郊区差异略有不同，建议查看实时更新数据。如果需要更详细的天气信息（如湿度、降水概率），上述方法也可提供。\n\n（由于我无法实时联网，暂不能提供此刻的具体温度，请见谅！）"
- },
- {
- "role": "assistant",
- "content": "你之前的提问是：“我的上一个问题是什么？” \n\n不过，由于对话的连续性限制，我无法直接回顾更早的历史记录。如果你指的是在这之前的某个问题，可以告诉我更多关键词或上下文，我会尽力帮你回忆或解答！ 😊"
- },
- {
- "role": "assistant",
- "content": "你上一个问题是： \n**“杭州今天的气温如何”** \n\n而我的回答中已说明，由于无法实时联网，建议你通过天气应用或搜索引擎获取最新数据。需要我帮你回顾其他内容吗？ 😊"
}
]
}
@@ -96,6 +60,74 @@
"systemPrompt": ""
}
}
+ },
+ {
+ "name": "交互测试",
+ "icon": "icon-robot",
+ "type": "blank",
+ "componentIndex": 3,
+ "storage": {
+ "messages": [
+ {
+ "role": "user",
+ "content": "如何在 typescript 项目中使用 markdown-it"
+ },
+ {
+ "role": "assistant",
+ "content": "# 在 TypeScript 项目中使用 markdown-it\n\nmarkdown-it 是一个流行的 Markdown 解析器，可以很方便地在 TypeScript 项目中使用。以下是完整的配置和使用指南：\n\n## 1. 安装依赖\n\n首先安装 markdown-it 及其 TypeScript 类型定义：\n\n```bash\nnpm install markdown-it\nnpm install --save-dev @types/markdown-it\n```\n\n## 2. 基本使用\n\n创建一个 TypeScript 文件（如 `markdown.ts`）并添加以下代码：\n\n```typescript\nimport MarkdownIt from 'markdown-it';\n\n// 创建 markdown-it 实例\nconst md = new MarkdownIt();\n\n// 渲染 Markdown 字符串\nconst result = md.render('# Hello markdown-it in TypeScript!');\nconsole.log(result);\n```\n\n## 3. 配置选项\n\n你可以自定义 markdown-it 的配置：\n\n```typescript\nconst md = new MarkdownIt({\n html: true, // 启用 HTML 标签\n linkify: true, // 自动将 URL 转换为链接\n typographer: true, // 启用排版美化\n breaks: true // 将换行符转换为
\n});\n```\n\n## 4. 添加插件\n\nmarkdown-it 有许多插件可以扩展功能。例如添加 markdown-it-anchor：\n\n```bash\nnpm install markdown-it-anchor\nnpm install --save-dev @types/markdown-it-anchor\n```\n\n然后在代码中使用：\n\n```typescript\nimport MarkdownIt from 'markdown-it';\nimport anchor from 'markdown-it-anchor';\n\nconst md = new MarkdownIt().use(anchor, {\n permalink: true,\n permalinkBefore: true\n});\n\nconst result = md.render('# Section Title\\n\\nSome content');\nconsole.log(result);\n```\n\n## 5. 自定义渲染规则\n\n你可以覆盖默认的渲染规则：\n\n```typescript\nconst md = new MarkdownIt();\n\n// 覆盖默认的链接渲染\nmd.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n const token = tokens[idx];\n token.attrSet('target', '_blank');\n token.attrSet('rel', 'noopener noreferrer');\n return self.renderToken(tokens, idx, options);\n};\n\nconst result = md.render('[Open in new tab](https://example.com)');\n```\n\n## 6. 在 React/Vue 等框架中使用\n\n### 在 React 中使用：\n\n```typescript\nimport React from 'react';\nimport MarkdownIt from 'markdown-it';\n\nconst md = new MarkdownIt();\n\nconst MarkdownRenderer: React.FC<{ content: string }> = ({ content }) => {\n return
;\n};\n\n// 使用\n
\n```\n\n### 在 Vue 中使用：\n\n```typescript\nimport { defineComponent } from 'vue';\nimport MarkdownIt from 'markdown-it';\n\nconst md = new MarkdownIt();\n\nexport default defineComponent({\n props: ['content'],\n setup(props) {\n return () => (\n
\n );\n }\n});\n```\n\n## 7. 处理安全性\n\n如果需要处理用户输入的 Markdown，建议使用 markdown-it-sanitizer 或其他安全插件：\n\n```bash\nnpm install markdown-it-sanitizer\n```\n\n```typescript\nimport MarkdownIt from 'markdown-it';\nimport sanitizer from 'markdown-it-sanitizer';\n\nconst md = new MarkdownIt().use(sanitizer);\n```\n\n## 8. 完整示例\n\n下面是一个完整的 TypeScript 类示例：\n\n```typescript\nimport MarkdownIt from 'markdown-it';\nimport anchor from 'markdown-it-anchor';\nimport sanitizer from 'markdown-it-sanitizer';\n\nclass MarkdownRenderer {\n private md: MarkdownIt;\n\n constructor() {\n this.md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true\n })\n .use(anchor)\n .use(sanitizer);\n }\n\n public render(markdown: string): string {\n return this.md.render(markdown);\n }\n\n public renderInline(markdown: string): string {\n return this.md.renderInline(markdown);\n }\n}\n\n// 使用示例\nconst renderer = new MarkdownRenderer();\nconst html = renderer.render('# Title\\n\\nSome *markdown* content');\nconsole.log(html);\n```\n\n通过以上步骤，你就可以在 TypeScript 项目中轻松使用 markdown-it 来解析和渲染 Markdown 内容了。"
+ },
+ {
+ "role": "assistant",
+ "content": "康托洛维奇不等式（Kantorovich Inequality）的数学公式为：\n\n对于正定矩阵 \\( A \\) 和任意非零向量 \\( x \\)，有\n\n\\[\n\\frac{(x^\\top A x)(x^\\top A^{-1} x)}{(x^\\top x)^2} \\leq \\frac{(\\lambda_{\\max} + \\lambda_{\\min})^2}{4 \\lambda_{\\max} \\lambda_{\\min}},\n\\]\n\n其中 \\( \\lambda_{\\max} \\) 和 \\( \\lambda_{\\min} \\) 分别是矩阵 \\( A \\) 的最大和最小特征值。"
+ },
+ {
+ "role": "assistant",
+ "content": "调和平均数（Harmonic Mean）的数学公式为：\n\n对于正数 \\( x_1, x_2, \\dots, x_n \\)，调和平均数 \\( H \\) 定义为：\n\n\\[\nH = \\frac{n}{\\frac{1}{x_1} + \\frac{1}{x_2} + \\cdots + \\frac{1}{x_n}}.\n\\]"
+ }
+ ],
+ "settings": {
+ "modelIndex": 0,
+ "enableTools": true,
+ "enableWebSearch": false,
+ "temperature": 0.7,
+ "contextLength": 10,
+ "systemPrompt": ""
+ }
+ }
+ },
+ {
+ "name": "交互测试",
+ "icon": "icon-robot",
+ "type": "blank",
+ "componentIndex": 3,
+ "storage": {
+ "messages": [
+ {
+ "role": "user",
+ "content": "简述康托洛维奇不等式，只需要给出数学公式，不需要给出额外的解释"
+ },
+ {
+ "role": "assistant",
+ "content": "康托洛维奇不等式（Kantorovich Inequality）的数学公式为：\n\n对于正定矩阵 \\( A \\) 和任意非零向量 \\( x \\)，有\n\n\\[\n\\frac{(x^\\top A x)(x^\\top A^{-1} x)}{(x^\\top x)^2} \\leq \\frac{(\\lambda_{\\max} + \\lambda_{\\min})^2}{4 \\lambda_{\\max} \\lambda_{\\min}},\n\\]\n\n其中 \\( \\lambda_{\\max} \\) 和 \\( \\lambda_{\\min} \\) 分别是矩阵 \\( A \\) 的最大和最小特征值。"
+ },
+ {
+ "role": "user",
+ "content": "请简述调和平均数"
+ },
+ {
+ "role": "assistant",
+ "content": "调和平均数（Harmonic Mean）是 \\( n \\) 个正数 \\( x_1, x_2, \\dots, x_n \\) 的平均数的一种形式，定义为： \n\n\\[\nH = \\frac{n}{\\frac{1}{x_1} + \\frac{1}{x_2} + \\cdots + \\frac{1}{x_n}}.\n\\]\n\n它适用于计算**速率、比例**等涉及**倒数关系**的平均值，例如平均速度、并联电阻等。调和平均数总是**不大于算术平均数**（\\( H \\leq G \\leq A \\)，其中 \\( G \\) 是几何平均数，\\( A \\) 是算术平均数）。"
+ }
+ ],
+ "settings": {
+ "modelIndex": 0,
+ "enableTools": true,
+ "enableWebSearch": false,
+ "temperature": 0.7,
+ "contextLength": 10,
+ "systemPrompt": ""
+ }
+ }
}
]
}
\ No newline at end of file