@hsu-react/ui 0.0.1

package/src/components/Chat/ChatHistory/_components/index.ts

@@ -0,0 +1,4 @@
+export { default as NewChatButton } from "./NewChatButton";
+export { default as HistoryGroup } from "./HistoryGroup";
+export { default as HistoryItem } from "./HistoryItem";
+

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

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

package/src/components/Chat/ChatHistory/_hooks/useRename.ts

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+export const useRename = (
+  updateTitle?: (chatId: string, title: string) => void
+) => {
+  const [renamingChatId, setRenamingChatId] = useState<string | null>(null);
+  const [title, setTitle] = useState("");
+
+  const handleRename = (chatId: string, currentName: string) => {
+    setRenamingChatId(chatId);
+    setTitle(currentName);
+  };
+
+  const handleRenameConfirm = (chatId: string) => {
+    setRenamingChatId(null);
+    setTitle("");
+    updateTitle?.(chatId, title);
+  };
+
+  const handleRenameCancel = () => {
+    setRenamingChatId(null);
+    setTitle("");
+  };
+
+  return {
+    renamingChatId,
+    title,
+    setTitle,
+    handleRename,
+    handleRenameConfirm,
+    handleRenameCancel,
+  };
+};

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

@@ -0,0 +1,7 @@
+/**
+ * 格式化聊天名称（截取省略号前的部分）
+ */
+export const formatChatName = (name: string): string => {
+  return name.split("…")[0];
+};
+

package/src/components/Chat/ChatHistory/index.module.less

@@ -0,0 +1,54 @@
+.historyContent {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  width: 260px;
+  height: 100%;
+  padding: 10px 0px;
+
+  background-color: #f9f9f9;
+
+  border-right: 1px solid #0d0d0d0d;
+
+  .tools {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    width: 100%;
+    padding: 0 10px;
+  }
+
+  .historyList {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    flex: 1;
+    width: 100%;
+    min-height: 0px;
+    padding: 0 10px;
+
+    overflow: hidden auto;
+
+    scrollbar-gutter: stable;
+
+    &::-webkit-scrollbar-thumb {
+      width: 10px;
+
+      background-color: #0000001a;
+
+      border-radius: 10px;
+    }
+    &::-webkit-scrollbar-track {
+      width: 10px;
+
+      background-color: transparent;
+
+      border-radius: 10px;
+    }
+  }
+}

package/src/components/Chat/ChatHistory/index.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, useEffect, ReactNode } from "react";
+import styles from "./index.module.less";
+import { NewChatButton, HistoryGroup } from "./_components";
+
+export interface ChatHistoryData {
+  id: string;
+  name: string;
+  conversationId: string;
+  [key: string]: unknown;
+}
+
+export interface ChatHistoryProps {
+  historyList?: Record<string, ChatHistoryData[]>;
+  updateTitle?: (chatId: string, title: string) => void;
+  currentChatId?: string;
+  deleteHistory?: (item?: ChatHistoryData) => void;
+  onNewChat?: () => void;
+  onChatItemClick?: (item: ChatHistoryData) => void;
+  width?: string;
+  onScrollEnd?: () => void;
+  tools?: ReactNode;
+}
+
+const ChatHistory: React.FC<ChatHistoryProps> = (props) => {
+  const {
+    historyList,
+    currentChatId,
+    updateTitle,
+    deleteHistory,
+    onNewChat,
+    onChatItemClick,
+    width,
+    onScrollEnd,
+    tools,
+  } = props;
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // 滚动到底部处理
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer || !onScrollEnd) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      // 当滚动到底部时（允许 5px 的误差）
+      if (scrollHeight - scrollTop - clientHeight < 5) {
+        onScrollEnd();
+      }
+    };
+
+    scrollContainer.addEventListener("scroll", handleScroll);
+    return () => {
+      scrollContainer.removeEventListener("scroll", handleScroll);
+    };
+  }, [onScrollEnd]);
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className={styles.historyContent}
+      style={{ width }}
+    >
+      <NewChatButton onClick={onNewChat} />
+      {tools && <div className={styles.tools}>{tools}</div>}
+      {historyList && (
+        <div className={styles.historyList}>
+          {Object.keys(historyList)?.map((key) => (
+            <HistoryGroup
+              key={key}
+              title={key}
+              items={historyList[key]}
+              currentChatId={currentChatId}
+              updateTitle={updateTitle}
+              deleteHistory={deleteHistory}
+              onItemClick={onChatItemClick}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatHistory;

package/src/components/Chat/ChatInput/_components/AgentToggleButton/index.module.less

@@ -0,0 +1,29 @@
+.featureToggle {
+  display: flex;
+  align-items: center;
+  column-gap: 2px;
+  padding: 0 11px;
+  border-radius: 4px;
+  border: 1px solid #0e59ef;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  height: 100%;
+  background-color: #fff;
+
+  .icon {
+    font-size: 22px;
+  }
+
+  &.active {
+    color: #0e59ef;
+    border-color: #0e59ef;
+    background-color: #0e59ef22;
+  }
+
+  &:hover {
+    color: #4c4c4c;
+    border-color: rgba(0, 0, 0, 0.12);
+    background-color: #e0e4ed;
+  }
+}

package/src/components/Chat/ChatInput/_components/AgentToggleButton/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import classNames from "classnames";
+import Icon from "../../../../Icon";
+import styles from "./index.module.less";
+
+export interface AgentToggleConfig {
+  key: string;
+  icon: string;
+  label: string;
+  className?: string;
+}
+
+interface AgentToggleButtonProps {
+  config: AgentToggleConfig;
+  active: boolean;
+  onClick: () => void;
+}
+
+const AgentToggleButton: React.FC<AgentToggleButtonProps> = ({
+  config,
+  active,
+  onClick,
+}) => {
+  return (
+    <li>
+      <div
+        className={classNames(styles.featureToggle, config.className, {
+          [styles.active]: active,
+        })}
+        onClick={onClick}
+      >
+        <Icon icon={config.icon} className={styles.icon} />
+        <span>{config.label}</span>
+      </div>
+    </li>
+  );
+};
+
+export default AgentToggleButton;

package/src/components/Chat/ChatInput/_components/FileList/index.module.less

@@ -0,0 +1,29 @@
+.fileList {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+
+  > div {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+    padding: 4px 10px;
+    font-size: 14px;
+    color: #424242;
+    background: #f2f4f7;
+    border-radius: 3px;
+    transition: box-shadow 0.3s, color 0.3s;
+    cursor: pointer;
+    
+    .close {
+      font-size: 16px;
+    }
+    
+    &:hover {
+      color: #0e59ef;
+    }
+  }
+}
+

package/src/components/Chat/ChatInput/_components/FileList/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { UploadFile } from "antd";
+import Icon from "../../../../Icon";
+import styles from "./index.module.less";
+
+interface FileListProps {
+  fileList: UploadFile[];
+  onRemove: (uid: string) => void;
+}
+
+const FileList: React.FC<FileListProps> = ({ fileList, onRemove }) => {
+  if (!fileList.length) return null;
+
+  return (
+    <div className={styles.fileList}>
+      {fileList?.map((item) => (
+        <div key={item.uid}>
+          <span>{item.name}</span>
+          <Icon
+            icon="heroicons-outline:x"
+            className={styles.close}
+            onClick={() => onRemove(item.uid)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FileList;

package/src/components/Chat/ChatInput/_components/SendButton/index.module.less

@@ -0,0 +1,18 @@
+.send {
+  &:not([disabled]) {
+    background: linear-gradient(243deg, #8a66fb 0%, #126dff 100%);
+    border: none;
+  }
+
+  display: flex;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+
+  .ant-btn-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Chat/ChatInput/_components/SendButton/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Tooltip } from "antd";
+import Button from "../../../../Button";
+import Icon from "../../../../Icon";
+import styles from "./index.module.less";
+
+interface SendButtonProps {
+  value: string;
+  onSend: () => void;
+  disabled?: boolean;
+  sendIcon?: string;
+}
+
+const SendButton: React.FC<SendButtonProps> = ({
+  value,
+  onSend,
+  disabled,
+  sendIcon = "tabler:arrow-up",
+}) => {
+  return (
+    <Tooltip title={!value ? "请输入你的问题" : undefined}>
+      <li>
+        <Button
+          type="primary"
+          icon={<Icon icon={sendIcon} fontSize={22} />}
+          className={styles.send}
+          style={
+            value.trim() === ""
+              ? {
+                  background:
+                    "linear-gradient(243deg, #cbbffc 0%, #9ec3fe 100%)",
+                }
+              : {}
+          }
+          onClick={onSend}
+          disabled={disabled}
+        />
+      </li>
+    </Tooltip>
+  );
+};
+
+export default SendButton;

package/src/components/Chat/ChatInput/_components/StopButton/index.module.less

@@ -0,0 +1,10 @@
+.stop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 32px;
+  height: 32px;
+
+  cursor: pointer;
+}

package/src/components/Chat/ChatInput/_components/StopButton/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Icon from "../../../../Icon";
+import styles from "./index.module.less";
+
+interface StopButtonProps {
+  onStop: () => void;
+  stopIcon?: string;
+}
+
+const StopButton: React.FC<StopButtonProps> = (props) => {
+  const { onStop, stopIcon = "eos-icons:loading" } = props;
+
+  return (
+    <li>
+      <div className={styles.stop}>
+        <Icon icon={stopIcon} fontSize={24} onClick={onStop} />
+      </div>
+    </li>
+  );
+};
+
+export default StopButton;

package/src/components/Chat/ChatInput/_components/UploadButton/index.module.less

@@ -0,0 +1,12 @@
+.clip {
+  width: 32px;
+  height: 32px;
+
+  border-radius: 4px;
+
+  .ant-btn-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/Chat/ChatInput/_components/UploadButton/index.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Tooltip, UploadFile } from "antd";
+import Icon from "../../../../Icon";
+import Upload from "../../../../Upload";
+import styles from "./index.module.less";
+import { validateFileSize, processFileList } from "../../_utils";
+import Button from "../../../../Button";
+
+interface UploadButtonProps {
+  onFileListChange?: (fileList: UploadFile[]) => void;
+  fileList: UploadFile[];
+  uploadConfig?: {
+    action?: string;
+    accept?: string;
+    size?: number;
+    data?: Record<string, string>;
+  };
+  onUploadingChange?: (isUploading: boolean) => void;
+  // 拦截点击事件
+  onInterceptClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+}
+
+const UploadButton: React.FC<UploadButtonProps> = (props) => {
+  const {
+    onFileListChange,
+    fileList,
+    uploadConfig = {},
+    onUploadingChange,
+    onInterceptClick,
+  } = props;
+  const [isUpload, setIsUpload] = useState<boolean>(false);
+
+  const {
+    action,
+    accept = ".pdf,.txt,.csv,.docx,.doc,.xlsx,.xls,.pptx,.ppt,.md,.html,.json,.xml,.yaml,.yml,.toml,.ini,.log,.css,.js,.jsx,.ts,.tsx,.py,.java,.cpp,.c,.h,.hpp,.sh,.bat,.ps1,.sql,.properties,.conf,.config,.rtf",
+    size = 20,
+    data,
+  } = uploadConfig;
+
+  return (
+    <Tooltip title="上传文件">
+      <li>
+        <Upload
+          action={action}
+          accept={accept}
+          multiple={true}
+          fileList={fileList}
+          data={data}
+          disabled={isUpload}
+          listType="text"
+          size={size}
+          beforeUpload={(file) => {
+            return validateFileSize(file, size);
+          }}
+          onChange={({ fileList: newFileList }) => {
+            const processedList = processFileList(newFileList);
+            onFileListChange?.(processedList);
+          }}
+          onUploadingList={(list) => {
+            const uploading = Object.keys(list).length > 0;
+            setIsUpload(uploading);
+            onUploadingChange?.(uploading);
+          }}
+          showUploadList={false}
+        >
+          <Button
+            className={styles.clip}
+            icon={
+              <Icon
+                icon={
+                  isUpload
+                    ? "eos-icons:loading"
+                    : "heroicons-outline:paper-clip"
+                }
+                fontSize={22}
+                color="#ababab"
+              />
+            }
+            onClick={
+              onInterceptClick
+                ? (e) => {
+                    e.stopPropagation();
+                    onInterceptClick(e);
+                  }
+                : undefined
+            }
+          />
+        </Upload>
+      </li>
+    </Tooltip>
+  );
+};
+
+export default UploadButton;

package/src/components/Chat/ChatInput/_components/index.ts

@@ -0,0 +1,6 @@
+export { default as FileList } from "./FileList";
+export { default as AgentToggleButton } from "./AgentToggleButton";
+export type { AgentToggleConfig } from "./AgentToggleButton";
+export { default as UploadButton } from "./UploadButton";
+export { default as SendButton } from "./SendButton";
+export { default as StopButton } from "./StopButton";

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

@@ -0,0 +1,3 @@
+export { useFileList } from "./useFileList";
+export { useCurrentModel } from "./useCurrentModel";
+

package/src/components/Chat/ChatInput/_hooks/useCurrentModel.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { ModelConfig } from "..";
+
+export const useCurrentModel = (
+  modelList?: ModelConfig[],
+  modelType?: string
+) => {
+  const [currentModel, setCurrentModel] = useState<ModelConfig | null>(null);
+
+  useEffect(() => {
+    if (modelType && modelList) {
+      setCurrentModel(modelList.find((i) => i.value === modelType) || null);
+    } else {
+      setCurrentModel(null);
+    }
+  }, [modelType, modelList]);
+
+  return currentModel;
+};

package/src/components/Chat/ChatInput/_hooks/useFileList.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { UploadFile } from "antd";
+import { Equal } from "hsu-utils";
+
+export const useFileList = (fileList?: UploadFile[]) => {
+  const [internalFileList, setInternalFileList] = useState<UploadFile[]>([]);
+
+  useEffect(() => {
+    if (Equal.ObjEqual(fileList || [], internalFileList)) return;
+    setInternalFileList(fileList || []);
+  }, [fileList, internalFileList]);
+
+  return {
+    fileList: internalFileList,
+    setFileList: setInternalFileList,
+  };
+};
+

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

@@ -0,0 +1,98 @@
+import { UploadFile } from "antd";
+import { notification } from "antd";
+
+/**
+ * 处理文件上传响应
+ */
+export const handleUploadResponse = (
+  fileList: UploadFile[],
+  file: UploadFile,
+  index: number
+): boolean => {
+  if (file.status === "error") {
+    notification.error({
+      message: file.error?.message || "上传失败",
+    });
+    fileList.splice(index, 1);
+    return false;
+  }
+
+  if (file.response) {
+    if (
+      file.response?.code !== 0 &&
+      file.response?.code !== 200 &&
+      file.response?.code !== undefined
+    ) {
+      notification.error({
+        message: file.response.msg,
+      });
+      fileList.splice(index, 1);
+      return false;
+    } else {
+      if (file.response?.data?.url) {
+        file.url = file.response.data.url;
+      }
+      if (file.response?.url) {
+        file.url = file.response.url;
+      }
+    }
+  } else {
+    fileList.splice(index, 1);
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * 验证文件大小
+ */
+export const validateFileSize = (file: File, maxSize: number): boolean => {
+  if (file.size > maxSize * 1024 * 1024) {
+    notification.error({
+      message: `文件大小不能超过${maxSize}MB`,
+    });
+    return false;
+  }
+  return true;
+};
+
+/**
+ * 处理文件列表变更
+ */
+export const processFileList = (fileList: UploadFile[]): UploadFile[] => {
+  const processedList: UploadFile[] = [];
+
+  fileList?.forEach((file: UploadFile) => {
+    if (file.status === "error") {
+      notification.error({
+        message: file.error?.message || "上传失败",
+      });
+      return;
+    }
+
+    if (file.response) {
+      if (
+        file.response?.code !== 0 &&
+        file.response?.code !== 200 &&
+        file.response?.code !== undefined
+      ) {
+        notification.error({
+          message: file.response.msg,
+        });
+        return;
+      } else {
+        if (file.response?.data?.url) {
+          file.url = file.response.data.url;
+        }
+        if (file.response?.url) {
+          file.url = file.response.url;
+        }
+      }
+    }
+
+    processedList.push(file);
+  });
+
+  return processedList;
+};