{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/ai/aiChatDialogue","result":{"data":{"current":{"frontmatter":{"title":"AIChatDialogue","order":102,"brief":"Display AI chat conversation messages to users","icon":"doc-aiDialogue"},"fields":{"type":"ai"},"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":"#message-status","title":"Message Status"},{"url":"#message-display","title":"Message Display"},{"url":"#references","title":"References"},{"url":"#selection","title":"Selection"},{"url":"#hints","title":"Hints"},{"url":"#custom-hint-rendering","title":"Custom Hint Rendering"},{"url":"#custom-chat-box-rendering","title":"Custom Chat Box Rendering"},{"url":"#custom-message-content-rendering","title":"Custom Message Content Rendering"},{"url":"#message-data-adapters","title":"Message Data Adapters"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#roleconfig","title":"RoleConfig"},{"url":"#metadata","title":"MetaData"},{"url":"#message","title":"Message"},{"url":"#reference","title":"Reference"},{"url":"#methods","title":"Methods"},{"url":"#static-properties","title":"Static Properties"},{"url":"#contentitem","title":"ContentItem"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": 102,\n \"category\": \"Plus\",\n \"title\": \"AIChatDialogue\",\n \"icon\": \"doc-aiDialogue\",\n \"width\": \"60%\",\n \"brief\": \"Display AI chat conversation messages to users\",\n \"showNew\": true\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 }, \"AIChatDialogue can be used together with AIChatInput to build richer, more comprehensive and easier-to-customize AI conversation experiences.\\nThe component message format is based on OpenAI's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/object\"\n }, \"Response Object\"), \", and supports the OpenAI community's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n }, \"Response\"), \" / \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n }, \"Chat Completion\"), \" format standards by default. Responses to GPT-5 and GPT-4o series models are supported out of the box. For details, see \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue#%E6%B6%88%E6%81%AF%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\"\n }, \"Message Data Conversion\"), \".\")), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { AIChatDialogue } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"chats\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChatsChange\"), \" to enable basic conversation display and interactions.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"align\"), \" to control layout: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"leftRight\"), \" (default) and \", 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 dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue, RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\nconst defaultMessages = [\\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 the Semi Design Button component\\\",\\n },\\n {\\n role: 'assistant',\\n id: '3',\\n createAt: 1715676751919,\\n content: \\\"Here is a sample usage of a Semi component:\\\\n```jsx \\\\nimport React from 'react';\\\\nimport { Button } from '@douyinfe/semi-ui';\\\\n\\\\nconst MyComponent = () => {\\\\n return (\\\\n \\\\n );\\\\n};\\\\nexport default MyComponent;\\\\n```\\\\n\\\",\\n }\\n];\\n\\nconst roleConfig = {\\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\\nfunction AlignAndMode () {\\n const [messages, setMessage] = useState(defaultMessages);\\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 onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n return (\\n <>\\n \\n \\n Mode\\n \\n Bubble\\n No bubble\\n User bubble\\n \\n \\n \\n Conversation layout\\n \\n LeftRight\\n LeftAlign\\n \\n \\n \\n
\\n \\n
\\n \\n );\\n}\\n\\nrender(AlignAndMode);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Message Status\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"chats\"), \" is of type \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Message[]\"), \". Each \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Message\"), \" contains various fields such as role \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"role\"), \", content \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"content\"), \", status \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"status\"), \", unique identifier \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \", and creation time \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"createdAt\"), \". See \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Message\"\n }, \"Message\"), \" for details. The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"status\"), \" follows the same values as the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/object#responses/object-status\"\n }, \"Response API Status\"), \": 6 status values mapping to 3 official styles (success / in progress / failed).\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst defaultMessages = [\\n {\\n role: 'assistant',\\n id: '1',\\n createAt: 1715676751919,\\n content: \\\"Success\\\", \\n // default status is completed\\n },\\n {\\n id: 'loading',\\n role: 'assistant',\\n status: 'in_progress' // Same visual as queued, incomplete\\n },\\n {\\n role: 'assistant',\\n id: 'error',\\n content: 'Error',\\n status: 'failed' // Same visual as cancelled\\n }\\n];\\n\\nconst roleConfig = {\\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\\nfunction StatusDemo () {\\n const [messages, setMessage] = useState(defaultMessages);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n return (\\n \\n );\\n}\\n\\nrender(StatusDemo);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Message Display\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The message content uses \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/list#responses/list-data\"\n }, \"ContentItem[]\"), \". It supports blocks such as text, file, image, code, reasoning, annotation, and tool call. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AIChatDialogue.Step\"), \" is provided for step-by-step displays (e.g., workflows or plans).\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue } from '@douyinfe/semi-ui';\\nimport { IconSearchStroked, IconCodeStroked, IconBriefStroked } from '@douyinfe/semi-icons';\\n\\n\\nconst defaultMessages = [\\n {\\n role: 'assistant',\\n id: '1',\\n createAt: 1715676751919,\\n content: 'Plain text', \\n },\\n {\\n id: '2',\\n role: 'user',\\n content: [\\n {\\n type: 'message',\\n content: [\\n {\\n type: 'input_text',\\n text: 'Help me generate a similar image',\\n },\\n {\\n type: 'input_image',\\n image_url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n file_id: 'demo-file-id'\\n },\\n {\\n type: 'input_text',\\n text: 'Files preview below',\\n },\\n {\\n type: 'input_file',\\n file_url: 'https://www.semi.pdf',\\n filename: 'semi.pdf',\\n size: '100KB',\\n },\\n {\\n type: 'input_file',\\n file_url: 'https://www.semi.json',\\n filename: 'semi.json',\\n size: '100KB',\\n },\\n {\\n type: 'input_file',\\n file_url: 'https://www.semi.docx',\\n filename: 'semi.docx',\\n size: '100KB',\\n }\\n ],\\n },\\n ],\\n status: 'completed',\\n },\\n {\\n id: '3',\\n role: 'assistant',\\n content: [\\n {\\n type: 'reasoning',\\n status: 'completed',\\n summary: [\\n {\\n 'type': 'summary_text',\\n 'text': '\\\\nI need to reason and answer the user about what the Semi component library is...'\\n }\\n ],\\n },\\n {\\n type: 'message',\\n content: [\\n {\\n type: 'output_text',\\n text: 'Semi Design is a design system built and maintained by ByteDance Frontend Team and the MED Product Design Team.'\\n }\\n ],\\n status: 'completed',\\n },\\n {\\n id: 'fc_12345xyz',\\n call_id: 'call_12345xyz',\\n type: 'function_call',\\n name: 'get_weather',\\n status: 'completed',\\n arguments: '{\\\\'location\\\\':\\\\'Paris, France\\\\'}'\\n },\\n {\\n type: 'message',\\n content: [\\n {\\n type: 'output_text',\\n text: 'Congrats! You now know everything about Semi Design!',\\n annotations: [\\n {\\n title: 'semi.design',\\n url: 'https://semi.design/',\\n detail: 'semi design page',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n },\\n {\\n title: 'semi.design',\\n url: 'https://semi.design/',\\n detail: 'semi design page',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n },\\n ]\\n }\\n ]\\n },\\n {\\n type: 'plan',\\n content: [\\n {\\n summary: 'Create a comprehensive Beijing travel guide covering attractions, lodging, transport, food, and tips',\\n steps: [\\n {\\n summary: 'Search introductions and ticket info for Beijing attractions',\\n description: 'Searching: Beijing attraction introductions and ticket info',\\n type: 'search',\\n }, \\n {\\n summary: 'Read specific lines of a given file',\\n description: 'Creating document: Beijing Travel Guide',\\n type: 'docs',\\n }, \\n {\\n summary: 'Create a file containing the Beijing travel guide',\\n description: 'Creating code file: beijing_travel_guide.html',\\n type: 'code',\\n }, \\n ],\\n statues: 'completed'\\n },\\n {\\n summary: 'Summarize the created Beijing travel guide and present to the user',\\n steps: []\\n }\\n ],\\n }\\n ],\\n status: 'completed',\\n },\\n];\\n\\nconst roleConfig = {\\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\\nfunction AllTypeMessageDemo () {\\n const [messages, setMessage] = useState(defaultMessages);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n const mapStep = useCallback((steps) => {\\n if (!steps) {\\n return [];\\n }\\n return steps.map((item) => {\\n let icon = null;\\n switch (item.type) {\\n case 'search':\\n icon = ;\\n break;\\n case 'docs':\\n icon = ;\\n break;\\n case 'code':\\n icon = ;\\n break;\\n }\\n return {\\n summary: item.summary,\\n description: item.description,\\n icon: icon,\\n };\\n });\\n }, []);\\n\\n const customRender = useMemo(() => ({\\n 'plan': (item) => { // 'plan' is a custom user-defined type\\n let steps = item.content.map((item) => {\\n return {\\n summary: item.summary,\\n actions: mapStep(item.steps),\\n status: 'completed'\\n };\\n });\\n return ;\\n },\\n }), [mapStep]);\\n\\n return (\\n \\n );\\n}\\n\\nrender(AllTypeMessageDemo);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"References\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"references\"), \" to define files or text cited by the current message. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showReference\"), \" controls whether a quotable style is shown for the current message. \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onReferenceClick\"), \" configures the click handler for the reference button.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst defaultMessages = [\\n {\\n id: '1',\\n role: 'user',\\n content: 'This message is an example for the References demo',\\n references: [\\n {\\n id: '1',\\n type: 'text',\\n content: 'Sample text. This is a long paragraph of text repeated for demonstration purposes to show truncation and layout behavior in the reference area.',\\n },\\n {\\n id: '2',\\n name: 'Feishu Doc.docx',\\n },\\n {\\n id: '3',\\n name: 'Music.mp4',\\n },\\n {\\n id: '4',\\n name: 'Image.jpeg',\\n url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'\\n },\\n {\\n id: '5',\\n name: 'code.json',\\n }\\n ]\\n }\\n];\\n\\nconst roleConfig = {\\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\\nfunction ReferencesDemo () {\\n const [messages, setMessage] = useState(defaultMessages);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n const onReferenceClick = () => {\\n console.log('You click the reference button!');\\n };\\n\\n return (\\n \\n );\\n}\\n\\nrender(ReferencesDemo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Selection\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue, RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\nconst defaultMessages = [\\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 the Semi Design Button component\\\",\\n },\\n {\\n role: 'assistant',\\n id: '3',\\n createAt: 1715676751919,\\n content: \\\"Here is a sample usage of a Semi component:\\\\n```jsx \\\\nimport React from 'react';\\\\nimport { Button } from '@douyinfe/semi-ui';\\\\n\\\\nconst MyComponent = () => {\\\\n return (\\\\n \\\\n );\\\\n};\\\\nexport default MyComponent;\\\\n```\\\\n\\\",\\n }\\n];\\n\\nconst roleConfig = {\\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\\nfunction SelectingDemo () {\\n const ref = useRef(null);\\n const [messages, setMessage] = useState(defaultMessages);\\n const [align, setAlign] = useState('leftRight');\\n const [select, setSelect] = useState(true);\\n const [selection, setSelection] = useState('allSelect');\\n\\n useEffect(() => {\\n ref.current.selectAll();\\n }, []);\\n\\n const onSelectChange = useCallback((e) => {\\n setSelect(e.target.value);\\n }, []);\\n\\n const onSelectionChange = useCallback((e) => {\\n if (e.target.value === 'allSelect') {\\n ref.current.selectAll();\\n } else {\\n ref.current.deselectAll();\\n }\\n setSelection(e.target.value);\\n }, []);\\n\\n const onSelect = useCallback((selectionId) => {\\n console.log('onSelect', selectionId);\\n }, []);\\n\\n const onAlignChange = useCallback((e) => {\\n setAlign(e.target.value);\\n }, []);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n return (\\n
\\n \\n \\n Session Layout\\n \\n Left Right\\n Left Align\\n \\n \\n \\n Whether to Enable Selection\\n \\n ON\\n OFF\\n \\n \\n \\n Selection Method\\n \\n AllSelect\\n CancelAllSelect\\n \\n \\n \\n\\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(SelectingDemo);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Hints\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hints\"), \" to set the hint area content. Clicking a hint populates it as the new user input and triggers \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onHintClick\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\n() => {\\n const defaultMessages = [\\n {\\n role: 'assistant',\\n id: '1',\\n createAt: 1715676751919,\\n content: 'Semi Design is a design system designed, developed, and maintained by the TikTok front-end team and the MED product design team. You can ask me any questions about Semi.',\\n }\\n ];\\n\\n const hintsExample = [\\n \\\"What are the commonly used components in the Semi component library?\\\",\\n \\\"Can you show an example of a page built using the Semi component library?\\\",\\n \\\"Is there any official documentation for the Semi component library?\\\",\\n ];\\n\\n const roleConfig = {\\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 const [messages, setMessage] = useState(defaultMessages);\\n const [hints, setHints] = useState(hintsExample);\\n \\n const onChatsChange = useCallback((chats) => {\\n console.log('onChatsChange', chats);\\n setMessage(chats);\\n }, []);\\n\\n const onHintClick = useCallback((hint) => {\\n setHints([]);\\n }, []);\\n\\n return (\\n \\n );\\n};\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Hint Rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Customize the hint area with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderHintBox\"), \". Parameters:\"), 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(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue } from '@douyinfe/semi-ui';\\nimport { IconArrowRight } from '@douyinfe/semi-icons';\\n\\n\\n() => {\\n const defaultMessages = [\\n {\\n role: 'assistant',\\n id: '1',\\n createAt: 1715676751919,\\n content: 'Semi Design is a design system created and maintained by ByteDance Frontend Team and the MED Product Design Team. You can ask me anything about Semi.',\\n }\\n ];\\n\\n const hintsExample = [\\n \\\"What are the commonly used components in the Semi component library?\\\",\\n \\\"Can you show an example of a page built using the Semi component library?\\\",\\n \\\"Is there any official documentation for the Semi component library?\\\",\\n ];\\n\\n const roleConfig = {\\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 const [messages, setMessage] = useState(defaultMessages);\\n const [hints, setHints] = useState(hintsExample);\\n \\n const onChatsChange = useCallback((chats) => {\\n console.log('onChatsChange', chats);\\n setMessage(chats);\\n }, []);\\n\\n const onHintClick = useCallback((hint) => {\\n setHints([]);\\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 (\\n
\\n {content}\\n click me\\n
\\n );\\n }, []);\\n \\n\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Chat Box Rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Pass custom rendering configuration via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"chatBoxRenderConfig\"), \". Types:\"), 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; \\n role?: Metadata, \\n defaultAvatar?: ReactNode\\n}\\n\\nexport interface RenderContentProps {\\n message?: Message;\\n role?: Metadata | Map;\\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 moreNode: ReactNode;\\n}\\n\\nexport interface RenderActionProps {\\n message?: Message;\\n defaultActions?: ReactNode | ReactNode[];\\n className: string;\\n defaultActionsObj?: DefaultActionNodeObj;\\n};\\n\\nexport interface FullDialogueNodes {\\n avatar?: ReactNode;\\n title?: ReactNode; \\n content?: ReactNode; \\n action?: ReactNode\\n}\\n\\nexport interface RenderFullDialogueProps {\\n message?: Message;\\n role?: Metadata;\\n defaultNodes?: FullDialogueNodes;\\n className: string\\n}\\n\\n\\nexport interface DialogueRenderConfig {\\n /* Customize message title rendering */\\n renderDialogueAction?: (props: RenderActionProps) => ReactNode;\\n /* Customize avatar rendering */\\n renderDialogueAvatar?: (props: RenderAvatarProps) => ReactNode;\\n /* Customize content rendering */\\n renderDialogueContent?: (props: RenderContentProps) => ReactNode;\\n /* Customize action bar rendering */\\n renderDialogueTitle?: (props: RenderTitleProps) => ReactNode;\\n /* Fully customize the entire chat box */\\n renderFullDialogue?: (props: RenderFullDialogueProps) => ReactNode\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can customize the avatar and title via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderChatBoxAvatar\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderChatBoxTitle\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n const defaultMessages = [\\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 the Semi Design Button component\\\",\\n },\\n {\\n role: 'assistant',\\n id: '3',\\n createAt: 1715676751919,\\n content: \\\"Here is a sample usage of a Semi component:\\\\n```jsx \\\\nimport React from 'react';\\\\nimport { Button } from '@douyinfe/semi-ui';\\\\n\\\\nconst MyComponent = () => {\\\\n return (\\\\n \\\\n );\\\\n};\\\\nexport default MyComponent;\\\\n```\\\\n\\\",\\n }\\n ];\\n\\n const roleConfig = {\\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\\n const [messages, setMessage] = useState(defaultMessages);\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n const renderConfig = {\\n renderDialogueTitle: (props) => {\\n return
My-{props.role.name}
;\\n },\\n renderDialogueAvatar: (props) => {\\n return \\n ;\\n },\\n renderDialogueAction: (props) => {\\n return
{props.defaultActions[0]}
;\\n },\\n };\\n\\n return (\\n \\n );\\n};\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Message Content Rendering\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderDialogueContentItem\"), \" to provide renderers by message type. Example:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useState, useCallback } from 'react';\\nimport { AIChatDialogue, MarkdownRender } from '@douyinfe/semi-ui';\\n\\nconst defaultMessages = [\\n {\\n id: '1',\\n role: 'user',\\n content: 'Hello',\\n }, \\n {\\n id: '2',\\n role: 'assistant',\\n content: 'Hello! How can I help you today?',\\n status: 'completed',\\n }, \\n {\\n id: '3',\\n role: 'user',\\n content: [\\n {\\n type: 'message',\\n role: 'user',\\n content: [\\n {\\n type: 'input_text',\\n text: 'Help me generate a similar image',\\n }, \\n {\\n type: 'input_image',\\n image_url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n file_id: 'demo-file-id'\\n }, \\n {\\n type: 'input_image',\\n image_url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n file_id: 'demo-file-id'\\n }\\n ],\\n }],\\n }, \\n {\\n id: '4',\\n role: 'assistant',\\n content: [{\\n type: \\\"reasoning\\\",\\n summary: [\\n {\\n \\\"type\\\": \\\"summary_text\\\",\\n \\\"text\\\": \\\"\\\\nThe user asked me to generate a similar image. I need to analyze the image first, then generate a similar one...\\\"\\n }\\n ],\\n annotations: [\\n {\\n title: 'semi.design',\\n url: 'https://semi.design/',\\n detail: 'semi design page',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n },\\n {\\n title: 'semi.design',\\n url: 'https://semi.design/',\\n detail: 'semi design page',\\n logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'\\n },\\n ],\\n status: \\\"completed\\\"\\n }, \\n {\\n type: 'function_call',\\n name: 'create_travel_guide',\\n arguments: \\\"{\\\\n\\\\\\\"city\\\\\\\": \\\\\\\"Beijing\\\\\\\"\\\\n}\\\",\\n status: 'completed',\\n }\\n ],\\n status: 'completed',\\n }];\\n\\nconst roleConfig = {\\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\\nfunction CustomRender () {\\n const [messages, setMessage] = useState(defaultMessages);\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n const userTextStyle = {\\n backgroundColor: 'var(--semi-color-fill-1)',\\n color: 'var(--semi-color-text-0)',\\n borderRadius: '25px',\\n padding: '6px 16px',\\n };\\n\\n const assistantStyle = {\\n color: 'var(--semi-color-text-0)',\\n padding: '6px 16px',\\n };\\n\\n const functionCallStyle = {\\n backgroundColor: 'var(--semi-color-fill-1)',\\n padding: '6px 16px',\\n borderRadius: '25px',\\n };\\n\\n const customRenderReasoningContent = useCallback((props) => {\\n return \\n {\\n e && e.stopPropagation();\\n Toast.success('Ready to open the sidebar!');\\n }}\\n />\\n
\\n \\n
\\n ;\\n }, []);\\n\\n const customRender = {\\n \\\"function_call\\\": {\\n \\\"create_travel_guide\\\": (item) => {\\n return
Function Tool Call: {item.name} {item.arguments}
;\\n }\\n },\\n \\\"input_text\\\": (item, message) => {\\n if (message.role === 'user') {\\n return
{item.text}
;\\n }\\n return
{item.text}
;\\n },\\n \\\"reasoning\\\": (item) => {\\n return ;\\n },\\n \\\"default\\\": (item, message) => {\\n if (message.role === 'user') {\\n return
{item}
;\\n } else {\\n return
{item}
;\\n }\\n }\\n };\\n\\n return (\\n \\n );\\n}\\n\\nrender(CustomRender);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Message Data Adapters\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The current component's dialogue messages are modeled after OpenAI's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/object\"\n }, \"Response Object\"), \". To better support users in seamlessly integrating the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n }, \"Chat Completion API\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n }, \"Response API\"), \", we provide four \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Adapter\"), \" transformation functions. Users can directly use these functions to transform the API's return results to obtain data that can be directly used for message display. Two \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Adapter\"), \" functions are provided to process the data of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ChatInput\"), \" component into an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"input Message\"), \" format adapted to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Response API\"), \" or the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Input Message\"), \" format in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Chat Completion API\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// Convert the data returned by the Chat Completion API into the Message format in Chat Dialogue\\nfunction chatCompletionToMessage(chatCompletion: ChatCompletion): Message[]\\n\\n// Convert the Chat Completion API streaming data into Message format for Chat Dialogue.\\nfunction streamingChatCompletionToMessage(chatCompletionChunks: ChatCompletionChunk[], state?: StreamingChatState): { messages: Message[]; state?: StreamingChatState }\\n\\n// Convert the data returned by the Response API into the Message format in Chat Dialogue\\nfunction responseToMessage(response: Response): Message\\n\\n// Convert the streaming data returned by the Response API into the Message format in Chat Dialogue\\nfunction streamingResponseToMessage(chunks: ResponseChunk[], prevState: StreamingResponseState): { messages: Message[]; state?: StreamingResponseState }\\n\\n// Convert the streaming data returned by the Response API into Message format for the Chat Dialogue.\\nfunction chatInputToMessage(inputContent: MessageContent): Message\\n\\n// Convert Chat Input data to Input Message format in Chat Completion API\\nfunction chatInputToChatCompletion(inputContent: MessageContent): ChatCompletionInput\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"For example, when a user returns non-streaming data using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n }, \"Chat Completion API\"), \" interface, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"chatCompletionToMessage\"), \" function can be used to convert the Chat Completion Object into a Dialogue Message block format. Note that because the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Chat Completion API\"), \" allows control over the number of results generated for each input message via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"n\"), \", this function returns an array. (Note: If n > 1, the user needs to decide which data to add to the message for display.)\"), 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 { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst roleConfig = {\\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\\nfunction ChatCompletionToMessageDemo() {\\n const [messages, setMessage] = useState([]);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n useEffect(() => {\\n const message = chatCompletionToMessage(CHAT_COMPLETION_DATA);\\n setMessage([...message]);\\n }, []);\\n \\n return (\\n \\n );\\n};\\n\\nconst CHAT_COMPLETION_DATA = {\\n \\\"id\\\": \\\"chatcmpl-B9MBs8CjcvOU2jLn4n570S5qMJKcT\\\",\\n \\\"object\\\": \\\"chat.completion\\\",\\n \\\"created\\\": 1741569952,\\n \\\"model\\\": \\\"gpt-4.1-2025-04-14\\\",\\n \\\"choices\\\": [\\n {\\n \\\"index\\\": 0,\\n \\\"message\\\": {\\n \\\"role\\\": \\\"assistant\\\",\\n \\\"content\\\": \\\"Hello! How can I assist you today?\\\",\\n \\\"refusal\\\": null,\\n \\\"annotations\\\": [],\\n \\\"tool_calls\\\": [\\n {\\n \\\"id\\\": \\\"call_abc123\\\",\\n \\\"type\\\": \\\"function\\\",\\n \\\"function\\\": {\\n \\\"name\\\": \\\"get_current_weather\\\",\\n \\\"arguments\\\": \\\"{\\\\n\\\\\\\"location\\\\\\\": \\\\\\\"Boston, MA\\\\\\\"\\\\n}\\\"\\n }\\n }\\n ]\\n },\\n \\\"logprobs\\\": null,\\n \\\"finish_reason\\\": \\\"stop\\\"\\n }\\n ],\\n // ...\\n};\\n\\nrender(ChatCompletionToMessageDemo);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"For example, when a user returns streaming data using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n }, \"Chat Completion API\"), \" interface, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"streamingChatCompletionToMessage\"), \" function can be used to convert the Chat Completion Chunk Object List into a Dialogue Message format.\"), 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 { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst roleConfig = {\\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\\nfunction StreamingChatCompletionToMessageDemo() {\\n const [messages, setMessage] = useState([]);\\n const [state, setState] = useState();\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n useEffect(() => {\\n const total = STREAMING_CHAT_COMPLETION_DATA.length;\\n let i = 1;\\n\\n const timer = setInterval(() => {\\n if (i > total) {\\n clearInterval(timer);\\n return;\\n }\\n\\n const slice = STREAMING_CHAT_COMPLETION_DATA.slice(0, i);\\n const { messages: partialMessages, state: nextState } = streamingChatCompletionToMessage(slice, state);\\n setState(nextState);\\n\\n const merged = [...messages, partialMessages[0]];\\n setMessage(merged);\\n\\n i += 1;\\n }, 100);\\n\\n return () => clearInterval(timer);\\n }, []);\\n \\n return (\\n \\n );\\n};\\n\\nconst STREAMING_CHAT_COMPLETION_DATA = [\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"role\\\": \\\"assistant\\\", \\\"content\\\": \\\"\\\", \\\"refusal\\\": null }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"ahPqlzj6DD\\\" },\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"content\\\": \\\"\\\" }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"i2PXRIwvc3D\\\" },\\n // index 0: \\u8F93\\u51FA\\u6587\\u672C\\u589E\\u91CF\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"content\\\": \\\" I'm using \\\" }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"3sslO5QylW\\\" },\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"content\\\": \\\"streamingChatCompletionToMessage\\\" }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"3sslO5QylW\\\" },\\n\\n // index 1: \\u5DE5\\u5177\\u8C03\\u7528\\u589E\\u91CF\\uFF08function_call / tool_calls\\uFF09\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011845, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 1, \\\"delta\\\": { \\\"tool_calls\\\": [{ \\\"id\\\": \\\"call_1\\\", \\\"function\\\": { \\\"name\\\": \\\"searchWeather\\\", \\\"arguments\\\": \\\"{\\\\\\\"city\\\\\\\":\\\\\\\"Beijing\\\\\\\"}\\\" } }] }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"T1\\\" },\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011846, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 1, \\\"delta\\\": { \\\"tool_calls\\\": [{ \\\"id\\\": \\\"call_1\\\", \\\"function\\\": { \\\"name\\\": null, \\\"arguments\\\": \\\",\\\\\\\"day\\\\\\\":\\\\\\\"today\\\\\\\"}\\\" } }] }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"T2\\\" },\\n\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011844, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"content\\\": \\\" transform to Chat Completion Chunks\\\" }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"X1\\\" },\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011844, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": { \\\"content\\\": \\\" \\uD83E\\uDD73\\\" }, \\\"finish_reason\\\": null }], \\\"obfuscation\\\": \\\"X2\\\" },\\n\\n // \\u7EC8\\u6B62\\u4FE1\\u53F7\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 0, \\\"delta\\\": {}, \\\"finish_reason\\\": \\\"stop\\\" }], \\\"obfuscation\\\": \\\"n13SLf\\\" },\\n { \\\"id\\\": \\\"chatcmpl-COjljxurV5GKrRUsg1wd7mIyQCiiT\\\", \\\"object\\\": \\\"chat.completion.chunk\\\", \\\"created\\\": 1760011843, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"service_tier\\\": \\\"default\\\", \\\"system_fingerprint\\\": \\\"fp_6c43dcef8c\\\", \\\"choices\\\": [{ \\\"index\\\": 1, \\\"delta\\\": {}, \\\"finish_reason\\\": \\\"stop\\\" }], \\\"obfuscation\\\": \\\"jt9rDb\\\" }\\n];\\n\\nrender(StreamingChatCompletionToMessageDemo);\\n\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"When a user returns non-streaming data using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n }, \"Response API\"), \" interface, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"responseToMessage\"), \" function can be used to convert the Response Object into a Dialogue Message block format.\"), 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 { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst roleConfig = {\\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\\nfunction ResponseToMessageDemo() {\\n const [messages, setMessage] = useState([]);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n useEffect(() => {\\n const responseMessage = responseToMessage(RESPONSE_DATA);\\n\\n setMessage([responseMessage]);\\n }, []);\\n \\n return (\\n \\n );\\n};\\n\\nconst RESPONSE_DATA = {\\n \\\"id\\\": \\\"resp_67ccd3a9da748190baa7f1570fe91ac604becb25c45c1d41\\\",\\n \\\"object\\\": \\\"response\\\",\\n \\\"created_at\\\": 1741476777,\\n \\\"status\\\": \\\"completed\\\",\\n \\\"error\\\": null,\\n \\\"incomplete_details\\\": null,\\n \\\"instructions\\\": null,\\n \\\"max_output_tokens\\\": null,\\n \\\"model\\\": \\\"gpt-4o-2024-08-06\\\",\\n \\\"output\\\": [\\n {\\n \\\"id\\\": \\\"rs_6876cf02e0bc8192b74af0fb64b715ff06fa2fcced15a5ac\\\",\\n \\\"type\\\": \\\"reasoning\\\",\\n \\\"status\\\": \\\"completed\\\",\\n \\\"summary\\\": [\\n {\\n \\\"type\\\": \\\"summary_text\\\",\\n \\\"text\\\": \\\"**What is Semi Design?** The user asks for \\\\\\\"Semi Design\\\\\\\" which requires aggregating multiple sources. First, ByteDance's Semi Design is a design system supporting multiple platforms with Design Tokens and code conversion tools. Another result from India focuses on semiconductor training, but the user likely refers to the ByteDance one. Other results mention semi-custom design but are less relevant. We should confirm if there are other interpretations, but current info covers the main dimensions. Continuing to reason may improve completeness, but it's sufficient to answer now.\\\"\\n }\\n ]\\n },\\n {\\n \\\"type\\\": \\\"message\\\",\\n \\\"id\\\": \\\"msg_67ccd3acc8d48190a77525dc6de64b4104becb25c45c1d41\\\",\\n \\\"status\\\": \\\"completed\\\",\\n \\\"role\\\": \\\"assistant\\\",\\n \\\"content\\\": [\\n {\\n \\\"type\\\": \\\"output_text\\\",\\n \\\"text\\\": \\\"Semi Design is a design system created and maintained by ByteDance's Frontend Team and the MED Product Design Team. You can ask me anything about Semi.\\\",\\n \\\"annotations\\\": [\\n {\\n \\\"title\\\": 'Semi Design',\\n \\\"url\\\": 'https://semi.design/zh-CN/start/getting-started',\\n \\\"detail\\\": 'Semi Design Getting Started',\\n \\\"logo\\\": 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n },\\n {\\n \\\"title\\\": 'Semi Design',\\n \\\"url\\\": 'https://semi.design/zh-CN/start/getting-started',\\n \\\"detail\\\": 'Semi Design Getting Started',\\n \\\"logo\\\": 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n },\\n {\\n \\\"title\\\": 'Semi Design',\\n \\\"url\\\": 'https://semi.design/zh-CN/start/getting-started',\\n \\\"detail\\\": 'Semi Design Getting Started',\\n \\\"logo\\\": 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'\\n },\\n ]\\n }\\n ]\\n },\\n {\\n \\\"id\\\": \\\"fc_12345xyz\\\",\\n \\\"call_id\\\": \\\"call_12345xyz\\\",\\n \\\"type\\\": \\\"function_call\\\",\\n \\\"name\\\": \\\"get_semi_page\\\",\\n \\\"status\\\": \\\"completed\\\",\\n \\\"arguments\\\": \\\"{\\\\\\\"pageName\\\\\\\":\\\\\\\"AIChatDialogue\\\\\\\"}\\\"\\n },\\n ],\\n // ...\\n};\\n\\nrender(ResponseToMessageDemo);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"When a user returns streaming data using the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n }, \"Response API\"), \" interface, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"streamingResponseToMessage\"), \" function can be used to convert the Response Chunk Object List into a Dialogue Message format.\"), 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 { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nconst roleConfig = {\\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 FIXED_SHUFFLED_INDICES = [\\n 0, // sequence_number: 0\\n 1, // sequence_number: 1\\n 2, // sequence_number: 2\\n 3, // sequence_number: 3\\n 4, // sequence_number: 4\\n 6, // sequence_number: 6 (\\u57575\\u88AB\\u8DF3\\u8FC7 / chunk 5 skipped)\\n 6, // sequence_number: 6 (\\u57576\\u91CD\\u590D\\u5230\\u8FBE)\\n 7, // sequence_number: 7\\n 5, // sequence_number: 5 (\\u57575\\u5EF6\\u8FDF\\u5230\\u8FBE / chunk 5 arrives late)\\n 8, // sequence_number: 8\\n 9, // sequence_number: 9\\n 10, // sequence_number: 10\\n 11, // sequence_number: 11\\n 12, // sequence_number: 12 \\n 13, // sequence_number: 13 \\n 14, // sequence_number: 14\\n 15, // sequence_number: 15\\n 16, // sequence_number: 16\\n];\\n\\nfunction StreamingResponseToMessageDemo() {\\n const [messages, setMessage] = useState([]);\\n const [currentState, setCurrentState] = useState(null);\\n const [currentLength, setCurrentLength] = useState(0);\\n\\n const onChatsChange = useCallback((chats) => {\\n setMessage(chats);\\n }, []);\\n\\n useEffect(() => {\\n if (currentLength > FIXED_SHUFFLED_INDICES.length) {\\n return;\\n }\\n\\n const timer = setTimeout(() => {\\n if (currentLength === 0) {\\n setCurrentLength(1);\\n return;\\n }\\n\\n const currentIndices = FIXED_SHUFFLED_INDICES.slice(0, currentLength);\\n const currentChunks = currentIndices.map(index => REASONING_CHUNKS[index]);\\n\\n const result = streamingResponseToMessage(currentChunks, currentState);\\n \\n if (result) {\\n const { message: responseMessage, nextState } = result;\\n if (responseMessage) {\\n setMessage([responseMessage]);\\n // \\u66F4\\u65B0\\u72B6\\u6001\\u4F9B\\u4E0B\\u6B21\\u4F7F\\u7528 / Update state for next iteration\\n setCurrentState(nextState);\\n }\\n }\\n setCurrentLength(prev => prev + 1);\\n }, 200);\\n\\n return () => clearTimeout(timer);\\n }, [currentLength, currentState]);\\n \\n return (\\n \\n );\\n};\\n\\nconst REASONING_CHUNKS = [\\n { \\\"type\\\": \\\"response.created\\\", \\\"sequence_number\\\": 0, \\\"response\\\": { \\\"id\\\": \\\"resp_reason_001\\\", \\\"object\\\": \\\"response\\\", \\\"created_at\\\": 1760091777, \\\"status\\\": \\\"in_progress\\\", \\\"background\\\": false, \\\"error\\\": null, \\\"incomplete_details\\\": null, \\\"instructions\\\": null, \\\"max_output_tokens\\\": null, \\\"max_tool_calls\\\": null, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"output\\\": [], \\\"parallel_tool_calls\\\": true, \\\"previous_response_id\\\": null, \\\"prompt_cache_key\\\": null, \\\"reasoning\\\": { \\\"effort\\\": \\\"medium\\\", \\\"summary\\\": null }, \\\"safety_identifier\\\": null, \\\"service_tier\\\": \\\"auto\\\", \\\"store\\\": true, \\\"temperature\\\": 1.0, \\\"text\\\": { \\\"format\\\": { \\\"type\\\": \\\"text\\\" }, \\\"verbosity\\\": \\\"medium\\\" }, \\\"tool_choice\\\": \\\"auto\\\", \\\"tools\\\": [], \\\"top_logprobs\\\": 0, \\\"top_p\\\": 1.0, \\\"truncation\\\": \\\"disabled\\\", \\\"usage\\\": null, \\\"user\\\": null, \\\"metadata\\\": {} } },\\n { \\\"type\\\": \\\"response.in_progress\\\", \\\"sequence_number\\\": 1, \\\"response\\\": { \\\"id\\\": \\\"resp_reason_001\\\", \\\"object\\\": \\\"response\\\", \\\"created_at\\\": 1760091777, \\\"status\\\": \\\"in_progress\\\", \\\"background\\\": false, \\\"error\\\": null, \\\"incomplete_details\\\": null, \\\"instructions\\\": null, \\\"max_output_tokens\\\": null, \\\"max_tool_calls\\\": null, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"output\\\": [], \\\"parallel_tool_calls\\\": true, \\\"previous_response_id\\\": null, \\\"prompt_cache_key\\\": null, \\\"reasoning\\\": { \\\"effort\\\": \\\"medium\\\", \\\"summary\\\": null }, \\\"safety_identifier\\\": null, \\\"service_tier\\\": \\\"auto\\\", \\\"store\\\": true, \\\"temperature\\\": 1.0, \\\"text\\\": { \\\"format\\\": { \\\"type\\\": \\\"text\\\" }, \\\"verbosity\\\": \\\"medium\\\" }, \\\"tool_choice\\\": \\\"auto\\\", \\\"tools\\\": [], \\\"top_logprobs\\\": 0, \\\"top_p\\\": 1.0, \\\"truncation\\\": \\\"disabled\\\", \\\"usage\\\": null, \\\"user\\\": null, \\\"metadata\\\": {} } },\\n\\n // reasoning item\\uFF08\\u8F93\\u51FA\\u7D22\\u5F15 0\\uFF09\\n { \\\"type\\\": \\\"response.output_item.added\\\", \\\"sequence_number\\\": 2, \\\"output_index\\\": 0, \\\"item\\\": { \\\"id\\\": \\\"rs_reason_001\\\", \\\"type\\\": \\\"reasoning\\\", \\\"summary\\\": [] } },\\n { \\\"type\\\": \\\"response.reasoning_summary_part.added\\\", \\\"sequence_number\\\": 3, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"part\\\": { \\\"type\\\": \\\"reasoning\\\", \\\"text\\\": \\\"\\\" } },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.delta\\\", \\\"sequence_number\\\": 4, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"delta\\\": \\\"T\\\" },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.delta\\\", \\\"sequence_number\\\": 5, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"delta\\\": \\\"h\\\" },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.delta\\\", \\\"sequence_number\\\": 6, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"delta\\\": \\\"i\\\" },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.delta\\\", \\\"sequence_number\\\": 7, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"delta\\\": \\\"n\\\" },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.delta\\\", \\\"sequence_number\\\": 8, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"delta\\\": \\\"k\\\" },\\n { \\\"type\\\": \\\"response.reasoning_summary_text.done\\\", \\\"sequence_number\\\": 9, \\\"output_index\\\": 0, \\\"summary_index\\\": 0, \\\"text\\\": \\\"Done thinking!\\\" },\\n { \\\"type\\\": \\\"response.output_item.done\\\", \\\"sequence_number\\\": 10, \\\"output_index\\\": 0, \\\"item\\\": { \\\"id\\\": \\\"rs_reason_001\\\", \\\"type\\\": \\\"reasoning\\\", \\\"summary\\\": [ { \\\"type\\\": \\\"reasoning\\\", \\\"text\\\": \\\"\\u601D\\u8003\\u5B8C\\u6210\\uFF01\\\" } ] } },\\n\\n // assistant message\\uFF08\\u8F93\\u51FA\\u7D22\\u5F15 1\\uFF09\\n { \\\"type\\\": \\\"response.output_item.added\\\", \\\"sequence_number\\\": 11, \\\"output_index\\\": 1, \\\"item\\\": { \\\"id\\\": \\\"msg_reason_001\\\", \\\"type\\\": \\\"message\\\", \\\"status\\\": \\\"in_progress\\\", \\\"content\\\": [], \\\"role\\\": \\\"assistant\\\" } },\\n { \\\"type\\\": \\\"response.content_part.added\\\", \\\"sequence_number\\\": 12, \\\"item_id\\\": \\\"msg_reason_001\\\", \\\"output_index\\\": 1, \\\"content_index\\\": 0, \\\"part\\\": { \\\"type\\\": \\\"output_text\\\", \\\"annotations\\\": [], \\\"text\\\": \\\"\\\" } },\\n { \\\"type\\\": \\\"response.output_text.delta\\\", \\\"sequence_number\\\": 13, \\\"item_id\\\": \\\"msg_reason_001\\\", \\\"output_index\\\": 1, \\\"content_index\\\": 0, \\\"delta\\\": \\\"Based on the reasoning above, \\\" },\\n { \\\"type\\\": \\\"response.output_text.delta\\\", \\\"sequence_number\\\": 14, \\\"item_id\\\": \\\"msg_reason_001\\\", \\\"output_index\\\": 1, \\\"content_index\\\": 0, \\\"delta\\\": \\\"the conclusions are:\\\" },\\n { \\\"type\\\": \\\"response.output_text.done\\\", \\\"sequence_number\\\": 15, \\\"item_id\\\": \\\"msg_reason_001\\\", \\\"output_index\\\": 1, \\\"content_index\\\": 0, \\\"text\\\": \\\"Based on the reasoning above, the conclusions are: ...\\\" },\\n \\n { \\\"type\\\": \\\"response.completed\\\", \\\"sequence_number\\\": 16, \\\"response\\\": { \\\"id\\\": \\\"resp_reason_001\\\", \\\"object\\\": \\\"response\\\", \\\"created_at\\\": 1760091777, \\\"status\\\": \\\"completed\\\", \\\"background\\\": false, \\\"error\\\": null, \\\"incomplete_details\\\": null, \\\"instructions\\\": null, \\\"max_output_tokens\\\": null, \\\"max_tool_calls\\\": null, \\\"model\\\": \\\"o3-mini-2025-01-31\\\", \\\"output\\\": [ { \\\"id\\\": \\\"rs_reason_001\\\", \\\"type\\\": \\\"reasoning\\\", \\\"summary\\\": [ { \\\"type\\\": \\\"reasoning\\\", \\\"text\\\": \\\"\\u601D\\u8003\\u5B8C\\u6210\\uFF01\\\" } ] }, { \\\"id\\\": \\\"msg_reason_001\\\", \\\"type\\\": \\\"message\\\", \\\"status\\\": \\\"completed\\\", \\\"content\\\": [ { \\\"type\\\": \\\"output_text\\\", \\\"annotations\\\": [], \\\"text\\\": \\\"\\u57FA\\u4E8E\\u4E0A\\u8FF0\\u601D\\u8003\\uFF0C\\u7ED3\\u8BBA\\u5982\\u4E0B\\uFF1A...\\\" } ], \\\"role\\\": \\\"assistant\\\" } ], \\\"parallel_tool_calls\\\": true, \\\"previous_response_id\\\": null, \\\"prompt_cache_key\\\": null, \\\"reasoning\\\": { \\\"effort\\\": \\\"medium\\\", \\\"summary\\\": null }, \\\"safety_identifier\\\": null, \\\"service_tier\\\": \\\"default\\\", \\\"store\\\": true, \\\"temperature\\\": 1.0, \\\"text\\\": { \\\"format\\\": { \\\"type\\\": \\\"text\\\" }, \\\"verbosity\\\": \\\"medium\\\" }, \\\"tool_choice\\\": \\\"auto\\\", \\\"tools\\\": [], \\\"top_logprobs\\\": 0, \\\"top_p\\\": 1.0, \\\"truncation\\\": \\\"disabled\\\", \\\"usage\\\": { \\\"input_tokens\\\": 12, \\\"input_tokens_details\\\": { \\\"cached_tokens\\\": 0 }, \\\"output_tokens\\\": 120, \\\"output_tokens_details\\\": { \\\"reasoning_tokens\\\": 16 }, \\\"total_tokens\\\": 132 }, \\\"user\\\": null, \\\"metadata\\\": {} } }\\n];\\n\\nrender(StreamingResponseToMessageDemo);\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), 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 }, \"Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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 }, \"Conversation layout\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'leftRight' \", \"|\", \" 'leftAlign'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'leftRight'\")), 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 messages\"), 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 }, \"disabledFileItemClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disable file click\"), 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 }, \"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 }, \"hintCls\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Hint area outer wrapper 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 }, \"hints\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Hint texts\"), 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 area outer wrapper 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 }, \"markdownRenderProps\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Props passed to the MarkdownRender used by the dialogue. See \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/markdownrender#API\"\n }, \"MarkdownRenderProps\"), \". Note: When customizing \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"markdownRenderProps.components\"), \", if a \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"code\"), \" component is included, it will override the default code block renderer. To preserve default functionality while customizing, use \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"AIChatDialogue.defaultComponents.code\"), \" to get the default component for extension.\"), 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 }, \"messageEditRender\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom message edit renderer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(props: MessageContent) => 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 }, \"mode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Conversation mode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'bubble' \", \"|\", \" 'noBubble' \", \"|\", \" 'userBubble'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'bubble'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onAnnotationClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Annotation click callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(annotation?: Annotation) => 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 }, \"onChatsChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Messages change callback\"), 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 }, \"onFileClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Attachment file click callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(file?: InputFile) => 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 }, \"Hint click callback\"), 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 }, \"onImageClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Image click callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(image?: InputImage) => 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 }, \"Negative feedback callback\"), 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 }, \"Copy message callback\"), 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 }, \"Delete message callback\"), 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 }, \"onMessageEdit\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Edit message callback\"), 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 }, \"Positive feedback callback\"), 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 }, \"Reset message callback\"), 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 }, \"onMessageShare\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Share message callback\"), 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 }, \"onReferenceClick\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Reference button click callback\"), 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 }, \"onSelect\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Selection change callback\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(selectedIds: 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 }, \"dialogueRenderConfig\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom render config for sections\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DialogueRenderConfig\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderDialogueContentItem\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Renderer map by message content type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"DialogueContentItemRendererMap\"), 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 hint item renderer\"), 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 }, \"roleConfig\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Role metadata config (user/assistant/system, etc.)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/ai/aiChatDialogue#RoleConfig\"\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 }, \"selecting\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Enable selection mode\"), 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 }, \"showReset\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Show reset action\"), 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 }, \"showReference\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Show quotable icon in text or file messages (user messages only)\"), 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 }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\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 }, \"Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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 info\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Metadata \", \"|\", \" Map\"), 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 info\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Metadata \", \"|\", \" Map\"), 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 info\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Metadata \", \"|\", \" Map\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\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 }, \"Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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\"), 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 }, \"color\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Avatar background color, same as Avatar \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"color\"), \" prop. Supports \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"amber\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"blue\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"cyan\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"green\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"grey\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"indigo\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"light-blue\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"light-green\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"lime\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"orange\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"pink\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"purple\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"red\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"teal\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"violet\"), \", \", 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(\"h3\", {\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 }, \"Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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 }, \"Unique ID\"), 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 }, \"Message content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\", \"|\", \" ContentItem[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"createdAt\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Created at (timestamp)\"), 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 }, \"model\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Model 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 }, \"status\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Message status: \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"queued\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"in_progress\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"incomplete\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"completed\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"failed\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"cancelled\")), 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 }, \"completed\"))))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Reference\"), 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 }, \"Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), 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 }, \"id\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Unique identifier\"), 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 }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), 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 }, \"url\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"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 }, \"content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"text content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\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 }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"selectAll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Select all messages\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"deselectAll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Deselect all messages\")), 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 bottom; if \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \", animate; otherwise no animation\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"scrollToTop(animation: boolean)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Scroll to top; if \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"true\"), \", animate; otherwise no animation\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Static Properties\"), 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 }, \"Property\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultComponents\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default Markdown rendering components, including an enhanced Code component with language identifier and copy functionality. Can be used for extending \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"markdownRenderProps.components\"), \" \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.94.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"{ code: React.ComponentType }\")))), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Usage Example:\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"To preserve default functionality while customizing code block rendering, access the default component via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AIChatDialogue.defaultComponents.code\"), \":\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { AIChatDialogue } from '@douyinfe/semi-ui';\\n\\nfunction CustomCodeDemo() {\\n return (\\n {\\n // Get the default Code component\\n const DefaultCode = AIChatDialogue.defaultComponents.code;\\n // Add custom logic here\\n return ;\\n }\\n }\\n }}\\n />\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ContentItem\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ContentItem\"), \" supports all OpenAI Response \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/create#responses-create-input\"\n }, \"InputItem\"), \" and \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://platform.openai.com/docs/api-reference/responses/object#responses/object-output\"\n }, \"OutputItem\"), \" types. Definitions:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"type ContentItem = InputContentItem | OutputContentItem;\\n\\ntype InputContentItem = InputMessage | ItemReference;\\ntype OutputContentItem = OutputMessage | MCPToolCall | Reasoning FileSearchToolCall | \\n WebSearchToolCall | FunctionToolCall | CustomToolCall | ImageGenerationCall| CustomObject;\\n\\ninterface CommonContentItem {\\n id?: string;\\n type?: string;\\n status?: string;\\n role?: string\\n}\\n\\ninterface CustomObject {\\n [key: string]: any\\n}\\n\\n// input item\\ninterface InputMessage extends CommonContentItem {\\n content?: string | (InputText | InputImage | InputFile)[]\\n}\\n\\ninterface InputText extends CommonContentItem {\\n text?: string\\n}\\n\\ninterface InputImage extends CommonContentItem {\\n detail?: string;\\n file_id?: string;\\n image_url?: string\\n}\\n\\ninterface InputFile extends CommonContentItem {\\n file_id?: string;\\n file_data?: string;\\n file_url?: string;\\n filename?: string;\\n size?: string;\\n file_type?: string;\\n fileInstance?: any\\n}\\n\\ninterface ItemReference extends CommonContentItem {\\n file_id?: string\\n}\\n\\n\\n// output item\\ninterface OutputMessage extends CommonContentItem {\\n content?: (OutputText | Refusal)[]\\n}\\n\\ninterface OutputText {\\n text?: string;\\n type?: string;\\n annotations?: Annotation[]\\n}\\n\\ninterface Refusal extends CommonContentItem {\\n refusal?: string;\\n type?: string\\n}\\n\\ntype Annotation = URLCitation | CustomObject;\\n\\ninterface URLCitation {\\n end_index?: number;\\n start_index?: number;\\n title?: string;\\n type?: string;\\n url?: string\\n}\\n\\ninterface Reasoning extends CommonContentItem {\\n summary?: {\\n text?: string;\\n type?: string\\n }[];\\n content?: {\\n text?: string;\\n type?: string\\n }[]\\n}\\n\\ninterface FileSearchToolCallResult {\\n attributes?: Map;\\n score?: number;\\n file_id?: string;\\n filename?: string;\\n text?: string\\n}\\n\\ninterface FileSearchToolCall extends CommonContentItem {\\n queries?: string[];\\n results?: FileSearchToolCallResult[]\\n}\\n\\ninterface WebSearchToolCall extends CommonContentItem {\\n action?: SearchAction | OpenPageAction | FindAction\\n}\\n\\ninterface SearchAction {\\n type?: string;\\n query?: string;\\n sources?: { type: string; url: string }[]\\n}\\n\\ninterface OpenPageAction {\\n type?: string;\\n url?: string\\n}\\n\\ninterface FindAction {\\n action?: string;\\n type?: string;\\n query?: string\\n}\\n\\ninterface FunctionToolCall extends CommonContentItem {\\n call_id?: string;\\n name?: string;\\n arguments?: string\\n}\\n\\ninterface CustomToolCall extends CommonContentItem {\\n call_id?: string;\\n name?: string;\\n input?: string\\n}\\n\\ninterface ImageGenerationCall extends CommonContentItem {\\n result?: string\\n}\\n\\ninterface MCPToolCall extends CommonContentItem {\\n arguments?: string;\\n server_label?: string;\\n name?: string;\\n result?: string;\\n output?: string\\n}\\n\\ninterface FileUploadToolCall extends CommonContentItem {\\n result?: string\\n}\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/ai/aiChatDialogue","next":{"fields":{"slug":"zh-CN/ai/aiChatDialogue"},"id":"399d8103-1188-5be6-81f5-01ae62c65ea0","frontmatter":{"title":"AIChatDialogue AI对话","localeCode":"zh-CN","icon":"doc-aiDialogue","showNew":true}},"previous":{"fields":{"slug":"zh-CN/ai/aiChatInput"},"id":"d3909896-f9a9-52fd-9694-8318d3db2400","frontmatter":{"title":"AIChatInput 聊天输入框","localeCode":"zh-CN","icon":"doc-aiInput","showNew":true}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}