{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ai/aiChatInput","result":{"data":{"current":{"frontmatter":{"title":"AIChatInput 聊天输入框","order":101,"brief":"用于 AI 聊天场景下的输入框","icon":"doc-aiInput"},"fields":{"type":"ai"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#消息发送","title":"消息发送"},{"url":"#富文本输入区","title":"富文本输入区"},{"url":"#引用","title":"引用"},{"url":"#配置区域","title":"配置区域"},{"url":"#操作区域","title":"操作区域"},{"url":"#自定义上传按钮","title":"自定义上传按钮"},{"url":"#底部按钮形状","title":"底部按钮形状"},{"url":"#建议","title":"建议"},{"url":"#技能及模版","title":"技能及模版"},{"url":"#自定义渲染顶部区域","title":"自定义渲染顶部区域"},{"url":"#自定义扩展","title":"自定义扩展"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#aichatinput","title":"AIChatInput"},{"url":"#configureselect","title":"Configure.Select"},{"url":"#configurebutton","title":"Configure.Button"},{"url":"#configureradiobutton","title":"Configure.RadioButton"},{"url":"#configuremcp","title":"Configure.Mcp"}]},{"url":"#methods","title":"Methods"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 101,\n  \"category\": \"Ai\",\n  \"title\": \"AIChatInput 聊天输入框\",\n  \"icon\": \"doc-aiInput\",\n  \"width\": \"60%\",\n  \"brief\": \"用于 AI 聊天场景下的输入框\",\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 ApiType = makeShortcode(\"ApiType\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 AI \\u804A\\u5929\\u573A\\u666F\\u4E0B\\uFF0C\\u7528\\u6237\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \"\\u5B9E\\u73B0\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u3001\\u4E0A\\u4F20\\u3001\\u5F15\\u7528\\u3001\\u5EFA\\u8BAE\\u3001\\u6A21\\u7248\\u3001\\u529F\\u80FD\\u914D\\u7F6E\\u3001\\u53CA\\u4E30\\u5BCC\\u81EA\\u5B9A\\u4E49\\u5C55\\u793A\\u7B49\\u9700\\u6C42\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \" \\u7684\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u662F\\u57FA\\u4E8E \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tiptap.dev/docs/editor/getting-started/overview\"\n  }, \"tiptap\"), \" \\u5B9E\\u73B0\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tiptap\"), \" \\u662F\\u4E00\\u6B3E\\u73B0\\u4EE3\\u7684\\u5BCC\\u6587\\u672C\\u7F16\\u8F91\\u5668\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u652F\\u6301 React\\u3001Vue \\u524D\\u7AEF\\u6846\\u67B6\\uFF0C\\u5177\\u5907\\u6781\\u5F3A\\u7684\\u53EF\\u5B9A\\u5236\\u6027\\u548C\\u6269\\u5C55\\u6027\\u3002\\u5176\\u7EC4\\u4EF6\\u5316\\u80FD\\u529B\\u4F18\\u79C0\\uFF0C\\u6027\\u80FD\\u4F18\\u826F\\uFF0C\\u5185\\u7F6E\\u591A\\u79CD\\u5E38\\u7528\\u62D3\\u5C55\\uFF0C\\u5E76\\u652F\\u6301\\u7528\\u6237\\u81EA\\u5B9A\\u4E49\\u8282\\u70B9\\u3001\\u547D\\u4EE4\\u3001\\u63D2\\u4EF6\\u4E0E\\u83DC\\u5355\\uFF0C\\u4F7F\\u590D\\u6742 AI \\u573A\\u666F\\u4E0B\\u7684\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u80FD\\u529B\\u80FD\\u591F\\u7075\\u6D3B\\u9002\\u914D\\u548C\\u6269\\u5C55\\u3002Semi \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \" \\u7EC4\\u4EF6\\u5BF9 tiptap \\u8FDB\\u884C\\u4E86\\u5C01\\u88C5\\uFF0C\\u5F00\\u53D1\\u8005\\u53EF\\u5F00\\u7BB1\\u5373\\u7528\\u6216\\u6309\\u9700\\u6309\\u4E1A\\u52A1\\u6269\\u5C55\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { AIChatInput } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u6587\\u672C\\u8F93\\u5165\\u4EE5\\u53CA\\u6587\\u4EF6\\u4E0A\\u4F20\\uFF0C\\u4F7F\\u7528\\u65F6\\u53EF\\u6309\\u9700\\u914D\\u7F6E\\u4EE5\\u4E0B\\u53C2\\u6570\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"uploadProps\"), \" \\u914D\\u7F6E\\u6587\\u4EF6\\u4E0A\\u4F20\\u76F8\\u5173\\u7684\\u53C2\\u6570\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/upload#API\"\n  }, \"UploadProps\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onUploadChange\"), \" \\u83B7\\u53D6\\u6587\\u4EF6\\u4E0A\\u4F20\\u53D8\\u5316\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5220\\u9664\\u4E0A\\u4F20\\u6587\\u4EF6\\u65F6\\uFF0C\\u4F1A\\u89E6\\u53D1 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"uploadProps.onRemove\"), \"\\uFF0C\\u5E76\\u9075\\u5FAA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"uploadProps.beforeRemove\"), \"\\uFF08\\u652F\\u6301 Promise\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"placeholder\"), \" \\u8F93\\u5165\\u6846\\u7684\\u5360\\u4F4D\\u7B26\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultContent\"), \" \\u8F93\\u5165\\u6846\\u7684\\u9ED8\\u8BA4\\u5185\\u5BB9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onContentChange\"), \" \\u8F93\\u5165\\u6846\\u5185\\u5BB9\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u53C2\\u6570\\u4E3A\\u5F53\\u524D\\u8F93\\u5165\\u6846\\u7684\\u5185\\u5BB9\")), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\nfunction Basic() {\\n    const onContentChange = useCallback((content) => {\\n        console.log('onContentChange', content);\\n    }, []);\\n\\n    const onUploadChange = useCallback((fileList) => {\\n        console.log('onUploadChange', fileList);\\n    }, []);\\n  \\n    return (\\n        <AIChatInput\\n            placeholder={'\\u8F93\\u5165\\u5185\\u5BB9\\u6216\\u8005\\u4E0A\\u4F20\\u5185\\u5BB9...'} \\n            uploadProps={uploadProps}\\n            onContentChange={onContentChange}\\n            onUploadChange={onUploadChange}\\n            style={outerStyle} \\n        />\\n    );\\n};\\n\\nrender(<Basic />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6D88\\u606F\\u53D1\\u9001\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u8F93\\u5165\\u6846\\u4E2D\\u6709\\u5185\\u5BB9\\uFF08\\u5305\\u62EC\\u8F93\\u5165\\u6587\\u672C\\uFF0C\\u4E0A\\u4F20\\u5185\\u5BB9\\uFF0C\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/plus/aiChatInput#%E5%BC%95%E7%94%A8\"\n  }, \"\\u5F15\\u7528\\u5185\\u5BB9\"), \"\\uFF09\\uFF0C\\u5C06\\u5141\\u8BB8\\u53D1\\u9001\\u6D88\\u606F\\u3002\\u70B9\\u51FB\\u6D88\\u606F\\u53D1\\u9001\\u6309\\u94AE\\uFF0C\\u4F1A\\u89E6\\u53D1 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMessageSend\"), \" \\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u53C2\\u6570\\u4E3A\\u5F53\\u524D\\u8F93\\u5165\\u6846\\u7684\\u5185\\u5BB9\\uFF0C\\u5305\\u62EC\\u8F93\\u5165\\u533A\\u57DF\\u7684\\u6587\\u672C\\uFF0C\\u5F15\\u7528\\u5185\\u5BB9\\uFF0C\\u4E0A\\u4F20\\u6587\\u4EF6\\uFF0C\\u914D\\u7F6E\\u533A\\u57DF\\u5185\\u5BB9\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMessageSend\"), \" \\u4E2D\\u6839\\u636E\\u5224\\u65AD\\u662F\\u5426\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"generating\"), \" \\u8868\\u793A\\u6D88\\u606F\\u6B63\\u5728\\u5904\\u7406\\u4E2D\\uFF0C\\u5982\\u679C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"generating\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"\\uFF0C\\u5219 AIChatInput \\u4F1A\\u5728\\u53D1\\u9001\\u6309\\u94AE\\u4F4D\\u7F6E\\u663E\\u793A\\u505C\\u6B62\\u751F\\u6210\\u6309\\u94AE\\uFF0C\\u5E76\\u6E05\\u7A7A\\u8F93\\u5165\\u533A\\u7684\\u6D88\\u606F\\uFF0C\\u4EE5\\u53CA\\u4E0A\\u4F20\\u6587\\u4EF6\\uFF0C\\u53E6\\u5916\\uFF0C\\u5F15\\u7528\\u5185\\u5BB9\\u9700\\u8981\\u7528\\u6237\\u81EA\\u884C\\u6E05\\u9664\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u70B9\\u51FB\\u505C\\u6B62\\u751F\\u6210\\u6309\\u94AE\\uFF0C\\u4F1A\\u89E6\\u53D1 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onStopGenerate\"), \" \\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u7528\\u6237\\u53EF\\u5728\\u8BE5\\u56DE\\u8C03\\u51FD\\u6570\\u4E2D\\u5904\\u7406\\u505C\\u6B62\\u751F\\u6210\\u7684\\u903B\\u8F91\\uFF0C \\u5982\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"generating\"), \" \\u8BBE\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \"\\u3002\"), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { \\n    action: \\\"https://api.semi.design/upload\\\",\\n    defaultFileList: [{\\n        uid: '1',\\n        name: 'dy.jpeg',\\n        status: 'success',\\n        size: '130kb',\\n        url:\\n            'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n    },\\n    {\\n        uid: '5',\\n        name: 'resso.jpeg',\\n        percent: 50,\\n        size: '222kb',\\n        url:\\n            'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n    }],\\n};\\nconst outerStyle = { margin: 12 };\\n\\nconst reference = [\\n    {\\n        id: '1',\\n        type: 'text',\\n        content: '\\u6D4B\\u8BD5\\u6587\\u672C\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57,\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57',\\n    }\\n];\\n\\nfunction SendMessageAndStopGenerate() {\\n    const [references, setReferences] = useState(reference);\\n    const [generating, setGenerating] = useState(false);\\n    const onContentChange = useCallback((content) => {\\n        console.log('onContentChange', content);\\n    }, []);\\n\\n    const onUploadChange = useCallback((fileList) => {\\n        console.log('onUploadChange', fileList);\\n    }, []);\\n\\n    const toggleGenerate = useCallback((props) => {\\n        setGenerating(value => !value);\\n    }, []);\\n\\n    const onMessageSend = useCallback((content) => {\\n        toggleGenerate();\\n        setReferences([]);\\n    }, []);\\n\\n     \\n    const handleReferenceDelete = useCallback((item) => {\\n        setReferences((references) => {\\n            const newReference = references.filter((ref) => ref.id !== item.id);\\n            return newReference;\\n        });\\n    }, []);\\n    \\n    return (\\n        <AIChatInput\\n            defaultContent={\\\"\\u70B9\\u51FB\\u53D1\\u9001\\u6309\\u94AE\\uFF0C\\u89C2\\u5BDF\\u4E0A\\u4F20\\u5185\\u5BB9\\u3001\\u5F15\\u7528\\u5185\\u5BB9\\u3001\\u8F93\\u5165\\u6846\\u5185\\u5BB9\\u53D8\\u5316\\\"}\\n            generating={generating}\\n            uploadProps={uploadProps}\\n            onContentChange={onContentChange}\\n            onUploadChange={onUploadChange}\\n            style={outerStyle}\\n            onMessageSend={onMessageSend}\\n            onStopGenerate={toggleGenerate}\\n            onReferenceDelete={handleReferenceDelete}\\n            references={references}\\n        />\\n    );\\n};\\n\\nrender(<SendMessageAndStopGenerate />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u533A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"AIChatInput \\u4F7F\\u7528 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tiptap.dev/docs/editor/getting-started/overview\"\n  }, \"tiptap\"), \" \\u4F5C\\u4E3A\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u6846\\u7684\\u7F16\\u8F91\\u5668\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u5728\\u8F93\\u5165\\u6846\\u4E2D\\u8F93\\u5165\\u6587\\u672C\\uFF0C\\u4F7F\\u7528 AIChatInput \\u5185\\u7F6E\\u7684 extensions\\uFF08\\u5305\\u62EC \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input-slot\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"select-slot\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"skill-slot\"), \"\\uFF09\\u3002\\u7528\\u6237\\u4E5F\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49 extensions \\u6765\\u6269\\u5C55\\u7F16\\u8F91\\u5668\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"input-slot\"), \" \\u652F\\u6301\\u7528\\u6237\\u8F93\\u5165\\u6587\\u672C\\uFF0C\\u5E76\\u652F\\u6301 placeholder \\u5360\\u4F4D\\u7B26\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"select-slot\"), \" \\u652F\\u6301\\u7528\\u6237\\u8FDB\\u884C\\u7B80\\u5355\\u7684\\u9009\\u62E9\\uFF0C\\u9009\\u9879\\u4EC5\\u652F\\u6301 string \\u7C7B\\u578B\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"skill-slot\"), \" \\u662F\\u7528\\u4E8E\\u6280\\u80FD\\u5C55\\u793A\\u7684\\u5757\\uFF0C\\u65B9\\u4FBF\\u7528\\u6237\\u7406\\u89E3\\u5F53\\u524D\\u8F93\\u5165\\u6846\\u4E2D\\u7684\\u6280\\u80FD\\u3002\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u65B9\\u6CD5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"setContent\"), \" \\u6765\\u8BBE\\u7F6E\\u8F93\\u5165\\u6846\\u7684\\u5185\\u5BB9\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"focusEditor\"), \" \\u65B9\\u6CD5\\u53EF\\u4EE5\\u5C06\\u8F93\\u5165\\u6846\\u7684\\u7126\\u70B9\\u8BBE\\u7F6E\\u5230\\u7F16\\u8F91\\u5668\\u4E2D\\u3002\"), 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, { useRef, useCallback } from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst temp = {\\n    'input-slot': '\\u6211\\u662F\\u4E00\\u4E2A<input-slot placeholder=\\\"[\\u804C\\u4E1A]\\\">\\u7A0B\\u5E8F\\u5458</input-slot>',\\n    'select-slot': `\\u6211\\u662F<select-slot value=\\\"\\u524D\\u7AEF\\u5F00\\u53D1\\\" options='[\\\"\\u8BBE\\u8BA1\\\",\\\"\\u524D\\u7AEF\\u5F00\\u53D1\\\",\\\"\\u540E\\u7AEF\\u5F00\\u53D1\\\"]'></select-slot>\\uFF0C\\u5E2E\\u6211\\u5B8C\\u6210...`,\\n    'skill-slot': `<skill-slot data-label=\\\"AI Coding\\\" data-value=\\\"AI Coding\\\" data-template=false></skill-slot> \\u5E2E\\u6211\\u5B8C\\u6210...`,\\n};\\n\\nfunction RichTextExample() {\\n    const [activeIndex, setActiveIndex] = useState(0);\\n    const ref = useRef();\\n\\n    const setTemplate = useCallback((event) => {\\n        const index = Number(event.target.dataset.index);\\n        setActiveIndex(index);\\n        const content = Object.values(temp)[index];\\n        if (ref.current) {\\n            ref.current.setContent(content);\\n            ref.current.focusEditor();\\n        }\\n    }, [ref]);\\n\\n    return (<>\\n        <div className=\\\"aiChatInput-radio\\\">\\n            {Object.keys(temp).map((item, index) => {\\n                return <div \\n                    className={`aiChatInput-radio-item ${index === activeIndex ? 'aiChatInput-radio-item-selected' : ''}` }\\n                    key={index} \\n                    data-index={index} \\n                    onClick={setTemplate}\\n                >{item}</div>;\\n            })}\\n        </div>\\n        <AIChatInput\\n            ref={ref}\\n            defaultContent={temp['input-slot']}\\n            placeholder={'\\u8F93\\u5165\\u5185\\u5BB9\\u6216\\u8005\\u4E0A\\u4F20\\u5185\\u5BB9'} \\n            uploadProps={uploadProps}\\n            style={outerStyle} \\n        />\\n    </>);\\n};\\n\\nrender(<RichTextExample />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5F15\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"references\"), \" \\u4F20\\u5165\\u5F15\\u7528\\u5185\\u5BB9\\uFF0C\\u5F15\\u7528\\u5185\\u5BB9\\u4F1A\\u5C55\\u793A\\u5728\\u8F93\\u5165\\u6846\\u7684\\u9876\\u90E8\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"renderReference\"), \" \\u81EA\\u5B9A\\u4E49\\u5355\\u4E2A\\u5F15\\u7528\\u5185\\u5BB9\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onReferenceDelete\"), \" \\u5904\\u7406\\u5F15\\u7528\\u5185\\u5BB9\\u7684\\u5220\\u9664\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onReferenceClick\"), \" \\u5904\\u7406\\u5F15\\u7528\\u5185\\u5BB9\\u7684\\u70B9\\u51FB\\u3002\")), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst referenceTemp = [\\n    {\\n        id: '1',\\n        type: 'text',\\n        content: '\\u6D4B\\u8BD5\\u6587\\u672C\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57,\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57\\uFF0C\\u8FD9\\u91CC\\u662F\\u4E00\\u6BB5\\u5F88\\u957F\\u7684\\u6587\\u5B57',\\n    },\\n    {\\n        id: '2',\\n        name: '\\u98DE\\u4E66\\u6587\\u6863.docx',\\n    },\\n    {\\n        id: '3',\\n        name: '\\u98DE\\u4E66\\u6587\\u6863.pdf',\\n    },\\n    {\\n        id: '4',\\n        name: 'Music.mp4',\\n    },\\n    {\\n        id: '5',\\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: '6',\\n        name: 'code.json',\\n    }\\n];\\n\\nfunction Reference() {\\n    const [references, setReferences] = useState(referenceTemp);\\n    const handleReferenceDelete = useCallback((item) => {\\n        const newReference = references.filter((ref) => ref.id !== item.id);\\n        setReferences(newReference);\\n    }, [references]);\\n\\n    const handleReferenceClick = useCallback((item) => {\\n        console.log('\\u70B9\\u51FB\\u4E86\\u5F15\\u7528', item);\\n    }, []);\\n    \\n    return (\\n        <AIChatInput\\n            placeholder={'\\u7528\\u4E8E\\u67E5\\u770B\\u5F15\\u7528\\u5185\\u5BB9\\u7684\\u7528\\u4F8B'} \\n            onReferenceDelete={handleReferenceDelete}\\n            onReferenceClick={handleReferenceClick}\\n            references={references} \\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n        />\\n    );\\n};\\n\\nrender(<Reference />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u7F6E\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u914D\\u7F6E\\u533A\\u57DF\\u8BBE\\u7F6E\\u4F7F\\u7528\\u6A21\\u578B\\u53C2\\u6570\\u3001\\u8054\\u7F51\\u641C\\u7D22\\u3001\\u6DF1\\u5EA6\\u601D\\u8003\\u7B49\\u914D\\u7F6E\\u9879\\uFF0C\\u5C55\\u793A\\u6216\\u8005\\u67E5\\u770B MCP \\u5DE5\\u5177\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderConfigureArea\"), \" API \\u81EA\\u5B9A\\u4E49\\u8F93\\u5165\\u6846\\u7684\\u64CD\\u4F5C\\u6309\\u94AE\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Configure\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Select\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Mcp\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"RadioButton\"), \" \\u7B49\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u914D\\u7F6E\\u9879\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Configure\"), \" \\u5C06\\u7BA1\\u7406\\u914D\\u7F6E\\u9879\\u7684\\u72B6\\u6001\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onConfigureChange\"), \" API \\u76D1\\u542C\\u914D\\u7F6E\\u9879\\u7684\\u53D8\\u5316\\u3002\\u4E00\\u5B9A\\u8981\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \" \\u5C5E\\u6027\\uFF0C\\u7528\\u4E8E\\u6807\\u8BC6\\u914D\\u7F6E\\u9879\\u7684\\u552F\\u4E00\\u6807\\u8BC6\\u3002\\u5982\\u9700\\u8BBE\\u7F6E\\u521D\\u59CB\\u503C\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u7528\\u6237\\u6709\\u5176\\u4ED6\\u5F62\\u5F0F\\u7684\\u914D\\u7F6E\\u9700\\u6C42\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getConfigureItem\"), \" \\u5C06\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u6269\\u5C55\\u6210 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Configure\"), \" \\u7C7B\\u578B\\u7EC4\\u4EF6\\u3002\"), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\nimport { IconFixedStroked, IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@douyinfe/semi-icons';\\n\\nconst { Configure } = AIChatInput;\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\nconst modelOptions = [\\n    { value: 'GPT-5', label: 'GPT-5' },\\n    { value: 'GPT-4o', label: 'GPT-4o' },\\n    { value: 'Claude 3.5 Sonnet', label: 'Claude 3.5 Sonnet' },\\n];\\n\\nconst mcpOptions = [\\n    { icon: <IconFeishuLogo />, label: \\\"\\u98DE\\u4E66\\u6587\\u6863\\\", value: \\\"feishu\\\" },\\n    { icon: <IconGit />, label: \\\"Github Mcp\\\", value: \\\"github\\\" },\\n    { icon: <IconFigma />, label: \\\"IconFigma Mcp\\\", value: \\\"IconFigma\\\" }\\n];\\n\\nconst radioButtonProps = [\\n    { label: '\\u6781\\u901F', value: 'fast' },\\n    { label: '\\u601D\\u8003', value: 'think' },\\n    { label: '\\u8D85\\u80FD', value: 'super' }\\n];\\n\\n\\nfunction ConfigureButton() {\\n    const onConfigureButtonClick = useCallback(() => {\\n        console.log('onConfigureButtonClick');\\n    }, []);\\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} onConfigureButtonClick={onConfigureButtonClick} showConfigure={true}/>\\n        <Configure.RadioButton options={radioButtonProps} field=\\\"thinkType\\\" initValue=\\\"fast\\\"/>\\n    </>), []);\\n\\n    const onConfigureChange = useCallback((value, changedValue) => {\\n        console.log('onConfigureChange', value, changedValue);\\n    }, []);\\n    \\n    return (\\n        <AIChatInput\\n            placeholder={'\\u7528\\u4E8E\\u67E5\\u770B\\u5DE6\\u4E0B\\u65B9\\u914D\\u7F6E\\u9879\\u7684\\u7528\\u4F8B'} \\n            renderConfigureArea={renderLeftMenu} \\n            onConfigureChange={onConfigureChange}\\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n        />\\n    );\\n};\\n\\nrender(<ConfigureButton />);\\n\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getConfigureItem\"), \" \\u6269\\u5C55\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Configure\"), \" \\u7C7B\\u578B\\u7EC4\\u4EF6\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"function getConfigureItem(\\n    component: React.ReactElement,\\n    opts: {\\n        // \\u6307\\u5B9A\\u9700\\u8981\\u63A5\\u7BA1\\u7684\\u7EC4\\u4EF6\\u7684 value \\u5BF9\\u5E94\\u7684 key\\uFF0C\\u9ED8\\u8BA4\\u662F value\\n        valueKey?: string; \\n        // \\u6307\\u5B9A\\u9700\\u8981\\u63A5\\u7BA1\\u7684\\u7EC4\\u4EF6\\u7684\\u503C\\u53D8\\u5316\\u5BF9\\u5E94\\u7684\\u51FD\\u6570\\u540D\\uFF0C\\u9ED8\\u8BA4\\u662F onChange\\n        onKeyChangeFnName?: string;\\n        // \\u6307\\u5B9A\\u9700\\u8981\\u63A5\\u7BA1\\u7684\\u7EC4\\u4EF6\\u7684\\u503C\\u53D8\\u5316\\u51FD\\u6570\\u53C2\\u6570\\u4E2D value \\u5BF9\\u5E94\\u7684\\u8DEF\\u5F84\\uFF0C\\u9ED8\\u8BA4\\u662F ''\\n        valuePath?: string;\\n        className?: string;\\n        defaultProps?: Record<string, any>\\n    }\\n)\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React, { useCallback } from 'react';\\nimport { Cascader, AIChatInput, getConfigureItem } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst cascaderModalOptions = [\\n    {\\n        label: 'GPT',\\n        value: 'GPT',\\n        children: [\\n            { label: 'GPT-4o', value: 'GPT-4o' },\\n            { value: 'GPT-5', label: 'GPT-5' }\\n        ],\\n    },\\n    {\\n        label: 'Claude',\\n        value: 'Claude',\\n        children: [\\n            { label: 'Claude 3.5 Sonnet', value: 'Claude 3.5 Sonnet' }\\n        ],\\n    }\\n];\\n\\nconst myCascader = (props) => {\\n    return <Cascader {...props} />;\\n};\\n\\nconst CustomCascader = getConfigureItem(myCascader, { \\n    className: 'aiChatInput-cascader-configure'\\n});\\n\\nclass CustomConfigure extends React.Component {\\n\\n    constructor(props) {\\n        super(props);\\n        // Bind methods to the class instance\\n        this.renderLeftMenu = this.renderLeftMenu.bind(this);\\n        this.onConfigureChange = this.onConfigureChange.bind(this);\\n    }\\n\\n    // Define methods without using arrow function syntax\\n    renderLeftMenu() {\\n        return <CustomCascader field=\\\"model\\\" treeData={cascaderModalOptions} initValue={['GPT', 'GPT-4o']} />;\\n    }\\n\\n    onConfigureChange(value, changedValue) {\\n        console.log('onConfigureChange', value, changedValue);\\n    }\\n\\n    render() {\\n        return (<AIChatInput\\n            placeholder={'\\u7528\\u4E8E\\u67E5\\u770B\\u5DE6\\u4E0B\\u65B9\\u914D\\u7F6E\\u9879\\u7684\\u7528\\u4F8B'} \\n            renderConfigureArea={this.renderLeftMenu} \\n            onConfigureChange={this.onConfigureChange}\\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n        />);\\n    };\\n}\\n\\nrender(<CustomConfigure />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u64CD\\u4F5C\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8F93\\u5165\\u6846\\u53F3\\u4E0B\\u89D2\\u4E3A\\u64CD\\u4F5C\\u533A\\u57DF\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderActionArea\"), \" API \\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C\\u533A\\u57DF\\uFF0C\\u5C55\\u793A\\u81EA\\u5B9A\\u4E49\\u7684\\u64CD\\u4F5C\\u6309\\u94AE\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface ActionAreaProps {\\n    menuItem: ReactNode[];\\n    className: string\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { AIChatInput, Divider, Button } from '@douyinfe/semi-ui';\\nimport { IconDeleteStroked } from '@douyinfe/semi-icons';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\nfunction ActionArea() {\\n    const renderActionArea = useCallback((props) => {\\n        return (\\n            <div className={props.className}>\\n                <div style={{ display: 'flex', alignItems: 'center' }} key=\\\"delete\\\">\\n                    <Button type=\\\"tertiary\\\" style={{ borderRadius: '50%' }} icon={<IconDeleteStroked />}/>\\n                    <Divider layout=\\\"vertical\\\" style={{ marginLeft: 8 }}/>\\n                </div>\\n                {props.menuItem}\\n            </div>\\n        );\\n    }, []);\\n  \\n    return (\\n        <AIChatInput\\n            renderActionArea={renderActionArea}\\n            placeholder={'\\u8F93\\u5165\\u5185\\u5BB9\\u6216\\u8005\\u4E0A\\u4F20\\u5185\\u5BB9...'} \\n            uploadProps={uploadProps}\\n            style={outerStyle} \\n        />\\n    );\\n};\\n\\nrender(<ActionArea />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u4E0A\\u4F20\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u5DE6\\u4FA7\\u9ED8\\u8BA4\\u4F1A\\u6E32\\u67D3\\u4E0A\\u4F20\\u6309\\u94AE\\u3002\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderUploadButton\"), \" \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4EC5\\u81EA\\u5B9A\\u4E49\\u6309\\u94AE UI\"), \"\\uFF08\\u4F8B\\u5982\\u6539\\u6210\\u56FE\\u6807\\u6309\\u94AE\\u3001\\u52A0 Tooltip \\u7B49\\uFF09\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6CE8\\u610F\\uFF1A\\u8FD9\\u4E0D\\u4F1A\\u5F71\\u54CD\\u4E0A\\u4F20/\\u7C98\\u8D34\\u4E0A\\u4F20\\u903B\\u8F91\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Upload\"), \" \\u4ECD\\u7531\\u7EC4\\u4EF6\\u5185\\u90E8\\u6258\\u7BA1\\uFF09\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"openFileDialog\"), \" \\u4F1A\\u89E6\\u53D1\\u5185\\u90E8 Upload \\u7684\\u6587\\u4EF6\\u9009\\u62E9\\u3002\"), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\nfunction CustomUploadButton() {\\n    return (\\n        <AIChatInput\\n            placeholder={'\\u81EA\\u5B9A\\u4E49\\u4E0A\\u4F20\\u6309\\u94AE\\uFF08\\u4ECD\\u652F\\u6301\\u7C98\\u8D34\\u4E0A\\u4F20\\uFF09'}\\n            uploadProps={uploadProps}\\n            renderUploadButton={({ openFileDialog, disabled }) => (\\n                <button\\n                    type=\\\"button\\\"\\n                    disabled={disabled}\\n                    className=\\\"semi-button semi-button-borderless\\\"\\n                    onClick={(e) => {\\n                        e.stopPropagation();\\n                        openFileDialog();\\n                    }}\\n                >\\n                    <IconUpload />\\n                </button>\\n            )}\\n            style={outerStyle}\\n        />\\n    );\\n}\\n\\nrender(<CustomUploadButton />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E95\\u90E8\\u6309\\u94AE\\u5F62\\u72B6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"round\"), \" API \\u914D\\u7F6E\\u5E95\\u90E8\\u6309\\u94AE\\u7684\\u5F62\\u72B6\\uFF0C\\u9ED8\\u8BA4\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"\\uFF0C\\u662F\\u5706\\u89D2\\u6309\\u94AE\\uFF0C \\u53EF\\u4EE5\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" \\u6765\\u914D\\u7F6E\\u4E3A\\u65B9\\u5F62\\u6309\\u94AE\\u3002\"), 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 from 'react';\\nimport { AIChatInput, RadioGroup, Radio } from '@douyinfe/semi-ui';\\nimport { IconFixedStroked, IconBookOpenStroked, IconFeishuLogo, IconGit, IconFigma } from '@douyinfe/semi-icons';\\n\\nconst { Configure } = AIChatInput;\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst modelOptions = [\\n    { value: 'GPT-5', label: 'GPT-5' },\\n    { value: 'GPT-4o', label: 'GPT-4o' },\\n    { value: 'Claude 3.5 Sonnet', label: 'Claude 3.5 Sonnet' },\\n];\\n\\nconst mcpOptions = [\\n    { icon: <IconFeishuLogo />, label: \\\"\\u98DE\\u4E66\\u6587\\u6863\\\", value: \\\"feishu\\\" },\\n    { icon: <IconGit />, label: \\\"Github Mcp\\\", value: \\\"github\\\" },\\n    { icon: <IconFigma />, label: \\\"IconFigma Mcp\\\", value: \\\"IconFigma\\\" }\\n];\\n\\nconst radioButtonProps = [\\n    { label: '\\u6781\\u901F', value: 'fast' },\\n    { label: '\\u601D\\u8003', value: 'think' },\\n    { label: '\\u8D85\\u80FD', value: 'super' }\\n];\\n\\nfunction Shape() {\\n    const [round, setRound] = useState(false);\\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} initValue=\\\"fast\\\"/>\\n    </>);\\n\\n    const onChange = useCallback((e) => {\\n        setRound(e.target.value);\\n    }, []);\\n    \\n    return (<>\\n        <RadioGroup onChange={onChange} value={round} aria-label=\\\"\\u5355\\u9009\\u7EC4\\u5408\\u793A\\u4F8B\\\" name=\\\"demo-radio-group\\\">\\n            <Radio value={true}>\\u5706\\u5F62</Radio>\\n            <Radio value={false}>\\u65B9\\u5F62</Radio>\\n        </RadioGroup>\\n        <AIChatInput\\n            placeholder={'\\u4E0B\\u65B9\\u6309\\u94AE\\u4E3A\\u65B9\\u5F62\\u7684\\u7528\\u4F8B'} \\n            round={round}\\n            renderConfigureArea={renderLeftMenu} \\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n        />\\n    </>);\\n};\\n\\nrender(<Shape />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5EFA\\u8BAE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"suggestion\"), \" API \\u914D\\u7F6E\\u5EFA\\u8BAE\\u5217\\u8868\\uFF0C\\u529F\\u80FD\\u7C7B\\u4F3C\\u4E8E AutoComplete \\u7EC4\\u4EF6\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u6839\\u636E\\u8F93\\u5165\\u7684\\u5185\\u5BB9\\u5B9E\\u73B0\\u6839\\u636E\\u8F93\\u5165\\u7684\\u5185\\u5BB9\\u52A8\\u6001\\u5C55\\u793A\\u5EFA\\u8BAE\\u5217\\u8868\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u9F20\\u6807\\u4E0A\\u4E0B\\u6309\\u952E\\u5207\\u6362\\u5EFA\\u8BAE\\u5217\\u8868\\u7684\\u9009\\u9879\\u3002\\u6309\\u4E0B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESC\"), \" \\u6216\\u8005\\u70B9\\u51FB\\u975E\\u5EFA\\u8BAE\\u5217\\u8868\\uFF0C\\u8F93\\u5165\\u6846\\u533A\\u57DF\\uFF0C\\u5EFA\\u8BAE\\u5217\\u8868\\u5C06\\u5173\\u95ED\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8FD8\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderSuggestionItem\"), \" API \\u81EA\\u5B9A\\u4E49\\u5EFA\\u8BAE\\u5217\\u8868\\u7684\\u5C55\\u793A\\u3002\"), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst suggestionTemplate = [ '\\u5929\\u6C14\\u5982\\u4F55', '\\u7A7A\\u6C14\\u8D28\\u91CF', '\\u5DE5\\u4F5C\\u8FDB\\u7A0B', '\\u65E5\\u7A0B\\u5B89\\u6392'];\\n\\n\\nfunction Suggestion() {\\n    const [suggestion, setSuggestion] = useState([]);\\n    const onChange = useCallback((content) => {\\n        let value;\\n        if (content.length && content[0].text) {\\n            value = content[0].text;\\n        }\\n        if (value === undefined || value.includes('\\\\n')) {\\n            if (suggestion === undefined || suggestion.length === 0) {\\n                return;\\n            } else {\\n                return setSuggestion([]);\\n            }\\n        }\\n        if (value.length === 0) {\\n            setSuggestion([]);\\n        } else if (value.length > 0 && value.length < 4) {\\n            const su = new Array(suggestionTemplate.length).fill(0).map((item, index) => {\\n                return `${value}\\uFF0C${suggestionTemplate[index]}`;\\n            });\\n            setSuggestion(su);\\n        } else if (value.length >= 4) {\\n            setSuggestion([]);\\n        }\\n    }, [suggestion]);\\n  \\n    return (\\n        <AIChatInput\\n            suggestions={suggestion} \\n            onContentChange={onChange}\\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n            placeholder={'\\u8F93\\u5165\\u5185\\u5BB9\\uFF0C\\u5F53\\u5185\\u5BB9\\u957F\\u5EA6\\u5C0F\\u4E8E 4\\u4E2A\\u5B57\\u7B26\\u53EF\\u4EE5\\u770B\\u5230\\u5EFA\\u8BAE\\uFF0C\\u4F7F\\u7528\\u4E0A\\u4E0B\\u6309\\u952E\\u53EF\\u5207\\u6362\\u4FAF\\u9009\\u9879'} \\n        />\\n    );\\n}\\n\\nrender(<Suggestion />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6280\\u80FD\\u53CA\\u6A21\\u7248\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"skills\"), \" API \\u914D\\u7F6E\\u6280\\u80FD\\u5217\\u8868\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"skillHotKey\"), \" \\u914D\\u7F6E\\u6280\\u80FD\\u7684\\u89E6\\u53D1\\u952E\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"skills\"), \" \\u7684\\u683C\\u5F0F\\u5982\\u4E0B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface Skill {\\n    label?: string;\\n    value?: string;\\n    icon?: React.ReactNode;\\n    // \\u6280\\u80FD\\u662F\\u5426\\u6709\\u6A21\\u7248\\uFF0C\\u6709\\u6A21\\u7248\\u7684\\u6280\\u80FD\\u88AB\\u9009\\u4E2D\\u540E\\uFF0C\\u5C06\\u5728\\u8F93\\u5165\\u6846\\u7684\\u5E95\\u90E8\\u5C55\\u793A\\u6A21\\u7248\\u6309\\u94AE\\n    hasTemplate?: boolean;\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7531\\u4E8E\\u6A21\\u7248\\u7684\\u5C55\\u793A\\u5F62\\u5F0F\\u4E30\\u5BCC\\uFF0C\\u56E0\\u6B64\\u6211\\u4EEC\\u4E0D\\u63D0\\u4F9B\\u9ED8\\u8BA4\\u7684\\u5C55\\u793A\\u5F62\\u5F0F\\uFF0C\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderTemplate\"), \"API \\u81EA\\u5B9A\\u4E49\\u6A21\\u7248\\u7684\\u5C55\\u793A\\u3002\\u6A21\\u7248\\u9762\\u677F\\u7684\\u5C55\\u793A\\u548C\\u5173\\u95ED\\u53EF\\u901A\\u8FC7\\u70B9\\u51FB\\u6A21\\u7248\\u6309\\u94AE\\u5B9E\\u73B0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"renderTemplate?: (\\n    skill: Skill, \\n    // \\u6A21\\u7248\\u70B9\\u51FB\\u56DE\\u8C03\\uFF0C\\u70B9\\u51FB\\u6A21\\u7248\\u540E\\uFF0C\\u5C06\\u6A21\\u7248\\u7684\\u5185\\u5BB9\\u63D2\\u5165\\u5230\\u8F93\\u5165\\u6846\\u4E2D\\n    onTemplateClick: (content: string) => void\\n) => ReactNode;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\nimport { IconTemplateStroked, IconSearch } from '@douyinfe/semi-icons';\\n\\nconst { Configure } = AIChatInput;\\nconst modelOptions = [\\n    { value: 'GPT-5', label: 'GPT-5' },\\n    { value: 'GPT-4o', label: 'GPT-4o' },\\n    { value: 'Claude 3.5 Sonnet', label: 'Claude 3.5 Sonnet' },\\n];\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\nconst skills = [\\n    {\\n        icon: <IconTemplateStroked />,\\n        value: 'writing',\\n        label: '\\u5E2E\\u6211\\u5199\\u4F5C',\\n        hasTemplate: true,\\n    },\\n    {\\n        icon: <IconSearch />,\\n        value: 'AI \\u7F16\\u7A0B',\\n        label: 'AI coding'\\n    },\\n];\\n\\nconst template = [\\n    {\\n        groupKey: 'value',\\n        group: '\\u5DE5\\u4F5C',\\n        children: [\\n            {\\n                bg: 'var(--semi-color-primary)',\\n                icon: <IconTemplateStroked />,\\n                title: '\\u603B\\u7ED3\\u6C47\\u62A5',\\n                desc: '\\u51DD\\u7EC3\\u4F60\\u7684\\u5DE5\\u4F5C\\u6210\\u6548',\\n                content: `\\u6211\\u7684\\u804C\\u4E1A\\u662F<input-slot placeholder=\\\"[\\u8BF7\\u8F93\\u5165\\u804C\\u4E1A]\\\"></input-slot>\\uFF0C\\u5E2E\\u6211\\u5199\\u4E00\\u4EFD\\u5173\\u4E8E<input-slot placeholder=\\\"[\\u8F93\\u5165\\u76EE\\u7684\\uFF1A\\u9879\\u76EE\\u8FDB\\u5C55\\u603B\\u7ED3\\u3001\\u56E2\\u961F\\u5DE5\\u4F5C\\u6210\\u679C\\u6216\\u5176\\u4ED6]</input-slot>\\u7684\\u603B\\u7ED3\\u6C47\\u62A5`\\n            },\\n            {\\n                bg: 'var(--semi-color-warning)',\\n                icon: <IconTemplateStroked />,\\n                title: '\\u8BDD\\u672F',\\n                desc: '\\u6EE1\\u8DB3\\u4E0D\\u540C\\u573A\\u666F\\u8868\\u8FBE\\u9700\\u6C42',\\n                content: `\\u6211\\u662F\\u4E00\\u540D<select-slot value=\\\"\\u6253\\u5DE5\\u4EBA\\\" options='[\\\"\\u6253\\u5DE5\\u4EBA\\\",\\\"\\u5B66\\u751F\\\"]'></select-slot>\\xA0\\uFF0C\\u5E2E\\u6211\\u5199\\u4E00\\u6BB5\\u9762\\u5411<input-slot placeholder=\\\"[\\u8F93\\u5165\\u5BF9\\u8C61]\\\">\\u964C\\u751F\\u540C\\u4E8B</input-slot>\\u7684\\u8BDD\\u672F\\u5185\\u5BB9`\\n            }\\n        ]\\n    },\\n    {\\n        groupKey: 'marketing',\\n        group: '\\u5546\\u4E1A\\u8425\\u9500',\\n        children: [\\n            {\\n                bg: 'var(--semi-color-primary)',\\n                icon: <IconTemplateStroked />,\\n                title: '\\u5BA3\\u4F20\\u6587\\u6848',\\n                desc: '\\u64B0\\u5199\\u5404\\u5E73\\u53F0\\u7684\\u63A8\\u5E7F\\u6587\\u6848',\\n                content: '\\u5E2E\\u6211\\u5199\\u4E00\\u7BC7\\u9762\\u5411<input-slot placeholder=\\\"[\\u8F93\\u5165\\u76EE\\u6807\\u4EBA\\u7FA4]\\\"></input-slot>\\u804C\\u573A\\u4EBA\\u58EB\\uFF0C\\u5173\\u4E8E<input-slot placeholder=\\\"[\\u8F93\\u5165\\u4EA7\\u54C1]\\\"></input-slot>\\u7684\\u5BA3\\u4F20\\u6587\\u6848\\uFF0C\\u9700\\u8981\\u76F4\\u51FB\\u75DB\\u70B9\\uFF0C\\u5438\\u5F15\\u7528\\u6237\\u70B9\\u51FB\\u3002'\\n            },\\n            {\\n                bg: 'var(--semi-color-warning)',\\n                icon: <IconTemplateStroked />,\\n                title: '\\u65B9\\u6848\\u7B56\\u5212',\\n                desc: '\\u91CF\\u8EAB\\u5B9A\\u5236\\u5404\\u79CD\\u65B9\\u6848',\\n                content: '\\u6211\\u662F\\u4E00\\u540D<input-slot placeholder=\\\"[\\u8F93\\u5165\\u804C\\u4E1A]\\\"></input-slot>\\u804C\\u4E1A\\u7B56\\u5212\\u4EBA\\xA0\\uFF0C\\u5E2E\\u6211\\u5199\\u4E00\\u4E2A<input-slot placeholder=\\\"[\\u65B9\\u6848\\u7C7B\\u578B\\uFF1A\\u5982\\u7EBF\\u4E0B\\u8BFB\\u4E66\\u4F1A\\u6D3B\\u52A8\\u65B9\\u6848\\u7B49]\\\"></input-slot>\\u7EBF\\u4E0B\\u8BFB\\u4E66\\u4F1A\\u6D3B\\u52A8\\xA0\\u7684\\u65B9\\u6848\\uFF0C\\u9700\\u8981\\u5305\\u542B\\u4F46\\u4E0D\\u9650\\u4E8E\\u7B56\\u5212\\u76EE\\u6807\\u3001\\u8BE6\\u7EC6\\u8BA1\\u5212\\u3001\\u6240\\u9700\\u8D44\\u6E90\\u548C\\u9884\\u7B97\\u3001\\u6548\\u679C\\u8BC4\\u4F30\\u3001\\u98CE\\u9669\\u5E94\\u5BF9\\u7B49\\u3002'\\n            }\\n        ]\\n    }\\n];\\n\\nconst TemplateContent = (props) => {\\n    const { onTemplateClick: onTemplateClickProps } = props;\\n    const [groupIndex, setGroupIndex] = useState(0);\\n\\n    const onItemClick = useCallback((e) => {\\n        const index = e.target.dataset.index;\\n        setGroupIndex(Number(index));\\n    }, []);\\n\\n    const onTemplateClick = useCallback((item) => {\\n        const { content } = item;\\n        onTemplateClickProps(content);\\n    }, [onTemplateClickProps]);\\n\\n    return (<div className={'aiChatInput-template'} >\\n        {/* tabs */}\\n        <div className={'template-header'} >\\n            {(template ? template : []).map((item, index) => {\\n                return (<div\\n                    key={index}\\n                    data-index={index}\\n                    className={`template-header-item ${groupIndex === index ? 'template-header-item-active' : ''}`}\\n                    onClick={onItemClick}\\n                >\\n                    {item.group}\\n                </div>);\\n            })}\\n        </div>\\n        {/* content */}\\n        <div className='template-content'>\\n            {(((template ? template : [])[groupIndex] ? (template ? template : [])[groupIndex] : {}).children ? (template ? template : [])[groupIndex].children : []).map((item, index) => (<div\\n                key={index}\\n                className='template-content-item'\\n                onClick={() => onTemplateClick(item)}\\n            >\\n                <div className='template-content-item-icon' style={{ background: item.bg }}>{item.icon}</div>\\n                <div className='template-content-item-title'>{item.title}</div>\\n                <div className='template-content-item-desc'>{item.desc}</div>\\n            </div>))}\\n        </div>\\n    </div>);\\n};\\n\\nfunction Template() {\\n    const ref = useRef();\\n\\n    const setTemplate = useCallback((content) => {\\n        const element = ref.current;\\n        if (!element) {\\n            return;\\n        }\\n        element.setContentWhileSaveTool(content);\\n        element.focusEditor();\\n    }, [ref]);\\n\\n    const renderTemplate = useCallback((skill = {}, e) => {\\n        if (skill.value === 'writing') {\\n            return <TemplateContent onTemplateClick={setTemplate}/>;\\n        }\\n    }, [setTemplate]);\\n\\n    const renderLeftMenu = useCallback(() => <>\\n        <Configure.Select optionList={modelOptions} field=\\\"model\\\" initValue=\\\"GPT-4o\\\" />\\n    </>);\\n\\n    return (\\n        <AIChatInput \\n            placeholder='\\u8F93\\u5165 / \\u5524\\u8D77\\u6280\\u80FD\\uFF0C\\u9009\\u62E9\\u6280\\u80FD\\u540E\\uFF0C\\u70B9\\u51FB\\u6A21\\u7248\\u6309\\u94AE\\u53EF\\u67E5\\u770B\\u6A21\\u7248\\uFF0C\\u53EF\\u901A\\u8FC7\\u9F20\\u6807\\u4E0A\\u4E0B\\u6309\\u952E\\u5207\\u6362\\u4FAF\\u9009\\u9879'\\n            renderConfigureArea={renderLeftMenu} \\n            ref={ref}\\n            uploadProps={uploadProps}\\n            skills={skills}\\n            skillHotKey='/'\\n            renderTemplate={renderTemplate}\\n            style={outerStyle}\\n        />\\n    );\\n};\\n\\nrender(<Template />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9876\\u90E8\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderTopSlot\"), \" API \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9876\\u90E8\\u533A\\u57DF\\uFF0C\\u53EF\\u81EA\\u884C\\u6E32\\u67D3\\u5F15\\u7528\\uFF0C\\u4E0A\\u4F20\\u5185\\u5BB9\\u4EE5\\u53CA\\u914D\\u7F6E\\u9879\\u3002\\u53EF\\u7ED3\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showReference\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showUploadFile\"), \" API \\u63A7\\u5236\\u662F\\u5426\\u5C55\\u793A\\u5F15\\u7528\\u548C\\u4E0A\\u4F20\\u6587\\u4EF6\\u3002\\u53E6\\u5916\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topSlotPosition\"), \" API \\u914D\\u7F6E\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5185\\u5BB9\\u76F8\\u5BF9\\u4E8E\\u5F15\\u7528\\u533A\\u57DF\\uFF0C\\u4E0A\\u4F20\\u5C55\\u793A\\u533A\\u57DF\\u7684\\u76F8\\u5BF9\\u4F4D\\u7F6E\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface TopSlotProps {\\n    // \\u5F15\\u7528\\n    references: Reference[];\\n    // \\u4E0A\\u4F20\\u5185\\u5BB9\\n    attachments: Attachment[];\\n    // \\u8F93\\u5165\\u6846\\u6D88\\u606F\\n    content: Content[];\\n    handleUploadFileDelete: (attachment: Attachment) => void;\\n    handleReferenceDelete: (reference: Reference) => void\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u7528\\u4F8B\\u5982\\u4E0B\\uFF1A\"), 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 from 'react';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\nimport { IconClose, IconUpload, IconFile, IconFolder, IconBranch, IconTerminal, IconGlobeStroke, IconConnectionPoint2, IconTemplateStroked, IconSearch, IconGit, IconCode } from '@douyinfe/semi-icons';\\n\\nconst { Configure } = AIChatInput;\\nconst radioButtonProps = [\\n    { label: <IconTemplateStroked />, value: 'fast' },\\n    { label: <IconSearch />, value: 'think' }\\n];\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\nconst customReferences = [\\n    {\\n        type: 'file',\\n        key: '1',\\n        name: 'horizontalScroller.tsx',\\n        path: 'packages/semi-ui/AIChatInput/horizontalScroller.tsx',\\n    },\\n    {\\n        type: 'folder',\\n        key: '2',\\n        name: 'AIChatInput',\\n        path: 'packages/semi-ui/AIChatInput',\\n    },\\n    {\\n        type: 'web',\\n        key: '3',\\n        name: 'web'\\n    },\\n    {\\n        type: 'change',\\n        key: '4',\\n        name: 'recentChange'\\n    },\\n    {\\n        type: 'branch',\\n        key: '5',\\n        name: 'Branch',\\n        detail: 'Diff with Main Branch',\\n        branch: 'feat/aichatinput',\\n        targetBranch: 'feat/targetBranch',\\n    },\\n    {\\n        type: 'terminal',\\n        key: '6',\\n        name: 'From 1-2',\\n        from: 1,\\n        to: 2,\\n    }\\n];\\n\\nfunction getAttachmentType(item = {}) {\\n    const { type, name = '', fileInstance = {} } = item;\\n    if (type) {\\n        return type;\\n    }\\n    const suffix = name.split('.').pop();\\n    if (suffix) {\\n        return suffix;\\n    } else if (fileInstance.type && fileInstance.type) {\\n        const temp = fileInstance.type.split('/').pop();\\n        if (temp) {\\n            return temp;\\n        }\\n    }\\n    return 'UNKNOWN';\\n}\\n\\nfunction isImageType(item = {}) {\\n    const PIC_PREFIX = 'image/';\\n    const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];\\n    const { name = '', fileInstance = {} } = item;\\n    const suffix = name.split('.').pop();\\n    let result = false;\\n    const { type = '' } = fileInstance;\\n    if (type.startsWith(PIC_PREFIX)) {\\n        result = true;\\n    } else if (PIC_SUFFIX_ARRAY.includes(suffix)) {\\n        result = true;\\n    }\\n    return result;\\n}\\n\\nconst refTypeToIconMap = new Map([\\n    ['file', <IconFile key={'file'} size=\\\"small\\\" />],\\n    ['folder', <IconFolder key={'folder'} size=\\\"small\\\" />],\\n    ['branch', <IconBranch key={'branch'} size=\\\"small\\\" />],\\n    ['terminal', <IconTerminal key={'terminal'} size=\\\"small\\\" /> ],\\n    ['web', <IconGlobeStroke key={'globalStroke'} size=\\\"small\\\" />],\\n    ['change', <IconConnectionPoint2 key={'connectionPoint2'} size=\\\"small\\\" />],\\n    ['git', <IconGit key=\\\"git\\\" size=\\\"small\\\" />],\\n    ['code', <IconCode key=\\\"code\\\" size=\\\"small\\\" />],\\n]);\\n\\nfunction RenderTopSlot() {\\n    const ref = useRef();\\n    const [reference, setReference] = useState(customReferences);\\n\\n    const renderLeftMenu = useCallback(() => <>\\n        <Configure.RadioButton options={radioButtonProps} initValue=\\\"fast\\\" field=\\\"mode\\\"/>\\n    </>);\\n\\n    const renderTopSlot = useCallback((props) => {\\n        const { attachments = [], references = [] } = props;\\n        return <div className=\\\"ai-chat-input-topSlot\\\">\\n            {references.map((item, index) => {\\n                const { type, name, detail, key, ...rest } = item;\\n                return (<div className=\\\"item\\\" key={key}>\\n                    <span className='item-icon'>\\n                        {React.cloneElement(refTypeToIconMap.get(type), { className: 'item-left item-icon' })}\\n                        <IconClose size=\\\"small\\\" className='item-icon-delete' onClick={() => {\\n                            const newReferences = [...references];\\n                            newReferences.splice(index, 1);\\n                            setReference(newReferences);\\n                        }}/>\\n                    </span>\\n                    <span className='item-content'>\\n                        {name}\\n                        {type === 'branch' && <span className='detail'>{detail}</span>}\\n                    </span>\\n                </div>);\\n            })}\\n            {attachments.map((item, index) => {\\n                const isImage = isImageType(item);\\n                const { uid, name, url, size, percent, status } = item;\\n                return (<div className=\\\"item\\\" key={uid}>\\n                    <span className='item-icon'>\\n                        {isImage ? <img className='item-image item-left' src={item.url} alt={item.name} /> : <IconUpload size=\\\"small\\\" className='item-left item-icon' />}\\n                        <IconClose size=\\\"small\\\" className='item-icon-delete' onClick={() => {\\n                            ref.current && ref.current.deleteUploadFile(item);\\n                        }}/>\\n                    </span>\\n                    <span className='item-content'>{name}</span>\\n                </div>\\n                );\\n            })}\\n        </div>;\\n    }, []);\\n    \\n    return (\\n        <AIChatInput\\n            className='aiChatInput-customTopSlot'\\n            renderTopSlot={renderTopSlot}\\n            references={reference}\\n            showUploadFile={false}\\n            showReference={false}\\n            renderConfigureArea={renderLeftMenu} \\n            ref={ref}\\n            uploadProps={uploadProps}\\n            style={outerStyle}\\n            placeholder=\\\"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9876\\u90E8\\u5185\\u5BB9\\uFF0C\\u53EF\\u7528\\u4E8E\\u6E32\\u67D3\\u4E0A\\u4F20\\u5185\\u5BB9\\u3001\\u5F15\\u7528\\u5185\\u5BB9\\\"\\n        />\\n    );\\n}\\n\\nrender(<RenderTopSlot />);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BCC\\u6587\\u672C\\u533A\\u57DF\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\uFF0C\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u7684\\u5B9E\\u73B0\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tiptap.dev/docs/editor/extensions/custom-extensions/create-new\"\n  }, \"Tiptap \\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\"), \"\\u3002\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extensions\"), \" API \\u53EF\\u5C06\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u6DFB\\u52A0\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AIChatInput\"), \" \\u7EC4\\u4EF6\\u4E2D\\u3002\\u5982\\u679C\\u6DFB\\u52A0\\u4E86\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\uFF0C\\u9700\\u8981\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transformer\"), \" \\u4E2D\\u6DFB\\u52A0\\u5BF9\\u5E94\\u7684\\u8F6C\\u6362\\u89C4\\u5219\\uFF0C \\u4EE5\\u4FDD\\u8BC1\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onContentChange\"), \" \\u4E2D\\u5F97\\u5230\\u7684\\u8BE5\\u8282\\u70B9\\u6570\\u636E\\u7B26\\u5408\\u7528\\u6237\\u9884\\u671F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u65F6\\u6709\\u4EE5\\u4E0B\\u6CE8\\u610F\\u4E8B\\u9879\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8BF7\\u5728\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u4E2D\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCustomSlot\"), \" \\u7684\\u5C5E\\u6027\\uFF0C\\u8BE5\\u5C5E\\u6027\\u548C\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u524D\\u540E\\u7684\\u5149\\u6807\\u9AD8\\u5EA6\\u6709\\u5173\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7531\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AIChatInput\"), \" \\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" \\u4F5C\\u4E3A\\u53D1\\u9001\\u70ED\\u952E\\uFF0C\\u5982\\u679C\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u6709\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" \\u4F5C\\u4E3A\\u5FEB\\u6377\\u64CD\\u4F5C\\uFF0C\\u9700\\u8981\\u81EA\\u884C\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"editor.storage\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AIChatInput.allowHotKeySend\"), \" \\u7528\\u4E8E\\u8868\\u793A\\u70ED\\u952E\\u662F\\u5426\\u5E94\\u8BE5\\u88AB AIChatInput \\u7528\\u4E8E\\u53D1\\u9001\\uFF0C\\u907F\\u514D\\u70ED\\u952E\\u51B2\\u7A81\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u5B9A\\u4E49\\u53CA\\u6CE8\\u610F\\u4E8B\\u9879\\u7684\\u793A\\u4F8B\\u5982\\u4E0B\\uFF1A\"), 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 from 'react';\\nimport { Node, mergeAttributes } from '@tiptap/core';\\nimport { ReactNodeViewRenderer, NodeViewWrapper, posToDOMRect, ReactRenderer } from '@tiptap/react';\\nimport { computePosition, flip, shift } from '@floating-ui/dom';\\nimport { IconFile, IconFolder, IconBranch, IconCode, IconGit, IconGlobeStroke, IconChevronRight, IconClose, IconUpload, IconTerminal, IconConnectionPoint2 } from '@douyinfe/semi-icons';\\nimport { AIChatInput } from '@douyinfe/semi-ui';\\nimport Mention from '@tiptap/extension-mention';\\n\\nconst uploadProps = { action: \\\"https://api.semi.design/upload\\\" };\\nconst outerStyle = { margin: 12 };\\n\\n// \\u9762\\u677F\\u9009\\u9879\\nconst TestAction = {\\n    'Files & Folders': [\\n        {\\n            icon: <IconFile />,\\n            key: '1-1',\\n            type: 'file',\\n            name: 'TagInput.scss',\\n            path: 'package/semi-founctaion/TagInput.scss',\\n        },\\n        {\\n            icon: <IconFolder />,\\n            key: '1-2',\\n            type: 'folder',\\n            name: 'package',\\n            path: '/package',\\n        },\\n        {\\n            icon: <IconFolder />,\\n            key: '1-3',\\n            type: 'folder',\\n            name: 'semi-ui',\\n            path: '/package/semi-ui',\\n        },\\n    ],\\n    Git: [\\n        {\\n            icon: <IconBranch />,\\n            key: '2-1',\\n            type: 'branch',\\n            name: 'fix/tag',\\n        },\\n        {\\n            icon: <IconCode />,\\n            key: '2-2',\\n            type: 'code',\\n            name: 'v2.86.0',\\n            path: '/package',\\n        },\\n        {\\n            icon: <IconGit />,\\n            key: '2-3',\\n            type: 'git',\\n            name: 'chore: publish',\\n        },\\n    ],\\n};\\n\\n// \\u7B2C\\u4E00\\u7EA7\\u5185\\u5BB9\\nconst FirstLevel = Object.keys(TestAction);\\n\\n// referSlot \\u7684\\u6E32\\u67D3\\u7EC4\\u4EF6\\nfunction ReferSlotComponent(props) {\\n    const { node, deleteNode } = props;\\n    const value = node.attrs.value ? node.attrs.value : '';\\n    const onRemove = (e) => {\\n        e.preventDefault();\\n        e.stopPropagation();\\n        deleteNode && deleteNode();\\n    };\\n    return (\\n        <NodeViewWrapper className=\\\"ai-chat-input-refer-slot-wrapper\\\">\\n            <span className='ai-chat-input-refer-slot'>\\n                {value}\\n            </span>\\n        </NodeViewWrapper>\\n    );\\n}\\n\\n// \\u521B\\u5EFA ReferSlot \\u6269\\u5C55\\nconst ReferSlot = Node.create({\\n    name: 'referSlot',\\n    inline: true,\\n    group: 'inline',\\n    atom: true,\\n    selectable: false,\\n    addAttributes() {\\n        return {\\n            value: {\\n                default: '\\u8F93\\u5165\\u5185\\u5BB9',\\n                parseHTML: (element) =>\\n                    element.getAttribute('data-value'),\\n                renderHTML: (attributes) => ({\\n                    'data-value': attributes.value,\\n                }),\\n            },\\n            info: {\\n                default: '',\\n                parseHTML: (element) =>\\n                    element.getAttribute('data-info'),\\n                renderHTML: (attributes) => ({\\n                    'data-info': attributes.info,\\n                }),\\n            },\\n            type: {\\n                default: 'text',\\n                parseHTML: (element) =>\\n                    element.getAttribute('data-type'),\\n                renderHTML: (attributes) => ({\\n                    'data-type': attributes.type,\\n                }),\\n            },\\n            uniqueKey: {\\n                default: '',\\n                parseHTML: (element) =>\\n                    element.getAttribute('data-unique-key'),\\n                renderHTML: (attributes) => ({\\n                    'data-unique-key': attributes.uniqueKey,\\n                }),\\n            },\\n            // !!! Very important, affects the cursor size before and after custom nodes\\n            // Please be sure to add this logic to custom nodes\\n            isCustomSlot: AIChatInput.getCustomSlotAttribute(),\\n        };\\n    },\\n    parseHTML() {\\n        return [{\\n            tag: 'refer-slot',\\n        }];\\n    },\\n    renderHTML({ HTMLAttributes }) {\\n        // \\u5E8F\\u5217\\u5316\\u65F6\\u8F93\\u51FA\\u81EA\\u5B9A\\u4E49\\u6807\\u7B7E\\uFF0C\\u4FDD\\u7559\\u503C\\u5230 data-value\\n        return ['refer-slot', mergeAttributes(HTMLAttributes)];\\n    },\\n    addNodeView() {\\n        return ReactNodeViewRenderer(ReferSlotComponent);\\n    },\\n});\\n\\n// \\u66F4\\u65B0\\u4F4D\\u7F6E\\u7528\\u51FD\\u6570\\nconst updatePosition = (editor, element) => {\\n    const virtualElement = {\\n        getBoundingClientRect: () => posToDOMRect(\\n            editor.view,\\n            editor.state.selection.from,\\n            editor.state.selection.to,\\n        ),\\n    };\\n    computePosition(virtualElement, element, {\\n        placement: 'bottom-start',\\n        strategy: 'absolute',\\n        middleware: [shift()],\\n    }).then(({ x, y, strategy }) => {\\n        element.style.width = 'max-content';\\n        element.style.position = strategy;\\n        element.style.left = `${x}px`;\\n        element.style.top = `${y}px`;\\n    });\\n};\\n\\n// \\u5EFA\\u8BAE\\nconst suggestion = {\\n    items: () => FirstLevel,\\n    command: ({ editor, range, props }) => {\\n        const { item, allowHotKeySend } = props;\\n        if (typeof allowHotKeySend === 'boolean') {\\n            editor.storage.SemiAIChatInput.allowHotKeySend = allowHotKeySend;\\n        }\\n        item && editor.chain().focus().insertContentAt(range, {\\n            type: 'referSlot',\\n            attrs: {\\n                type: item.type,\\n                value: item.name || '',\\n                info: JSON.stringify({ path: item.path }),\\n                uniqueKey: item.key,\\n            },\\n        }).run();\\n    },\\n    render: () => {\\n        let component;\\n        return {\\n            onStart: (props) => {\\n                component = new ReactRenderer(MentionList, {\\n                    props,\\n                    editor: props.editor,\\n                });\\n                if (!props.clientRect) return;\\n                component.element.style.position = 'absolute';\\n                document.body.appendChild(component.element);\\n                updatePosition(props.editor, component.element);\\n            },\\n            onUpdate(props) {\\n                component.updateProps(props);\\n                if (!props.clientRect) return;\\n                updatePosition(props.editor, component.element);\\n            },\\n            onKeyDown(props) {\\n                function onExit() {\\n                    component.destroy();\\n                }\\n                return component.ref.onKeyDown({ ...props, exitCb: onExit });\\n            },\\n            onExit() {\\n                component.element.remove();\\n                component.destroy();\\n            },\\n            focusEditor(props) {\\n                props.editor.commands.focus();\\n            },\\n        };\\n    },\\n};\\n\\nconst customReferences = [\\n    {\\n        type: 'file',\\n        key: '1',\\n        name: 'horizontalScroller.tsx',\\n        path: 'packages/semi-ui/AIChatInput/horizontalScroller.tsx',\\n    },\\n    {\\n        type: 'folder',\\n        key: '2',\\n        name: 'AIChatInput',\\n        path: 'packages/semi-ui/AIChatInput',\\n    },\\n    {\\n        type: 'web',\\n        key: '3',\\n        name: 'web'\\n    },\\n    {\\n        type: 'change',\\n        key: '4',\\n        name: 'recentChange'\\n    },\\n    {\\n        type: 'branch',\\n        key: '5',\\n        name: 'Branch',\\n        detail: 'Diff with Main Branch',\\n        branch: 'feat/aichatinput',\\n        targetBranch: 'feat/targetBranch',\\n    },\\n    {\\n        type: 'terminal',\\n        key: '6',\\n        name: 'From 1-2',\\n        from: 1,\\n        to: 2,\\n    }\\n];\\n\\nclass MentionList extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            selectedIndex: 0,\\n            level: 1,\\n            options: FirstLevel,\\n            filterOptions: FirstLevel,\\n        };\\n        this.upHandler = this.upHandler.bind(this);\\n        this.downHandler = this.downHandler.bind(this);\\n        this.enterHandler = this.enterHandler.bind(this);\\n        this.selectItem = this.selectItem.bind(this);\\n        this.onKeyDown = this.onKeyDown.bind(this);\\n        this.renderItem = this.renderItem.bind(this);\\n        // \\u9009\\u9879\\u9762\\u677F\\u6E32\\u67D3\\uFF0C\\u5219 Enter \\u5FEB\\u6377\\u952E\\u5E94\\u8BE5\\u7528\\u4E8E\\u9009\\u9879\\u9762\\u677F\\u4E2D\\uFF0C\\u4E0D\\u80FD\\u7528\\u4E8E AIChatInput \\u7684\\u53D1\\u9001\\uFF0C\\n        props.command({ allowHotKeySend: false });\\n    }\\n    componentWillUnmount() {\\n        // \\u9009\\u9879\\u9762\\u677F\\u5378\\u8F7D\\uFF0C\\u5219 Enter \\u5FEB\\u6377\\u952E\\u5E94\\u8BE5\\u7528\\u4E8E AIChatInput \\u7684\\u53D1\\u9001\\n        this.props.command({ allowHotKeySend: true });\\n    }\\n    upHandler() {\\n        const { selectedIndex, filterOptions } = this.state;\\n        this.setState({\\n            selectedIndex: (selectedIndex + filterOptions.length - 1) % filterOptions.length,\\n        });\\n    };\\n    downHandler() {\\n        const { selectedIndex, filterOptions } = this.state;\\n        this.setState({\\n            selectedIndex: (selectedIndex + 1) % filterOptions.length,\\n        });\\n    };\\n    enterHandler () {\\n        const { selectedIndex, level } = this.state;\\n        if (level === 1) {\\n            this.setState({\\n                level: 2,\\n                options: TestAction[FirstLevel[selectedIndex]],\\n                selectedIndex: 0,\\n            });\\n        } else {\\n            this.selectItem(selectedIndex);\\n        }\\n    };\\n    selectItem(id) {\\n        const { options } = this.state;\\n        const item = options[id];\\n        if (item) {\\n            this.props.command({ item });\\n        }\\n    };\\n    componentDidUpdate(prevProps, prevState) {\\n        if (prevProps.items !== this.props.items) {\\n            this.setState({ selectedIndex: 0 });\\n        }\\n        if ( prevState.options !== this.state.options ||\\n        prevProps.query !== this.props.query\\n        ) {\\n            // \\u624B\\u52A8 filter\\n            let filter = [];\\n            if (this.props.query && this.props.query.length) {\\n                filter = (this.state.options ? this.state.options : []).filter((item) => {\\n                    let name;\\n                    if (typeof item === 'string') {\\n                        name = item;\\n                    } else {\\n                        name = item.name;\\n                    }\\n                    return name.toLowerCase().includes(this.props.query.toLowerCase());\\n                });\\n            } else {\\n                filter = this.state.options ? this.state.options : [];\\n            }\\n            this.setState({ \\n                filterOptions: filter, \\n                selectedIndex: 0\\n            });\\n        }\\n    }\\n    componentDidMount() {\\n        if (this.props.innerRef) {\\n            this.props.innerRef.current = {\\n                onKeyDown: this.onKeyDown,\\n            };\\n        }\\n    }\\n    onKeyDown({ event, exitCb }) {\\n        if (event.key === 'ArrowUp') {\\n            this.upHandler();\\n            return true;\\n        }\\n        if (event.key === 'ArrowDown') {\\n            this.downHandler();\\n            return true;\\n        }\\n        if (event.key === 'Enter') {\\n            this.enterHandler();\\n            return true;\\n        }\\n        if (event.key === 'Escape') {\\n            if (this.state.level === 1) {\\n                exitCb && exitCb();\\n                return true;\\n            } else if (this.state.level === 2) {\\n                this.setState({ level: 1, options: FirstLevel });\\n                return true;\\n            }\\n        }\\n        return false;\\n    };\\n\\n    // \\u660E\\u786E\\u53C2\\u6570\\u7C7B\\u578B\\n    renderItem(item) {\\n        return (\\n            <div className=\\\"level2Item\\\">\\n                {item.icon}\\n                <span className=\\\"name\\\">{item.name}</span>\\n                <span className=\\\"path\\\">{item.path}</span>\\n            </div>\\n        );\\n    };\\n    render() {\\n        const { level, filterOptions, selectedIndex } = this.state;\\n        return (\\n            <div className=\\\"ai-chat-input-custom-extension-dropdown-menu\\\" style={{ width: level === 1 ? 200 : 300 }}>\\n                {filterOptions.length ? (filterOptions.map(\\n                    (item, index ) => (\\n                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events\\n                        <div\\n                            key={index}\\n                            className={ index === selectedIndex ? 'is-selected optionItem' : 'optionItem '}\\n                            onClick={() => {\\n                                if (level === 1) {\\n                                    if (typeof item === 'string') {\\n                                        this.setState({ level: 2, options: TestAction[item] });\\n                                        this.props.editor.commands.focus();\\n                                    }\\n                                } else {\\n                                    if (typeof item !== 'string') {\\n                                        this.selectItem(index);\\n                                    }\\n                                }\\n                            }}\\n                            onMouseEnter={() => {\\n                                this.setState({ selectedIndex: index });\\n                            }}\\n                        >\\n                            {typeof item === 'string' ? <span>{item}</span> : this.renderItem(item)}\\n                            {level === 1 && <IconChevronRight className='option-item-arrow'/>}\\n                        </div>\\n                    ),\\n                )) : <div className=\\\"item\\\">No result</div>}\\n            </div>\\n        );\\n    }\\n}\\n\\nfunction getAttachmentType(item = {}) {\\n    const { type, name = '', fileInstance = {} } = item;\\n    if (type) {\\n        return type;\\n    }\\n    const suffix = name.split('.').pop();\\n    if (suffix) {\\n        return suffix;\\n    } else if (fileInstance.type && fileInstance.type) {\\n        const temp = fileInstance.type.split('/').pop();\\n        if (temp) {\\n            return temp;\\n        }\\n    }\\n    return 'UNKNOWN';\\n}\\n\\nfunction isImageType(item = {}) {\\n    const PIC_PREFIX = 'image/';\\n    const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];\\n    const { name = '', fileInstance = {} } = item;\\n    const suffix = name.split('.').pop();\\n    let result = false;\\n    const { type = '' } = fileInstance;\\n    if (type.startsWith(PIC_PREFIX)) {\\n        result = true;\\n    } else if (PIC_SUFFIX_ARRAY.includes(suffix)) {\\n        result = true;\\n    }\\n    return result;\\n}\\n\\nconst refTypeToIconMap = new Map([\\n    ['file', <IconFile key={'file'} size=\\\"small\\\" />],\\n    ['folder', <IconFolder key={'folder'} size=\\\"small\\\" />],\\n    ['branch', <IconBranch key={'branch'} size=\\\"small\\\" />],\\n    ['terminal', <IconTerminal key={'terminal'} size=\\\"small\\\" /> ],\\n    ['web', <IconGlobeStroke key={'globalStroke'} size=\\\"small\\\" />],\\n    ['change', <IconConnectionPoint2 key={'connectionPoint2'} size=\\\"small\\\" />],\\n    ['git', <IconGit key=\\\"git\\\" size=\\\"small\\\" />],\\n    ['code', <IconCode key=\\\"code\\\" size=\\\"small\\\" />],\\n]);\\n\\nfunction CustomRichTextExtension() {\\n    const ref = useRef();\\n    const [reference, setReference] = useState(customReferences);\\n    const extensions = useMemo(() => {\\n        // \\u4F7F\\u7528 @ \\u89E6\\u53D1\\n        return [\\n            ReferSlot,\\n            Mention.configure({\\n                HTMLAttributes: {\\n                    class: 'mention',\\n                },\\n                suggestion,\\n            }),\\n        ];\\n    }, []);\\n    const renderTopSlot = useCallback((props) => {\\n        const { attachments = [], references = [], content = [] } = props;\\n        const showContent = content.filter((item) => item.type !== 'text');\\n        return <div className=\\\"ai-chat-input-topSlot\\\">\\n            {/* order: reference, rich text area content, attachments */}\\n            {showContent.map((item, index) => {\\n                const { type, value, name, key, detail, ...rest } = item;\\n                return (\\n                    <div className=\\\"item\\\" key={key ? key : index}>\\n                        <span className='item-icon'>\\n                            {React.cloneElement(refTypeToIconMap.get(type), { className: 'item-left item-icon' })}\\n                            <IconClose size=\\\"small\\\" className='item-icon-delete' onClick={() => {\\n                                if (ref.current && ref.current.deleteContent) {\\n                                    ref.current.deleteContent(item);\\n                                }\\n                            }}/>\\n                        </span>\\n                        <span className='item-content'>\\n                            {name ? name : value}\\n                            {type === 'branch' && <span className='detail'>{detail}</span>}\\n                        </span>\\n                    </div>\\n                );\\n            })}\\n            {references.map((item, index) => {\\n                const { type, name, detail, key, ...rest } = item;\\n                return (\\n                    <div className=\\\"item\\\" key={key}>\\n                        <span className='item-icon'>\\n                            {React.cloneElement(refTypeToIconMap.get(type), { className: 'item-left item-icon' })}\\n                            <IconClose size=\\\"small\\\" className='item-icon-delete' onClick={() => {\\n                                const newReferences = [...references];\\n                                newReferences.splice(index, 1);\\n                                setReference(newReferences);\\n                            }}/>\\n                        </span>\\n                        <span className='item-content'>\\n                            {name}\\n                            {type === 'branch' && <span className='detail'>{detail}</span>}\\n                        </span>\\n                    </div>\\n                );\\n            })}\\n            {attachments.map((item, index) => {\\n                const isImage = isImageType(item);\\n                const realType = getAttachmentType(item);\\n                const { uid, name, url, size, percent, status } = item;\\n                return (\\n                    <div className=\\\"item\\\" key={uid}>\\n                        <span className='item-icon'>\\n                            {isImage ? <img className='item-image item-left' src={item.url} alt={item.name} /> : <IconUpload size=\\\"small\\\" className='item-left item-icon' />}\\n                            <IconClose size=\\\"small\\\" className='item-icon-delete' onClick={() => {\\n                                if (ref.current && ref.current.deleteUploadFile) {\\n                                    ref.current.deleteUploadFile(item);\\n                                }\\n                            }}/>\\n                        </span>\\n                        <span className='item-content'>{name}</span>\\n                    </div>\\n                );\\n            })}\\n        </div>;\\n    }, []);\\n    const onContentChange = useCallback((content) => {\\n        console.log('onContentChange', content);\\n    }, []);\\n    const transformer = useMemo(() => {\\n        return new Map([\\n            ['referSlot', (obj) => {\\n                const { attrs = {} } = obj;\\n                const { value, info, type = 'text', uniqueKey } = attrs;\\n                return {\\n                    type: type, \\n                    value: value,\\n                    uniqueKey: uniqueKey,\\n                    ...JSON.parse(info),\\n                };\\n            }],\\n        ]);\\n    }, []);\\n    return (\\n        <>\\n            <AIChatInput\\n                className='aiChatInput-customTopSlot'\\n                renderTopSlot={renderTopSlot}\\n                extensions={extensions}\\n                references={reference}\\n                showUploadFile={false}\\n                showReference={false}\\n                onContentChange={onContentChange}\\n                ref={ref}\\n                transformer={transformer}\\n                uploadProps={uploadProps}\\n                style={outerStyle}\\n                placeholder=\\\"\\u4F7F\\u7528 @ \\u89E6\\u53D1\\\"\\n            />\\n        </>\\n    );\\n};\\n\\nrender(<CustomRichTextExtension />);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AIChatInput\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"canSend\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u53EF\\u4EE5\\u53D1\\u9001\\uFF0C\\u672A\\u8BBE\\u7F6E\\u65F6\\uFF0C\\u6839\\u636E\\u8F93\\u5165\\u6846\\u5185\\u5BB9\\uFF0C\\u4E0A\\u4F20\\u5185\\u5BB9\\uFF0C\\u5F15\\u7528\\u5185\\u5BB9\\u51B3\\u5B9A\\u662F\\u5426\\u53EF\\u53D1\\u9001\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clearContentOnGenerating\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 generating \\u4ECE false \\u53D8\\u4E3A true \\u65F6\\uFF0C\\u662F\\u5426\\u6E05\\u7A7A\\u8F93\\u5165\\u6846\\u5185\\u5BB9\\u548C\\u9644\\u4EF6\\u3002\\u8BBE\\u4E3A false \\u53EF\\u4FDD\\u7559\\u8F93\\u5165\\u5185\\u5BB9\\uFF08\\u9002\\u7528\\u4E8E\\u65E0\\u9650\\u753B\\u5E03\\u7B49\\u975E\\u5BF9\\u8BDD\\u573A\\u666F\\uFF09 \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \">=2.94.0\")), 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  }, \"defaultContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u9ED8\\u8BA4\\u5185\\u5BB9\\uFF0C\\u652F\\u6301 html string \\u4EE5\\u53CA json \\u683C\\u5F0F\\uFF0C\\u540C Tiptap \\u7684 Content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TiptapContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownMatchTriggerWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u5F39\\u51FA\\u5C42\\u662F\\u5426\\u662F\\u5426\\u4E0E\\u8F93\\u5165\\u6846\\u5BBD\\u5EA6\\u4E00\\u81F4\"), 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  }, \"extensions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\uFF0C\\u7C7B\\u578B\\u540C tiptap \\u7684 Extension \\u7C7B\\u578B\\u76F8\\u540C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Extension[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"immediatelyRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F5C\\u4E3A tiptap \\u7684 userEditor \\u7684\\u53C2\\u6570\\uFF0C \\u5982\\u679C\\u4E3A SSR \\u573A\\u666F\\uFF0C\\u9700\\u8981\\u8BBE\\u7F6E\\u6B64\\u53C2\\u6570\\u4E3A false\\uFF0C\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://tiptap.dev/docs/editor/getting-started/install/react#use-ssr-with-react-and-tiptap\"\n  }, \"use-ssr-with-react-and-tiptap\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"generating\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u6B63\\u5728\\u751F\\u6210\\u4E2D\"), 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  }, \"onContentChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5185\\u5BB9\\u53D8\\u5316\\u65F6\\u5019\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: \", mdx(ApiType, {\n    detail: \"{ type: string; [key: string]: any }\",\n    mdxType: \"ApiType\"\n  }, \"OnContentChangeProps\"), \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMessageSend\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u6D88\\u606F\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: \", mdx(ApiType, {\n    detail: \"{references?: Reference[]; attachments?: Attachment[]; inputContents?: Content[]; setup?: Setup}\",\n    mdxType: \"ApiType\"\n  }, \"OnMessageSendProps\"), \") => 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  }, \"\\u5F15\\u7528\\u70B9\\u51FB\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(reference: Reference) => 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  }, \"onReferenceDelete\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F15\\u7528\\u5220\\u9664\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(reference: Reference) => 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  }, \"onSkillChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6280\\u80FD\\u5207\\u6362\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(skill: Skill) => 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  }, \"onStopGenerate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u505C\\u6B62\\u751F\\u6210\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSuggestClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5EFA\\u8BAE\\u70B9\\u51FB\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(suggestion: Suggestion) => 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  }, \"onTemplateVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6A21\\u677F\\u5F39\\u51FA\\u5C42\\u53EF\\u89C1\\u6027\\u53D8\\u5316\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(visible: boolean) => 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  }, \"onUploadChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4F20\\u6587\\u4EF6\\u76F8\\u5173\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: OnChangeProps) => 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  }, \"renderUploadButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u4E0A\\u4F20\\u6309\\u94AE UI\\uFF08Upload \\u4ECD\\u7531\\u7EC4\\u4EF6\\u5185\\u90E8\\u6258\\u7BA1\\uFF0C\\u4FDD\\u7559\\u5185\\u7F6E\\u4E0A\\u4F20/\\u7C98\\u8D34\\u4E0A\\u4F20\\u903B\\u8F91\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: \", mdx(ApiType, {\n    detail: \"{ defaultNode: React.ReactNode; openFileDialog: () => void; disabled: boolean; attachments: Attachment[] }\",\n    mdxType: \"ApiType\"\n  }, \"RenderUploadButtonProps\"), \") => 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  }, \"popoverProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u62C9\\u5F39\\u51FA\\u5C42\\u7684\\u914D\\u7F6E\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"PopoverProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5360\\u4F4D\\u7B26\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" (props: \", mdx(ApiType, {\n    detail: \"{ editor: Editor; node: Node; pos: number; hasAnchor: boolean }\",\n    mdxType: \"ApiType\"\n  }, \"PlaceholderProps\"), \") => 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  }, \"showPlaceholderWhenSkillOnly\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u4EC5\\u9009\\u4E2D\\u6280\\u80FD\\uFF08\\u65E0\\u5176\\u4ED6\\u5185\\u5BB9\\uFF09\\u65F6\\u662F\\u5426\\u663E\\u793A placeholder\\uFF0C\\u5F00\\u542F\\u540E placeholder \\u4F1A\\u663E\\u793A\\u5728 skill \\u540E\\u65B9\"), 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  }, \"references\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5F15\\u7528\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Reference[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderActionArea\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5E95\\u90E8\\u7684\\u64CD\\u4F5C\\u533A\\u57DF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderConfigureArea\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5E95\\u90E8\\u7684\\u914D\\u7F6E\\u533A\\u57DF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderReference\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u5F15\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(reference: Reference) => 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  }, \"renderSkillItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6280\\u80FD\\u5217\\u8868\\u7684 item \\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: \", mdx(ApiType, {\n    detail: \"{skill: Skill; onClick: () => void; className: string, onMouseEnter: () => void}\",\n    mdxType: \"ApiType\"\n  }, \"RenderSkillItemProps\"), \") => 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  }, \"renderSuggestionItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5EFA\\u8BAE\\u5217\\u8868\\u7684 item \\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: \", mdx(ApiType, {\n    detail: \"{ suggestion: Suggestion; onClick: () => void; className: string, onMouseEnter: () => void}\",\n    mdxType: \"ApiType\"\n  }, \"RenderSkillItemProps\"), \") => 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  }, \"renderTemplate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6A21\\u677F\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(skill: Skill, onTemplateClick: (content: string) => 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  }, \"renderTopSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9876\\u90E8 slot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => React.ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"round\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8\\u7684\\u914D\\u7F6E\\u533A\\u57DF\\u548C\\u64CD\\u4F5C\\u533A\\u57DF\\u662F\\u5426\\u5F62\\u72B6\\u662F\\u5426\\u4E3A\\u5168\\u5706\\u89D2\"), 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  }, \"onBlur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u6846\\u5931\\u7126\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: React.FocusEvent) => 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  }, \"onConfigureChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u914D\\u7F6E\\u533A\\u57DF\\u53D1\\u751F\\u53D8\\u5316\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: LeftMenuChangeProps, changedValue: LeftMenuChangeProps) => 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  }, \"onFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BCC\\u6587\\u672C\\u8F93\\u5165\\u6846\\u805A\\u7126\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: React.FocusEvent) => 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  }, \"onPaste\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u76D1\\u542C\\u8F93\\u5165\\u6846\\u7C98\\u8D34\\u4E8B\\u4EF6\\uFF08\\u4E0D\\u9ED8\\u8BA4\\u963B\\u6B62\\u7C98\\u8D34\\u884C\\u4E3A\\uFF0C\\u53EF\\u901A\\u8FC7 event.clipboardData \\u83B7\\u53D6\\u5185\\u5BB9\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"(event: React.ClipboardEvent<HTMLDivElement>) => 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  }, \"sendHotKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D1\\u9001\\u8F93\\u5165\\u5185\\u5BB9\\u7684\\u952E\\u76D8\\u5FEB\\u6377\\u952E\\uFF0C\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"enter\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"shift+enter\"), \"\\u3002\\u524D\\u8005\\u5728\\u5355\\u72EC\\u6309\\u4E0B enter \\u5C06\\u53D1\\u9001\\u8F93\\u5165\\u6846\\u4E2D\\u7684\\u6D88\\u606F\\uFF0C shift \\u548C enter \\u6309\\u952E\\u540C\\u65F6\\u6309\\u4E0B\\u65F6\\uFF0C\\u4EC5\\u6362\\u884C\\uFF0C\\u4E0D\\u53D1\\u9001\\u3002\\u540E\\u8005\\u76F8\\u53CD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"enter\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showReference\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5F15\\u7528\\u533A\\u57DF\\uFF0C\\u7528\\u4E8E\\u914D\\u5408 renderTopSlot \\u4F7F\\u7528\"), 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  }, \"showTemplateButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u6A21\\u677F\\u6309\\u94AE\\uFF0C\\u672A\\u8BBE\\u7F6E\\u65F6\\uFF0C\\u5C06\\u6839\\u636E\\u5F53\\u524D\\u9009\\u4E2D\\u6280\\u80FD\\u4E2D\\u7684 hasTemplate \\u51B3\\u5B9A\\u662F\\u5426\\u5C55\\u793A\\u6A21\\u7248\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showUploadButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u53F3\\u4FA7\\u4E0A\\u4F20\\u6309\\u94AE\\uFF0C\\u81EA 2.90.0 \\u652F\\u6301\"), 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  }, \"showUploadFile\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u4E0A\\u4F20\\u6587\\u4EF6\\u533A\\u57DF\\uFF0C\\u7528\\u4E8E\\u914D\\u5408 renderTopSlot \\u4F7F\\u7528\"), 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  }, \"skillHotKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u4E2D\\u89E6\\u53D1\\u6280\\u80FD\\u7684\\u70ED\\u952E\"), 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  }, \"skills\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6280\\u80FD\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Skill[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.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  }, \"suggestions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5EFA\\u8BAE\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Suggestion[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"templatesCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6A21\\u7248\\u7684\\u6837\\u5F0F\\u7C7B\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"templatesStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6A21\\u7248\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.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  }, \"topSlotPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9876\\u90E8 slot \\u4F4D\\u7F6E\\uFF0C\\u76F8\\u5BF9\\u4E8E\\u5F15\\u7528\\u5185\\u5BB9\\uFF0C\\u4E0A\\u4F20\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top' \", \"|\", \" 'bottom' \", \"|\", \" 'middle'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transformer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6269\\u5C55\\u7684\\u8F6C\\u6362\\u89C4\\u5219\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Map<string, (obj: any) => any>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4F20\\u6587\\u4EF6\\u76F8\\u5173\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"UploadProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uploadTipProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4F20\\u6587\\u4EF6\\u76F8\\u5173\\u63D0\\u793A\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"UploadTipProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Configure.Select\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u540C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/select\"\n  }, \"ButtonProps\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Configure.Button\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u540C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/button#Button\"\n  }, \"ButtonProps\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Configure.RadioButton\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u540C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/radio#RadioGroup\"\n  }, \"RadioGroupProps\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Configure.Mcp\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"options\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mcp \\u9009\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"McpOption\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showConfigure\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u914D\\u7F6E\\u6309\\u94AE, v2.89.0 \\u65B0\\u589E\"), 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  }, \"onConfigureButtonClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u914D\\u7F6E\\u6309\\u94AE\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\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  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"changeTemplateVisible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u6A21\\u677F\\u5F39\\u51FA\\u5C42\\u7684\\u53EF\\u89C1\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(visible: boolean) => 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  }, \"deleteContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5220\\u9664\\u5BCC\\u6587\\u672C\\u4E2D\\u7684\\u67D0\\u4E00\\u9879\\uFF0C\\u5220\\u9664\\u903B\\u8F91\\u4F9D\\u8D56\\u7684\\u662F content \\u4E2D\\u7684 uniqueKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: Content) => 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  }, \"deleteUploadFile\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5220\\u9664\\u4E0A\\u4F20\\u6587\\u4EF6\\u4E2D\\u7684\\u67D0\\u4E00\\u9879\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: Attachment) => 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  }, \"focusEditor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u805A\\u7126\\u8F93\\u5165\\u6846\\uFF0C\\u9ED8\\u8BA4\\u805A\\u7126\\u5230\\u8F93\\u5165\\u6846\\u7684\\u672B\\u5C3E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(pos?: 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  }, \"getEditor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6\\u5F53\\u524D\\u7684 tiptap \\u7684 editor \\u5B9E\\u4F8B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => Editor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setContent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u8F93\\u5165\\u6846\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: TiptapContent) => 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  }, \"setContentWhileSaveTool\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FDD\\u7559\\u6280\\u80FD\\u9879\\u7684\\u540C\\u65F6\\u8BBE\\u7F6E\\u8F93\\u5165\\u6846\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(content: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ai/aiChatInput","next":{"fields":{"slug":"en-US/ai/aiChatDialogue"},"id":"d0060c25-1e2a-5be1-bfbc-bc2394fcbb56","frontmatter":{"title":"AIChatDialogue","localeCode":"en-US","icon":"doc-aiDialogue","showNew":true}},"previous":{"fields":{"slug":"en-US/ai/aiChatInput"},"id":"1d8feec8-f2a8-53d3-8d6d-3b2512ada8e3","frontmatter":{"title":"AIChatInput","localeCode":"en-US","icon":"doc-aiInput","showNew":true}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}