1<!DOCTYPE html> 2<html lang="en-US" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=cb006e4e-afce-4c3e-9652-6f8a065b5b6e 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <title>ç¬ç«å¼ | Ant Design X Vue</title> 10 <meta name="description" content="Ant Design X For Vue"> 11 <meta name="generator" content="VitePress v1.5.0"> 12 <link rel="preload stylesheet" href="/assets/style.Cmm6AGrc.css" as="style"> 13 <link rel="preload stylesheet" href="/vp-icons.css" as="style"> 14 15
15<script type="module" src="/assets/app.BiqZGm-U.js"></script>
15 16 <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin=""> 17 <link rel="modulepreload" href="/assets/chunks/theme.DoOlbyuc.js"> 18 <link rel="modulepreload" href="/assets/chunks/framework.CRfA3hWN.js"> 19 <link rel="modulepreload" href="/assets/playground_independent.md.C8NgMNos.lean.js"> 20 <link rel="icon" href="/images/x-logo.svg"> 21
21<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
21 22
22<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
22 23 </head> 24 <body> 25 <div id="app"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="Layout" data-v-553014fb><!--[--><!--]--><!--[--><span tabindex="-1" data-v-1acfc423></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-1acfc423> Skip to content </a><!--]--><!----><header class="VPNav" data-v-553014fb data-v-56a8e719><div class="VPNavBar" data-v-56a8e719 data-v-ffb6a34d><div class="wrapper" data-v-ffb6a34d><div class="container" data-v-ffb6a34d><div class="title" data-v-ffb6a34d><div class="VPNavBarTitle has-sidebar" data-v-ffb6a34d data-v-51430e44><a class="title" href="/" data-v-51430e44><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original" alt data-v-b1cf9f1e><!--]--><span data-v-51430e44>Ant Design X Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-ffb6a34d><div class="content-body" data-v-ffb6a34d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ffb6a34d><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ffb6a34d data-v-4e306fa8><span id="main-nav-aria-label" class="visually-hidden" data-v-4e306fa8> Main Navigation </span><!--[--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/development/introduce' tabindex='0'><!--[--><span data-v-cfc2fde8>ç å</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/component/overview' tabindex='0'><!--[--><span data-v-cfc2fde8>ç»ä»¶</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink active' data-v-4e306fa8 data-v-cfc2fde8 href='/playground/independent' tabindex='0'><!--[--><span data-v-cfc2fde8>æ¼ç¤º</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-4e306fa8 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-44aa6036><span class="text" data-v-44aa6036><!----><span data-v-44aa6036>æ´å¤</span><span class="vpi-chevron-down text-icon" data-v-44aa6036></span></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><div class="items" data-v-23a1759c><!--[--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://x.ant.design/index-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design X of React</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://www.antdv.com/components/overview-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design Vue</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ffb6a34d data-v-ba352aa2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ba352aa2 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ffb6a34d data-v-1bcdcf74 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ffb6a34d data-v-ae934832 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-44aa6036><span class="vpi-more-horizontal icon" data-v-44aa6036></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><!----><!--[--><!--[--><!----><div class="group" data-v-ae934832><div class="item appearance" data-v-ae934832><p class="label" data-v-ae934832>Appearance</p><div class="appearance-action" data-v-ae934832><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ae934832 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ae934832><div class="item social-links" data-v-ae934832><div class="VPSocialLinks social-links-list" data-v-ae934832 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a>
25<!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ffb6a34d data-v-89874f16><span class="container" data-v-89874f16><span class="top" data-v-89874f16></span><span class="middle" data-v-89874f16></span><span class="bottom" data-v-89874f16></span></span></button></div></div></div></div><div class="divider" data-v-ffb6a34d><div class="divider-line" data-v-ffb6a34d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-553014fb data-v-97d01931><div class="container" data-v-97d01931><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-97d01931><span class="vpi-align-left menu-icon" data-v-97d01931></span><span class="menu-text" data-v-97d01931>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-97d01931 data-v-7cbc86f7><button data-v-7cbc86f7>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-553014fb data-v-b304f0b8><div class="curtain" data-v-b304f0b8></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b304f0b8><span class="visually-hidden" id="sidebar-aria-label" data-v-b304f0b8> Sidebar Navigation </span><!--[--><!--[--><div style="margin-top:16px;"><div class="ant-descriptions css-13gz7x"><!----><div class="ant-descriptions-view"><table><tbody><!--[--><tr class="ant-descriptions-row"><!--[--><td class="ant-descriptions-item" colspan="3" style=""><div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label" style="">飿 ¼å好</span><span class="ant-descriptions-item-content" style=""><!--[--><button style="background:#424242;" type="button" role="switch" aria-checked="false" class="ant-switch css-13gz7x"><div class="ant-switch-handle"><!----></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">tsx</span><span class="ant-switch-inner-unchecked">setup</span></span></button><!--]--></span></div></td><!--]--></tr><!--]--></tbody></table></div></div></div><!--]--><!--]--><!--[--><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0 has-active" data-v-5ddbaa3e data-v-ee2b6304><div class="item" role="button" tabindex="0" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><h2 class="text" data-v-ee2b6304>æ ·æ¿é´</h2><!----></div><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/playground/independent'><!--[--><p class="text" data-v-ee2b6304>ç¬ç«å¼</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/playground/copilot'><!--[--><p class="text" data-v-ee2b6304>婿å¼</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-553014fb data-v-e25e763a><div class="VPDoc has-sidebar" data-v-e25e763a data-v-7b344cb4><!--[--><!--]--><div class="container" data-v-7b344cb4><!----><div class="content" data-v-7b344cb4><div class="content-container" data-v-7b344cb4><!--[--><!--]--><main class="main" data-v-7b344cb4><div style="position:relative;" class="vp-doc _playground_independent" data-v-7b344cb4><div><h1 id="ç¬ç«å¼" tabindex="-1">ç¬ç«å¼ <a class="header-anchor" href="#ç¬ç«å¼" aria-label="Permalink to "ç¬ç«å¼"">â</a></h1><!--[--><div style="margin-top:16px;margin-bottom:16px;" data-v-f2775be5></div><!--[--><!--[--><!--[--><!--[--><!--[--><div class="example" data-v-f2775be5><div class="example-showcase" data-v-f2775be5><!--[--><div style="width:100%;min-width:1000px;height:722px;display:flex;background:#141414;font-family:AlibabaPuHuiTi, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 26'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 27'Noto Color Emoji', sans-serif;"><div style="background:#00000080;width:280px;height:100%;display:flex;flex-direction:column;padding:0 12px;box-sizing:border-box;"><div style="display:flex;align-items:center;justify-content:start;padding:0 24px;box-sizing:border-box;gap:8px;margin:24px 0;"><img src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original" draggable="false" alt="logo" width="24" height="24"><span style="font-weight:bold;color:rgba(255, 255, 255, 0.85);font-size:16px;">Ant Design X</span></div><button style="background:#1677ff0f;border:1px solid #1677ff34;height:40px;
27" class="css-13gz7x ant-btn ant-btn-link" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" style="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"></path></svg><!----></span><!--[--><span>New Conversation</span><!--]--></button><ul contenteditable="false" draggable="false" spellcheck="false" style="flex:1;overflow-y:auto;margin-top:12px;padding:0;" class="ant-conversations css-e5s4ru"><!--[--><li><!--[--><div class="ant-conversations-group-title"><span class="ant-typography css-13gz7x" style=""><!--[--><!--[--><!--[--><!--[-->Today<!--]--><!--]--><!----><!--]--><!--[--><!--]--><!--]--></span></div><!--]--><ul class="ant-conversations-list"><!--[--><!--[--><li class="ant-conversations-item ant-conversations-item-active"><!----><span class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-conversations-label css-13gz7x" style=""><!--[--><!--[--><!--[-->What is Ant Design X Vue?<!--]--><!----><!--]--><!--[--><!--]--><!--]--></span><!--[--><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis ant-conversations-menu-icon ant-dropdown-trigger" tabindex="-1"><svg focusable="false" style="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg><!----></span><!----><!--]--></li><!----><!--]--><!--[--><li class="ant-conversations-item"><!----><span class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-conversations-label css-13gz7x" style=""><!--[--><!--[--><!--[-->How to quickly install and import components?<!--]--><!----><!--]--><!--[--><!--]--><!--]--></span><!--[--><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis ant-conversations-menu-icon ant-dropdown-trigger" tabindex="-1"><svg focusable="false" style="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg><!----></span><!----><!--]--></li><!----><!--]--><!--]--></ul></li><li><!--[--><div class="ant-conversations-group-title"><span class="ant-typography css-13gz7x" style=""><!--[--><!--[--><!--[--><!--[-->Yesterday<!--]--><!--]--><!----><!--]--><!--[--><!--]--><!--]--></span></div><!--]--><ul class="ant-conversations-list"><!--[--><!--[--><li class="ant-conversations-item"><!----><span class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-conversations-label css-13gz7x" style=""><!--[--><!--[--><!--[-->New AGI Hybrid Interface<!--]--><!----><!--]--><!--[--><!--]--><!--]--></span><!--[--><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis ant-conversations-menu-icon ant-dropdown-trigger" tabindex="-1"><svg focusable="false" style="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg><!----></span><!----><!--]--></li><!----><!--]--><!--]--></ul></li><!--]--></ul><div style="border-top:1px solid #303030;height:40px;display:flex;align-items:center;justify-content:space-between;"><span class="ant-avatar ant-avatar-circle css-13gz7x" style="width:24px;height:24px;line-height:24px;font-size:18px;"><span class="ant-avatar-string" style="opacity:0;"><!----></span></span><button class="css-13gz7x ant-btn ant-btn-text ant-btn-icon-only" type="button"><span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg focusable="false" style="" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg><!----></span><!--[--><!--]--></button></div></div><div style="height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-block:24px;gap:16px;"><div style="flex:1;overflow:auto;"><div style="padding-inline:calc(calc(100% - 700px) /2);padding-top:32px;" class="ant-space css-13gz7x ant-space-vertical"><!--[--><!--[--><div class="ant-space-item" style="margin-bottom:16px;"><div class="ant-welcome css-e5s4ru ant-welcome-borderless ant-flex css-13gz7x" style=""><!--[--><div class="ant-welcome-icon" style=""><img src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp" alt="icon"></div><div class="ant-welcome-content-wrapper ant-flex css-13gz7x ant-flex-align-stretch ant-flex-vertical" style=""><!--[--><div class="ant-welcome-title-wrapper ant-flex css-13gz7x ant-flex-align-flex-start" style=""><!--[--><h4 class="ant-typography ant-welcome-title css-13gz7x" style=""><!--[--><!--[--><!--[-->Hello, I'm Ant Design X Vue<!--]--><!----><!--]--><!--[--><!--]--><!--]--></h4><div class="ant-welcome-extra" style=""><div class="ant-space css-13gz7x ant-space-horizontal ant-space-align-center" style=""><!--[--><!--[--><div class="ant-space-item" style="margin-right:8px;"><button class="css-13gz7x ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="share-alt" class="anticon anticon-share-alt"><svg focusable="false" style="" data-icon="share-alt" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2
270 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path></svg><!----></span><!--[--><!--]--></button></div><!----><!--]--><!--[--><div class="ant-space-item" style=""><button class="css-13gz7x ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" style="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg><!----></span><!--[--><!--]--></button></div><!----><!--]--><!--]--></div></div><!--]--></div><span class="ant-typography ant-welcome-description css-13gz7x" style=""><!--[--><!--[--><!--[-->Base on Ant Design, AGI product interface solution, create a better intelligent vision~<!--]--><!----><!--]--><!--[--><!--]--><!--]--></span><!--]--></div><!--]--></div></div><!----><!--]--><!--[--><div class="ant-space-item" style=""><div class="ant-flex css-13gz7x" style="gap:16px;"><!--[--><div class="ant-prompts css-e5s4ru" style=""><!----><div class="ant-prompts-list" style="height:100%;"><!--[--><div style="flex:1;background-image:linear-gradient(123deg, #1e2a38 0%, #2b1f3b 100%);border-radius:12px;border:none;" class="ant-prompts-item ant-prompts-item-has-nest"><!----><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">Hot Topics</h6><!----><div class="ant-prompts css-e5s4ru ant-prompts-nested" style=""><!----><div class="ant-prompts-list ant-prompts-list-vertical" style=""><!--[--><div style="padding:0;background:transparent;" class="ant-prompts-item"><div class="ant-prompts-icon"><span style="color:#f93a4a;font-weight:700;" data-v-f2775be5>1</span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">What has Ant Design X Vue upgraded?</p><!----></div></div><div style="padding:0;background:transparent;" class="ant-prompts-item"><div class="ant-prompts-icon"><span style="color:#ff6565;font-weight:700;" data-v-f2775be5>2</span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">New AGI Hybrid Interface</p><!----></div></div><div style="padding:0;background:transparent;" class="ant-prompts-item"><div class="ant-prompts-icon"><span style="color:#ff8f1f;font-weight:700;" data-v-f2775be5>3</span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">What components are in Ant Design X Vue?</p><!----></div></div><div style="padding:0;background:transparent;" class="ant-prompts-item"><div class="ant-prompts-icon"><span style="opacity:0.6;font-weight:700;" data-v-f2775be5>4</span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">Come and discover the new design paradigm of the AI era.</p><!----></div></div><div style="padding:0;background:transparent;" class="ant-prompts-item"><div class="ant-prompts-icon"><span style="opacity:0.6;font-weight:700;" data-v-f2775be5>5</span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">How to quickly install and import components?</p><!----></div></div><!--]--></div></div></div></div><!--]--></div></div><div class="ant-prompts css-e5s4ru" style=""><!----><div class="ant-prompts-list" style=""><!--[--><div style="flex:1;background-image:linear-gradient(123deg, #1e2a38 0%, #2b1f3b 100%);border-radius:12px;border:none;" class="ant-prompts-item ant-prompts-item-has-nest"><!----><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">Design Guide</h6><!----><div class="ant-prompts css-e5s4ru ant-prompts-nested" style=""><!----><div class="ant-prompts-list ant-prompts-list-vertical" style=""><!--[--><div style="" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="heart" class="anticon anticon-heart" data-v-f2775be5><svg focusable="false" style="" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">Intention</h6><p class="ant-prompts-desc">AI understands user needs and provides solutions.</p><!----></div></div><div style="" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="smile" class="anticon anticon-smile" data-v-f2775be5><svg focusable="false" style="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">Role</h6><p class="ant-prompts-desc">AI's public persona and image</p><!----></div></div><div style="" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="comment" class="anticon anticon-comment" data-v-f2775be5><svg focusable="false" style="" data-icon="comment" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zm-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"></path><path d="M894 345a343.92 343.92 0 00-189-130v.1c-17.1-19-36.4-36.5-58-52.1-163.7-119-393.5-82.7-513 81-96.3 133-92.2 311.9 6 439l.8 132.6c0 3.2.5 6.4 1.5 9.4a31.95 31.95 0 0040.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-.5.4c89.1 64.9 205.9 84.4 313 49l127.1 41.4c3.2 1 6.5 1.6 9.9 1.6 17.7 0 32-14.3 32-32V753c88.1-119.6 90.4-284.9 1-408zM323 735l-12-5-99 31-1-104-8-9c-84.6-103.2-90.2-251.9-11-361 96.4-132.2 281.2-161.4 413-66 132.2 96.1 161.5 280.6 66 412-80.1 109.9-223.5 150.5-348 102zm505-17l-8 10 1 104-98-33-12 5c-56 20.8-115.7 22.5-171 7l-.2-.1A367.31 367.31 0 00729 676c76.4-105.3 88.8-237.6 44.4-350.4l.6.4c23 16.5 44.1 37.1 62 62 72.6 99.6 68.5 235.2-8 330z"></path><path d="M433 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">
27Chat</h6><p class="ant-prompts-desc">How AI Can Express Itself in a Way Users Understand</p><!----></div></div><div style="" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip" data-v-f2775be5><svg focusable="false" style="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><h6 class="ant-prompts-label">Interface</h6><p class="ant-prompts-desc">AI balances "chat" & "do" behaviors.</p><!----></div></div><!--]--></div></div></div></div><!--]--></div></div><!--]--></div></div><!----><!--]--><!--]--></div></div><!--[--><div class="ant-prompts css-e5s4ru" style="width:100%;max-width:700px;margin:0 auto;color:rgba(255, 255, 255, 0.85);"><!----><div class="ant-prompts-list" style=""><!--[--><div style="padding:6px 12px;" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="schedule" class="anticon anticon-schedule" data-v-f2775be5><svg focusable="false" style="" data-icon="schedule" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M928 224H768v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H548v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H328v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H96c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32zm-40 568H136V296h120v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h148v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h148v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56h120v496zM416 496H232c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm0 136H232c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm308.2-177.4L620.6 598.3l-52.8-73.1c-3-4.2-7.8-6.6-12.9-6.6H500c-6.5 0-10.3 7.4-6.5 12.7l114.1 158.2a15.9 15.9 0 0025.8 0l165-228.7c3.8-5.3 0-12.7-6.5-12.7H737c-5-.1-9.8 2.4-12.8 6.5z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">Upgrades</p><!----></div></div><div style="padding:6px 12px;" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="appstore" class="anticon anticon-appstore" data-v-f2775be5><svg focusable="false" style="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">Components</p><!----></div></div><div style="padding:6px 12px;" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="file-search" class="anticon anticon-file-search" data-v-f2775be5><svg focusable="false" style="" data-icon="file-search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M688 312v-48c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8zm-392 88c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H296zm144 452H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h272c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm445.7 51.5l-93.3-93.3C814.7 780.7 828 743.9 828 704c0-97.2-78.8-176-176-176s-176 78.8-176 176 78.8 176 176 176c35.8 0 69-10.7 96.8-29l94.7 94.7c1.6 1.6 3.6 2.3 5.6 2.3s4.1-.8 5.6-2.3l31-31a7.9 7.9 0 000-11.2zM652 816c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.
271 112-112 112z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">RICH Guide</p><!----></div></div><div style="padding:6px 12px;" class="ant-prompts-item"><div class="ant-prompts-icon"><span role="img" aria-label="appstore-add" class="anticon anticon-appstore-add" data-v-f2775be5><svg focusable="false" style="" data-icon="appstore-add" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zm52 132H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200zM424 712H296V584c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v128H104c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h128v128c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V776h128c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg><!----></span></div><div class="ant-prompts-content" style=""><!----><p class="ant-prompts-desc">Installation Introduction</p><!----></div></div><!--]--></div></div><div class="ant-sender css-e5s4ru" style="width:100%;max-width:700px;margin:0 auto;"><!--[--><!----><!--]--><!--[--><div class="ant-sender-content"><div class="ant-sender-prefix" style=""><button class="css-13gz7x ant-btn ant-btn-text ant-btn-icon-only" type="button"><span role="img" aria-label="paper-clip" style="font-size:18px;" class="anticon anticon-paper-clip"><svg focusable="false" style="" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg><!----></span><!--[--><!--]--></button></div><textarea class="ant-input ant-input-borderless ant-sender-input css-13gz7x" placeholder="Ask or input / use skills" bordered="false" style="overflow-x:hidden;overflow-y:hidden;"></textarea><div class="ant-sender-actions-list" style=""><div class="ant-flex css-13gz7x" style="gap:4px;"><!--[--><button class="css-13gz7x ant-btn ant-btn-text ant-sender-actions-btn ant-sender-actions-btn-disabled ant-btn-icon-only" style="display:flex;justify-content:center;align-items:center;color:rgba(255, 255, 255, 0.85) !important;font-size:18px;" type="button"><!--[--><span role="img" aria-label="audio-muted" class="anticon anticon-audio-muted" data-v-f2775be5><svg focusable="false" style="" data-icon="audio-muted" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z"></path><path d="M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z"></path></svg><!----></span><!--]--><!--[--><!--]--></button><button class="css-13gz7x ant-btn ant-btn-circle ant-btn-primary ant-sender-actions-btn ant-btn-icon-only" type="button"><!--[--><span role="img" aria-label="arrow-up" class="anticon anticon-arrow-up"><svg focusable="false" style="" data-icon="arrow-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"></path></svg><!----></span><!--]--><!--[--><!--]--></button><!--]--></div></div></div><!----><!--]--></div><!--]--></div></div><!--]--><!----></div><div style="margin:0;" class="ant-divider css-13gz7x ant-divider-horizontal" role="separator" data-v-f2775be5><!----></div><div class="op-btns" data-v-f2775be5><!--[--><span role="link" aria-label="thunderbolt" class="anticon anticon-thun
27derbolt op-btn" tabindex="0" data-v-f2775be5><svg focusable="false" style="" data-icon="thunderbolt" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path></svg><!----></span><!----><!--]--><!--[--><button aria-label="æ¥çæºä»£ç " class="op-btn" data-v-f2775be5><span role="img" aria-label="function" class="anticon anticon-function" data-v-f2775be5><svg focusable="false" style="" data-icon="function" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M841 370c3-3.3 2.7-8.3-.6-11.3a8.24 8.24 0 00-5.3-2.1h-72.6c-2.4 0-4.6 1-6.1 2.8L633.5 504.6a7.96 7.96 0 01-13.4-1.9l-63.5-141.3a7.9 7.9 0 00-7.3-4.7H380.7l.9-4.7 8-42.3c10.5-55.4 38-81.4 85.8-81.4 18.6 0 35.5 1.7 48.8 4.7l14.1-66.8c-22.6-4.7-35.2-6.1-54.9-6.1-103.3 0-156.4 44.3-175.9 147.3l-9.4 49.4h-97.6c-3.8 0-7.1 2.7-7.8 6.4L181.9 415a8.07 8.07 0 007.8 9.7H284l-89 429.9a8.07 8.07 0 007.8 9.7H269c3.8 0 7.1-2.7 7.8-6.4l89.7-433.1h135.8l68.2 139.1c1.4 2.9 1 6.4-1.2 8.8l-180.6 203c-2.9 3.3-2.6 8.4.7 11.3 1.5 1.3 3.4 2 5.3 2h72.7c2.4 0 4.6-1 6.1-2.8l123.7-146.7c2.8-3.4 7.9-3.8 11.3-1 .9.8 1.6 1.7 2.1 2.8L676.4 784c1.3 2.8 4.1 4.7 7.3 4.7h64.6a8.02 8.02 0 007.2-11.5l-95.2-198.9c-1.4-2.9-.9-6.4 1.3-8.8L841 370z"></path></svg><!----></span></button><!----><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-f2775be5 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"><</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">script setup lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"tsx"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 28<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 29<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Attachments,</span></span> 30<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> AttachmentsProps,</span></span> 31<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Bubble,</span></span> 32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Conversations,</span></span> 33<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Prompts,</span></span> 34<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> PromptsProps,</span></span> 35<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Sender,</span></span> 36<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Welcome,</span></span> 37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> useXAgent,</span></span> 38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> useXChat,</span></span> 39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'ant-design-x-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 40<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> AppstoreAddOutlined,</span></span> 42<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> AppstoreOutlined,</span></span> 43<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> CloudUploadOutlined,</span></span> 44<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
44 CommentOutlined,</span></span> 45<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> CopyOutlined,</span></span> 46<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DeleteOutlined,</span></span> 47<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DislikeOutlined,</span></span> 48<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> EditOutlined,</span></span> 49<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> EllipsisOutlined,</span></span> 50<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> FileSearchOutlined,</span></span> 51<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> HeartOutlined,</span></span> 52<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> LikeOutlined,</span></span> 53<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> PaperClipOutlined,</span></span> 54<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> PlusOutlined,</span></span> 55<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> QuestionCircleOutlined,</span></span> 56<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ReloadOutlined,</span></span> 57<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ScheduleOutlined,</span></span> 58<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ShareAltOutlined,</span></span> 59<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> SmileOutlined,</span></span> 60<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@ant-design/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 61<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { Avatar, Button, Flex, message, Space, Spin, theme } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'ant-design-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 62<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { computed, ref, watch } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 63<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> dayjs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'dayjs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 64<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'vitepress'</span></span> 65<span class="line"></span> 66<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> BubbleDataType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 67<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> role</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 68<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> content</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 69<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};
69</span></span> 70<span class="line"></span> 71<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">defineOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'PlaygroundIndependent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> });</span></span> 72<span class="line"></span> 73<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> DEFAULT_CONVERSATIONS_ITEMS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span></span> 74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 75<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'default-0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 76<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'What is Ant Design X Vue?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 77<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> group: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Today'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 78<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 79<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 80<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'default-1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 81<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'How to quickly install and import components?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 82<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> group: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Today'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 83<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 84<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 85<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'default-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 86<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'New AGI Hybrid Interface'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 87<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> group: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Yesterday'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 88<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 89<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">];</span></span> 90<span class="line"></span> 91<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> HOT_TOPICS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 92<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 93<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Hot Topics'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 94<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> children: [</span></span> 95<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 96<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 97<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'What has Ant Design X Vue upgraded?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 98<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#f93a4a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">fontWeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 99<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 100<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 101<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 102<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'New AGI Hybrid Interface'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 103<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#ff6565'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">fontWeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 104<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 105<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 106<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 107<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
107'What components are in Ant Design X Vue?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 108<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '#ff8f1f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">fontWeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 109<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 110<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 111<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 112<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Come and discover the new design paradigm of the AI era.'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 113<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">opacity</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0.6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">fontWeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 114<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 115<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 116<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-5'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 117<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'How to quickly install and import components?'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 118<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={{ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">opacity</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0.6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">fontWeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 700</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 119<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 120<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ],</span></span> 121<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};
121</span></span> 122<span class="line"></span> 123<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> DESIGN_GUIDE</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 124<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 125<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Design Guide'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 126<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> children: [</span></span> 127<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 128<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2-1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 129<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">HeartOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 130<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Intention'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 131<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AI understands user needs and provides solutions.'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 132<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 133<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 134<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 135<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">SmileOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 136<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Role'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 137<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"AI's public persona and image"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 138<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 139<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 140<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2-3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 141<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">CommentOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 142<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Chat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 143<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
143'How AI Can Express Itself in a Way Users Understand'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 144<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 145<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 146<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2-4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 147<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">PaperClipOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 148<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Interface'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 149<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'AI balances "chat" & "do" behaviors.'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 150<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 151<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ],</span></span> 152<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span> 153<span class="line"></span> 154<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> SENDER_PROMPTS</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> PromptsProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'items'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span></span> 155<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 156<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 157<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Upgrades'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 158<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">ScheduleOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 159<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 160<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 161<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 162<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Components'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 163<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">AppstoreOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 164<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 165<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 166<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 167<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'RICH Guide'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 168<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">FileSearchOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 169<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 170<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 171<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'4'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 172<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Installation Introduction'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 173<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">AppstoreAddOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 174<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 175<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">];</span></span> 176<span class="line"></span> 177<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ==================== Style ====================</span></span> 178<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">token</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> theme.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">useToken</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 179<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 180<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 181<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> layout: {</span></span> 182<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 183<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'min-width'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1000px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 184<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'722px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 185<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 186<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorBgContainer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}
186`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 187<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'font-family'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`AlibabaPuHuiTi, ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">fontFamily</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}, sans-serif`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 188<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 189<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // sider æ ·å¼</span></span> 190<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> sider: {</span></span> 191<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorBgLayout</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}80`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 192<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'280px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 193<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 194<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 195<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'flex-direction'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'column'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 196<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> padding: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 197<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'box-sizing'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'border-box'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 198<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 199<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> logo: {</span></span> 200<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 201<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'align-items'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 202<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'justify-content'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'start'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 203<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> padding: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 24px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 204<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
204 'box-sizing'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'border-box'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 205<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> gap: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'8px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 206<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> margin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'24px 0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 207<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 208<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> logoTitle: {</span></span> 209<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'font-weight'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'bold'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 210<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 211<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'font-size'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 212<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 213<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> addBtn: {</span></span> 214<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#1677ff0f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 215<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> border: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1px solid #1677ff34'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 216<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'40px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 217<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 218<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> conversations: {</span></span> 219<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> flex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 220<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'overflow-y'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'auto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 221<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'margin-top'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 222<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> padding: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 223<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 224<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> siderFooter: {</span></span> 225<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'border-top'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`1px solid ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorBorderSecondary</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}
225`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 226<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'40px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 227<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 228<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'align-items'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'center'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 229<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'justify-content'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'space-between'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 230<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 231<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // chat list æ ·å¼</span></span> 232<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> chat: {</span></span> 233<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 234<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 235<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'box-sizing'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'border-box'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 236<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 237<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'flex-direction'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'column'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 238<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'padding-block'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">paddingLG</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}px`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 239<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> gap: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'16px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 240<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 241<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> chatList: {</span></span> 242<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> flex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 243<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> overflow: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'auto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 244<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 245<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> loadingMessage: {</span></span> 246<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'background-image'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'linear-gradient(90deg, #ff6b23 0%, #af3cb8 31%, #53b6ff 89%)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 247<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'background-size'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100% 2px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 248<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
248 'background-repeat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'no-repeat'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 249<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'background-position'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'bottom'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 250<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 251<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> placeholder: {</span></span> 252<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'padding-top'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'32px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 253<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 254<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // sender æ ·å¼</span></span> 255<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> sender: {</span></span> 256<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 257<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'max-width'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'700px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 258<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> margin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 auto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 259<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 260<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> speechButton: {</span></span> 261<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'font-size'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'18px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 262<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">} !important`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 263<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 264<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> senderPrompt: {</span></span> 265<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 266<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'max-width'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'700px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 267<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> margin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 auto'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 268<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">colorText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}
268`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 269<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 270<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">as</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span></span> 271<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span> 272<span class="line"></span> 273<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">isDark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 274<span class="line"></span> 275<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ==================== State ====================</span></span> 276<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> abortController</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">AbortController</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 277<span class="line"></span> 278<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> messageHistory</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>>({});</span></span> 279<span class="line"></span> 280<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> conversations</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">DEFAULT_CONVERSATIONS_ITEMS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 281<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> curConversation</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">DEFAULT_CONVERSATIONS_ITEMS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">].key);</span></span> 282<span class="line"></span> 283<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> attachmentsOpen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">
283false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 284<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> attachedFiles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">AttachmentsProps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'items'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]>([]);</span></span> 285<span class="line"></span> 286<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> inputValue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 287<span class="line"></span> 288<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/**</span></span> 289<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> * ð Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.</span></span> 290<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> */</span></span> 291<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ==================== Runtime ====================</span></span> 292<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">agent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useXAgent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">BubbleDataType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>({</span></span> 293<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> baseURL: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'https://api.x.ant.design/api/llm_siliconflow_deepSeek-r1-distill-1wen-7b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 294<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> model: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'DeepSeek-R1-Distill-Qwen-7B'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 295<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> dangerouslyApiKey: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Bearer sk-xxxxxxxxxxxxxxxxxxxx'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 296<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span> 297<span class="line"></span> 298<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> loading</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 299<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> agent.value.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">isRequesting</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
299(), () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 300<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> loading.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> agent.value.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">isRequesting</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 301<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span> 302<span class="line"></span> 303<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">onRequest</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">setMessages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useXChat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span> 304<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> agent: agent.value,</span></span> 305<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> requestFallback</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">_</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 306<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (error.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'AbortError'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span> 307<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 308<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Request is aborted'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 309<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'assistant'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 310<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> 311<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 312<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 313<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Request failed, please try again!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 314<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'assistant'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 315<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> 316<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 317<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> transformMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">info</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 318<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">originMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">chunk</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> info </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {};</span></span> 319<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">
319 let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentContent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 320<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentThink </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 321<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> try</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 322<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (chunk?.data </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&&</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">chunk?.data.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'DONE'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)) {</span></span> 323<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> message</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> JSON</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">parse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(chunk?.data);</span></span> 324<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentThink </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> message?.choices?.[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]?.delta?.reasoning_content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 325<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentContent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> message?.choices?.[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]?.delta?.content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 326<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 327<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (error) {</span></span> 328<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(error);</span></span> 329<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 330<span class="line"></span> 331<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 332<span class="line"></span> 333<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">originMessage?.content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&&</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentThink) {</span></span> 334<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> `<think>${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">currentThink</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}
334`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 335<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">else</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 336<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> originMessage?.content?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'<think>'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&&</span></span> 337<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">originMessage?.content.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'</think>'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&&</span></span> 338<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> currentContent</span></span> 339<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ) {</span></span> 340<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> `${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">originMessage</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">?.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">content</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}</think>${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">currentContent</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 341<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 342<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> `${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">originMessage</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">?.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">content</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''}${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">currentThink</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">currentContent</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 343<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 344<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 345<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> content: content,</span></span> 346<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'assistant'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 347<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> 348<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 349<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> resolveAbortController</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">controller</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 350<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> abortController.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> controller;</span></span> 351<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 352<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});
352</span></span> 353<span class="line"></span> 354<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ==================== Event ====================</span></span> 355<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onSubmit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">val</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 356<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">val) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 357<span class="line"></span> 358<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (loading.value) {</span></span> 359<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Request is in progress, please wait for the request to complete.'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 360<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 361<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 362<span class="line"></span> 363<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onRequest</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span> 364<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> stream: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 365<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> message: { role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'user'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, content: val },</span></span> 366<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> });</span></span> 367<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span> 368<span class="line"></span> 369<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// ==================== Nodes ====================</span></span> 370<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> chatSider</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 371<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.sider}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 372<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* ð Logo */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 373<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.logo}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 374<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">img</span></span> 375<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> src</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"</span></span> 376<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> draggable</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{false}</span></span> 377<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> alt</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"logo"</span></span> 378<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
378{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 379<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 380<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 381<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.logoTitle}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Ant Design </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">X</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">span</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 382<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 383<span class="line"></span> 384<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* ð æ·»å ä¼è¯ */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 385<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Button</span></span> 386<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => {</span></span> 387<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (loading.value) {</span></span> 388<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span></span> 389<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'Message is Requesting, you can create a new conversation after request done or abort it right now...'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 390<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span> 391<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 392<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 393<span class="line"></span> 394<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> now</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> dayjs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">valueOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">toString</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 395<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> conversations.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span></span> 396<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 397<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: now,</span></span> 398<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">`New Conversation ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">conversations</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">}
398`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 399<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> group: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Today'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 400<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 401<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">conversations.value,</span></span> 402<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ];</span></span> 403<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> curConversation.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> now;</span></span> 404<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> messages.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [];</span></span> 405<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 406<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"link"</span></span> 407<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.addBtn}</span></span> 408<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<PlusOutlined />}</span></span> 409<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ></span></span> 410<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> New </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Conversation</span></span> 411<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 412<span class="line"></span> 413<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* ð ä¼è¯ç®¡ç */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 414<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Conversations</span></span> 415<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{conversations.value}</span></span> 416<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.conversations}</span></span> 417<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> activeKey</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{curConversation.value}</span></span> 418<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onActiveChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 419<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> abortController</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">abort</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 420<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // The abort execution will trigger an asynchronous requestFallback, which may lead to timing issues.</span></span> 421<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // In future versions, the sessionId capability will be added to resolve this problem.</span></span> 422<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 423<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> curConversation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> val;</span></span> 424<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> messageHistory.value?.[val] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [];</span></span> 425<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 426<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 427<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> groupable</span></span> 428<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'0 8px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } }}</span></span> 429<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
429 menu</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(conversation) => ({</span></span> 430<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span> 431<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 432<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Rename'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 433<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'rename'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 434<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">EditOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 435<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 436<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 437<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Delete'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 438<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'delete'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 439<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">DeleteOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 440<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> danger: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 441<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 442<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> newList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> conversations.value.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> item.key </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> conversation.key);</span></span> 443<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> newKey</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> newList?.[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]?.key;</span></span> 444<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> conversations.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> newList;</span></span> 445<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // The delete operation modifies curConversation and triggers onActiveChange, so it needs to be executed with a delay to ensure it overrides correctly at the end.</span></span> 446<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // This feature will be fixed in a future version.</span></span> 447<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 448<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
448 (conversation.key </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> curConversation.value) {</span></span> 449<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> curConversation.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> newKey </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 450<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setMessages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(messageHistory.value?.[newKey] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> []);</span></span> 451<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 452<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 453<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 454<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 455<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ],</span></span> 456<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> })}</span></span> 457<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 458<span class="line"></span> 459<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.siderFooter}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 460<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Avatar size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 461<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<QuestionCircleOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 462<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 463<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 464<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">));</span></span> 465<span class="line"></span> 466<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> chatList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 467<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.chatList}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 468<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">?.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ? (</span></span> 469<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> /* ð æ¶æ¯å表 */</span></span> 470<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Bubble</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">List</span></span> 471<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{messages.value?.map((i) => ({</span></span> 472<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">i.message,</span></span> 473<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> styles</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> 474<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: i.status </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'loading'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles.value.loadingMessage </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 475<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 476<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> typing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: i.status </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'loading'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { step: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
476, interval: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, suffix: <>ð</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 477<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }))}</span></span> 478<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">paddingInline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'calc(calc(100% - 700px) /2)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 479<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> roles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span> 480<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> assistant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> 481<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> placement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'start'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 482<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: (</span></span> 483<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'flex'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 484<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<ReloadOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 485<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
485"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<CopyOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 486<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<LikeOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 487<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Button type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<DislikeOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 488<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 489<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ),</span></span> 490<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> loadingRender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Spin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"small"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 491<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 492<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> user</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">placement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'end'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 493<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 494<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span> 495<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ) : (</span></span> 496<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Space</span></span> 497<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> direction</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"vertical"</span></span> 498<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> size</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
498{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 499<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">paddingInline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'calc(calc(100% - 700px) /2)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">styles.value.placeholder }}</span></span> 500<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ></span></span> 501<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Welcome</span></span> 502<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> variant</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"borderless"</span></span> 503<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"</span></span> 504<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Hello, I'm Ant Design X Vue"</span></span> 505<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> description</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Base on Ant Design, AGI product interface solution, create a better intelligent vision~"</span></span> 506<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> extra</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span></span> 507<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <Space></span></span> 508<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <Button icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<ShareAltOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 509<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <Button icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<EllipsisOutlined />} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 510<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </Space></span></span> 511<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 512<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span> 513<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Flex</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> gap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 514<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Prompts</span></span> 515<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">HOT_TOPICS</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]}</span></span> 516<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles={{</span></span> 517<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> list: { height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'100%'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 518<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> item: {</span></span> 519<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> flex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 520<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> backgroundImage: isDark.value</span></span> 521<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'linear-gradient(123deg, #1e2a38 0%, #2b1f3b 100%)'</span></span> 522<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'linear-gradient(123deg, #e5f4ff 0%, #efe7ff 100%)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 523<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderRadius: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 524<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> border: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'none'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 525<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 526<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> subItem: { padding: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'transparent'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 527<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 528<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onItemClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(info) => {</span></span> 529<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onSubmit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(info.data.description </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 530<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 531<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 532<span class="line"></span> 533<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Prompts</span></span> 534<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">DESIGN_GUIDE</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]}</span></span> 535<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles={{</span></span> 536<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> item: {</span></span> 537<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> flex: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 538<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> backgroundImage: isDark.value</span></span> 539<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'linear-gradient(123deg, #1e2a38 0%, #2b1f3b 100%)'</span></span> 540<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'linear-gradient(123deg, #e5f4ff 0%, #efe7ff 100%)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 541<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> borderRadius: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 542<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> border: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'none'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 543<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 544<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> subItem: { background: isDark.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'#ffffffa6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 545<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 546<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onItemClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(info) => {</span></span> 547<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onSubmit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(info.data.description </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 548<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 549<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 550<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Flex</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 551<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Space</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 552<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> )}</span></span> 553<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 554<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">));</span></span> 555<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> senderHeader</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 556<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Sender.Header</span></span> 557<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">
557"Upload File"</span></span> 558<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> open</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{attachmentsOpen.value}</span></span> 559<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onOpenChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(open) => attachmentsOpen.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> open}</span></span> 560<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span> 561<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> 562<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 563<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 564<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 565<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ></span></span> 566<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Attachments</span></span> 567<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> beforeUpload</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => false}</span></span> 568<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{attachedFiles.value}</span></span> 569<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(info) => attachedFiles.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> info.fileList}</span></span> 570<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> placeholder</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(type) =></span></span> 571<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'drop'</span></span> 572<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ? { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Drop file here'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 573<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> : {</span></span> 574<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon: <</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">CloudUploadOutlined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> />,</span></span> 575<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Upload files'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 576<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Click or drag files to this area to upload'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> 577<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 578<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 579<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 580<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Sender.Header</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 581<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">));</span></span> 582<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> chatSender</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 583<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <></span></span> 584<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* ð æç¤ºè¯ */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 585<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Prompts</span></span> 586<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> items</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{SENDER_PROMPTS}</span></span> 587<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onItemClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(info) => {</span></span> 588<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onSubmit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(info.data.description </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">as</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span> 589<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 590<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> styles</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{</span></span> 591<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'6px 12px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> 592<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 593<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.senderPrompt}</span></span> 594<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 595<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">/* ð è¾å ¥æ¡ */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 596<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">Sender</span></span> 597<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{inputValue.value}</span></span> 598<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> header</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{senderHeader.value}</span></span> 599<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onSubmit</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => {</span></span> 600<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onSubmit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(inputValue.value);</span></span> 601<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> inputValue.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> ''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> 602<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 603<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onChange</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
603{</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> inputValue.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> value}</span></span> 604<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onCancel</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => {</span></span> 605<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> abortController.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">abort</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">();</span></span> 606<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 607<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> prefix</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{</span></span> 608<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <Button</span></span> 609<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"text"</span></span> 610<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> icon</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{<PaperClipOutlined style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'18px'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 611<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() => attachmentsOpen.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">attachmentsOpen.value}</span></span> 612<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span> 613<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 614<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> loading</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{loading.value}</span></span> 615<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.sender}</span></span> 616<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> allowSpeech</span></span> 617<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> actions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{(_, info) => {</span></span> 618<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">SendButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">LoadingButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">SpeechButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> info.components;</span></span> 619<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 620<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Flex gap</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">
620{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 621<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">SpeechButton style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.speechButton} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">/></span></span> 622<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ? <</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">LoadingButton</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"default"</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> /</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF">> : <SendButton type="primary" </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 623<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">Flex</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 624<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span> 625<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }}</span></span> 626<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> placeholder</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Ask or input / use skills"</span></span> 627<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> /></span></span> 628<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </></span></span> 629<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">));</span></span> 630<span class="line"></span> 631<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(messages, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 632<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // history mock</span></span> 633<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (messages.value?.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">length</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span> 634<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> messageHistory.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 635<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">messageHistory.value,</span></span> 636<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [curConversation.value]: messages.value,</span></span> 637<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 638<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> 639<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});
639</span></span> 640<span class="line"></span> 641<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">defineRender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> 642<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span> 643<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.layout}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 644<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">chatSider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 645<span class="line"></span> 646<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> <</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{styles.value.chat}</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 647<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">chatList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 648<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">chatSender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> 649<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 650<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> </</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span> 651<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> );</span></span> 652<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span> 653<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span></span></code></pre> 654</div></div></div><div class="example-float-control" tabindex="0" role="button" style="display:none;" data-v-f2775be5 data-v-f2775be5><span role="img" aria-label="caret-up" class="anticon anticon-caret-up" data-v-f2775be5><svg focusable="false" style="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg><!----></span><span data-v-f2775be5>éèæºä»£ç </span></div></div><!--]--><!--]--><!--]--><!--]--><!--]--><!--]--></div></div></main><footer class="VPDocFooter" data-v-7b344cb4 data-v-6f7ccc42><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-6f7ccc42><span class="visually-hidden" id="doc-footer-aria-label" data-v-6f7ccc42>Pager</span><div class="pager" data-v-6f7ccc42><!----></div><div class="pager" data-v-6f7ccc42><a class='VPLink link pager-link next' data-v-6f7ccc42 href='/playground/copilot'><!--[--><span class="desc" data-v-6f7ccc42>Next page</span><span class="title" data-v-6f7ccc42>婿å¼</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div><!--]--><!--]--><!--]--><!--]--><!--]--></div> 655
655<script>window.__VP_HASH_MAP__=JSON.parse("{\"component_actions.md\":\"K0JN7tQN\",\"component_attachments.md\":\"CI04dt4x\",\"component_bubble.md\":\"DrHuT89V\",\"component_conversations.md\":\"B2TWBgDS\",\"component_overview.md\":\"Cdt3zuXC\",\"component_prompts.md\":\"BFXYwgwO\",\"component_sender.md\":\"B7b4iENp\",\"component_suggestion.md\":\"CABNwuSs\",\"component_thought-chain.md\":\"BGvHM9_G\",\"component_use-x-agent.md\":\"CDY5-7NC\",\"component_use-x-chat.md\":\"DuN_1WQM\",\"component_welcome.md\":\"DdCOs8Bd\",\"component_x-provider.md\":\"C6HVgb6Z\",\"component_x-request.md\":\"Cg_Zzpy0\",\"component_x-stream.md\":\"BOtlxPIe\",\"development_compatible-style.md\":\"C4RdYGOX\",\"development_introduce.md\":\"DmF3WgSp\",\"index.md\":\"JSi5StAS\",\"playground_copilot.md\":\"DlGG9D37\",\"playground_independent.md\":\"C8NgMNos\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Ant Design X Vue\",\"description\":\"Ant Design X For Vue\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"logo\":\"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original\",\"nav\":[{\"text\":\"ç å\",\"link\":\"/development/introduce\"},{\"text\":\"ç»ä»¶\",\"link\":\"/component/overview\"},{\"text\":\"æ¼ç¤º\",\"link\":\"/playground/independent\"},{\"text\":\"æ´å¤\",\"items\":[{\"text\":\"Ant Design X of React\",\"link\":\"https://x.ant.design/index-cn\"},{\"text\":\"Ant Design Vue\",\"link\":\"https://www.antdv.com/components/overview-cn\"}]}],\"outline\":[2,3],\"sidebar\":{\"/development\":[{\"text\":\"Ant Design X of Vue\",\"link\":\"/development/introduce\"},{\"text\":\"æ ·å¼å
¼å®¹\",\"link\":\"/development/compatible-style\"}],\"/component/\":[{\"text\":\"æ»è§\",\"link\":\"/component/overview\"},{\"text\":\"éç¨\",\"items\":[{\"text\":\"Bubble å¯¹è¯æ°æ³¡æ¡\",\"link\":\"/component/bubble\"},{\"text\":\"Conversations 管ç对è¯\",\"link\":\"/component/conversations\"}]},{\"text\":\"å¤é\",\"items\":[{\"text\":\"Welcome 欢è¿\",\"link\":\"/component/welcome\"},{\"text\":\"Prompts æç¤ºé\",\"link\":\"/component/prompts\"}]},{\"text\":\"表达\",\"items\":[{\"text\":\"Sender è¾å
¥æ¡\",\"link\":\"/component/sender\"},{\"text\":\"Attachments è¾å
¥éä»¶\",\"link\":\"/component/attachments\"},{\"text\":\"Suggestion å¿«æ·æä»¤\",\"link\":\"/component/suggestion\"}]},{\"text\":\"确认\",\"items\":[{\"text\":\"ThoughtChain æç»´é¾\",\"link\":\"/component/thought-chain\"}]},{\"text\":\"åé¦\",\"items\":[{\"text\":\"Actions æä½å表\",\"link\":\"/component/actions\"}]},{\"text\":\"å·¥å
·\",\"items\":[{\"text\":\"useXAgent 模åè°åº¦\",\"link\":\"/component/use-x-agent\"},{\"text\":\"useXChat æ°æ®ç®¡ç\",\"link\":\"/component/use-x-chat\"},{\"text\":\"XStream æµ\",\"link\":\"/component/x-stream\"},{\"text\":\"XRequest 请æ±\",\"link\":\"/component/x-request\"},{\"text\":\"XProvider å
¨å±åé
ç½®\",\"link\":\"/component/x-provider\"}]}],\"/playground/\":[{\"text\":\"æ ·æ¿é´\",\"items\":[{\"text\":\"ç¬ç«å¼\",\"link\":\"/playground/independent\"},{\"text\":\"婿å¼\",\"link\":\"/playground/copilot\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wzc520pyfm/ant-design-x-vue\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
655 656 657 </body> 658</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.