{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ai/aiComponent","result":{"data":{"current":{"frontmatter":{"title":"AIComponent 能力介绍","order":100,"brief":"整体介绍 AI 应用场景下的组件能力","icon":"doc-aiComponent"},"fields":{"type":"ai"},"tableOfContents":{"items":[{"url":"#ai-基础组件","title":"AI 基础组件"},{"url":"#ai-chat-组件构建对话","title":"AI Chat 组件构建对话"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 100,\n  \"category\": \"Ai\",\n  \"title\": \"AIComponent 能力介绍\",\n  \"icon\": \"doc-aiComponent\",\n  \"width\": \"60%\",\n  \"brief\": \"整体介绍 AI 应用场景下的组件能力\",\n  \"showNew\": true\n};\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(\"p\", null, \"Semi AI \\u7EC4\\u4EF6\\u662F\\u4E00\\u5957\\u4E13\\u4E3A AI \\u5E94\\u7528\\u573A\\u666F\\u8BBE\\u8BA1\\u7684\\u521B\\u65B0\\u7EC4\\u4EF6\\u5E93\\u3002\\u9762\\u5BF9 AI \\u6B63\\u5728\\u6210\\u4E3A\\u4EA7\\u54C1\\u4E3B\\u89D2\\u7684\\u65F6\\u4EE3\\uFF0C\\u4F20\\u7EDF\\u7684\\u8BBE\\u8BA1\\u4F53\\u7CFB\\u5DF2\\u96BE\\u4EE5\\u652F\\u6491\\u65E5\\u76CA\\u590D\\u6742\\u7684\\u667A\\u80FD\\u4EA4\\u4E92\\uFF0CSemi AI \\u7EC4\\u4EF6\\u4EE5\\u300C\\u4EBA\\u673A\\u667A\\u80FD\\u534F\\u540C\\u300D\\u4E3A\\u6838\\u5FC3\\u7406\\u5FF5\\uFF0C\\u81F4\\u529B\\u4E8E\\u8BA9\\u7528\\u6237\\u4E0E AI \\u7CFB\\u7EDF\\u534F\\u4F5C\\u66F4\\u9AD8\\u6548\\u3001\\u53EF\\u63A7\\u3001\\u53EF\\u611F\\u77E5\\u3001\\u53EF\\u4FE1\\u8D56\\u3002Semi AI \\u7EC4\\u4EF6\\u5E93\\u5305\\u542B\\u4EE5\\u4E0B\\u5185\\u5BB9\\uFF1AAI Token\\u3001AI \\u57FA\\u7840\\u7EC4\\u4EF6\\u4EE5\\u53CA AI Chat \\u7EC4\\u4EF6\\uFF0C\\u7528\\u4E8E\\u670D\\u52A1\\u667A\\u80FD\\u95EE\\u7B54\\u4E0E\\u52A9\\u624B\\u3001\\u591A\\u6A21\\u6001\\u8F93\\u5165\\u4E0E\\u591A\\u8F6E\\u5BF9\\u8BDD\\u7B49\\u573A\\u666F\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AI Token\"), \"\\uFF0C \\u65B0\\u589E\\u52A0 AI \\u573A\\u666F\\u4E0B\\u7684\\u57FA\\u7840 20 \\u4E2A\\u989C\\u8272\\u7684\\u57FA\\u7840 token\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AI \\u57FA\\u7840\\u7EC4\\u4EF6\"), \"\\uFF0C \\u65B0\\u589E\\u52A0 AI \\u573A\\u666F\\u4E0B\\u7684 25 \\u4E2A icon\\uFF0C\\u4EE5\\u53CA\\u5BF9 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Button/Tag/FloatButton\"), \" \\u65B0\\u589E AI \\u98CE\\u683C\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AI Chat \\u7EC4\\u4EF6\"), \"\\uFF0C\\u65B0\\u589E\\u52A0\\u652F\\u6301\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u3001\\u5F15\\u7528\\uFF0C\\u4E0A\\u4F20\\u3001\\u529F\\u80FD\\u914D\\u7F6E\\u3001\\u53CA\\u4E30\\u5BCC\\u81EA\\u5B9A\\u4E49\\u5C55\\u793A\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AIChatInput\"), \"\\uFF1B\\u4EE5\\u53CA\\u4F1A\\u8BDD\\u5C55\\u793A\\u3001\\u9009\\u62E9\\u3001\\u7F16\\u8F91\\u3001\\u63D0\\u793A\\u3001\\u4E30\\u5BCC\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u3001\\u6D88\\u606F\\u8F6C\\u6362\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AIChatDialogue\"), \"\\uFF0C\\u5BF9\\u8BDD\\u7EC4\\u4EF6\\u9ED8\\u8BA4\\u652F\\u6301 OpenAI \\u793E\\u533A \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n  }, \"Response\"), \" / \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n  }, \"Chat Completion\"), \" \\u683C\\u5F0F\\u6807\\u51C6\\uFF0C\\u5BF9 GPT-5\\u3001GPT-4o \\u7CFB\\u5217\\u6A21\\u578B\\u7684\\u54CD\\u5E94\\u5747\\u652F\\u6301\\u5F00\\u7BB1\\u5373\\u7528\\uFF0C\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"li\",\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  }, \"\\u6D88\\u606F\\u6570\\u636E\\u8F6C\\u6362\"), \"\\u3002\\u4EE5\\u53CA\\u5177\\u5907\\u4EA7\\u7269\\u7F16\\u8F91\\u3001\\u4EA7\\u7269\\u67E5\\u770B\\u3001\\u5F15\\u7528\\u8D44\\u6599\\u5C55\\u793A\\u7B49\\u80FD\\u529B\\u7684\\u591A\\u529F\\u80FD\\u4FA7\\u8FB9\\u680F\\u7EC4\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Sidebar\"), \"\\u3002\\n\\uFF08\\u5173\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Chat\"), \" \\u7EC4\\u4EF6\\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AI Chat\"), \" \\u7EC4\\u4EF6\\u5982\\u4F55\\u9009\\u578B\\u89C1 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiComponent#FAQ\"\n  }, \"FAQ\"), \"\\uFF09\")), mdx(\"p\", null, \"\\u5728\\u672A\\u6765\\uFF0C\\u6211\\u4EEC\\u5C06\\u652F\\u6301\\u66F4\\u591A AI Chat \\u7EC4\\u4EF6\\uFF0C\\u6BD4\\u5982\\u7ED3\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatDialogue\"), \" \\u7684\\u4E00\\u4F53\\u5316\\u7EC4\\u4EF6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatBox\"), \"\\u3002\\u7528\\u4E8E\\u6EE1\\u8DB3\\u590D\\u6742 AI \\u5E94\\u7528\\u573A\\u666F\\u4E0B\\u7684\\u4FE1\\u606F\\u4E0E\\u7ED3\\u679C\\u7BA1\\u7406\\u9700\\u6C42\\u3002\"), mdx(\"h3\", null, \"AI \\u57FA\\u7840\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"AI \\u57FA\\u7840\\u7EC4\\u4EF6\\u5305\\u62EC \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AI Icon\"), \"\\u3001AI \\u98CE\\u683C\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Tag\"), \" / \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FloatButton\"), \"\\uFF0C AI \\u57FA\\u7840\\u7EC4\\u4EF6\\u7684 AI \\u98CE\\u683C\\u662F\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AI Token\"), \" \\u7684\\u57FA\\u7840\\u4E0A\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u5BF9\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AI Token\"), \"\\uFF0C\\u6211\\u4EEC\\u6784\\u5EFA\\u4E86\\u4E00\\u5957\\u4EE5\\u7D2B\\u84DD\\u6E10\\u53D8\\u7CFB\\u4E3A\\u6838\\u5FC3\\u7684\\u54C1\\u724C\\u8272\\u677F\\uFF0C\\u5728\\u57FA\\u7840\\u8272\\u4E2D\\uFF0C\\u65B0\\u589E\\u52A0\\u4E86 AI purple \\u548C AI general \\u4E24\\u4E2A\\u8272\\u76F8\\uFF0C20 \\u4E2A\\u989C\\u8272\\u7684\\u8272\\u76D8\\u3002\"), mdx(\"p\", null, \"\\u5BF9\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AI Icon\"), \"\\uFF0C\\u652F\\u6301 Icon \\u573A\\u666F\\u4E0B\\u7684\\u5355\\u8272\\u3001\\u53CC\\u8272\\u3001\\u53CA\\u591A\\u8272 Icon\\uFF0C\\u5171 25 \\u4E2A\\u56FE\\u6807\\u3002\"), mdx(\"p\", null, \"\\u5BF9\\u4E8E AI \\u98CE\\u683C\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button / Tag / FloatButton\"), \"\\uFF0C\\u53EF\\u901A\\u8FC7\\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Colorful\"), \" \\u5C5E\\u6027\\u5F00\\u542F\\u3002\"), mdx(\"p\", null, \"\\u4EE5\\u4E0B\\u662F AI \\u57FA\\u7840\\u7EC4\\u4EF6\\u7684\\u4E00\\u4E9B\\u793A\\u4F8B\\uFF0C\\u66F4\\u591A\\u793A\\u4F8B\\u53CA\\u4F7F\\u7528\\u573A\\u666F\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/tokens\"\n  }, \"AI Token\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"zh-CN/basic/icon\"\n  }, \"AI Icon\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/button#AI%20%E9%A3%8E%E6%A0%BC%20-%20%E5%A4%9A%E5%BD%A9%E6%8C%89%E9%92%AE\"\n  }, \"AI Button\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/tag#AI%20%E9%A3%8E%E6%A0%BC%20-%20%E5%A4%9A%E5%BD%A9%E6%A0%87%E7%AD%BE\"\n  }, \"AI Tag\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/floatbutton#AI%20%E9%A3%8E%E6%A0%BC%20-%20%E5%A4%9A%E5%BD%A9%E6%82%AC%E6%B5%AE%E6%8C%89%E9%92%AE\"\n  }, \"AI FloatButton\"), \"\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Typography, Button, Tag, FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIBellLevel1, IconAIEditLevel2, IconAIFileLevel3, IconAIFilledLevel3, IconAIImageLevel3, IconAISearchLevel3, IconAIStrokedLevel3, IconAIWandLevel3, IconAILoading, IconAIFilledLevel1, IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    return (<div style={{ display: 'flex', flexDirection: 'column', rowGap: 20 }}>\\n        <div key=\\\"AIToken\\\" style={{ display: 'flex', flexDirection: 'column', rowGap: 10 }}>\\n            <Typography.Title heading={5}>AI Token</Typography.Title>\\n            <div style={{ display: 'flex', alignItems: 'center', columnGap: 10 }}>\\n                <span>Purple</span>\\n                <div style={{ display: 'inline-flex', columnGap: 4 }}>\\n                    {(new Array(10).fill(1).map((i, index) => (\\n                        <div key={index} style={{ width: 40, height: 40, backgroundColor: `rgba(var(--semi-ai-purple-${index}), 1)`, borderRadius: '50%' }} />\\n                    )))}\\n                </div>\\n            </div>\\n            <div style={{ display: 'flex', alignItems: 'center', columnGap: 10 }}>\\n                <span>General</span>\\n                <div style={{ display: 'inline-flex', columnGap: 4, }}>\\n                    {(new Array(10).fill(1).map((i, index) => (\\n                        <div key={index} style={{ width: 40, height: 40, background: `var(--semi-ai-general-${index})`, borderRadius: '50%' }} />\\n                    )))}\\n                </div>\\n            </div>\\n        </div>\\n        <div key=\\\"AIIcon\\\" style={{ display: 'flex', flexDirection: 'column', rowGap: 10 }}>\\n            <Typography.Title heading={5} >AI Icon</Typography.Title>\\n            <div style={{ display: 'flex', columnGap: 10 }}>\\n                <IconAIBellLevel1 size=\\\"extra-large\\\"/>\\n                <IconAIEditLevel2 size=\\\"extra-large\\\"/>\\n                <IconAIFileLevel3 size=\\\"extra-large\\\" />\\n                <IconAIFilledLevel3 size=\\\"extra-large\\\" />\\n                <IconAIImageLevel3 size=\\\"extra-large\\\" />\\n                <IconAISearchLevel3 size=\\\"extra-large\\\" />\\n                <IconAIStrokedLevel3 size=\\\"extra-large\\\" />\\n                <IconAIWandLevel3 fill={['var(--semi-color-danger)', 'var(--semi-color-success)', 'var(--semi-color-primary)', 'var(--semi-color-warning)']} size=\\\"extra-large\\\"/>\\n                <IconAILoading size=\\\"extra-large\\\"/>\\n            </div>\\n        </div>\\n        <div style={{ display: 'flex', flexDirection: 'column', rowGap: 10 }}>\\n            <Typography.Title heading={5}>AI Button</Typography.Title>\\n            <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>\\n                <div style={{ display: 'flex', columnGap: 16 }}>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />}>Colorful</Button>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" loading >Colorful</Button>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />} disabled >Colorful</Button>\\n                </div>\\n                <div style={{ display: 'flex', columnGap: 16 }}>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />}>Colorful</Button>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" loading >Colorful</Button>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />} disabled >Colorful</Button>\\n                </div>\\n                <div style={{ display: 'flex', columnGap: 16 }}>\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />} />\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" loading />\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />} disabled />\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />} />\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" loading />\\n                    <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />} />\\n                </div>\\n            </div>\\n        </div>\\n        <div style={{ display: 'flex', flexDirection: 'column', rowGap: 10 }}>\\n            <Typography.Title heading={5} style={{ marginTop: 10 }}>AI Tag</Typography.Title>\\n            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridGap: '10px', width: 'fit-content' }}>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel1 size=\\\"small\\\"/>} type=\\\"solid\\\" shape='circle' gradient>AI</Tag>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel3 size=\\\"small\\\" />} type=\\\"light\\\" shape='circle' gradient>AI</Tag>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel3 size=\\\"small\\\"/>} type=\\\"ghost\\\" shape='circle' gradient >AI</Tag>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel1 size=\\\"small\\\"/>} type=\\\"solid\\\" shape='circle' >AI</Tag>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel1 size=\\\"small\\\" />} type=\\\"light\\\" shape='circle'>AI</Tag>\\n                <Tag colorful prefixIcon={<IconAIFilledLevel1 size=\\\"small\\\"/>} type=\\\"ghost\\\" shape='circle'>AI</Tag>\\n            </div>\\n        </div>\\n        <div style={{ display: 'flex', flexDirection: 'column', rowGap: 10 }}>\\n            <Typography.Title heading={5} style={{ marginTop: 10 }}>AI FloatButton</Typography.Title>\\n            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridGap: '10px', width: 'fit-content' }}>\\n                <FloatButton \\n                    icon={<IconAIEditLevel1 />}\\n                    colorful\\n                    size=\\\"large\\\"\\n                    badge={{ count: 'VIP', type: \\\"danger\\\" }}\\n                    style={{ position: 'static' }} \\n                />\\n            </div>\\n        </div>\\n    </div>);\\n};\\n\")), mdx(\"h3\", null, \"AI Chat \\u7EC4\\u4EF6\\u6784\\u5EFA\\u5BF9\\u8BDD\"), mdx(\"p\", null, \"\\u672C\\u4F8B\\u4E2D\\u6211\\u4EEC\\u5C06\\u8054\\u5408\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatDialogue\"), \" \\u7EC4\\u4EF6\\uFF0C\\u6784\\u5EFA\\u4E00\\u4E2A\\u9002\\u7528\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Multiple Agent\"), \" \\u573A\\u666F\\u7684\\u5BF9\\u8BDD\\u7528\\u4F8B\\u3002\\n\\u66F4\\u591A\\u793A\\u4F8B\\u53CA\\u4F7F\\u7528\\u573A\\u666F\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput\"\n  }, \"AIChatInput\"), \"\\u3001\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue\"\n  }, \"AIChatDialogue\"), \"\\u3002\\u524D\\u540E\\u7AEF\\u7EC4\\u5408\\u4F7F\\u7528\\u7528\\u4F8B\\u53EF\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/YannLynn/semi-ai-chat-demo\"\n  }, \"semi-ai-chat-demo\")), mdx(\"pre\", null, 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, AIChatInput, chatInputToMessage, Typography, Button } from '@douyinfe/semi-ui';\\nimport { IconFixedStroked, IconFeishuLogo, IconBookOpenStroked, IconGit, IconFigma, IconWord, IconClose, IconTemplateStroked, IconSearch } from '@douyinfe/semi-icons';\\n\\nconst { Configure } = AIChatInput;\\n\\nconst simpleIsEqual = (a, b) => {\\n    if (a === b) {\\n        return true;\\n    }\\n    if (Number.isNaN(a) && Number.isNaN(b)) {\\n        return true;\\n    }\\n    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {\\n        return false;\\n    }\\n    const isArrayA = Array.isArray(a);\\n    const isArrayB = Array.isArray(b);\\n    if (isArrayA !== isArrayB) {\\n        return false; \\n    }\\n    const keysA = Object.keys(a);\\n    const keysB = Object.keys(b);\\n    if (keysA.length !== keysB.length) {\\n        return false;\\n    }\\n    for (const key of keysA) {\\n        if (!Object.prototype.hasOwnProperty.call(b, key)) {\\n            return false;\\n        }\\n        if (!simpleIsEqual(a[key], b[key])) {\\n            return false;\\n        }\\n    }\\n    return true;\\n};\\n\\n\\nfunction AIChatInputWithDialogue() {\\n    const inputOuterStyle = { margin: '12px', minHeight: 150, maxHeight: 300, flexShrink: 0 };\\n    const editingInputOuterStyle = { margin: '12px 0px', maxHeight: 300, flexShrink: 0 };\\n    const dialogueOuterStyle = { flex: 1, overflow: 'auto' };\\n    const [sideBarVisible, setSideBarVisible] = useState(false);\\n    const [messages, setMessages] = useState(defaultMessages); \\n    const [generating, setGenerating] = useState(false);\\n    const [references, setReferences] = useState([]); \\n    const [sideBarContent, setSideBarContent] = useState({});\\n\\n    const renderLeftMenu = useCallback(() => (<>\\n        <Configure.Select optionList={modelOptions} field=\\\"model\\\" initValue=\\\"GPT-4o\\\" />\\n        <Configure.Button icon={<IconBookOpenStroked />} field=\\\"onlineSearch\\\">\\u8054\\u7F51\\u641C\\u7D22</Configure.Button>\\n        <Configure.Mcp options={mcpOptions} />\\n        <Configure.RadioButton options={radioButtonProps} field=\\\"thinkType\\\" initValue=\\\"think\\\"/>\\n    </>), []);\\n\\n    const onChatsChange = useCallback((chats) => {\\n        console.log('onChatsChange', chats);\\n        setMessages(chats);\\n    }, []);\\n\\n    const onContentChange = useCallback((content) => {\\n        // console.log('onContentChange', content);\\n    }, []);\\n\\n\\n    const onReferenceClick = useCallback((item) => {\\n        setReferences((references) => [...references, { ...item, id: `reference-${Date.now()}` }]);\\n    }, []);\\n\\n    const handleReferenceDelete = useCallback((item) => {\\n        const newReference = references.filter((ref) => ref.id !== item.id);\\n        setReferences(newReference);\\n    }, [references]);\\n\\n    const onMessageSend = useCallback((props) => {\\n        setGenerating(true);\\n        // \\u6A21\\u62DF\\u53D1\\u9001\\u8BF7\\u6C42\\n        setMessages((messages) => [...messages, {\\n            id: `message-${Date.now()}`,\\n            ...chatInputToMessage(props),\\n        }]);\\n        setReferences([]);\\n        setTimeout(() => {\\n            setGenerating(false);\\n        }, 100);\\n        setTimeout(() => {\\n            // \\u6A21\\u62DF\\u63A5\\u53E3\\u8FD4\\u56DE\\n            setMessages((messages) => {\\n                return [...messages, {\\n                    id: `message-${Date.now()}`,\\n                    role: 'assistant',\\n                    name: 'FE',\\n                    content: \\\"\\u8FD9\\u662F\\u4E00\\u6761 mock \\u56DE\\u590D\\u4FE1\\u606F\\\",\\n                }];\\n            });\\n        }, 1000);\\n    }, []);\\n\\n    const onEditMessageSend = useCallback((props) => {\\n        const index = messages.findIndex((message) => message.editing);\\n        const newMessages = [...messages.slice(0, index), {\\n            id: `message-${Date.now()}`,\\n            ...chatInputToMessage(props),\\n        }];\\n        setMessages(newMessages);\\n    }, [messages]);\\n\\n    const handleEditingReferenceDelete = useCallback((item) => {\\n        const newMessages = messages.map((message) => {\\n            if (message.editing) {\\n                message.references = message.references.filter((ref) => ref.id !== item.id);\\n            }\\n            return message;\\n        });\\n        setMessages(newMessages);\\n    }, [messages]);\\n\\n    const messageEditRender = useCallback((props) => {\\n        return (\\n            <AIChatInput \\n                style={editingInputOuterStyle}\\n                generating={false}\\n                references={props.references}\\n                uploadProps={{ ...uploadProps, defaultFileList: props.attachments }}\\n                defaultContent={props.inputContents[0].text}\\n                renderConfigureArea={renderLeftMenu} \\n                // onContentChange={onContentChange}\\n                onMessageSend={onEditMessageSend}\\n                onReferenceDelete={handleEditingReferenceDelete}\\n            />\\n        );\\n    }, [messages, handleEditingReferenceDelete]);\\n\\n    const changeSideBarContent = useCallback((content) => {\\n        setSideBarContent((oldContent) => {\\n            if (!simpleIsEqual(content, oldContent)) {\\n                setSideBarVisible(true);\\n            } else {\\n                setSideBarVisible(v => !v);\\n            }\\n            return content;\\n        });\\n    });\\n\\n    const onAnnotationClick = useCallback((annotations) => {\\n        changeSideBarContent({\\n            type: 'annotation',\\n            value: annotations\\n        });\\n    }, [changeSideBarContent]);\\n\\n    const toggleSideBar = useCallback(() => {\\n        setSideBarVisible(v => !v);\\n    }, []);\\n\\n    const renderSideBarTitle = useCallback((content) => {\\n        const { type, value } = content;\\n        return <div style={{ display: 'flex', alignItems: 'center ', justifyContent: 'space-between', padding: 12, color: 'var(--semi-color-text)' }}>\\n            {type === 'annotation' && <div style={{ fontSize: '16px', lineHeight: '22px', fontWeight: 600 }}>\\u53C2\\u8003\\u8D44\\u6599</div>}\\n            {type === 'resource' && <div style={{ fontSize: '16px', lineHeight: '22px', fontWeight: 600 }}>\\u4EA7\\u7269\\u5217\\u8868</div>}\\n            <Button onClick={toggleSideBar} theme=\\\"borderless\\\" type=\\\"tertiary\\\" icon={<IconClose />} style={{ padding: '0px', width: 24, height: 24 }} />\\n        </div>;\\n    }, [toggleSideBar]);\\n\\n    const renderSideBarBody = useCallback((content) => {\\n        const { type, value = {} } = content;\\n        if (type === 'annotation') {\\n            return <div style={{ display: 'flex', flexDirection: 'column', rowGap: '12px', padding: '12px' }} >\\n                {value.map((item, index) => (<div key={index} style={{ display: 'flex', flexDirection: 'column', rowGap: '8px' }} >\\n                    <span style={{ display: 'flex', alignItems: 'center ', columnGap: 4 }}>\\n                        <img style={{ width: 20, height: 20, borderRadius: '50%' }} src={item.logo}/>\\n                        <span style={{ fontSize: '14px', lineHeight: '20px', fontWeight: 600, color: 'var(--semi-color-text-0)' }}>{item.title}</span>\\n                    </span>\\n                    <Typography.Paragraph ellipsis={{ rows: 3 }} style={{ fontSize: '12px', lineHeight: '16px', color: 'var(--semi-color-text-1)' }} >{item.detail}</Typography.Paragraph>\\n                </div>))}\\n            </div>;\\n        } else if (type === 'resource') {\\n            return <div style={{ display: 'flex', flexDirection: 'column', rowGap: '12px', padding: '12px' }} >\\n                <div style={{ display: 'flex', gap: 12, alignItems: 'center', }}>\\n                    <IconWord style={{ color: 'var(--semi-color-primary)' }} size='extra-large' /> {value.name}\\n                </div>\\n            </div>;\\n        }\\n        return <div>\\n\\n        </div>;\\n    }, []);\\n\\n    const customRender = {\\n        \\\"resource\\\": (item, message) => {\\n            return <div \\n                style={{ \\n                    display: 'flex', \\n                    gap: 8, \\n                    backgroundColor: 'var(--semi-color-fill-0)', \\n                    padding: '12px 16px',\\n                    justifyContent: 'center',\\n                    alignItems: 'center',\\n                    borderRadius: '12px',\\n                    cursor: 'pointer'\\n                }}\\n                onClick={() => {\\n                    changeSideBarContent({\\n                        type: 'resource',\\n                        value: item\\n                    });\\n                }}\\n            >\\n                <IconWord style={{ color: 'var(--semi-color-primary)' }} />\\n                {item.name}\\n            </div>;\\n        },\\n    };\\n\\n    return (\\n        <div style={{ display: 'flex', columnGap: 10 }}>\\n            <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 32px)', overflow: 'hidden', flexGrow: 1 }}>\\n                <AIChatDialogue \\n                    style={dialogueOuterStyle}\\n                    roleConfig={roleConfig}\\n                    showReference={true}\\n                    align=\\\"leftRight\\\"\\n                    mode=\\\"bubble\\\"\\n                    chats={messages}\\n                    onChatsChange={onChatsChange}\\n                    onReferenceClick={onReferenceClick}\\n                    messageEditRender={messageEditRender}\\n                    onAnnotationClick={onAnnotationClick}\\n                    renderDialogueContentItem={customRender}\\n                />\\n                <AIChatInput \\n                    style={inputOuterStyle}\\n                    placeholder={'\\u8F93\\u5165\\u5185\\u5BB9\\u6216\\u8005\\u4E0A\\u4F20\\u5185\\u5BB9'} \\n                    defaultContent={'\\u6211\\u662F\\u4E00\\u540D<input-slot placeholder=\\\"[\\u804C\\u4E1A]\\\">\\u7A0B\\u5E8F\\u5458</input-slot>\\uFF0C\\u5E2E\\u6211\\u5B9E\\u73B0<input-slot placeholder=\\\"[\\u9700\\u6C42\\u63CF\\u8FF0]\\\">Multi Agent \\u573A\\u666F\\u4E0B\\u7684\\u804A\\u5929\\u5E94\\u7528</input-slot>\\u9700\\u6C42'}\\n                    generating={generating}\\n                    references={references}\\n                    uploadProps={uploadProps}\\n                    renderConfigureArea={renderLeftMenu} \\n                    onContentChange={onContentChange}\\n                    onMessageSend={onMessageSend}\\n                    onStopGenerate={() => setGenerating(false)}\\n                    onReferenceDelete={handleReferenceDelete}\\n                />\\n            </div>\\n            {sideBarVisible && <div \\n                style={{ flexShrink: 0, width: 300, height: 'calc(100vh - 32px)', borderRadius: '12px', border: '1px solid var(--semi-color-border)', flexShrink: 0 }}\\n            >\\n                {renderSideBarTitle(sideBarContent)}\\n                {renderSideBarBody(sideBarContent)}\\n            </div>}\\n        </div>\\n    );\\n}\\n\\n\\nconst defaultMessages = [{\\n    id: '1',\\n    role: 'user',\\n    content: '\\u6211\\u60F3\\u5F00\\u53D1\\u4E00\\u4E2A Multi Agent \\u573A\\u666F\\u4E0B\\u7684\\u804A\\u5929\\u5E94\\u7528\\uFF0C\\u4F60\\u80FD\\u5E2E\\u6211\\u8BBE\\u8BA1\\u4E00\\u4E0B\\u5417\\uFF1F',\\n    status: 'completed',\\n}, {\\n    id: '2',\\n    role: 'assistant',\\n    name: 'PM',\\n    content: [{\\n        type: 'message',\\n        content: [{\\n            type: 'input_text',\\n            text: '\\u6536\\u5230\\u3002\\u4E3A\\u4FDD\\u8BC1\\u65B9\\u6848\\u53EF\\u843D\\u5730\\uFF0C\\u6211\\u5148\\u660E\\u786E\\u76EE\\u6807\\u4E0E\\u8303\\u56F4\\uFF1A\\\\n\\\\n- \\u76EE\\u6807\\uFF1A\\u652F\\u6301\\u591A Agent \\u534F\\u540C\\u56DE\\u590D\\uFF0C\\u7528\\u6237\\u53EF\\u9009\\u62E9 Agent \\u6216\\u7531\\u7CFB\\u7EDF\\u81EA\\u52A8\\u5206\\u914D\\\\n- MVP \\u529F\\u80FD\\uFF1A\\\\n  1) \\u57FA\\u7840\\u5BF9\\u8BDD\\uFF08\\u6587\\u672C/\\u56FE\\u7247/\\u6587\\u4EF6\\uFF09\\\\n  2) Agent \\u8EAB\\u4EFD\\u6807\\u8BC6\\u4E0E\\u5934\\u50CF\\\\n  3) \\u6B63\\u5728\\u8F93\\u5165\\u4E0E\\u6D41\\u5F0F\\u8F93\\u51FA\\\\n  4) \\u5F15\\u7528\\u6765\\u6E90\\u4E0E\\u5DE5\\u5177\\u7ED3\\u679C\\u5C55\\u793A\\\\n- \\u7EA6\\u675F\\uFF1A\\u5148\\u505A\\u5355\\u4F1A\\u8BDD\\uFF0C\\u4E0D\\u505A\\u4E91\\u7AEF\\u6301\\u4E45\\u5316\\uFF1B\\u4F18\\u5148\\u79FB\\u52A8\\u7AEF\\u9002\\u914D\\\\n\\\\n\\u63A5\\u4E0B\\u6765\\u6211\\u4F1A\\u6574\\u7406 PRD \\u8981\\u70B9\\u5E76\\u540C\\u6B65\\u7ED9\\u8BBE\\u8BA1\\u4E0E\\u524D\\u7AEF\\u3002',\\n            annotations: [\\n                {\\n                    title: 'Semi Design',\\n                    url: 'https://semi.design/zh-CN/start/getting-started',\\n                    detail: 'Semi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u548CMED\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u56E2\\u961F\\u8BBE\\u8BA1\\u3001\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u5168\\u9762\\u3001\\u6613\\u7528\\u3001\\u4F18\\u8D28\\u7684\\u73B0\\u4EE3\\u5E94\\u7528UI\\u89E3\\u51B3\\u65B9\\u6848\\uFF0CSemi Design\\u4ECE\\u5B57\\u8282\\u8DF3\\u52A8\\u5404\\u4E1A\\u52A1\\u7EBF\\u7684\\u590D\\u6742\\u573A\\u666F\\u4E2D\\u63D0\\u70BC\\u800C\\u6765\\uFF0C\\u76EE\\u524D\\u5DF2\\u7ECF\\u652F\\u6491\\u4E86\\u8FD1\\u5343\\u4E2A\\u5E73\\u53F0\\u4EA7\\u54C1\\uFF0C\\u670D\\u52A1\\u4E86\\u5185\\u5916\\u90E8\\u8D85\\u8FC710\\u4E07\\u7528\\u6237',\\n                    logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                },\\n                {\\n                    title: 'Semi DSM',\\n                    url: 'https://semi.design/zh-CN/start/getting-started',\\n                    detail: 'Semi DSM \\u652F\\u6301\\u5168\\u5C40\\u3001\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u6837\\u5F0F\\u5B9A\\u5236\\uFF0C\\u5E76\\u5728 Figma \\u548C\\u7EBF\\u4E0A\\u4EE3\\u7801\\u4E4B\\u95F4\\u4FDD\\u6301\\u540C\\u6B65\\u3002\\u4F7F\\u7528 DSM\\uFF0C\\u5C06 Semi Design \\u9002\\u914D\\u4E3A Any Design',\\n                    logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                },\\n                {\\n                    title: 'Semi D2C',\\n                    url: 'https://semi.design/zh-CN/start/getting-started',\\n                    detail: 'Semi D2C \\u63D0\\u4F9B\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801\\uFF1A\\u652F\\u6301\\u4E00\\u952E\\u8BC6\\u522B Figma \\u9875\\u9762\\u4E2D\\u56FE\\u5C42\\u5E03\\u5C40 + \\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7EC4\\u4EF6\\uFF0C\\u50CF\\u7D20\\u7EA7\\u8FD8\\u539F\\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u8F6C\\u8BD1\\u4E3A React JSX \\u548C CSS \\u4EE3\\u7801\\u3002\\u6B64\\u5916\\u8FD8\\u63D0\\u4F9B\\u4E86\\u4E30\\u5BCC\\u7684\\u6269\\u5C55\\u80FD\\u529B\\uFF0C\\u57FA\\u4E8E\\u81EA\\u5B9A\\u4E49\\u63D2\\u4EF6\\u7CFB\\u7EDF\\u5FEB\\u901F\\u6253\\u9020\\u56E2\\u961F\\u4E13\\u5C5E\\u7684\\u8BBE\\u8BA1\\u7814\\u53D1\\u534F\\u4F5C\\u5DE5\\u5177\\u3002',\\n                    logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'\\n                }\\n            ],\\n        }],\\n    }],\\n}, {\\n    id: '3',\\n    role: 'assistant',\\n    name: 'PM',\\n    content: [{\\n        type: 'message',\\n        content: [{\\n            type: 'input_text',\\n            text: '\\u751F\\u6210\\u7684PRD\\u5982\\u4E0B\\uFF0C\\u8BBE\\u8BA1\\u5E08\\u4F1A\\u5148\\u6839\\u636E\\u6B64\\u6458\\u8981\\u51FA\\u4FE1\\u606F\\u67B6\\u6784\\u4E0E\\u5173\\u952E\\u9875\\u9762',\\n        }, {\\n            type: 'resource',\\n            name: 'PRD.doc',\\n            size: '100KB',\\n        }]\\n    }],\\n}, {\\n    id: '4',\\n    role: 'assistant',\\n    name: 'UI',\\n    content: [{\\n        id: \\\"rs_02175871288540800000000000000000000ffffac1598778c9aa5\\\",\\n        type: \\\"reasoning\\\",\\n        summary: [\\n            {\\n                \\\"type\\\": \\\"summary_text\\\",\\n                \\\"text\\\": \\\"\\\\n\\u6839\\u636E\\u4EA7\\u54C1\\u7ECF\\u7406\\u7ED9\\u7684 PRD \\u7ED8\\u5236\\u5173\\u952E\\u9875\\u9762\\uFF0C\\u6211\\u9700\\u8981....\\\"\\n            }\\n        ],\\n        status: \\\"completed\\\"\\n    }, {\\n        type: 'function_call',\\n        name: 'paint_key_pages',\\n        arguments: \\\"{\\\\\\\"file\\\\\\\":\\\\\\\"PRD\\\\\\\"}\\\",\\n        status: 'completed',\\n    }, {\\n        type: 'message',\\n        content: [{\\n            \\\"type\\\": \\\"output_text\\\",\\n            \\\"text\\\": `\\u8BBE\\u8BA1\\u521D\\u7A3F\\u5982\\u4E0B\\uFF1A\\\\n\\\\n- \\u4FE1\\u606F\\u67B6\\u6784\\uFF1A\\u5BF9\\u8BDD\\u9875\\uFF08\\u5386\\u53F2\\u5217\\u8868 | \\u6D88\\u606F\\u6D41 | \\u5DE5\\u5177\\u5361\\u7247\\u533A\\uFF09\\\\n- \\u89C6\\u89C9\\uFF1A\\u5DE6\\u4FA7\\u5C55\\u793A Agent \\u5934\\u50CF\\u4E0E\\u540D\\u79F0\\u6807\\u7B7E\\uFF0C\\u8272\\u5757\\u533A\\u5206\\u89D2\\u8272\\\\n- \\u4EA4\\u4E92\\uFF1A\\\\n  - \\u8F93\\u5165\\u533A\\u652F\\u6301 @Agent \\u5FEB\\u901F\\u5207\\u6362\\u4E0E\\u5EFA\\u8BAE\\u63D0\\u793A\\\\n  - \\u6D41\\u5F0F\\u8F93\\u51FA\\u65F6\\u5C55\\u793A\\u6253\\u5B57\\u6C14\\u6CE1\\u4E0E\\u8FDB\\u5EA6\\u5360\\u4F4D\\\\n  - \\u5DE5\\u5177\\u7ED3\\u679C\\u4EE5\\u5361\\u7247/\\u6B65\\u9AA4\\u6761\\u5F62\\u5F0F\\u63D2\\u5165\\uFF0C\\u53EF\\u5C55\\u5F00\\u8BE6\\u60C5\\u4E0E\\u590D\\u5236\\\\n\\\\n\\u6211\\u5148\\u51FA\\u4F4E\\u4FDD\\u771F\\u7EBF\\u6846\\uFF0C\\u7A0D\\u540E\\u8865\\u9AD8\\u4FDD\\u771F\\u4E0E\\u52A8\\u6548\\u8BF4\\u660E\\u3002`,\\n        }],\\n        status: \\\"completed\\\"\\n    }],\\n    status: 'completed',\\n}, {\\n    id: '5',\\n    role: 'assistant',\\n    name: 'FE',\\n    content: `\\u6280\\u672F\\u65B9\\u6848\\u5EFA\\u8BAE\\uFF1A\\\\n\\\\n- \\u6280\\u672F\\u6808\\uFF1AReact + Semi UI\\uFF0C\\u540E\\u7AEF\\u91C7\\u7528 WebSocket \\u6216 SSE \\u652F\\u6301\\u6D41\\u5F0F\\u54CD\\u5E94\\\\n- \\u6570\\u636E\\u6A21\\u578B\\uFF1A\\u6D88\\u606F\\u5305\\u542B id\\u3001role\\u3001name\\u3001content\\u3001status\\u3001references \\u7B49\\u5B57\\u6BB5\\\\n- \\u7EC4\\u4EF6\\u62C6\\u5206\\uFF1AAIChatInput + AIChatDialogue\\uFF1B\\u5185\\u5BB9\\u91C7\\u7528 Markdown \\u6E32\\u67D3\\uFF0C\\u652F\\u6301\\u56FE\\u7247\\u4E0E\\u6587\\u4EF6\\u70B9\\u51FB\\\\n- \\u6027\\u80FD\\uFF1A\\u865A\\u62DF\\u5217\\u8868\\u4E0E\\u6EDA\\u52A8\\u7F6E\\u5E95\\uFF1B\\u957F\\u6587\\u672C\\u5206\\u5757\\u6E32\\u67D3\\uFF1B\\u56FE\\u7247\\u61D2\\u52A0\\u8F7D\\\\n- \\u53EF\\u89C2\\u6D4B\\u6027\\uFF1A\\u57CB\\u70B9\\u6D88\\u606F\\u5EF6\\u8FDF\\u3001\\u51FA\\u9519\\u7387\\u3001\\u5DE5\\u5177\\u8C03\\u7528\\u8017\\u65F6\\\\n\\\\n\\u82E5\\u786E\\u8BA4\\uFF0C\\u6211\\u53EF\\u5148\\u642D\\u5EFA\\u9875\\u9762\\u9AA8\\u67B6\\u5E76\\u63A5\\u5165 mock \\u6570\\u636E\\u8FDB\\u884C\\u8054\\u8C03\\u3002`,\\n}];\\n\\nconst roleConfig = {\\n    user: {\\n        name: 'User',\\n        avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/img/user.png'\\n    },\\n    assistant: new Map([\\n        ['PM', {\\n            name: '\\u4EA7\\u54C1\\u7ECF\\u7406',\\n            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/PM.png'\\n        }],\\n        ['UI', {\\n            name: '\\u8BBE\\u8BA1\\u5E08',\\n            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/UI.png'\\n        }],\\n        ['FE', {\\n            name: '\\u524D\\u7AEF\\u5F00\\u53D1',\\n            avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/22606991eh7uhfups/FE.png'\\n        }],\\n    ]),\\n};\\n\\nconst uploadProps = {\\n    action: \\\"https://api.semi.design/upload\\\"\\n};\\n\\nconst modelOptions = [\\n    {\\n        value: 'GPT-5',\\n        label: 'GPT-5',\\n        type: 'gpt',\\n    },\\n    {\\n        value: 'GPT-4o',\\n        label: 'GPT-4o',\\n        type: 'gpt',\\n    },\\n    {\\n        value: 'Claude 3.5 Sonnet',\\n        label: 'Claude 3.5 Sonnet',\\n        type: 'claude',\\n    },\\n];\\n\\nconst mcpOptions = [\\n    {\\n        icon: <IconFeishuLogo />,\\n        label: \\\"\\u98DE\\u4E66\\u6587\\u6863\\\",\\n        value: \\\"feishu\\\",\\n    },\\n    {\\n        icon: <IconGit />,\\n        label: \\\"Github Mcp\\\",\\n        value: \\\"github\\\",\\n    },\\n    {\\n        icon: <IconFigma />,\\n        label: \\\"IconFigma Mcp\\\",\\n        value: \\\"IconFigma\\\",\\n    }\\n];\\n\\nconst radioButtonProps = [\\n    { label: <IconTemplateStroked />, value: 'fast' },\\n    { label: <IconSearch />, value: 'think' }\\n];\\n\\nrender(AIChatInputWithDialogue);\\n\")), mdx(\"h3\", null, \"FAQ\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Chat \\u7EC4\\u4EF6\\u548C AI Chat \\u7CFB\\u5217\\u7EC4\\u4EF6\\u5E94\\u8BE5\\u5982\\u4F55\\u9009\\u578B\\uFF1F\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u573A\\u666F\\u6BD4\\u8F83\\u7B80\\u5355\\uFF0C\\u4EC5\\u9700\\u8981\\u666E\\u901A\\u6587\\u5B57\\u5BF9\\u8BDD\\u548C\\u7B80\\u5355\\u6587\\u4EF6\\u56FE\\u7247\\u5C55\\u793A\\uFF0C\\u63A8\\u8350 Chat \\u7EC4\\u4EF6\\u3002\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/chat\"\n  }, \"Chat\"), \" \\u7EC4\\u4EF6\\u9ED8\\u8BA4\\u96C6\\u6210 input \\u8F93\\u5165\\u548C\\u6D88\\u606F\\u5C55\\u793A\\u90E8\\u5206\\uFF0C\\u4F18\\u52BF\\u662F\\u7406\\u89E3\\u7B80\\u5355\\uFF0C\\u80FD\\u591F\\u5FEB\\u901F\\u4E0A\\u624B\\uFF1B\\u7F3A\\u70B9\\u662F\\u590D\\u6742\\u7684\\u8F93\\u5165\\u6846\\u6216\\u8005\\u6D88\\u606F\\u5C55\\u793A\\u9700\\u6C42\\u5B9A\\u5236\\u76F8\\u5BF9\\u56F0\\u96BE\\uFF0C\\u5DE5\\u4F5C\\u91CF\\u5927\\u3002\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u573A\\u666F\\u76F8\\u5BF9\\u590D\\u6742\\uFF0C\\u63A8\\u8350\\u5C06 AIChatInput \\u548C AIChatDialogue \\u7EC4\\u4EF6\\u642D\\u914D\\u4F7F\\u7528\\uFF0C\\u4F18\\u52BF\\u5982\\u4E0B\\uFF1A\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput\"\n  }, \"AIChatInput\"), \" \\u652F\\u6301\\u66F4\\u590D\\u6742\\u7684\\u6837\\u5F0F\\u5B9A\\u5236\\u3002\", mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u975E\\u5E38\\u65B9\\u4FBF\\u5730\\u5B9A\\u5236\\u5DE6\\u4E0B\\u89D2\\u7684\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E9%85%8D%E7%BD%AE%E5%8C%BA%E5%9F%9F\"\n  }, \"\\u914D\\u7F6E\\u533A\\u57DF\"), \"\\u548C\\u53F3\\u4E0B\\u89D2\\u7684\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E6%93%8D%E4%BD%9C%E5%8C%BA%E5%9F%9F\"\n  }, \"\\u64CD\\u4F5C\\u533A\\u57DF\"), \"\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D0\\u4F9B\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E5%AF%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%8C%BA\"\n  }, \"\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u533A\"), \"\\u5C55\\u793A\\u8F93\\u5165\\u6A21\\u7248\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u9ED8\\u8BA4\\u652F\\u6301\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E5%BC%95%E7%94%A8\"\n  }, \"\\u5F15\\u7528\"), \"\\u5C55\\u793A\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u652F\\u6301\\u70ED\\u952E\\u5524\\u8D77\\u7684\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E6%8A%80%E8%83%BD%E5%8F%8A%E6%A8%A1%E7%89%88\"\n  }, \"\\u6280\\u80FD\\u6A21\\u7248\"), \"\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%89%A9%E5%B1%95\"\n  }, \" Input \\u6269\\u5C55\"), \"\\u548C\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatInput#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93%E9%A1%B6%E9%83%A8%E5%8C%BA%E5%9F%9F\"\n  }, \" TopSlot\"), \"\\uFF0C\\u590D\\u6742\\u5C55\\u793A\\u4E5F\\u80FD\\u8F7B\\u677E\\u5B9E\\u73B0\\u3002\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue\"\n  }, \"AIChatDialogue\"), \" \\u6D88\\u606F\\u5C55\\u793A\\u7684\\u7075\\u6D3B\\u6027\\u66F4\\u9AD8\\u3002\", mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7EC4\\u4EF6\\u9ED8\\u8BA4\\u652F\\u6301 OpenAI \\u7684 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://platform.openai.com/docs/api-reference/responses/create\"\n  }, \"Response\"), \" / \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://platform.openai.com/docs/api-reference/chat/create\"\n  }, \"Chat Completion\"), \" Object \\u683C\\u5F0F\\u6807\\u51C6\\uFF0C\\u8C03\\u7528\", mdx(\"a\", {\n    parentName: \"li\",\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  }, \"\\u5185\\u90E8\\u6D88\\u606F\\u8F6C\\u6362\\u51FD\\u6570\"), \"\\u53EF\\u8F7B\\u677E\\u8FDB\\u884C\\u5C06 OpenAI \\u8FD4\\u56DE\\u7684\\u7ED3\\u679C\\u8F6C\\u6362\\u4E3A\\u7EC4\\u4EF6\\u9700\\u8981\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u63D0\\u4F9B\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9\"\n  }, \"\\u6839\\u636E\\u6D88\\u606F\\u7C7B\\u578B\\u7684\\u5B9A\\u5236\\u5C55\\u793A\"), \"\\u7684 API\\uFF0C\\u65B9\\u4FBF\\u5FEB\\u901F\\u5B9E\\u73B0\\u6D88\\u606F\\u5C55\\u793A\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u9ED8\\u8BA4\\u652F\\u6301\\u6D88\\u606F\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue#%E5%BC%95%E7%94%A8\"\n  }, \"\\u5F15\\u7528\"), \"\\u548C\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/ai/aiChatDialogue#%E9%80%89%E6%8B%A9\"\n  }, \"\\u9009\\u62E9\"), \"\\u64CD\\u4F5C\\u3002\")))))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ai/aiComponent","next":{"fields":{"slug":"en-US/ai/aiChatInput"},"id":"1d8feec8-f2a8-53d3-8d6d-3b2512ada8e3","frontmatter":{"title":"AIChatInput","localeCode":"en-US","icon":"doc-aiInput","showNew":true}},"previous":{"fields":{"slug":"en-US/ai/aiComponent"},"id":"f6806420-f684-521f-a22d-94cad89ce456","frontmatter":{"title":"AI Ability Introduction","localeCode":"en-US","icon":"doc-aiComponent","showNew":true}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}