style: Fix the problem that the width of the chat content area is stretched by the table (#2775)

packages/semi-foundation/chat/chat.scss

@@ -138,6 +138,8 @@ $module: #{$prefix}-chat;
 
         &-avatar {
             flex-shrink: 0;
+            width: $width-chat_chatBox_avatar;
+            height: $width-chat_chatBox_avatar;
 
             &-hidden {
                 visibility: hidden;
@@ -208,6 +210,7 @@ $module: #{$prefix}-chat;
             align-items: flex-start;
             position: relative;
             row-gap: $spacing-chat_chatBox_wrap;
+            max-width: calc(100% - $spacing-chat_chatBox-columnGap - $width-chat_chatBox_avatar);
         }
 
 
@@ -217,6 +220,8 @@ $module: #{$prefix}-chat;
                 padding: $spacing-chat_chatBox_content-paddingY $spacing-chat_chatBox_content-paddingX;
                 border-radius: $radius-chat_chatBox_content;
                 background-color: $color-chat_chatBox_content_bg;
+                max-width: 100%;
+                box-sizing: border-box;
             }
 
             code {

packages/semi-foundation/chat/variables.scss

@@ -104,6 +104,8 @@ $width-chat_attachment_file_title: 90px; // 附件文件标题最大宽度
 $width-chat_max: 800px; // chat组件最大宽度
 $width-chat_dropArea-border: 5px; // 拖拽上传边框宽度
 $width-chat_chatBox_content_code_topSlot_copy: 150px; // 聊天框代码块顶部复制按钮最小宽度 
+$width-chat_chatBox_avatar: 24px; // 聊天框头像宽度
+
 // height
 $height-chat_action_stop: 42px; //停止生成按钮高度
 

packages/semi-ui/chat/_story/chat.stories.jsx

@@ -4,7 +4,7 @@ import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { Form, Button, Avatar, Dropdown, Radio, RadioGroup, Switch, Collapsible, AvatarGroup, Divider } from '@douyinfe/semi-ui';
 import { IconUpload, IconForward, IconMoreStroked, IconArrowRight, IconChevronUp } from '@douyinfe/semi-icons';
 import MarkdownRender from '../../markdownRender';
-import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode, infoWithDivider, infoWithJSX } from './constant';
+import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode, infoWithDivider, infoWithJSX, tableContent } from './constant';
 
 export default {
     title: 'Chat',
@@ -149,6 +149,25 @@ export const _Chat = () => {
     )
 }
 
+
+export const TableContent = () => {
+    const [message, setMessage] = useState(tableContent);
+
+    return (
+        <div
+            style={{ height: 600, width: 400}}
+        >
+            <Chat 
+                placeholder={'不处理输入信息，仅用于展示'}
+                style={commonOuterStyle}
+                chats={message}
+                roleConfig={roleInfo}
+                uploadProps={uploadProps}
+            />
+        </div>
+    )
+}
+
 export const Attachment = () => {
     const [message, setMessage] = useState(infoWithAttachment);
 

packages/semi-ui/chat/_story/constant.js

@@ -74,7 +74,7 @@ const infoWithDivider = [
         createAt: 1715676751919,
         content: "test",
     },
-]
+];
 
 const infoWithAttachment = [
     {
@@ -168,7 +168,23 @@ const infoWithJSX = [
 直接在 Markdown 中书写 JSX 即可
 `
     },
-]
+];
+
+const tableContent = [
+    {
+        role: 'system',
+        id: '1',
+        createAt: 1715676751919,
+        content: `这是一个 Table示例
+| 支持 | Markdown 表格 |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2fdasfdsafdsafdsf | 3fdafdsafdsfd | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+`
+    },
+];
 
 export {
     initMessage,
@@ -179,5 +195,6 @@ export {
     simpleInitMessage,
     semiCode, 
     infoWithDivider,
-    infoWithJSX
+    infoWithJSX,
+    tableContent
 };