bi-sdk-react 0.0.3 → 0.0.5

package/src/components/panel/ChatInput.tsx

@@ -1,3 +1,17 @@
+import {
+  AudioOutlined,
+  DeleteOutlined as DelIcon, DeleteOutlined, FileExcelOutlined, InboxOutlined, SendOutlined
+} from "@ant-design/icons";
+import {
+  Button,
+  Dropdown,
+  Input,
+  Modal,
+  Tooltip,
+  Typography,
+  Upload,
+  message
+} from "antd";
 import React, {
   useEffect,
   useImperativeHandle,
@@ -6,9 +20,8 @@ import React, {
   useState,
 } from "react";
 import styled from "styled-components";
-import { Input, Button, Space, Tooltip, Dropdown, Switch, Upload } from "antd";
-import { PaperClipOutlined, SendOutlined } from "@ant-design/icons";
-import * as XLSX from "xlsx";
+import { IconFont } from "../icon/IconFont";
+import { FetchType } from "../typing";
 
 export type ChatInputProps = {
   value?: string;
@@ -17,22 +30,25 @@ export type ChatInputProps = {
   sending?: boolean;
   rows?: number;
   agentList?: { id: string | number; name: string }[];
-  title?: string;
   agentId?: string | number | null;
   attachments?: any[];
   onInput?: (text: string) => void;
   onSubmit?: (data: {
-    demand: string;
-    title: string;
-    agentId?: string | number;
-    csvData: Record<string, string>;
+    message: string;
+    agents?: { id: string | number; name: string }[] | null;
+    files?: { id: string; name: string; extension: string }[] | null;
   }) => void;
-  onUpdateTitle?: (title: string) => void;
   onUpdateAgentId?: (id: string | number | null) => void;
   onUpdateAttachments?: (list: any[]) => void;
+  onUploading?: FetchType["upload"];
+  style?: React.CSSProperties;
 };
 
-const Wrapper = styled.div`
+const AgentListDropdownContent = styled.div`
+  max-height: 400px;
+  overflow: auto;
+  background: #fff;
+
   ul.agent-list {
     margin: 0;
     padding: 0;
@@ -57,6 +73,9 @@ const Wrapper = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+`;
+
+const Wrapper = styled.div`
   .chat-input {
     display: flex;
     flex-direction: column;
@@ -93,6 +112,11 @@ const Wrapper = styled.div`
     background-color: #fafafa;
     font-size: 12px;
     position: relative;
+
+    .anticon {
+      font-size: 36px;
+      color: var(--ant-green-8);
+    }
   }
   .attachment-card .name {
     max-width: 80px;
@@ -108,9 +132,19 @@ const Wrapper = styled.div`
     position: absolute;
     top: 4px;
     right: 2px;
+
+    .anticon {
+      font-size: 12px;
+      color: var(--ant-color-text-tertiary);
+    }
   }
   .attachment-card .remove:hover {
     color: #666;
+
+    .anticon {
+      font-size: 12px;
+      color: var(--ant-color-text-secondary);
+    }
   }
   .agent-info {
     box-sizing: border-box;
@@ -120,11 +154,17 @@ const Wrapper = styled.div`
     border-bottom: none;
     background-color: #eff1f9;
     font-size: 14px;
-    color: #555;
+    color: var(--ant-color-text-label);
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    flex-wrap: wrap;
     user-select: none;
+    gap: 8px;
+
+    a {
+      color: var(--ant-color-text-disabled);
+      margin-left: 4px;
+    }
   }
   .attachment-bar + .agent-info {
     border-radius: 0;
@@ -207,21 +247,6 @@ const Wrapper = styled.div`
   .agent-trigger:hover {
     background-color: #f7f7f7;
   }
-  .title-toggle {
-    display: none;
-    align-items: center;
-    gap: 6px;
-    background-color: #ffffff;
-    border: solid 1px #dcdcdc;
-    border-radius: 5px;
-    padding: 0 4px;
-    height: 26px;
-  }
-  .title-toggle .label {
-    color: #666;
-    font-size: 12px;
-    user-select: none;
-  }
   .attach-upload {
     display: inline-flex;
     align-items: center;
@@ -235,6 +260,9 @@ const Wrapper = styled.div`
     font-size: 12px;
     cursor: pointer;
   }
+  .ant-btn .anticon {
+    color: var(--ant-color-text-label);
+  }
   .tips {
     color: #999;
     font-size: 12px;
@@ -249,7 +277,7 @@ const Wrapper = styled.div`
     width: 50px;
     height: 26px;
     color: #fff;
-    font-size: 22px;
+    font-size: 14px;
     background-color: rgb(184, 184, 191);
     border: unset;
     border-radius: 14px;
@@ -257,13 +285,161 @@ const Wrapper = styled.div`
     cursor: pointer;
   }
   .send-btn.send-btn-active {
-    background-color: var(--chat-blue);
+    background-color: var(--ant-color-primary);
   }
 `;
 
 const DEFAULT_AGENT_LIST: any[] = [];
 const DEFAULT_ATTACHMENTS: any[] = [];
 
+const ALLOWED_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "audio/wav",
+];
+
+const ALLOWED_EXTENSIONS = [".xlsx", ".wav"];
+
+const FileUploadModal: React.FC<{
+  open: boolean;
+  onCancel: () => void;
+  onOk: (files: File[]) => void;
+  allowedExtensions: string[];
+  allowedMimeTypes: string[];
+}> = ({ open, onCancel, onOk, allowedExtensions, allowedMimeTypes }) => {
+  const [fileList, setFileList] = useState<File[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      setFileList([]);
+    }
+  }, [open]);
+
+  const handleOk = () => {
+    onOk(fileList);
+    onCancel();
+  };
+  const acceptFiles = [...ALLOWED_EXTENSIONS, ...ALLOWED_MIME_TYPES].join(",");
+
+  const props = {
+    name: "file",
+    multiple: true,
+    accept: acceptFiles,
+    fileList: [], // Managed manually
+    beforeUpload: (file: File) => {
+      const mimeOk = allowedMimeTypes.includes(file.type) || !file.type;
+      const ext = (file.name || "")
+        .substring(file.name.lastIndexOf("."))
+        .toLowerCase();
+      const extOk = allowedExtensions.includes(ext);
+
+      if (!mimeOk && !extOk) {
+        message.error(`不支持的文件类型: ${file.name}`);
+        return Upload.LIST_IGNORE;
+      }
+
+      setFileList((prev) => [...prev, file]);
+      return false;
+    },
+  };
+
+  const removeFile = (index: number) => {
+    setFileList((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <Modal
+      title="上传文件"
+      open={open}
+      okText="上传"
+      cancelText="取消"
+      onOk={handleOk}
+      onCancel={onCancel}
+      width={600}
+    >
+      <div style={{ marginBottom: 16 }}>
+        <Typography.Text type="secondary">
+          支持的文件类型：{allowedExtensions.join(", ")}
+          <br />
+          单次支持上传多个文件，请确保文件内容合规。
+          <br />
+          Excel 暂不支持加密文件。
+          <br />
+          不支持 xls 电子表格，请自行转换为 xlsx 格式。
+          <br />
+          Excel 仅支持第一行为表头、第二行开始为数据，不支持合并单元格。
+        </Typography.Text>
+      </div>
+      <Upload.Dragger {...props}>
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p className="ant-upload-text">点击或将文件拖拽到此处上传</p>
+        <p className="ant-upload-hint">
+          支持上传Excel表格数据或音频文件进行分析
+        </p>
+      </Upload.Dragger>
+      {fileList.length > 0 && (
+        <div style={{ marginTop: 16 }}>
+          <Typography.Title level={5} style={{ fontSize: 14, marginBottom: 8 }}>
+            已选文件 ({fileList.length})
+          </Typography.Title>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+              maxHeight: 200,
+              overflowY: "auto",
+            }}
+          >
+            {fileList.map((file, index) => (
+              <div
+                key={`${file.name}-${index}`}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "8px 12px",
+                  background: "#f5f5f5",
+                  borderRadius: 4,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    overflow: "hidden",
+                  }}
+                >
+                  {file.name.endsWith(".xlsx") ? (
+                    <FileExcelOutlined style={{ color: "#52c41a" }} />
+                  ) : (
+                    <AudioOutlined style={{ color: "#1890ff" }} />
+                  )}
+                  <Typography.Text ellipsis style={{ maxWidth: 300 }}>
+                    {file.name}
+                  </Typography.Text>
+                  <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                    ({(file.size / 1024).toFixed(1)} KB)
+                  </Typography.Text>
+                </div>
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<DelIcon />}
+                  onClick={() => removeFile(index)}
+                  danger
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
 export const ChatInput = React.forwardRef<
   { focus: () => void },
   ChatInputProps
@@ -276,35 +452,35 @@ export const ChatInput = React.forwardRef<
       sending = false,
       rows = 6,
       agentList = DEFAULT_AGENT_LIST,
-      title = "",
       agentId = null,
       attachments = DEFAULT_ATTACHMENTS,
       onInput,
       onSubmit,
-      onUpdateTitle,
       onUpdateAgentId,
       onUpdateAttachments,
+      onUploading,
+      style = {},
     },
     ref
   ) => {
     const inputRef = useRef<any>(null);
-    const [localTitle, setLocalTitle] = useState(title || "");
-    const [localAgentId, setLocalAgentId] = useState<string | number | null>(
-      agentId || null
-    );
-    const [selectedAgent, setSelectedAgent] = useState<{
-      id: string | number;
-      name: string;
-    } | null>(null);
+    const [selectedAgent, setSelectedAgent] = useState<
+      {
+        id: string | number;
+        name: string;
+      }[]
+    >([]);
     const [localValue, setLocalValue] = useState(value || "");
     const [lastSubmitAt, setLastSubmitAt] = useState(0);
     const minIntervalMs = 400;
-    const [showTitle, setShowTitle] = useState(false);
-    const acceptXlsx =
-      ".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-    const [localAttachments, setLocalAttachments] = useState<any[]>(
-      Array.isArray(attachments) ? attachments : []
-    );
+    const [localAttachments, setLocalAttachments] = useState<
+      {
+        id: string;
+        name: string;
+        size: number;
+      }[]
+    >(Array.isArray(attachments) ? attachments : []);
+    const [uploadModalOpen, setUploadModalOpen] = useState<boolean>(false);
     const isMobile = useMemo(() => false, []);
     useImperativeHandle(ref, () => ({
       focus() {
@@ -315,37 +491,22 @@ export const ChatInput = React.forwardRef<
     useEffect(() => {
       onInput && onInput(localValue);
     }, [localValue]);
-    useEffect(() => setLocalTitle(title || ""), [title]);
-    useEffect(() => {
-      setLocalAgentId(agentId || null);
-      setSelectedAgent(
-        agentId ? agentList.find((s) => s.id === agentId) || null : null
-      );
-    }, [agentId, agentList]);
+
     useEffect(
       () => setLocalAttachments(Array.isArray(attachments) ? attachments : []),
       [attachments]
     );
+
     const canSubmit = !!(localValue && localValue.trim());
-    const agent = useMemo(() => {
-      if (!localAgentId) return null;
-      return agentList.find((it) => it.id === localAgentId) || null;
-    }, [localAgentId, agentList]);
-    const onTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const v = e.target.value;
-      setLocalTitle(v);
-      onUpdateTitle && onUpdateTitle(v);
-    };
+
     const onAgentSelect = (item: { id: string | number; name: string }) => {
       const id = item.id || null;
-      setLocalAgentId(id);
       onUpdateAgentId && onUpdateAgentId(id);
-      setSelectedAgent(item);
+      setSelectedAgent((prev) => [...prev, item]);
     };
-    const clearAgent = () => {
-      setLocalAgentId(null);
+    const onRemoveAgent = (index: number) => {
       onUpdateAgentId && onUpdateAgentId(null);
-      setSelectedAgent(null);
+      setSelectedAgent((prev) => prev.filter((_, i) => i !== index));
     };
     const onKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === "Enter") {
@@ -356,52 +517,30 @@ export const ChatInput = React.forwardRef<
         submit();
       }
     };
-    const convertXlsxToCsv = async (arrayBuffer: ArrayBuffer) => {
-      const workbook = XLSX.read(arrayBuffer, {
-        type: "array",
-        cellDates: true,
-        dateNF: "yyyy-mm-dd hh:mm:ss",
-      });
-      const result: Record<string, string> = {};
-      workbook.SheetNames.forEach((name) => {
-        const sheet = workbook.Sheets[name];
-        const csv = XLSX.utils.sheet_to_csv(sheet);
-        result[name] = csv;
-      });
-      return result;
-    };
-    const beforeUploadXlsx = (file: File) => {
-      const mimeOk =
-        file.type ===
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
-        !file.type;
-      const extOk = (file.name || "").toLowerCase().endsWith(".xlsx");
-      if (!mimeOk || !extOk) {
-        return Upload.LIST_IGNORE;
-      }
-      const reader = new FileReader();
-      reader.onload = async (e) => {
+    const handleUploadFiles = async (files: File[]) => {
+      setUploadModalOpen(false);
+      if (!onUploading || !files.length) return;
+      const newAttachments: typeof localAttachments = [];
+      for (const file of files) {
         try {
-          const buffer = e.target?.result as ArrayBuffer;
-          const converted = await convertXlsxToCsv(buffer);
-          const next = [
-            ...localAttachments,
-            {
-              uid: `${Date.now()}_${Math.random()}`,
+          const res = await onUploading(file);
+          if (res) {
+            newAttachments.push({
+              id: res.id,
               name: file.name,
               size: (file as any).size,
-              csvBySheet: converted,
-            },
-          ];
-          setLocalAttachments(next);
-          onUpdateAttachments && onUpdateAttachments(next);
-        } catch {}
-      };
-      reader.readAsArrayBuffer(file);
-      return false;
+            });
+          }
+        } catch (err) {
+          console.error(err);
+        }
+      }
+      setLocalAttachments([...localAttachments, ...newAttachments]);
+      onUpdateAttachments &&
+        onUpdateAttachments([...localAttachments, ...newAttachments]);
     };
-    const removeAttachment = (uid: string) => {
-      const next = localAttachments.filter((a) => a.uid !== uid);
+    const removeAttachment = (id: string) => {
+      const next = localAttachments.filter((a) => a.id !== id);
       setLocalAttachments(next);
       onUpdateAttachments && onUpdateAttachments(next);
     };
@@ -413,19 +552,19 @@ export const ChatInput = React.forwardRef<
       const text = (localValue || "").trim();
       if (!text) return;
       const data = {
-        demand: text,
-        title: showTitle ? localTitle : "",
-        agentId: localAgentId || undefined,
-        csvData: localAttachments.reduce(
-          (acc, a) => ({ ...acc, [a.name]: a.csvBySheet }),
-          {}
-        ),
+        message: text,
+        agents: selectedAgent.map((it) => ({ id: it.id, name: it.name })),
+        files: localAttachments.map((file) => ({
+          id: file.id,
+          name: file.name,
+          extension: file.name.substring(file.name.lastIndexOf(".")),
+        })),
       };
       onSubmit && onSubmit(data);
       setLocalValue("");
     };
     const overlay = (
-      <div style={{ maxHeight: 400, overflow: "auto", background: "#fff" }}>
+      <AgentListDropdownContent>
         <ul className="agent-list">
           {agentList.map((item) => (
             <li key={String(item.id)}>
@@ -433,51 +572,50 @@ export const ChatInput = React.forwardRef<
             </li>
           ))}
         </ul>
-      </div>
+      </AgentListDropdownContent>
     );
     return (
-      <Wrapper>
+      <Wrapper style={style}>
         <div className="chat-input">
           <div className="input-stack">
             {localAttachments.length > 0 && (
               <div className="attachment-bar">
                 {localAttachments.map((a) => (
-                  <Tooltip
-                    key={a.uid}
-                    title={a.name}
-                    className="attachment-card"
-                  >
-                    <svg style={{ width: 25, height: 25 }} viewBox="0 0 24 24">
-                      <rect x="3" y="3" width="18" height="18" fill="#1f6f43" />
-                    </svg>
-                    <span className="name">{a.name}</span>
+                  <div key={a.id} className="attachment-card">
+                    {a.name.endsWith(".xlsx") ? (
+                      <IconFont type="icon-excel" />
+                    ) : (
+                      <IconFont type="icon-audio" />
+                    )}
+
+                    <Typography.Text
+                      className="name"
+                      ellipsis={{ tooltip: a.name }}
+                    >
+                      {a.name}
+                    </Typography.Text>
                     <a
                       className="remove"
-                      onClick={() => removeAttachment(a.uid)}
+                      onClick={() => removeAttachment(a.id)}
                     >
-                      ×
+                      <DeleteOutlined />
                     </a>
-                  </Tooltip>
+                  </div>
                 ))}
               </div>
             )}
-            {selectedAgent && (
+            {selectedAgent.length > 0 && (
               <div className="agent-info">
-                <span className="name">@ {selectedAgent.name}</span>
-                <a className="remove" onClick={clearAgent}>
-                  ×
-                </a>
+                {selectedAgent.map((item, index) => (
+                  <div key={String(item.id)}>
+                    <span className="name">@ {item.name}</span>
+                    <a className="remove" onClick={() => onRemoveAgent(index)}>
+                      ×
+                    </a>
+                  </div>
+                ))}
               </div>
             )}
-            {showTitle && (
-              <Input
-                className="title-input"
-                placeholder="请输入报告标题（可选）"
-                disabled={disabled || sending}
-                value={localTitle}
-                onChange={onTitleChange}
-              />
-            )}
             <Input.TextArea
               ref={inputRef}
               className="input textarea-stacked"
@@ -491,43 +629,47 @@ export const ChatInput = React.forwardRef<
           </div>
           <div className="footer">
             <div className="left">
-              <Dropdown
-                trigger={["click"]}
-                popupRender={() => overlay}
-                placement="topLeft"
-              >
-                <Tooltip title="选择助理">
-                  <Button
-                    className="agent-trigger"
-                    onClick={(e) => e.preventDefault()}
-                  >
-                    @
-                  </Button>
-                </Tooltip>
-              </Dropdown>
-              <div className="title-toggle">
-                <span className="label">标题</span>
-                <Switch
-                  size="small"
-                  checked={showTitle}
-                  disabled={disabled || sending}
-                  onChange={(v) => setShowTitle(v)}
-                />
-              </div>
-              <Upload
-                multiple
-                accept={acceptXlsx}
-                beforeUpload={beforeUploadXlsx}
-                showUploadList={false}
-                disabled={disabled || sending}
-              >
-                <Tooltip title="上传 Excel 数据">
-                  <Button
-                    className="attach-upload"
-                    icon={<PaperClipOutlined />}
+              {!!agentList?.length && (
+                <Dropdown
+                  trigger={["click"]}
+                  popupRender={() => overlay}
+                  placement="topLeft"
+                  styles={{
+                    root: {
+                      boxShadow: "var(--ant-box-shadow-card)",
+                    },
+                  }}
+                >
+                  <Tooltip title="选择助理">
+                    <Button
+                      className="agent-trigger"
+                      onClick={(e) => e.preventDefault()}
+                    >
+                      <IconFont type="icon-at" />
+                    </Button>
+                  </Tooltip>
+                </Dropdown>
+              )}
+              {onUploading && (
+                <>
+                  <Tooltip title="上传文件">
+                    <Button
+                      className="attach-upload"
+                      onClick={() => setUploadModalOpen(true)}
+                      disabled={disabled || sending}
+                    >
+                      <IconFont type="icon-paper-clip" />
+                    </Button>
+                  </Tooltip>
+                  <FileUploadModal
+                    open={uploadModalOpen}
+                    onCancel={() => setUploadModalOpen(false)}
+                    onOk={handleUploadFiles}
+                    allowedExtensions={ALLOWED_EXTENSIONS}
+                    allowedMimeTypes={ALLOWED_MIME_TYPES}
                   />
-                </Tooltip>
-              </Upload>
+                </>
+              )}
             </div>
             <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
               {!isMobile && (