@ai-group/chat-sdk 3.0.9 → 3.0.11
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/FileGallery/index.js +10 -9
- package/dist/cjs/components/FileGallery/index.js.map +2 -2
- package/dist/cjs/components/FileGallery/styles.js +1 -0
- package/dist/cjs/components/FileGallery/styles.js.map +2 -2
- package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.d.ts +3 -0
- package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js +74 -2
- package/dist/cjs/components/XAdkChatbot/components/MarkdownRender/index.js.map +3 -3
- package/dist/cjs/components/XAdkChatbot/index.js +10 -7
- package/dist/cjs/components/XAdkChatbot/index.js.map +2 -2
- package/dist/cjs/types/FileGallery.d.ts +2 -0
- package/dist/cjs/types/FileGallery.js.map +1 -1
- package/dist/cjs/types/XAdkChatbot.d.ts +3 -0
- package/dist/cjs/types/XAdkChatbot.js.map +1 -1
- package/dist/esm/components/FileGallery/index.js +19 -7
- package/dist/esm/components/FileGallery/index.js.map +1 -1
- package/dist/esm/components/FileGallery/styles.js +1 -1
- package/dist/esm/components/FileGallery/styles.js.map +1 -1
- package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.d.ts +3 -0
- package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js +81 -2
- package/dist/esm/components/XAdkChatbot/components/MarkdownRender/index.js.map +1 -1
- package/dist/esm/components/XAdkChatbot/index.js +14 -8
- package/dist/esm/components/XAdkChatbot/index.js.map +1 -1
- package/dist/esm/types/FileGallery.d.ts +2 -0
- package/dist/esm/types/FileGallery.js.map +1 -1
- package/dist/esm/types/XAdkChatbot.d.ts +3 -0
- package/dist/esm/types/XAdkChatbot.js.map +1 -1
- package/dist/umd/chat-sdk.min.js +1 -1
- package/package.json +2 -3
- package/dist/cjs/components/FileGallery/FileGallery.stories.d.ts +0 -6
- package/dist/cjs/components/FileGallery/FileGallery.stories.js +0 -143
- package/dist/cjs/components/FileGallery/FileGallery.stories.js.map +0 -7
- package/dist/cjs/components/XAdkChatbot/XAdkChatbot.stories.d.ts +0 -13
- package/dist/cjs/components/XAdkChatbot/XAdkChatbot.stories.js +0 -633
- package/dist/cjs/components/XAdkChatbot/XAdkChatbot.stories.js.map +0 -7
- package/dist/cjs/components/XAdkProvider/XAdkProvider.stories.d.ts +0 -10
- package/dist/cjs/components/XAdkProvider/XAdkProvider.stories.js +0 -394
- package/dist/cjs/components/XAdkProvider/XAdkProvider.stories.js.map +0 -7
- package/dist/cjs/components/XAdkSender/XAdkSender.stories.d.ts +0 -6
- package/dist/cjs/components/XAdkSender/XAdkSender.stories.js +0 -121
- package/dist/cjs/components/XAdkSender/XAdkSender.stories.js.map +0 -7
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.d.ts +0 -10
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js +0 -773
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js.map +0 -7
- package/dist/cjs/components/XAiConversations/XAiConversations.stories.d.ts +0 -6
- package/dist/cjs/components/XAiConversations/XAiConversations.stories.js +0 -83
- package/dist/cjs/components/XAiConversations/XAiConversations.stories.js.map +0 -7
- package/dist/cjs/components/XAiProvider/XAiProvider.stories.d.ts +0 -8
- package/dist/cjs/components/XAiProvider/XAiProvider.stories.js +0 -206
- package/dist/cjs/components/XAiProvider/XAiProvider.stories.js.map +0 -7
- package/dist/cjs/components/XAiSender/XAiSender.stories.d.ts +0 -6
- package/dist/cjs/components/XAiSender/XAiSender.stories.js +0 -102
- package/dist/cjs/components/XAiSender/XAiSender.stories.js.map +0 -7
- package/dist/cjs/components/XAiThoughtChain/XAiThoughtChain.stories.d.ts +0 -6
- package/dist/cjs/components/XAiThoughtChain/XAiThoughtChain.stories.js +0 -180
- package/dist/cjs/components/XAiThoughtChain/XAiThoughtChain.stories.js.map +0 -7
- package/dist/esm/components/FileGallery/FileGallery.stories.d.ts +0 -6
- package/dist/esm/components/FileGallery/FileGallery.stories.js +0 -48
- package/dist/esm/components/FileGallery/FileGallery.stories.js.map +0 -1
- package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.d.ts +0 -13
- package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js +0 -510
- package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js.map +0 -1
- package/dist/esm/components/XAdkProvider/XAdkProvider.stories.d.ts +0 -10
- package/dist/esm/components/XAdkProvider/XAdkProvider.stories.js +0 -338
- package/dist/esm/components/XAdkProvider/XAdkProvider.stories.js.map +0 -1
- package/dist/esm/components/XAdkSender/XAdkSender.stories.d.ts +0 -6
- package/dist/esm/components/XAdkSender/XAdkSender.stories.js +0 -128
- package/dist/esm/components/XAdkSender/XAdkSender.stories.js.map +0 -1
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.d.ts +0 -10
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js +0 -636
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js.map +0 -1
- package/dist/esm/components/XAiConversations/XAiConversations.stories.d.ts +0 -6
- package/dist/esm/components/XAiConversations/XAiConversations.stories.js +0 -42
- package/dist/esm/components/XAiConversations/XAiConversations.stories.js.map +0 -1
- package/dist/esm/components/XAiProvider/XAiProvider.stories.d.ts +0 -8
- package/dist/esm/components/XAiProvider/XAiProvider.stories.js +0 -208
- package/dist/esm/components/XAiProvider/XAiProvider.stories.js.map +0 -1
- package/dist/esm/components/XAiSender/XAiSender.stories.d.ts +0 -6
- package/dist/esm/components/XAiSender/XAiSender.stories.js +0 -87
- package/dist/esm/components/XAiSender/XAiSender.stories.js.map +0 -1
- package/dist/esm/components/XAiThoughtChain/XAiThoughtChain.stories.d.ts +0 -6
- package/dist/esm/components/XAiThoughtChain/XAiThoughtChain.stories.js +0 -159
- package/dist/esm/components/XAiThoughtChain/XAiThoughtChain.stories.js.map +0 -1
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import XAdkProvider from "./index";
|
|
3
|
-
declare const meta: Meta<typeof XAdkProvider>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const 默认布局: Story;
|
|
7
|
-
export declare const 带会话列表: Story;
|
|
8
|
-
export declare const 自定义布局: Story;
|
|
9
|
-
export declare const 使用Hooks: Story;
|
|
10
|
-
export declare const 简化界面: Story;
|
|
@@ -1,394 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
-
|
|
29
|
-
// src/components/XAdkProvider/XAdkProvider.stories.tsx
|
|
30
|
-
var XAdkProvider_stories_exports = {};
|
|
31
|
-
__export(XAdkProvider_stories_exports, {
|
|
32
|
-
default: () => XAdkProvider_stories_default,
|
|
33
|
-
使用Hooks: () => 使用Hooks,
|
|
34
|
-
带会话列表: () => 带会话列表,
|
|
35
|
-
简化界面: () => 简化界面,
|
|
36
|
-
自定义布局: () => 自定义布局,
|
|
37
|
-
默认布局: () => 默认布局
|
|
38
|
-
});
|
|
39
|
-
module.exports = __toCommonJS(XAdkProvider_stories_exports);
|
|
40
|
-
var import_antd = require("antd");
|
|
41
|
-
var import_index = __toESM(require("./index"));
|
|
42
|
-
var import_context = require("./context");
|
|
43
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
-
var meta = {
|
|
45
|
-
title: "AI组件/XAdkProvider 对话容器",
|
|
46
|
-
component: import_index.default,
|
|
47
|
-
parameters: {
|
|
48
|
-
layout: "fullscreen",
|
|
49
|
-
docs: {
|
|
50
|
-
description: {
|
|
51
|
-
component: `
|
|
52
|
-
# XAdkProvider - 新一代 Compound Components 架构
|
|
53
|
-
|
|
54
|
-
基于 Compound Components 模式的 AI 聊天 SDK,提供完全可组合的聊天界面。
|
|
55
|
-
|
|
56
|
-
## 核心特性
|
|
57
|
-
|
|
58
|
-
- 🧩 **完全可组合**: 自由组合子组件,构建任意布局
|
|
59
|
-
- 🪝 **Hooks 访问**: 通过 Hooks 轻松访问状态和方法
|
|
60
|
-
- ⚡ **性能优化**: Context 三层分离,避免不必要的 rerender
|
|
61
|
-
- 🔙 **向后兼容**: 旧 API 完全保留,平滑升级
|
|
62
|
-
- 📘 **TypeScript**: 完整的类型支持
|
|
63
|
-
|
|
64
|
-
## 可用组件
|
|
65
|
-
|
|
66
|
-
- \`XAdkProvider.DefaultLayout\` - 默认布局 (类似 ChatGPT/DeepSeek)
|
|
67
|
-
- \`XAdkProvider.Chatbot\` - 完整的聊天界面 (Messages + Sender)
|
|
68
|
-
- \`XAdkProvider.Messages\` - 消息列表
|
|
69
|
-
- \`XAdkProvider.Sender\` - 输入框
|
|
70
|
-
- \`XAdkProvider.Sidebar\` - 会话列表
|
|
71
|
-
- \`XAdkProvider.Header\` - 可选头部
|
|
72
|
-
|
|
73
|
-
## 可用 Hooks
|
|
74
|
-
|
|
75
|
-
- \`useChatState()\` - 访问聊天状态
|
|
76
|
-
- \`useChatActions()\` - 访问聊天方法
|
|
77
|
-
- \`useSession()\` - 访问会话管理
|
|
78
|
-
|
|
79
|
-
## 配置说明
|
|
80
|
-
|
|
81
|
-
请在使用前配置:
|
|
82
|
-
- \`url\`: AI 服务地址 (默认: window.location.origin)
|
|
83
|
-
- \`token\`: 认证令牌 (必填)
|
|
84
|
-
- \`config.appNo\`: 应用编号 (必填)
|
|
85
|
-
`
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
tags: ["autodocs"],
|
|
90
|
-
argTypes: {
|
|
91
|
-
url: {
|
|
92
|
-
description: "AI 服务地址",
|
|
93
|
-
control: "text"
|
|
94
|
-
},
|
|
95
|
-
token: {
|
|
96
|
-
description: "认证令牌",
|
|
97
|
-
control: "text"
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
var XAdkProvider_stories_default = meta;
|
|
102
|
-
var 默认布局 = {
|
|
103
|
-
render: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { url: args.url, token: args.token, config: args.config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
104
|
-
import_index.default.DefaultLayout,
|
|
105
|
-
{
|
|
106
|
-
showSessionList: false,
|
|
107
|
-
allowUpload: true,
|
|
108
|
-
clearBtnShow: true
|
|
109
|
-
}
|
|
110
|
-
) }) }),
|
|
111
|
-
parameters: {
|
|
112
|
-
docs: {
|
|
113
|
-
description: {
|
|
114
|
-
story: `
|
|
115
|
-
默认布局,类似 ChatGPT 的界面风格。
|
|
116
|
-
|
|
117
|
-
\`\`\`tsx
|
|
118
|
-
<XAdkProvider url="..." token="..." config={{ appNo: 'xxx' }}>
|
|
119
|
-
<XAdkProvider.DefaultLayout
|
|
120
|
-
showSessionList={false}
|
|
121
|
-
allowUpload={true}
|
|
122
|
-
clearBtnShow={true}
|
|
123
|
-
/>
|
|
124
|
-
</XAdkProvider>
|
|
125
|
-
\`\`\`
|
|
126
|
-
`
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
args: {
|
|
131
|
-
url: "https://m-poc-dev.zaxline.com",
|
|
132
|
-
token: "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiLCJhdWQiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiLCJuYmYiOjE3NzI3ODU3OTMsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc5Mjk5MywiaWF0IjoxNzcyNzg1NzkzLCJqdGkiOiI4MmFjMGZmZS1lZDBlLTRiMjMtYWE3NS04NmUzZjA1OTQ2NmEiLCJjbGllbnRfaWQiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMifQ.bBipIkOwu4BQqtH_ijT1V12yw5SnDpu7HAZhWrzjRSF7NUlqXr3m25f1VU_jiE9wyHO0Pj0VMMox1xVrE90JT9zgFL2sa4IDLpoHl6B2sr-3pY8WsvTLnk9PBSyTfOjmuSRwNDZyQYx0p4xJKd0yhf5Acfh5vuvH8pW7ksGpEXKvCLqc9tpeLytE1qZm_eSWt_rjTxDzvwMv33RAWO_fEigezoXfOe8ALtWpIDXEoza6cI--2buVM6-ZAFJHwe0CA_rx5E5H7QpmonUlZZhu9JVEL7HCc76MWLnuRP9TlNuicsR3JrYvkZ8nkG4oiBSWaHAgOVizGXaf2Elr7edTNA",
|
|
133
|
-
config: {
|
|
134
|
-
appNo: "wTXH8NReD6NIhWKVfBQCxWvS"
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
var 带会话列表 = {
|
|
139
|
-
render: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { url: args.url, token: args.token, config: args.config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
140
|
-
import_index.default.DefaultLayout,
|
|
141
|
-
{
|
|
142
|
-
header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
|
|
143
|
-
showSessionList: true,
|
|
144
|
-
allowUpload: true,
|
|
145
|
-
clearBtnShow: false,
|
|
146
|
-
showFnCallDetail: true
|
|
147
|
-
}
|
|
148
|
-
) }) }),
|
|
149
|
-
parameters: {
|
|
150
|
-
docs: {
|
|
151
|
-
description: {
|
|
152
|
-
story: `
|
|
153
|
-
带会话列表的布局,类似 DeepSeek/元宝 的界面风格。
|
|
154
|
-
|
|
155
|
-
左侧显示历史会话列表,右侧显示聊天区域。
|
|
156
|
-
|
|
157
|
-
特点:
|
|
158
|
-
- ✅ 左右布局: 左侧 280px 宽的会话列表,右侧聊天区域
|
|
159
|
-
- ✅ 会话管理: 支持新建、切换、重命名、删除会话
|
|
160
|
-
- ✅ 自动加载: 会话列表自动加载历史记录
|
|
161
|
-
- ✅ 响应式: 窄屏自动切换到侧边栏模式
|
|
162
|
-
|
|
163
|
-
\`\`\`tsx
|
|
164
|
-
<XAdkProvider
|
|
165
|
-
url="..."
|
|
166
|
-
token="..."
|
|
167
|
-
config={{
|
|
168
|
-
appNo: 'xxx',
|
|
169
|
-
session: {
|
|
170
|
-
showSessionList: true,
|
|
171
|
-
}
|
|
172
|
-
}}
|
|
173
|
-
>
|
|
174
|
-
<XAdkProvider.DefaultLayout
|
|
175
|
-
showSessionList={true}
|
|
176
|
-
allowUpload={true}
|
|
177
|
-
/>
|
|
178
|
-
</XAdkProvider>
|
|
179
|
-
\`\`\`
|
|
180
|
-
`
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
args: {
|
|
185
|
-
url: "https://m-poc-dev.zaxline.com",
|
|
186
|
-
token: "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiLCJhdWQiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiLCJuYmYiOjE3NzQyNDg2OTIsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3NDI1NTg5MiwiaWF0IjoxNzc0MjQ4NjkyLCJqdGkiOiJmNGJiZGQxOS03OWRjLTRjZGEtOGMwYy1jZTllNWVhOTJmYzMiLCJjbGllbnRfaWQiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkifQ.AqjF0Q5Gsu25xArL9L5YDwWbHO1ZHxmr86eZSTyM-jumtzc6oLWYBIYNkRX9iXkmRryM09a5Xyn2ZjYSSomu0mudHxAK6qNHCtsIsJctxUvWL5nb-9r2DdH1lsjaD6jLOlv4DePO-ww_QOlhElSPkTO4858VWXSQNqQgD2tFOw1bFlFZvqTWUZkdS-l17tHceupBlX_VR8qn5otJaZAYaQS58uUQ3ry5AGufIYqrKeAWctmwhIX5P1D0TbIjGw91SlYds7VZrkMgMOe4DJQVjwcVfg4OnFxDwXXYjIE8ikHczwt4xFRPnRIM4W3huGdejFS04QOn95a7vdwy_Dwqbw",
|
|
187
|
-
config: {
|
|
188
|
-
appNo: "D61c91a3XJdS8r7Dy4uqXnZi"
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
var 自定义布局 = {
|
|
193
|
-
render: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { url: args.url, token: args.token, config: args.config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
|
|
194
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
|
-
"div",
|
|
196
|
-
{
|
|
197
|
-
style: {
|
|
198
|
-
padding: "16px 24px",
|
|
199
|
-
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
|
|
200
|
-
color: "white",
|
|
201
|
-
borderBottom: "1px solid rgba(255,255,255,0.1)"
|
|
202
|
-
},
|
|
203
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { margin: 0, fontSize: "18px" }, children: "🤖 AI 智能助手" })
|
|
204
|
-
}
|
|
205
|
-
),
|
|
206
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, overflow: "hidden", background: "#f9fafb" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default.Messages, {}) }),
|
|
207
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default.Sender, { allowUpload: true, clearBtnShow: true })
|
|
208
|
-
] }) }) }) }),
|
|
209
|
-
parameters: {
|
|
210
|
-
docs: {
|
|
211
|
-
description: {
|
|
212
|
-
story: `
|
|
213
|
-
完全自定义的布局,展示 Compound Components 的灵活性。
|
|
214
|
-
|
|
215
|
-
可以任意组合 Sidebar、Messages、Sender 等组件。
|
|
216
|
-
`
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
},
|
|
220
|
-
args: {
|
|
221
|
-
url: "https://m-poc-dev.zaxline.com",
|
|
222
|
-
token: "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzMwNjI5MjUsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3MzA3MDEyNSwiaWF0IjoxNzczMDYyOTI1LCJqdGkiOiI0YmY3MjcxOS03NzNkLTRkZGYtOGYzNC01YjAwNjA5MWE3Y2IiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.AcWWnsWZVHvvpbT9IG64oo6mNNUFDKuaTMSCRMUvgiRyfn8f4Y64GBF_VR_XhgvNgNczXx5pXlU5AEXlvwA3RXv5Voy5Vl1dvyrLOtjZivnRJVeDVzn8Af57cXKE9QBZAS94bUMAtfmZmvqer4Lw6wuFNSg6G32BCpQH6ifR8zei3scf1Gcs0QXr00KcT3dFROmAzJscJC_KnXxGx_729BlQqupdJ05KEGHDIokqJNy5Ev_40IPmW-ZDJprXpEdReHfHnPuaUgGQRAJEW2yTf2OsyNenOwA9l0iKYK1ENDnBpsr08VUgMhJBKq-quzP5AE3eLIn-3KR0O-yT4lyBiQ",
|
|
223
|
-
config: {
|
|
224
|
-
appNo: "3jt2YbDjewVn2PHRKaDfJEgO"
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
};
|
|
228
|
-
var CustomStatsBar = () => {
|
|
229
|
-
const { messages, loading, appInfo } = (0, import_context.useChatState)();
|
|
230
|
-
const { chat } = (0, import_context.useChatActions)();
|
|
231
|
-
const quickQuestions = ["介绍一下你自己", "你能帮我做什么?", "如何开始使用?"];
|
|
232
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
233
|
-
"div",
|
|
234
|
-
{
|
|
235
|
-
style: {
|
|
236
|
-
padding: "16px 20px",
|
|
237
|
-
background: "white",
|
|
238
|
-
borderBottom: "1px solid #f0f0f0"
|
|
239
|
-
},
|
|
240
|
-
children: [
|
|
241
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
242
|
-
"div",
|
|
243
|
-
{
|
|
244
|
-
style: {
|
|
245
|
-
display: "flex",
|
|
246
|
-
justifyContent: "space-between",
|
|
247
|
-
alignItems: "center",
|
|
248
|
-
marginBottom: "12px"
|
|
249
|
-
},
|
|
250
|
-
children: [
|
|
251
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { children: [
|
|
252
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: "12px", color: "#999" }, children: [
|
|
253
|
-
"💬 消息数: ",
|
|
254
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: messages.length })
|
|
255
|
-
] }),
|
|
256
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontSize: "12px", color: "#999" }, children: [
|
|
257
|
-
"🤖 ",
|
|
258
|
-
(appInfo == null ? void 0 : appInfo.appName) || "加载中..."
|
|
259
|
-
] })
|
|
260
|
-
] }),
|
|
261
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
262
|
-
"span",
|
|
263
|
-
{
|
|
264
|
-
style: { fontSize: "12px", color: loading ? "#1890ff" : "#52c41a" },
|
|
265
|
-
children: loading ? "● 生成中..." : "● 就绪"
|
|
266
|
-
}
|
|
267
|
-
)
|
|
268
|
-
]
|
|
269
|
-
}
|
|
270
|
-
),
|
|
271
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "12px", color: "#666", marginBottom: "8px" }, children: "💡 快捷问题:" }),
|
|
272
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Space, { wrap: true, children: quickQuestions.map((q, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
273
|
-
import_antd.Button,
|
|
274
|
-
{
|
|
275
|
-
size: "small",
|
|
276
|
-
onClick: () => chat({ text: q }),
|
|
277
|
-
disabled: loading,
|
|
278
|
-
children: q
|
|
279
|
-
},
|
|
280
|
-
i
|
|
281
|
-
)) })
|
|
282
|
-
]
|
|
283
|
-
}
|
|
284
|
-
);
|
|
285
|
-
};
|
|
286
|
-
var 使用Hooks = {
|
|
287
|
-
render: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "100vh" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { url: args.url, token: args.token, config: args.config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
288
|
-
"div",
|
|
289
|
-
{
|
|
290
|
-
style: { display: "flex", flexDirection: "column", height: "100%" },
|
|
291
|
-
children: [
|
|
292
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomStatsBar, {}),
|
|
293
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default.Chatbot, {}) })
|
|
294
|
-
]
|
|
295
|
-
}
|
|
296
|
-
) }) }),
|
|
297
|
-
parameters: {
|
|
298
|
-
docs: {
|
|
299
|
-
description: {
|
|
300
|
-
story: `
|
|
301
|
-
使用 \`useChatState\` 和 \`useChatActions\` Hooks 访问状态和方法。
|
|
302
|
-
|
|
303
|
-
可以在任意子组件中使用这些 Hooks 来访问聊天数据和操作。
|
|
304
|
-
|
|
305
|
-
\`\`\`tsx
|
|
306
|
-
function CustomStatsBar() {
|
|
307
|
-
const { messages, loading } = useChatState();
|
|
308
|
-
const { chat } = useChatActions();
|
|
309
|
-
|
|
310
|
-
return (
|
|
311
|
-
<div>
|
|
312
|
-
<p>消息数: {messages.length}</p>
|
|
313
|
-
<button onClick={() => chat({ text: 'Hello' })}>
|
|
314
|
-
发送
|
|
315
|
-
</button>
|
|
316
|
-
</div>
|
|
317
|
-
);
|
|
318
|
-
}
|
|
319
|
-
\`\`\`
|
|
320
|
-
`
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
},
|
|
324
|
-
args: {
|
|
325
|
-
url: "https://m-poc-dev.zaxline.com",
|
|
326
|
-
token: "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzI3NjE1OTQsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc2ODc5NCwiaWF0IjoxNzcyNzYxNTk0LCJqdGkiOiI2M2IyMjRkNC1iODY3LTQzNjYtYTM5ZC1hZjNmOWQ0M2YyZmMiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.QNI4bD6MjIIvv-_SFxYEOiNv9304Ps5WF3b8_qmi3YIrqJQiaJ-iT1_fENpe9dD25RXcpgIv2Xnz9cI3Lz3gHfPKwoefijhrD7_Ye-9C5ztM2OI5pfoUurc1xPvjS7FGrTMZHNbpIFXyPoDAxtzGt-hLoQAEhBhLib8lLAbAQACmBOYy3KGwJg4sSFvbLkGWgqkH2aqC8MdH50ce35leybbEJu7ImithH3rj4E2oF6EqTb3vK181DFooEJ9E_LaC_hrw8zqGh9PSJah1rO3nxUDOPnz946RLKUi0xLOtz42l6qY2nUFsd9axYunGnk2ds5gg-PcBZN_X_aa-w7SLnw",
|
|
327
|
-
config: {
|
|
328
|
-
appNo: "3jt2YbDjewVn2PHRKaDfJEgO"
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
};
|
|
332
|
-
var 简化界面 = {
|
|
333
|
-
render: (args) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
334
|
-
"div",
|
|
335
|
-
{
|
|
336
|
-
style: {
|
|
337
|
-
height: "100vh",
|
|
338
|
-
display: "flex",
|
|
339
|
-
alignItems: "center",
|
|
340
|
-
justifyContent: "center",
|
|
341
|
-
background: "#f5f5f5",
|
|
342
|
-
padding: "40px"
|
|
343
|
-
},
|
|
344
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
345
|
-
"div",
|
|
346
|
-
{
|
|
347
|
-
style: {
|
|
348
|
-
width: "100%",
|
|
349
|
-
maxWidth: "900px",
|
|
350
|
-
height: "700px",
|
|
351
|
-
background: "white",
|
|
352
|
-
borderRadius: "12px",
|
|
353
|
-
overflow: "hidden",
|
|
354
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
|
|
355
|
-
},
|
|
356
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { url: args.url, token: args.token, config: args.config, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default.Chatbot, {}) })
|
|
357
|
-
}
|
|
358
|
-
)
|
|
359
|
-
}
|
|
360
|
-
),
|
|
361
|
-
parameters: {
|
|
362
|
-
docs: {
|
|
363
|
-
description: {
|
|
364
|
-
story: `
|
|
365
|
-
最简化的聊天界面,只包含消息列表和输入框。
|
|
366
|
-
|
|
367
|
-
适合嵌入到其他页面或作为对话窗口使用。
|
|
368
|
-
|
|
369
|
-
\`\`\`tsx
|
|
370
|
-
<XAdkProvider url="..." token="..." config={{ appNo: 'xxx' }}>
|
|
371
|
-
<XAdkProvider.Chatbot />
|
|
372
|
-
</XAdkProvider>
|
|
373
|
-
\`\`\`
|
|
374
|
-
`
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
},
|
|
378
|
-
args: {
|
|
379
|
-
url: "https://m-poc-dev.zaxline.com",
|
|
380
|
-
token: "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzI3NjE1OTQsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc2ODc5NCwiaWF0IjoxNzcyNzYxNTk0LCJqdGkiOiI2M2IyMjRkNC1iODY3LTQzNjYtYTM5ZC1hZjNmOWQ0M2YyZmMiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.QNI4bD6MjIIvv-_SFxYEOiNv9304Ps5WF3b8_qmi3YIrqJQiaJ-iT1_fENpe9dD25RXcpgIv2Xnz9cI3Lz3gHfPKwoefijhrD7_Ye-9C5ztM2OI5pfoUurc1xPvjS7FGrTMZHNbpIFXyPoDAxtzGt-hLoQAEhBhLib8lLAbAQACmBOYy3KGwJg4sSFvbLkGWgqkH2aqC8MdH50ce35leybbEJu7ImithH3rj4E2oF6EqTb3vK181DFooEJ9E_LaC_hrw8zqGh9PSJah1rO3nxUDOPnz946RLKUi0xLOtz42l6qY2nUFsd9axYunGnk2ds5gg-PcBZN_X_aa-w7SLnw",
|
|
381
|
-
config: {
|
|
382
|
-
appNo: "3jt2YbDjewVn2PHRKaDfJEgO"
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
};
|
|
386
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
387
|
-
0 && (module.exports = {
|
|
388
|
-
使用Hooks,
|
|
389
|
-
带会话列表,
|
|
390
|
-
简化界面,
|
|
391
|
-
自定义布局,
|
|
392
|
-
默认布局
|
|
393
|
-
});
|
|
394
|
-
//# sourceMappingURL=XAdkProvider.stories.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/XAdkProvider/XAdkProvider.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Button, Space } from \"antd\";\nimport XAdkProvider from \"./index\";\nimport { useChatState, useChatActions } from \"./context\";\n\nconst meta: Meta<typeof XAdkProvider> = {\n title: \"AI组件/XAdkProvider 对话容器\",\n component: XAdkProvider,\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component: `\n# XAdkProvider - 新一代 Compound Components 架构\n\n基于 Compound Components 模式的 AI 聊天 SDK,提供完全可组合的聊天界面。\n\n## 核心特性\n\n- 🧩 **完全可组合**: 自由组合子组件,构建任意布局\n- 🪝 **Hooks 访问**: 通过 Hooks 轻松访问状态和方法\n- ⚡ **性能优化**: Context 三层分离,避免不必要的 rerender\n- 🔙 **向后兼容**: 旧 API 完全保留,平滑升级\n- 📘 **TypeScript**: 完整的类型支持\n\n## 可用组件\n\n- \\`XAdkProvider.DefaultLayout\\` - 默认布局 (类似 ChatGPT/DeepSeek)\n- \\`XAdkProvider.Chatbot\\` - 完整的聊天界面 (Messages + Sender)\n- \\`XAdkProvider.Messages\\` - 消息列表\n- \\`XAdkProvider.Sender\\` - 输入框\n- \\`XAdkProvider.Sidebar\\` - 会话列表\n- \\`XAdkProvider.Header\\` - 可选头部\n\n## 可用 Hooks\n\n- \\`useChatState()\\` - 访问聊天状态\n- \\`useChatActions()\\` - 访问聊天方法\n- \\`useSession()\\` - 访问会话管理\n\n## 配置说明\n\n请在使用前配置:\n- \\`url\\`: AI 服务地址 (默认: window.location.origin)\n- \\`token\\`: 认证令牌 (必填)\n- \\`config.appNo\\`: 应用编号 (必填)\n `,\n },\n },\n },\n tags: [\"autodocs\"],\n argTypes: {\n url: {\n description: \"AI 服务地址\",\n control: \"text\",\n },\n token: {\n description: \"认证令牌\",\n control: \"text\",\n },\n },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// ============================================\n// 示例 1: 默认布局 (类似 ChatGPT)\n// ============================================\nexport const 默认布局: Story = {\n render: (args) => (\n <div style={{ height: \"100vh\" }}>\n <XAdkProvider url={args.url} token={args.token} config={args.config}>\n <XAdkProvider.DefaultLayout\n showSessionList={false}\n allowUpload={true}\n clearBtnShow={true}\n />\n </XAdkProvider>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: `\n默认布局,类似 ChatGPT 的界面风格。\n\n\\`\\`\\`tsx\n<XAdkProvider url=\"...\" token=\"...\" config={{ appNo: 'xxx' }}>\n <XAdkProvider.DefaultLayout\n showSessionList={false}\n allowUpload={true}\n clearBtnShow={true}\n />\n</XAdkProvider>\n\\`\\`\\`\n `,\n },\n },\n },\n args: {\n url: \"https://m-poc-dev.zaxline.com\",\n token:\n \"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiLCJhdWQiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiLCJuYmYiOjE3NzI3ODU3OTMsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMiXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc5Mjk5MywiaWF0IjoxNzcyNzg1NzkzLCJqdGkiOiI4MmFjMGZmZS1lZDBlLTRiMjMtYWE3NS04NmUzZjA1OTQ2NmEiLCJjbGllbnRfaWQiOiJ3VFhIOE5SZUQ2TkloV0tWZkJRQ3hXdlMifQ.bBipIkOwu4BQqtH_ijT1V12yw5SnDpu7HAZhWrzjRSF7NUlqXr3m25f1VU_jiE9wyHO0Pj0VMMox1xVrE90JT9zgFL2sa4IDLpoHl6B2sr-3pY8WsvTLnk9PBSyTfOjmuSRwNDZyQYx0p4xJKd0yhf5Acfh5vuvH8pW7ksGpEXKvCLqc9tpeLytE1qZm_eSWt_rjTxDzvwMv33RAWO_fEigezoXfOe8ALtWpIDXEoza6cI--2buVM6-ZAFJHwe0CA_rx5E5H7QpmonUlZZhu9JVEL7HCc76MWLnuRP9TlNuicsR3JrYvkZ8nkG4oiBSWaHAgOVizGXaf2Elr7edTNA\",\n config: {\n appNo: \"wTXH8NReD6NIhWKVfBQCxWvS\",\n },\n },\n};\n\n// ============================================\n// 示例 2: 带会话列表 (类似 DeepSeek)\n// ============================================\nexport const 带会话列表: Story = {\n render: (args) => (\n <div style={{ height: \"100vh\" }}>\n <XAdkProvider url={args.url} token={args.token} config={args.config}>\n <XAdkProvider.DefaultLayout\n header={<></>}\n showSessionList={true}\n allowUpload={true}\n clearBtnShow={false}\n showFnCallDetail={true}\n />\n </XAdkProvider>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: `\n带会话列表的布局,类似 DeepSeek/元宝 的界面风格。\n\n左侧显示历史会话列表,右侧显示聊天区域。\n\n特点:\n- ✅ 左右布局: 左侧 280px 宽的会话列表,右侧聊天区域\n- ✅ 会话管理: 支持新建、切换、重命名、删除会话\n- ✅ 自动加载: 会话列表自动加载历史记录\n- ✅ 响应式: 窄屏自动切换到侧边栏模式\n\n\\`\\`\\`tsx\n<XAdkProvider\n url=\"...\"\n token=\"...\"\n config={{\n appNo: 'xxx',\n session: {\n showSessionList: true,\n }\n }}\n>\n <XAdkProvider.DefaultLayout\n showSessionList={true}\n allowUpload={true}\n />\n</XAdkProvider>\n\\`\\`\\`\n `,\n },\n },\n },\n args: {\n url: \"https://m-poc-dev.zaxline.com\",\n token:\n \"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiLCJhdWQiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiLCJuYmYiOjE3NzQyNDg2OTIsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkiXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3NDI1NTg5MiwiaWF0IjoxNzc0MjQ4NjkyLCJqdGkiOiJmNGJiZGQxOS03OWRjLTRjZGEtOGMwYy1jZTllNWVhOTJmYzMiLCJjbGllbnRfaWQiOiJENjFjOTFhM1hKZFM4cjdEeTR1cVhuWmkifQ.AqjF0Q5Gsu25xArL9L5YDwWbHO1ZHxmr86eZSTyM-jumtzc6oLWYBIYNkRX9iXkmRryM09a5Xyn2ZjYSSomu0mudHxAK6qNHCtsIsJctxUvWL5nb-9r2DdH1lsjaD6jLOlv4DePO-ww_QOlhElSPkTO4858VWXSQNqQgD2tFOw1bFlFZvqTWUZkdS-l17tHceupBlX_VR8qn5otJaZAYaQS58uUQ3ry5AGufIYqrKeAWctmwhIX5P1D0TbIjGw91SlYds7VZrkMgMOe4DJQVjwcVfg4OnFxDwXXYjIE8ikHczwt4xFRPnRIM4W3huGdejFS04QOn95a7vdwy_Dwqbw\",\n config: {\n appNo: \"D61c91a3XJdS8r7Dy4uqXnZi\",\n },\n },\n};\n\n// ============================================\n// 示例 3: 自定义布局\n// ============================================\nexport const 自定义布局: Story = {\n render: (args) => (\n <div style={{ height: \"100vh\" }}>\n <XAdkProvider url={args.url} token={args.token} config={args.config}>\n <div style={{ display: \"flex\", height: \"100%\" }}>\n {/* 左侧会话列表 */}\n {/* <div\n style={{\n width: 300,\n borderRight: \"1px solid #f0f0f0\",\n background: \"#fafafa\",\n }}\n >\n <XAdkProvider.Sidebar />\n </div> */}\n\n {/* 右侧聊天区 */}\n <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\" }}>\n {/* 自定义头部 */}\n <div\n style={{\n padding: \"16px 24px\",\n background: \"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\",\n color: \"white\",\n borderBottom: \"1px solid rgba(255,255,255,0.1)\",\n }}\n >\n <h2 style={{ margin: 0, fontSize: \"18px\" }}>🤖 AI 智能助手</h2>\n </div>\n\n {/* 消息区 */}\n <div style={{ flex: 1, overflow: \"hidden\", background: \"#f9fafb\" }}>\n <XAdkProvider.Messages />\n </div>\n\n {/* 输入区 */}\n <XAdkProvider.Sender allowUpload={true} clearBtnShow={true} />\n </div>\n </div>\n </XAdkProvider>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: `\n完全自定义的布局,展示 Compound Components 的灵活性。\n\n可以任意组合 Sidebar、Messages、Sender 等组件。\n `,\n },\n },\n },\n args: {\n url: \"https://m-poc-dev.zaxline.com\",\n token:\n \"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzMwNjI5MjUsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3MzA3MDEyNSwiaWF0IjoxNzczMDYyOTI1LCJqdGkiOiI0YmY3MjcxOS03NzNkLTRkZGYtOGYzNC01YjAwNjA5MWE3Y2IiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.AcWWnsWZVHvvpbT9IG64oo6mNNUFDKuaTMSCRMUvgiRyfn8f4Y64GBF_VR_XhgvNgNczXx5pXlU5AEXlvwA3RXv5Voy5Vl1dvyrLOtjZivnRJVeDVzn8Af57cXKE9QBZAS94bUMAtfmZmvqer4Lw6wuFNSg6G32BCpQH6ifR8zei3scf1Gcs0QXr00KcT3dFROmAzJscJC_KnXxGx_729BlQqupdJ05KEGHDIokqJNy5Ev_40IPmW-ZDJprXpEdReHfHnPuaUgGQRAJEW2yTf2OsyNenOwA9l0iKYK1ENDnBpsr08VUgMhJBKq-quzP5AE3eLIn-3KR0O-yT4lyBiQ\",\n config: {\n appNo: \"3jt2YbDjewVn2PHRKaDfJEgO\",\n },\n },\n};\n\n// ============================================\n// 示例 4: 使用 Hooks\n// ============================================\nconst CustomStatsBar = () => {\n const { messages, loading, appInfo } = useChatState();\n const { chat } = useChatActions();\n\n const quickQuestions = [\"介绍一下你自己\", \"你能帮我做什么?\", \"如何开始使用?\"];\n\n return (\n <div\n style={{\n padding: \"16px 20px\",\n background: \"white\",\n borderBottom: \"1px solid #f0f0f0\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n marginBottom: \"12px\",\n }}\n >\n <Space>\n <span style={{ fontSize: \"12px\", color: \"#999\" }}>\n 💬 消息数: <strong>{messages.length}</strong>\n </span>\n <span style={{ fontSize: \"12px\", color: \"#999\" }}>\n 🤖 {appInfo?.appName || \"加载中...\"}\n </span>\n </Space>\n <span\n style={{ fontSize: \"12px\", color: loading ? \"#1890ff\" : \"#52c41a\" }}\n >\n {loading ? \"● 生成中...\" : \"● 就绪\"}\n </span>\n </div>\n <div style={{ fontSize: \"12px\", color: \"#666\", marginBottom: \"8px\" }}>\n 💡 快捷问题:\n </div>\n <Space wrap>\n {quickQuestions.map((q, i) => (\n <Button\n key={i}\n size=\"small\"\n onClick={() => chat({ text: q })}\n disabled={loading}\n >\n {q}\n </Button>\n ))}\n </Space>\n </div>\n );\n};\n\nexport const 使用Hooks: Story = {\n render: (args) => (\n <div style={{ height: \"100vh\" }}>\n <XAdkProvider url={args.url} token={args.token} config={args.config}>\n <div\n style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\" }}\n >\n <CustomStatsBar />\n <div style={{ flex: 1 }}>\n <XAdkProvider.Chatbot />\n </div>\n </div>\n </XAdkProvider>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: `\n使用 \\`useChatState\\` 和 \\`useChatActions\\` Hooks 访问状态和方法。\n\n可以在任意子组件中使用这些 Hooks 来访问聊天数据和操作。\n\n\\`\\`\\`tsx\nfunction CustomStatsBar() {\n const { messages, loading } = useChatState();\n const { chat } = useChatActions();\n\n return (\n <div>\n <p>消息数: {messages.length}</p>\n <button onClick={() => chat({ text: 'Hello' })}>\n 发送\n </button>\n </div>\n );\n}\n\\`\\`\\`\n `,\n },\n },\n },\n args: {\n url: \"https://m-poc-dev.zaxline.com\",\n token:\n \"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzI3NjE1OTQsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc2ODc5NCwiaWF0IjoxNzcyNzYxNTk0LCJqdGkiOiI2M2IyMjRkNC1iODY3LTQzNjYtYTM5ZC1hZjNmOWQ0M2YyZmMiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.QNI4bD6MjIIvv-_SFxYEOiNv9304Ps5WF3b8_qmi3YIrqJQiaJ-iT1_fENpe9dD25RXcpgIv2Xnz9cI3Lz3gHfPKwoefijhrD7_Ye-9C5ztM2OI5pfoUurc1xPvjS7FGrTMZHNbpIFXyPoDAxtzGt-hLoQAEhBhLib8lLAbAQACmBOYy3KGwJg4sSFvbLkGWgqkH2aqC8MdH50ce35leybbEJu7ImithH3rj4E2oF6EqTb3vK181DFooEJ9E_LaC_hrw8zqGh9PSJah1rO3nxUDOPnz946RLKUi0xLOtz42l6qY2nUFsd9axYunGnk2ds5gg-PcBZN_X_aa-w7SLnw\",\n config: {\n appNo: \"3jt2YbDjewVn2PHRKaDfJEgO\",\n },\n },\n};\n\n// ============================================\n// 示例 5: 简化的 Chatbot\n// ============================================\nexport const 简化界面: Story = {\n render: (args) => (\n <div\n style={{\n height: \"100vh\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"#f5f5f5\",\n padding: \"40px\",\n }}\n >\n <div\n style={{\n width: \"100%\",\n maxWidth: \"900px\",\n height: \"700px\",\n background: \"white\",\n borderRadius: \"12px\",\n overflow: \"hidden\",\n boxShadow: \"0 8px 24px rgba(0,0,0,0.12)\",\n }}\n >\n <XAdkProvider url={args.url} token={args.token} config={args.config}>\n <XAdkProvider.Chatbot />\n </XAdkProvider>\n </div>\n </div>\n ),\n parameters: {\n docs: {\n description: {\n story: `\n最简化的聊天界面,只包含消息列表和输入框。\n\n适合嵌入到其他页面或作为对话窗口使用。\n\n\\`\\`\\`tsx\n<XAdkProvider url=\"...\" token=\"...\" config={{ appNo: 'xxx' }}>\n <XAdkProvider.Chatbot />\n</XAdkProvider>\n\\`\\`\\`\n `,\n },\n },\n },\n args: {\n url: \"https://m-poc-dev.zaxline.com\",\n token:\n \"eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJhdWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iLCJuYmYiOjE3NzI3NjE1OTQsInVzZXJfaWQiOiJWNFNPSG1KbzNaZWE0Uk51ZzdYWDJBPT0iLCJzY29wZSI6WyIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08iXSwiaXNzIjoiaHR0cDovL2htLWF1dGgtc2VydmVyLnhsaW5lLWRldi50ZXN0LnhpbmtlLmJpeiIsImV4cCI6MTc3Mjc2ODc5NCwiaWF0IjoxNzcyNzYxNTk0LCJqdGkiOiI2M2IyMjRkNC1iODY3LTQzNjYtYTM5ZC1hZjNmOWQ0M2YyZmMiLCJjbGllbnRfaWQiOiIzanQyWWJEamV3Vm4yUEhSS2FEZkpFZ08ifQ.QNI4bD6MjIIvv-_SFxYEOiNv9304Ps5WF3b8_qmi3YIrqJQiaJ-iT1_fENpe9dD25RXcpgIv2Xnz9cI3Lz3gHfPKwoefijhrD7_Ye-9C5ztM2OI5pfoUurc1xPvjS7FGrTMZHNbpIFXyPoDAxtzGt-hLoQAEhBhLib8lLAbAQACmBOYy3KGwJg4sSFvbLkGWgqkH2aqC8MdH50ce35leybbEJu7ImithH3rj4E2oF6EqTb3vK181DFooEJ9E_LaC_hrw8zqGh9PSJah1rO3nxUDOPnz946RLKUi0xLOtz42l6qY2nUFsd9axYunGnk2ds5gg-PcBZN_X_aa-w7SLnw\",\n config: {\n appNo: \"3jt2YbDjewVn2PHRKaDfJEgO\",\n },\n },\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["XAdkProvider"]
|
|
7
|
-
}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
-
|
|
29
|
-
// src/components/XAdkSender/XAdkSender.stories.tsx
|
|
30
|
-
var XAdkSender_stories_exports = {};
|
|
31
|
-
__export(XAdkSender_stories_exports, {
|
|
32
|
-
default: () => XAdkSender_stories_default,
|
|
33
|
-
基础用法: () => 基础用法
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(XAdkSender_stories_exports);
|
|
36
|
-
var import_react = require("react");
|
|
37
|
-
var import__ = __toESM(require("."));
|
|
38
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
|
-
var meta = {
|
|
40
|
-
title: "AI组件/XAdkSender 输入框",
|
|
41
|
-
component: import__.default,
|
|
42
|
-
parameters: {
|
|
43
|
-
layout: "centered"
|
|
44
|
-
},
|
|
45
|
-
tags: ["autodocs"],
|
|
46
|
-
argTypes: {}
|
|
47
|
-
};
|
|
48
|
-
var XAdkSender_stories_default = meta;
|
|
49
|
-
var BasicUsageStory = () => {
|
|
50
|
-
const [files, setFiles] = (0, import_react.useState)([]);
|
|
51
|
-
const [content, setContent] = (0, import_react.useState)("");
|
|
52
|
-
const [loading, setLoading] = (0, import_react.useState)(false);
|
|
53
|
-
const handleSubmit = (data) => {
|
|
54
|
-
console.info("submit", data);
|
|
55
|
-
};
|
|
56
|
-
const handleClear = () => {
|
|
57
|
-
console.info("clear");
|
|
58
|
-
};
|
|
59
|
-
const handleStop = () => {
|
|
60
|
-
console.info("stop");
|
|
61
|
-
};
|
|
62
|
-
const handleChange = (text) => {
|
|
63
|
-
setContent(text);
|
|
64
|
-
};
|
|
65
|
-
const handleSendMessage = (obj) => {
|
|
66
|
-
setLoading(true);
|
|
67
|
-
setTimeout(() => {
|
|
68
|
-
setContent("");
|
|
69
|
-
setFiles([]);
|
|
70
|
-
setLoading(false);
|
|
71
|
-
}, 2e3);
|
|
72
|
-
};
|
|
73
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 800, border: "1px solid #eee", padding: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
-
import__.default,
|
|
75
|
-
{
|
|
76
|
-
loading,
|
|
77
|
-
clearBtnShow: true,
|
|
78
|
-
allowUpload: true,
|
|
79
|
-
uploadRequest: async ({ file, onProgress, onSuccess, onError }) => {
|
|
80
|
-
try {
|
|
81
|
-
const formData = new FormData();
|
|
82
|
-
formData.append("file", file);
|
|
83
|
-
let progress = 0;
|
|
84
|
-
const interval = setInterval(() => {
|
|
85
|
-
progress += 10;
|
|
86
|
-
onProgress == null ? void 0 : onProgress({ percent: progress });
|
|
87
|
-
if (progress >= 100) {
|
|
88
|
-
clearInterval(interval);
|
|
89
|
-
const mockResponse = {
|
|
90
|
-
code: 200,
|
|
91
|
-
data: {
|
|
92
|
-
fileId: Math.floor(Math.random() * 1e3) + 1,
|
|
93
|
-
tempUrl: `https://example.com/uploads/${file.name}`,
|
|
94
|
-
fileName: file.name,
|
|
95
|
-
fileType: file.name.split(".").pop() || "",
|
|
96
|
-
fileSize: 11234,
|
|
97
|
-
fize: 22333
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
onSuccess == null ? void 0 : onSuccess(mockResponse);
|
|
101
|
-
}
|
|
102
|
-
}, 100);
|
|
103
|
-
} catch (error) {
|
|
104
|
-
onError == null ? void 0 : onError(error);
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
onSubmit: handleSubmit,
|
|
108
|
-
onClear: handleClear,
|
|
109
|
-
onStop: handleStop
|
|
110
|
-
}
|
|
111
|
-
) });
|
|
112
|
-
};
|
|
113
|
-
var 基础用法 = {
|
|
114
|
-
render: BasicUsageStory,
|
|
115
|
-
args: {}
|
|
116
|
-
};
|
|
117
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
118
|
-
0 && (module.exports = {
|
|
119
|
-
基础用法
|
|
120
|
-
});
|
|
121
|
-
//# sourceMappingURL=XAdkSender.stories.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/XAdkSender/XAdkSender.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport type { Attachment } from \"@ant-design/x/es/attachments\";\nimport XAdkSender from \".\";\n\nconst meta: Meta<typeof XAdkSender> = {\n title: \"AI组件/XAdkSender 输入框\",\n component: XAdkSender,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// 基础用法\nconst BasicUsageStory = () => {\n const [files, setFiles] = useState<Attachment[]>([]);\n const [content, setContent] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n // 模拟清空数据\n const handleSubmit = (data: any) => {\n console.info(\"submit\", data);\n };\n\n const handleClear = () => {\n console.info(\"clear\");\n };\n\n // 模拟停止发送\n const handleStop = () => {\n console.info(\"stop\");\n };\n\n // 模拟输入\n const handleChange = (text: string) => {\n setContent(text);\n };\n\n // 模拟快捷短语点击\n const handleSendMessage = (obj: any) => {\n setLoading(true);\n setTimeout(() => {\n setContent(\"\");\n setFiles([]);\n setLoading(false);\n }, 2000);\n };\n\n return (\n <div style={{ width: 800, border: \"1px solid #eee\", padding: 20 }}>\n <XAdkSender\n loading={loading}\n clearBtnShow={true}\n allowUpload={true}\n uploadRequest={async ({ file, onProgress, onSuccess, onError }) => {\n try {\n // 创建 FormData\n const formData = new FormData();\n formData.append(\"file\", file);\n\n // 模拟上传进度\n let progress = 0;\n const interval = setInterval(() => {\n progress += 10;\n onProgress?.({ percent: progress });\n\n if (progress >= 100) {\n clearInterval(interval);\n // 模拟成功响应\n const mockResponse = {\n code: 200,\n data: {\n fileId: Math.floor(Math.random() * 1000) + 1,\n tempUrl: `https://example.com/uploads/${file.name}`,\n fileName: file.name,\n fileType: file.name.split(\".\").pop() || \"\",\n fileSize: 11234,\n fize: 22333,\n },\n };\n onSuccess?.(mockResponse);\n }\n }, 100);\n } catch (error) {\n onError?.(error as Error);\n }\n }}\n onSubmit={handleSubmit}\n onClear={handleClear}\n onStop={handleStop}\n />\n </div>\n );\n};\n\nexport const 基础用法: Story = {\n render: BasicUsageStory,\n args: {},\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAGzB,eAAuB;AAoDjB;AAlDN,IAAM,OAAgC;AAAA,EACpC,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAC;AACb;AAEA,IAAO,6BAAQ;AAIf,IAAM,kBAAkB,MAAM;AAC5B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAuB,CAAC,CAAC;AACnD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,EAAE;AACzC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAG5C,QAAM,eAAe,CAAC,SAAc;AAClC,YAAQ,KAAK,UAAU,IAAI;AAAA,EAC7B;AAEA,QAAM,cAAc,MAAM;AACxB,YAAQ,KAAK,OAAO;AAAA,EACtB;AAGA,QAAM,aAAa,MAAM;AACvB,YAAQ,KAAK,MAAM;AAAA,EACrB;AAGA,QAAM,eAAe,CAAC,SAAiB;AACrC,eAAW,IAAI;AAAA,EACjB;AAGA,QAAM,oBAAoB,CAAC,QAAa;AACtC,eAAW,IAAI;AACf,eAAW,MAAM;AACf,iBAAW,EAAE;AACb,eAAS,CAAC,CAAC;AACX,iBAAW,KAAK;AAAA,IAClB,GAAG,GAAI;AAAA,EACT;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,KAAK,QAAQ,kBAAkB,SAAS,GAAG,GAC9D;AAAA,IAAC,SAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,cAAc;AAAA,MACd,aAAa;AAAA,MACb,eAAe,OAAO,EAAE,MAAM,YAAY,WAAW,QAAQ,MAAM;AACjE,YAAI;AAEF,gBAAM,WAAW,IAAI,SAAS;AAC9B,mBAAS,OAAO,QAAQ,IAAI;AAG5B,cAAI,WAAW;AACf,gBAAM,WAAW,YAAY,MAAM;AACjC,wBAAY;AACZ,qDAAa,EAAE,SAAS,SAAS;AAEjC,gBAAI,YAAY,KAAK;AACnB,4BAAc,QAAQ;AAEtB,oBAAM,eAAe;AAAA,gBACnB,MAAM;AAAA,gBACN,MAAM;AAAA,kBACJ,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,GAAI,IAAI;AAAA,kBAC3C,SAAS,+BAA+B,KAAK;AAAA,kBAC7C,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,KAAK;AAAA,kBACxC,UAAU;AAAA,kBACV,MAAM;AAAA,gBACR;AAAA,cACF;AACA,qDAAY;AAAA,YACd;AAAA,UACF,GAAG,GAAG;AAAA,QACR,SAAS,OAAP;AACA,6CAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,EACV,GACF;AAEJ;AAEO,IAAM,OAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM,CAAC;AACT;",
|
|
6
|
-
"names": ["XAdkSender"]
|
|
7
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import XAiChatbot from ".";
|
|
3
|
-
declare const meta: Meta<typeof XAiChatbot>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const 基础用法: Story;
|
|
7
|
-
export declare const 在Provider中使用: Story;
|
|
8
|
-
export declare const 多个Provider实例: Story;
|
|
9
|
-
export declare const 新架构演示: Story;
|
|
10
|
-
export declare const 架构对比演示: Story;
|