@hsu-react/ui 0.0.1

package/src/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/src/components/Chat/ChatList/_components/User/index.tsx

@@ -0,0 +1,87 @@
+import React, { ReactNode } from "react";
+import Markdown from "../../../../Markdown";
+import { Tooltip } from "antd";
+import styles from "./index.module.less";
+import Copy from "../../../../Copy";
+import { QueryMessage } from "../..";
+import classNames from "classnames";
+import { Bubble } from "@ant-design/x";
+
+interface UserProps {
+  item: QueryMessage;
+  hideTool?: boolean;
+  className?: string;
+  userName?: string;
+  userAvatar?: ReactNode;
+  renderContent?: (originContent: ReactNode, item: QueryMessage) => ReactNode;
+  renderQuery?: (
+    query: string | undefined,
+    item: QueryMessage
+  ) => string | undefined;
+  headerClassName?: string;
+}
+
+const User: React.FC<UserProps> = (props) => {
+  const {
+    item,
+    hideTool,
+    className,
+    userName,
+    userAvatar,
+    renderContent,
+    renderQuery,
+    headerClassName,
+  } = props;
+
+  const content = (
+    <div className={styles.content}>
+      {!!item.messageFiles?.length && (
+        <div className={styles.fileList}>
+          {item.messageFiles?.map((file) => (
+            <div key={file.id} className={styles.file}>
+              <div className={styles.fileName}>{file.filename || file.id}</div>
+            </div>
+          ))}
+        </div>
+      )}
+      <div id={`${item.messageId}-query`}>
+        <Markdown.Views>
+          {renderQuery ? renderQuery(item.query, item) : item.query}
+        </Markdown.Views>
+      </div>
+      {!hideTool && (
+        <div className={styles.userTool}>
+          <Tooltip placement="top" title="复制">
+            <Copy id={`${item.messageId}-query`} text="" />
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className={classNames(styles.User, className)}>
+      <Bubble
+        placement="end"
+        header={
+          userName || item.userName || item.time ? (
+            <>
+              {userName || item.userName}
+              {item.time && <div className={styles.time}>{item.time}</div>}
+            </>
+          ) : undefined
+        }
+        avatar={userAvatar}
+        classNames={{
+          root: styles.bubbleRoot,
+          body: styles.bubbleBody,
+          header: classNames(styles.bubbleHeader, headerClassName),
+          content: styles.bubbleContent,
+        }}
+        content={renderContent ? renderContent(content, item) : content}
+      />
+    </div>
+  );
+};
+
+export default User;

package/src/components/Chat/ChatList/_hooks/index.ts

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

package/src/components/Chat/ChatList/_hooks/useAssistantNavigation.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+
+interface UseAssistantNavigationProps {
+  itemLength: number;
+}
+
+/**
+ * 管理 Assistant 组件中的导航状态（切换不同的答案）
+ */
+export function useAssistantNavigation({
+  itemLength,
+}: UseAssistantNavigationProps) {
+  const [num, setNum] = useState(itemLength - 1);
+
+  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/src/components/Chat/ChatList/_hooks/useCalculateRowIndex.ts

@@ -0,0 +1,128 @@
+import { deepCopy, Equal, get_string_size } from "hsu-utils";
+import { RefObject, useEffect, useState } 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 = {
+    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: number = 8,
+  gap: number = 8
+): [Quote[], (quoteList: Quote[]) => void] {
+  const [_quoteList, setQuoteList] = useState<Quote[]>(quoteList);
+
+  useEffect(() => {
+    const calculateRowIndex = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.clientWidth;
+
+        const rowIndices: Record<string, RowIndex> = {};
+
+        let currentRow = 1;
+        let currentRowIndex = 1;
+        let currentRowWidth = 0;
+
+        const __quoteList = deepCopy(_quoteList);
+
+        __quoteList?.forEach((quote, quoteIdx) => {
+          const textSize = get_string_size(quote.documentName, font);
+          const elementWidth = Math.ceil(textSize.width + padding * 2);
+          const nextElementWidth = __quoteList[quoteIdx + 1]?.documentName
+            ? Math.ceil(
+                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 (!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/src/components/Chat/ChatList/_utils/cleanRedactedReasoning.ts

@@ -0,0 +1,13 @@
+/**
+ * 清理 redacted_reasoning 标签
+ * @param text 需要清理的文本
+ * @returns 清理后的文本
+ */
+export function cleanRedactedReasoning(text: string): string {
+  if (!text) return "";
+  return text
+    .replace("<think>", "")
+    .replace("</think>", "")
+    .trim();
+}
+

package/src/components/Chat/ChatList/_utils/index.ts

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

package/src/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/src/components/Chat/ChatList/index.tsx

@@ -0,0 +1,179 @@
+import React, { ReactNode } from "react";
+import styles from "./index.module.less";
+import User from "./_components/User";
+import classNames from "classnames";
+import Assistant from "./_components/Assistant";
+
+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;
+}
+
+const ChatList: React.FC<ChatListProps> = (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 (
+    <div className={classNames(styles.ChatList, className)}>
+      {!!defaultAnswer && (
+        <Assistant
+          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 (
+          <>
+            <User
+              item={item.query}
+              hideTool={hideTool}
+              className={userClassName}
+              userName={userName}
+              userAvatar={userAvatar}
+              renderContent={userRenderContent}
+              renderQuery={userRenderQuery}
+              headerClassName={userHeaderClassName}
+            />
+            {!!item?.answers?.length && (
+              <Assistant
+                className={assistantClassName}
+                itemClassName={assistantItemClassName}
+                item={item.answers}
+                assistanting={idx === list.length - 1 && assistanting}
+                onAgain={() => {
+                  !!item.query?.query && onAgain?.(item.query?.query as string);
+                }}
+                hideTool={hideTool}
+                onLikeChange={onLikeChange}
+                isLast={idx === list.length - 1}
+                assistantName={assistantName}
+                assistantAvatar={assistantAvatar}
+                headerClassName={assistantHeaderClassName}
+                noAnswerTip={noAnswerTip}
+              />
+            )}
+          </>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ChatList;

package/src/components/Chat/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: AI
+  order: 6
+title: Chat 对话
+---
+
+# Chat 对话
+
+> `Chat` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Chat } from "@hsu-react/ui";
+```

package/src/components/Chat/index.tsx

@@ -0,0 +1,32 @@
+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;
+}
+
+const Chat: ChatType = {
+  List: ChatList,
+  History: ChatHistory,
+  Input: ChatInput,
+};
+
+export default Chat;