Merge pull request #2452 from DouyinFE/fix/chat-markdownRender

fix: [Chat]Fix special symbols causing conversion errors
DouyinFE · Aug 27, 2024 · 346feb1 · 346feb1
2 parents 1a70b37 + c699ebb
commit 346feb1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git a/packages/semi-foundation/chat/chat.scss b/packages/semi-foundation/chat/chat.scss
@@ -233,6 +233,7 @@ $module: #{$prefix}-chat;
             .#{$module}-attachment-file, .#{$module}-attachment-img  {
                 margin-top: $spacing-chat_chatBox_content_attachment-marginY;
                 margin-bottom: $spacing-chat_chatBox_content_attachment-marginY;
+                margin-right: $spacing-chat_chatBox_content_attachment-marginRight;
             }
 
             &-user {
@@ -457,6 +458,8 @@ $module: #{$prefix}-chat;
         flex-wrap: wrap;
         column-gap: $spacing-chat_attachment-columnGap;
         row-gap: $spacing-chat_attachment-RowGap;
+        margin-left: $spacing-chat_attachment-marginX;
+        margin-right: $spacing-chat_attachment-marginX;
 
         &-item {
             position: relative;
@@ -493,7 +496,7 @@ $module: #{$prefix}-chat;
         }
 
         &-file {
-            display: flex;
+            display: inline-flex;
             flex-direction: row;
             align-items: center;
             height: $width-chat_attachment_file;

diff --git a/packages/semi-foundation/chat/variables.scss b/packages/semi-foundation/chat/variables.scss
@@ -67,13 +67,15 @@ $spacing-chat_inputBox_inner-columnGap: 4px; // 输入框容器列间距
 $spacing-chat_inputBox-marginY: 4px;
 $spacing-chat_attachment-columnGap: 10px; // 附件列间距
 $spacing-chat_attachment-RowGap: 5px; // 附件行间距
+$spacing-chat_attachment-marginX: 12px; // 附件左右外边距
 $spacing-chat_attachment_clear-top: 8px;  // 附件清除图标顶部间距
 $spacing-chat_attachment_clear-right: 8px;  // 附件清除图标右内边距
 $spacing-chat_attachment_file-columnGap: 5px; // 文件附件列间距
 $spacing-chat_attachment_file-padding: 5px;  // 文件附件内边距
 $spacing-chat_chatBox_loading_item-gap: 15px; // 聊天内容加载图标间距 
 $spacing-chat_divider-marginY: 12px; // 分割线上下外边距
 $spacing-chat_chatBox_content_attachment-marginY: 4px; // 聊天框内容文件/图片上下外间距
+$spacing-chat_chatBox_content_attachment-marginRight: 4px; //聊天框内容文件/图片上下右间距
 $spacing-chat_chatBox_content_code_topSlot-paddingX: 5px; // 聊天框代码块顶部上下内边距
 $spacing-chat_chatBox_content_code_topSlot-paddingY: 8px; // 聊天框代码块顶部左右内边距
 $spacing-chat_chatBox_content_code_topSlot_copy-columnGap: 5px; // 聊天框代码块顶部复制按钮列间距: 

diff --git a/packages/semi-ui/chat/_story/constant.js b/packages/semi-ui/chat/_story/constant.js
@@ -69,7 +69,13 @@ const infoWithAttachment = [
             {
                 type: 'image_url',
                 image_url: {
-                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg'
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',
+                },
+            },
+            {
+                type: 'image_url',
+                image_url: {
+                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/SemiLogo.jpg'
                 },
             }
         ],

diff --git a/packages/semi-ui/chat/chatBox/chatBoxContent.tsx b/packages/semi-ui/chat/chatBox/chatBoxContent.tsx
@@ -47,28 +47,34 @@ const ChatBoxContent = (props: ChatBoxContentProps) => {
                 <span className={`${PREFIX_CHAT_BOX}-content-loading-item`} />
             </span>;
         } else {
-            let realContent = '';
+            let realContent;
             if (typeof content === 'string') {
-                realContent = content;
+                realContent = <MarkdownRender
+                    format='md'
+                    raw={content}
+                    components={markdownComponents as any}
+                />;
             } else if (Array.isArray(content)) {
-                realContent = content.map((item)=> {
+                realContent = content.map((item, index)=> {
                     if (item.type === 'text') {
-                        return item.text;
+                        return <MarkdownRender
+                            key={`index`}
+                            format='md'
+                            raw={item.text}
+                            components={markdownComponents as any}
+                        />;
                     } else if (item.type === 'image_url') {
-                        return `![image](${item.image_url.url})`;
+                        return <ImageAttachment key={`index`} src={item.image_url.url} />;
                     } else if (item.type === 'file_url') {
                         const { name, size, url, type } = item.file_url;
                         const realType = name.split('.').pop() ?? type?.split('/').pop();
-                        return `<SemiFile url={'${url}'} name={'${name}'} size={'${size}'} type={'${realType}'}></SemiFile>`;
+                        return <FileAttachment key={`index`} url={name} name={name} size={size} type={realType}></FileAttachment>;
                     }
-                    return '';
-                }).join('\n\n');
+                    return null;
+                });
             }
             return (<>
-                <MarkdownRender
-                    raw={realContent}
-                    components={markdownComponents as any}
-                />
+                {realContent}
             </>);
         }
     }, [status, content]);