@ai-group/chat-sdk 0.6.0 → 1.0.3
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/assets/arrow-down-blue.png +0 -0
- package/dist/cjs/assets/arrow-down.png +0 -0
- package/dist/cjs/assets/think.png +0 -0
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js +126 -99
- package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js.map +2 -2
- package/dist/cjs/components/XAiChatbot/index.d.ts +3 -6
- package/dist/cjs/components/XAiChatbot/index.js +40 -32
- package/dist/cjs/components/XAiChatbot/index.js.map +3 -3
- package/dist/cjs/components/XAiChatbot/styles.d.ts +8 -2
- package/dist/cjs/components/XAiChatbot/styles.js +66 -21
- package/dist/cjs/components/XAiChatbot/styles.js.map +2 -2
- package/dist/cjs/components/XAiConversations/index.js +1 -1
- package/dist/cjs/components/XAiConversations/index.js.map +1 -1
- package/dist/cjs/hooks/useAgentGenerator.js +8 -8
- package/dist/cjs/hooks/useAgentGenerator.js.map +2 -2
- package/dist/cjs/index.d.ts +2 -1
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/types/XAiChatbot.d.ts +2 -0
- package/dist/cjs/types/XAiChatbot.js.map +1 -1
- package/dist/cjs/types/XAiMessage.d.ts +3 -2
- package/dist/cjs/types/XAiMessage.js.map +2 -2
- package/dist/cjs/types/mdx.d.ts +5 -0
- package/dist/esm/assets/arrow-down-blue.png +0 -0
- package/dist/esm/assets/arrow-down.png +0 -0
- package/dist/esm/assets/think.png +0 -0
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js +96 -99
- package/dist/esm/components/XAiChatbot/XAiChatbot.stories.js.map +1 -1
- package/dist/esm/components/XAiChatbot/index.d.ts +3 -6
- package/dist/esm/components/XAiChatbot/index.js +166 -109
- package/dist/esm/components/XAiChatbot/index.js.map +1 -1
- package/dist/esm/components/XAiChatbot/styles.d.ts +8 -2
- package/dist/esm/components/XAiChatbot/styles.js +24 -18
- package/dist/esm/components/XAiChatbot/styles.js.map +1 -1
- package/dist/esm/components/XAiConversations/index.js +1 -1
- package/dist/esm/components/XAiConversations/index.js.map +1 -1
- package/dist/esm/hooks/useAgentGenerator.js +12 -12
- package/dist/esm/hooks/useAgentGenerator.js.map +1 -1
- package/dist/esm/index.d.ts +2 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/XAiChatbot.d.ts +2 -0
- package/dist/esm/types/XAiChatbot.js.map +1 -1
- package/dist/esm/types/XAiMessage.d.ts +3 -2
- package/dist/esm/types/XAiMessage.js.map +1 -1
- package/dist/esm/types/mdx.d.ts +5 -0
- package/dist/umd/chat-sdk.min.js +1 -1
- package/package.json +1 -1
|
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/components/XAiChatbot/index.tsx
|
|
30
30
|
var XAiChatbot_exports = {};
|
|
31
31
|
__export(XAiChatbot_exports, {
|
|
32
|
+
ActionHeader: () => ActionHeader,
|
|
32
33
|
default: () => XAiChatbot_default
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(XAiChatbot_exports);
|
|
@@ -42,12 +43,15 @@ var import_react_html_parser = __toESM(require("react-html-parser"));
|
|
|
42
43
|
var import_markdown = __toESM(require("../../styles/markdown"));
|
|
43
44
|
var import_XAiMessage = require("../../types/XAiMessage");
|
|
44
45
|
var import_empty = __toESM(require("../../assets/empty.png"));
|
|
45
|
-
var import_group = __toESM(require("../../assets/group.png"));
|
|
46
46
|
var import_arrow_up = __toESM(require("../../assets/arrow-up.png"));
|
|
47
47
|
var import_arrow_down = __toESM(require("../../assets/arrow-down.png"));
|
|
48
|
+
var import_think = __toESM(require("../../assets/think.png"));
|
|
49
|
+
var import_group = __toESM(require("../../assets/group.png"));
|
|
50
|
+
var import_arrow_down_blue = __toESM(require("../../assets/arrow-down-blue.png"));
|
|
48
51
|
var import_useProviderContext = require("../../hooks/useProviderContext");
|
|
49
52
|
var import_styles = require("./styles");
|
|
50
53
|
var import_XAiSender = __toESM(require("../XAiSender"));
|
|
54
|
+
var styles = (0, import_styles.useStyles)();
|
|
51
55
|
var md = new import_markdown_it.default({
|
|
52
56
|
html: true,
|
|
53
57
|
linkify: true,
|
|
@@ -71,6 +75,23 @@ md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
|
|
71
75
|
}
|
|
72
76
|
return defaultRender(tokens, idx, options, env, self);
|
|
73
77
|
};
|
|
78
|
+
var ActionHeader = (0, import_react.memo)(({ execute = [], thinks = "" }) => {
|
|
79
|
+
var _a;
|
|
80
|
+
const styles2 = (0, import_styles.useStyles)();
|
|
81
|
+
const [expanded, setExpanded] = (0, import_react.useState)(true);
|
|
82
|
+
const [executeExpanded, setExecuteExpanded] = (0, import_react.useState)(false);
|
|
83
|
+
if (!execute || execute.length === 0 || !thinks)
|
|
84
|
+
return null;
|
|
85
|
+
const last = execute[execute.length - 1] || {};
|
|
86
|
+
const { name } = last;
|
|
87
|
+
const icon = (last == null ? void 0 : last.icon) || ((_a = last == null ? void 0 : last.extra) == null ? void 0 : _a.icon);
|
|
88
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionHeaderWrapper }, !expanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionTitle, onClick: () => setExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_think.default, alt: "icon", className: styles2.actionHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, "运行过程"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "展开icon", src: import_arrow_down.default, className: styles2.w("16px") })), expanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionHeaderDetail }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionDetailTitle, onClick: () => setExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_think.default, alt: "", className: (0, import_clsx.default)(styles2.w(14)) }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles2.flex1, styles2.pl(10)) }, "隐藏运行过程"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "收起icon", src: import_arrow_up.default, className: styles2.w("16px") })), thinks && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionDetailContent }, /* @__PURE__ */ import_react.default.createElement("span", null, thinks)), !executeExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeHiddenWrapper, onClick: () => setExecuteExpanded((v) => !v) }, icon && /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, name), /* @__PURE__ */ import_react.default.createElement("img", { alt: "工具icon", src: import_arrow_down_blue.default, className: styles2.w("16px") })), executeExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeWrapper }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeTitle, onClick: () => setExecuteExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_group.default, alt: "icon", className: styles2.executeHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, "隐藏运行详情"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "展开详情icon", src: import_arrow_up.default, className: styles2.w("16px") })), /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeContent }, execute.map((action, idx) => {
|
|
89
|
+
var _a2, _b, _c;
|
|
90
|
+
const thinkIcon2 = (action == null ? void 0 : action.expandIcon) || ((_a2 = action == null ? void 0 : action.extra) == null ? void 0 : _a2.expandIcon) || ((_b = action == null ? void 0 : action.extra) == null ? void 0 : _b.icon) || (action == null ? void 0 : action.icon);
|
|
91
|
+
const thinkCost = (action == null ? void 0 : action.cost) || ((_c = action == null ? void 0 : action.extra) == null ? void 0 : _c.cost);
|
|
92
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { key: action.uniqueId || idx, className: styles2.actionHeaderDetailItem }, thinkIcon2 && /* @__PURE__ */ import_react.default.createElement("img", { src: thinkIcon2, alt: "icon", className: styles2.actionHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", null, action == null ? void 0 : action.name), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.actionHeaderCost }, thinkCost ? `${thinkCost}s` : ""));
|
|
93
|
+
})))));
|
|
94
|
+
});
|
|
74
95
|
var defaultActions = [
|
|
75
96
|
{
|
|
76
97
|
key: "redo",
|
|
@@ -117,12 +138,13 @@ var XAiChatbot = (props) => {
|
|
|
117
138
|
onSend,
|
|
118
139
|
onClear,
|
|
119
140
|
onStop,
|
|
120
|
-
providerId
|
|
141
|
+
providerId,
|
|
142
|
+
// 消息顶部
|
|
143
|
+
messageTop
|
|
121
144
|
} = mergedProps;
|
|
122
145
|
const messages = mergedProps.messages || propMessages || [];
|
|
123
146
|
const loading = mergedProps.loading || propLoading;
|
|
124
147
|
const [content, setContent] = (0, import_react.useState)(text);
|
|
125
|
-
const styles = (0, import_styles.useStyles)();
|
|
126
148
|
const lastMessageId = (0, import_react.useRef)("");
|
|
127
149
|
const isScriptScrolling = (0, import_react.useRef)(false);
|
|
128
150
|
const chatId = providerId ? `za-chatbot-container-${providerId}` : "za-chatbot-container";
|
|
@@ -167,33 +189,6 @@ var XAiChatbot = (props) => {
|
|
|
167
189
|
variant: "borderless"
|
|
168
190
|
}
|
|
169
191
|
};
|
|
170
|
-
const ActionHeader = ({ thinks = [], renderActionHeader }) => {
|
|
171
|
-
var _a;
|
|
172
|
-
const [expanded, setExpanded] = (0, import_react.useState)(false);
|
|
173
|
-
if (!thinks || thinks.length === 0)
|
|
174
|
-
return null;
|
|
175
|
-
if (renderActionHeader) {
|
|
176
|
-
return renderActionHeader({ thinks, expanded, onToggle: () => setExpanded((v) => !v) });
|
|
177
|
-
}
|
|
178
|
-
const first = thinks[0];
|
|
179
|
-
const { name } = first;
|
|
180
|
-
const icon = (first == null ? void 0 : first.icon) || ((_a = first == null ? void 0 : first.extra) == null ? void 0 : _a.icon);
|
|
181
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { className: styles.actionHeaderWrapper }, !expanded && /* @__PURE__ */ import_react.default.createElement(
|
|
182
|
-
"div",
|
|
183
|
-
{
|
|
184
|
-
className: styles.actionHeaderItem,
|
|
185
|
-
onClick: () => setExpanded((v) => !v)
|
|
186
|
-
},
|
|
187
|
-
icon && /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "icon", className: styles.actionHeaderIcon }),
|
|
188
|
-
/* @__PURE__ */ import_react.default.createElement("span", { className: styles.actionHeaderText }, name),
|
|
189
|
-
/* @__PURE__ */ import_react.default.createElement("img", { alt: "展开icon", src: import_arrow_down.default, className: styles.w("16px") })
|
|
190
|
-
), expanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles.actionHeaderDetail }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles.actionDetailTitle, onClick: () => setExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_group.default, alt: "", className: (0, import_clsx.default)(styles.w(14)) }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles.flex1, styles.pl(10)) }, "隐藏运行过程"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "收起icon", src: import_arrow_up.default, className: styles.w("16px") })), thinks.map((action, idx) => {
|
|
191
|
-
var _a2, _b, _c;
|
|
192
|
-
const thinkIcon = (action == null ? void 0 : action.expandIcon) || ((_a2 = action == null ? void 0 : action.extra) == null ? void 0 : _a2.expandIcon) || ((_b = action == null ? void 0 : action.extra) == null ? void 0 : _b.icon) || (action == null ? void 0 : action.icon);
|
|
193
|
-
const thinkCost = (action == null ? void 0 : action.cost) || ((_c = action == null ? void 0 : action.extra) == null ? void 0 : _c.cost);
|
|
194
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { key: action.uniqueId || idx, className: styles.actionHeaderDetailItem }, thinkIcon && /* @__PURE__ */ import_react.default.createElement("img", { src: thinkIcon, alt: "icon", className: styles.actionHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", null, action == null ? void 0 : action.name), /* @__PURE__ */ import_react.default.createElement("span", { className: styles.actionHeaderCost }, thinkCost ? `${thinkCost}s` : ""));
|
|
195
|
-
})));
|
|
196
|
-
};
|
|
197
192
|
const handleSend = (type, content2) => {
|
|
198
193
|
if (content2.trim()) {
|
|
199
194
|
onSend == null ? void 0 : onSend(type, content2);
|
|
@@ -225,8 +220,11 @@ var XAiChatbot = (props) => {
|
|
|
225
220
|
{
|
|
226
221
|
id: chatId,
|
|
227
222
|
roles: rolesObject,
|
|
223
|
+
className: styles.messageList,
|
|
228
224
|
items: messages.map((msg) => {
|
|
229
|
-
const { id, role, status, type,
|
|
225
|
+
const { id, role, status, type, execute = [], thinks = "", extra = { noFooter: false } } = msg;
|
|
226
|
+
const [expanded, setExpanded] = (0, import_react.useState)(false);
|
|
227
|
+
const [executeExpanded, setExecuteExpanded] = (0, import_react.useState)(false);
|
|
230
228
|
if (role === import_XAiMessage.MessageRole.assistant) {
|
|
231
229
|
lastMessageId.current = id;
|
|
232
230
|
}
|
|
@@ -234,7 +232,13 @@ var XAiChatbot = (props) => {
|
|
|
234
232
|
key: id,
|
|
235
233
|
role,
|
|
236
234
|
loading: status === import_XAiMessage.MessageStatus.init,
|
|
237
|
-
header: () => /* @__PURE__ */ import_react.default.createElement(
|
|
235
|
+
header: () => messageTop || /* @__PURE__ */ import_react.default.createElement(
|
|
236
|
+
ActionHeader,
|
|
237
|
+
{
|
|
238
|
+
execute,
|
|
239
|
+
thinks
|
|
240
|
+
}
|
|
241
|
+
),
|
|
238
242
|
content: (() => {
|
|
239
243
|
var _a, _b, _c;
|
|
240
244
|
if (type === "TextMessage") {
|
|
@@ -309,4 +313,8 @@ var XAiChatbot = (props) => {
|
|
|
309
313
|
)));
|
|
310
314
|
};
|
|
311
315
|
var XAiChatbot_default = XAiChatbot;
|
|
316
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
317
|
+
0 && (module.exports = {
|
|
318
|
+
ActionHeader
|
|
319
|
+
});
|
|
312
320
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiChatbot/index.tsx"],
|
|
4
|
-
"sourcesContent": ["// 文件: components/XAiChatbot/index.tsx\n\nimport React, {\n useRef,\n useState,\n useMemo,\n} from 'react';\nimport {\n Button,\n Spin,\n Tooltip,\n GetProp,\n} from 'antd';\nimport {\n Bubble,\n Prompts,\n} from '@ant-design/x';\nimport {\n UserOutlined,\n RedoOutlined,\n CopyOutlined,\n DeleteOutlined,\n} from '@ant-design/icons';\nimport clsx from 'clsx';\nimport MarkdownIt from 'markdown-it';\nimport reactHtmlParser from 'react-html-parser';\nimport MarkdownGlobalStyle from '@/styles/markdown';\nimport {\n MessageStatus,\n MessageRole,\n Messages,\n} from '@/types/XAiMessage';\nimport {\n XAiChatbotProps,\n ActionItem,\n} from '@/types/XAiChatbot';\nimport emptyIcon from '@/assets/empty.png';\nimport groupIcon from '@/assets/group.png';\nimport arrowUp from '@/assets/arrow-up.png';\nimport arrowDown from '@/assets/arrow-down.png';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { useStyles, GlobalStyle } from './styles';\nimport XAiSender from '../XAiSender';\n\nconst md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true,\n});\n\n// 自定义 link_open 渲染规则\nconst defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => {\n return self.renderToken(tokens, idx, options);\n});\n\n// a 标签打开规则\nmd.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n // 添加 target=\"_blank\"\n const aIndex = tokens[idx].attrIndex('target');\n if (aIndex < 0) {\n tokens[idx].attrPush(['target', '_blank']);\n } else {\n tokens[idx].attrs![aIndex][1] = '_blank';\n }\n // 添加 rel=\"noopener noreferrer\"\n const relIndex = tokens[idx].attrIndex('rel');\n if (relIndex < 0) {\n tokens[idx].attrPush(['rel', 'noopener noreferrer']);\n } else {\n tokens[idx].attrs![relIndex][1] = 'noopener noreferrer';\n }\n return defaultRender(tokens, idx, options, env, self);\n};\n\nexport interface ActionHeaderProps {\n thinks: any[];\n renderActionHeader?: (params: { thinks: any[]; expanded: boolean; onToggle: () => void }) => React.ReactNode;\n}\n\n// 默认消息功能区\nconst defaultActions: ActionItem[] = [\n {\n key: 'redo',\n icon: <RedoOutlined />,\n tooltip: '重新生成',\n },\n {\n key: 'copy',\n icon: <CopyOutlined />,\n tooltip: '复制',\n },\n {\n key: 'delete',\n icon: <DeleteOutlined />,\n tooltip: '删除',\n },\n];\n\nconst XAiChatbot: React.FC<XAiChatbotProps> = (props) => {\n // 使用新的 Hook 来处理 Provider 上下文\n const { mergedProps } = useChatbotContext(props);\n\n const {\n navbarShow = false,\n navbar,\n renderNavbar = null,\n clearBtnShow = true,\n inputShow = true,\n // renderMessageContent,\n // quickReplies = [],\n // quickRepliesVisible = true,\n // onQuickReplyClick,\n loading: propLoading = false,\n messageTooltip,\n avatar,\n userAvatar,\n messages: propMessages,\n text = '',\n footerTips = '',\n empty = null,\n emptyStateImage = emptyIcon,\n emptyStateText = '我的智能体',\n messageActions = defaultActions,\n onMessagesActionsCallback,\n // 点击帮助消息\n onSuggestMessageClick,\n onSend,\n onClear,\n onStop,\n providerId,\n } = mergedProps;\n\n // 如果在 Provider 中，使用 Provider 的状态\n const messages = mergedProps.messages || propMessages || [];\n const loading = mergedProps.loading || propLoading;\n\n const [content, setContent] = useState<string>(text); // 输入框文本\n const styles = useStyles();\n const lastMessageId = useRef<string>('');\n const isScriptScrolling = useRef<boolean>(false);\n const chatId = providerId ? `za-chatbot-container-${providerId}` : 'za-chatbot-container';\n\n // 滚动到最底部\n const scrollToBottom = () => {\n isScriptScrolling.current = true;\n setTimeout(() => {\n const mainChatWrapper = document.getElementById(chatId);\n if (mainChatWrapper) {\n mainChatWrapper.scrollTop = mainChatWrapper?.scrollHeight;\n }\n isScriptScrolling.current = false;\n }, 0);\n };\n\n // 消息功能区组件\n const FooterActions: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <div className={clsx(styles.flex, styles.gap(13))}>\n {messageActions.map((action: ActionItem, index: number) => {\n if (!lastMessage && action.key === 'redo') return null;\n return (\n <Tooltip key={action.key} title={action.tooltip}>\n <span className={styles.cursor('pointer')} onClick={() => onMessagesActionsCallback?.(index, data)}>\n {action.icon}\n </span>\n </Tooltip>\n );\n })}\n </div>\n );\n\n // 消息底部区域\n const MessageFooter: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <>\n {messageTooltip?.(data)}\n <FooterActions data={data} lastMessage={lastMessage} />\n </>\n );\n\n // 聊天角色\n const rolesObject: GetProp<typeof Bubble.List, 'roles'> = {\n assistant: {\n placement: 'start',\n avatar: { icon: avatar || <UserOutlined className={clsx(styles.bg('#fde3cf'), styles.userAvatar)} /> },\n typing: { step: 5, interval: 20 },\n style: {\n maxWidth: 600,\n },\n classNames: {\n content: 'assistant-content',\n },\n },\n user: {\n placement: 'end',\n avatar: { icon: userAvatar || <UserOutlined className={clsx(styles.bg('#87d068'), styles.userAvatar)} /> },\n classNames: {\n content: 'user-content',\n },\n },\n suggestion: {\n placement: 'start',\n avatar: { icon: <UserOutlined />, style: { visibility: 'hidden' } },\n variant: 'borderless',\n },\n };\n\n // ActionHeader 组件\n const ActionHeader: React.FC<ActionHeaderProps> = ({ thinks = [], renderActionHeader }) => {\n const [expanded, setExpanded] = useState(false);\n if (!thinks || thinks.length === 0) return null;\n if (renderActionHeader) {\n return renderActionHeader({ thinks, expanded, onToggle: () => setExpanded((v) => !v) });\n }\n // 默认渲染\n const first = thinks[0];\n const { name } = first;\n const icon = first?.icon || first?.extra?.icon;\n return (\n <div className={styles.actionHeaderWrapper}>\n { !expanded && (\n <div\n className={styles.actionHeaderItem}\n onClick={() => setExpanded((v) => !v)}\n >\n { icon && <img src={icon} alt=\"icon\" className={styles.actionHeaderIcon} /> }\n <span className={styles.actionHeaderText}>{name}</span>\n <img alt=\"展开icon\" src={arrowDown} className={styles.w('16px')} />\n </div>\n ) }\n {expanded && (\n <div className={styles.actionHeaderDetail}>\n <div className={styles.actionDetailTitle} onClick={() => setExpanded((v) => !v)}>\n <img src={groupIcon} alt=\"\" className={clsx(styles.w(14))} />\n <div className={clsx(styles.flex1, styles.pl(10))}>隐藏运行过程</div>\n <img alt=\"收起icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n {thinks.map((action, idx) => {\n const thinkIcon = action?.expandIcon || action?.extra?.expandIcon || action?.extra?.icon || action?.icon;\n const thinkCost = action?.cost || action?.extra?.cost;\n return (\n <div key={action.uniqueId || idx} className={styles.actionHeaderDetailItem}>\n { thinkIcon && <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} /> }\n <span>{action?.name}</span>\n <span className={styles.actionHeaderCost}>{thinkCost ? `${thinkCost}s` : ''}</span>\n </div>\n );\n })}\n </div>\n )}\n </div>\n );\n };\n\n // 触发发送\n const handleSend = (type: string, content: string) => {\n if (content.trim()) {\n // 直接使用合并后的 onSend，自动处理 Provider 和独立模式\n onSend?.(type, content);\n setContent(''); // 发送后清空输入框内容\n scrollToBottom();\n }\n };\n\n // 输出内容\n const handleChange = (content: string) => {\n setContent(content);\n }\n\n // 停止生成\n const handleStop = () => {\n onStop?.();\n }\n\n // 导航栏\n const NavBar: React.FC = () => {\n if (renderNavbar) {\n return renderNavbar();\n } if (navbar?.title) {\n return (\n <header className={styles.navbar}>\n {navbar.avatar && <img src={navbar.avatar} className={styles.avatar} alt=\"\" />}\n <div>\n <div className={styles.title}>{navbar.title}</div>\n <div className={styles.subtitle}>{navbar.subtitle}</div>\n </div>\n </header>\n );\n }\n return <></>;\n };\n\n // 确认清除\n const confirmClear = () => {\n onClear?.();\n };\n\n // 空状态\n const EmptyState = useMemo(() => () => (\n empty ? empty : <div className={styles.emptyWrapper}>\n <img src={emptyStateImage} alt=\"空状态图标\" className={styles.emptyImg} />\n <div className={clsx(styles.text(16), styles.weight(600), styles.textColor('#343434'))}>{emptyStateText}</div>\n </div>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n ), [emptyStateImage, emptyStateText]);\n\n return (\n <>\n <GlobalStyle />\n <MarkdownGlobalStyle />\n <div id=\"x-ai-chatbot\" className={styles.wrapper}>\n { navbarShow && <NavBar /> }\n {/** 消息容器 */}\n <div className={styles.messageContainer}>\n {/* 消息列表主体 */}\n {\n messages?.length\n ? (\n <Bubble.List\n id={chatId}\n roles={rolesObject}\n items={messages.map((msg: any) => {\n const { id, role, status, type, thinks = [], extra = { noFooter: false } } = msg as Messages;\n // 最后一条 AI消息标识\n if (role === MessageRole.assistant) {\n lastMessageId.current = id;\n }\n // 会话内容\n const bubbleContent: any = {\n key: id,\n role,\n loading: status === MessageStatus.init,\n header: (() => <ActionHeader thinks={thinks} />),\n content: (() => {\n // 文本消息\n if (type === 'TextMessage') {\n // 用户消息\n if (role === 'user') {\n return (\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {msg.content?.text}\n </div>\n );\n }\n // 输出html字符串\n const html = md.render(msg.content?.text || '');\n // 生成React节点\n const htmlString = reactHtmlParser(html);\n return (\n <>\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {htmlString}\n </div>\n </>\n );\n }\n // 图片类型\n if (type === 'ImageMessage') {\n return (\n <div style={{ minWidth: 0, maxWidth: 600 }}>\n <img src={msg.content?.bytes} alt=\"\" style={{ maxWidth: 680 }} />\n </div>\n );\n }\n // 提示类型\n if (type === 'SuggestionMessage') {\n return (\n <Prompts\n vertical\n items={msg.content as any}\n onItemClick={(info) => {\n onSuggestMessageClick?.(info.data, id, 'text');\n if (info.data.description) {\n onSend?.('text', info.data.description as string);\n }\n }}\n />\n );\n }\n // 其他类型...\n return null;\n })(),\n };\n\n if (!extra.noFooter) {\n bubbleContent.footer = (() => {\n return (\n role === MessageRole.assistant && status !== MessageStatus.failed && (\n <>\n <MessageFooter data={msg as Messages} lastMessage={lastMessageId.current === id} />\n </>\n )\n );\n });\n }\n\n return bubbleContent;\n })}\n />\n )\n : (\n <EmptyState />\n )\n }\n </div>\n {/* 输入框 */}\n { inputShow && <XAiSender\n value={content}\n loading={loading}\n footerTips={footerTips}\n clearBtnShow={clearBtnShow}\n onChange={handleChange}\n onSubmit={handleSend}\n onStop={handleStop}\n onClear={confirmClear}\n /> }\n </div>\n </>\n );\n};\n\nexport default XAiChatbot;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
6
|
-
"names": ["MarkdownIt", "
|
|
4
|
+
"sourcesContent": ["// 文件: components/XAiChatbot/index.tsx\n\nimport React, {\n useRef,\n useState,\n useMemo,\n memo,\n} from 'react';\nimport {\n Tooltip,\n GetProp,\n} from 'antd';\nimport {\n Bubble,\n Prompts,\n} from '@ant-design/x';\nimport {\n UserOutlined,\n RedoOutlined,\n CopyOutlined,\n DeleteOutlined,\n} from '@ant-design/icons';\nimport clsx from 'clsx';\nimport MarkdownIt from 'markdown-it';\nimport reactHtmlParser from 'react-html-parser';\nimport MarkdownGlobalStyle from '@/styles/markdown';\nimport {\n MessageStatus,\n MessageRole,\n Messages,\n} from '@/types/XAiMessage';\nimport {\n XAiChatbotProps,\n ActionItem,\n} from '@/types/XAiChatbot';\nimport emptyIcon from '@/assets/empty.png';\nimport arrowUp from '@/assets/arrow-up.png';\nimport arrowDown from '@/assets/arrow-down.png';\nimport thinkIcon from '@/assets/think.png';\nimport groupIcon from '@/assets/group.png';\nimport arrowDownBlue from '@/assets/arrow-down-blue.png';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { useStyles, GlobalStyle } from './styles';\nimport XAiSender from '../XAiSender';\n\nconst styles = useStyles();\n\nconst md = new MarkdownIt({\n html: true,\n linkify: true,\n typographer: true,\n});\n\n// 自定义 link_open 渲染规则\nconst defaultRender = md.renderer.rules.link_open || ((tokens, idx, options, env, self) => {\n return self.renderToken(tokens, idx, options);\n});\n\n// a 标签打开规则\nmd.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n // 添加 target=\"_blank\"\n const aIndex = tokens[idx].attrIndex('target');\n if (aIndex < 0) {\n tokens[idx].attrPush(['target', '_blank']);\n } else {\n tokens[idx].attrs![aIndex][1] = '_blank';\n }\n // 添加 rel=\"noopener noreferrer\"\n const relIndex = tokens[idx].attrIndex('rel');\n if (relIndex < 0) {\n tokens[idx].attrPush(['rel', 'noopener noreferrer']);\n } else {\n tokens[idx].attrs![relIndex][1] = 'noopener noreferrer';\n }\n return defaultRender(tokens, idx, options, env, self);\n};\n\nexport interface ActionHeaderProps {\n execute: any[];\n thinks: string,\n}\n\n// ActionHeader 组件\nexport const ActionHeader: React.FC<ActionHeaderProps> = memo(({ execute = [], thinks = '' }) => {\n const styles = useStyles();\n const [expanded, setExpanded] = useState(true);\n const [executeExpanded, setExecuteExpanded] = useState(false);\n\n if (!execute || execute.length === 0 || !thinks) return null;\n\n const last = execute[execute.length - 1] || {};\n const { name } = last;\n const icon = last?.icon || last?.extra?.icon;\n\n return (\n <div className={styles.actionHeaderWrapper}>\n {!expanded && (\n <div className={styles.actionTitle} onClick={() => setExpanded(v => !v)}>\n <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} />\n <span className={styles.flex1}>运行过程</span>\n <img alt=\"展开icon\" src={arrowDown} className={styles.w('16px')} />\n </div>\n )}\n {expanded && (\n <div className={styles.actionHeaderDetail}>\n <div className={styles.actionDetailTitle} onClick={() => setExpanded(v => !v)}>\n <img src={thinkIcon} alt=\"\" className={clsx(styles.w(14))} />\n <div className={clsx(styles.flex1, styles.pl(10))}>隐藏运行过程</div>\n <img alt=\"收起icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n {thinks && (\n <div className={styles.actionDetailContent}>\n <span>{thinks}</span>\n </div>\n )}\n {!executeExpanded && (\n <div className={styles.executeHiddenWrapper} onClick={() => setExecuteExpanded(v => !v)}>\n {icon && <img src={icon} alt=\"icon\" />}\n <span className={styles.flex1}>{name}</span>\n <img alt=\"工具icon\" src={arrowDownBlue} className={styles.w('16px')} />\n </div>\n )}\n {executeExpanded && (\n <div className={styles.executeWrapper}>\n <div className={styles.executeTitle} onClick={() => setExecuteExpanded(v => !v)}>\n <img src={groupIcon} alt=\"icon\" className={styles.executeHeaderIcon} />\n <span className={styles.flex1}>隐藏运行详情</span>\n <img alt=\"展开详情icon\" src={arrowUp} className={styles.w('16px')} />\n </div>\n <div className={styles.executeContent}>\n {execute.map((action: any, idx: number) => {\n const thinkIcon = action?.expandIcon || action?.extra?.expandIcon || action?.extra?.icon || action?.icon;\n const thinkCost = action?.cost || action?.extra?.cost;\n return (\n <div key={action.uniqueId || idx} className={styles.actionHeaderDetailItem}>\n {thinkIcon && <img src={thinkIcon} alt=\"icon\" className={styles.actionHeaderIcon} />}\n <span>{action?.name}</span>\n <span className={styles.actionHeaderCost}>{thinkCost ? `${thinkCost}s` : ''}</span>\n </div>\n );\n })}\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\n\n// 默认消息功能区\nconst defaultActions: ActionItem[] = [\n {\n key: 'redo',\n icon: <RedoOutlined />,\n tooltip: '重新生成',\n },\n {\n key: 'copy',\n icon: <CopyOutlined />,\n tooltip: '复制',\n },\n {\n key: 'delete',\n icon: <DeleteOutlined />,\n tooltip: '删除',\n },\n];\n\n\nconst XAiChatbot: React.FC<XAiChatbotProps> = (props) => {\n // 使用新的 Hook 来处理 Provider 上下文\n const { mergedProps } = useChatbotContext(props);\n\n const {\n navbarShow = false,\n navbar,\n renderNavbar = null,\n clearBtnShow = true,\n inputShow = true,\n // renderMessageContent,\n // quickReplies = [],\n // quickRepliesVisible = true,\n // onQuickReplyClick,\n loading: propLoading = false,\n messageTooltip,\n avatar,\n userAvatar,\n messages: propMessages,\n text = '',\n footerTips = '',\n empty = null,\n emptyStateImage = emptyIcon,\n emptyStateText = '我的智能体',\n messageActions = defaultActions,\n onMessagesActionsCallback,\n // 点击帮助消息\n onSuggestMessageClick,\n onSend,\n onClear,\n onStop,\n providerId,\n // 消息顶部\n messageTop,\n } = mergedProps;\n\n // 如果在 Provider 中，使用 Provider 的状态\n const messages = mergedProps.messages || propMessages || [];\n const loading = mergedProps.loading || propLoading;\n\n const [content, setContent] = useState<string>(text); // 输入框文本\n const lastMessageId = useRef<string>('');\n const isScriptScrolling = useRef<boolean>(false);\n const chatId = providerId ? `za-chatbot-container-${providerId}` : 'za-chatbot-container';\n\n // 滚动到最底部\n const scrollToBottom = () => {\n isScriptScrolling.current = true;\n setTimeout(() => {\n const mainChatWrapper = document.getElementById(chatId);\n if (mainChatWrapper) {\n mainChatWrapper.scrollTop = mainChatWrapper?.scrollHeight;\n }\n isScriptScrolling.current = false;\n }, 0);\n };\n\n // 消息功能区组件\n const FooterActions: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <div className={clsx(styles.flex, styles.gap(13))}>\n {messageActions.map((action: ActionItem, index: number) => {\n if (!lastMessage && action.key === 'redo') return null;\n return (\n <Tooltip key={action.key} title={action.tooltip}>\n <span className={styles.cursor('pointer')} onClick={() => onMessagesActionsCallback?.(index, data)}>\n {action.icon}\n </span>\n </Tooltip>\n );\n })}\n </div>\n );\n\n // 消息底部区域\n const MessageFooter: React.FC<{ data: Messages; lastMessage: boolean }> = ({ data, lastMessage = false }) => (\n <>\n {messageTooltip?.(data)}\n <FooterActions data={data} lastMessage={lastMessage} />\n </>\n );\n\n // 聊天角色\n const rolesObject: GetProp<typeof Bubble.List, 'roles'> = {\n assistant: {\n placement: 'start',\n avatar: { icon: avatar || <UserOutlined className={clsx(styles.bg('#fde3cf'), styles.userAvatar)} /> },\n typing: { step: 5, interval: 20 },\n style: {\n maxWidth: 600,\n },\n classNames: {\n content: 'assistant-content',\n },\n },\n user: {\n placement: 'end',\n avatar: { icon: userAvatar || <UserOutlined className={clsx(styles.bg('#87d068'), styles.userAvatar)} /> },\n classNames: {\n content: 'user-content',\n },\n },\n suggestion: {\n placement: 'start',\n avatar: { icon: <UserOutlined />, style: { visibility: 'hidden' } },\n variant: 'borderless',\n },\n };\n\n // 触发发送\n const handleSend = (type: string, content: string) => {\n if (content.trim()) {\n // 直接使用合并后的 onSend，自动处理 Provider 和独立模式\n onSend?.(type, content);\n setContent(''); // 发送后清空输入框内容\n scrollToBottom();\n }\n };\n\n // 输出内容\n const handleChange = (content: string) => {\n setContent(content);\n }\n\n // 停止生成\n const handleStop = () => {\n onStop?.();\n }\n\n // 导航栏\n const NavBar: React.FC = () => {\n if (renderNavbar) {\n return renderNavbar();\n } if (navbar?.title) {\n return (\n <header className={styles.navbar}>\n {navbar.avatar && <img src={navbar.avatar} className={styles.avatar} alt=\"\" />}\n <div>\n <div className={styles.title}>{navbar.title}</div>\n <div className={styles.subtitle}>{navbar.subtitle}</div>\n </div>\n </header>\n );\n }\n return <></>;\n };\n\n // 确认清除\n const confirmClear = () => {\n onClear?.();\n };\n\n // 空状态\n const EmptyState = useMemo(() => () => (\n empty ? empty : <div className={styles.emptyWrapper}>\n <img src={emptyStateImage} alt=\"空状态图标\" className={styles.emptyImg} />\n <div className={clsx(styles.text(16), styles.weight(600), styles.textColor('#343434'))}>{emptyStateText}</div>\n </div>\n // eslint-disable-next-line react-hooks/exhaustive-deps\n ), [emptyStateImage, emptyStateText]);\n\n return (\n <>\n <GlobalStyle />\n <MarkdownGlobalStyle />\n <div id=\"x-ai-chatbot\" className={styles.wrapper}>\n { navbarShow && <NavBar /> }\n {/** 消息容器 */}\n <div className={styles.messageContainer}>\n {/* 消息列表主体 */}\n {\n messages?.length\n ? (\n <Bubble.List\n id={chatId}\n roles={rolesObject}\n className={styles.messageList}\n items={messages.map((msg: any) => {\n const { id, role, status, type, execute = [], thinks = '', extra = { noFooter: false } } = msg as Messages;\n const [expanded, setExpanded] = useState(false);\n const [executeExpanded, setExecuteExpanded] = useState(false);\n // 最后一条 AI消息标识\n if (role === MessageRole.assistant) {\n lastMessageId.current = id;\n }\n // 会话内容\n const bubbleContent: any = {\n key: id,\n role,\n loading: status === MessageStatus.init,\n header: (() => messageTop || \n <ActionHeader\n execute={execute}\n thinks={thinks}\n />),\n content: (() => {\n // 文本消息\n if (type === 'TextMessage') {\n // 用户消息\n if (role === 'user') {\n return (\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {msg.content?.text}\n </div>\n );\n }\n // 输出html字符串\n const html = md.render(msg.content?.text || '');\n // 生成React节点\n const htmlString = reactHtmlParser(html);\n return (\n <>\n <div\n className=\"markdown-body\"\n style={{\n minWidth: 0,\n maxWidth: 600,\n }}\n >\n {htmlString}\n </div>\n </>\n );\n }\n // 图片类型\n if (type === 'ImageMessage') {\n return (\n <div style={{ minWidth: 0, maxWidth: 600 }}>\n <img src={msg.content?.bytes} alt=\"\" style={{ maxWidth: 680 }} />\n </div>\n );\n }\n // 提示类型\n if (type === 'SuggestionMessage') {\n return (\n <Prompts\n vertical\n items={msg.content as any}\n onItemClick={(info) => {\n onSuggestMessageClick?.(info.data, id, 'text');\n if (info.data.description) {\n onSend?.('text', info.data.description as string);\n }\n }}\n />\n );\n }\n // 其他类型...\n return null;\n })(),\n };\n\n if (!extra.noFooter) {\n bubbleContent.footer = (() => {\n return (\n role === MessageRole.assistant && status !== MessageStatus.failed && (\n <>\n <MessageFooter data={msg as Messages} lastMessage={lastMessageId.current === id} />\n </>\n )\n );\n });\n }\n\n return bubbleContent;\n })}\n />\n )\n : (\n <EmptyState />\n )\n }\n </div>\n {/* 输入框 */}\n { inputShow && <XAiSender\n value={content}\n loading={loading}\n footerTips={footerTips}\n clearBtnShow={clearBtnShow}\n onChange={handleChange}\n onSubmit={handleSend}\n onStop={handleStop}\n onClear={confirmClear}\n /> }\n </div>\n </>\n );\n};\n\nexport default XAiChatbot;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MarkdownIt", "styles", "React", "thinkIcon", "arrowDown", "clsx", "arrowUp", "arrowDownBlue", "groupIcon", "_a", "emptyIcon", "content", "MarkdownGlobalStyle", "reactHtmlParser", "XAiSender"]
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ export declare const useStyles: () => {
|
|
|
7
7
|
title: string;
|
|
8
8
|
subtitle: string;
|
|
9
9
|
messageContainer: string;
|
|
10
|
+
messageList: string;
|
|
10
11
|
emptyWrapper: string;
|
|
11
12
|
emptyImg: string;
|
|
12
13
|
message: string;
|
|
@@ -16,14 +17,19 @@ export declare const useStyles: () => {
|
|
|
16
17
|
highlight: string;
|
|
17
18
|
inputBar: string;
|
|
18
19
|
input: string;
|
|
20
|
+
actionDetailContent: string;
|
|
19
21
|
actionHeaderWrapper: string;
|
|
20
|
-
actionHeaderItem: string;
|
|
21
22
|
actionHeaderIcon: string;
|
|
22
|
-
actionHeaderText: string;
|
|
23
23
|
actionHeaderDetail: string;
|
|
24
24
|
actionDetailTitle: string;
|
|
25
|
+
executeHeaderIcon: string;
|
|
26
|
+
actionTitle: string;
|
|
25
27
|
actionHeaderDetailItem: string;
|
|
26
28
|
actionHeaderCost: string;
|
|
29
|
+
executeHiddenWrapper: string;
|
|
30
|
+
executeTitle: string;
|
|
31
|
+
executeContent: string;
|
|
32
|
+
executeWrapper: string;
|
|
27
33
|
} & {
|
|
28
34
|
w: (width: string | number) => string;
|
|
29
35
|
h: (height: string | number) => string;
|
|
@@ -94,7 +94,7 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
94
94
|
messageContainer: import_css.css`
|
|
95
95
|
flex: 1;
|
|
96
96
|
overflow-y: auto;
|
|
97
|
-
padding: 16px;
|
|
97
|
+
padding: 16px 0;
|
|
98
98
|
// background-color: #fff;
|
|
99
99
|
display: flex;
|
|
100
100
|
flex-direction: column;
|
|
@@ -102,6 +102,9 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
102
102
|
min-height: 0;
|
|
103
103
|
position: relative;
|
|
104
104
|
`,
|
|
105
|
+
messageList: import_css.css`
|
|
106
|
+
padding: 0 16px;
|
|
107
|
+
`,
|
|
105
108
|
emptyWrapper: import_css.css`
|
|
106
109
|
height: 100%;
|
|
107
110
|
display: flex;
|
|
@@ -187,30 +190,23 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
187
190
|
box-shadow: 0 0 3px ${import_common.primaryBlue};
|
|
188
191
|
}
|
|
189
192
|
`,
|
|
190
|
-
|
|
193
|
+
actionDetailContent: import_css.css`
|
|
194
|
+
border-left: 1px solid #C1C3CD;
|
|
195
|
+
padding-right: 16px;
|
|
196
|
+
padding-left: 11px;
|
|
191
197
|
margin-bottom: 12px;
|
|
198
|
+
margin-left: 25px;
|
|
199
|
+
font-weight: 400;
|
|
200
|
+
font-size: 14px;
|
|
201
|
+
color: #767985;
|
|
202
|
+
line-height: 20px;
|
|
192
203
|
`,
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
align-items: center;
|
|
196
|
-
height: 40px;
|
|
197
|
-
box-sizing: border-box;
|
|
198
|
-
padding: 10px 16px;
|
|
199
|
-
margin-bottom: 8px;
|
|
200
|
-
background: #f7fafd;
|
|
201
|
-
cursor: pointer;
|
|
202
|
-
border-radius: 8px;
|
|
203
|
-
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
|
|
204
|
+
actionHeaderWrapper: import_css.css`
|
|
205
|
+
margin-bottom: 12px;
|
|
204
206
|
`,
|
|
205
207
|
actionHeaderIcon: import_css.css`
|
|
206
208
|
height: 14px;
|
|
207
|
-
|
|
208
|
-
actionHeaderText: import_css.css`
|
|
209
|
-
font-weight: 400;
|
|
210
|
-
font-size: 14px;
|
|
211
|
-
color: #3961F2;
|
|
212
|
-
margin-left: 10px;
|
|
213
|
-
margin-right: 6px;
|
|
209
|
+
margin-right: 5px;
|
|
214
210
|
`,
|
|
215
211
|
actionHeaderDetail: import_css.css`
|
|
216
212
|
background: #F3F5FA;
|
|
@@ -227,6 +223,22 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
227
223
|
margin-bottom: 12px;
|
|
228
224
|
cursor: pointer;
|
|
229
225
|
`,
|
|
226
|
+
executeHeaderIcon: import_css.css`
|
|
227
|
+
height: 12px;
|
|
228
|
+
padding-right: 10px !important;
|
|
229
|
+
`,
|
|
230
|
+
actionTitle: import_css.css`
|
|
231
|
+
display: flex;
|
|
232
|
+
align-items: center;
|
|
233
|
+
padding: 0 16px;
|
|
234
|
+
box-sizing: border-box;
|
|
235
|
+
background: #EDEFF5;
|
|
236
|
+
height: 32px;
|
|
237
|
+
margin-bottom: 12px;
|
|
238
|
+
cursor: pointer;
|
|
239
|
+
border-radius: 8px;
|
|
240
|
+
min-width: 200px;
|
|
241
|
+
`,
|
|
230
242
|
actionHeaderDetailItem: import_css.css`
|
|
231
243
|
display: flex;
|
|
232
244
|
align-items: center;
|
|
@@ -242,6 +254,38 @@ var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
|
242
254
|
font-size: 12px;
|
|
243
255
|
min-width: 32px;
|
|
244
256
|
text-align: right;
|
|
257
|
+
`,
|
|
258
|
+
executeHiddenWrapper: import_css.css`
|
|
259
|
+
background: #FFFFFF;
|
|
260
|
+
border-radius: 8px;
|
|
261
|
+
margin: 12px;
|
|
262
|
+
display: flex;
|
|
263
|
+
align-items: center;
|
|
264
|
+
gap: 8px;
|
|
265
|
+
height: 40px;
|
|
266
|
+
box-sizing: border-box;
|
|
267
|
+
padding: 0px 16px;
|
|
268
|
+
font-size: 14px;
|
|
269
|
+
margin-bottom: 12px;
|
|
270
|
+
color: #3961F2;
|
|
271
|
+
`,
|
|
272
|
+
executeTitle: import_css.css`
|
|
273
|
+
display: flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
padding: 6px 16px;
|
|
276
|
+
height: 40px;
|
|
277
|
+
box-sizing: border-box;
|
|
278
|
+
cursor: pointer;
|
|
279
|
+
`,
|
|
280
|
+
executeContent: import_css.css`
|
|
281
|
+
border-top: 1px solid rgba(0,0,0,0.08);
|
|
282
|
+
padding-top: 10px;
|
|
283
|
+
`,
|
|
284
|
+
executeWrapper: import_css.css`
|
|
285
|
+
background: #FFFFFF;
|
|
286
|
+
border-radius: 8px;
|
|
287
|
+
padding-bottom: 1px;
|
|
288
|
+
margin: 12px;
|
|
245
289
|
`
|
|
246
290
|
}));
|
|
247
291
|
var GlobalStyle = () => /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -285,7 +329,8 @@ var GlobalStyle = () => /* @__PURE__ */ import_react.default.createElement(
|
|
|
285
329
|
|
|
286
330
|
/* 助手消息气泡背景色 */
|
|
287
331
|
.ant-bubble .assistant-content {
|
|
288
|
-
background-color:
|
|
332
|
+
background-color: transparent;
|
|
333
|
+
padding: 0;
|
|
289
334
|
}
|
|
290
335
|
`
|
|
291
336
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiChatbot/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { css } from '@emotion/css';\nimport { css as globalCss, Global } from '@emotion/react';\nimport { withBasicStyles, primaryBlue, lightBlue, darkGray, lightGray, borderGray } from '@/styles/common';\n\nexport const useStyles = withBasicStyles(() => ({\n // 静态样式\n wrapper: css`\n display: flex;\n flex-direction: column;\n // max-height: 812px;\n min-height: 300px;\n max-width: 800px;\n width: 100%;\n height: 100%;\n min-width: 375px;\n // background-color: #fff;\n // border: 1px solid rgba(80,96,122,.15);\n border-radius: 12px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n `,\n\n navbar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-bottom: 1px solid ${borderGray};\n // background-color: #fff;\n `,\n\n userAvatar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n width: 32px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n `,\n\n avatar: css`\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n border: 1px solid ${borderGray};\n `,\n\n title: css`\n font-weight: 600;\n font-size: 16px;\n color: ${darkGray};\n `,\n\n subtitle: css`\n font-size: 12px;\n color: ${lightGray};\n margin-top: 2px;\n `,\n\n messageContainer: css`\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n // background-color: #fff;\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-height: 0;\n position: relative;\n `,\n\n emptyWrapper: css`\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: '#222';\n user-select: none;\n `,\n\n emptyImg: css`\n width: 60px;\n height: 60px;\n border-radius: 8px;\n margin-bottom: 16px;\n `,\n\n message: css`\n max-width: 70%;\n padding: 10px 14px;\n border-radius: 20px;\n background-color: ${lightBlue};\n color: ${darkGray};\n font-size: 14px;\n line-height: 1.4;\n word-break: break-word;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n\n messageRight: css`\n align-self: flex-end;\n background-color: ${primaryBlue};\n color: white;\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 20px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n `,\n\n quickReplies: css`\n display: flex;\n gap: 8px;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n overflow-x: auto;\n `,\n\n replyItem: css`\n padding: 6px 12px;\n font-size: 13px;\n border: 1px solid ${primaryBlue};\n border-radius: 20px;\n background-color: #fff;\n color: ${primaryBlue};\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: ${primaryBlue};\n color: #fff;\n }\n `,\n\n highlight: css`\n background-color: ${primaryBlue};\n color: white;\n border-color: ${primaryBlue};\n `,\n\n inputBar: css`\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n `,\n\n input: css`\n flex: 1;\n padding: 8px 12px;\n border: 1px solid ${borderGray};\n border-radius: 20px;\n font-size: 14px;\n outline: none;\n \n &:focus {\n border-color: ${primaryBlue};\n box-shadow: 0 0 3px ${primaryBlue};\n }\n `,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,iBAAoB;AACpB,IAAAA,gBAAyC;AACzC,oBAA0F;AAEnF,IAAM,gBAAY,+BAAgB,OAAO;AAAA;AAAA,EAE9C,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBT,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKqB;AAAA;AAAA;AAAA,EAI7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMc;AAAA;AAAA,EAGtB,OAAO;AAAA;AAAA;AAAA,aAGI;AAAA;AAAA,EAGX,UAAU;AAAA;AAAA,aAEC;AAAA;AAAA;AAAA,EAIX,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYlB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,SAAS;AAAA;AAAA;AAAA;AAAA,wBAIa;AAAA,aACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOX,cAAc;AAAA;AAAA,wBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtB,cAAc;AAAA;AAAA;AAAA;AAAA,4BAIY;AAAA;AAAA;AAAA;AAAA,EAK1B,WAAW;AAAA;AAAA;AAAA,wBAGW;AAAA;AAAA;AAAA,aAGX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOa;AAAA;AAAA;AAAA;AAAA,EAKxB,WAAW;AAAA,wBACW;AAAA;AAAA,oBAEJ;AAAA;AAAA,EAGlB,UAAU;AAAA;AAAA;AAAA;AAAA,4BAIgB;AAAA;AAAA;AAAA,EAI1B,OAAO;AAAA;AAAA;AAAA,wBAGe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMF;AAAA,4BACM;AAAA;AAAA;AAAA,EAG1B,qBAAqB;AAAA;AAAA;AAAA,EAGrB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { css } from '@emotion/css';\nimport { css as globalCss, Global } from '@emotion/react';\nimport { withBasicStyles, primaryBlue, lightBlue, darkGray, lightGray, borderGray } from '@/styles/common';\n\nexport const useStyles = withBasicStyles(() => ({\n // 静态样式\n wrapper: css`\n display: flex;\n flex-direction: column;\n // max-height: 812px;\n min-height: 300px;\n max-width: 800px;\n width: 100%;\n height: 100%;\n min-width: 375px;\n // background-color: #fff;\n // border: 1px solid rgba(80,96,122,.15);\n border-radius: 12px;\n overflow: hidden;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n `,\n\n navbar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-bottom: 1px solid ${borderGray};\n // background-color: #fff;\n `,\n\n userAvatar: css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n width: 32px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n `,\n\n avatar: css`\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 12px;\n border: 1px solid ${borderGray};\n `,\n\n title: css`\n font-weight: 600;\n font-size: 16px;\n color: ${darkGray};\n `,\n\n subtitle: css`\n font-size: 12px;\n color: ${lightGray};\n margin-top: 2px;\n `,\n\n messageContainer: css`\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n // background-color: #fff;\n display: flex;\n flex-direction: column;\n gap: 10px;\n min-height: 0;\n position: relative;\n `,\n\n messageList: css`\n padding: 0 16px;\n `,\n\n emptyWrapper: css`\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: '#222';\n user-select: none;\n `,\n\n emptyImg: css`\n width: 60px;\n height: 60px;\n border-radius: 8px;\n margin-bottom: 16px;\n `,\n\n message: css`\n max-width: 70%;\n padding: 10px 14px;\n border-radius: 20px;\n background-color: ${lightBlue};\n color: ${darkGray};\n font-size: 14px;\n line-height: 1.4;\n word-break: break-word;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n\n messageRight: css`\n align-self: flex-end;\n background-color: ${primaryBlue};\n color: white;\n border-bottom-right-radius: 4px;\n border-bottom-left-radius: 20px;\n border-top-left-radius: 20px;\n border-top-right-radius: 20px;\n `,\n\n quickReplies: css`\n display: flex;\n gap: 8px;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n overflow-x: auto;\n `,\n\n replyItem: css`\n padding: 6px 12px;\n font-size: 13px;\n border: 1px solid ${primaryBlue};\n border-radius: 20px;\n background-color: #fff;\n color: ${primaryBlue};\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: ${primaryBlue};\n color: #fff;\n }\n `,\n\n highlight: css`\n background-color: ${primaryBlue};\n color: white;\n border-color: ${primaryBlue};\n `,\n\n inputBar: css`\n display: flex;\n align-items: center;\n padding: 10px 16px;\n border-top: 1px solid ${borderGray};\n background-color: #fff;\n `,\n\n input: css`\n flex: 1;\n padding: 8px 12px;\n border: 1px solid ${borderGray};\n border-radius: 20px;\n font-size: 14px;\n outline: none;\n \n &:focus {\n border-color: ${primaryBlue};\n box-shadow: 0 0 3px ${primaryBlue};\n }\n `,\n actionDetailContent: css`\n border-left: 1px solid #C1C3CD;\n padding-right: 16px;\n padding-left: 11px;\n margin-bottom: 12px;\n margin-left: 25px;\n font-weight: 400;\n font-size: 14px;\n color: #767985;\n line-height: 20px;\n `,\n actionHeaderWrapper: css`\n margin-bottom: 12px;\n `,\n actionHeaderIcon: css`\n height: 14px;\n margin-right: 5px;\n `,\n actionHeaderDetail: css`\n background: #F3F5FA;\n border-radius: 8px;\n overflow: hidden;\n `,\n actionDetailTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n `,\n executeHeaderIcon: css`\n height: 12px;\n padding-right: 10px !important;\n `,\n actionTitle: css`\n display: flex;\n align-items: center;\n padding: 0 16px;\n box-sizing: border-box;\n background: #EDEFF5;\n height: 32px;\n margin-bottom: 12px;\n cursor: pointer;\n border-radius: 8px;\n min-width: 200px;\n `,\n actionHeaderDetailItem: css`\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n padding: 0 16px;\n margin-bottom: 12px;\n color: #949494;\n `,\n actionHeaderCost: css`\n margin-left: auto;\n color: #888;\n font-size: 12px;\n min-width: 32px;\n text-align: right;\n `,\n executeHiddenWrapper: css`\n background: #FFFFFF;\n border-radius: 8px;\n margin: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n height: 40px;\n box-sizing: border-box;\n padding: 0px 16px;\n font-size: 14px;\n margin-bottom: 12px;\n color: #3961F2;\n `,\n executeTitle: css`\n display: flex;\n align-items: center;\n padding: 6px 16px;\n height: 40px;\n box-sizing: border-box;\n cursor: pointer;\n `,\n executeContent: css`\n border-top: 1px solid rgba(0,0,0,0.08);\n padding-top: 10px;\n `,\n executeWrapper: css`\n background: #FFFFFF;\n border-radius: 8px;\n padding-bottom: 1px;\n margin: 12px;\n `,\n}));\n\nexport const GlobalStyle: React.FC = () => (\n <Global\n styles={globalCss`\n .ant-bubble-footer {\n display: flex;\n align-items: center;\n min-width: 0,\n max-width: 600,\n /* 你想覆盖的其他样式 */\n }\n\n .ant-sender-content {\n textarea {\n word-break: break-all;\n }\n }\n\n .ant-avatar {\n background-color: transparent;\n }\n\n .ant-sender-actions-list {\n margin-left: -40px;\n }\n\n .ant-sender {\n box-shadow: none !important;\n }\n\n .ant-prompts-item {\n padding-block: 8px !important;\n }\n\n /* 用户消息气泡背景色 */\n .ant-bubble .user-content {\n background-color: #D8E0FD;\n }\n\n /* 助手消息气泡背景色 */\n .ant-bubble .assistant-content {\n background-color: transparent;\n padding: 0;\n }\n `}\n />\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React", "globalCss"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ var import_antd = require("antd");
|
|
|
39
39
|
var import_useProviderContext = require("../../hooks/useProviderContext");
|
|
40
40
|
var import_logo = __toESM(require("../../assets/logo.png"));
|
|
41
41
|
var import_AddChatIcon = __toESM(require("../../assets/svg/AddChatIcon"));
|
|
42
|
-
var import_flash_open = __toESM(require("../../assets/flash-open.svg"));
|
|
42
|
+
var import_flash_open = __toESM(require("../../assets/flash-open.svg?url"));
|
|
43
43
|
var import_react_infinite_scroll_component = __toESM(require("react-infinite-scroll-component"));
|
|
44
44
|
var import_constants = require("../../constants");
|
|
45
45
|
var import_clsx = __toESM(require("clsx"));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/XAiConversations/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from 'react';\nimport { Conversations } from '@ant-design/x';\nimport { RedoOutlined } from '@ant-design/icons';\nimport { Spin, Divider } from 'antd';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { type XAiConversationsProps } from '@/types/XAiConversations';\nimport logo from '@/assets/logo.png';\nimport AddChatIcon from '@/assets/svg/AddChatIcon';\nimport flashOpen from '@/assets/flash-open.svg';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { SESSION_PAGE_SIZE } from '@/constants';\nimport clsx from 'clsx';\nimport { useStyles, GlobalStyle } from './styles';\n\nconst XAiConversations: React.FC<XAiConversationsProps> = (props) => {\n const styles = useStyles();\n const { mergedProps } = useChatbotContext(props);\n const {\n isNarrow = false,\n sessionList,\n style,\n onActiveChange,\n onNewChat,\n loadMoreSessions,\n activeKey,\n menu,\n } = mergedProps;\n\n const [listVisible, setListVisible] = useState(false);\n const [animateDirection, setAnimateDirection] = useState<'in' | 'out' | null>(null);\n\n const handleSwitchTab = (key: string) => {\n onActiveChange?.(key);\n };\n\n const handleNewChat = () => {\n onNewChat?.();\n };\n\n const handleShowList = () => {\n setListVisible(true);\n setAnimateDirection('in');\n };\n\n const handleCloseList = () => {\n setAnimateDirection('out');\n setTimeout(() => {\n setListVisible(false);\n setAnimateDirection(null);\n }, 300);\n };\n\n return (\n <div>\n <GlobalStyle />\n {/**顶部操作栏 */}\n {\n (!listVisible || isNarrow) && (\n <div className={styles.capWrapper}>\n <img alt=\"logo\" src={logo} className={clsx(styles.w(32), styles.h(29))}/>\n <div className={styles.capShape}>\n <div className={styles.capIcon}>\n <img src={flashOpen} alt=\"\" onClick={handleShowList} />\n </div>\n <div className={styles.capIcon}>\n <AddChatIcon className={clsx(styles.w(17), styles.text('#343434'))} onClick={handleNewChat} />\n </div>\n </div>\n </div>\n )\n }\n\n {/* 会话列表 */}\n <div\n style={{ display: listVisible ? 'block' : 'none' }}\n className={clsx(\n isNarrow ? styles.nWrapper : styles.fWrapper,\n animateDirection === 'in' && styles.slideIn,\n animateDirection === 'out' && styles.slideOut\n )}\n >\n {/* 固定头部 */}\n <div className={styles.fheaderWrapper}>\n <img alt=\"logo\" src={logo} className={clsx(styles.w(32), styles.h(29))}/>\n <div className={styles.capIcon}>\n <img src={flashOpen} alt=\"\" onClick={handleCloseList} />\n </div>\n </div>\n <div className={styles.addChatBtn} onClick={handleNewChat}>\n <AddChatIcon className={clsx(styles.w(17), styles.mr(10))} />\n 开启新对话\n </div>\n <div className={styles.tipTitle}>历史对话</div>\n\n {/* 滚动区域 */}\n <div className={styles.scrollList}>\n <InfiniteScroll\n dataLength={sessionList.length}\n next={loadMoreSessions}\n hasMore={false}\n loader={\n <div style={{ textAlign: 'center' }}>\n <Spin indicator={<RedoOutlined spin />} size=\"small\" />\n </div>\n }\n endMessage={sessionList.length === SESSION_PAGE_SIZE && <Divider plain><span className={styles.textColor('#949494')}>只展示前 50 条数据</span></Divider>}\n style={{ overflow: 'hidden', paddingBottom: '5px' }}\n >\n <Conversations\n activeKey={activeKey}\n onActiveChange={(v) => handleSwitchTab(v)}\n items={sessionList}\n menu={menu}\n style={{\n width: 256,\n borderRadius: '6px',\n ...style,\n }}\n />\n </InfiniteScroll>\n </div>\n </div>\n\n {/* 遮罩层 - 仅在窄屏且列表可见时显示 */}\n {isNarrow && listVisible && (\n <div className={styles.mask} onClick={handleCloseList} />\n )}\n </div>\n );\n};\n\nexport default XAiConversations;\n"],
|
|
4
|
+
"sourcesContent": ["import React, { useState } from 'react';\nimport { Conversations } from '@ant-design/x';\nimport { RedoOutlined } from '@ant-design/icons';\nimport { Spin, Divider } from 'antd';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport { type XAiConversationsProps } from '@/types/XAiConversations';\nimport logo from '@/assets/logo.png';\nimport AddChatIcon from '@/assets/svg/AddChatIcon';\nimport flashOpen from '@/assets/flash-open.svg?url';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { SESSION_PAGE_SIZE } from '@/constants';\nimport clsx from 'clsx';\nimport { useStyles, GlobalStyle } from './styles';\n\nconst XAiConversations: React.FC<XAiConversationsProps> = (props) => {\n const styles = useStyles();\n const { mergedProps } = useChatbotContext(props);\n const {\n isNarrow = false,\n sessionList,\n style,\n onActiveChange,\n onNewChat,\n loadMoreSessions,\n activeKey,\n menu,\n } = mergedProps;\n\n const [listVisible, setListVisible] = useState(false);\n const [animateDirection, setAnimateDirection] = useState<'in' | 'out' | null>(null);\n\n const handleSwitchTab = (key: string) => {\n onActiveChange?.(key);\n };\n\n const handleNewChat = () => {\n onNewChat?.();\n };\n\n const handleShowList = () => {\n setListVisible(true);\n setAnimateDirection('in');\n };\n\n const handleCloseList = () => {\n setAnimateDirection('out');\n setTimeout(() => {\n setListVisible(false);\n setAnimateDirection(null);\n }, 300);\n };\n\n return (\n <div>\n <GlobalStyle />\n {/**顶部操作栏 */}\n {\n (!listVisible || isNarrow) && (\n <div className={styles.capWrapper}>\n <img alt=\"logo\" src={logo} className={clsx(styles.w(32), styles.h(29))}/>\n <div className={styles.capShape}>\n <div className={styles.capIcon}>\n <img src={flashOpen} alt=\"\" onClick={handleShowList} />\n </div>\n <div className={styles.capIcon}>\n <AddChatIcon className={clsx(styles.w(17), styles.text('#343434'))} onClick={handleNewChat} />\n </div>\n </div>\n </div>\n )\n }\n\n {/* 会话列表 */}\n <div\n style={{ display: listVisible ? 'block' : 'none' }}\n className={clsx(\n isNarrow ? styles.nWrapper : styles.fWrapper,\n animateDirection === 'in' && styles.slideIn,\n animateDirection === 'out' && styles.slideOut\n )}\n >\n {/* 固定头部 */}\n <div className={styles.fheaderWrapper}>\n <img alt=\"logo\" src={logo} className={clsx(styles.w(32), styles.h(29))}/>\n <div className={styles.capIcon}>\n <img src={flashOpen} alt=\"\" onClick={handleCloseList} />\n </div>\n </div>\n <div className={styles.addChatBtn} onClick={handleNewChat}>\n <AddChatIcon className={clsx(styles.w(17), styles.mr(10))} />\n 开启新对话\n </div>\n <div className={styles.tipTitle}>历史对话</div>\n\n {/* 滚动区域 */}\n <div className={styles.scrollList}>\n <InfiniteScroll\n dataLength={sessionList.length}\n next={loadMoreSessions}\n hasMore={false}\n loader={\n <div style={{ textAlign: 'center' }}>\n <Spin indicator={<RedoOutlined spin />} size=\"small\" />\n </div>\n }\n endMessage={sessionList.length === SESSION_PAGE_SIZE && <Divider plain><span className={styles.textColor('#949494')}>只展示前 50 条数据</span></Divider>}\n style={{ overflow: 'hidden', paddingBottom: '5px' }}\n >\n <Conversations\n activeKey={activeKey}\n onActiveChange={(v) => handleSwitchTab(v)}\n items={sessionList}\n menu={menu}\n style={{\n width: 256,\n borderRadius: '6px',\n ...style,\n }}\n />\n </InfiniteScroll>\n </div>\n </div>\n\n {/* 遮罩层 - 仅在窄屏且列表可见时显示 */}\n {isNarrow && listVisible && (\n <div className={styles.mask} onClick={handleCloseList} />\n )}\n </div>\n );\n};\n\nexport default XAiConversations;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React", "logo", "clsx", "flashOpen", "AddChatIcon", "InfiniteScroll"]
|
|
7
7
|
}
|
|
@@ -190,7 +190,7 @@ var useAgentGenerator = ({
|
|
|
190
190
|
createdAt: /* @__PURE__ */ new Date(),
|
|
191
191
|
role: import_XAiMessage.MessageRole.assistant,
|
|
192
192
|
content: { text: "" },
|
|
193
|
-
|
|
193
|
+
execute: [],
|
|
194
194
|
status: import_XAiMessage.MessageStatus.init
|
|
195
195
|
};
|
|
196
196
|
newMessages.push(aiMsg);
|
|
@@ -204,8 +204,8 @@ var useAgentGenerator = ({
|
|
|
204
204
|
}
|
|
205
205
|
switch (action) {
|
|
206
206
|
case "RECALL_KNOWLEDGE_START" /* recallKnowledgeStart */:
|
|
207
|
-
aiMsg.
|
|
208
|
-
aiMsg.
|
|
207
|
+
aiMsg.execute = aiMsg.execute || [];
|
|
208
|
+
aiMsg.execute.push({
|
|
209
209
|
id: uniqueId,
|
|
210
210
|
createdAt: /* @__PURE__ */ new Date(),
|
|
211
211
|
type: "ActionExecutionMessage",
|
|
@@ -219,15 +219,15 @@ var useAgentGenerator = ({
|
|
|
219
219
|
});
|
|
220
220
|
break;
|
|
221
221
|
case "RECALL_KNOWLEDGE_END" /* recallKnowledgeEnd */: {
|
|
222
|
-
const recallKnowledgeMsg = (_a = aiMsg.
|
|
222
|
+
const recallKnowledgeMsg = (_a = aiMsg.execute) == null ? void 0 : _a.find((item) => item.id === uniqueId);
|
|
223
223
|
if (recallKnowledgeMsg) {
|
|
224
224
|
recallKnowledgeMsg.extra.cost = (data == null ? void 0 : data.cost) ? ((data == null ? void 0 : data.cost) / 1e3).toFixed(2) : 0;
|
|
225
225
|
}
|
|
226
226
|
break;
|
|
227
227
|
}
|
|
228
228
|
case "INVOKE_AGENT_TOOL_START" /* invokeToolStart */:
|
|
229
|
-
aiMsg.
|
|
230
|
-
aiMsg.
|
|
229
|
+
aiMsg.execute = aiMsg.execute || [];
|
|
230
|
+
aiMsg.execute.push({
|
|
231
231
|
id: uniqueId,
|
|
232
232
|
createdAt: /* @__PURE__ */ new Date(),
|
|
233
233
|
type: "ActionExecutionMessage",
|
|
@@ -241,7 +241,7 @@ var useAgentGenerator = ({
|
|
|
241
241
|
});
|
|
242
242
|
break;
|
|
243
243
|
case "INVOKE_AGENT_TOOL_END" /* invokeToolEnd */: {
|
|
244
|
-
const invokeToolMsg = (_b = aiMsg.
|
|
244
|
+
const invokeToolMsg = (_b = aiMsg.execute) == null ? void 0 : _b.find((item) => item.id === uniqueId);
|
|
245
245
|
if (invokeToolMsg) {
|
|
246
246
|
invokeToolMsg.extra.cost = (data == null ? void 0 : data.cost) ? ((data == null ? void 0 : data.cost) / 1e3).toFixed(2) : 0;
|
|
247
247
|
}
|
|
@@ -466,7 +466,7 @@ var useAgentGenerator = ({
|
|
|
466
466
|
createdAt: messageTime,
|
|
467
467
|
role: import_XAiMessage.MessageRole.assistant,
|
|
468
468
|
content: { text: content },
|
|
469
|
-
|
|
469
|
+
execute: [],
|
|
470
470
|
status: import_XAiMessage.MessageStatus.done
|
|
471
471
|
};
|
|
472
472
|
initMessagesList.push(newMessage);
|