|
@@ -12,7 +12,9 @@ import {
|
|
Welcome,
|
|
Welcome,
|
|
useXAgent,
|
|
useXAgent,
|
|
useXChat,
|
|
useXChat,
|
|
|
|
+ type BubbleProps
|
|
} from 'ant-design-x-vue';
|
|
} from 'ant-design-x-vue';
|
|
|
|
+import { Typography } from 'ant-design-vue';
|
|
import {
|
|
import {
|
|
CloudUploadOutlined,
|
|
CloudUploadOutlined,
|
|
CommentOutlined,
|
|
CommentOutlined,
|
|
@@ -238,7 +240,7 @@ const [ agent ] = useXAgent({
|
|
documents: documentUrls.value,
|
|
documents: documentUrls.value,
|
|
merchant_id: "3",
|
|
merchant_id: "3",
|
|
model_type: "REMOTE_CLAUDE",
|
|
model_type: "REMOTE_CLAUDE",
|
|
- model_name: "claude-3-sonnet-20240229"
|
|
|
|
|
|
+ model_name: "claude-3-7-sonnet-20250219"
|
|
}),
|
|
}),
|
|
});
|
|
});
|
|
|
|
|
|
@@ -538,27 +540,37 @@ const placeholderNode = computed(() => (
|
|
const md = new MarkdownIt({
|
|
const md = new MarkdownIt({
|
|
html: true,
|
|
html: true,
|
|
linkify: true,
|
|
linkify: true,
|
|
- typographer: true
|
|
|
|
|
|
+ typographer: true,
|
|
|
|
+ breaks: true
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+const renderMarkdown: BubbleProps['messageRender'] = (content) => (
|
|
|
|
+ <Typography>
|
|
|
|
+ <div v-html={md.render(content)} />
|
|
|
|
+ </Typography>
|
|
|
|
+);
|
|
|
|
+
|
|
const items = computed<BubbleListProps['items']>(() => messages.value.map(({ id, message, status }) => {
|
|
const items = computed<BubbleListProps['items']>(() => messages.value.map(({ id, message, status }) => {
|
|
// 检查消息是否是 markdown 格式
|
|
// 检查消息是否是 markdown 格式
|
|
- const isMarkdown = status === 'ai' &&
|
|
|
|
- (message.includes('#') || message.includes('**') || message.includes('\n'));
|
|
|
|
|
|
+/* const isMarkdown = status === 'ai' &&
|
|
|
|
+ (message.includes('#') || message.includes('**') || message.includes('\n')); */
|
|
|
|
|
|
let content;
|
|
let content;
|
|
|
|
|
|
- if (isMarkdown && status === 'ai') {
|
|
|
|
- // 渲染 markdown 内容
|
|
|
|
- const htmlContent = md.render(message);
|
|
|
|
|
|
+ /* if (status === 'ai') { */
|
|
|
|
+ // 使用 Typography 组件包装 markdown 内容
|
|
content = h('div', {
|
|
content = h('div', {
|
|
class: 'markdown-content',
|
|
class: 'markdown-content',
|
|
- innerHTML: htmlContent
|
|
|
|
|
|
+ innerHTML: md.render(message),
|
|
|
|
+ typing: {
|
|
|
|
+ step: 5, // 每次打印字符数
|
|
|
|
+ interval: 20, // 打印间隔时间(ms)
|
|
|
|
+ }
|
|
});
|
|
});
|
|
- } else {
|
|
|
|
|
|
+/* } else {
|
|
// 普通文本内容
|
|
// 普通文本内容
|
|
content = message;
|
|
content = message;
|
|
- }
|
|
|
|
|
|
+ } */
|
|
|
|
|
|
return {
|
|
return {
|
|
key: id,
|
|
key: id,
|
|
@@ -632,35 +644,59 @@ const logoNode = computed(() => (
|
|
//<span style={styles.value['logo-span']}>Ant Design X Vue</span>
|
|
//<span style={styles.value['logo-span']}>Ant Design X Vue</span>
|
|
// 添加 markdown 样式
|
|
// 添加 markdown 样式
|
|
const markdownStyles = `
|
|
const markdownStyles = `
|
|
-.markdown-content h3 {
|
|
|
|
- font-size: 1.3em;
|
|
|
|
- margin-top: 1em;
|
|
|
|
- margin-bottom: 0.5em;
|
|
|
|
- font-weight: 600;
|
|
|
|
|
|
+.markdown-content {
|
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
}
|
|
|
|
|
|
-.markdown-content h4 {
|
|
|
|
- font-size: 1.1em;
|
|
|
|
|
|
+.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {
|
|
margin-top: 1em;
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
|
+ line-height: 1.25;
|
|
}
|
|
}
|
|
|
|
|
|
.markdown-content p {
|
|
.markdown-content p {
|
|
margin-bottom: 0.8em;
|
|
margin-bottom: 0.8em;
|
|
|
|
+ line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
|
|
.markdown-content ul, .markdown-content ol {
|
|
.markdown-content ul, .markdown-content ol {
|
|
padding-left: 1.5em;
|
|
padding-left: 1.5em;
|
|
- margin-bottom: 0.8em;
|
|
|
|
|
|
+ margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
|
|
.markdown-content li {
|
|
.markdown-content li {
|
|
margin-bottom: 0.3em;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
}
|
|
|
|
|
|
-.markdown-content strong {
|
|
|
|
- font-weight: 600;
|
|
|
|
|
|
+.markdown-content code {
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
+ padding: 0.2em 0.4em;
|
|
|
|
+ border-radius: 3px;
|
|
|
|
+ font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-content pre {
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
+ padding: 1em;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ overflow-x: auto;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-content blockquote {
|
|
|
|
+ border-left: 4px solid rgba(0, 0, 0, 0.1);
|
|
|
|
+ padding-left: 1em;
|
|
|
|
+ margin: 1em 0;
|
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-content a {
|
|
|
|
+ color: #1890ff;
|
|
|
|
+ text-decoration: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.markdown-content a:hover {
|
|
|
|
+ text-decoration: underline;
|
|
}
|
|
}
|
|
`;
|
|
`;
|
|
|
|
|