@ai-group/chat-sdk 3.5.5 → 3.5.7

package/dist/esm/components/XAiChatbot/index.js

@@ -0,0 +1,588 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+// 文件: components/XAiChatbot/index.tsx
+
+import React, { useRef, useState, useMemo } from "react";
+import { Tooltip, Flex } from "antd";
+import { Bubble, Prompts, FileCard } from "@ant-design/x";
+import { UserOutlined, RedoOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
+import clsx from "clsx";
+import MarkdownIt from "markdown-it";
+import reactHtmlParser from "react-html-parser";
+import MarkdownGlobalStyle from "../../styles/markdown";
+import { MessageStatus, MessageRole } from "../../types/XAiMessage";
+import emptyIcon from "../../assets/empty.png";
+import arrowUp from "../../assets/arrow-up.png";
+import arrowDown from "../../assets/arrow-down.png";
+import thinkIcon from "../../assets/think.png";
+import groupIcon from "../../assets/group.png";
+import arrowDownBlue from "../../assets/arrow-down-blue.png";
+import { useChatbotContext } from "../../hooks/useProviderContext";
+import { useStyles, GlobalStyle } from "./styles";
+import XAiSender from "../XAiSender";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+
+// 自定义 link_open 渲染规则
+var defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
+  return self.renderToken(tokens, idx, options);
+};
+
+// a 标签打开规则
+md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+  // 添加 target="_blank"
+  var aIndex = tokens[idx].attrIndex("target");
+  if (aIndex < 0) {
+    tokens[idx].attrPush(["target", "_blank"]);
+  } else {
+    tokens[idx].attrs[aIndex][1] = "_blank";
+  }
+  // 添加 rel="noopener noreferrer"
+  var relIndex = tokens[idx].attrIndex("rel");
+  if (relIndex < 0) {
+    tokens[idx].attrPush(["rel", "noopener noreferrer"]);
+  } else {
+    tokens[idx].attrs[relIndex][1] = "noopener noreferrer";
+  }
+  return defaultRender(tokens, idx, options, env, self);
+};
+// ActionHeader 组件
+export var ActionHeader = function ActionHeader(_ref) {
+  var _last$extra;
+  var _ref$execute = _ref.execute,
+    execute = _ref$execute === void 0 ? [] : _ref$execute,
+    _ref$thinks = _ref.thinks,
+    thinks = _ref$thinks === void 0 ? "" : _ref$thinks;
+  var styles = useStyles();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    executeExpanded = _useState4[0],
+    setExecuteExpanded = _useState4[1];
+
+  // 关键修复：只要有思考内容或执行过程就显示，不要同时要求两者都有
+  if (!thinks && (!execute || execute.length === 0)) return null;
+  var last = execute[execute.length - 1] || {};
+  var name = last.name;
+  var icon = (last === null || last === void 0 ? void 0 : last.icon) || (last === null || last === void 0 || (_last$extra = last.extra) === null || _last$extra === void 0 ? void 0 : _last$extra.icon);
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.actionHeaderWrapper,
+    children: [!expanded && /*#__PURE__*/_jsxs("div", {
+      className: styles.actionTitle,
+      onClick: function onClick() {
+        return setExpanded(function (v) {
+          return !v;
+        });
+      },
+      children: [/*#__PURE__*/_jsx("img", {
+        src: thinkIcon,
+        alt: "icon",
+        className: styles.actionHeaderIcon
+      }), /*#__PURE__*/_jsx("span", {
+        className: styles.flex1,
+        children: "\u8FD0\u884C\u8FC7\u7A0B"
+      }), /*#__PURE__*/_jsx("img", {
+        alt: "\u5C55\u5F00icon",
+        src: arrowDown,
+        className: styles.w("16px")
+      })]
+    }), expanded && /*#__PURE__*/_jsxs("div", {
+      className: styles.actionHeaderDetail,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.actionDetailTitle,
+        onClick: function onClick() {
+          return setExpanded(function (v) {
+            return !v;
+          });
+        },
+        children: [/*#__PURE__*/_jsx("img", {
+          src: thinkIcon,
+          alt: "",
+          className: clsx(styles.w(14))
+        }), /*#__PURE__*/_jsx("div", {
+          className: clsx(styles.flex1, styles.pl(10)),
+          children: "\u9690\u85CF\u8FD0\u884C\u8FC7\u7A0B"
+        }), /*#__PURE__*/_jsx("img", {
+          alt: "\u6536\u8D77icon",
+          src: arrowUp,
+          className: styles.w("16px")
+        })]
+      }), thinks && /*#__PURE__*/_jsx("div", {
+        className: styles.actionDetailContent,
+        style: {
+          whiteSpace: "pre-line"
+        },
+        children: thinks
+      }), execute && execute.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!executeExpanded && /*#__PURE__*/_jsxs("div", {
+          className: styles.executeHiddenWrapper,
+          onClick: function onClick() {
+            return setExecuteExpanded(function (v) {
+              return !v;
+            });
+          },
+          children: [icon && /*#__PURE__*/_jsx("img", {
+            src: icon,
+            alt: "icon",
+            className: styles.h(15)
+          }), /*#__PURE__*/_jsx("span", {
+            className: styles.flex1,
+            children: name
+          }), /*#__PURE__*/_jsx("img", {
+            alt: "\u5DE5\u5177icon",
+            src: arrowDownBlue,
+            className: styles.w("16px")
+          })]
+        }), executeExpanded && /*#__PURE__*/_jsxs("div", {
+          className: styles.executeWrapper,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: styles.executeTitle,
+            onClick: function onClick() {
+              return setExecuteExpanded(function (v) {
+                return !v;
+              });
+            },
+            children: [/*#__PURE__*/_jsx("img", {
+              src: groupIcon,
+              alt: "icon",
+              className: styles.executeHeaderIcon
+            }), /*#__PURE__*/_jsx("span", {
+              className: styles.flex1,
+              children: "\u9690\u85CF\u8FD0\u884C\u8BE6\u60C5"
+            }), /*#__PURE__*/_jsx("img", {
+              alt: "\u5C55\u5F00\u8BE6\u60C5icon",
+              src: arrowUp,
+              className: styles.w("16px")
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.executeContent,
+            children: execute.map(function (action, idx) {
+              var _action$extra, _action$extra2, _action$extra3;
+              var thinkIcon2 = (action === null || action === void 0 ? void 0 : action.expandIcon) || (action === null || action === void 0 || (_action$extra = action.extra) === null || _action$extra === void 0 ? void 0 : _action$extra.expandIcon) || (action === null || action === void 0 || (_action$extra2 = action.extra) === null || _action$extra2 === void 0 ? void 0 : _action$extra2.icon) || (action === null || action === void 0 ? void 0 : action.icon);
+              var thinkCost = (action === null || action === void 0 ? void 0 : action.cost) || (action === null || action === void 0 || (_action$extra3 = action.extra) === null || _action$extra3 === void 0 ? void 0 : _action$extra3.cost);
+              return /*#__PURE__*/_jsxs("div", {
+                className: styles.actionHeaderDetailItem,
+                children: [thinkIcon2 && /*#__PURE__*/_jsx("img", {
+                  src: thinkIcon2,
+                  alt: "icon",
+                  className: styles.actionHeaderIcon
+                }), /*#__PURE__*/_jsx("span", {
+                  children: action === null || action === void 0 ? void 0 : action.name
+                }), /*#__PURE__*/_jsx("span", {
+                  className: styles.actionHeaderCost,
+                  children: thinkCost ? "".concat(thinkCost, "s") : ""
+                })]
+              }, action.uniqueId || idx);
+            })
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
+// 默认消息功能区
+export var defaultActions = [{
+  key: "redo",
+  icon: /*#__PURE__*/_jsx(RedoOutlined, {}),
+  tooltip: "重新生成"
+}, {
+  key: "copy",
+  icon: /*#__PURE__*/_jsx(CopyOutlined, {}),
+  tooltip: "复制"
+}, {
+  key: "delete",
+  icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
+  tooltip: "删除"
+}];
+var XAiChatbot = function XAiChatbot(props) {
+  var styles = useStyles();
+  // 使用新的 Hook 来处理 Provider 上下文
+  var _useChatbotContext = useChatbotContext(props),
+    mergedProps = _useChatbotContext.mergedProps;
+  var _ref2 = mergedProps,
+    _ref2$navbarShow = _ref2.navbarShow,
+    navbarShow = _ref2$navbarShow === void 0 ? false : _ref2$navbarShow,
+    navbar = _ref2.navbar,
+    _ref2$renderNavbar = _ref2.renderNavbar,
+    renderNavbar = _ref2$renderNavbar === void 0 ? null : _ref2$renderNavbar,
+    _ref2$clearBtnShow = _ref2.clearBtnShow,
+    clearBtnShow = _ref2$clearBtnShow === void 0 ? true : _ref2$clearBtnShow,
+    _ref2$inputShow = _ref2.inputShow,
+    inputShow = _ref2$inputShow === void 0 ? true : _ref2$inputShow,
+    _ref2$loading = _ref2.loading,
+    propLoading = _ref2$loading === void 0 ? false : _ref2$loading,
+    messageTooltip = _ref2.messageTooltip,
+    _avatar = _ref2.avatar,
+    userAvatar = _ref2.userAvatar,
+    propMessages = _ref2.messages,
+    _ref2$text = _ref2.text,
+    text = _ref2$text === void 0 ? "" : _ref2$text,
+    _ref2$footerTips = _ref2.footerTips,
+    footerTips = _ref2$footerTips === void 0 ? "" : _ref2$footerTips,
+    _ref2$empty = _ref2.empty,
+    empty = _ref2$empty === void 0 ? null : _ref2$empty,
+    _ref2$emptyStateImage = _ref2.emptyStateImage,
+    emptyStateImage = _ref2$emptyStateImage === void 0 ? emptyIcon : _ref2$emptyStateImage,
+    _ref2$emptyStateText = _ref2.emptyStateText,
+    emptyStateText = _ref2$emptyStateText === void 0 ? "我的智能体" : _ref2$emptyStateText,
+    _ref2$messageActions = _ref2.messageActions,
+    messageActions = _ref2$messageActions === void 0 ? defaultActions : _ref2$messageActions,
+    onMessagesActionsCallback = _ref2.onMessagesActionsCallback,
+    onSuggestMessageClick = _ref2.onSuggestMessageClick,
+    onSend = _ref2.onSend,
+    onClear = _ref2.onClear,
+    onStop = _ref2.onStop,
+    providerId = _ref2.providerId,
+    messageTop = _ref2.messageTop,
+    enableUpload = _ref2.enableUpload,
+    uploadRequest = _ref2.uploadRequest;
+
+  // 如果在 Provider 中，使用 Provider 的状态
+  var messages = mergedProps.messages || propMessages || [];
+  var loading = mergedProps.loading || propLoading;
+  var _useState5 = useState(text),
+    _useState6 = _slicedToArray(_useState5, 2),
+    content = _useState6[0],
+    setContent = _useState6[1]; // 输入框文本
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    files = _useState8[0],
+    setFiles = _useState8[1];
+  var lastMessageId = useRef("");
+  var isScriptScrolling = useRef(false);
+  var chatId = providerId ? "za-chatbot-container-".concat(providerId) : "za-chatbot-container";
+
+  // 滚动到最底部
+  var scrollToBottom = function scrollToBottom() {
+    isScriptScrolling.current = true;
+    setTimeout(function () {
+      var mainChatWrapper = document.getElementById(chatId);
+      if (mainChatWrapper) {
+        mainChatWrapper.scrollTop = mainChatWrapper === null || mainChatWrapper === void 0 ? void 0 : mainChatWrapper.scrollHeight;
+      }
+      isScriptScrolling.current = false;
+    }, 0);
+  };
+
+  // 消息功能区组件
+  var FooterActions = function FooterActions(_ref3) {
+    var data = _ref3.data,
+      _ref3$lastMessage = _ref3.lastMessage,
+      lastMessage = _ref3$lastMessage === void 0 ? false : _ref3$lastMessage;
+    return /*#__PURE__*/_jsx("div", {
+      className: clsx(styles.flex, styles.gap(13)),
+      children: messageActions.map(function (action, index) {
+        var _action$render;
+        if (!lastMessage && action.key === "redo") return null;
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: action.tooltip,
+          children: /*#__PURE__*/_jsxs("span", {
+            className: styles.cursor("pointer"),
+            onClick: function onClick() {
+              return onMessagesActionsCallback === null || onMessagesActionsCallback === void 0 ? void 0 : onMessagesActionsCallback(index, data);
+            },
+            children: [action.icon, (_action$render = action.render) === null || _action$render === void 0 ? void 0 : _action$render.call(action, index, data)]
+          })
+        }, action.key);
+      })
+    });
+  };
+
+  // 消息底部区域
+  var MessageFooter = function MessageFooter(_ref4) {
+    var data = _ref4.data,
+      _ref4$lastMessage = _ref4.lastMessage,
+      lastMessage = _ref4$lastMessage === void 0 ? false : _ref4$lastMessage;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [messageTooltip === null || messageTooltip === void 0 ? void 0 : messageTooltip(data), /*#__PURE__*/_jsx(FooterActions, {
+        data: data,
+        lastMessage: lastMessage
+      })]
+    });
+  };
+
+  // 聊天角色
+  var rolesObject = {
+    assistant: {
+      placement: "start",
+      avatar: function avatar() {
+        return _avatar || /*#__PURE__*/_jsx(UserOutlined, {
+          className: clsx(styles.bg("#fde3cf"), styles.userAvatar)
+        });
+      },
+      typing: {
+        step: 5,
+        interval: 20,
+        effect: "typing"
+      },
+      style: {
+        maxWidth: 600
+      },
+      classNames: {
+        content: "assistant-content"
+      }
+    },
+    user: {
+      placement: "end",
+      avatar: function avatar() {
+        return userAvatar || /*#__PURE__*/_jsx(UserOutlined, {
+          className: clsx(styles.bg("#87d068"), styles.userAvatar)
+        });
+      },
+      classNames: {
+        content: "user-content"
+      }
+    },
+    suggestion: {
+      placement: "start",
+      avatar: function avatar() {
+        return _avatar || /*#__PURE__*/_jsx(UserOutlined, {
+          className: clsx(styles.bg("#fde3cf"), styles.userAvatar)
+        });
+      },
+      variant: "borderless"
+    }
+  };
+
+  // 触发发送
+  var handleSend = function handleSend(obj) {
+    // 直接使用合并后的 onSend，自动处理 Provider 和独立模式
+    onSend === null || onSend === void 0 || onSend(obj);
+    setContent(""); // 发送后清空输入框内容
+    setFiles([]); // 发送后清空文件
+    scrollToBottom();
+  };
+
+  // 输出内容
+  var handleChange = function handleChange(str) {
+    setContent(str);
+  };
+
+  // 停止生成
+  var handleStop = function handleStop() {
+    onStop === null || onStop === void 0 || onStop();
+  };
+
+  // 导航栏
+  var NavBar = function NavBar() {
+    if (renderNavbar) {
+      return renderNavbar();
+    }
+    if (navbar !== null && navbar !== void 0 && navbar.title) {
+      return /*#__PURE__*/_jsxs("header", {
+        className: styles.navbar,
+        children: [navbar.avatar && /*#__PURE__*/_jsx("img", {
+          src: navbar.avatar,
+          className: styles.avatar,
+          alt: ""
+        }), /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.title,
+            children: navbar.title
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.subtitle,
+            children: navbar.subtitle
+          })]
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  };
+
+  // 确认清除
+  var confirmClear = function confirmClear() {
+    onClear === null || onClear === void 0 || onClear();
+  };
+
+  // 空状态
+  var EmptyState = useMemo(function () {
+    return function () {
+      return empty || /*#__PURE__*/_jsxs("div", {
+        className: styles.emptyWrapper,
+        children: [/*#__PURE__*/_jsx("img", {
+          src: emptyStateImage,
+          alt: "\u7A7A\u72B6\u6001\u56FE\u6807",
+          className: styles.emptyImg
+        }), /*#__PURE__*/_jsx("div", {
+          className: clsx(styles.text(16), styles.weight(600), styles.textColor("#343434")),
+          children: emptyStateText
+        })]
+      });
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [emptyStateImage, emptyStateText]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(MarkdownGlobalStyle, {}), /*#__PURE__*/_jsxs("div", {
+      id: "x-ai-chatbot",
+      className: styles.wrapper,
+      children: [navbarShow && /*#__PURE__*/_jsx(NavBar, {}), /*#__PURE__*/_jsx("div", {
+        className: styles.messageContainer,
+        children: messages !== null && messages !== void 0 && messages.length ? /*#__PURE__*/_jsx(Bubble.List, {
+          id: chatId,
+          role: rolesObject,
+          className: styles.messageList,
+          items: messages.map(function (msg) {
+            var _ref5 = msg,
+              id = _ref5.id,
+              role = _ref5.role,
+              status = _ref5.status,
+              type = _ref5.type,
+              _ref5$execute = _ref5.execute,
+              execute = _ref5$execute === void 0 ? [] : _ref5$execute,
+              _ref5$thinks = _ref5.thinks,
+              thinks = _ref5$thinks === void 0 ? "" : _ref5$thinks,
+              _ref5$extra = _ref5.extra,
+              extra = _ref5$extra === void 0 ? {
+                noFooter: false
+              } : _ref5$extra,
+              stepContent = _ref5.stepContent;
+            // 最后一条 AI消息标识
+            if (role === MessageRole.assistant) {
+              lastMessageId.current = id;
+            }
+            // 会话内容
+            var bubbleContent = {
+              key: id,
+              role: role,
+              loading: status === MessageStatus.init,
+              header: function header() {
+                return messageTop || /*#__PURE__*/_jsx(ActionHeader, {
+                  execute: execute,
+                  thinks: thinks
+                });
+              },
+              content: function () {
+                // 文本消息
+                if (type === "TextMessage") {
+                  var _msg$content2;
+                  // 用户消息
+                  if (role === "user") {
+                    var _msg$content;
+                    return /*#__PURE__*/_jsx("div", {
+                      className: "ai-markdown-body",
+                      style: {
+                        minWidth: 0,
+                        maxWidth: 600
+                      },
+                      children: (_msg$content = msg.content) === null || _msg$content === void 0 ? void 0 : _msg$content.text
+                    });
+                  }
+
+                  // 输出html字符串
+                  var html = md.render(((_msg$content2 = msg.content) === null || _msg$content2 === void 0 ? void 0 : _msg$content2.text) || "");
+                  // 生成React节点
+                  var htmlString = reactHtmlParser(html);
+                  return /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [(stepContent === null || stepContent === void 0 ? void 0 : stepContent.length) && stepContent.map(function (item) {
+                      // 输出html字符串
+                      var html2 = md.render(item.content || "");
+                      // 生成React节点
+                      var stepHtmlString = reactHtmlParser(html2);
+                      return /*#__PURE__*/_jsxs("div", {
+                        className: "ai-markdown-body step-content",
+                        style: {
+                          minWidth: 0,
+                          maxWidth: 600
+                        },
+                        children: [/*#__PURE__*/_jsx("div", {
+                          children: stepHtmlString
+                        }), /*#__PURE__*/_jsx("div", {
+                          className: styles.stepLine
+                        })]
+                      }, item.id);
+                    }), /*#__PURE__*/_jsx("div", {
+                      className: "ai-markdown-body",
+                      style: {
+                        minWidth: 0,
+                        maxWidth: 600
+                      },
+                      children: htmlString
+                    })]
+                  });
+                }
+                // 提示类型
+                if (type === "SuggestionMessage") {
+                  return /*#__PURE__*/_jsx(Prompts, {
+                    vertical: true,
+                    items: msg.content,
+                    onItemClick: function onItemClick(info) {
+                      onSuggestMessageClick === null || onSuggestMessageClick === void 0 || onSuggestMessageClick(info === null || info === void 0 ? void 0 : info.data, id);
+                      if (info.data.description) {
+                        onSend === null || onSend === void 0 || onSend({
+                          text: info.data.description
+                        });
+                      }
+                    }
+                  });
+                }
+                // 其他类型...
+                return null;
+              }()
+            };
+            if (!extra.noFooter) {
+              bubbleContent.footer = function () {
+                var _msg$content3;
+                var msgFiles = ((_msg$content3 = msg.content) === null || _msg$content3 === void 0 ? void 0 : _msg$content3.files) || [];
+                if (role === MessageRole.user && msgFiles.length) {
+                  return /*#__PURE__*/_jsx(Flex, {
+                    gap: 8,
+                    wrap: true,
+                    justify: "flex-end",
+                    children: msgFiles.map(function (f) {
+                      return /*#__PURE__*/_jsx(FileCard, _objectSpread(_objectSpread({
+                        styles: {
+                          file: (f === null || f === void 0 ? void 0 : f.fileType) === "image" ? {
+                            width: 100,
+                            height: 100
+                          } : {}
+                        }
+                      }, f), {}, {
+                        name: f.fileName,
+                        size: f.fileSize,
+                        type: f.fileType,
+                        src: f.fileUrl
+                      }), f.fileId);
+                    })
+                  });
+                }
+                if (role === MessageRole.assistant && status !== MessageStatus.failed) {
+                  return /*#__PURE__*/_jsx(MessageFooter, {
+                    data: msg,
+                    lastMessage: lastMessageId.current === id
+                  });
+                }
+              };
+            }
+            return bubbleContent;
+          })
+        }) : /*#__PURE__*/_jsx(EmptyState, {})
+      }), inputShow && /*#__PURE__*/_jsx(XAiSender, {
+        value: content,
+        loading: loading,
+        footerTips: footerTips,
+        clearBtnShow: clearBtnShow,
+        enableUpload: enableUpload,
+        files: files,
+        onChangeFiles: setFiles,
+        uploadRequest: uploadRequest,
+        onChange: handleChange,
+        onSubmit: handleSend,
+        onStop: handleStop,
+        onClear: confirmClear
+      })]
+    })]
+  });
+};
+export default XAiChatbot;
+//# sourceMappingURL=index.js.map