@hsu-react/ui 0.0.1

package/lib/components/Chat/ChatList/_components/User/index.module.less

@@ -0,0 +1,144 @@
+.User {
+  max-width: 100%;
+
+  .bubbleRoot {
+    max-width: 100%;
+
+    .bubbleBody {
+      max-width: 100%;
+
+      .bubbleHeader {
+        flex-direction: column;
+        align-items: flex-end;
+
+        font-size: 14px;
+        font-weight: bold;
+
+        .time {
+          font-size: 12px;
+          color: #666;
+          font-weight: normal;
+        }
+      }
+
+      .bubbleContent {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        min-height: 0;
+        padding: 0;
+
+        background-color: transparent;
+      }
+    }
+  }
+
+  .content {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    row-gap: 4px;
+
+    width: max-content;
+    max-width: 100%;
+    height: max-content;
+    padding: 8px 12px;
+
+    color: #fff;
+    font-size: 14px;
+
+    background: linear-gradient(243deg, #8a66fb 0%, #126dff 100%);
+
+    border-radius: 6px 0px 6px 6px;
+
+    .fileList {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      column-gap: 4px;
+
+      .file {
+        display: flex;
+        align-items: center;
+        column-gap: 4px;
+
+        width: max-content;
+        padding: 4px 10px;
+
+        border-radius: 3px;
+
+        background-color: #fff;
+
+        cursor: default;
+
+        .fileName {
+          font-size: 12px;
+          color: #333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          line-clamp: 2;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+
+    .userTool {
+      position: absolute;
+      z-index: 999;
+      bottom: -25px;
+      left: -15px;
+
+      display: flex;
+      align-items: center;
+      column-gap: 4px;
+
+      padding: 4px;
+
+      border-radius: 4px;
+
+      border: 1px solid #e5e5e5;
+
+      background: #ffffff;
+
+      opacity: 0;
+
+      transition: opacity 0.3s;
+
+      .editIcon {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+
+        width: max-content;
+        padding: 2px 4px;
+
+        font-size: 18px;
+        line-height: 18px;
+        color: #5e6772;
+
+        cursor: pointer;
+
+        transition: color 0.3s, background-color 0.3s;
+
+        &:hover {
+          color: #060607;
+
+          background-color: #f3f5fc;
+
+          border-radius: 4px;
+        }
+      }
+    }
+
+    &:hover {
+      .userTool {
+        opacity: 1;
+      }
+    }
+  }
+}

package/lib/components/Chat/ChatList/_hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useCalculateRowIndex } from "./useCalculateRowIndex";
+export { useAssistantNavigation } from "./useAssistantNavigation";
+export type { Quote } from "./useCalculateRowIndex";

package/lib/components/Chat/ChatList/_hooks/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useAssistantNavigation", {
+  enumerable: true,
+  get: function () {
+    return _useAssistantNavigation.useAssistantNavigation;
+  }
+});
+Object.defineProperty(exports, "useCalculateRowIndex", {
+  enumerable: true,
+  get: function () {
+    return _useCalculateRowIndex.default;
+  }
+});
+var _useCalculateRowIndex = _interopRequireDefault(require("./useCalculateRowIndex"));
+var _useAssistantNavigation = require("./useAssistantNavigation");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/Chat/ChatList/_hooks/useAssistantNavigation.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface UseAssistantNavigationProps {
+    itemLength: number;
+}
+/**
+ * 管理 Assistant 组件中的导航状态（切换不同的答案）
+ */
+export declare function useAssistantNavigation({ itemLength, }: UseAssistantNavigationProps): {
+    currentIndex: number;
+    setCurrentIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    goPrev: () => void;
+    goNext: () => void;
+    isFirst: boolean;
+    isLast: boolean;
+};
+export {};

package/lib/components/Chat/ChatList/_hooks/useAssistantNavigation.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAssistantNavigation = useAssistantNavigation;
+var _react = require("react");
+/**
+ * 管理 Assistant 组件中的导航状态（切换不同的答案）
+ */
+function useAssistantNavigation({
+  itemLength
+}) {
+  const [num, setNum] = (0, _react.useState)(itemLength - 1);
+  (0, _react.useEffect)(() => {
+    setNum(itemLength - 1);
+  }, [itemLength]);
+  const goPrev = () => {
+    if (num > 0) {
+      setNum(num - 1);
+    }
+  };
+  const goNext = () => {
+    if (num < itemLength - 1) {
+      setNum(num + 1);
+    }
+  };
+  return {
+    currentIndex: num,
+    setCurrentIndex: setNum,
+    goPrev,
+    goNext,
+    isFirst: num === 0,
+    isLast: num === itemLength - 1
+  };
+}

package/lib/components/Chat/ChatList/_hooks/useCalculateRowIndex.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from "react";
+export interface Quote {
+    documentName: string;
+    content: string;
+    row?: number;
+    rowIndex?: number;
+    position: number;
+    lastRow?: boolean;
+    lastRowIndex?: boolean;
+}
+export interface Font {
+    family: string;
+    size: number;
+    weight: string;
+}
+export interface RowIndex {
+    row: number;
+    position: number;
+    lastRow?: boolean;
+    lastRowIndex?: boolean;
+}
+export default function useCalculateRowIndex(containerRef: RefObject<HTMLDivElement>, quoteList: Quote[], font?: Font, padding?: number, gap?: number): [Quote[], (quoteList: Quote[]) => void];

package/lib/components/Chat/ChatList/_hooks/useCalculateRowIndex.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCalculateRowIndex;
+var _hsuUtils = require("hsu-utils");
+var _react = require("react");
+function useCalculateRowIndex(containerRef, quoteList, font = {
+  family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  size: 12,
+  weight: "400"
+}, padding = 8, gap = 8) {
+  const [_quoteList, setQuoteList] = (0, _react.useState)(quoteList);
+  (0, _react.useEffect)(() => {
+    const calculateRowIndex = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+        const rowIndices = {};
+        let currentRow = 1;
+        let currentRowIndex = 1;
+        let currentRowWidth = 0;
+        const __quoteList = (0, _hsuUtils.deepCopy)(_quoteList);
+        __quoteList?.forEach((quote, quoteIdx) => {
+          const textSize = (0, _hsuUtils.get_string_size)(quote.documentName, font);
+          const elementWidth = Math.ceil(textSize.width + padding * 2);
+          const nextElementWidth = __quoteList[quoteIdx + 1]?.documentName ? Math.ceil((0, _hsuUtils.get_string_size)(__quoteList[quoteIdx + 1]?.documentName ?? "", font).width + padding * 2) : 0;
+          if (currentRowWidth + elementWidth > containerWidth) {
+            currentRow++;
+            currentRowWidth = 0;
+            currentRowIndex = 1;
+            rowIndices[quote.position] = {
+              row: currentRow,
+              position: currentRowIndex
+            };
+          } else {
+            rowIndices[quote.position] = {
+              row: currentRow,
+              position: currentRowIndex,
+              lastRowIndex: currentRowWidth + elementWidth + gap + nextElementWidth > containerWidth
+            };
+          }
+          if (quoteIdx === __quoteList.length - 1) {
+            rowIndices[quote.position].lastRow = true;
+            rowIndices[quote.position].lastRowIndex = true;
+            Object.keys(rowIndices)?.forEach(key => {
+              const _d = rowIndices[key];
+              if (_d.row === currentRow) {
+                _d.lastRow = true;
+              } else {
+                _d.lastRow = false;
+              }
+            });
+          } else {
+            currentRowWidth += elementWidth + gap;
+            currentRowIndex++;
+          }
+        });
+        __quoteList?.forEach(quote => {
+          quote.row = rowIndices[quote.position]?.row;
+          quote.rowIndex = rowIndices[quote.position]?.position;
+          quote.lastRow = rowIndices[quote.position]?.lastRow;
+          quote.lastRowIndex = rowIndices[quote.position]?.lastRowIndex;
+        });
+        if (!_hsuUtils.Equal.ObjEqual(_quoteList, __quoteList)) {
+          setQuoteList(__quoteList);
+        }
+      }
+    };
+    calculateRowIndex();
+
+    // 添加窗口大小调整监听器
+    window.addEventListener("resize", calculateRowIndex);
+    return () => {
+      window.removeEventListener("resize", calculateRowIndex);
+    };
+  }, [_quoteList, containerRef, font, gap, padding, quoteList]);
+  return [_quoteList, setQuoteList];
+}

package/lib/components/Chat/ChatList/_utils/cleanRedactedReasoning.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 清理 redacted_reasoning 标签
+ * @param text 需要清理的文本
+ * @returns 清理后的文本
+ */
+export declare function cleanRedactedReasoning(text: string): string;

package/lib/components/Chat/ChatList/_utils/cleanRedactedReasoning.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cleanRedactedReasoning = cleanRedactedReasoning;
+/**
+ * 清理 redacted_reasoning 标签
+ * @param text 需要清理的文本
+ * @returns 清理后的文本
+ */
+function cleanRedactedReasoning(text) {
+  if (!text) return "";
+  return text.replace("<think>", "").replace("</think>", "").trim();
+}

package/lib/components/Chat/ChatList/_utils/index.d.ts

@@ -0,0 +1 @@
+export { cleanRedactedReasoning } from "./cleanRedactedReasoning";

package/lib/components/Chat/ChatList/_utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cleanRedactedReasoning", {
+  enumerable: true,
+  get: function () {
+    return _cleanRedactedReasoning.cleanRedactedReasoning;
+  }
+});
+var _cleanRedactedReasoning = require("./cleanRedactedReasoning");

package/lib/components/Chat/ChatList/index.d.ts

@@ -0,0 +1,73 @@
+import React, { ReactNode } from "react";
+export interface ChatMessage {
+    query: QueryMessage;
+    answers: AnswerMessage[];
+    [key: string]: unknown;
+}
+export interface QueryMessage {
+    query?: string;
+    messageFiles?: {
+        filename: string;
+        url: string;
+        id: string;
+        [key: string]: unknown;
+    }[];
+    messageId?: string;
+    time?: string;
+    userName?: string;
+}
+export interface AnswerMessage {
+    answer?: string;
+    think_time?: number;
+    think?: string;
+    retrieverResources?: RetrieverResource[];
+    messageId?: string;
+    like?: boolean | null;
+    runningTime?: number;
+    time?: string;
+    error?: string;
+    assistantName?: string;
+}
+export interface RetrieverResource {
+    position: number;
+    datasetId: string;
+    datasetName: string;
+    documentId: string;
+    documentName: string;
+    dataSourceType: string;
+    segmentId: string;
+    retrieverFrom: string;
+    score: number;
+    hitCount: number;
+    wordCount: number;
+    segmentPosition: number;
+    indexNodeHash: string;
+    content: string;
+    page: null;
+    doc_metadata: null;
+}
+export interface ChatListProps {
+    list?: ChatMessage[];
+    className?: string;
+    onAgain?: (query: string) => void;
+    assistanting?: boolean;
+    hideTool?: boolean;
+    onLikeChange?: (messageId: string, like: boolean | null, content: string) => void;
+    defaultAnswer?: string;
+    defaultAnswerClassName?: string;
+    defaultAnswerItemClassName?: string;
+    userClassName?: string;
+    assistantClassName?: string;
+    assistantItemClassName?: string;
+    userName?: string;
+    userAvatar?: ReactNode;
+    assistantName?: string;
+    assistantAvatar?: ReactNode;
+    userRenderContent?: (originContent: ReactNode, item: QueryMessage) => ReactNode;
+    userRenderQuery?: (query: string | undefined, item: QueryMessage) => string | undefined;
+    userHeaderClassName?: string;
+    assistantHeaderClassName?: string;
+    noAnswerTip?: string;
+}
+declare const ChatList: React.FC<ChatListProps>;
+export default ChatList;

package/lib/components/Chat/ChatList/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _User = _interopRequireDefault(require("./_components/User"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Assistant = _interopRequireDefault(require("./_components/Assistant"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ChatList = props => {
+  const {
+    list = [],
+    className,
+    onAgain,
+    assistanting,
+    onLikeChange,
+    defaultAnswer,
+    hideTool,
+    defaultAnswerClassName,
+    defaultAnswerItemClassName,
+    userClassName,
+    assistantClassName,
+    assistantItemClassName,
+    userName,
+    userAvatar,
+    assistantName,
+    assistantAvatar,
+    userRenderContent,
+    userRenderQuery,
+    userHeaderClassName,
+    assistantHeaderClassName,
+    noAnswerTip
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.ChatList, className),
+    children: [!!defaultAnswer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assistant.default, {
+      className: defaultAnswerClassName,
+      itemClassName: defaultAnswerItemClassName,
+      item: [{
+        think: "",
+        answer: defaultAnswer,
+        retrieverResources: [],
+        messageId: "1",
+        think_time: 0,
+        runningTime: 0,
+        like: null
+      }],
+      hideTool: true,
+      assistantName: assistantName,
+      assistantAvatar: assistantAvatar,
+      headerClassName: assistantHeaderClassName,
+      noAnswerTip: noAnswerTip
+    }), list?.map((item, idx) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_User.default, {
+          item: item.query,
+          hideTool: hideTool,
+          className: userClassName,
+          userName: userName,
+          userAvatar: userAvatar,
+          renderContent: userRenderContent,
+          renderQuery: userRenderQuery,
+          headerClassName: userHeaderClassName
+        }), !!item?.answers?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Assistant.default, {
+          className: assistantClassName,
+          itemClassName: assistantItemClassName,
+          item: item.answers,
+          assistanting: idx === list.length - 1 && assistanting,
+          onAgain: () => {
+            !!item.query?.query && onAgain?.(item.query?.query);
+          },
+          hideTool: hideTool,
+          onLikeChange: onLikeChange,
+          isLast: idx === list.length - 1,
+          assistantName: assistantName,
+          assistantAvatar: assistantAvatar,
+          headerClassName: assistantHeaderClassName,
+          noAnswerTip: noAnswerTip
+        })]
+      });
+    })]
+  });
+};
+var _default = exports.default = ChatList;

package/lib/components/Chat/ChatList/index.module.less

@@ -0,0 +1,8 @@
+.ChatList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 25px;
+
+  width: 100%;
+  height: max-content;
+}

package/lib/components/Chat/index.d.ts

@@ -0,0 +1,13 @@
+import ChatList from "./ChatList";
+import ChatHistory from "./ChatHistory";
+import ChatInput from "./ChatInput";
+export type { ChatMessage, QueryMessage, AnswerMessage, RetrieverResource, ChatListProps, } from "./ChatList";
+export type { ChatHistoryProps, ChatHistoryData } from "./ChatHistory";
+export type { ChatInputProps, ModelConfig, AgentConfig, AgentToggleConfig, } from "./ChatInput";
+interface ChatType {
+    List: typeof ChatList;
+    History: typeof ChatHistory;
+    Input: typeof ChatInput;
+}
+declare const Chat: ChatType;
+export default Chat;

package/lib/components/Chat/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ChatList = _interopRequireDefault(require("./ChatList"));
+var _ChatHistory = _interopRequireDefault(require("./ChatHistory"));
+var _ChatInput = _interopRequireDefault(require("./ChatInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Chat = {
+  List: _ChatList.default,
+  History: _ChatHistory.default,
+  Input: _ChatInput.default
+};
+var _default = exports.default = Chat;

package/lib/components/Checkbox/CheckboxGroup/index.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxGroupProps as AntdCheckboxGroupProps } from "antd/es/checkbox";
+import React from "react";
+export interface CheckboxGroupProps extends AntdCheckboxGroupProps {
+    outline?: boolean;
+    hasAll?: boolean;
+    layout?: "vertical" | "horizontal";
+    allMaxHeight?: number;
+}
+declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export default CheckboxGroup;

package/lib/components/Checkbox/CheckboxGroup/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Group = _antd.Checkbox.Group;
+const CheckboxGroup = props => {
+  const {
+    className,
+    outline,
+    hasAll,
+    options = [],
+    value,
+    onChange,
+    layout = "horizontal",
+    allMaxHeight,
+    ...rest
+  } = props;
+
+  // 获取所有非"全部"选项的值
+  const normalValues = (0, _react.useMemo)(() => {
+    return options?.map(option => {
+      if (typeof option === "string" || typeof option === "number") {
+        return option;
+      }
+      return option.value;
+    });
+  }, [options]);
+
+  // 计算"全部"选项的状态
+  const allChecked = (0, _react.useMemo)(() => {
+    if (!hasAll || !value || normalValues.length === 0) return false;
+    const selectedValues = Array.isArray(value) ? value : [];
+    return normalValues.length > 0 && normalValues.every(val => selectedValues.includes(val));
+  }, [hasAll, value, normalValues]);
+  const allIndeterminate = (0, _react.useMemo)(() => {
+    if (!hasAll || !value || normalValues.length === 0) return false;
+    const selectedValues = Array.isArray(value) ? value : [];
+    const selectedCount = normalValues.filter(val => selectedValues.includes(val)).length;
+    return selectedCount > 0 && selectedCount < normalValues.length;
+  }, [hasAll, value, normalValues]);
+
+  // 处理"全部"选项的点击
+  const handleAllChange = (0, _react.useCallback)(e => {
+    if (!onChange) return;
+    if (e.target.checked) {
+      // 选中所有选项
+      onChange(normalValues);
+    } else {
+      // 取消所有选项
+      onChange([]);
+    }
+  }, [onChange, normalValues]);
+
+  // 处理普通选项的点击
+  const handleChange = (0, _react.useCallback)(checkedValues => {
+    if (!onChange) return;
+    onChange(checkedValues);
+  }, [onChange]);
+  if (hasAll) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_indexModule.default.checkboxGroup, className, {
+        [_indexModule.default.outline]: outline,
+        [_indexModule.default.hasAll]: hasAll
+      }),
+      style: {
+        maxHeight: allMaxHeight ? `${allMaxHeight}px` : undefined
+      },
+      children: [!!options.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox, {
+        checked: allChecked,
+        indeterminate: allIndeterminate,
+        onChange: handleAllChange,
+        className: _indexModule.default.allCheckbox,
+        children: "\u5168\u9009"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+        options: options,
+        value: value,
+        onChange: handleChange,
+        ...rest
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
+    className: (0, _classnames.default)(_indexModule.default.checkboxGroup, className, {
+      [_indexModule.default.outline]: outline,
+      [_indexModule.default[layout]]: layout
+    }),
+    options: options,
+    value: value,
+    onChange: onChange,
+    ...rest
+  });
+};
+var _default = exports.default = CheckboxGroup;