{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/chat","result":{"data":{"current":{"frontmatter":{"title":"Chat 对话","order":28,"brief":"用于快速搭建对话内容","icon":"doc-chat"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#消息状态","title":"消息状态"},{"url":"#动态更新数据","title":"动态更新数据"},{"url":"#清除上下文","title":"清除上下文"},{"url":"#自定义渲染会话框","title":"自定义渲染会话框"},{"url":"#自定义渲染输入框","title":"自定义渲染输入框"},{"url":"#提示信息","title":"提示信息"},{"url":"#自定义提示信息渲染","title":"自定义提示信息渲染"},{"url":"#api","title":"API","items":[{"url":"#roleconfig","title":"RoleConfig"},{"url":"#metadata","title":"Metadata"},{"url":"#message","title":"Message"},{"url":"#content","title":"Content"},{"url":"#methods","title":"Methods"}]}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 28,\n  \"category\": \"Plus\",\n  \"title\": \"Chat 对话\",\n  \"icon\": \"doc-chat\",\n  \"dir\": \"column\",\n  \"brief\": \"用于快速搭建对话内容\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Chat \\u7EC4\\u4EF6\\u53EF\\u7528\\u4E8E\\u666E\\u901A\\u4F1A\\u8BDD\\uFF0CAI \\u4F1A\\u8BDD\\u7B49\\u573A\\u666F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u8BDD\\u5185\\u5BB9\\u6E32\\u67D3\\u57FA\\u4E8E \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/markdownrender\"\n  }, \"MarkdownRender\"), \" \\u7EC4\\u4EF6\\uFF0C\\u652F\\u6301 Markdown \\u548C MDX (\\u6CE8\\uFF1AChat \\u4E2D\\u7684 MarkdownRender \\u7684\\u9ED8\\u8BA4 format \\u6A21\\u5F0F\\u662F md\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u4F7F\\u7528 MDX \\u683C\\u5F0F\\uFF0C\\u53EF\\u901A\\u8FC7 markdownRenderProps API \\u8BBE\\u7F6E)\\uFF0C\\u53EF\\u5B9E\\u73B0\\u56FE\\u7247\\uFF0C\\u8868\\u683C\\uFF0C\\u94FE\\u63A5\\uFF0C\\u52A0\\u7C97\\uFF0C\\u4EE3\\u7801\\u533A\\u7B49\\u5E38\\u7528\\u5BCC\\u6587\\u672C\\u529F\\u80FD\\u3002\\u4E5F\\u53EF\\u901A\\u8FC7 JSX \\u5B9E\\u73B0\\u66F4\\u52A0\\u590D\\u6742\\u5B9A\\u5236\\u5316\\u7684\\u6587\\u6863\\u64B0\\u5199\\u4E0E\\u5C55\\u793A\\u9700\\u6C42\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Chat \\u4ECE v2.63.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Chat } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chats\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChatsChange\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMessageSend\"), \" \\u5B9E\\u73B0\\u57FA\\u7840\\u5BF9\\u8BDD\\u663E\\u793A\\u548C\\u4EA4\\u4E92\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9644\\u4EF6\\u652F\\u6301\\u901A\\u8FC7\\u70B9\\u51FB\\u4E0A\\u4F20\\u6309\\u94AE\\uFF0C\\u8F93\\u5165\\u6846\\u7C98\\u8D34\\uFF0C\\u62D6\\u62FD\\u6587\\u4EF6\\u81F3 Chat \\u533A\\u57DF\\u4E0A\\u4F20\\u3002\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uploadProps\"), \" \\u8BBE\\u7F6E\\u4E0A\\u4F20\\u53C2\\u6570\\uFF0C\\u8BE6\\u60C5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/upload#API%20%E5%8F%82%E8%80%83\"\n  }, \"Upload\"), \"\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E0A\\u4F20\\u6309\\u94AE\\u7684\\u63D0\\u793A\\u6587\\u6848\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uploadTipProps\"), \" \\u8BBE\\u7F6E\\uFF0C\\u8BE6\\u60C5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/tooltip#API%20%E5%8F%82%E8%80%83\"\n  }, \"Tooltip\"), \"\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u8BDD\\u662F\\u591A\\u65B9\\u53C2\\u4E0E\\uFF0C\\u591A\\u8F6E\\u4EA4\\u4E92\\u7684\\u573A\\u666F\\u3002\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"roleConfig\"), \" \\u4F20\\u5165\\u89D2\\u8272\\u4FE1\\u606F\\uFF08\\u5305\\u62EC\\u540D\\u79F0\\uFF0C\\u5934\\u50CF\\u7B49\\uFF09\\uFF0C\\u5177\\u4F53\\u53C2\\u6570\\u7EC6\\u8282 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#roleConfig\"\n  }, \"RoleConfig\"), \"\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" \\u5C5E\\u6027\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5BF9\\u8BDD\\u7684\\u5E03\\u5C40\\uFF0C\\u652F\\u6301\\u5DE6\\u53F3\\u5206\\u5E03\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftRight\"), \"\\uFF0C \\u9ED8\\u8BA4\\uFF09\\u548C\\u5DE6\\u5BF9\\u9F50\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftAlign\"), \"\\uFF09\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat, Radio } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: \\\"\\u7ED9\\u4E00\\u4E2A Semi Design \\u7684 Button \\u7EC4\\u4EF6\\u7684\\u4F7F\\u7528\\u793A\\u4F8B\\\",\\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: \\\"\\u4EE5\\u4E0B\\u662F\\u4E00\\u4E2A Semi \\u4EE3\\u7801\\u7684\\u4F7F\\u7528\\u793A\\u4F8B\\uFF1A\\\\n\\\\`\\\\`\\\\`jsx \\\\nimport React from 'react';\\\\nimport { Button } from '@douyinfe/semi-ui';\\\\n\\\\nconst MyComponent = () => {\\\\n  return (\\\\n    <Button>Click me</Button>\\\\n );\\\\n};\\\\nexport default MyComponent;\\\\n\\\\`\\\\`\\\\`\\\\n\\\",\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    margin: '8px 16px',\\n    height: 550,\\n}\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\n\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\nconst uploadTipProps = { content: '\\u81EA\\u5B9A\\u4E49\\u4E0A\\u4F20\\u6309\\u94AE\\u63D0\\u793A\\u4FE1\\u606F' }\\n\\nfunction DefaultChat() {\\n    const [message, setMessage] = useState(defaultMessage);\\n    const [mode, setMode] = useState('bubble');\\n    const [align, setAlign] = useState('leftRight');\\n\\n    const onAlignChange = useCallback((e) => {\\n        setAlign(e.target.value);\\n    }, []);\\n\\n    const onModeChange = useCallback((e) => {\\n        setMode(e.target.value);\\n    }, []); \\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            createAt: Date.now(),\\n            content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const onMessageReset = useCallback((e) => {\\n        setTimeout(() => {\\n            setMessage((message) => {\\n                const lastMessage = message[message.length - 1];\\n                const newLastMessage = {\\n                    ...lastMessage,\\n                    status: 'complete',\\n                    content: 'This is a mock reset message.',\\n                }\\n                return [...message.slice(0, -1), newLastMessage]\\n            })\\n        }, 200);\\n    })\\n\\n    return (\\n        <>\\n            <span style={{ display: 'flex', flexDirection: 'column', rowGap: '8px'}}>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px'}}>\\n                    \\u6A21\\u5F0F\\n                    <RadioGroup onChange={onModeChange} value={mode} type={\\\"button\\\"}>\\n                        <Radio value={'bubble'}>\\u6C14\\u6CE1</Radio>\\n                        <Radio value={'noBubble'}>\\u975E\\u6C14\\u6CE1</Radio>\\n                        <Radio value={'userBubble'}>\\u7528\\u6237\\u4F1A\\u8BDD\\u6C14\\u6CE1</Radio>\\n                    </RadioGroup>\\n                </span>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px'}}>\\n                    \\u4F1A\\u8BDD\\u5E03\\u5C40\\u65B9\\u5F0F\\n                    <RadioGroup onChange={onAlignChange} value={align} type={\\\"button\\\"}>\\n                        <Radio value={'leftRight'}>\\u5DE6\\u53F3\\u5206\\u5E03</Radio>\\n                        <Radio value={'leftAlign'}>\\u5DE6\\u5BF9\\u9F50</Radio>\\n                    </RadioGroup>\\n                </span>\\n            </span>\\n            <Chat \\n                key={align + mode}\\n                align={align}\\n                mode={mode}\\n                uploadProps={uploadProps}\\n                style={commonOuterStyle}\\n                chats={message}\\n                roleConfig={roleInfo}\\n                onChatsChange={onChatsChange}\\n                onMessageSend={onMessageSend}\\n                onMessageReset={onMessageReset}\\n                uploadTipProps={uploadTipProps}\\n            />\\n        </>\\n    )\\n}\\n\\nrender(DefaultChat);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6D88\\u606F\\u72B6\\u6001\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"chats \\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Message[]\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Message\"), \" \\u5305\\u542B\\u5BF9\\u8BDD\\u7684\\u5404\\u79CD\\u4FE1\\u606F\\uFF0C\\u5982\\u89D2\\u8272\\uFF08role\\uFF09\\u3001\\u5185\\u5BB9\\uFF08content\\uFF09\\u3001\\u9644\\u4EF6\\uFF08attachment\\uFF09\\u3001\\u72B6\\u6001\\uFF08status\\uFF09\\n\\u3001\\u552F\\u4E00\\u6807\\u8BC6\\uFF08id\\uFF09\\u3001\\u521B\\u5EFA\\u65F6\\u95F4\\uFF08createAt\\uFF09\\u7B49\\uFF0C\\u5177\\u4F53\\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Message\"\n  }, \"Message\"), \"\\u3002\\u5176\\u4E2D status \\u4E0D\\u540C\\uFF0C\\u4F1A\\u8BDD\\u6837\\u5F0F\\u4E0D\\u540C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'assistant',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"\\u8BF7\\u6C42\\u6210\\u529F\\\",   \\n    },\\n    {\\n        id: 'loading',\\n        role: 'assistant',\\n        status: 'loading'\\n    },\\n    {\\n        role: 'assistant',\\n        id: 'error',\\n        content: '\\u8BF7\\u6C42\\u9519\\u8BEF',\\n        status: 'error'\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n}\\n\\nlet id = 0;\\nfunction getId() { return `id-${id++}` }\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nfunction MessageStatus() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            createAt: Date.now(),\\n            content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    return (\\n        <Chat \\n            style={commonOuterStyle}\\n            chats={message}\\n            roleConfig={roleInfo}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            uploadProps={uploadProps}\\n        />\\n    )\\n}\\n\\nrender(MessageStatus);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u6001\\u66F4\\u65B0\\u6570\\u636E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u540E\\u53F0\\u8FD4\\u56DE Serve Side Event \\u6570\\u636E\\u60C5\\u51B5\\uFF0C\\u53EF\\u5C06\\u83B7\\u53D6\\u5230\\u7684\\u6570\\u636E\\u7528\\u4E8E\\u66F4\\u65B0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chats\"), \"\\uFF0C\\u5BF9\\u8BDD\\u5185\\u5BB9\\u5C06\\u5B9E\\u65F6\\u66F4\\u65B0\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showStopGenerate\"), \" \\u53C2\\u6570\\u53EF\\u7528\\u4E8E\\u8BBE\\u7F6E\\u662F\\u5426\\u5C55\\u793A\\u505C\\u6B62\\u751F\\u6210\\u6309\\u94AE\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u3002 \\u53EF\\u4EE5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onStopGenerator\"), \" \\u4E2D\\u5904\\u7406\\u505C\\u6B62\\u751F\\u6210\\u903B\\u8F91\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: \\\"\\u4ECB\\u7ECD\\u4E00\\u4E0B Semi design\\\"\\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: `\\nSemi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237[[1]](https://semi.design/zh-CN/start/introduction)\\u3002\\n\\nSemi Design\\u7684\\u7279\\u70B9\\u5305\\u62EC\\uFF1A\\n\\n1. \\u8BBE\\u8BA1\\u7B80\\u6D01\\u3001\\u73B0\\u4EE3\\u5316\\u3002\\n2. \\u63D0\\u4F9B\\u4E3B\\u9898\\u65B9\\u6848\\uFF0C\\u53EF\\u6DF1\\u5EA6\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\\n3. \\u63D0\\u4F9B\\u660E\\u6697\\u8272\\u4E24\\u5957\\u6A21\\u5F0F\\uFF0C\\u5207\\u6362\\u65B9\\u4FBF\\u3002\\n4. \\u56FD\\u9645\\u5316\\uFF0C\\u8986\\u76D6\\u4E86\\u7B80/\\u7E41\\u4F53\\u4E2D\\u6587\\u3001\\u82F1\\u8BED\\u3001\\u65E5\\u8BED\\u3001\\u97E9\\u8BED\\u3001\\u8461\\u8404\\u7259\\u8BED\\u7B4920+\\u79CD\\u8BED\\u8A00\\uFF0C\\u65E5\\u671F\\u65F6\\u95F4\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u5168\\u7403\\u65F6\\u533A\\u652F\\u6301\\uFF0C\\u5168\\u90E8\\u7EC4\\u4EF6\\u53EF\\u81EA\\u52A8\\u9002\\u914D\\u963F\\u62C9\\u4F2F\\u6587RTL\\u5E03\\u5C40\\u3002\\n5. \\u91C7\\u7528 Foundation \\u548C Adapter \\u8DE8\\u6846\\u67B6\\u6280\\u672F\\u65B9\\u6848\\uFF0C\\u65B9\\u4FBF\\u6269\\u5C55\\u3002\\n\\n---\\nLearn more:\\n1. [Introduction \\u4ECB\\u7ECD - Semi Design](https://semi.design/zh-CN/start/introduction)\\n2. [Getting Started \\u5FEB\\u901F\\u5F00\\u59CB - Semi Design](https://semi.design/zh-CN/start/getting-started)\\n3. [Semi D2C \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801\\u7684\\u6F14\\u8FDB\\u4E4B\\u8DEF - \\u77E5\\u4E4E](https://zhuanlan.zhihu.com/p/667189184)\\n`,\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 600,\\n}\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nfunction DynamicUpdateChat() {\\n    const [message, setMessage] = useState(defaultMessage);\\n    const intervalId = useRef();\\n    const onMessageSend = useCallback((content, attachment) => {\\n        setMessage((message) => {\\n            return [\\n                ...message,\\n                {\\n                    role: 'assistant',\\n                    status: 'loading',\\n                    createAt: Date.now(),\\n                    id: getId()\\n                }\\n            ]\\n        }); \\n        generateMockResponse(content);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const generateMockResponse = useCallback((content) => {\\n        const id = setInterval(() => {\\n            setMessage((message) => {\\n                const lastMessage = message[message.length - 1];\\n                let newMessage = {...lastMessage};\\n                if (lastMessage.status === 'loading') {\\n                    newMessage = {\\n                        ...newMessage,\\n                        content:  `mock Response for ${content} \\\\n`,\\n                        status: 'incomplete'\\n                    }\\n                } else if (lastMessage.status === 'incomplete') {\\n                    if (lastMessage.content.length > 200) {\\n                        clearInterval(id);\\n                        intervalId.current = null\\n                        newMessage = {\\n                            ...newMessage,\\n                            content: `${lastMessage.content} mock stream message`,\\n                            status: 'complete'\\n                        }\\n                    } else {\\n                        newMessage = {\\n                            ...newMessage,\\n                            content: `${lastMessage.content} mock stream message`\\n                        }\\n                    }  \\n                }\\n                return [ ...message.slice(0, -1), newMessage ]\\n            })\\n        }, 400);\\n        intervalId.current = id;\\n    }, []);\\n\\n    const onStopGenerator = useCallback(() => {\\n        if (intervalId.current) {\\n            clearInterval(intervalId.current);\\n            setMessage((message) => {\\n                const lastMessage = message[message.length - 1];\\n                if (lastMessage.status && lastMessage.status !== 'complete') {\\n                    const lastMessage = message[message.length - 1];\\n                    let newMessage = {...lastMessage};\\n                    newMessage.status = 'complete';\\n                    return [\\n                        ...message.slice(0, -1),\\n                        newMessage\\n                    ]\\n                } else {\\n                    return message;\\n                }\\n            })\\n        }\\n    }, [intervalId]);\\n\\n    return (\\n        <Chat \\n            chats={message}\\n            showStopGenerate={true}\\n            style={commonOuterStyle}\\n            onStopGenerator={onStopGenerator}\\n            roleConfig={roleInfo}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            uploadProps={uploadProps}\\n        />\\n    )\\n}\\n\\nrender(DynamicUpdateChat);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showClearContext\"), \" \\u53EF\\u4EE5\\u5F00\\u542F\\u5728\\u8F93\\u5165\\u6846\\u4E2D\\u663E\\u793A\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u6309\\u94AE\\uFF0C\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u3002\\n\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clearContext\"), \" \\u65B9\\u6CD5\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat, Radio } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: \\\"\\u4ECB\\u7ECD\\u4E00\\u4E0B semi design\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF',\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    margin: '8px 16px',\\n    height: 550,\\n}\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\n\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\nconst uploadTipProps = { content: '\\u81EA\\u5B9A\\u4E49\\u4E0A\\u4F20\\u6309\\u94AE\\u63D0\\u793A\\u4FE1\\u606F' }\\n\\nfunction DefaultChat() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            createAt: Date.now(),\\n            content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const onMessageReset = useCallback((e) => {\\n        setTimeout(() => {\\n            setMessage((message) => {\\n                const lastMessage = message[message.length - 1];\\n                const newLastMessage = {\\n                    ...lastMessage,\\n                    status: 'complete',\\n                    content: 'This is a mock reset message.',\\n                }\\n                return [...message.slice(0, -1), newLastMessage]\\n            })\\n        }, 200);\\n    })\\n\\n    return (\\n        <>\\n            <Chat\\n                uploadProps={uploadProps}\\n                style={commonOuterStyle}\\n                chats={message}\\n                roleConfig={roleInfo}\\n                onChatsChange={onChatsChange}\\n                onMessageSend={onMessageSend}\\n                onMessageReset={onMessageReset}\\n                uploadTipProps={uploadTipProps}\\n                showClearContext\\n            />\\n        </>\\n    )\\n}\\n\\nrender(DefaultChat);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u4F1A\\u8BDD\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chatBoxRenderConfig\"), \" \\u4F20\\u5165\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u914D\\u7F6E, chatBoxRenderConfig \\u7C7B\\u578B\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"export interface RenderTitleProps {\\n    message?: Message;\\n    role?: Metadata;\\n    defaultTitle?: ReactNode\\n}\\n\\nexport interface RenderAvatarProps {\\n    message?: Message; /* Supported in  2.69.0*/\\n    role?: Metadata, \\n    defaultAvatar?: ReactNode\\n}\\n\\nexport interface RenderContentProps {\\n    message?: Message;\\n    role?: Metadata;\\n    defaultContent?: ReactNode | ReactNode[]; \\n    className?: string;\\n}\\n\\nexport interface DefaultActionNodeObj {\\n    copyNode: ReactNode;\\n    likeNode: ReactNode;\\n    dislikeNode: ReactNode;\\n    resetNode: ReactNode;\\n    deleteNode: ReactNode;\\n}\\n\\nexport interface RenderActionProps {\\n    message?: Message;\\n    defaultActions?: ReactNode | ReactNode[];\\n    className: string;\\n    defaultActionsObj?: DefaultActionNodeObj; /* Supported in  2.69.0*/\\n};\\n\\nexport interface FullChatBoxNodes {\\n    avatar?: ReactNode;\\n    title?: ReactNode; \\n    content?: ReactNode; \\n    action?: ReactNode\\n}\\n\\nexport interface RenderFullChatBoxProps {\\n    message?: Message;\\n    role?: Metadata;\\n    defaultNodes?: FullChatBoxNodes;\\n    className: string;\\n}\\n\\nexport interface ChatBoxRenderConfig {\\n    /* \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6807\\u9898 */\\n    renderChatBoxTitle?: (props: RenderTitleProps) => ReactNode;\\n    /* \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5934\\u50CF */\\n    renderChatBoxAvatar?: (props: RenderAvatarProps) => ReactNode;\\n    /* \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5185\\u5BB9\\u533A\\u57DF */\\n    renderChatBoxContent?: (props: RenderContentProps) => ReactNode;\\n    /* \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6D88\\u606F\\u64CD\\u4F5C\\u680F */\\n    renderChatBoxAction?: (props: RenderActionProps) => ReactNode;\\n    /* \\u5B8C\\u5168\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6574\\u4E2A\\u804A\\u5929\\u6846 */\\n    renderFullChatBox?: (props: RenderFullChatBoxProps) => ReactNode\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5934\\u50CF\\u548C\\u6807\\u9898\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxAvatar\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxTitle\"), \" \\u5B9E\\u73B0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"\\nimport React, {useState, useCallback} from 'react';\\nimport { Chat, Avatar, Tag } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: [\\n            {\\n                type: 'text',\\n                text: '\\u8FD9\\u5F20\\u56FE\\u7247\\u91CC\\u6709\\u4EC0\\u4E48\\uFF1F'\\n            },\\n            {\\n                type: 'image_url',\\n                image_url: {\\n                    url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg'\\n                }\\n            }\\n        ], \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: '\\u56FE\\u7247\\u4E2D\\u662F\\u4E00\\u4E2A\\u6709\\u5361\\u901A\\u753B\\u50CF\\u88C5\\u9970\\u7684\\u9EC4\\u8272\\u80CC\\u5305\\u3002'\\n    },\\n\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n}\\n\\nlet id = 0;\\nfunction getId() { return `id-${id++}`; }\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nfunction CustomRender() {\\n    const [title, setTitle] = useState('null');\\n    const [avatar, setAvatar] = useState('null');\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const customRenderAvatar = useMemo(()=> {\\n        switch(avatar) {\\n            case 'custom': return (props) => {\\n                    const { role, defaultAvatar } = props;\\n                    return <Avatar size=\\\"extra-small\\\" shape=\\\"square\\\" style={{ flexShrink: '0'}}>{role.name}</Avatar >\\n                }\\n            case 'null': return () => null\\n            case 'default': return undefined;\\n        }\\n    }, [avatar]);\\n\\n    const customRenderTitle = useMemo(()=> {\\n        switch(title) {\\n            case 'custom': return (props) => {\\n                    const { role, defaultTitle, message } = props;\\n                    const date = new Date(message.createAt);\\n                    const hours = ('0' + date.getHours()).slice(-2);\\n                    const minutes = ('0' + date.getMinutes()).slice(-2);\\n                    const formatTime = `${hours}:${minutes}`;\\n                    return (<span className=\\\"title\\\" >\\n                        {role.name}\\n                        <span className={'time'}>{formatTime}</span>\\n                    </span>)\\n            }\\n            case 'null': return () => null\\n            case 'default': return undefined;\\n        }\\n    }, [title]);;\\n\\n    const onAvatarChange = useCallback((e) => { setAvatar(e.target.value) }, []);\\n    const onTitleChange = useCallback((e) => { setTitle(e.target.value) }, []);\\n\\n     const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            content: `This is a mock response`\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    return (\\n        <>\\n            <span style={{ display: 'flex', flexDirection: 'column', rowGap: 8, marginBottom: 5}}>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: 10}}>\\n                    \\u5934\\u50CF\\u6E32\\u67D3\\u6A21\\u5F0F\\n                    <RadioGroup onChange={onAvatarChange} value={avatar} type=\\\"button\\\">\\n                    <Radio value={'default'}>\\u9ED8\\u8BA4\\u5934\\u50CF</Radio>\\n                    <Radio value={'null'}>\\u65E0\\u5934\\u50CF</Radio>\\n                    <Radio value={'custom'}>\\u81EA\\u5B9A\\u4E49\\u5934\\u50CF</Radio>\\n                </RadioGroup>\\n                </span>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: 10}}>\\n                    \\u6807\\u9898\\u6E32\\u67D3\\u6A21\\u5F0F\\n                    <RadioGroup onChange={onTitleChange} value={title} type=\\\"button\\\">\\n                    <Radio value={'default'}>\\u9ED8\\u8BA4\\u6807\\u9898</Radio>\\n                    <Radio value={'null'}>\\u65E0\\u6807\\u9898</Radio>\\n                    <Radio value={'custom'}>\\u81EA\\u5B9A\\u4E49\\u6807\\u9898</Radio>\\n                </RadioGroup>\\n                </span>\\n            </span>\\n            <Chat\\n                chatBoxRenderConfig={{\\n                    renderChatBoxTitle: customRenderTitle,\\n                    renderChatBoxAvatar: customRenderAvatar\\n                }} \\n                key={`${avatar}${title}`}\\n                style={commonOuterStyle}\\n                className={'component-chat-demo-custom-render'}\\n                chats={message}\\n                onChatsChange={onChatsChange}\\n                onMessageSend={onMessageSend}\\n                roleConfig={roleInfo}\\n                uploadProps={uploadProps}\\n            />\\n        </>\\n    );\\n}\\n\\nrender(CustomRender);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9F20\\u6807\\u79FB\\u52A8\\u5230\\u4F1A\\u8BDD\\u4E0A\\uFF0C\\u5373\\u53EF\\u663E\\u793A\\u4F1A\\u8BDD\\u64CD\\u4F5C\\u533A\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxAction\"), \" \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u64CD\\u4F5C\\u533A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat, Dropdown } from '@douyinfe/semi-ui';\\nimport { IconForward } from '@douyinfe/semi-icons';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: \\\"\\u4ECB\\u7ECD\\u4E00\\u4E0B semi design\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF',\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n}\\n\\nlet id = 0;\\nfunction getId() { return `id-${id++}`; }\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nconst CustomActions = React.memo((props) => {\\n    const { role, message, defaultActions, className } = props;\\n    const myRef = useRef();\\n    const getContainer = useCallback(() => {\\n        if (myRef.current) {\\n            const element = myRef.current;\\n            let parentElement = element.parentElement;\\n            while (parentElement) {\\n                if (parentElement.classList.contains('semi-chat-chatBox-wrap')) {\\n                    return parentElement;\\n                }\\n                parentElement = parentElement.parentElement;\\n            }\\n        }\\n    }, [myRef]);\\n\\n    return <span \\n        className={className}\\n        ref={myRef}\\n    >\\n        {defaultActions}\\n        {<Dropdown\\n            key=\\\"dropdown\\\"\\n            render={\\n                <Dropdown.Menu >\\n                    <Dropdown.Item icon={<IconForward />}>\\u5206\\u4EAB</Dropdown.Item>\\n                </Dropdown.Menu>\\n            }\\n            trigger=\\\"click\\\"\\n            position=\\\"top\\\"\\n            getPopupContainer={getContainer}\\n        >\\n            <Button \\n                className='semi-chat-chatBox-action-btn'\\n                icon={<IconMoreStroked/>}\\n                theme='borderless'\\n                type='tertiary'\\n            />\\n        </Dropdown>}\\n    </span>\\n});\\n\\nfunction CustomRender() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const customRenderAction = useCallback((props) => {\\n        return <CustomActions {...props} />\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            content: `This is a mock response`\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    return (\\n        <Chat\\n            chatBoxRenderConfig={{ \\n                renderChatBoxAction: customRenderAction \\n            }}\\n            style={commonOuterStyle}\\n            chats={message}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            roleConfig={roleInfo}\\n            uploadProps={uploadProps}\\n        />\\n    );\\n}\\n\\nrender(CustomRender);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxContent\"), \" \\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C\\u533A\\u57DF\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState, useCallback, useRef} from 'react';\\nimport { Chat, MarkdownRender } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n        {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: \\\"Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\uFF0CMED \\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u5B83\\u4F5C\\u4E3A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528 UI \\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u652F\\u6491\\u8FD1\\u5343\\u8BA1\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u5185\\u5916\\u90E8 10 \\u4E07+ \\u7528\\u6237\\u3002\\\",\\n        source: [\\n            {\\n                avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',\\n                url: '/zh-CN/start/introduction',\\n                title: 'semi Design',\\n                subTitle: 'Semi design website',\\n                content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\uFF0CMED \\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002'\\n            },\\n            {\\n                avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',\\n                url: '/dsm/landing',\\n                subTitle: 'Semi DSM website',\\n                title: 'Semi \\u8BBE\\u8BA1\\u7CFB\\u7EDF',\\n                content: '\\u4ECE Semi Design\\uFF0C\\u5230 Any Design \\u5FEB\\u901F\\u5B9A\\u4E49\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D'\\n            },\\n            {\\n                avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',\\n                url: '/code/zh-CN/start/introduction',\\n                subTitle: 'Semi D2C website',\\n                title: '\\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801',\\n                content: 'Semi \\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801\\uFF08Semi Design to Code\\uFF0C\\u6216\\u7B80\\u79F0 Semi D2C\\uFF09\\uFF0C\\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF Semi Design \\u56E2\\u961F\\u63A8\\u51FA\\u7684\\u5168\\u65B0\\u7684\\u63D0\\u6548\\u5DE5\\u5177'\\n            },\\n        ]\\n    }];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 500,\\n}\\n\\nlet id = 0;\\nfunction getId() { return `id-${id++}` }\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nconst SourceCard = (props) => {\\n    const [open, setOpen] = useState(true);\\n    const [show, setShow] = useState(false);\\n    const { source } = props;\\n    const spanRef = useRef();\\n    const onOpen = useCallback(() => {\\n        setOpen(false);\\n        setShow(true);\\n    }, []);\\n\\n    const onClose = useCallback(() => {\\n        setOpen(true);\\n        setTimeout(() => {\\n            setShow(false);\\n        }, 350)\\n    }, []);\\n\\n    return (<div style={{ \\n            transition: open ? 'height 0.4s ease, width 0.4s ease': 'height 0.4s ease',\\n            height: open ? '30px' : '200px',\\n            width: open ? '190px': '100%', \\n            background: 'var(--semi-color-tertiary-light-hover)', \\n            borderRadius: 16,\\n            boxSizing: 'border-box',\\n            marginBottom: 10,\\n        }}\\n        >\\n        <span\\n            ref={spanRef} \\n            style={{\\n                display: !open ? 'none' : 'flex',\\n                width: 'fit-content',\\n                columnGap: 10,\\n                background: 'var(--semi-color-tertiary-light-hover)', \\n                borderRadius: '16px',\\n                padding: '5px 10px',\\n                point: 'cursor',\\n                fontSize: 14,\\n                color: 'var(--semi-color-text-1)',\\n            }}\\n            onClick={onOpen} \\n        >\\n            <span>\\u57FA\\u4E8E{source.length}\\u4E2A\\u641C\\u7D22\\u6765\\u6E90</span>\\n            <AvatarGroup size=\\\"extra-extra-small\\\" >\\n                {source.map((s, index) => (<Avatar key={index} src={s.avatar}></Avatar>))}        \\n            </AvatarGroup>\\n        </span>\\n        <span \\n            style={{\\n                height: '100%',\\n                boxSizing: 'border-box',\\n                display: !open ? 'flex' : 'none',\\n                flexDirection: 'column',\\n                background: 'var(--semi-color-tertiary-light-hover)', borderRadius: '16px', padding: 12, boxSize: 'border-box'\\n            }}\\n            onClick={onClose}\\n            >\\n            <span style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between',\\n                    padding: '5px 10px', columnGap: 10, color: 'var(--semi-color-text-1)'\\n            }}>\\n                <span style={{fontSize: 14, fontWeight: 500}}>Source</span>\\n                <IconChevronUp />\\n            </span>\\n            <span style={{display: 'flex', flexWrap: 'wrap', gap: 10,  overflow: 'scroll', padding: '5px 10px'}}>\\n                {source.map(s => (\\n                    <span style={{ \\n                        display: 'flex', \\n                        flexDirection: 'column', \\n                        rowGap: 5, \\n                        flexBasis: 150, \\n                        flexGrow: 1,\\n                        border: \\\"1px solid var(--semi-color-border)\\\",\\n                        borderRadius: 12,\\n                        padding: 12,\\n                        fontSize: 12\\n                    }}>\\n                        <span style={{display: 'flex', columnGap: 5, alignItems: 'center', }}>\\n                            <Avatar style={{width: 16, height: 16, flexShrink: 0 }} shape=\\\"square\\\" src={s.avatar} />\\n                            <span style={{ color: 'var(--semi-color-text-2)', textOverflow: 'ellipsis'}}>{s.title}</span>\\n                        </span>\\n                        <span style={{\\n                            color: 'var(--semi-color-primary)',\\n                            fontSize: 12,\\n                        }}\\n                        >{s.subTitle}</span>\\n                        <span style={{\\n                            display: '-webkit-box',\\n                            \\\"-webkit-box-orient\\\": 'vertical',\\n                            WebkitLineClamp: '3', \\n                            textOverflow: 'ellipsis', \\n                            overflow: 'hidden',\\n                            color: 'var(--semi-color-text-2)',\\n                        }}>{s.content}</span>\\n                    </span>))}\\n                </span>\\n            </span>\\n        </div>\\n    )\\n}\\n\\nfunction CustomRender() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n     const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            content: `This is a mock response`\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const renderContent = useCallback((props) => {\\n        const { role, message, defaultNode, className } = props;\\n        return <div className={className}>\\n            {message.source && <SourceCard source={message.source} />}\\n            <MarkdownRender raw={message.content}/>\\n        </div>\\n    }, []);\\n\\n    return (\\n        <Chat\\n            style={commonOuterStyle}\\n            chats={message}\\n            roleConfig={roleInfo}\\n            chatBoxRenderConfig={{ renderChatBoxContent: renderContent }}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            uploadProps={uploadProps}\\n        />\\n    );\\n}\\n\\nrender(CustomRender);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFullChatBox\"), \" \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u6574\\u4E2A\\u4F1A\\u8BDD\\u6846\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat, Avatar } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n    {\\n        role: 'user',\\n        id: '2',\\n        createAt: 1715676751919,\\n        content: \\\"\\u4ECB\\u7ECD\\u4E00\\u4E0B semi design\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF',\\n    }\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n}\\n\\nlet id = 0;\\nfunction getId() { return `id-${id++}`; }\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nconst titleStyle = { display:' flex', alignItems: 'center', justifyContent: 'center', columnGap: '10px', padding: '5px 0px', width: 'fit-content' };\\n\\nfunction CustomFullRender() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const customRenderChatBox = useCallback((props) => {\\n        const { role, message, defaultNodes, className } = props;\\n        let titleNode = null;\\n        if (message.role !== 'user') {\\n            titleNode = (<span style={titleStyle}>\\n                <Avatar size=\\\"extra-small\\\" shape=\\\"square\\\" src={role.avatar} />\\n                {defaultNodes.title}\\n            </span>)\\n        }\\n        return <div className={className}>\\n            <div style={{ display: 'flex', flexDirection: 'column', rowGap: 4, alignItems: message.role === 'user' ? 'end' : ''}}>\\n                {titleNode}\\n                <div style={{ width: 'fit-content'}}>\\n                    {defaultNodes.content}\\n                </div>\\n                {defaultNodes.action}\\n            </div>\\n        </div>\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats)\\n    } ,[]);\\n\\n     const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            content: `This is a mock response`\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n    \\n    return ( <Chat\\n        chatBoxRenderConfig={{ renderFullChatBox: customRenderChatBox }}\\n        style={commonOuterStyle} \\n        chats={message}\\n        onChatsChange={onChatsChange}\\n        onMessageSend={onMessageSend}\\n        roleConfig={roleInfo}\\n        uploadProps={uploadProps}\\n    />);\\n}\\n\\nrender(CustomFullRender)\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u8F93\\u5165\\u6846\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderInputArea\"), \" \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u8F93\\u5165\\u6846\\uFF0C\\u53C2\\u6570\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"export interface RenderInputAreaProps {\\n    /* \\u9ED8\\u8BA4\\u8282\\u70B9 */\\n    defaultNode?: ReactNode;\\n    /* \\u5982\\u679C\\u81EA\\u5B9A\\u4E49\\u8F93\\u5165\\u6846\\uFF0C\\u53D1\\u9001\\u6D88\\u606F\\u65F6\\u9700\\u8C03\\u7528 */\\n    onSend?: (content?: string, attachment?: FileItem[]) => void;\\n    /* \\u5982\\u679C\\u81EA\\u5B9A\\u4E49\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u6309\\u94AE\\uFF0C\\u70B9\\u51FB\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u65F6\\u9700\\u8C03\\u7528 */\\n    onClear?: (e?: any) => void;\\n    /* detailProps \\u81EA 2.69.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301 */\\n    detailProps: {\\n        /* \\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u6309\\u94AE */\\n        clearContextNode?: ReactNode;\\n        /* \\u4E0A\\u4F20\\u6309\\u94AE */\\n        uploadNOde?: ReactNode;\\n        /* \\u6587\\u672C\\u8F93\\u5165\\u6846 */\\n        inputNode?: ReactNode;\\n        /* \\u53D1\\u9001\\u6309\\u94AE */\\n        sendNode?: ReactNode;\\n        /* \\u70B9\\u51FB\\u89E6\\u53D1\\u805A\\u7126\\u6587\\u672C\\u8F93\\u5165\\u6846\\u7684\\u5904\\u7406\\u51FD\\u6570*/\\n        onClick?: (e?: MouseEvent) => void;\\n    }\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"detailProps\"), \" \\u7684\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"function CustomInputRender(props) {\\n     const { detailProps } = props;\\n    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } = detailProps;\\n   \\n    return <div style={{margin: '8px 16px', display: 'flex', flexDirection:'row',\\n      alignItems: 'flex-end', borderRadius: 16,padding: 10, border: '1px solid var(--semi-color-border)'}}\\n      onClick={onClick} \\n    >\\n        {uploadNode}\\n        {inputNode}\\n        {sendNode}\\n    </div>\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Form, Chat } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'system',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Hello, I'm your AI assistant.\\\",   \\n    },\\n];\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 500,\\n};\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nconst inputStyle = {   \\n    display: 'flex', \\n    flexDirection: 'column', \\n    border: '1px solid var(--semi-color-border)',\\n    margin: '8px 16px',\\n    borderRadius: 8,\\n    padding: 8\\n}\\n\\nfunction CustomInputRender(props) {\\n    const { defaultNode, onClear, onSend } = props;\\n    const api = useRef();\\n    const onSubmit = useCallback(() => {\\n        if (api.current) {\\n            const values = api.current.getValues();\\n            if ((values.name && values.name.length !== 0) || (values.file && values.file.length !== 0)) {\\n                onSend(values.name, values.file);\\n                api.current.reset();\\n            } \\n        }\\n    }, []);\\n\\n    return (<div style={inputStyle}>\\n        <Form\\n            getFormApi={formApi => api.current = formApi}\\n        >\\n            <strong>\\u8F93\\u5165\\u4FE1\\u606F</strong>\\n            <Form.Input\\n                field=\\\"name\\\"\\n                label=\\\"\\u540D\\u79F0\\uFF08Input\\uFF09\\\"\\n                style={{ width: 250 }}\\n                trigger='blur'\\n            />\\n            <Form.Upload\\n                field='file'\\n                label='\\u6587\\u6863'\\n                action='https://api.semi.design/upload'\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    \\u70B9\\u51FB\\u4E0A\\u4F20\\n                </Button>\\n            </Form.Upload>\\n        </Form>\\n        <Button style={{ width: 'fit-content' }} onClick={onSubmit}>\\u63D0\\u4EA4</Button>\\n    </div>);\\n}\\n\\nfunction CustomRenderInputArea() {\\n    const [message, setMessage] = useState(defaultMessage);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            content: `This is a mock response`\\n        } \\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const renderInputArea = useCallback((props) => {\\n        return (<CustomInputRender {...props} />)\\n    }, []);    \\n\\n    return (\\n        <Chat\\n            renderInputArea={renderInputArea}\\n            style={commonOuterStyle}\\n            chats={message}\\n            roleConfig={roleInfo}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            uploadProps={uploadProps}\\n        />\\n    )\\n}\\nrender(CustomRenderInputArea);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hints\"), \" \\u53EF\\u8BBE\\u7F6E\\u63D0\\u793A\\u533A\\u57DF\\u5185\\u5BB9, \\u70B9\\u51FB\\u63D0\\u793A\\u5185\\u5BB9\\u540E\\uFF0C\\u63D0\\u793A\\u5185\\u5BB9\\u5C06\\u6210\\u4E3A\\u65B0\\u7684\\u7528\\u6237\\u8F93\\u5165\\u5185\\u5BB9\\uFF0C\\u5E76\\u89E6\\u53D1 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onHintClick\"), \" \\u56DE\\u8C03\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'assistant',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5411\\u6211\\u63D0\\u95EE\\u4EFB\\u4F55\\u5173\\u4E8E Semi \\u7684\\u95EE\\u9898\\u3002',\\n    }\\n];\\n\\nconst hintsExample = [\\n    \\\"\\u544A\\u8BC9\\u6211\\u66F4\\u591A\\\",\\n    \\\"Semi Design \\u7684\\u7EC4\\u4EF6\\u6709\\u54EA\\u4E9B\\uFF1F\\\",\\n    \\\"\\u6211\\u80FD\\u591F\\u901A\\u8FC7 DSM \\u5B9A\\u5236\\u81EA\\u5DF1\\u7684\\u4E3B\\u9898\\u5417\\uFF1F\\\",\\n]\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n};\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nfunction DefaultChat() {\\n    const [message, setMessage] = useState(defaultMessage);\\n    const [hints, setHints] = useState(hintsExample);\\n\\n    const onHintClick = useCallback(() => {\\n        setHints([]);\\n    }, [])\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            createAt: Date.now(),\\n            content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    onClear = useCallback(() => {\\n        setHints([]);\\n    }, [])\\n\\n    return (\\n        <Chat \\n            hints={hints}\\n            onHintClick={onHintClick}\\n            style={commonOuterStyle}\\n            chats={message}\\n            roleConfig={roleInfo}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            onClear={onClear}\\n            uploadProps={uploadProps}\\n        />\\n    )\\n}\\n\\nrender(DefaultChat);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u63D0\\u793A\\u4FE1\\u606F\\u6E32\\u67D3\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderHintBox\"), \" \\u81EA\\u5B9A\\u4E49\\u63D0\\u793A\\u533A\\u57DF\\u5185\\u5BB9\\uFF0C \\u53C2\\u6570\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type renderHintBox = (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true noInline=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"noInline\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, {useState, useCallback} from 'react';\\nimport { Chat } from '@douyinfe/semi-ui';\\n\\nconst defaultMessage = [\\n    {\\n        role: 'assistant',\\n        id: '1',\\n        createAt: 1715676751919,\\n        content: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5411\\u6211\\u63D0\\u95EE\\u4EFB\\u4F55\\u5173\\u4E8E Semi \\u7684\\u95EE\\u9898\\u3002',\\n    }\\n];\\n\\nconst hintsExample = [\\n    \\\"\\u544A\\u8BC9\\u6211\\u66F4\\u591A\\\",\\n    \\\"Semi Design \\u7684\\u7EC4\\u4EF6\\u6709\\u54EA\\u4E9B\\uFF1F\\\",\\n    \\\"\\u6211\\u80FD\\u591F\\u901A\\u8FC7 DSM \\u5B9A\\u5236\\u81EA\\u5DF1\\u7684\\u4E3B\\u9898\\u5417\\uFF1F\\\",\\n]\\n\\nconst roleInfo = {\\n    user:  {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n    },\\n    assistant: {\\n        name: 'Assistant',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    },\\n    system: {\\n        name: 'System',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n    }\\n}\\n\\nconst commonOuterStyle = {\\n    border: '1px solid var(--semi-color-border)',\\n    borderRadius: '16px',\\n    height: 400,\\n};\\n\\nlet id = 0;\\nfunction getId() {\\n    return `id-${id++}`\\n}\\nconst uploadProps = { action: 'https://api.semi.design/upload' }\\n\\nfunction DefaultChat() {\\n    const [message, setMessage] = useState(defaultMessage);\\n    const [hints, setHints] = useState(hintsExample);\\n\\n    const onHintClick = useCallback(() => {\\n        setHints([]);\\n    }, [])\\n\\n    const onMessageSend = useCallback((content, attachment) => {\\n        const newAssistantMessage = {\\n            role: 'assistant',\\n            id: getId(),\\n            createAt: Date.now(),\\n            content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n        }\\n        setTimeout(() => { \\n            setMessage((message) => ([ ...message, newAssistantMessage])); \\n        }, 200);\\n        setHints([]);\\n    }, []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        setMessage(chats);\\n    }, []);\\n\\n    const commonHintStyle = useMemo(() => ({\\n        border: '1px solid var(--semi-color-border)',\\n        padding: '10px',\\n        borderRadius: '10px',\\n        color: 'var( --semi-color-text-1)',\\n        display: 'flex',\\n        justifyContent: 'space-between',\\n        alignItems: 'center',\\n        cursor: 'pointer',\\n        fontSize: '14px'\\n    }), []);\\n    \\n    const renderHintBox = useCallback((props) => {\\n        const { content, onHintClick, index } = props;\\n        return <div style={commonHintStyle} onClick={onHintClick} key={index}>\\n            {content}\\n            <IconArrowRight style={{ marginLeft: 10 }}>click me</IconArrowRight>\\n        </div>\\n    }, []);\\n\\n    onClear = useCallback(() => {\\n        setHints([]);\\n    }, [])\\n\\n    return (\\n        <Chat \\n            renderHintBox={renderHintBox}\\n            hints={hints}\\n            onHintClick={onHintClick}\\n            style={commonOuterStyle}\\n            chats={message}\\n            roleConfig={roleInfo}\\n            onChatsChange={onChatsChange}\\n            onMessageSend={onMessageSend}\\n            onClear={onClear}\\n            uploadProps={uploadProps}\\n        />\\n    )\\n}\\n\\nrender(DefaultChat);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u5E03\\u5C40\\u65B9\\u5F0F\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftAlign\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftRight\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8\\u63D2\\u69FD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"canSend\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u6309\\u94AE\\u662F\\u5426\\u53EF\\u4EE5\\u53D1\\u9001\\u3002\\u901A\\u5E38\\u65E0\\u9700\\u8BBE\\u7F6E\\uFF0C\\u7531\\u5185\\u90E8\\u903B\\u8F91\\u51B3\\u5B9A\\u3002\\u5982\\u6709\\u8BBE\\u7F6E\\uFF0C\\u4EE5\\u6B64\\u8BBE\\u7F6E\\u4E3A\\u51C6\\uFF0Cv2.90.0 \\u65B0\\u589E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"chatBoxRenderConfig\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"chatBox \\u6E32\\u67D3\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ChatBoxRenderConfig\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"chats\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u5BF9\\u8BDD\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Message\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"customMarkDownComponents\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49 markdown render\\uFF0C \\u900F\\u4F20\\u7ED9\\u5BF9\\u8BDD\\u5185\\u5BB9\\u6E32\\u67D3\\u7684 MarkdownRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"MDXProps\", \"[\", \"'components'\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"escapeHtml\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5BF9\\u7528\\u6237\\u6D88\\u606F\\u4E2D\\u7684 HTML \\u6807\\u7B7E\\u8FDB\\u884C\\u8F6C\\u4E49\\uFF0C\\u9632\\u6B62\\u88AB Markdown \\u89E3\\u6790\\u5668\\u5F53\\u4F5C HTML \\u5904\\u7406\\u5BFC\\u81F4\\u5185\\u5BB9\\u4E22\\u5931\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"enableUpload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u542F\\u7528\\u4E0A\\u4F20, \\u81EA v2.76.0 \\u652F\\u6301\\uFF0C\\u652F\\u6301 boolean \\u7C7B\\u578B\\u53CA\\u5BF9\\u8C61\\u7C7B\\u578B\\uFF0C\\u4F20\\u5165 boolean \\u7C7B\\u578B\\u5C06\\u540C\\u65F6\\u63A7\\u5236\\u62D6\\u62FD\\uFF0C\\u70B9\\u51FB\\u4E0A\\u4F20\\u6309\\u94AE\\uFF0C\\u5728\\u8F93\\u5165\\u6846\\u4E2D\\u7C98\\u8D34\\u7684\\u4E0A\\u4F20\\u884C\\u4E3A\\uFF0C\\u4F20\\u5165\\u5BF9\\u8C61\\u53EF\\u5206\\u522B\\u8BBE\\u7F6E\\uFF0C\\u4F20\\u5165\\u5BF9\\u8C61\\u7C7B\\u578B\\u65F6\\u672A\\u8BBE\\u7F6E\\u7684\\u9879\\u9ED8\\u8BA4\\u4E3A true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" { pasteUpload: boolean, clickUpload: boolean, dragUpload: boolean }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hints\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hintCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63D0\\u793A\\u533A\\u6700\\u5916\\u5C42\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hintStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63D0\\u793A\\u533A\\u6700\\u5916\\u5C42\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"inputBoxStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"inputBoxCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sendHotKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u8F93\\u5165\\u5185\\u5BB9\\u7684\\u952E\\u76D8\\u5FEB\\u6377\\u952E\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"enter\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shift+enter\"), \"\\u3002\\u524D\\u8005\\u5728\\u5355\\u72EC\\u6309\\u4E0B enter \\u5C06\\u53D1\\u9001\\u8F93\\u5165\\u6846\\u4E2D\\u7684\\u6D88\\u606F\\uFF0C shift \\u548C enter \\u6309\\u952E\\u540C\\u65F6\\u6309\\u4E0B\\u65F6\\uFF0C\\u4EC5\\u6362\\u884C\\uFF0C\\u4E0D\\u53D1\\u9001\\u3002\\u540E\\u8005\\u76F8\\u53CD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"enter\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"markdownRenderProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u53C2\\u6570\\u5C06\\u900F\\u4F20\\u7ED9\\u5BF9\\u8BDD\\u6846\\u6E32\\u67D3\\u6240\\u7528\\u7684 MarkdownRender \\u7EC4\\u4EF6\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/markdownrender#API\"\n  }, \"MarkdownRenderProps\"), \"\\uFF0CChat \\u4E2D\\u7684 markdownRender \\u9ED8\\u8BA4 format \\u4E3A md \\uFF0C\\u5982\\u679C\\u9700\\u8981\\u4F7F\\u7528 mdx \\u683C\\u5F0F\\uFF0C\\u53EF\\u901A\\u8FC7\\u6B64\\u53C2\\u6570\\u8BBE\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"MarkdownRenderProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u6A21\\u5F0F\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bubble\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"noBubble\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"userBubble\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bubble\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"roleConfig\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89D2\\u8272\\u4FE1\\u606F\\u914D\\u7F6E\\uFF0C\\u5177\\u4F53\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#RoleConfig\"\n  }, \"RoleConfig\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"RoleConfig\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderDivider\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5206\\u5272\\u7EBF, \\u81EA v2.67.0 \\u652F\\u6301\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message?: Message) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderHintBox\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChatsChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u8BDD\\u5217\\u8868\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(chats: Message[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u6D88\\u606F\\u65F6\\u5019\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onHintClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u63D0\\u793A\\u4FE1\\u606F\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(hint: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onInputChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u533A\\u57DF\\u4FE1\\u606F\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: { value?: string, attachment?: FileItem[] }) => void;\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageBadFeedback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D88\\u606F\\u8D1F\\u5411\\u53CD\\u9988\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageCopy\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u590D\\u5236\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageDelete\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5220\\u9664\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageGoodFeedback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D88\\u606F\\u6B63\\u5411\\u53CD\\u9988\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageReset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u91CD\\u7F6E\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageSend\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u6D88\\u606F\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: string, attachment?: FileItem[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onStopGenerator\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u505C\\u6B62\\u751F\\u6210\\u6309\\u94AE\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(message: Message) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5360\\u4F4D\\u7B26\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderInputArea\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u8F93\\u5165\\u6846\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: RenderInputAreaProps) => React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClearContext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showStopGenerate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u505C\\u6B62\\u751F\\u6210\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"topSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9876\\u90E8\\u63D2\\u69FD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4F20\\u7EC4\\u4EF6\\u5C5E\\u6027, \\u8BE6\\u60C5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/upload#API%20%E5%8F%82%E8%80%83\"\n  }, \"Upload\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"UploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uploadTipProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4F20\\u7EC4\\u4EF6\\u63D0\\u793A\\u5C5E\\u6027, \\u8BE6\\u60C5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/tooltip#API%20%E5%8F%82%E8%80%83\"\n  }, \"Tooltip\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TooltipProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"RoleConfig\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"user\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u6237\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Metadata\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"assistant\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A9\\u624B\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Metadata\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"system\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7CFB\\u7EDF\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Metadata\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Metadata\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avatar\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u50CF\\uFF0C\\u652F\\u6301\\u56FE\\u7247 URL \\u6216 ReactNode\\uFF08\\u5982 Semi \\u56FE\\u6807\\uFF09 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \">=2.94.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"color\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u50CF\\u80CC\\u666F\\u8272\\uFF0C\\u540C Avatar \\u7EC4\\u4EF6\\u7684 color \\u53C2\\u6570, \\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"amber\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cyan\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"indigo\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-blue\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-green\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lime\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orange\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pink\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"purple\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"red\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"teal\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"violet\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"yellow\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"))))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Message\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"role\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89D2\\u8272\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u552F\\u4E00\\u6807\\u8BC6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6587\\u672C\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Content[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parentId\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7236\\u8282\\u70B9id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"createAt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521B\\u5EFA\\u65F6\\u95F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"status\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D88\\u606F\\u72B6\\u6001\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"loading\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"incomplete\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"complete\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"complete\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Content\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B, \\u53EF\\u9009\\u503C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"text\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"image_url\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"file_url\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"text\"), \" \\u65F6\\u7684\\u5185\\u5BB9\\u6570\\u636E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"image_url\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"image_url\"), \" \\u65F6\\u7684\\u5185\\u5BB9\\u6570\\u636E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ url: string }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"file_url\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"file_url\"), \" \\u65F6\\u7684\\u5185\\u5BB9\\u6570\\u636E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ url: string; name: string; size: string; type: string }\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Methods\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65B9\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"resetMessage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u91CD\\u7F6E\\u6D88\\u606F\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToBottom(animation: boolean)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6EDA\\u52A8\\u5230\\u6700\\u5E95\\u90E8, animation \\u4E3A true\\uFF0C\\u5219\\u6709\\u52A8\\u753B\\uFF0C\\u53CD\\u4E4B\\u65E0\\u52A8\\u753B\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clearContext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E05\\u9664\\u4E0A\\u4E0B\\u6587\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sendMessage(content: string, attachment: FileItem[])\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u6D88\\u606F\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/chat","next":{"fields":{"slug":"en-US/plus/codehighlight"},"id":"422a83bc-f732-59fa-9cf2-3ccc65e42632","frontmatter":{"title":"CodeHighlight","localeCode":"en-US","icon":"doc-codehighlight","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/chat"},"id":"a9985179-4497-5e00-9dd3-97877b55e606","frontmatter":{"title":"Chat","localeCode":"en-US","icon":"doc-chat","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}