bi-sdk-react 0.0.4 → 0.0.6

package/src/components/panel/ChatInput.tsx

@@ -1,16 +1,16 @@
 import {
-  DeleteOutlined,
-  PaperClipOutlined,
-  SendOutlined,
+  AudioOutlined,
+  DeleteOutlined as DelIcon, DeleteOutlined, FileExcelOutlined, InboxOutlined, SendOutlined
 } from "@ant-design/icons";
 import {
   Button,
   Dropdown,
   Input,
-  Switch,
+  Modal,
   Tooltip,
   Typography,
   Upload,
+  message
 } from "antd";
 import React, {
   useEffect,
@@ -20,8 +20,8 @@ import React, {
   useState,
 } from "react";
 import styled from "styled-components";
-import * as XLSX from "xlsx";
 import { IconFont } from "../icon/IconFont";
+import { FetchType } from "../typing";
 
 export type ChatInputProps = {
   value?: string;
@@ -30,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;
-    agentIds?: (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;
@@ -70,6 +73,9 @@ const Wrapper = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+`;
+
+const Wrapper = styled.div`
   .chat-input {
     display: flex;
     flex-direction: column;
@@ -241,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;
@@ -269,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;
@@ -298,6 +292,154 @@ const Wrapper = styled.div`
 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
@@ -310,19 +452,18 @@ 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 [selectedAgent, setSelectedAgent] = useState<
       {
         id: string | number;
@@ -332,12 +473,14 @@ export const ChatInput = React.forwardRef<
     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() {
@@ -348,23 +491,14 @@ export const ChatInput = React.forwardRef<
     useEffect(() => {
       onInput && onInput(localValue);
     }, [localValue]);
-    useEffect(() => setLocalTitle(title || ""), [title]);
-    // useEffect(() => {
-    //   setSelectedAgent(
-    //     agentId ? agentList.find((s) => s.id === agentId) || [] : []
-    //   );
-    // }, [agentId, agentList]);
+
     useEffect(
       () => setLocalAttachments(Array.isArray(attachments) ? attachments : []),
       [attachments]
     );
+
     const canSubmit = !!(localValue && localValue.trim());
 
-    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;
       onUpdateAgentId && onUpdateAgentId(id);
@@ -383,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);
     };
@@ -440,19 +552,19 @@ export const ChatInput = React.forwardRef<
       const text = (localValue || "").trim();
       if (!text) return;
       const data = {
-        demand: text,
-        title: showTitle ? localTitle : "",
-        agentIds: selectedAgent.map((it) => it.id),
-        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)}>
@@ -460,17 +572,22 @@ 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) => (
-                  <div className="attachment-card">
-                    <IconFont type="icon-excel" />
+                  <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 }}
@@ -479,7 +596,7 @@ export const ChatInput = React.forwardRef<
                     </Typography.Text>
                     <a
                       className="remove"
-                      onClick={() => removeAttachment(a.uid)}
+                      onClick={() => removeAttachment(a.id)}
                     >
                       <DeleteOutlined />
                     </a>
@@ -499,15 +616,6 @@ export const ChatInput = React.forwardRef<
                 ))}
               </div>
             )}
-            {showTitle && (
-              <Input
-                className="title-input"
-                placeholder="请输入报告标题（可选）"
-                disabled={disabled || sending}
-                value={localTitle}
-                onChange={onTitleChange}
-              />
-            )}
             <Input.TextArea
               ref={inputRef}
               className="input textarea-stacked"
@@ -521,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 && (

package/src/components/panel/DatasetPanel.tsx

@@ -0,0 +1,65 @@
+import { Space } from "antd";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import styled from "styled-components";
+import { PaneHeader } from "./PaneHeader";
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    overflow: auto;
+  }
+`;
+
+type DatasetPanelType = {
+  renderNode: React.ForwardRefExoticComponent<
+    any &
+      React.RefAttributes<{
+        reload: () => void;
+        handleAdd: () => void;
+      }>
+  >;
+};
+
+export const DatasetPanel = React.forwardRef<
+  { reload: () => void },
+  DatasetPanelType
+>(({ renderNode: DatasetPanelComponent }, forwardRef) => {
+  const ref = useRef<{ reload: () => void; handleAdd: () => void }>(null);
+
+  const handleAdd = () => {
+    ref.current?.handleAdd();
+  };
+
+  useImperativeHandle(forwardRef, () => ({
+    reload,
+  }));
+
+  const reload = () => {
+    ref.current?.reload();
+  };
+
+  return (
+    <Root className="dataset-panel">
+      <PaneHeader
+        title="数据集"
+        extra={
+          <Space>
+            <a className="toolbar" onClick={handleAdd}>
+              +
+            </a>
+          </Space>
+        }
+      />
+      <div className="body">
+        <DatasetPanelComponent ref={ref} />
+      </div>
+    </Root>
+  );
+});

package/src/components/panel/PaneHeader.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 export type PaneHeaderProps = {
   title?: string
   extra?: React.ReactNode
+  style?: React.CSSProperties
 }
 
 const Header = styled.div`
@@ -24,9 +25,9 @@ const Header = styled.div`
   }
 `
 
-export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra }) => {
+export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra, style = {} }) => {
   return (
-    <Header className="pane-header">
+    <Header className="pane-header" style={style}>
       <span className="title">{title}</span>
       <div className="extra">{extra}</div>
     </Header>