@hsu-react/ui 0.0.1

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

@@ -0,0 +1,100 @@
+.ChatInputWrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  width: 100%;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.ChatInput {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  width: 100%;
+  padding: 10px;
+
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+
+  .textArea {
+    border: none !important;
+    box-shadow: none !important;
+    font-size: 14px;
+
+    > textarea {
+      padding: 0;
+    }
+  }
+
+  .tool {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    column-gap: 5px;
+
+    width: 100%;
+
+    > ul {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+      min-width: 0;
+
+      > li {
+        display: flex;
+        align-items: center;
+
+        .select {
+          font-size: 14px;
+          border: 1px solid #d9d9d9;
+          border-radius: 4px;
+          box-shadow: none;
+          opacity: 0.8;
+          width: 140px;
+          height: 100%;
+          .ant-select-selector {
+            border: none;
+            margin: 1px 0 0;
+          }
+          &:hover {
+            opacity: 1;
+          }
+
+          &[class*="disabled"] {
+            color: #000;
+            background: transparent;
+            border: none;
+            box-shadow: none;
+            opacity: 0.7;
+            cursor: default;
+            * {
+              cursor: default;
+            }
+          }
+        }
+      }
+    }
+
+    li {
+      height: 32px;
+    }
+  }
+}
+
+.button {
+  width: 32px;
+  height: 32px;
+
+  border-radius: 4px;
+
+  .ant-btn-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,287 @@
+import React, { useState, useEffect } from "react";
+
+import Input from "../../Input";
+import { Select, Tooltip, UploadFile } from "antd";
+import styles from "./index.module.less";
+import { useFileList } from "./_hooks";
+import {
+  FileList,
+  AgentToggleButton,
+  SendButton,
+  StopButton,
+  UploadButton,
+  AgentToggleConfig,
+} from "./_components";
+import classNames from "classnames";
+import Button, { ButtonProps } from "../../Button";
+export type { AgentToggleConfig } from "./_components";
+
+export interface AgentConfig {
+  key: string;
+  open: boolean;
+}
+
+export interface ModelConfig {
+  label: string;
+  value: string;
+  /**
+   * 该模型支持的功能键列表，用于从 agents 中筛选显示的功能
+   * 如果未设置，则显示所有 agents
+   */
+  agents: AgentConfig[];
+  /**
+   * 该模型的回答是否包含思考部分
+   * 如果为 false，则不处理和显示思考内容
+   */
+  hasThinking?: boolean;
+  [key: string]: unknown;
+}
+
+export interface UploadConfig {
+  action?: string;
+  accept?: string;
+  size?: number;
+  data?: Record<string, string>;
+}
+
+export interface ChatInputProps {
+  onSend?: (value: string) => void;
+  assistanting?: boolean;
+  onStop?: () => void;
+  onFileListChange?: (fileList: UploadFile[]) => void;
+  fileList?: UploadFile[];
+  modelConfig?: {
+    modelList: ModelConfig[];
+    modelType: string;
+    setModelType: (value: string) => void;
+  };
+  agents?: AgentToggleConfig[];
+  /** agents 状态，用于受控模式 */
+  agentsState?: AgentConfig[];
+  onAgentsChange?: (agents: AgentConfig[]) => void;
+  placeholder?: string;
+  sendIcon?: string;
+  stopIcon?: string;
+  uploadConfig?: UploadConfig;
+  wrapperClassName?: string;
+  onFileInterceptClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+  buttonGroup?: ButtonProps[];
+  uploadEnabled?: boolean;
+}
+
+const ChatInput: React.FC<ChatInputProps> = (props) => {
+  const {
+    onSend,
+    assistanting,
+    onStop,
+    onFileListChange,
+    fileList: _fileList = [],
+    modelConfig,
+    agents = [],
+    agentsState: externalAgentsState,
+    onAgentsChange,
+    placeholder = "询问问题",
+    sendIcon,
+    stopIcon,
+    uploadConfig,
+    wrapperClassName,
+    onFileInterceptClick,
+    buttonGroup,
+    uploadEnabled = true,
+  } = props;
+
+  const [value, setValue] = useState<string>("");
+  const [isUpload, setIsUpload] = useState<boolean>(false);
+  const { fileList, setFileList } = useFileList(_fileList);
+
+  // 管理 agents 的内部状态（非受控模式）
+  const [internalAgentsState, setInternalAgentsState] = useState<AgentConfig[]>(
+    () => {
+      // 初始化状态：优先从当前模型的 agents 获取，否则从传入的 agents 配置中提取，默认 open 为 true
+      const currentModel = modelConfig?.modelList.find(
+        (m) => m.value === modelConfig?.modelType
+      );
+      if (currentModel?.agents && currentModel.agents.length > 0) {
+        return currentModel.agents;
+      }
+      return agents?.map((config) => ({
+        key: config.key,
+        open: true,
+      }));
+    }
+  );
+
+  // 判断是否为受控模式
+  const isControlled = externalAgentsState !== undefined;
+  // 使用外部状态或内部状态
+  const agentsState = isControlled ? externalAgentsState : internalAgentsState;
+
+  // 当模型切换时，同步更新 agents 状态（仅在非受控模式下）
+  useEffect(() => {
+    if (isControlled) return; // 受控模式下由外部管理状态
+
+    const currentModel = modelConfig?.modelList.find(
+      (m) => m.value === modelConfig?.modelType
+    );
+    if (currentModel?.agents && currentModel.agents.length > 0) {
+      setInternalAgentsState(currentModel.agents);
+      onAgentsChange?.(currentModel.agents);
+    }
+  }, [
+    modelConfig?.modelType,
+    modelConfig?.modelList,
+    onAgentsChange,
+    isControlled,
+  ]);
+
+  // 根据当前选中的模型，筛选出该模型支持的功能配置
+  const currentModel = modelConfig?.modelList.find(
+    (m) => m.value === modelConfig?.modelType
+  );
+  const availableFeatureConfigs = currentModel?.agents
+    ? agents.filter((config) =>
+        currentModel.agents.some((agent) => agent.key === config.key)
+      )
+    : agents;
+
+  // 处理 agent 状态切换
+  const handleAgentToggle = (key: string) => {
+    const newAgentsState = agentsState?.map((agent) =>
+      agent.key === key ? { ...agent, open: !agent.open } : agent
+    );
+
+    // 受控模式：只通知外部，由外部更新状态
+    // 非受控模式：更新内部状态
+    if (!isControlled) {
+      setInternalAgentsState(newAgentsState);
+    }
+    onAgentsChange?.(newAgentsState);
+  };
+
+  // 获取 agent 的激活状态
+  const getAgentActive = (key: string): boolean => {
+    return agentsState.find((agent) => agent.key === key)?.open ?? false;
+  };
+
+  // 处理文件列表移除
+  const handleFileRemove = (uid: string) => {
+    const newFileList = fileList.filter((v) => v.uid !== uid);
+    setFileList(newFileList);
+    onFileListChange?.(newFileList);
+  };
+
+  // 处理文件列表变更
+  const handleFileListChange = (newFileList: UploadFile[]) => {
+    setFileList(newFileList);
+    onFileListChange?.(newFileList);
+  };
+
+  // 处理发送
+  const handleSend = () => {
+    if (value.trim() !== "") {
+      setValue("");
+      onSend?.(value);
+    }
+  };
+
+  // 处理回车键
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (
+      e.key === "Enter" &&
+      !e.shiftKey &&
+      !assistanting &&
+      value.trim() !== ""
+    ) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  // 合并上传配置
+  const mergedUploadConfig: UploadConfig = {
+    action: uploadConfig?.action,
+    accept: uploadConfig?.accept,
+    size: uploadConfig?.size ?? 20,
+    data: uploadConfig?.data,
+  };
+
+  return (
+    <div className={classNames(styles.ChatInputWrapper, wrapperClassName)}>
+      <div className={styles.ChatInput}>
+        <FileList fileList={fileList} onRemove={handleFileRemove} />
+        <Input.TextArea
+          autoSize={{ minRows: 3, maxRows: 5 }}
+          className={styles.textArea}
+          placeholder={placeholder}
+          onChange={(v) => {
+            if (v.trim() === "") {
+              setValue("");
+            } else {
+              setValue(v);
+            }
+          }}
+          value={value}
+          onKeyDown={handleKeyDown}
+        />
+        <ul className={styles.tool}>
+          <ul>
+            {modelConfig && (
+              <li>
+                <Select
+                  options={modelConfig?.modelList}
+                  value={modelConfig?.modelType}
+                  className={styles.select}
+                  allowClear={false}
+                  onChange={(v) => {
+                    modelConfig?.setModelType?.(v);
+                  }}
+                />
+              </li>
+            )}
+            {availableFeatureConfigs?.map((config) => (
+              <AgentToggleButton
+                key={config.key}
+                config={config}
+                active={getAgentActive(config.key)}
+                onClick={() => handleAgentToggle(config.key)}
+              />
+            ))}
+          </ul>
+          {buttonGroup?.map((button: ButtonProps, idx: number) => (
+            <Tooltip title={button.title}>
+              <Button
+                key={idx}
+                {...button}
+                title=""
+                className={classNames(styles.button, button.className)}
+              />
+            </Tooltip>
+          ))}
+          {uploadEnabled && (
+            <UploadButton
+              onFileListChange={handleFileListChange}
+              fileList={fileList}
+              uploadConfig={mergedUploadConfig}
+              onUploadingChange={setIsUpload}
+              onInterceptClick={onFileInterceptClick}
+            />
+          )}
+          <>
+            {assistanting ? (
+              <StopButton onStop={onStop || (() => {})} stopIcon={stopIcon} />
+            ) : (
+              <SendButton
+                value={value}
+                onSend={handleSend}
+                sendIcon={sendIcon}
+                disabled={isUpload}
+              />
+            )}
+          </>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInput;

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.less

@@ -0,0 +1,51 @@
+.Copy {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  width: max-content;
+  padding: 2px 4px;
+
+  font-size: 14px;
+  line-height: 18px;
+  color: #5e6772;
+
+  cursor: pointer;
+
+  transition: color 0.3s, background-color 0.3s;
+
+  border-radius: 4px;
+
+  .icon {
+    font-size: 18px;
+    color: #5e6772;
+
+    transition: color 0.3s;
+  }
+
+  &:hover {
+    color: #060607;
+
+    background-color: #f3f5fc;
+
+    .icon {
+      color: #060607;
+    }
+  }
+}
+
+.Copyed {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--text-color);
+
+  cursor: default;
+
+  .icon {
+    font-size: 18px;
+  }
+}

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import Icon from "../../../../../../../Icon";
+import classNames from "classnames";
+import { message } from "antd";
+import styles from "./index.module.less";
+import clipboard from "copy-to-clipboard";
+import MarkdownIt from "markdown-it";
+import markdownLink from "markdown-it-link-attributes";
+
+interface CopyProps {
+  content: string;
+}
+
+const md = MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+});
+
+md.use(markdownLink, {
+  attrs: {
+    target: "_blank",
+    rel: "noopener",
+  },
+});
+
+const Copy: React.FC<CopyProps> = (props) => {
+  const { content } = props;
+
+  function copyMdText(text: string) {
+    if (!text) return;
+    const html = md.render(text);
+    const parser = new DOMParser();
+    const textContent = parser.parseFromString(html, "text/html")?.body
+      ?.textContent;
+    if (textContent) {
+      // const mdText = textContent ? textContent.replace(/\n{2,}/g, '\n') : '';
+      const result = clipboard(textContent);
+      if (result) {
+        message.success("复制成功");
+      }
+    }
+  }
+
+  const onCopy = () => {
+    if (content) {
+      copyMdText(content);
+    }
+  };
+
+  return (
+    <>
+      <div className={classNames(styles.Copy)} onClick={onCopy}>
+        <Icon icon="ci:copy" className={classNames(styles.icon)} />
+        {/* <span>{text ?? "复制"}</span> */}
+      </div>
+    </>
+  );
+};
+
+export default Copy;
+

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.module.less

@@ -0,0 +1,41 @@
+.like {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  .likeItem {
+    display: flex;
+    align-items: center;
+    column-gap: 2px;
+
+    width: max-content;
+    padding: 2px 4px;
+
+    font-size: 14px;
+    line-height: 18px;
+    color: #5e6772;
+
+    cursor: pointer;
+
+    transition: color 0.3s, background-color 0.3s;
+
+    .likeIcon {
+      font-size: 20px;
+      color: #5e6772;
+
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      color: #060607;
+
+      background-color: #f3f5fc;
+
+      border-radius: 4px;
+
+      .likeIcon {
+        color: #060607;
+      }
+    }
+  }
+}

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import Icon from "../../../../../../../Icon";
+import Form from "../../../../../../../Form";
+import styles from "./index.module.less";
+
+interface LikeDislikeProps {
+  messageId?: string;
+  initialLike?: boolean | null;
+  onLikeChange?: (
+    messageId: string,
+    like: boolean | null,
+    content: string
+  ) => void;
+}
+
+const LikeDislike: React.FC<LikeDislikeProps> = ({
+  messageId,
+  initialLike,
+  onLikeChange,
+}) => {
+  const [like, setLike] = useState<boolean | null>(null);
+  const [feedback, setFeedback] = useState<boolean>(false);
+
+  useEffect(() => {
+    setLike(initialLike ?? null);
+  }, [initialLike]);
+
+  if (!onLikeChange) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.like}>
+        <div
+          className={styles.likeItem}
+          onClick={() => {
+            setLike(like === true ? null : true);
+
+            if (messageId) {
+              onLikeChange?.(messageId, like === true ? null : true, "");
+            }
+          }}
+        >
+          <Icon
+            icon={`iconamoon:like-${like === true ? "fill" : "light"}`}
+            className={styles.likeIcon}
+          />
+        </div>
+        <div
+          className={styles.likeItem}
+          onClick={() => {
+            if (like === false) {
+              setLike(null);
+
+              if (messageId) {
+                onLikeChange?.(messageId, null, "");
+              }
+            } else {
+              setFeedback(true);
+            }
+          }}
+        >
+          <Icon
+            icon={`iconamoon:dislike-${like === false ? "fill" : "light"}`}
+            className={styles.likeIcon}
+          />
+        </div>
+      </div>
+
+      <Form.Modal
+        title="反馈"
+        open={feedback}
+        centered
+        className={styles.formModal}
+        onCancel={() => setFeedback(false)}
+        onOk={(data, form) => {
+          setFeedback(false);
+          setLike(false);
+
+          if (messageId) {
+            onLikeChange?.(messageId, false, (data.content as string) || "");
+          }
+
+          form.resetFields();
+        }}
+        width={"40%"}
+        maskClosable={false}
+        formItems={[
+          {
+            type: "TEXTAREA",
+            name: "content",
+            componentProps: {
+              rows: 10,
+            },
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default LikeDislike;
+