yangg 4 mēneši atpakaļ
vecāks
revīzija
018699c39b
1 mainītis faili ar 56 papildinājumiem un 20 dzēšanām
  1. 56 20
      docs/examples/playground/independent.vue

+ 56 - 20
docs/examples/playground/independent.vue

@@ -12,7 +12,9 @@ import {
   Welcome,
   useXAgent,
   useXChat,
+  type BubbleProps
 } from 'ant-design-x-vue';
+import { Typography } from 'ant-design-vue';
 import {
   CloudUploadOutlined,
   CommentOutlined,
@@ -238,7 +240,7 @@ const [ agent ] = useXAgent({
           documents: documentUrls.value,
           merchant_id: "3",
           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({
   html: 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 }) => {
   // 检查消息是否是 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;
   
-  if (isMarkdown && status === 'ai') {
-    // 渲染 markdown 内容
-    const htmlContent = md.render(message);
+ /*  if (status === 'ai') { */
+    // 使用 Typography 组件包装 markdown 内容
     content = h('div', {
       class: 'markdown-content',
-      innerHTML: htmlContent
+      innerHTML: md.render(message),
+      typing: {
+        step: 5,       // 每次打印字符数
+        interval: 20,   // 打印间隔时间(ms)
+      }
     });
-  } else {
+/*   } else {
     // 普通文本内容
     content = message;
-  }
+  } */
   
   return {
     key: id,
@@ -632,35 +644,59 @@ const logoNode = computed(() => (
 //<span style={styles.value['logo-span']}>Ant Design X Vue</span>
 // 添加 markdown 样式
 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-bottom: 0.5em;
   font-weight: 600;
+  line-height: 1.25;
 }
 
 .markdown-content p {
   margin-bottom: 0.8em;
+  line-height: 1.6;
 }
 
 .markdown-content ul, .markdown-content ol {
   padding-left: 1.5em;
-  margin-bottom: 0.8em;
+  margin-bottom: 1em;
 }
 
 .markdown-content li {
   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;
 }
 `;