@ai-group/chat-sdk 0.2.5

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

@@ -0,0 +1,586 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+// 文件: components/XAiChatbot/index.tsx
+
+import React, { useRef, useState, useMemo } from 'react';
+import { Button, Space, Spin, Tooltip, Popover } from 'antd';
+import { Bubble, Sender, Prompts } from '@ant-design/x';
+import { ArrowUpOutlined, ClearOutlined, 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 groupIcon from "../../assets/group.png";
+import arrowUp from "../../assets/arrow-up.png";
+import arrowDown from "../../assets/arrow-down.png";
+import { useChatbotContext } from "../../hooks/useProviderContext";
+import { useStyles, GlobalStyle } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } 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);
+};
+// 默认消息功能区
+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) {
+  // 使用新的 Hook 来处理 Provider 上下文
+  var _useChatbotContext = useChatbotContext(props),
+    mergedProps = _useChatbotContext.mergedProps;
+  var _mergedProps$navbarSh = mergedProps.navbarShow,
+    navbarShow = _mergedProps$navbarSh === void 0 ? false : _mergedProps$navbarSh,
+    navbar = mergedProps.navbar,
+    _mergedProps$renderNa = mergedProps.renderNavbar,
+    renderNavbar = _mergedProps$renderNa === void 0 ? null : _mergedProps$renderNa,
+    _mergedProps$loading = mergedProps.loading,
+    propLoading = _mergedProps$loading === void 0 ? false : _mergedProps$loading,
+    messageTooltip = mergedProps.messageTooltip,
+    avatar = mergedProps.avatar,
+    userAvatar = mergedProps.userAvatar,
+    propMessages = mergedProps.messages,
+    _mergedProps$text = mergedProps.text,
+    text = _mergedProps$text === void 0 ? '' : _mergedProps$text,
+    _mergedProps$emptySta = mergedProps.emptyStateImage,
+    emptyStateImage = _mergedProps$emptySta === void 0 ? emptyIcon : _mergedProps$emptySta,
+    _mergedProps$emptySta2 = mergedProps.emptyStateText,
+    emptyStateText = _mergedProps$emptySta2 === void 0 ? '我的智能体' : _mergedProps$emptySta2,
+    _mergedProps$messageA = mergedProps.messageActions,
+    messageActions = _mergedProps$messageA === void 0 ? defaultActions : _mergedProps$messageA,
+    onMessagesActionsCallback = mergedProps.onMessagesActionsCallback,
+    onSuggestMessageClick = mergedProps.onSuggestMessageClick,
+    onSend = mergedProps.onSend,
+    onClear = mergedProps.onClear,
+    onStop = mergedProps.onStop;
+
+  // 如果在 Provider 中，使用 Provider 的状态
+  var messages = mergedProps.messages || propMessages || [];
+  var loading = mergedProps.loading || propLoading;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    disabled = _useState2[0],
+    _setDisabled = _useState2[1]; // 是否禁止输入
+  var _useState3 = useState(text),
+    _useState4 = _slicedToArray(_useState3, 2),
+    content = _useState4[0],
+    setContent = _useState4[1]; // 输入框文本
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mode = _useState6[0],
+    _setMode = _useState6[1]; // todo 模式
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fileUploading = _useState8[0],
+    setFileUploading = _useState8[1]; // 文件上传进度条
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    clearPopoverVisible = _useState10[0],
+    setClearPopoverVisible = _useState10[1]; // 气泡卡片显隐藏
+  var styles = useStyles();
+
+  // 消息功能区组件
+  var FooterActions = function FooterActions(_ref) {
+    var data = _ref.data;
+    return /*#__PURE__*/_jsx("div", {
+      className: clsx(styles.flex, styles.gap(13)),
+      children: messageActions.map(function (action, index) {
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: action.tooltip,
+          children: /*#__PURE__*/_jsx("span", {
+            className: styles.cursor('pointer'),
+            onClick: function onClick() {
+              return onMessagesActionsCallback === null || onMessagesActionsCallback === void 0 ? void 0 : onMessagesActionsCallback(index, data);
+            },
+            children: action.icon
+          })
+        }, action.key);
+      })
+    });
+  };
+
+  // 消息底部区域
+  var MessageFooter = function MessageFooter(_ref2) {
+    var data = _ref2.data;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [messageTooltip === null || messageTooltip === void 0 ? void 0 : messageTooltip(data), /*#__PURE__*/_jsx(FooterActions, {
+        data: data
+      })]
+    });
+  };
+
+  // 聊天角色
+  var rolesObject = {
+    assistant: {
+      placement: 'start',
+      avatar: {
+        icon: avatar || /*#__PURE__*/_jsx(UserOutlined, {}),
+        style: {
+          background: '#fde3cf'
+        }
+      },
+      typing: {
+        step: 5,
+        interval: 20
+      },
+      style: {
+        maxWidth: 600
+      }
+    },
+    user: {
+      placement: 'end',
+      avatar: {
+        icon: userAvatar || /*#__PURE__*/_jsx(UserOutlined, {}),
+        style: {
+          background: '#87d068'
+        }
+      }
+    },
+    suggestion: {
+      placement: 'start',
+      avatar: {
+        icon: /*#__PURE__*/_jsx(UserOutlined, {}),
+        style: {
+          visibility: 'hidden'
+        }
+      },
+      variant: 'borderless'
+    }
+  };
+
+  // ActionHeader 组件
+  var ActionHeader = function ActionHeader(_ref3) {
+    var _first$extra;
+    var _ref3$thinks = _ref3.thinks,
+      thinks = _ref3$thinks === void 0 ? [] : _ref3$thinks,
+      renderActionHeader = _ref3.renderActionHeader;
+    var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      expanded = _useState12[0],
+      setExpanded = _useState12[1];
+    if (!thinks || thinks.length === 0) return null;
+    if (renderActionHeader) {
+      return renderActionHeader({
+        thinks: thinks,
+        expanded: expanded,
+        onToggle: function onToggle() {
+          return setExpanded(function (v) {
+            return !v;
+          });
+        }
+      });
+    }
+    // 默认渲染
+    var first = thinks[0];
+    var name = first.name;
+    var icon = (first === null || first === void 0 ? void 0 : first.icon) || (first === null || first === void 0 || (_first$extra = first.extra) === null || _first$extra === void 0 ? void 0 : _first$extra.icon);
+    return /*#__PURE__*/_jsxs("div", {
+      className: styles.actionHeaderWrapper,
+      children: [!expanded && /*#__PURE__*/_jsxs("div", {
+        className: styles.actionHeaderItem,
+        onClick: function onClick() {
+          return setExpanded(function (v) {
+            return !v;
+          });
+        },
+        children: [icon && /*#__PURE__*/_jsx("img", {
+          src: icon,
+          alt: "icon",
+          className: styles.actionHeaderIcon
+        }), /*#__PURE__*/_jsx("span", {
+          className: styles.actionHeaderText,
+          children: name
+        }), /*#__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: groupIcon,
+            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.map(function (action, idx) {
+          var _action$extra, _action$extra2, _action$extra3;
+          var thinkIcon = (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: [thinkIcon && /*#__PURE__*/_jsx("img", {
+              src: thinkIcon,
+              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);
+        })]
+      })]
+    });
+  };
+
+  // 触发发送
+  var handleSend = function handleSend() {
+    if (content.trim()) {
+      // 直接使用合并后的 onSend，自动处理 Provider 和独立模式
+      onSend === null || onSend === void 0 || onSend('text', content);
+      setContent(''); // 发送后清空输入框内容
+    }
+  };
+
+  // 导航栏
+  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 fileInputRef = useRef(null);
+
+  // 停止生成
+  var handleStopGenerate = function handleStopGenerate() {
+    onStop === null || onStop === void 0 || onStop();
+  };
+
+  // 选择文件
+  var handleFileSelect = function handleFileSelect() {};
+
+  //  点击清除按钮
+  var handleClear = function handleClear() {
+    setClearPopoverVisible(true);
+  };
+
+  // 取消清除
+  var cancelClear = function cancelClear() {
+    setClearPopoverVisible(false);
+  };
+
+  // 确认清除
+  var confirmClear = function confirmClear() {
+    setContent('');
+    onClear === null || onClear === void 0 || onClear();
+    setClearPopoverVisible(false);
+  };
+
+  // 清空按钮提示文案
+  var clearConfirmContent = /*#__PURE__*/_jsxs("div", {
+    className: styles.p('2px'),
+    children: [/*#__PURE__*/_jsx("p", {
+      className: clsx(styles.mb(14), styles.mt(0)),
+      children: "\u786E\u8BA4\u6E05\u9664\u6240\u6709\u804A\u5929\u8BB0\u5F55\u5E76\u91CD\u7F6E\u4F1A\u8BDD\uFF01"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.popoverFooter,
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "small",
+        onClick: cancelClear,
+        children: "\u53D6\u6D88"
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        type: "primary",
+        danger: true,
+        onClick: confirmClear,
+        children: "\u786E\u8BA4"
+      })]
+    })]
+  });
+
+  // 自定义上传按钮
+  var uploadButton = /*#__PURE__*/_jsx("div", {
+    className: styles.flexCenterGap2,
+    children: /*#__PURE__*/_jsxs(Tooltip, {
+      placement: "top",
+      title: mode === 'single_agent_skill_mode' ? '工作流模式不支持上传文件' : '支持图片、文档等上传',
+      children: [fileUploading ? /*#__PURE__*/_jsx(Spin, {
+        size: "small"
+      }) : /*#__PURE__*/_jsx("i", {
+        className: mode === 'single_agent_skill_mode' ? styles.iconZengjiaDisabled : styles.iconZengjiaNormal,
+        onClick: function onClick() {
+          if (mode !== 'single_agent_skill_mode' && fileInputRef.current) {
+            var _fileInputRef$current;
+            (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+          }
+        }
+      }), /*#__PURE__*/_jsx("input", {
+        type: "file",
+        ref: fileInputRef,
+        onChange: handleFileSelect,
+        style: {
+          display: 'none'
+        },
+        accept: "*/*",
+        disabled: fileUploading || mode === 'single_agent_skill_mode'
+      })]
+    })
+  });
+
+  // 空状态
+  var EmptyState = useMemo(function () {
+    return function () {
+      return /*#__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", {
+      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, {
+          roles: rolesObject,
+          items: messages.map(function (msg) {
+            var _ref4 = msg,
+              id = _ref4.id,
+              role = _ref4.role,
+              status = _ref4.status,
+              type = _ref4.type,
+              _ref4$thinks = _ref4.thinks,
+              thinks = _ref4$thinks === void 0 ? [] : _ref4$thinks,
+              _ref4$extra = _ref4.extra,
+              extra = _ref4$extra === void 0 ? {
+                noFooter: false
+              } : _ref4$extra;
+            return {
+              key: id,
+              role: role,
+              loading: status === MessageStatus.init,
+              header: function header() {
+                return /*#__PURE__*/_jsx(ActionHeader, {
+                  thinks: thinks
+                });
+              },
+              content: function () {
+                // 文本消息
+                if (type === 'TextMessage') {
+                  var _msg$content2;
+                  // 用户消息
+                  if (role === 'user') {
+                    var _msg$content;
+                    return /*#__PURE__*/_jsx("div", {
+                      className: "markdown-body",
+                      style: {
+                        minWidth: 0,
+                        maxWidth: 600,
+                        background: '#D8E0FD'
+                      },
+                      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__*/_jsx(_Fragment, {
+                    children: /*#__PURE__*/_jsx("div", {
+                      className: "markdown-body",
+                      style: {
+                        minWidth: 0,
+                        maxWidth: 600
+                      },
+                      children: htmlString
+                    })
+                  });
+                }
+                // 图片类型
+                if (type === 'ImageMessage') {
+                  var _msg$content3;
+                  return /*#__PURE__*/_jsx("div", {
+                    style: {
+                      minWidth: 0,
+                      maxWidth: 600
+                    },
+                    children: /*#__PURE__*/_jsx("img", {
+                      src: (_msg$content3 = msg.content) === null || _msg$content3 === void 0 ? void 0 : _msg$content3.bytes,
+                      alt: "",
+                      style: {
+                        maxWidth: 680
+                      }
+                    })
+                  });
+                }
+                // 提示类型
+                if (type === 'SuggestionMessage') {
+                  return /*#__PURE__*/_jsx(Prompts, {
+                    vertical: true,
+                    items: msg.content,
+                    onItemClick: function onItemClick(info) {
+                      onSuggestMessageClick === null || onSuggestMessageClick === void 0 || onSuggestMessageClick(info.data, id, 'text');
+                      if (info.data.description) {
+                        onSend === null || onSend === void 0 || onSend('text', info.data.description);
+                      }
+                    }
+                  });
+                }
+                // 其他类型...
+                return null;
+              }(),
+              footer: function footer() {
+                return extra.noFooter ? null : role === MessageRole.assistant && status !== MessageStatus.failed && /*#__PURE__*/_jsx(_Fragment, {
+                  children: /*#__PURE__*/_jsx(MessageFooter, {
+                    data: msg
+                  })
+                });
+              }
+            };
+          })
+        }) : /*#__PURE__*/_jsx(EmptyState, {})
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.chatFooter,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: clsx(styles.flex, styles.gap(8)),
+          children: [/*#__PURE__*/_jsx(Popover, {
+            content: clearConfirmContent,
+            title: "\u786E\u8BA4\u6E05\u7A7A\u5BF9\u8BDD",
+            trigger: "click",
+            open: clearPopoverVisible,
+            onOpenChange: setClearPopoverVisible,
+            children: /*#__PURE__*/_jsx("div", {
+              className: styles.clearBtn,
+              style: {
+                border: '1px solid #E4E7EC'
+              },
+              onClick: handleClear,
+              children: /*#__PURE__*/_jsx(ClearOutlined, {
+                className: styles.text(16)
+              })
+            })
+          }), /*#__PURE__*/_jsx(Sender, {
+            value: content
+            // submitType="shiftEnter"
+            ,
+            className: styles.sendWrapper,
+            placeholder: "\u7EE7\u7EED\u5BF9\u8BDD...",
+            disabled: disabled,
+            loading: loading,
+            actions: function actions(_, info) {
+              var _info$components = info.components,
+                SendButton = _info$components.SendButton,
+                LoadingButton = _info$components.LoadingButton;
+              return /*#__PURE__*/_jsxs(Space, {
+                size: "small",
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: styles.w(20)
+                }), mode !== 'single_agent_skill_mode' && uploadButton, mode === 'meta_agent_mode' && /*#__PURE__*/_jsx("div", {
+                  className: styles.flexCenterGap2,
+                  style: {
+                    visibility: 'hidden'
+                  },
+                  children: /*#__PURE__*/_jsx("i", {
+                    className: styles.iconHuihuarenqun
+                  })
+                }), /*#__PURE__*/_jsx("div", {
+                  className: styles.divider
+                }), loading ? /*#__PURE__*/_jsx(LoadingButton, {
+                  onClick: handleStopGenerate,
+                  className: styles.stopButton
+                }) : /*#__PURE__*/_jsx(SendButton, {
+                  className: styles.sendButton,
+                  type: "primary",
+                  icon: /*#__PURE__*/_jsx(ArrowUpOutlined, {
+                    className: styles.text(20)
+                  }),
+                  disabled: disabled
+                })]
+              });
+            },
+            onChange: function onChange(v) {
+              setContent(v);
+            },
+            onSubmit: handleSend,
+            onCancel: function onCancel() {
+              handleStopGenerate();
+            }
+          })]
+        })
+      })]
+    })]
+  });
+};
+export default XAiChatbot;
+//# sourceMappingURL=index.js.map