{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/plus/chat","result":{"data":{"current":{"frontmatter":{"title":"Chat","order":28,"brief":"Used to quickly build conversation content","icon":"doc-chat"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#chat-status","title":"Chat status"},{"url":"#dynamic-update-chats","title":"Dynamic update chats"},{"url":"#clear-context","title":"Clear context"},{"url":"#custom-rendering-dialog-box","title":"Custom rendering dialog box"},{"url":"#custom-render-inputarea","title":"Custom render InputArea"},{"url":"#hint","title":"Hint"},{"url":"#custom-render-hint","title":"Custom render Hint"},{"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":"#design-token","title":"Design Token"}]},"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\": \"en-US\",\n  \"order\": 28,\n  \"category\": \"Plus\",\n  \"title\": \"Chat\",\n  \"icon\": \"doc-chat\",\n  \"dir\": \"column\",\n  \"brief\": \"Used to quickly build conversation content\"\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  }, \"When to use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Chat\"), \" component can be used in scenarios such as regular conversations or AI conversations.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The rendering of the conversation content is based on the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/plus/markdownrender\"\n  }, \"MarkdownRender\"), \" component, which supports Markdown and MDX (Note: The default format mode of MarkdownRender in Chat is md. If you need to use MDX format, you can set it through the markdownRenderProps API). It allows for common rich text features such as images, tables, links, bold text, code blocks, and more. More complex and customized document writing and display requirements can be achieved using JSX.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Chat is supported starting from version v2.63.0.\"), 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  }, \"Basic usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chats\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onChatsChange\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMessageSend\"), \", you can achieve basic conversation display and interaction.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Conversations involve multiple participants and multiple rounds of interaction. Role information, including names and avatars, can be passed through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"roleConfig\"), \" parameter. For detailed parameter information, refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#RoleConfig\"\n  }, \"RoleConfig\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The prompt text of the upload button can be set through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uploadTipProps\"), \". For details, please refer to \", 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\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Dialogue is a scene involving multiple parties and multiple rounds of interaction. Role information (including name, avatar, etc.) can be passed in through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"roleConfig\"), \", and the specific parameter details are \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#roleConfig\"\n  }, \"RoleConfig\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align\"), \" attribute to set the layout of the dialog, supporting left and right layout (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftRight\"), \", default) and left alignment (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftAlign\"), \").\"), 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: \\\"Give an example of using Semi Design\\u2019s Button component\\\",\\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: \\\"The following is an example of using Semi code\\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: 'Customize upload button prompt information' }\\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: \\\"This is a mock response\\\",\\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                    Mode\\n                    <RadioGroup onChange={onModeChange} value={mode} type={\\\"button\\\"}>\\n                        <Radio value={'bubble'}>bubble</Radio>\\n                        <Radio value={'noBubble'}>noBubble</Radio>\\n                        <Radio value={'userBubble'}>userBubble</Radio>\\n                    </RadioGroup>\\n                </span>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: '10px'}}>\\n                    Chat layout\\n                    <RadioGroup onChange={onAlignChange} value={align} type={\\\"button\\\"}>\\n                        <Radio value={'leftRight'}>leftRight</Radio>\\n                        <Radio value={'leftAlign'}>leftAlign</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  }, \"Chat status\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The chats type is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Message[]\"), \", where each \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Message\"), \" contains various information about the conversation, such as role, content, attachment, status, unique identifier (id), creation time (createAt), and more. For detailed information, please refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#message\"\n  }, \"Message\"), \". The conversation style may vary depending on the different status values.\"), 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: \\\"Success response\\\",   \\n    },\\n    {\\n        id: 'loading',\\n        role: 'assistant',\\n        status: 'loading'\\n    },\\n    {\\n        role: 'assistant',\\n        id: 'error',\\n        content: 'Error response',\\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: \\\"This is a mock response\\\",\\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  }, \"Dynamic update chats\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For the case of receiving Server-Sent Event data from the backend, the obtained data can be used to update the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chats\"), \", and the conversation content will be updated in real-time.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showStopGenerate\"), \" parameter can be used to determine whether to display the stop generation button, with a default value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \". The logic for stopping the generation can be handled in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onStopGenerator\"), \" function.\"), 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 is a design system designed, developed and maintained by Douyin's front-end team and MED product design team. As a comprehensive, easy-to-use, high-quality modern application UI solution, Semi Design is extracted from the complex scenarios of ByteDance's various business lines. It has currently supported nearly a thousand platform products and served more than 100,000 internal and external users.[[1]](https://semi.design/zh-CN/start/introduction)\\u3002\\n\\nSemi Design features include:\\n\\n1. Simple and modern design.\\n2. Provide theme solutions, which can be customized in depth.\\n3. Provide two sets of light and dark color modes, easy to switch.\\n4. Internationalization, covering 20+ languages \\u200B\\u200Bsuch as Simplified/Traditional Chinese, English, Japanese, Korean, Portuguese, etc. The date and time component provides global time zone support, and all components can automatically adapt to the Arabic RTL layout.\\n5. Use Foundation and Adapter cross-framework technical solutions to facilitate expansion.\\n\\n---\\nLearn more:\\n1. [Introduction - Semi Design](https://semi.design/zh-CN/start/introduction)\\n2. [Getting Started - Semi Design](https://semi.design/zh-CN/start/getting-started)\\n3. [The evolution of Semi D2C design draft to code - Zhihu](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  }, \"Clear context\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Displaying the clear context button in the input box can be enabled through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showClearContext\"), \", which defaults to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \".\\nThe context can also be cleared by calling the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"clearContext\"), \" method through ref.\"), 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: \\\"Introduce semi design\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design is a design system designed, developed and maintained by the Douyin front-end team and MED product design team.',\\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: 'Customize upload button prompt information' }\\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: \\\"This is a mock response message.\\\",\\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  }, \"Custom rendering dialog box\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Pass in custom rendering configuration through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"chatBoxRenderConfig\"), \", the chatBoxRenderConfig type is as follows\"), 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    /* Custom rendering title */\\n    renderChatBoxTitle?: (props: RenderTitleProps) => ReactNode;\\n     /* Custom rendering avatar */\\n    renderChatBoxAvatar?: (props: RenderAvatarProps) => ReactNode;\\n    /* Custom rendering content */\\n    renderChatBoxContent?: (props: RenderContentProps) => ReactNode;\\n   /* Custom rendering content */\\n    renderChatBoxAction?: (props: RenderActionProps) => ReactNode;\\n   /* Fully customized rendering of the entire chat box */\\n    renderFullChatBox?: (props: RenderFullChatBoxProps) => ReactNode\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Custom render avatar and Title through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxAvatar\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxTitle\"), \"\\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: 'What\\\\'s in this picture?'\\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: 'The picture shows a yellow backpack decorated with cartoon images'\\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                    Avatar Render Mode\\n                    <RadioGroup onChange={onAvatarChange} value={avatar} type=\\\"button\\\">\\n                    <Radio value={'default'}>default</Radio>\\n                    <Radio value={'null'}>null</Radio>\\n                    <Radio value={'custom'}>custom</Radio>\\n                </RadioGroup>\\n                </span>\\n                <span style={{ display: 'flex', alignItems: 'center', columnGap: 10}}>\\n                    Title Render mode\\n                    <RadioGroup onChange={onTitleChange} value={title} type=\\\"button\\\">\\n                    <Radio value={'default'}>default</Radio>\\n                    <Radio value={'null'}>null</Radio>\\n                    <Radio value={'custom'}>custom</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  }, \"When hovering over a conversation, the conversation action area will be displayed. You can customize the rendering of the action area using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxAction\"), \".\"), 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: \\\"Introduce Semi design\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design is a design system designed, developed, and maintained by the front-end team at Douyin and the MED product design team.',\\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 />}>Share</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  }, \"You can customize the content of the action area using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderChatBoxContent\"), \".\"), 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: '1',\\n        createAt: 1715676751919,\\n        content: \\\"Semi Design is a design system designed, developed and maintained by Douyin's front-end team and MED product design team. As a comprehensive, easy-to-use, high-quality modern application UI solution, it is extracted from the complex scenarios of ByteDance's various business lines, supports nearly a thousand platform products, and serves 100,000+ internal and external users.\\\",\\n        source: [\\n            {\\n                avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',\\n                url: '/en-US/start/introduction',\\n                title: 'semi Design',\\n                subTitle: 'Semi design website',\\n                content: 'Semi Design is a design system designed, developed and maintained by Douyin\\\\'s front-end team and MED product design team.'\\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 Design System',\\n                content: 'From Semi Design to Any Design, quickly define your design system and apply it in design drafts and code'\\n            },\\n            {\\n                avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',\\n                url: '/code/en-US/start/introduction',\\n                subTitle: 'Semi D2C website',\\n                title: 'Design to Code',\\n                content: 'Semi Design to Code, or Semi D2C for short, is a new performance improvement tool launched by the Douyin front-end Semi Design team.'\\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> Got {source.length} sources </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  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFullChatBox\"), \" to custom render the entire chat box\"), 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: \\\"Introduce Semi\\\", \\n    },\\n    {\\n        role: 'assistant',\\n        id: '3',\\n        createAt: 1715676751919,\\n        content: 'Semi Design is a design system designed, developed, and maintained by the front-end team at Douyin and the MED product design team.',\\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  }, \"Custom render InputArea\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The rendering input box can be customized through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderInputArea\"), \", the parameters are as follows\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"export interface RenderInputAreaProps {\\n    /* Default node */\\n    defaultNode?: ReactNode;\\n    /* If you customize the input box, you need to call it when sending a message. */\\n    onSend?: (content?: string, attachment?: FileItem[]) => void;\\n    /* If you customize the clear context button, it needs to be called when you click to clear the context */\\n    onClear?: (e?: any) => void;\\n    /* DetailProps supported since 2.69.0 */\\n    detailProps: {\\n        /* clear context button */\\n        clearContextNode?: ReactNode;\\n        /* upload button */\\n        uploadNOde?: ReactNode;\\n        /* text input area */\\n        inputNode?: ReactNode;\\n        /* send button */\\n        sendNode?: ReactNode;\\n        /* The processing function that triggers the focus of the text input box after clicking */\\n        onClick?: (e?: MouseEvent) => void;\\n    }\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Example of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"detailProps\")), 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  }, \"Other Example:\"), 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>Information Chart</strong>\\n            <Form.Input\\n                field=\\\"name\\\"\\n                label=\\\"Name\\\"\\n                style={{ width: 250 }}\\n                trigger='blur'\\n            />\\n            <Form.Upload\\n                field='file'\\n                label='File'\\n                action='https://api.semi.design/upload'\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Upload\\n                </Button>\\n            </Form.Upload>\\n        </Form>\\n        <Button style={{ width: 'fit-content' }} onClick={onSubmit}>Submit</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  }, \"Hint\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The prompt area content can be set through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hints\"), \". After clicking the prompt content, the prompt content will become the new user input content and trigger the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onHintClick\"), \" callback.\"), 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 is a design system designed, developed, and maintained by the front-end team at Douyin and the MED product design team.',\\n    }\\n];\\n\\nconst hintsExample = [\\n    \\\"Tell me more\\\",\\n    \\\"What are the components of Semi Design?\\\",\\n    \\\"What are the addresses of Semi Design\\u2019s official website and github warehouse?\\\",\\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: \\\"This is a mock response\\\",\\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  }, \"Custom render Hint\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Customize the content of the prompt area through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderHintBox\"), \", the parameters are as follows\"), 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  }, \"Example:\"), 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 is a design system designed, developed, and maintained by the front-end team at Douyin and the MED product design team.',\\n    }\\n];\\n\\nconst hintsExample = [\\n    \\\"Tell me more\\\",\\n    \\\"What are the components of Semi Design?\\\",\\n    \\\"What are the addresses of Semi Design\\u2019s official website and github warehouse?\\\",\\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: \\\"This is a mock reply message\\\",\\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  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), 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  }, \"Dialog layout, supports \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftRight\"), \",\", 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  }, \"bottom slot for chat\"), 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  }, \"Whether the send button is enabled. Normally, no settings are needed; the component internally determines whether sending is enabled. If settings are configured, the settings will prevail. Added in v2.90.0.\"), 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 rendering configuration\"), 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  }, \"Controlled conversation list\"), 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  }, \"Custom class name\"), 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  }, \"custom markdown render, transparently passed to MarkdownRender for conversation content rendering\"), 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  }, \"Whether to escape HTML tags in user messages to prevent them from being treated as HTML by the Markdown parser, which would cause content loss\"), 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  }, \"Whether to enable uploading, supported since v2.76.0, supports boolean type and object type. When the boolean type is passed in, the upload behavior of dragging, clicking the upload button, and pasting in the input box will be controlled at the same time. When the object is passed in, it can be set separately. When the object type is passed in, the unset items default to 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  }, \"prompt information\"), 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  }, \"hint style\"), 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  }, \"hint style\"), 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  }, \"Input box style\"), 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  }, \"Input box className\"), 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  }, \"Keyboard shortcut for sending content, supports \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"enter\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shift+enter\"), \". The former will send the message in the input box when you press enter alone. When the shift and enter keys are pressed at the same time, it will only wrap the line and not send it. The latter is the opposite\"), 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  }, \"This parameter will be passed to the MarkdownRender component used for dialog rendering. For details, see \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/plus/markdownrender#API\"\n  }, \"MarkdownRenderProps\"), \". The default format of markdownRender in Chat is md. If you need to use mdx format, you can set it through this parameter\"), 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  }, \"Conversation mode, support \", 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  }, \"Role information configuration, see \", 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  }, \"Custom render divider, supported since v2.67.0\"), 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  }, \"Custom rendering prompt information\"), 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  }, \"Triggered when the conversation list changes\"), 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  }, \"Triggered when context message is cleared\"), 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  }, \"Triggered when the prompt message is clicked\"), 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  }, \"Triggered when input area information changes\"), 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  }, \"Triggered when the message is negatively fed back\"), 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  }, \"Triggered when copying a message\"), 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  }, \"Triggered when a message is deleted\"), 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  }, \"Triggered when the message is fed back positively\"), 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  }, \"Triggered when message is reset\"), 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  }, \"Triggered when sending a message\"), 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  }, \"Fires when the stop generation button is clicked\"), 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  }, \"Input box placeholder\"), 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  }, \"Custom rendering input box\"), 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  }, \"Whether to display the clear context button\"), 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  }, \"Whether to display the stop generation button\"), 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  }, \"top slot for chat\"), 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  }, \"Upload component properties, refer to details \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/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  }, \"Upload component prompt attribute, refer to details \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/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  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), 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  }, \"User information\"), 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  }, \"Assistant information\"), 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  }, \"System information\"), 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  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), 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  }, \"name\"), 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  }, \"avatar, supports image URL or ReactNode (such as Semi icons) \", 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  }, \"Avatar background color, same as the color parameter of Avatar component, support \", 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  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), 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  }, \"role\"), 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  }, \"name\"), 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  }, \"Uniquely identifies\"), 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  }, \"all content\"), 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  }, \"parent Uniquely identifies\"), 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  }, \"creation time\"), 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  }, \"Information status\\uFF0C \", 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  }, \"PROPERTIES\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TYPE\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DEFAULT\"))), 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  }, \"type,  suport \", 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  }, \"Content data when type is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"text\")), 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  }, \"Content data when type is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"image_url\")), 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  }, \"Content data when type is \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"file_url\")), 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  }, \"METHOD\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"INSTRUCTIONS\"))), 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  }, \"Reset message\")), 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  }, \"Scroll to the bottom, if animation is true, there will be animation, otherwise there will be no animation.\")), 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  }, \"clear context\")), 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  }, \"send message with content and attachment\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Token\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/plus/chat","next":{"fields":{"slug":"zh-CN/plus/chat"},"id":"6c508a87-45ca-528c-a763-cdd909496048","frontmatter":{"title":"Chat 对话","localeCode":"zh-CN","icon":"doc-chat","showNew":null}},"previous":{"fields":{"slug":"zh-CN/basic/space"},"id":"2937a4f5-9b00-5dd9-8b37-7ce5b15115e3","frontmatter":{"title":"Space 间距","localeCode":"zh-CN","icon":"doc-space","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}