@ai-group/chat-sdk 2.1.6 → 2.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js +3 -3
- package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js.map +3 -3
- package/dist/cjs/components/XAdkWebProvider/XAdkWebProvider.stories.js +15 -3
- package/dist/cjs/components/XAdkWebProvider/XAdkWebProvider.stories.js.map +2 -2
- package/dist/cjs/components/XAdkWebProvider/index.js +19 -2
- package/dist/cjs/components/XAdkWebProvider/index.js.map +2 -2
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js +24 -4
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js.map +2 -2
- package/dist/cjs/components/XAiChatbot/index.js +11 -2
- package/dist/cjs/components/XAiChatbot/index.js.map +2 -2
- package/dist/cjs/hooks/useADKChat.js.map +1 -1
- package/dist/cjs/types/XAdkProvider.d.ts +39 -0
- package/dist/cjs/types/XAdkProvider.js +16 -0
- package/dist/cjs/types/XAdkProvider.js.map +3 -3
- package/dist/cjs/types/XAiMessage.d.ts +8 -1
- package/dist/cjs/types/XAiMessage.js.map +2 -2
- package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js +3 -3
- package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js.map +1 -1
- package/dist/esm/components/XAdkWebProvider/XAdkWebProvider.stories.js +12 -3
- package/dist/esm/components/XAdkWebProvider/XAdkWebProvider.stories.js.map +1 -1
- package/dist/esm/components/XAdkWebProvider/index.js +17 -2
- package/dist/esm/components/XAdkWebProvider/index.js.map +1 -1
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js +24 -4
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js.map +1 -1
- package/dist/esm/components/XAiChatbot/index.js +13 -6
- package/dist/esm/components/XAiChatbot/index.js.map +1 -1
- package/dist/esm/hooks/useADKChat.js.map +1 -1
- package/dist/esm/types/XAdkProvider.d.ts +39 -0
- package/dist/esm/types/XAdkProvider.js +32 -1
- package/dist/esm/types/XAdkProvider.js.map +1 -1
- package/dist/esm/types/XAiMessage.d.ts +8 -1
- package/dist/esm/types/XAiMessage.js.map +1 -1
- package/dist/umd/chat-sdk.min.js +1 -1
- package/package.json +5 -3
|
@@ -34,9 +34,9 @@ __export(MarkdownRender_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(MarkdownRender_exports);
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_x_markdown = __toESM(require("@ant-design/x-markdown"));
|
|
37
|
-
var
|
|
38
|
-
var import_Latex = __toESM(require("@ant-design/x-markdown/plugins/Latex"));
|
|
37
|
+
var import_x = require("@ant-design/x");
|
|
39
38
|
var import_antd = require("antd");
|
|
39
|
+
var import_Latex = __toESM(require("@ant-design/x-markdown/plugins/Latex"));
|
|
40
40
|
var import_styles = require("./styles");
|
|
41
41
|
var import_icons = require("@ant-design/icons");
|
|
42
42
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -46,7 +46,7 @@ var CodeComponent = (props) => {
|
|
|
46
46
|
const lang = ((_a = className == null ? void 0 : className.match(/language-(\w+)/)) == null ? void 0 : _a[1]) || "";
|
|
47
47
|
if (typeof children !== "string")
|
|
48
48
|
return null;
|
|
49
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_x.CodeHighlighter, { lang, children });
|
|
50
50
|
};
|
|
51
51
|
var ThinkComponent = import_react.default.memo((props) => {
|
|
52
52
|
const type = props.type || "";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/XAdkChatbot/components/MarkdownRender/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport XMarkdown, { type ComponentProps } from '@ant-design/x-markdown';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA+C;AAC/C,
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport XMarkdown, { type ComponentProps } from '@ant-design/x-markdown';\nimport { CodeHighlighter } from \"@ant-design/x\";\nimport { Flex } from 'antd';\nimport Latex from '@ant-design/x-markdown/plugins/Latex';\nimport { useStyles } from './styles';\nimport { BarsOutlined, BulbOutlined, ThunderboltOutlined, CheckCircleOutlined } from '@ant-design/icons';\n\n\nconst CodeComponent: React.FC<ComponentProps> = (props) => {\n const { className, children } = props;\n const lang = className?.match(/language-(\\w+)/)?.[1] || '';\n\n if (typeof children !== 'string') return null;\n return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;\n}\n\nexport interface MarkdownRenderProps {\n text: string;\n}\n\nconst ThinkComponent = React.memo((props: ComponentProps) => {\n const type = (props.type || '') as string;\n const titleMap: Record<string, string> = {\n planning: '规划',\n replanning: '重新规划',\n reasoning: '推理',\n action: '行动',\n final_answer: '最终答案',\n };\n const iconMap = {\n planning: <BarsOutlined />,\n replanning: <BarsOutlined />,\n reasoning: <BulbOutlined />,\n action: <ThunderboltOutlined />,\n final_answer: <CheckCircleOutlined />,\n };\n\n return (\n <Flex align=\"center\" gap={8} style={{ color: '#888', margin: '4px 0' }}>\n {type in titleMap && iconMap[type as keyof typeof iconMap]}\n <span>{titleMap[type]}</span>\n </Flex>\n );\n});\n\nconst MarkdownRender: React.FC<MarkdownRenderProps> = ({ text }) => {\n const styles = useStyles();\n const markdown = text\n .replaceAll(/\\/\\*\\s*PLANNING\\s*\\*\\//g, '<tag type=\"planning\"></tag>')\n .replaceAll(/\\/\\*\\s*REPLANNING\\s*\\*\\//g, '<tag type=\"replanning\"></tag>')\n .replaceAll(/\\/\\*\\s*REASONING\\s*\\*\\//g, '<tag type=\"reasoning\"></tag>')\n .replaceAll(/\\/\\*\\s*ACTION\\s*\\*\\//g, '<tag type=\"action\"></tag>')\n .replaceAll(/\\/\\*\\s*FINAL_ANSWER\\s*\\*\\//g, '<tag type=\"final_answer\"></tag>');\n \n return (\n <div className={styles.markdownWrapper}>\n <div className={styles.markdownHost}>\n <XMarkdown\n content={markdown}\n paragraphTag=\"div\"\n config={{\n extensions: Latex(),\n }}\n components={{\n tag: ThinkComponent,\n code: CodeComponent,\n }}\n streaming={{\n enableAnimation: true,\n animationConfig: {\n fadeDuration: 400,\n },\n }}\n />\n </div>\n </div>\n );\n};\n\nexport default MarkdownRender;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAA+C;AAC/C,eAAgC;AAChC,kBAAqB;AACrB,mBAAkB;AAClB,oBAA0B;AAC1B,mBAAqF;AAQ5E;AALT,IAAM,gBAA0C,CAAC,UAAU;AAT3D;AAUE,QAAM,EAAE,WAAW,SAAS,IAAI;AAChC,QAAM,SAAO,4CAAW,MAAM,sBAAjB,mBAAqC,OAAM;AAExD,MAAI,OAAO,aAAa;AAAU,WAAO;AACzC,SAAO,4CAAC,4BAAgB,MAAa,UAAS;AAChD;AAMA,IAAM,iBAAiB,aAAAA,QAAM,KAAK,CAAC,UAA0B;AAC3D,QAAM,OAAQ,MAAM,QAAQ;AAC5B,QAAM,WAAmC;AAAA,IACvC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AACA,QAAM,UAAU;AAAA,IACd,UAAU,4CAAC,6BAAa;AAAA,IACxB,YAAY,4CAAC,6BAAa;AAAA,IAC1B,WAAW,4CAAC,6BAAa;AAAA,IACzB,QAAQ,4CAAC,oCAAoB;AAAA,IAC7B,cAAc,4CAAC,oCAAoB;AAAA,EACrC;AAEA,SACE,6CAAC,oBAAK,OAAM,UAAS,KAAK,GAAG,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,GAClE;AAAA,YAAQ,YAAY,QAAQ,IAA4B;AAAA,IACzD,4CAAC,UAAM,mBAAS,IAAI,GAAE;AAAA,KACxB;AAEJ,CAAC;AAED,IAAM,iBAAgD,CAAC,EAAE,KAAK,MAAM;AAClE,QAAM,aAAS,yBAAU;AACzB,QAAM,WAAW,KACd,WAAW,2BAA2B,6BAA6B,EACnE,WAAW,6BAA6B,+BAA+B,EACvE,WAAW,4BAA4B,8BAA8B,EACrE,WAAW,yBAAyB,2BAA2B,EAC/D,WAAW,+BAA+B,iCAAiC;AAE9E,SACE,4CAAC,SAAI,WAAW,OAAO,iBACrB,sDAAC,SAAI,WAAW,OAAO,cACrB;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,cAAa;AAAA,MACb,QAAQ;AAAA,QACN,gBAAY,aAAAC,SAAM;AAAA,MACpB;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,IAAO,yBAAQ;",
|
|
6
|
+
"names": ["React", "XMarkdown", "Latex"]
|
|
7
7
|
}
|
|
@@ -107,11 +107,22 @@ var 携带历史记录实例 = {
|
|
|
107
107
|
const handleSendMessage = () => {
|
|
108
108
|
var _a;
|
|
109
109
|
if ((_a = providerRef.current) == null ? void 0 : _a.chat) {
|
|
110
|
-
providerRef.current.chat({
|
|
110
|
+
providerRef.current.chat({
|
|
111
|
+
text: "你好,AI!",
|
|
112
|
+
// 上传文案
|
|
113
|
+
files: []
|
|
114
|
+
// 如果需要上传附件
|
|
115
|
+
});
|
|
111
116
|
} else {
|
|
112
117
|
console.log("XAdkWebProvider ref 未准备好或 chat 方法不存在");
|
|
113
118
|
}
|
|
114
119
|
};
|
|
120
|
+
const handleOnEvent = (event) => {
|
|
121
|
+
const { code } = event;
|
|
122
|
+
if (code === "SESSION_SWITCH") {
|
|
123
|
+
console.log(providerRef.current.getMessages());
|
|
124
|
+
}
|
|
125
|
+
};
|
|
115
126
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "600px", width: "100vw" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
127
|
import_index.default,
|
|
117
128
|
{
|
|
@@ -120,13 +131,14 @@ var 携带历史记录实例 = {
|
|
|
120
131
|
onError: (providerError) => console.log(providerError),
|
|
121
132
|
onSuccess: (appInfo) => console.log(appInfo),
|
|
122
133
|
onStream: (data) => console.log(data),
|
|
123
|
-
onMessage: (data, message) => console.log(data, message)
|
|
134
|
+
onMessage: (data, message) => console.log(data, message),
|
|
135
|
+
onEvent: handleOnEvent
|
|
124
136
|
}
|
|
125
137
|
) }) });
|
|
126
138
|
},
|
|
127
139
|
args: {
|
|
128
140
|
url: "https://m-poc-dev.zaxline.com",
|
|
129
|
-
token: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.
|
|
141
|
+
token: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiVjRTT0htSm8zWmVhNFJOdWc3WFgyQT09Iiwic2NvcGUiOlsiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIl0sImV4cCI6MTc2ODI5NjA1OCwianRpIjoiMmNPd3JDeHVBUXc1Z3BDU3lObXVaVi1FV3hrIiwiY2xpZW50X2lkIjoiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIn0.RLqhDrn4nsnpxX8U6SsndtwW0RKwb2A4R9O3rPLenIzXEUVSYcOQp3HEee5RujL_-46mH629-afsJ794ODLAr8bgUfxHxwVX5vapI3jeBLS8q-M-kll8JsdrgscU38DdfozVo9j0cuCTJ3FdXVaR8CpLAG9yVZdB9KhGeZuPrR6RslloVf_ulJ4ePHP5YQ5Z29fXiPkQNMtUpZWfdsu6m79n9sPQi_IwSsfvDEw2vzg4R4sHPK_lakvRSMcI_OSEvs4GqtxbyUdtifJLX7S1iSvTFYIWTcHhsracWqy6-pOIEtJAlqETMg_E73IILb2cr1-dWG52_ymkf9UNLYtZ0g",
|
|
130
142
|
config: {
|
|
131
143
|
appNo: "MFX5TxlheIKbekZHKoeOVNlo",
|
|
132
144
|
session: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAdkWebProvider/XAdkWebProvider.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button } from 'antd';\nimport XAdkWebProvider from './index';\n\nconst meta: Meta<typeof XAdkWebProvider> = {\n title: 'AI组件/XAdkWebProvider AI容器',\n component: XAdkWebProvider,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: 'AI 聊天机器人容器组件,提供全局上下文和消息管理功能。',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n config: {\n description: '配置信息',\n table: {\n type: {\n summary: 'XAdkWebProviderConfig',\n detail: `{\n appNo?: string; // 应用唯一编号\n }`,\n },\n category: '配置选项',\n },\n },\n },\n // 添加装饰器,确保组件有必要的上下文\n decorators: [\n (Story) => (\n <div style={{ padding: '20px' }}>\n <Story />\n </div>\n ),\n ],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// 使用 Provider 的 XAiChatbot\nexport const 单聊天窗口实例: Story = {\n render: (args) => {\n const providerRef = React.useRef<any>(null);\n\n const handleSendMessage = () => {\n if (providerRef.current?.chat) {\n providerRef.current.chat({ text: '你好,AI!' });\n } else {\n console.log('XAdkWebProvider ref 未准备好或 chat 方法不存在');\n }\n };\n\n return (\n <div style={{ display: 'flex' }}>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginRight: '24px', justifyContent: 'center' }}>\n <Button type=\"primary\" onClick={handleSendMessage}>发送消息</Button>\n </div>\n <div style={{ maxWidth: '350px', height: '600px' }}>\n <XAdkWebProvider\n ref={providerRef}\n {...args}\n // onError={(providerError) => console.log(providerError)}\n // onMessage={(data) => console.log(data)}\n >\n </XAdkWebProvider>\n </div>\n </div>\n );\n },\n args: {\n url: 'https://m-poc-dev.zaxline.com',\n token: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiVjRTT0htSm8zWmVhNFJOdWc3WFgyQT09Iiwic2NvcGUiOlsiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIl0sImV4cCI6MTc2Nzk1MjM0NywianRpIjoiSHpLMll4cVdjSTA3QWtmOHlsQXYwV0w0aE5jIiwiY2xpZW50X2lkIjoiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIn0.AjABoyZFxAACkfy-ywLlfaJd6YY0Ir3pBGx_-HzW9di9p_4rnptbFI4adk9pktSVtlLB0cs45SU6uzp6VCJUj9-q-MP8QBqL6i7u2HV9e-kuBJgyIZD4t0PsazpJNu4rDlBAymYzw73ptLPjCwsUkckUz4Xhy1WmR8mpmuG0nuSWzlDlWKiaPgeMhA0Cnp4BV47zplvQ-r60VkarCg9JGHQNmIkQfG3llcjc-ZK4UKVkrFZynXhcCsp1ry7TwfRnwtXwQ1kZXDmeQxWFudhVaHwthraFF-fkHmYZpyTDrZQJY2Rn9nWO59ZHNh3I6-KiKdsNzv8Jl5T_dCUVPj7l3w',\n config: {\n appNo: 'MFX5TxlheIKbekZHKoeOVNlo',\n },\n providerId: 'demo-provider',\n },\n};\n\n\n// 使用 Provider 的 XAiChatbot\nexport const 携带历史记录实例: Story = {\n render: (args) => {\n const providerRef = React.useRef<any>(null);\n\n const handleSendMessage = () => {\n if (providerRef.current?.chat) {\n providerRef.current.chat({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAuB;AACvB,mBAA4B;AAgCpB;AA9BR,IAAM,OAAqC;AAAA,EACzC,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACL,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA;AAAA;AAAA,QAGV;AAAA,QACA,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,YAAY;AAAA,IACV,CAAC,UACC,4CAAC,SAAI,OAAO,EAAE,SAAS,OAAO,GAC5B,sDAAC,SAAM,GACT;AAAA,EAEJ;AACF;AAEA,IAAO,kCAAQ;AAIR,IAAM,UAAiB;AAAA,EAC5B,QAAQ,CAAC,SAAS;AAChB,UAAM,cAAc,aAAAC,QAAM,OAAY,IAAI;AAE1C,UAAM,oBAAoB,MAAM;AAjDpC;AAkDM,WAAI,iBAAY,YAAZ,mBAAqB,MAAM;AAC7B,oBAAY,QAAQ,KAAK,EAAE,MAAM,SAAS,CAAC;AAAA,MAC7C,OAAO;AACL,gBAAQ,IAAI,sCAAsC;AAAA,MACpD;AAAA,IACF;AAEA,WACE,6CAAC,SAAI,OAAO,EAAE,SAAS,OAAO,GAC5B;AAAA,kDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,aAAa,QAAQ,gBAAgB,SAAS,GACjH,sDAAC,sBAAO,MAAK,WAAU,SAAS,mBAAmB,kBAAI,GACzD;AAAA,MACA,4CAAC,SAAI,OAAO,EAAE,UAAU,SAAS,QAAQ,QAAQ,GAC/C;AAAA,QAAC,aAAAD;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAG;AAAA;AAAA,MAIN,GACF;AAAA,OACF;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,EACd;AACF;AAIO,IAAM,WAAkB;AAAA,EAC7B,QAAQ,CAAC,SAAS;AAChB,UAAM,cAAc,aAAAC,QAAM,OAAY,IAAI;AAE1C,UAAM,oBAAoB,MAAM;AA1FpC;AA2FM,WAAI,iBAAY,YAAZ,mBAAqB,MAAM;AAC7B,oBAAY,QAAQ,KAAK,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button } from 'antd';\nimport XAdkWebProvider from './index';\n\nconst meta: Meta<typeof XAdkWebProvider> = {\n title: 'AI组件/XAdkWebProvider AI容器',\n component: XAdkWebProvider,\n parameters: {\n layout: 'centered',\n docs: {\n description: {\n component: 'AI 聊天机器人容器组件,提供全局上下文和消息管理功能。',\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n config: {\n description: '配置信息',\n table: {\n type: {\n summary: 'XAdkWebProviderConfig',\n detail: `{\n appNo?: string; // 应用唯一编号\n }`,\n },\n category: '配置选项',\n },\n },\n },\n // 添加装饰器,确保组件有必要的上下文\n decorators: [\n (Story) => (\n <div style={{ padding: '20px' }}>\n <Story />\n </div>\n ),\n ],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// 使用 Provider 的 XAiChatbot\nexport const 单聊天窗口实例: Story = {\n render: (args) => {\n const providerRef = React.useRef<any>(null);\n\n const handleSendMessage = () => {\n if (providerRef.current?.chat) {\n providerRef.current.chat({ text: '你好,AI!' });\n } else {\n console.log('XAdkWebProvider ref 未准备好或 chat 方法不存在');\n }\n };\n\n return (\n <div style={{ display: 'flex' }}>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginRight: '24px', justifyContent: 'center' }}>\n <Button type=\"primary\" onClick={handleSendMessage}>发送消息</Button>\n </div>\n <div style={{ maxWidth: '350px', height: '600px' }}>\n <XAdkWebProvider\n ref={providerRef}\n {...args}\n // onError={(providerError) => console.log(providerError)}\n // onMessage={(data) => console.log(data)}\n >\n </XAdkWebProvider>\n </div>\n </div>\n );\n },\n args: {\n url: 'https://m-poc-dev.zaxline.com',\n token: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiVjRTT0htSm8zWmVhNFJOdWc3WFgyQT09Iiwic2NvcGUiOlsiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIl0sImV4cCI6MTc2Nzk1MjM0NywianRpIjoiSHpLMll4cVdjSTA3QWtmOHlsQXYwV0w0aE5jIiwiY2xpZW50X2lkIjoiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIn0.AjABoyZFxAACkfy-ywLlfaJd6YY0Ir3pBGx_-HzW9di9p_4rnptbFI4adk9pktSVtlLB0cs45SU6uzp6VCJUj9-q-MP8QBqL6i7u2HV9e-kuBJgyIZD4t0PsazpJNu4rDlBAymYzw73ptLPjCwsUkckUz4Xhy1WmR8mpmuG0nuSWzlDlWKiaPgeMhA0Cnp4BV47zplvQ-r60VkarCg9JGHQNmIkQfG3llcjc-ZK4UKVkrFZynXhcCsp1ry7TwfRnwtXwQ1kZXDmeQxWFudhVaHwthraFF-fkHmYZpyTDrZQJY2Rn9nWO59ZHNh3I6-KiKdsNzv8Jl5T_dCUVPj7l3w',\n config: {\n appNo: 'MFX5TxlheIKbekZHKoeOVNlo',\n },\n providerId: 'demo-provider',\n },\n};\n\n\n// 使用 Provider 的 XAiChatbot\nexport const 携带历史记录实例: Story = {\n render: (args) => {\n const providerRef = React.useRef<any>(null);\n\n const handleSendMessage = () => {\n if (providerRef.current?.chat) {\n providerRef.current.chat({\n text: '你好,AI!', // 上传文案\n files: [], // 如果需要上传附件\n });\n } else {\n console.log('XAdkWebProvider ref 未准备好或 chat 方法不存在');\n }\n };\n\n const handleOnEvent = (event: any) => {\n const { code } = event;\n if (code === 'SESSION_SWITCH') {\n console.log(providerRef.current.getMessages());\n }\n };\n\n return (\n <div style={{ display: 'flex' }}>\n <div style={{ height: '600px', width: '100vw' }}>\n <XAdkWebProvider\n ref={providerRef}\n {...args}\n onError={(providerError) => console.log(providerError)}\n onSuccess={(appInfo) => console.log(appInfo)}\n onStream={(data) => console.log(data)}\n onMessage={(data, message) => console.log(data, message)}\n onEvent={handleOnEvent}\n />\n </div>\n </div>\n );\n },\n args: {\n url: 'https://m-poc-dev.zaxline.com',\n token: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiVjRTT0htSm8zWmVhNFJOdWc3WFgyQT09Iiwic2NvcGUiOlsiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIl0sImV4cCI6MTc2ODI5NjA1OCwianRpIjoiMmNPd3JDeHVBUXc1Z3BDU3lObXVaVi1FV3hrIiwiY2xpZW50X2lkIjoiTUZYNVR4bGhlSUtiZWtaSEtvZU9WTmxvIn0.RLqhDrn4nsnpxX8U6SsndtwW0RKwb2A4R9O3rPLenIzXEUVSYcOQp3HEee5RujL_-46mH629-afsJ794ODLAr8bgUfxHxwVX5vapI3jeBLS8q-M-kll8JsdrgscU38DdfozVo9j0cuCTJ3FdXVaR8CpLAG9yVZdB9KhGeZuPrR6RslloVf_ulJ4ePHP5YQ5Z29fXiPkQNMtUpZWfdsu6m79n9sPQi_IwSsfvDEw2vzg4R4sHPK_lakvRSMcI_OSEvs4GqtxbyUdtifJLX7S1iSvTFYIWTcHhsracWqy6-pOIEtJAlqETMg_E73IILb2cr1-dWG52_ymkf9UNLYtZ0g',\n config: {\n appNo: 'MFX5TxlheIKbekZHKoeOVNlo',\n session: {\n showSessionList: true,\n },\n },\n providerId: 'demo-provider',\n },\n};"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["XAdkWebProvider", "React"]
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
|
|
|
38
38
|
var import_x = require("@ant-design/x");
|
|
39
39
|
var import_icons = require("@ant-design/icons");
|
|
40
40
|
var import_constants = require("../../constants");
|
|
41
|
+
var import_types = require("../../types");
|
|
41
42
|
var import_XAdkChatbot = __toESM(require("../XAdkChatbot"));
|
|
42
43
|
var import_DislikeFeedback = __toESM(require("../DislikeFeedback"));
|
|
43
44
|
var import_useADKChat = __toESM(require("../../hooks/useADKChat"));
|
|
@@ -52,6 +53,7 @@ var XAdkWebProvider = (0, import_react.forwardRef)(({
|
|
|
52
53
|
token,
|
|
53
54
|
config,
|
|
54
55
|
providerId = "defaultId",
|
|
56
|
+
onEvent,
|
|
55
57
|
onSuccess,
|
|
56
58
|
onStream,
|
|
57
59
|
onMessage,
|
|
@@ -323,8 +325,23 @@ var XAdkWebProvider = (0, import_react.forwardRef)(({
|
|
|
323
325
|
{
|
|
324
326
|
isNarrow: false,
|
|
325
327
|
sessionList,
|
|
326
|
-
onActiveChange: (key) =>
|
|
327
|
-
|
|
328
|
+
onActiveChange: (key) => {
|
|
329
|
+
setCurrentSessionDetail(key);
|
|
330
|
+
onEvent == null ? void 0 : onEvent({
|
|
331
|
+
code: import_types.EventCode.SESSION_SWITCH,
|
|
332
|
+
message: "切换会话",
|
|
333
|
+
data: {
|
|
334
|
+
sessionId: key
|
|
335
|
+
}
|
|
336
|
+
});
|
|
337
|
+
},
|
|
338
|
+
onNewChat: () => {
|
|
339
|
+
clearChat == null ? void 0 : clearChat();
|
|
340
|
+
onEvent == null ? void 0 : onEvent({
|
|
341
|
+
code: import_types.EventCode.SESSION_CREATE,
|
|
342
|
+
message: "开启新会话"
|
|
343
|
+
});
|
|
344
|
+
},
|
|
328
345
|
activeKey: currentSessionId,
|
|
329
346
|
menu: menuConfig
|
|
330
347
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAdkWebProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';\nimport { message, Flex, Tooltip, Button, Modal, Input, ConfigProvider } from 'antd';\nimport copy from 'copy-to-clipboard';\nimport { XProvider } from '@ant-design/x';\nimport type { ConversationsProps } from '@ant-design/x';\nimport { ExclamationCircleFilled, ReloadOutlined, CopyOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';\nimport { XAdkProviderProps, XAdkProviderHandle } from '@/types/XAdkProvider';\nimport { MOBILE_MAX_WIDTH, API_SUCCESS_CODE } from '@/constants';\nimport type { IMessage, SendContent } from '@/types';\nimport XAdkChatbot from '../XAdkChatbot';\nimport DislikeFeedback from '../DislikeFeedback';\nimport useADKChat from '@/hooks/useADKChat';\nimport { addFeedback } from '@/services/api';\nimport { primaryBlue } from '@/styles/common';\nimport XAiConversations from '../XAiConversations';\nimport { useStyles } from './styles';\n\nconst { confirm } = Modal;\n\nconst XAdkWebProvider = forwardRef<XAdkProviderHandle, XAdkProviderProps>(({\n url = window.location.origin,\n token,\n config,\n providerId = 'defaultId',\n onSuccess,\n onStream,\n onMessage,\n onError,\n}, ref) => {\n // 使用 useAgentGenerator Hook 管理消息状态\n const styles = useStyles();\n // const { textSpeed = 55 } = config?.chatProps || {};\n\n const {\n appInfo,\n loading,\n messages,\n prologue,\n suggestions,\n sessionList,\n currentSessionId,\n initialized,\n setMessages,\n startChat,\n stopChat,\n clearChat,\n suggestChat,\n confirmFnCall,\n deleteSession,\n updateSession,\n setCurrentSessionDetail,\n } = useADKChat({ url, config, token, onSuccess, onError, onStream, onMessage });\n\n // const { appName, icon } = appInfo || {};\n\n useImperativeHandle(ref, () => ({\n startChat,\n stopChat,\n clearChat,\n suggestChat,\n deleteSession,\n updateSession,\n getAppInfo: () => appInfo,\n getMessages: () => messages,\n getSessions: () => sessionList,\n setMessages,\n setCurrentSessionDetail,\n }), [appInfo, messages, stopChat, setMessages, setCurrentSessionDetail]);\n\n const [_isNarrow, setIsNarrow] = useState<boolean>(false);\n const divRef = useRef<HTMLDivElement>(null);\n\n // 监听容器宽度变化\n useEffect(() => {\n const div = divRef.current;\n if (!div) return;\n\n // 创建监听器\n const resizeObserver = new ResizeObserver((entries) => {\n // eslint-disable-next-line no-restricted-syntax\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setIsNarrow(width <= MOBILE_MAX_WIDTH);\n }\n });\n\n // 开始监听\n resizeObserver.observe(div);\n\n // 初始化检查\n const initialWidth = div.offsetWidth;\n setIsNarrow(initialWidth <= MOBILE_MAX_WIDTH);\n\n // 清理函数\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n // 发送消息\n const handleSendMessage = async ({ text = '' }: SendContent) => {\n await startChat({ text });\n };\n\n // 处理添加反馈\n const handleAddFeedback = async (data: any) => {\n const { appNo } = config || {};\n const isLike = data?.raw?.isLike ?? 0;\n if (isLike !== 0) {\n message.warning('已收到您的反馈,无需重复提交');\n return;\n }\n if (appNo) {\n const { result } = await addFeedback({\n url,\n token,\n appNo,\n requestId: data.invocationId,\n isLike: 1,\n });\n if (result?.code === API_SUCCESS_CODE) {\n message.success('感谢您的反馈');\n setMessages((prev) => {\n return prev.map((item) => {\n if (item.id === data.id) {\n return {\n ...item,\n raw: {\n ...item.raw,\n isLike: 1, \n }\n };\n }\n return item;\n });\n });\n } else {\n message.error('反馈失败,请稍后再试');\n }\n }\n };\n\n\n const renderFooter = ({ message: msg = {} as IMessage, isLastBotMsg = false, isLastMsg = false}) => {\n if (isLastBotMsg) {\n return (\n <Flex gap={4} style={{ padding: '8px 0' }}>\n {isLastMsg && (\n <Tooltip title=\"重新生成\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={<ReloadOutlined />}\n onClick={() => {\n const lastMsg = messages.findLast((v) => {\n return v.role === 'user' && v.text;\n });\n handleSendMessage({ text: lastMsg?.text || '' });\n }}\n />\n </Tooltip>\n )}\n <Tooltip title=\"赞\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={msg.raw?.isLike === 1 ? <LikeFilled /> : <LikeOutlined />}\n onClick={() => handleAddFeedback(msg)}\n />\n </Tooltip>\n <Tooltip title=\"踩\">\n <DislikeFeedback\n msg={msg}\n activeColor={appInfo?.appTheme || primaryBlue}\n onSubmit={async (formData) => {\n const { result } = await addFeedback({\n ...formData,\n requestId: msg.invocationId,\n isLike: -1,\n url,\n appNo: config?.appNo,\n token,\n });\n if (result?.code === API_SUCCESS_CODE) {\n message.success('已收到您的反馈,我们会努力做的更好');\n setMessages((prev) => {\n return prev.map((item) => {\n if (item.id === msg.id) {\n return {\n ...item,\n isLike: -1,\n };\n }\n return item;\n });\n });\n return true;\n }\n message.error('反馈失败,请稍后再试');\n return false;\n }}\n />\n </Tooltip>\n <Tooltip title=\"复制\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={<CopyOutlined />}\n onClick={() => {\n const msgs = messages.filter((v) => {\n return v.role === 'bot'\n && v.invocationId === msg.invocationId\n && v.text;\n });\n const text = msgs.map((v) => {\n return v.text;\n }).join('\\n');\n const isOk = copy(text);\n if (isOk) {\n message.success('复制成功');\n }\n }}\n />\n </Tooltip>\n </Flex>\n );\n }\n return null;\n };\n\n // 修改会话内容\n const handleUpdateSession = (sessionId: string, title: string) => {\n updateSession(sessionId, title);\n };\n\n // 会话操作菜单\n const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n items: [\n {\n label: '重命名',\n key: 'edit',\n },\n {\n label: '删除',\n key: 'delete',\n danger: true,\n },\n ],\n onClick: (menuInfo) => {\n menuInfo.domEvent.stopPropagation();\n const { key } = menuInfo;\n switch (key) {\n case 'edit': {\n let inputValue = conversation.label as string || '';\n confirm({\n title: '编辑对话名称',\n icon: null,\n content: (\n <Input\n defaultValue={inputValue}\n autoFocus\n style={{ width: '100%' }}\n onChange={(e) => {\n inputValue = e.target.value;\n }}\n />\n ),\n okText: '确认',\n cancelText: '取消',\n okButtonProps: {\n style: { background: '#000', borderColor: '#000', color: '#fff' },\n },\n onOk: () => {\n if (!inputValue.trim()) {\n message.error('对话名称不能为空');\n return Promise.reject();\n }\n handleUpdateSession(conversation.key, inputValue);\n },\n onCancel: () => {\n // 静默处理\n },\n });\n break;\n }\n case 'delete':\n confirm({\n title: '确认删除?',\n icon: <ExclamationCircleFilled />,\n content: '该对话内容将被删除无法恢复。',\n okText: '确认删除',\n okType: 'danger',\n cancelText: '取消',\n okButtonProps: {\n style: { background: '#ff4d4f', borderColor: '#ff4d4f', color: '#fff' },\n },\n onOk() {\n deleteSession(conversation.key);\n },\n onCancel() {\n //\n },\n });\n break;\n }\n },\n });\n\n // 是否展示清空按钮\n const clearBtnShow = typeof config?.chatProps?.clearBtnShow !== 'undefined'\n ? config.chatProps.clearBtnShow\n : !config?.session?.showSessionList;\n\n return (\n <ConfigProvider>\n <XProvider>\n <div\n ref={divRef}\n className={styles.providerWrapper}\n > \n {config?.session?.showSessionList && (\n <XAiConversations\n isNarrow={false}\n sessionList={sessionList}\n onActiveChange={(key) => setCurrentSessionDetail(key)}\n onNewChat={clearChat}\n activeKey={currentSessionId}\n menu={menuConfig}\n />\n )}\n <div className={styles.chatbotWrapper}>\n <div className={styles.content}>\n <XAdkChatbot\n allowUpload={config?.allowUpload}\n initialized={initialized}\n prologue={prologue}\n suggestions={suggestions}\n loading={loading}\n messages={messages}\n footer={renderFooter}\n onSubmit={handleSendMessage}\n onConfirm={confirmFnCall}\n onStop={stopChat}\n onClear={clearChat}\n onSuggest={suggestChat}\n clearBtnShow={clearBtnShow}\n />\n </div>\n </div>\n </div>\n </XProvider>\n </ConfigProvider>\n );\n});\n\nexport default XAdkWebProvider;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6E;AAC7E,kBAA6E;AAC7E,+BAAiB;AACjB,eAA0B;AAE1B,mBAAgG;AAEhG,uBAAmD;
|
|
4
|
+
"sourcesContent": ["import { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';\nimport { message, Flex, Tooltip, Button, Modal, Input, ConfigProvider } from 'antd';\nimport copy from 'copy-to-clipboard';\nimport { XProvider } from '@ant-design/x';\nimport type { ConversationsProps } from '@ant-design/x';\nimport { ExclamationCircleFilled, ReloadOutlined, CopyOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';\nimport { XAdkProviderProps, XAdkProviderHandle } from '@/types/XAdkProvider';\nimport { MOBILE_MAX_WIDTH, API_SUCCESS_CODE } from '@/constants';\nimport { type IMessage, type SendContent, EventCode } from '@/types';\nimport XAdkChatbot from '../XAdkChatbot';\nimport DislikeFeedback from '../DislikeFeedback';\nimport useADKChat from '@/hooks/useADKChat';\nimport { addFeedback } from '@/services/api';\nimport { primaryBlue } from '@/styles/common';\nimport XAiConversations from '../XAiConversations';\nimport { useStyles } from './styles';\n\nconst { confirm } = Modal;\n\nconst XAdkWebProvider = forwardRef<XAdkProviderHandle, XAdkProviderProps>(({\n url = window.location.origin,\n token,\n config,\n providerId = 'defaultId',\n onEvent,\n onSuccess,\n onStream,\n onMessage,\n onError,\n}, ref) => {\n // 使用 useAgentGenerator Hook 管理消息状态\n const styles = useStyles();\n // const { textSpeed = 55 } = config?.chatProps || {};\n\n const {\n appInfo,\n loading,\n messages,\n prologue,\n suggestions,\n sessionList,\n currentSessionId,\n initialized,\n setMessages,\n startChat,\n stopChat,\n clearChat,\n suggestChat,\n confirmFnCall,\n deleteSession,\n updateSession,\n setCurrentSessionDetail,\n } = useADKChat({ url, config, token, onSuccess, onError, onStream, onMessage });\n\n // const { appName, icon } = appInfo || {};\n\n useImperativeHandle(ref, () => ({\n startChat,\n stopChat,\n clearChat,\n suggestChat,\n deleteSession,\n updateSession,\n getAppInfo: () => appInfo,\n getMessages: () => messages,\n getSessions: () => sessionList,\n setMessages,\n setCurrentSessionDetail,\n }), [appInfo, messages, stopChat, setMessages, setCurrentSessionDetail]);\n\n const [_isNarrow, setIsNarrow] = useState<boolean>(false);\n const divRef = useRef<HTMLDivElement>(null);\n\n // 监听容器宽度变化\n useEffect(() => {\n const div = divRef.current;\n if (!div) return;\n\n // 创建监听器\n const resizeObserver = new ResizeObserver((entries) => {\n // eslint-disable-next-line no-restricted-syntax\n for (const entry of entries) {\n const { width } = entry.contentRect;\n setIsNarrow(width <= MOBILE_MAX_WIDTH);\n }\n });\n\n // 开始监听\n resizeObserver.observe(div);\n\n // 初始化检查\n const initialWidth = div.offsetWidth;\n setIsNarrow(initialWidth <= MOBILE_MAX_WIDTH);\n\n // 清理函数\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n // 发送消息\n const handleSendMessage = async ({ text = '' }: SendContent) => {\n await startChat({ text });\n };\n\n // 处理添加反馈\n const handleAddFeedback = async (data: any) => {\n const { appNo } = config || {};\n const isLike = data?.raw?.isLike ?? 0;\n if (isLike !== 0) {\n message.warning('已收到您的反馈,无需重复提交');\n return;\n }\n if (appNo) {\n const { result } = await addFeedback({\n url,\n token,\n appNo,\n requestId: data.invocationId,\n isLike: 1,\n });\n if (result?.code === API_SUCCESS_CODE) {\n message.success('感谢您的反馈');\n setMessages((prev) => {\n return prev.map((item) => {\n if (item.id === data.id) {\n return {\n ...item,\n raw: {\n ...item.raw,\n isLike: 1, \n }\n };\n }\n return item;\n });\n });\n } else {\n message.error('反馈失败,请稍后再试');\n }\n }\n };\n\n\n const renderFooter = ({ message: msg = {} as IMessage, isLastBotMsg = false, isLastMsg = false}) => {\n if (isLastBotMsg) {\n return (\n <Flex gap={4} style={{ padding: '8px 0' }}>\n {isLastMsg && (\n <Tooltip title=\"重新生成\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={<ReloadOutlined />}\n onClick={() => {\n const lastMsg = messages.findLast((v) => {\n return v.role === 'user' && v.text;\n });\n handleSendMessage({ text: lastMsg?.text || '' });\n }}\n />\n </Tooltip>\n )}\n <Tooltip title=\"赞\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={msg.raw?.isLike === 1 ? <LikeFilled /> : <LikeOutlined />}\n onClick={() => handleAddFeedback(msg)}\n />\n </Tooltip>\n <Tooltip title=\"踩\">\n <DislikeFeedback\n msg={msg}\n activeColor={appInfo?.appTheme || primaryBlue}\n onSubmit={async (formData) => {\n const { result } = await addFeedback({\n ...formData,\n requestId: msg.invocationId,\n isLike: -1,\n url,\n appNo: config?.appNo,\n token,\n });\n if (result?.code === API_SUCCESS_CODE) {\n message.success('已收到您的反馈,我们会努力做的更好');\n setMessages((prev) => {\n return prev.map((item) => {\n if (item.id === msg.id) {\n return {\n ...item,\n isLike: -1,\n };\n }\n return item;\n });\n });\n return true;\n }\n message.error('反馈失败,请稍后再试');\n return false;\n }}\n />\n </Tooltip>\n <Tooltip title=\"复制\">\n <Button\n type=\"text\"\n size=\"small\"\n style={{ color: '#949494' }}\n icon={<CopyOutlined />}\n onClick={() => {\n const msgs = messages.filter((v) => {\n return v.role === 'bot'\n && v.invocationId === msg.invocationId\n && v.text;\n });\n const text = msgs.map((v) => {\n return v.text;\n }).join('\\n');\n const isOk = copy(text);\n if (isOk) {\n message.success('复制成功');\n }\n }}\n />\n </Tooltip>\n </Flex>\n );\n }\n return null;\n };\n\n // 修改会话内容\n const handleUpdateSession = (sessionId: string, title: string) => {\n updateSession(sessionId, title);\n };\n\n // 会话操作菜单\n const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n items: [\n {\n label: '重命名',\n key: 'edit',\n },\n {\n label: '删除',\n key: 'delete',\n danger: true,\n },\n ],\n onClick: (menuInfo) => {\n menuInfo.domEvent.stopPropagation();\n const { key } = menuInfo;\n switch (key) {\n case 'edit': {\n let inputValue = conversation.label as string || '';\n confirm({\n title: '编辑对话名称',\n icon: null,\n content: (\n <Input\n defaultValue={inputValue}\n autoFocus\n style={{ width: '100%' }}\n onChange={(e) => {\n inputValue = e.target.value;\n }}\n />\n ),\n okText: '确认',\n cancelText: '取消',\n okButtonProps: {\n style: { background: '#000', borderColor: '#000', color: '#fff' },\n },\n onOk: () => {\n if (!inputValue.trim()) {\n message.error('对话名称不能为空');\n return Promise.reject();\n }\n handleUpdateSession(conversation.key, inputValue);\n },\n onCancel: () => {\n // 静默处理\n },\n });\n break;\n }\n case 'delete':\n confirm({\n title: '确认删除?',\n icon: <ExclamationCircleFilled />,\n content: '该对话内容将被删除无法恢复。',\n okText: '确认删除',\n okType: 'danger',\n cancelText: '取消',\n okButtonProps: {\n style: { background: '#ff4d4f', borderColor: '#ff4d4f', color: '#fff' },\n },\n onOk() {\n deleteSession(conversation.key);\n },\n onCancel() {\n //\n },\n });\n break;\n }\n },\n });\n\n // 是否展示清空按钮\n const clearBtnShow = typeof config?.chatProps?.clearBtnShow !== 'undefined'\n ? config.chatProps.clearBtnShow\n : !config?.session?.showSessionList;\n\n return (\n <ConfigProvider>\n <XProvider>\n <div\n ref={divRef}\n className={styles.providerWrapper}\n > \n {config?.session?.showSessionList && (\n <XAiConversations\n isNarrow={false}\n sessionList={sessionList}\n onActiveChange={(key) => {\n setCurrentSessionDetail(key);\n onEvent?.({\n code: EventCode.SESSION_SWITCH,\n message: '切换会话',\n data: {\n sessionId: key,\n },\n });\n }}\n onNewChat={() => {\n clearChat?.();\n onEvent?.({\n code: EventCode.SESSION_CREATE,\n message: '开启新会话',\n });\n }}\n activeKey={currentSessionId}\n menu={menuConfig}\n />\n )}\n <div className={styles.chatbotWrapper}>\n <div className={styles.content}>\n <XAdkChatbot\n allowUpload={config?.allowUpload}\n initialized={initialized}\n prologue={prologue}\n suggestions={suggestions}\n loading={loading}\n messages={messages}\n footer={renderFooter}\n onSubmit={handleSendMessage}\n onConfirm={confirmFnCall}\n onStop={stopChat}\n onClear={clearChat}\n onSuggest={suggestChat}\n clearBtnShow={clearBtnShow}\n />\n </div>\n </div>\n </div>\n </XProvider>\n </ConfigProvider>\n );\n});\n\nexport default XAdkWebProvider;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["useADKChat", "_a", "DislikeFeedback", "copy", "XAiConversations", "XAdkChatbot"]
|
|
7
7
|
}
|
|
@@ -80,7 +80,20 @@ var mockMessages = [
|
|
|
80
80
|
status: import_XAiMessage.MessageStatus.done,
|
|
81
81
|
role: import_XAiMessage.MessageRole.user,
|
|
82
82
|
content: {
|
|
83
|
-
text: "检索从北京到上海的车票数据给我"
|
|
83
|
+
text: "检索从北京到上海的车票数据给我",
|
|
84
|
+
files: [{
|
|
85
|
+
"fileName": "4250105220774925bfaeb3ca2a3350fe.jpg",
|
|
86
|
+
"fileId": 334,
|
|
87
|
+
"fileUrl": "https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2",
|
|
88
|
+
"fileType": "image",
|
|
89
|
+
"fileSize": 28118
|
|
90
|
+
}, {
|
|
91
|
+
"fileName": "4250105220774925bfaeb3ca2a3350fe.pdf",
|
|
92
|
+
"fileId": 334,
|
|
93
|
+
"fileUrl": "https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2",
|
|
94
|
+
"fileType": "pdf",
|
|
95
|
+
"fileSize": 28118
|
|
96
|
+
}]
|
|
84
97
|
},
|
|
85
98
|
parentMessageId: "1"
|
|
86
99
|
},
|
|
@@ -366,7 +379,6 @@ var BasicUsageStory = (args) => {
|
|
|
366
379
|
import__.default,
|
|
367
380
|
{
|
|
368
381
|
...args,
|
|
369
|
-
inputShow: false,
|
|
370
382
|
messages,
|
|
371
383
|
loading,
|
|
372
384
|
messageTooltip: ToolTip,
|
|
@@ -376,12 +388,20 @@ var BasicUsageStory = (args) => {
|
|
|
376
388
|
onMessagesActionsCallback: handleActions,
|
|
377
389
|
enableUpload: true,
|
|
378
390
|
uploadRequest: ({ file, onProgress, onSuccess }) => {
|
|
379
|
-
console.info(file);
|
|
380
391
|
onProgress == null ? void 0 : onProgress({
|
|
381
392
|
percent: 50
|
|
382
393
|
});
|
|
383
394
|
setTimeout(() => {
|
|
384
|
-
onSuccess == null ? void 0 : onSuccess({
|
|
395
|
+
onSuccess == null ? void 0 : onSuccess({
|
|
396
|
+
"fileName": "4250105220774925bfaeb3ca2a3350fe.jpg",
|
|
397
|
+
"fileId": 334,
|
|
398
|
+
"fileUrl": "https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2",
|
|
399
|
+
"fileType": "image",
|
|
400
|
+
"fileSize": 28118,
|
|
401
|
+
"mimeType": "image/jpeg",
|
|
402
|
+
"tempUrl": "https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2",
|
|
403
|
+
"type": "image"
|
|
404
|
+
});
|
|
385
405
|
}, 1e3);
|
|
386
406
|
}
|
|
387
407
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiChatbot/XAiChatbot.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Divider } from 'antd';\nimport { MessageRole, MessageStatus } from '@/types/XAiMessage';\nimport type { Messages } from '@/types/XAiMessage';\nimport documentIcon from '@/assets/document.svg';\nimport XAiProvider from '../XAiProvider';\nimport XAiChatbot from '.';\nimport { useProviderContext, useProviderMethods } from '@/hooks/useProviderContext';\n\nconst meta: Meta<typeof XAiChatbot> = {\n title: 'AI组件/XAiChatbot 聊天框',\n component: XAiChatbot,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n navbar: {\n description: '导航栏配置',\n },\n messages: {\n description: '消息列表',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// mock 消息数据,严格符合 Messages 类型\nconst mockMessages: Messages[] = [\n {\n id: '1',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: '你好,有什么我能帮助你的吗?',\n },\n },\n {\n id: '2',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.user,\n content: {\n text: '检索从北京到上海的车票数据给我',\n },\n parentMessageId: '1',\n },\n {\n id: '22',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: '',\n },\n thinks: '',\n // execute: [\n // // 工具库调用(MCP_TOOL)\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-1',\n // name: '已调用MCP智能工具',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'INVOKE_AGENT_TOOL_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 工具库调用(PLUGIN_TOOL)\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-2',\n // name: '已调用插件工具',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'INVOKE_AGENT_TOOL_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 工具库调用(SKILL)\n // // {\n // // action: 'INVOKE_AGENT_TOOL_START',\n // // id: 'tool-3',\n // // toolType: 'SKILL',\n // // agentToolName: '技能工具',\n // // args: { param3: 'baz' },\n\n // // },\n // // // 知识库调用(FAQ)\n // // {\n // // action: 'RECALL_KNOWLEDGE_START',\n // // uniqueId: 'kb-1',\n // // processStatus: 'START',\n // // args: { question: '什么是FAQ?' },\n // // knowledgeType: 'FAQ',\n // // },\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-3',\n // name: '已调用文档知识库',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'RECALL_KNOWLEDGE_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 知识库调用(DOCUMENT)\n // // {\n // // action: 'RECALL_KNOWLEDGE_START',\n // // uniqueId: 'kb-2',\n // // processStatus: 'START',\n // // args: { question: '文档库介绍' },\n // // knowledgeType: 'DOCUMENT',\n // // },\n // // 运行完毕\n // ],\n extra: {\n noFooter: true,\n },\n },\n {\n id: '4',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.user,\n content: {\n text: '能否生成一段明年的产品计划开发计划文档给我',\n },\n },\n {\n id: '0',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: `\n# 项目开发计划\n\n本文档概述了 2025 年第三季度的产品开发计划,包括目标、里程碑、团队分工和风险预案。\n\n---\n\n## 🎯 核心目标\n\n- 提升用户留存率至 **45%**\n- 完成 Web 端新版上线\n- 建立 AI 推荐模块 MVP\n- 优化数据库访问性能\n\n---\n\n## 📅 关键时间节点\n\n| 里程碑 | 截止日期 | 负责人 | 代理人 | 截止日期 | 负责人 |\n|------------------|--------------|----------|------------------|--------------|----------|\n| 产品需求冻结 | 2025-08-01 | Alice | 产品需求冻结 | 2025-08-01 | Alice |\n| UI 设计定稿 | 2025-08-10 | Bob | 产品需求冻结 | 2025-08-01 | Alice |\n| 开发完成(内测) | 2025-09-15 | Charlie | 产品需求冻结 | 2025-08-01 | Alice |\n| 正式上线 | 2025-09-30 | Diana | 产品需求冻结 | 2025-08-01 | Alice |\n\n---\n\n## 🛠️ 技术方案简述\n\n我们将使用以下技术栈:\n\n- 前端:React + Vite + Zustand\n- 后端:Node.js + PostgreSQL\n- 数据分析:Python + Pandas\n- 部署环境:Kubernetes on AWS\n\n---\n\n## 💡 示例代码片段\n\n以下是一个用于生成唯一 ID 的函数示例:\n\n~~~ts\nimport { nanoid } from 'nanoid'\n\nexport function generateSessionId() {\n return \\`sess-\\${nanoid()}\\`\n}\n~~~\n`,\n },\n extra: {\n noFooter: true,\n },\n },\n {\n id: '11',\n type: 'SuggestionMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.suggestion,\n content: [\n {\n key: '1',\n description: '我要查看 AI 文档',\n },\n {\n key: '2',\n description: '我如何看待 AI',\n },\n {\n key: '3',\n description: '你是谁?',\n },\n ],\n },\n];\n\n// 基础用法\nconst BasicUsageStory = (args: any) => {\n const [messages, setMessages] = useState<Messages[]>(mockMessages);\n const [loading, setLoading] = useState<boolean>(false);\n\n // 模拟随机字符串流式返回\n const handleSendMessage = () => {\n setLoading(true);\n\n // 模拟流式输出(向 mockMessages 第二条消息 content.text 追加)\n const stream = ['我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '……'];\n\n stream.forEach((chunk, idx) => {\n setTimeout(() => {\n setMessages((prev) => {\n const updated = [...prev];\n const targetIndex = 2; // mockMessages 的第二条(索引 1)\n const targetMsg = updated[targetIndex];\n\n // 确保该消息存在且是 TextMessage\n if (targetMsg && targetMsg.type === 'TextMessage') {\n // content 可能是多种类型,这里做类型守卫\n if ('text' in targetMsg.content) {\n updated[targetIndex] = {\n ...targetMsg,\n content: {\n ...targetMsg.content,\n // 模拟随机字符串流式拼接\n // text: targetMsg.content.text + chunk + Math.random().toString(36).slice(2, 5),\n },\n thinks: targetMsg.thinks + chunk + Math.random().toString(36).slice(2, 5),\n status: MessageStatus.pending,\n };\n }\n }\n\n // 最后一个流块时,标记完成\n if (idx === stream.length - 1) {\n updated[targetIndex].execute?.push(\n {\n id: '5',\n type: 'ActionExecutionMessage',\n extra: {\n icon: documentIcon,\n },\n name: '运行完毕',\n createdAt: new Date(),\n });\n setLoading(false);\n updated[targetIndex] = {\n ...updated[targetIndex],\n status: MessageStatus.done,\n };\n }\n\n return updated;\n });\n }, 200 * (idx + 1)); // 每个片段延迟 600ms 模拟流\n });\n };\n\n useEffect(() => {\n if (messages) {\n handleSendMessage();\n }\n }, []);\n\n // 清空消息\n const handleClear = () => {\n setMessages([]);\n };\n\n // 模拟按钮回调\n const handleActions = (index: number, data: any) => {\n console.log(index, data);\n };\n\n // 模拟快捷短语点击\n const handleSuggestMessageClick = (_item: any, id: string) => {\n setMessages((prev) => prev.filter((m) => m.id !== id));\n };\n\n // tooltip\n const ToolTip = (data: any) => {\n const { cost, token } = data?.extra || {};\n if (!cost && !token) return null;\n return (\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n fontSize: '12px',\n color: '#949494',\n flex: 1,\n paddingRight: '40px',\n }}\n >\n {cost && <div>{cost}s</div>}\n {token && <Divider type=\"vertical\" />}\n {token && <div>{token} tokens</div>}\n </div>\n );\n };\n\n return (\n <div\n style={{\n height: '600px',\n width: '400px',\n border: '1px solid #e7e7e7',\n borderRadius: '8px',\n }}\n >\n <XAiChatbot\n {...args}\n inputShow={false}\n messages={messages}\n loading={loading}\n messageTooltip={ToolTip}\n onClear={handleClear}\n onSuggestMessageClick={handleSuggestMessageClick}\n onSend={handleSendMessage}\n onMessagesActionsCallback={handleActions}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n );\n};\n\nexport const 基础用法: Story = {\n render: BasicUsageStory,\n args: {\n navbar: {\n title: '智能助手',\n },\n // messages: mockMessages,\n emptyStateText: '众安智能体',\n },\n};\n\n// 在 Provider 中使用\nexport const 在Provider中使用: Story = {\n decorators: [\n (Story) => (\n <XAiProvider token=\"test-token\" url=\"https://api.example.com\">\n <Story />\n </XAiProvider>\n ),\n ],\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 多个 Provider 实例\nexport const 多个Provider实例: Story = {\n decorators: [\n (Story) => (\n <div style={{ display: 'flex', gap: '50px', height: '600px' }}>\n <XAiProvider providerId=\"chat1\" token=\"token1\" url=\"https://api1.example.com\">\n <div style={{ width: '300px', marginRight: '40px' }}>\n <Story />\n </div>\n </XAiProvider>\n <XAiProvider providerId=\"chat2\" token=\"token2\" url=\"https://api2.example.com\">\n <div style={{ width: '300px' }}>\n <Story />\n </div>\n </XAiProvider>\n </div>\n ),\n ],\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 展示新架构的示例组件\nconst ArchitectureDemoComponent: React.FC<{ title: string }> = ({ title }) => {\n const { mergedProps, isInProvider, getProviderValue } = useProviderContext({\n props: { title },\n mergeLogic: (props, context) => {\n if (!context?.isInProvider) {\n return props;\n }\n\n return {\n ...props,\n messages: context.messages,\n loading: context.loading,\n customData: context.messages?.length || 0,\n };\n },\n });\n\n const providerMethods = useProviderMethods();\n\n return (\n <div style={{\n padding: '15px',\n border: '1px solid #e7e7e7',\n borderRadius: '8px',\n marginBottom: '10px',\n backgroundColor: '#fafafa',\n }}\n >\n <h4 style={{ margin: '0 0 10px 0' }}>{mergedProps.title}</h4>\n <div style={{ fontSize: '12px', color: '#666' }}>\n <p>Provider 状态: {isInProvider ? '✅ 已连接' : '❌ 未连接'}</p>\n <p>消息数量: {getProviderValue('messages')?.length || 0}</p>\n <p>加载状态: {getProviderValue('loading') ? '🔄 加载中' : '✅ 就绪'}</p>\n <button\n onClick={() => providerMethods.sendMessage?.({ text: '来自架构演示组件的消息' })}\n disabled={!isInProvider}\n style={{\n fontSize: '12px',\n padding: '4px 8px',\n backgroundColor: isInProvider ? '#1890ff' : '#d9d9d9',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: isInProvider ? 'pointer' : 'not-allowed',\n }}\n >\n {isInProvider ? '发送消息' : '需要 Provider'}\n </button>\n </div>\n </div>\n );\n};\n\n// 展示新架构的示例\nexport const 新架构演示: Story = {\n render: (args) => (\n <div style={{ width: '500px', height: '700px' }}>\n <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"architecture-demo\">\n <div style={{ padding: '20px' }}>\n <h3 style={{ marginBottom: '20px' }}>新架构演示</h3>\n <p style={{ marginBottom: '20px', color: '#666' }}>\n 展示如何使用 useProviderContext 和 useProviderMethods Hook\n </p>\n\n {/* 演示组件 */}\n <div style={{ marginBottom: '20px' }}>\n <ArchitectureDemoComponent title=\"演示组件 A\" />\n <ArchitectureDemoComponent title=\"演示组件 B\" />\n <ArchitectureDemoComponent title=\"演示组件 C\" />\n </div>\n\n {/* 聊天机器人 */}\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: '架构演示聊天机器人',\n subtitle: '展示新 Hook 的使用',\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </XAiProvider>\n </div>\n ),\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 对比示例:独立使用 vs Provider 模式\nexport const 架构对比演示: Story = {\n render: (args) => (\n <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>\n {/* 独立使用 */}\n <div style={{ width: '300px' }}>\n <h4>独立使用模式</h4>\n <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n <ArchitectureDemoComponent title=\"独立组件\" />\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: '独立聊天机器人',\n subtitle: '不依赖 Provider',\n }}\n onSend={(content) => {\n console.log('独立模式发送:', content);\n }}\n onClear={() => {\n console.log('独立模式清空');\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </div>\n\n {/* Provider 模式 */}\n <div style={{ width: '300px' }}>\n <h4>Provider 模式</h4>\n <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"comparison-demo\">\n <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n <ArchitectureDemoComponent title=\"Provider 组件\" />\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: 'Provider 聊天机器人',\n subtitle: '由 Provider 管理',\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </XAiProvider>\n </div>\n </div>\n ),\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,kBAAwB;AACxB,wBAA2C;AAE3C,sBAAyB;AACzB,yBAAwB;AACxB,eAAuB;AACvB,gCAAuD;
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Divider } from 'antd';\nimport { MessageRole, MessageStatus } from '@/types/XAiMessage';\nimport type { Messages } from '@/types/XAiMessage';\nimport documentIcon from '@/assets/document.svg';\nimport XAiProvider from '../XAiProvider';\nimport XAiChatbot from '.';\nimport { useProviderContext, useProviderMethods } from '@/hooks/useProviderContext';\n\nconst meta: Meta<typeof XAiChatbot> = {\n title: 'AI组件/XAiChatbot 聊天框',\n component: XAiChatbot,\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n argTypes: {\n navbar: {\n description: '导航栏配置',\n },\n messages: {\n description: '消息列表',\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// mock 消息数据,严格符合 Messages 类型\nconst mockMessages: Messages[] = [\n {\n id: '1',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: '你好,有什么我能帮助你的吗?',\n },\n },\n {\n id: '2',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.user,\n content: {\n text: '检索从北京到上海的车票数据给我',\n files: [{\n \"fileName\": \"4250105220774925bfaeb3ca2a3350fe.jpg\",\n \"fileId\": 334,\n \"fileUrl\": \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2\",\n \"fileType\": \"image\",\n \"fileSize\": 28118,\n }, {\n \"fileName\": \"4250105220774925bfaeb3ca2a3350fe.pdf\",\n \"fileId\": 334,\n \"fileUrl\": \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2\",\n \"fileType\": \"pdf\",\n \"fileSize\": 28118,\n }]\n },\n parentMessageId: '1',\n },\n {\n id: '22',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: '',\n },\n thinks: '',\n // execute: [\n // // 工具库调用(MCP_TOOL)\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-1',\n // name: '已调用MCP智能工具',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'INVOKE_AGENT_TOOL_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 工具库调用(PLUGIN_TOOL)\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-2',\n // name: '已调用插件工具',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'INVOKE_AGENT_TOOL_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 工具库调用(SKILL)\n // // {\n // // action: 'INVOKE_AGENT_TOOL_START',\n // // id: 'tool-3',\n // // toolType: 'SKILL',\n // // agentToolName: '技能工具',\n // // args: { param3: 'baz' },\n\n // // },\n // // // 知识库调用(FAQ)\n // // {\n // // action: 'RECALL_KNOWLEDGE_START',\n // // uniqueId: 'kb-1',\n // // processStatus: 'START',\n // // args: { question: '什么是FAQ?' },\n // // knowledgeType: 'FAQ',\n // // },\n // {\n // type: 'ActionExecutionMessage',\n // createdAt: new Date(),\n // id: 'tool-3',\n // name: '已调用文档知识库',\n // arguments: { param1: 'foo' },\n // extra: {\n // action: 'RECALL_KNOWLEDGE_START',\n // icon: documentIcon,\n // type: 'MCP_TOOL',\n // cost: '3.9',\n // },\n // },\n // // // 知识库调用(DOCUMENT)\n // // {\n // // action: 'RECALL_KNOWLEDGE_START',\n // // uniqueId: 'kb-2',\n // // processStatus: 'START',\n // // args: { question: '文档库介绍' },\n // // knowledgeType: 'DOCUMENT',\n // // },\n // // 运行完毕\n // ],\n extra: {\n noFooter: true,\n },\n },\n {\n id: '4',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.user,\n content: {\n text: '能否生成一段明年的产品计划开发计划文档给我',\n },\n },\n {\n id: '0',\n type: 'TextMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.assistant,\n content: {\n text: `\n# 项目开发计划\n\n本文档概述了 2025 年第三季度的产品开发计划,包括目标、里程碑、团队分工和风险预案。\n\n---\n\n## 🎯 核心目标\n\n- 提升用户留存率至 **45%**\n- 完成 Web 端新版上线\n- 建立 AI 推荐模块 MVP\n- 优化数据库访问性能\n\n---\n\n## 📅 关键时间节点\n\n| 里程碑 | 截止日期 | 负责人 | 代理人 | 截止日期 | 负责人 |\n|------------------|--------------|----------|------------------|--------------|----------|\n| 产品需求冻结 | 2025-08-01 | Alice | 产品需求冻结 | 2025-08-01 | Alice |\n| UI 设计定稿 | 2025-08-10 | Bob | 产品需求冻结 | 2025-08-01 | Alice |\n| 开发完成(内测) | 2025-09-15 | Charlie | 产品需求冻结 | 2025-08-01 | Alice |\n| 正式上线 | 2025-09-30 | Diana | 产品需求冻结 | 2025-08-01 | Alice |\n\n---\n\n## 🛠️ 技术方案简述\n\n我们将使用以下技术栈:\n\n- 前端:React + Vite + Zustand\n- 后端:Node.js + PostgreSQL\n- 数据分析:Python + Pandas\n- 部署环境:Kubernetes on AWS\n\n---\n\n## 💡 示例代码片段\n\n以下是一个用于生成唯一 ID 的函数示例:\n\n~~~ts\nimport { nanoid } from 'nanoid'\n\nexport function generateSessionId() {\n return \\`sess-\\${nanoid()}\\`\n}\n~~~\n`,\n },\n extra: {\n noFooter: true,\n },\n },\n {\n id: '11',\n type: 'SuggestionMessage',\n createdAt: new Date(),\n status: MessageStatus.done,\n role: MessageRole.suggestion,\n content: [\n {\n key: '1',\n description: '我要查看 AI 文档',\n },\n {\n key: '2',\n description: '我如何看待 AI',\n },\n {\n key: '3',\n description: '你是谁?',\n },\n ],\n },\n];\n\n// 基础用法\nconst BasicUsageStory = (args: any) => {\n const [messages, setMessages] = useState<Messages[]>(mockMessages);\n const [loading, setLoading] = useState<boolean>(false);\n\n // 模拟随机字符串流式返回\n const handleSendMessage = () => {\n setLoading(true);\n\n // 模拟流式输出(向 mockMessages 第二条消息 content.text 追加)\n const stream = ['我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '……'];\n\n stream.forEach((chunk, idx) => {\n setTimeout(() => {\n setMessages((prev) => {\n const updated = [...prev];\n const targetIndex = 2; // mockMessages 的第二条(索引 1)\n const targetMsg = updated[targetIndex];\n\n // 确保该消息存在且是 TextMessage\n if (targetMsg && targetMsg.type === 'TextMessage') {\n // content 可能是多种类型,这里做类型守卫\n if ('text' in targetMsg.content) {\n updated[targetIndex] = {\n ...targetMsg,\n content: {\n ...targetMsg.content,\n // 模拟随机字符串流式拼接\n // text: targetMsg.content.text + chunk + Math.random().toString(36).slice(2, 5),\n },\n thinks: targetMsg.thinks + chunk + Math.random().toString(36).slice(2, 5),\n status: MessageStatus.pending,\n };\n }\n }\n\n // 最后一个流块时,标记完成\n if (idx === stream.length - 1) {\n updated[targetIndex].execute?.push(\n {\n id: '5',\n type: 'ActionExecutionMessage',\n extra: {\n icon: documentIcon,\n },\n name: '运行完毕',\n createdAt: new Date(),\n });\n setLoading(false);\n updated[targetIndex] = {\n ...updated[targetIndex],\n status: MessageStatus.done,\n };\n }\n\n return updated;\n });\n }, 200 * (idx + 1)); // 每个片段延迟 600ms 模拟流\n });\n };\n\n useEffect(() => {\n if (messages) {\n handleSendMessage();\n }\n }, []);\n\n // 清空消息\n const handleClear = () => {\n setMessages([]);\n };\n\n // 模拟按钮回调\n const handleActions = (index: number, data: any) => {\n console.log(index, data);\n };\n\n // 模拟快捷短语点击\n const handleSuggestMessageClick = (_item: any, id: string) => {\n setMessages((prev) => prev.filter((m) => m.id !== id));\n };\n\n // tooltip\n const ToolTip = (data: any) => {\n const { cost, token } = data?.extra || {};\n if (!cost && !token) return null;\n return (\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n fontSize: '12px',\n color: '#949494',\n flex: 1,\n paddingRight: '40px',\n }}\n >\n {cost && <div>{cost}s</div>}\n {token && <Divider type=\"vertical\" />}\n {token && <div>{token} tokens</div>}\n </div>\n );\n };\n\n return (\n <div\n style={{\n height: '600px',\n width: '400px',\n border: '1px solid #e7e7e7',\n borderRadius: '8px',\n }}\n >\n <XAiChatbot\n {...args}\n messages={messages}\n loading={loading}\n messageTooltip={ToolTip}\n onClear={handleClear}\n onSuggestMessageClick={handleSuggestMessageClick}\n onSend={handleSendMessage}\n onMessagesActionsCallback={handleActions}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({\n \"fileName\": \"4250105220774925bfaeb3ca2a3350fe.jpg\",\n \"fileId\": 334,\n \"fileUrl\": \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2\",\n \"fileType\": \"image\",\n \"fileSize\": 28118,\n \"mimeType\": \"image/jpeg\",\n \"tempUrl\": \"https://ai-platform-test.oss-cn-hangzhou.aliyuncs.com/ZABX/vbvljaaxlhlcy.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260112T132456Z&X-Amz-SignedHeaders=host&X-Amz-Credential=LTAI5tSfMvkvWhU43Ev1cFJo%2F20260112%2Foss-cn-hangzhou%2Fs3%2Faws4_request&X-Amz-Expires=518400&X-Amz-Signature=3a8546bfdf0332a5188e9e7c47c9b8d0bb46424177c5f9be703ade8482a6e4e2\",\n \"type\": \"image\"\n });\n }, 1000);\n }}\n />\n </div>\n );\n};\n\nexport const 基础用法: Story = {\n render: BasicUsageStory,\n args: {\n navbar: {\n title: '智能助手',\n },\n // messages: mockMessages,\n emptyStateText: '众安智能体',\n },\n};\n\n// 在 Provider 中使用\nexport const 在Provider中使用: Story = {\n decorators: [\n (Story) => (\n <XAiProvider token=\"test-token\" url=\"https://api.example.com\">\n <Story />\n </XAiProvider>\n ),\n ],\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 多个 Provider 实例\nexport const 多个Provider实例: Story = {\n decorators: [\n (Story) => (\n <div style={{ display: 'flex', gap: '50px', height: '600px' }}>\n <XAiProvider providerId=\"chat1\" token=\"token1\" url=\"https://api1.example.com\">\n <div style={{ width: '300px', marginRight: '40px' }}>\n <Story />\n </div>\n </XAiProvider>\n <XAiProvider providerId=\"chat2\" token=\"token2\" url=\"https://api2.example.com\">\n <div style={{ width: '300px' }}>\n <Story />\n </div>\n </XAiProvider>\n </div>\n ),\n ],\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 展示新架构的示例组件\nconst ArchitectureDemoComponent: React.FC<{ title: string }> = ({ title }) => {\n const { mergedProps, isInProvider, getProviderValue } = useProviderContext({\n props: { title },\n mergeLogic: (props, context) => {\n if (!context?.isInProvider) {\n return props;\n }\n\n return {\n ...props,\n messages: context.messages,\n loading: context.loading,\n customData: context.messages?.length || 0,\n };\n },\n });\n\n const providerMethods = useProviderMethods();\n\n return (\n <div style={{\n padding: '15px',\n border: '1px solid #e7e7e7',\n borderRadius: '8px',\n marginBottom: '10px',\n backgroundColor: '#fafafa',\n }}\n >\n <h4 style={{ margin: '0 0 10px 0' }}>{mergedProps.title}</h4>\n <div style={{ fontSize: '12px', color: '#666' }}>\n <p>Provider 状态: {isInProvider ? '✅ 已连接' : '❌ 未连接'}</p>\n <p>消息数量: {getProviderValue('messages')?.length || 0}</p>\n <p>加载状态: {getProviderValue('loading') ? '🔄 加载中' : '✅ 就绪'}</p>\n <button\n onClick={() => providerMethods.sendMessage?.({ text: '来自架构演示组件的消息' })}\n disabled={!isInProvider}\n style={{\n fontSize: '12px',\n padding: '4px 8px',\n backgroundColor: isInProvider ? '#1890ff' : '#d9d9d9',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: isInProvider ? 'pointer' : 'not-allowed',\n }}\n >\n {isInProvider ? '发送消息' : '需要 Provider'}\n </button>\n </div>\n </div>\n );\n};\n\n// 展示新架构的示例\nexport const 新架构演示: Story = {\n render: (args) => (\n <div style={{ width: '500px', height: '700px' }}>\n <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"architecture-demo\">\n <div style={{ padding: '20px' }}>\n <h3 style={{ marginBottom: '20px' }}>新架构演示</h3>\n <p style={{ marginBottom: '20px', color: '#666' }}>\n 展示如何使用 useProviderContext 和 useProviderMethods Hook\n </p>\n\n {/* 演示组件 */}\n <div style={{ marginBottom: '20px' }}>\n <ArchitectureDemoComponent title=\"演示组件 A\" />\n <ArchitectureDemoComponent title=\"演示组件 B\" />\n <ArchitectureDemoComponent title=\"演示组件 C\" />\n </div>\n\n {/* 聊天机器人 */}\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: '架构演示聊天机器人',\n subtitle: '展示新 Hook 的使用',\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </XAiProvider>\n </div>\n ),\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n\n// 对比示例:独立使用 vs Provider 模式\nexport const 架构对比演示: Story = {\n render: (args) => (\n <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>\n {/* 独立使用 */}\n <div style={{ width: '300px' }}>\n <h4>独立使用模式</h4>\n <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n <ArchitectureDemoComponent title=\"独立组件\" />\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: '独立聊天机器人',\n subtitle: '不依赖 Provider',\n }}\n onSend={(content) => {\n console.log('独立模式发送:', content);\n }}\n onClear={() => {\n console.log('独立模式清空');\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </div>\n\n {/* Provider 模式 */}\n <div style={{ width: '300px' }}>\n <h4>Provider 模式</h4>\n <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"comparison-demo\">\n <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n <ArchitectureDemoComponent title=\"Provider 组件\" />\n <XAiChatbot\n {...args}\n navbarShow\n navbar={{\n title: 'Provider 聊天机器人',\n subtitle: '由 Provider 管理',\n }}\n enableUpload\n uploadRequest={({ file, onProgress, onSuccess }) => {\n console.info(file);\n onProgress?.({\n percent: 50,\n });\n setTimeout(() => {\n onSuccess?.({});\n }, 1000);\n }}\n />\n </div>\n </XAiProvider>\n </div>\n </div>\n ),\n args: {\n navbar: {\n title: '智能助手',\n },\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["XAiChatbot", "documentIcon", "XAiProvider", "_a"]
|
|
7
7
|
}
|
|
@@ -375,11 +375,20 @@ var XAiChatbot = (props) => {
|
|
|
375
375
|
var _a;
|
|
376
376
|
const msgFiles = ((_a = msg.content) == null ? void 0 : _a.files) || [];
|
|
377
377
|
if (role === import_XAiMessage.MessageRole.user && msgFiles.length) {
|
|
378
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, { gap: 8, wrap: true, justify: "flex-end",
|
|
378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Flex, { gap: 8, wrap: true, justify: "flex-end", children: msgFiles.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
379
379
|
import_x.FileCard,
|
|
380
380
|
{
|
|
381
|
+
styles: {
|
|
382
|
+
file: (f == null ? void 0 : f.fileType) === "image" ? {
|
|
383
|
+
width: 100,
|
|
384
|
+
height: 100
|
|
385
|
+
} : {}
|
|
386
|
+
},
|
|
387
|
+
...f,
|
|
381
388
|
name: f.fileName,
|
|
382
|
-
size: f.fileSize
|
|
389
|
+
size: f.fileSize,
|
|
390
|
+
type: f.fileType,
|
|
391
|
+
src: f.fileUrl
|
|
383
392
|
},
|
|
384
393
|
f.fileId
|
|
385
394
|
)) });
|