|
@@ -149,7 +149,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- <!-- New Conversation 按钮 -->
|
|
|
|
|
|
|
+ <!-- New Conversation 按钮 ,
|
|
|
|
|
+ { active: currentConversationId === conversation.id }, -->
|
|
|
<button class="new-conversation-btn" @click="addNewConversation">
|
|
<button class="new-conversation-btn" @click="addNewConversation">
|
|
|
<img class="tab-icon" src="../assets/svg/plus.svg" alt="" />
|
|
<img class="tab-icon" src="../assets/svg/plus.svg" alt="" />
|
|
|
<span>New Conversation</span>
|
|
<span>New Conversation</span>
|
|
@@ -161,8 +162,7 @@
|
|
|
v-for="conversation in conversations.slice(0, 10)"
|
|
v-for="conversation in conversations.slice(0, 10)"
|
|
|
:key="conversation.id"
|
|
:key="conversation.id"
|
|
|
:class="[
|
|
:class="[
|
|
|
- 'conversation-item',
|
|
|
|
|
- { active: currentConversationId === conversation.id },
|
|
|
|
|
|
|
+ 'conversation-item'
|
|
|
]"
|
|
]"
|
|
|
@click="switchConversation(conversation.id)"
|
|
@click="switchConversation(conversation.id)"
|
|
|
>
|
|
>
|
|
@@ -3001,21 +3001,40 @@ onUnmounted(() => {
|
|
|
const renderMarkdown = (content) => {
|
|
const renderMarkdown = (content) => {
|
|
|
if (!content) return "";
|
|
if (!content) return "";
|
|
|
|
|
|
|
|
- /* // 处理代码块
|
|
|
|
|
- content = content.replace(/```([\s\S]*?)```/g, (match, code) => {
|
|
|
|
|
- return `<pre class="code-block"><code>${code}</code></pre>`;
|
|
|
|
|
|
|
+ // 先处理think标签,将其从markdown内容中分离出来
|
|
|
|
|
+ const thinkTagRegex = /<think>([\s\S]*?)<\/think>/gi;
|
|
|
|
|
+ const thinkMatches = [];
|
|
|
|
|
+ let processedContent = content;
|
|
|
|
|
+
|
|
|
|
|
+ // 提取所有think标签内容
|
|
|
|
|
+ processedContent = processedContent.replace(thinkTagRegex, (match, thinkContent) => {
|
|
|
|
|
+ const thinkId = `think-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
|
+ thinkMatches.push({
|
|
|
|
|
+ id: thinkId,
|
|
|
|
|
+ content: thinkContent.trim()
|
|
|
|
|
+ });
|
|
|
|
|
+ return `<div class="think-placeholder" data-think-id="${thinkId}"></div>`;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 处理行内代码
|
|
|
|
|
- content = content.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
|
|
|
|
|
+ // 使用markdown-it渲染处理后的内容
|
|
|
|
|
+ let renderedContent = md.render(processedContent);
|
|
|
|
|
|
|
|
- // 处理标题
|
|
|
|
|
- content = content.replace(/^(#{1,6})\s+(.*)$/gm, (match, hashes, title) => {
|
|
|
|
|
- const level = hashes.length;
|
|
|
|
|
- return `<h${level}>${title}</h${level}>`;
|
|
|
|
|
- }); */
|
|
|
|
|
|
|
+ // 将think标签内容重新插入到渲染后的HTML中
|
|
|
|
|
+ /* <div class="think-header">
|
|
|
|
|
+ <span class="think-icon">🤔</span>
|
|
|
|
|
+ <span class="think-title">思考过程</span>
|
|
|
|
|
+ </div> */
|
|
|
|
|
+ thinkMatches.forEach(thinkMatch => {
|
|
|
|
|
+ const placeholder = `<div class="think-placeholder" data-think-id="${thinkMatch.id}"></div>`;
|
|
|
|
|
+ const thinkHtml = `
|
|
|
|
|
+ <div class="think-container" data-think-id="${thinkMatch.id}">
|
|
|
|
|
+ <div class="think-content">${md.render(thinkMatch.content)}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ `;
|
|
|
|
|
+ renderedContent = renderedContent.replace(placeholder, thinkHtml);
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- return md.render(content);
|
|
|
|
|
|
|
+ return renderedContent;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 添加新的响应式变量
|
|
// 添加新的响应式变量
|
|
@@ -4581,7 +4600,7 @@ const updateCollapsedState = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.conversation-item {
|
|
.conversation-item {
|
|
|
- padding: 12px;
|
|
|
|
|
|
|
+ padding: 5px 12px;
|
|
|
margin: 4px 0;
|
|
margin: 4px 0;
|
|
|
/* border-radius: 8px; */
|
|
/* border-radius: 8px; */
|
|
|
color: var(--primary-text);
|
|
color: var(--primary-text);
|
|
@@ -4619,6 +4638,7 @@ const updateCollapsedState = () => {
|
|
|
|
|
|
|
|
.conversation-time {
|
|
.conversation-time {
|
|
|
color: var(--secondary-text);
|
|
color: var(--secondary-text);
|
|
|
|
|
+ font-size: 11px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.conversation-type {
|
|
.conversation-type {
|
|
@@ -5625,6 +5645,109 @@ const updateCollapsedState = () => {
|
|
|
background-color: #f2f2f2;
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* think标签样式 */
|
|
|
|
|
+.message-text ::v-deep .think-container {
|
|
|
|
|
+ margin: 15px 0;
|
|
|
|
|
+ border-left: 2px solid #e1e5ea;
|
|
|
|
|
+ border-radius: 0 8px 8px 0;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-header {
|
|
|
|
|
+ background: #f0f4f8;
|
|
|
|
|
+ color: #2c3e50;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ border-bottom: 1px solid #e1e8ed;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-icon {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #4a90e2;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-title {
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #2c3e50;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content {
|
|
|
|
|
+ padding:0 10px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ color: #2c3e50;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ line-height: 1.7;
|
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content p {
|
|
|
|
|
+ margin: 6px 0;
|
|
|
|
|
+ font-size: 12px !important;
|
|
|
|
|
+ line-height: 1.7;
|
|
|
|
|
+ color: #61666b;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content h1,
|
|
|
|
|
+.message-text ::v-deep .think-content h2,
|
|
|
|
|
+.message-text ::v-deep .think-content h3,
|
|
|
|
|
+.message-text ::v-deep .think-content h4,
|
|
|
|
|
+.message-text ::v-deep .think-content h5,
|
|
|
|
|
+.message-text ::v-deep .think-content h6 {
|
|
|
|
|
+ margin: 12px 0 8px 0;
|
|
|
|
|
+ color: #1a365d;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content ul,
|
|
|
|
|
+.message-text ::v-deep .think-content ol {
|
|
|
|
|
+ margin: 8px 0;
|
|
|
|
|
+ padding-left: 20px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content li {
|
|
|
|
|
+ margin: 4px 0;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ color: #2c3e50;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content code {
|
|
|
|
|
+ background: #e2e8f0;
|
|
|
|
|
+ padding: 2px 6px;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #2d3748;
|
|
|
|
|
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content pre {
|
|
|
|
|
+ background: #f7fafc;
|
|
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ margin: 8px 0;
|
|
|
|
|
+ overflow-x: auto;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message-text ::v-deep .think-content blockquote {
|
|
|
|
|
+ border-left: 3px solid #4a90e2;
|
|
|
|
|
+ margin: 8px 0;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ background: #f0f4f8;
|
|
|
|
|
+ color: #4a5568;
|
|
|
|
|
+ font-style: italic;
|
|
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/* 知识源样式 */
|
|
/* 知识源样式 */
|
|
|
.knowledge-sources {
|
|
.knowledge-sources {
|
|
|
margin-top: 12px;
|
|
margin-top: 12px;
|
|
@@ -8615,9 +8738,70 @@ button,
|
|
|
|
|
|
|
|
.dark-theme .step-type {
|
|
.dark-theme .step-type {
|
|
|
background: #1e3a5f;
|
|
background: #1e3a5f;
|
|
|
- color: #64b5f6;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 深色主题下的think标签样式 */
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-container {
|
|
|
|
|
+ border-left-color: #60a5fa;
|
|
|
|
|
+ background: #1a202c;
|
|
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-header {
|
|
|
|
|
+ background: #2d3748;
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+ border-bottom-color: #4a5568;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-icon {
|
|
|
|
|
+ color: #60a5fa;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-title {
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content {
|
|
|
|
|
+ background: #2d3748;
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content p {
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h1,
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h2,
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h3,
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h4,
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h5,
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content h6 {
|
|
|
|
|
+ color: #f7fafc;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content li {
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content code {
|
|
|
|
|
+ background: #4a5568;
|
|
|
|
|
+ color: #f7fafc;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content pre {
|
|
|
|
|
+ background: #1a202c;
|
|
|
|
|
+ border-color: #4a5568;
|
|
|
|
|
+ color: #e2e8f0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dark-theme .message-text ::v-deep .think-content blockquote {
|
|
|
|
|
+ border-left-color: #60a5fa;
|
|
|
|
|
+ background: #2d3748;
|
|
|
|
|
+ color: #a0aec0;
|
|
|
|
|
+}
|
|
|
|
|
+/* color: #64b5f6;
|
|
|
|
|
+} */
|
|
|
|
|
+
|
|
|
.dark-theme .step-confidence {
|
|
.dark-theme .step-confidence {
|
|
|
color: #b0b0b0;
|
|
color: #b0b0b0;
|
|
|
}
|
|
}
|