@agentscope-ai/chat 1.1.4

package/dist/default-cards/Interrupted/index.less

@@ -0,0 +1,57 @@
+@import '../../index.less';
+
+
+.@{ant-prefix}-interrupted {
+  display: inline-flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0px;
+  background-color: e('var(--@{ant-prefix}-color-fill-secondary)');
+  padding: 10px 12px;
+  line-height: 1;
+  border-radius: 8px;
+  gap: 8px;
+}
+.@{ant-prefix}-interrupted-desc {
+  font-weight: normal;
+}
+
+.@{ant-prefix}-interrupted-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: e('var(--@{ant-prefix}-color-text)');
+
+  &-icon-wrapper {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-error {
+    color: e('var(--@{ant-prefix}-color-error)');
+  }
+  &-interrupted {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+
+    &::after {
+      display: block;
+      content: '';
+      width: 4px;
+      height: 4px;
+      border-radius: 1px;
+      background-color: currentColor;
+    }
+  }
+}

package/dist/default-cards/Text/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function (props: any): React.JSX.Element;

package/dist/default-cards/Text/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Markdown } from "../..";
+export default function (props) {
+  return /*#__PURE__*/React.createElement(Markdown, {
+    raw: props.data.raw,
+    content: props.data.content,
+    cursor: props.data.msgStatus === 'generating',
+    typing: props.data.typing,
+    citations: props.data.citations,
+    citationsMap: props.data.citationsMap
+  });
+}

package/dist/default-cards/index.d.ts

@@ -0,0 +1,6 @@
+export { default as DeepThink } from './DeepThink';
+export { default as Files } from './Files';
+export { default as Images } from './Images';
+export { default as Text } from './Text';
+export { default as Footer, FooterActions, FooterCount } from './Footer';
+export { default as Interrupted } from './Interrupted';

package/dist/default-cards/index.js

@@ -0,0 +1,6 @@
+export { default as DeepThink } from "./DeepThink";
+export { default as Files } from "./Files";
+export { default as Images } from "./Images";
+export { default as Text } from "./Text";
+export { default as Footer, FooterActions, FooterCount } from "./Footer";
+export { default as Interrupted } from "./Interrupted";

package/dist/disclaimer/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface IProps {
+    desc?: React.ReactElement | string;
+    style?: React.CSSProperties;
+    afterLink?: {
+        href: string;
+        text: string;
+    };
+}
+export default function (props: IProps): React.JSX.Element;
+export {};

package/dist/disclaimer/index.js

@@ -0,0 +1,26 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import React from 'react';
+import { createStyles } from 'antd-style';
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    disclaimer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    line-height: 1.5;\n    color: ", ";\n    padding: 8px 12px;\n\n  "])), token.colorTextTertiary),
+    afterLink: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-left: 8px;\n  "])))
+  };
+});
+export default function (props) {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _props$desc = props.desc,
+    desc = _props$desc === void 0 ? 'AI can also make mistakes, so please check carefully and use it with caution' : _props$desc;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.disclaimer,
+    style: props.style
+  }, desc, props.afterLink && /*#__PURE__*/React.createElement("a", {
+    className: styles.afterLink,
+    href: props.afterLink.href,
+    target: "_blank"
+  }, props.afterLink.text));
+}

package/dist/docs/1896.async.js

@@ -0,0 +1,457 @@
+"use strict";(self.webpackChunk_agentscope_ai_chat=self.webpackChunk_agentscope_ai_chat||[]).push([[1896],{53530:function(h,F,n){n.d(F,{Z:function(){return c}});var s=n(46530);function c(){var e=(0,s.useLocale)();return e}},1896:function(h,F,n){n.d(F,{Z:function(){return w}});var s=n(21739),c=n(53530),e={container:"gjQ9Bxkcf5ASRKzfwwWR",top:"KASn7X6HQ0oycb2VgjNP",toAgentscope:"WG18MPSlcspl47slSk8U",desc:"nTu2DH52hnwviPPu0aHg",t1:"ZBjmsxAv7wFcRWvcAPE5",t2Block:"V6aQWoPg6kYIpZXYuUvh",t2:"hkIpzwPZdc4EeHk483yl",mainContent:"uwvdzfjo6IPc89yyaUV4",img:"wWquPA3QTP8r3qzXLTD6"},B=n(76857),D=n(5465),E=n(41478),l=n(68768),x=n(79800),N=n.n(x),d=n(87457),u=n(27174);function f(){var t=(0,s.useState)(0),i=N()(t,2),a=i[0],g=i[1],p=["amazing","new","wonderful","beautiful","smart"];return(0,s.useEffect)(function(){var o=setTimeout(function(){a===p.length-1?g(0):g(a+1)},2e3);return function(){return clearTimeout(o)}},[a,p]),(0,u.jsxs)("div",{children:[(0,u.jsx)("div",{className:e.t1,children:"Spark Chat is"}),(0,u.jsx)("div",{className:e.t2Block,children:p.map(function(o,A){return(0,u.jsx)(d.E.span,{className:e.t2,initial:{opacity:0,y:"-100"},transition:{type:"spring",stiffness:50},animate:a===A?{y:0,opacity:1}:{y:a>A?-150:150,opacity:0},children:o},o)})})]})}var C={line:"Wolu_C2Chkk39_oIJB6X"},v=n(92310),m=n.n(v);function O(){var t={hidden:{opacity:0,y:20},visible:{opacity:1,y:0,transition:{duration:.6,ease:"easeOut"}}};return(0,u.jsx)(d.E.footer,{className:"mt-12 py-12 text-center text-sm",initial:"hidden",whileInView:"visible",viewport:{once:!0,margin:"-100px 0px"},variants:t,children:(0,u.jsxs)("div",{className:"flex flex-col items-center justify-center",children:[(0,u.jsxs)("div",{className:"flex items-center  mb-8 w-[100%]",children:[(0,u.jsx)("div",{className:m()(C.line,"h-px","flex-grow")}),(0,u.jsx)("div",{className:"mx-4",children:(0,u.jsx)("img",{src:"https://img.alicdn.com/imgextra/i1/O1CN01wor5IO1TVIRQ4iKbv_!!6000000002387-2-tps-112-112.png",alt:"Spark Logo",className:"w-6 h-6"})}),(0,u.jsx)("div",{className:m()(C.line,"h-px","flex-grow")})]}),(0,u.jsx)("div",{className:"text-l mb-2 uppercase tracking-wider font-semibold",children:"SPARK DESIGN LLM EXPERIENCE DESIGN SYSTEM"}),(0,u.jsx)("div",{style:{color:"var(--spc-color-text-secondary)"},children:"Copyright \xA9 2025 Alibaba. All rights reserved."})]})})}function b(t){var i=t.className,a=i===void 0?"w-4 h-4":i;return(0,u.jsx)("svg",{className:a,viewBox:"0 0 1024 1024",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",children:(0,u.jsx)("path",{d:"M853.376 128a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-682.666667a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h682.666667z m-128 170.666667h-426.666667v426.666666h213.333334V405.333333h106.666666V725.333333h106.666667V298.666667z"})})}function w(){var t=(0,c.Z)();return(0,u.jsx)(u.Fragment,{children:(0,u.jsxs)("div",{className:e.container,children:[(0,u.jsxs)("div",{className:e.top,children:[(0,u.jsx)(E.Z,{justify:"center",children:(0,u.jsxs)("div",{className:e.toAgentscope,onClick:function(){return window.open("https://bailian.agentscope.io")},children:[r[t.id].jump2agentscope,(0,u.jsx)(D.SwapRightOutlined,{})]})}),(0,u.jsx)(f,{}),(0,u.jsx)("div",{className:e.desc,children:r[t.id].desc}),(0,u.jsxs)(E.Z,{justify:"center",gap:16,children:[(0,u.jsx)(l.ZP,{size:"large",onClick:function(){return window.open("#/~demos/docs-templates-native-demo-basic")},children:r[t.id].chatexp}),(0,u.jsxs)(l.ZP,{style:{boxShadow:"rgba(131, 88, 246, 0.4) 15px 0px 30px -10px, rgba(255, 142, 168, 0.4) 0px 0px 30px -10px, rgba(225, 163, 37, 0.4) -15px 0px 30px -10px"},size:"large",onClick:function(){return window.open("https://www.npmjs.com/package/@spark-ai/chat")},type:"primary",children:[(0,u.jsx)(b,{}),"  npm install @spark-ai/chat"]})]})]}),(0,u.jsx)("div",{id:e.mainContent,children:(0,u.jsx)(B.Z,{content:r[t.id].md,components:{img:function(a){return(0,u.jsx)("img",{src:a.src,className:e.img})}}})}),(0,u.jsx)(O,{})]})})}var r={"zh-CN":{jump2agentscope:"\u8DF3\u8F6C\u5230 AgentScope",chatexp:"\u5BF9\u8BDD\u4F53\u9A8C",desc:"\u4E00\u4E2A\u514D\u8D39\u3001\u5F00\u6E90\u7684\u5BF9\u8BDD\u6846\u67B6\uFF0C\u7528\u4E8E\u6784\u5EFA\u4F18\u79C0\u7684 LLM \u5BF9\u8BDD\u4F53\u9A8C",md:`
+# SPARK CHAT \u662F\u4E00\u4E2A\u514D\u8D39\u3001\u5F00\u6E90\u7684\u5BF9\u8BDD\u6846\u67B6\uFF0C\u7528\u4E8E\u6784\u5EFA\u4F18\u79C0\u7684 LLM \u5BF9\u8BDD\u4F53\u9A8C
+
+
+\u5BF9\u8BDD\u5F0F\u4EA4\u4E92\u4EE5\u5176\u81EA\u7136\u3001\u7B80\u5355\u7684\u5F62\u5F0F\u6210\u4E3A\u5982\u4ECA LLM \u4F53\u9A8C\u7684\u4E3B\u8981\u5F62\u5F0F\uFF0C\u5E76\u9010\u6E10\u56F4\u7ED5\u6A21\u578B\u7684\u591A\u6A21\u6001\u80FD\u529B\u9010\u6E10\u6F14\u53D8\u51FA\u5404\u79CD\u884D\u751F\u7684\u4EA4\u4E92\u8303\u5F0F\u3002\u57FA\u4E8E\u6211\u4EEC\u5728\u5177\u4F53\u4E1A\u52A1\u5B9E\u8DF5\u4E2D\u7684\u63A2\u7D22\u603B\u7ED3\uFF0C\u6211\u4EEC\u63A8\u51FA Spark Chat \u7684\u5BF9\u8BDD\u6846\u67B6\uFF0C\u5B83\u5305\u542B\u4E86\u4F17\u591A\u6211\u4EEC\u7684\u60F3\u6CD5\u4E0E\u771F\u5B9E\u4E1A\u52A1\u5B9E\u8DF5\uFF0C\u5E2E\u52A9\u4E1A\u52A1\u5FEB\u901F\u6784\u5EFA\u5BF9\u8BDD\u5F0F\u4EBA\u5DE5\u667A\u80FD\u5E94\u7528\u3002
+
+
+## \u57FA\u672C\u5F62\u6001
+
+
+SPARK CHAT \u5305\u542B\u6700\u57FA\u672C\u3001\u901A\u7528\u7684\u5BF9\u8BDD\u7EC4\u4EF6\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528\u5B83\u5FEB\u901F\u6784\u5EFA\u51FA\u7C7B\u4F3C ChatGPT \u8FD9\u6837\u7684\u539F\u751F LLM \u5BF9\u8BDD\u5E94\u7528\uFF0C\u5305\u542B\u5BF9\u8BDD\u5386\u53F2\u7BA1\u7406\u3001\u5BF9\u8BDD\u6D41\u3001\u8F93\u5165\u6846\u548C\u7B80\u6D01\u7684\u6B22\u8FCE\u9875\u9762\u3002
+
+
+![O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png)
+
+
+![O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i4/O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png)
+
+
+## \u591A\u6A21\u6001\u8F93\u5165\u5F62\u6001
+
+
+\u56F4\u7ED5\u7740\u8BED\u97F3\u3001\u56FE\u7247\u548C\u89C6\u9891\u7B49\u573A\u666F\uFF0CSPARK CHAT \u4E5F\u63D0\u4F9B\u4E86\u57FA\u4E8E\u573A\u666F\u7684\u201C\u8F93\u5165\u4EA4\u4E92\u201D\uFF0C\u4EE5\u6EE1\u8DB3\u7279\u5B9A\u573A\u666F\u4E0B\u7684\u6700\u4F73\u7528\u6237\u4F53\u9A8C
+
+
+### \u57FA\u672C\u8F93\u5165
+
+
+\u5305\u542B\u4E3B\u6D41 LLM Chat \u57FA\u672C\u80FD\u529B\u7684\u8F93\u5165
+
+
+![O1CN01fWJHth1sjpQXBN7PF_!!6000000005803-2-tps-2094-3656.png](https://img.alicdn.com/imgextra/i3/O1CN01fWJHth1sjpQXBN7PF_!!6000000005803-2-tps-2094-3656.png)
+
+
+### \u9009\u7528\u4E0D\u540C\u7684\u5BF9\u8BDD\u6A21\u5F0F
+
+
+\u6211\u4EEC\u4E3A\u8F93\u5165\u6846\u63D0\u4F9B\u4E86\u4E0D\u540C\u7684\u8F93\u5165\u6A21\u5F0F\u5207\u6362\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7\u5207\u6362\u4E0D\u540C\u6A21\u5F0F\u4E0B\uFF0C\u5B9E\u73B0\u4E0D\u540C\u7684\u6A21\u578B\u5BF9\u8BDD\u6548\u679C\uFF0C\u4EE5\u4E0B\u662F\u793A\u4F8B\uFF1A
+
+
+![O1CN01bIp6ZX1E7jrDTPy7l_!!6000000000305-2-tps-2094-1372.png](https://img.alicdn.com/imgextra/i4/O1CN01bIp6ZX1E7jrDTPy7l_!!6000000000305-2-tps-2094-1372.png)
+
+
+### \u8BED\u97F3/\u89C6\u9891\u901A\u8BDD \uFF08ONGOING\uFF09
+
+
+\u5F53\u4F60\u9700\u8981\u4F7F\u7528\u4E00\u4E9B\u8BF8\u5982 Qwen3 \u8FD9\u6837\u652F\u6301\u591A\u6A21\u6001\u4F53\u9A8C\u7684\u6A21\u578B\u65F6\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 SPARK CHAT \u6765\u6784\u5EFA \u8BED\u97F3/\u89C6\u9891\u901A\u8BDD \u7684\u4F53\u9A8C\uFF1A
+
+
+![O1CN01SAJPKp1rcfcXz6JpY_!!6000000005652-2-tps-2042-2236.png](https://img.alicdn.com/imgextra/i2/O1CN01SAJPKp1rcfcXz6JpY_!!6000000005652-2-tps-2042-2236.png)
+
+
+## \u591A\u5F62\u5F0F\u5185\u5BB9\u5C55\u793A
+
+
+Spark Chat \u6240\u6709\u5BF9\u8BDD\u90FD\u57FA\u4E8E\u4E00\u4E2A\u7EDF\u4E00\u6A21\u578B\uFF1A
+
+- \u6BCF\u6761\u6D88\u606F = \u4E00\u4E2A \`Bubble\`
+- \u6BCF\u4E2A \`Bubble\`\xA0\u5305\u542B\u591A\u4E2A\xA0\`cards [ ]\`
+- \u6BCF\u5F20\u5361\u7247\u7531 \`{ code, data }\`\xA0\u6784\u6210
+
+\u8FD9\u610F\u5473\u7740\uFF1A\u4E00\u5207\u6D88\u606F\u3001\u5185\u5BB9\u3001\u4EA4\u4E92\u884C\u4E3A\uFF0C\u90FD\u662F\u4E00\u5F20\u201C\u5361\u7247\u201D\uFF0C\u662F\u7ED3\u6784\u5316\u7684\uFF0C\u4F60\u53EF\u4EE5\u5C06\u6587\u672C\u3001\u56FE\u8868\u3001\u63A8\u8350\u3001\u6D41\u7A0B\u3001\u8F6E\u64AD\u3001\u7EDF\u8BA1\u6570\u636E\u4EE5\u5361\u7247\u7684\u5F62\u5F0F\u7EC4\u7EC7\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u8BA9\u6BCF\u6B21\u6A21\u578B\u56DE\u7B54\u90FD\u53D8\u6210\u4E00\u7EC4\u201C\u53EF\u88AB\u7406\u89E3\u4E0E\u64CD\u4F5C\u7684\u5757\uFF0C\u8FD9\u79CD\u7ED3\u6784\u5177\u6709\u4E24\u4E2A\u91CD\u8981\u6280\u672F\u4EF7\u503C\uFF1A
+
+- **\u7EDF\u4E00\u6E32\u67D3\u5F15\u64CE**\uFF1A\u6240\u6709\u5BF9\u8BDD\u5185\u5BB9\u90FD\u8D70\u7EDF\u4E00\u7684\xA0card\xA0\u6E32\u67D3\u7BA1\u7EBF\uFF0C\u907F\u514D\xA0UI\xA0\u7279\u4F8B\u548C\u5D4C\u5957\u5206\u652F\u903B\u8F91
+- **\u8BED\u4E49\u9694\u79BB**\uFF1A\u6BCF\u79CD\u5361\u7247\u5C01\u88C5\u81EA\u5DF1\u7684\u6837\u5F0F\u3001\u903B\u8F91\u3001\u72B6\u6001\uFF0C\u65E0\u526F\u4F5C\u7528\uFF0C\u5229\u4E8E\u6D4B\u8BD5\u548C\u534F\u540C
+
+\u5728\u6570\u636E\u5C42\u9762\uFF0C\u5B83\u5B9E\u73B0\u4E86\u4ECE\u201C\u8BED\u8A00-\u754C\u9762\u201D\u4E4B\u95F4\u7684\u89E3\u8026\uFF1A\u5F00\u53D1\u8005\u53EF\u4EE5\u4EC5\u901A\u8FC7\u7ED3\u6784\u6570\u636E\u6765\u64CD\u63A7 UI \u5448\u73B0\uFF0C\u8BA9\u4EBA\u673A\u4EA4\u4E92\u4ECE\u201C\u6D41\u5F0F\u5BF9\u8BDD\u201D\u8D70\u5411\u201C\u7ED3\u6784\u5BF9\u8BDD\u201D\u3002
+
+
+Spark Chat \u4E0D\u518D\u8981\u6C42\u6A21\u578B\u5410\u51FA\u81EA\u7136\u8BED\u8A00\uFF0C\u518D\u7531 UI \u201C\u5305\u88F9\u201D\u8FD9\u4E9B\u6587\u5B57\u3002\u6211\u4EEC\u62D2\u7EDD\u201C\u9489\u6B7B\u201D\u7684\u8F93\u5165\u8F93\u51FA\u7EC4\u4EF6\uFF0C\u800C\u662F\u9009\u62E9\u7528\u201C\u4E50\u9AD8\u5F0F\u201D\u8BED\u6CD5\u63CF\u8FF0\u6574\u4E2A\u754C\u9762\u72B6\u6001\uFF0C\u4E8E\u662F\u6211\u4EEC\u8BBE\u8BA1\u4E86\u4E00\u79CD\u5BF9\u5927\u6A21\u578B\u53CB\u597D\u7684 UI \u534F\u8BAE\uFF1A
+
+
+\`\`\`javascript
+<Bubble
+  cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'Hello World',
+      },
+    },
+  ]}
+/>
+\`\`\`
+
+
+\u4F60\u53EF\u4EE5\u521B\u5EFA\u81EA\u5B9A\u4E49\u5361\u7247\u5E76\u6CE8\u518C\uFF1A
+
+
+\`\`\`javascript
+function MyCard(props) {
+  return <div>MyCard</div>;
+}
+\`\`\`
+
+
+\`\`\`javascript
+<CustomCardsProvider cardConfig={{ MyCard }}>...</CustomCardsProvider>
+\`\`\`
+
+
+\u7136\u540E\u6784\u9020\u6570\u636E\u5E76\u6E32\u67D3\u5B83\uFF1A
+
+
+\`\`\`javascript
+<Bubble
+  cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'Hello World',
+      },
+    },
+    {
+      code: 'MyCard',
+      data: [
+        ['Active Users', 112893],
+        ['Account Balance (CNY)', 112893],
+      ],
+    },
+  ]}
+/>
+\`\`\`
+
+
+\u636E\u6B64\u4F60\u53EF\u5B9E\u73B0\u4EE5\u4E0B\u7684 Case:
+
+- \u84B8\u4E00\u53EA\u8783\u87F9\u9700\u8981\u591A\u4E45
+
+    ![O1CN018eTFD5244rO8SktPy_!!6000000007338-2-tps-2464-1316.png](https://img.alicdn.com/imgextra/i1/O1CN018eTFD5244rO8SktPy_!!6000000007338-2-tps-2464-1316.png)
+
+- \u6839\u636E\u7528\u6237\u9700\u6C42\u8C03\u7528 AI \u5B9E\u65F6\u8BB0\u5F55
+
+    ![O1CN01cV5RNz1D8MmhMTwDD_!!6000000000171-2-tps-2464-1544.png](https://img.alicdn.com/imgextra/i3/O1CN01cV5RNz1D8MmhMTwDD_!!6000000000171-2-tps-2464-1544.png)
+
+- \u81EA\u5B9A\u4E49\u7684\u6587\u6863\u89E3\u8BFB
+
+    ![O1CN01dKeCTN1OcYfQAAkme_!!6000000001726-2-tps-2464-1544.png](https://img.alicdn.com/imgextra/i3/O1CN01dKeCTN1OcYfQAAkme_!!6000000001726-2-tps-2464-1544.png)
+
+- \u590D\u6742\u7684\u5361\u7247\u5D4C\u5957
+
+    ![O1CN01Y4vtnE1Kl1WYUMHdZ_!!6000000001203-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01Y4vtnE1Kl1WYUMHdZ_!!6000000001203-2-tps-2944-1864.png)
+
+
+## \u591A\u5E94\u7528\u573A\u666F
+
+
+\u9664\u4E86\u539F\u751F\u7684 Native Chat \u4EA7\u54C1\u5916\uFF0C\u4F60\u8FD8\u53EF\u4EE5\u5C06 SPARK CHAT \u7528\u5728\u4E0D\u540C\u7684\u4E1A\u52A1\u573A\u666F\uFF0C\u9009\u7528\u4E0D\u540C\u7684\u7EC4\u4EF6\u642D\u914D\u5F62\u5F0F\uFF0C\u5B9E\u73B0 Copilot \u3001Embedding \u5F0F\u4EA4\u4E92\u3002
+
+
+### Native Chat
+
+
+\u7EAF\u7CB9\u7684\u72EC\u5360\u5F0F\u81EA\u7136\u8BED\u8A00\u5BF9\u8BDD\u754C\u9762\uFF0C\u9002\u5408\u6C89\u6D78\u5F0F\u7684\u95EE\u7B54\u548C\u64CD\u4F5C:
+
+
+![O1CN01OT7q321eaIZ5XgJMk_!!6000000003887-2-tps-3988-1864.png](https://img.alicdn.com/imgextra/i2/O1CN01OT7q321eaIZ5XgJMk_!!6000000003887-2-tps-3988-1864.png)
+
+
+### Copilot
+
+
+\u7ED3\u5408\u5176\u4ED6\u4EA7\u54C1\u754C\u9762\uFF0C\u4F5C\u4E3A\u8F85\u52A9\u4F5C\u7528\uFF0C\u5E38\u89C1\u4E8E\u4EE3\u7801\u8F85\u52A9\u3001\u6D4F\u89C8 Web \u9875\u9762\u5185\u7684\u4FA7\u8FB9\u63D0\u95EE\u3001\u64B0\u5199\u6587\u6863\u65F6\u7684\u52A9\u624B:
+
+
+![O1CN01sPmGdG240jp6nG5i3_!!6000000007329-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01sPmGdG240jp6nG5i3_!!6000000007329-2-tps-2944-1864.png)
+
+
+![O1CN01V2EhNi24Z5WoyEBNe_!!6000000007404-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i4/O1CN01V2EhNi24Z5WoyEBNe_!!6000000007404-2-tps-2944-1864.png)
+
+
+### Embedding
+
+
+\u4EC5\u4F7F\u7528 SPARK CHAT \u7684\u90E8\u5206\u7EC4\u4EF6\uFF0C\u5982\u8F93\u5165\u6846\uFF08ChatIput\uFF09\uFF0C\u96C6\u6210\u8FDB\u4F60\u7684\u4EA7\u54C1\u5185\uFF0C\u4F5C\u4E3A\u5D4C\u5165\u5F0F AI \u6765\u4F7F\u7528\uFF1A
+
+
+![O1CN01falmKj1umh8ZpeKfD_!!6000000006080-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01falmKj1umh8ZpeKfD_!!6000000006080-2-tps-2944-1864.png)
+
+
+## \u591A\u4E3B\u9898\u652F\u6301
+
+
+SPARK\xA0CHAT\xA0\u5185\u7F6E\u7684\u4EAE\u6697\u8272\u5404\u4E00\u5957\xA0Color\xA0CSS\xA0Token\uFF1A
+
+
+![O1CN0167sO0E1XryXc1rvp5_!!6000000002978-2-tps-2948-1868.png](https://img.alicdn.com/imgextra/i4/O1CN0167sO0E1XryXc1rvp5_!!6000000002978-2-tps-2948-1868.png)
+
+
+![O1CN011rlb681i0LwZ4gNhD_!!6000000004350-2-tps-2948-1868.png](https://img.alicdn.com/imgextra/i4/O1CN011rlb681i0LwZ4gNhD_!!6000000004350-2-tps-2948-1868.png)
+
+
+## \u589E\u5F3A\u4F53\u9A8C\u7684\u52A8\u6548\u8868\u8FBE
+
+
+### \u601D\u8003
+
+
+\u6211\u4EEC\u63D0\u4F9B\u4E86\u52A8\u6001icon\u548C\u8F83\u4E3A\u514B\u5236\u7684\u6587\u5B57\u6D41\u5149\u6548\u679C\uFF0C\u7528\u4E8E\u52A0\u5F3AAI\u601D\u8003\u8FC7\u7A0B\u4E2D\u7684\u4F53\u611F\uFF1A
+
+
+![O1CN01qpiuxK1hIqJcuQ6er_!!6000000004255-1-tps-820-219.gif](https://img.alicdn.com/imgextra/i3/O1CN01qpiuxK1hIqJcuQ6er_!!6000000004255-1-tps-820-219.gif)
+
+
+### \u7B49\u5F85
+
+
+\u6211\u4EEC\u63D0\u4F9B\u751F\u56FE\u7C7B\u7B49\u5F85\u573A\u666F\u7684\u52A8\u6001\u6548\u679C\uFF0C\u8BA9\u7B49\u5F85\u8FC7\u7A0B\u53D8\u5F97\u53EF\u89C1\u4E14\u53EF\u89C2\uFF1A
+
+
+![O1CN017n21cg1wZzNh9bghb_!!6000000006323-1-tps-1024-506.gif](https://img.alicdn.com/imgextra/i4/O1CN017n21cg1wZzNh9bghb_!!6000000006323-1-tps-1024-506.gif)
+
+
+### \u52A0\u8F7D\u4E0E\u5410\u51FA
+
+
+\u6211\u4EEC\u5728\u6587\u5B57\u5448\u73B0\u7684\u7EC6\u8282\u5904\uFF0C\u63D0\u4F9B\u4E86\u5177\u6709\u547C\u5438\u611F\u7684\u52A0\u8F7D/\u5410\u51FA\u7684\u52A8\u6548\uFF1A
+
+
+![O1CN01rOD7ch1wBFzZHNDj4_!!6000000006269-1-tps-2048-513.gif](https://img.alicdn.com/imgextra/i1/O1CN01rOD7ch1wBFzZHNDj4_!!6000000006269-1-tps-2048-513.gif)
+
+
+## \u5173\u4E8E Spark Design \xAE
+
+
+Spark Chat \u662F Spark Design \u4E2D\u7684\u4E00\u4E2A\u9879\u76EE\uFF0C\u6211\u4EEC\u671F\u671B\u53EF\u4EE5\u4E3A AI \u5E94\u7528\u5F00\u53D1\u8005\u4EEC\u63D0\u4F9B\u4F53\u9A8C\u4F18\u5F02\u3001\u7075\u6D3B\u7B80\u5355\u7684\u7EC4\u4EF6\u6846\u67B6\u3002
+
+`},"en-US":{jump2agentscope:"Jump to AgentScope",chatexp:"Chat Experience",desc:"A free, open-source framework for building great LLM chat experiences",md:`
+# SPARK CHAT is a free and open-source chat framework for building excellent LLM-powered chat experiences
+
+
+Conversational interaction has become the dominant form of LLM user experience due to its natural and simple format. As models gain multimodal capabilities, new interaction paradigms are emerging. Based on our real-world business practice and insights, we created the Spark Chat framework \u2014 a collection of ideas and battle-tested solutions to help teams quickly build AI-powered chat applications.
+
+
+## Basic Structure
+
+
+Spark Chat provides essential and universal chat components, allowing you to quickly build native LLM chat applications like ChatGPT. It includes chat history management, message flow, input box, and a clean welcome screen.
+
+
+![O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01PXnfNo1TXaRlPEuYp_!!6000000002392-2-tps-2944-1864.png)
+
+
+![O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i4/O1CN01UsX0vG1dU3YEqZHvG_!!6000000003738-2-tps-2944-1864.png)
+
+
+## Multimodal Input Modes
+
+
+Spark Chat also supports scenario-based **input interactions** for use cases involving voice, images, and video, ensuring optimal user experience in each context.
+
+
+### Basic Input
+
+
+Covers the core input capabilities needed for mainstream LLM chat experiences.
+
+
+![O1CN01fWJHth1sjpQXBN7PF_!!6000000005803-2-tps-2094-3656.png](https://img.alicdn.com/imgextra/i3/O1CN01fWJHth1sjpQXBN7PF_!!6000000005803-2-tps-2094-3656.png)
+
+
+### Switching Input Modes
+
+
+The input box supports multiple modes, allowing you to toggle between different input types and model behaviors. Here are some examples:
+
+
+![O1CN01bIp6ZX1E7jrDTPy7l_!!6000000000305-2-tps-2094-1372.png](https://img.alicdn.com/imgextra/i4/O1CN01bIp6ZX1E7jrDTPy7l_!!6000000000305-2-tps-2094-1372.png)
+
+
+### Voice / Video Calling (ONGOING)
+
+
+When using models like Qwen3 that support multimodal interaction, Spark Chat enables the creation of voice/video call experiences:
+
+
+![O1CN01SAJPKp1rcfcXz6JpY_!!6000000005652-2-tps-2042-2236.png](https://img.alicdn.com/imgextra/i2/O1CN01SAJPKp1rcfcXz6JpY_!!6000000005652-2-tps-2042-2236.png)
+
+
+## Multi-format Content Display
+
+
+All Spark Chat messages follow a unified model:
+
+- Each message = a \`Bubble\`
+- Each \`Bubble\` contains multiple \`cards[]\`
+- Each card is structured as \`{ code, data }\`
+
+This means all messages, content, and interactive behaviors are cards \u2014 **structured blocks**. Text, charts, recommendations, workflows, carousels, and stats can all be modularized into cards. This allows model responses to be organized into actionable, understandable units.
+
+
+Key technical benefits:
+
+- **Unified Rendering Engine**: All chat content runs through a single card rendering pipeline, avoiding special UI cases and branching logic.
+- **Semantic Isolation**: Each card encapsulates its own style, logic, and state \u2014 side-effect-free, testable, and collaboration-friendly.
+
+At the data level, it decouples language from UI, enabling developers to control UI rendering through structured data alone. This shifts human-AI interaction from _streamed chat_ to _structured chat_.
+
+
+Spark Chat no longer requires the model to output natural language for the UI to "wrap" \u2014 we reject rigid input/output components and instead use a Lego-like syntax to define UI state. We've designed a UI protocol that is model-friendly:
+
+
+\`\`\`javascript
+<Bubble
+  cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'Hello World',
+      },
+    },
+  ]}
+/>
+\`\`\`
+
+
+You can define and register custom cards:
+
+
+\`\`\`javascript
+function MyCard(props) {
+  return <div>MyCard</div>;
+}
+\`\`\`
+
+
+\`\`\`javascript
+<CustomCardsProvider cardConfig={{ MyCard }}>...</CustomCardsProvider>
+\`\`\`
+
+
+Then structure and render them:
+
+
+\`\`\`javascript
+<Bubble
+  cards={[
+    {
+      code: 'Text',
+      data: {
+        content: 'Hello World',
+      },
+    },
+    {
+      code: 'MyCard',
+      data: [
+        ['Active Users', 112893],
+        ['Account Balance (CNY)', 112893],
+      ],
+    },
+  ]}
+/>
+\`\`\`
+
+
+### Use Cases Enabled:
+
+- "How long does it take to steam a crab?" \u2192 interactive answer via cards
+
+    ![O1CN018eTFD5244rO8SktPy_!!6000000007338-2-tps-2464-1316.png](https://img.alicdn.com/imgextra/i1/O1CN018eTFD5244rO8SktPy_!!6000000007338-2-tps-2464-1316.png)
+
+- Real-time AI note-taking based on user needs
+
+    ![O1CN01cV5RNz1D8MmhMTwDD_!!6000000000171-2-tps-2464-1544.png](https://img.alicdn.com/imgextra/i3/O1CN01cV5RNz1D8MmhMTwDD_!!6000000000171-2-tps-2464-1544.png)
+
+- Custom document interpretation
+
+    ![O1CN01dKeCTN1OcYfQAAkme_!!6000000001726-2-tps-2464-1544.png](https://img.alicdn.com/imgextra/i3/O1CN01dKeCTN1OcYfQAAkme_!!6000000001726-2-tps-2464-1544.png)
+
+- Complex card nesting for layered information display
+
+    ![O1CN01Y4vtnE1Kl1WYUMHdZ_!!6000000001203-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01Y4vtnE1Kl1WYUMHdZ_!!6000000001203-2-tps-2944-1864.png)
+
+
+## Multi-scenario Applications
+
+
+Beyond native chat apps, Spark Chat can be adapted to different business needs, supporting various integration patterns such as Copilot and embedded chat widgets.
+
+
+### Native Chat
+
+
+A full-screen, immersive natural language chat interface for Q&A and execution:
+
+
+![O1CN01OT7q321eaIZ5XgJMk_!!6000000003887-2-tps-3988-1864.png](https://img.alicdn.com/imgextra/i2/O1CN01OT7q321eaIZ5XgJMk_!!6000000003887-2-tps-3988-1864.png)
+
+
+### Copilot
+
+
+Integrates alongside existing product interfaces, commonly used for code assistance, side-panel queries, or in-document writing help:
+
+
+![O1CN01sPmGdG240jp6nG5i3_!!6000000007329-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01sPmGdG240jp6nG5i3_!!6000000007329-2-tps-2944-1864.png)
+
+
+![O1CN01V2EhNi24Z5WoyEBNe_!!6000000007404-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i4/O1CN01V2EhNi24Z5WoyEBNe_!!6000000007404-2-tps-2944-1864.png)
+
+
+### Embedding
+
+
+Use Spark Chat as a lightweight embedded AI assistant \u2014 for example, just embedding the ChatInput component into your product UI:
+
+
+![O1CN01falmKj1umh8ZpeKfD_!!6000000006080-2-tps-2944-1864.png](https://img.alicdn.com/imgextra/i3/O1CN01falmKj1umh8ZpeKfD_!!6000000006080-2-tps-2944-1864.png)
+
+
+## Theme Customization
+
+
+Spark Chat includes built-in light and dark theme CSS tokens:
+
+
+![O1CN0167sO0E1XryXc1rvp5_!!6000000002978-2-tps-2948-1868.png](https://img.alicdn.com/imgextra/i4/O1CN0167sO0E1XryXc1rvp5_!!6000000002978-2-tps-2948-1868.png)
+
+
+![O1CN011rlb681i0LwZ4gNhD_!!6000000004350-2-tps-2948-1868.png](https://img.alicdn.com/imgextra/i4/O1CN011rlb681i0LwZ4gNhD_!!6000000004350-2-tps-2948-1868.png)
+
+
+## Enhanced Experience via Motion Effects
+
+
+### Thinking
+
+
+We provide animated icons and subtle shimmer effects to convey the AI's thinking process:
+
+
+![O1CN01qpiuxK1hIqJcuQ6er_!!6000000004255-1-tps-820-219.gif](https://img.alicdn.com/imgextra/i3/O1CN01qpiuxK1hIqJcuQ6er_!!6000000004255-1-tps-820-219.gif)
+
+
+### Waiting
+
+
+In image generation or long responses, we provide animations to make the wait time more visible and engaging:
+
+
+![O1CN017n21cg1wZzNh9bghb_!!6000000006323-1-tps-1024-506.gif](https://img.alicdn.com/imgextra/i4/O1CN017n21cg1wZzNh9bghb_!!6000000006323-1-tps-1024-506.gif)
+
+
+### Loading / Emitting
+
+
+Our text rendering includes subtle breathing animations for smooth loading and message delivery:
+
+
+![O1CN01rOD7ch1wBFzZHNDj4_!!6000000006269-1-tps-2048-513.gif](https://img.alicdn.com/imgextra/i1/O1CN01rOD7ch1wBFzZHNDj4_!!6000000006269-1-tps-2048-513.gif)
+
+
+## About Spark Design \xAE
+
+
+Spark Chat is part of the Spark Design ecosystem. Our mission is to provide developers with highly usable and flexible UI components for AI applications.
+`}}}}]);