bi-sdk-react 0.0.1

package/src/components/panel/ChatInput.tsx

@@ -0,0 +1,550 @@
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  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";
+
+export type ChatInputProps = {
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  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>;
+  }) => void;
+  onUpdateTitle?: (title: string) => void;
+  onUpdateAgentId?: (id: string | number | null) => void;
+  onUpdateAttachments?: (list: any[]) => void;
+};
+
+const Wrapper = styled.div`
+  ul.agent-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  ul.agent-list li {
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  ul.agent-list li:hover {
+    background: var(--link-bg-color);
+    border-radius: 2px;
+  }
+  ul.agent-list li a {
+    color: var(--ant-color-text-secondary);
+    flex: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .chat-input {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+  }
+  .input-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+  .attachment-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px 6px 0 0;
+    border-bottom: none;
+    background-color: #eff1f9;
+  }
+  .attachment-card {
+    max-height: 171px;
+    overflow: auto;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 12px;
+    padding: 8px;
+    border: 1px solid #eaeaea;
+    border-radius: 6px;
+    background-color: #fafafa;
+    font-size: 12px;
+    position: relative;
+  }
+  .attachment-card .name {
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #555;
+  }
+  .attachment-card .remove {
+    color: #999;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    position: absolute;
+    top: 4px;
+    right: 2px;
+  }
+  .attachment-card .remove:hover {
+    color: #666;
+  }
+  .agent-info {
+    box-sizing: border-box;
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px 6px 0 0;
+    border-bottom: none;
+    background-color: #eff1f9;
+    font-size: 14px;
+    color: #555;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+  }
+  .attachment-bar + .agent-info {
+    border-radius: 0;
+  }
+  .agent-info + .title-input,
+  .agent-info + .textarea-stacked {
+    border-radius: 0;
+  }
+  .title-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px 6px 0 0;
+    border-bottom: none;
+    font-size: 14px;
+  }
+  .attachment-bar + .title-input {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    resize: vertical;
+    font-size: 14px;
+  }
+  .textarea-stacked {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    outline: none;
+    resize: none;
+  }
+  .title-input + .textarea-stacked,
+  .attachment-bar + .textarea-stacked {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 8px;
+    border: solid 1px #dddddd;
+    border-top: none;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    background-color: #eff1f9;
+  }
+  .footer .left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .agent-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: auto;
+    height: 26px;
+    color: var(--chat-blue);
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 12px;
+    border: solid 1px #dcdcdc;
+    border-radius: 5px;
+    padding: 0 4px;
+  }
+  .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;
+    gap: 6px;
+    color: var(--chat-blue);
+    background-color: #ffffff;
+    border: solid 1px #dcdcdc;
+    border-radius: 5px;
+    padding: 0 4px;
+    height: 26px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .tips {
+    color: #999;
+    font-size: 12px;
+    user-select: none;
+    padding: 4px;
+    border-radius: 4px;
+  }
+  .send-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 26px;
+    color: #fff;
+    font-size: 22px;
+    background-color: rgb(184, 184, 191);
+    border: unset;
+    border-radius: 14px;
+    transition: background-color 0.3s ease 0s;
+    cursor: pointer;
+  }
+  .send-btn.send-btn-active {
+    background-color: var(--chat-blue);
+  }
+`;
+
+const DEFAULT_AGENT_LIST: any[] = [];
+const DEFAULT_ATTACHMENTS: any[] = [];
+
+export const ChatInput = React.forwardRef<
+  { focus: () => void },
+  ChatInputProps
+>(
+  (
+    {
+      value = "",
+      placeholder = "请输入需求，例如：分析 2025 年人口结构并生成可视化报告",
+      disabled = false,
+      sending = false,
+      rows = 6,
+      agentList = DEFAULT_AGENT_LIST,
+      title = "",
+      agentId = null,
+      attachments = DEFAULT_ATTACHMENTS,
+      onInput,
+      onSubmit,
+      onUpdateTitle,
+      onUpdateAgentId,
+      onUpdateAttachments,
+    },
+    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 [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 isMobile = useMemo(() => false, []);
+    useImperativeHandle(ref, () => ({
+      focus() {
+        inputRef.current?.focus();
+      },
+    }));
+    useEffect(() => setLocalValue(value || ""), [value]);
+    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);
+    };
+    const clearAgent = () => {
+      setLocalAgentId(null);
+      onUpdateAgentId && onUpdateAgentId(null);
+      setSelectedAgent(null);
+    };
+    const onKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter") {
+        if ((e as any).shiftKey) {
+          return;
+        }
+        e.preventDefault();
+        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) => {
+        try {
+          const buffer = e.target?.result as ArrayBuffer;
+          const converted = await convertXlsxToCsv(buffer);
+          const next = [
+            ...localAttachments,
+            {
+              uid: `${Date.now()}_${Math.random()}`,
+              name: file.name,
+              size: (file as any).size,
+              csvBySheet: converted,
+            },
+          ];
+          setLocalAttachments(next);
+          onUpdateAttachments && onUpdateAttachments(next);
+        } catch {}
+      };
+      reader.readAsArrayBuffer(file);
+      return false;
+    };
+    const removeAttachment = (uid: string) => {
+      const next = localAttachments.filter((a) => a.uid !== uid);
+      setLocalAttachments(next);
+      onUpdateAttachments && onUpdateAttachments(next);
+    };
+    const submit = () => {
+      if (!canSubmit || sending) return;
+      const now = Date.now();
+      if (now - lastSubmitAt < minIntervalMs) return;
+      setLastSubmitAt(now);
+      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 }),
+          {}
+        ),
+      };
+      onSubmit && onSubmit(data);
+      setLocalValue("");
+    };
+    const overlay = (
+      <div style={{ maxHeight: 400, overflow: "auto", background: "#fff" }}>
+        <ul className="agent-list">
+          {agentList.map((item) => (
+            <li key={String(item.id)}>
+              <a onClick={() => onAgentSelect(item)}>{item.name}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+    return (
+      <Wrapper>
+        <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>
+                    <a
+                      className="remove"
+                      onClick={() => removeAttachment(a.uid)}
+                    >
+                      ×
+                    </a>
+                  </Tooltip>
+                ))}
+              </div>
+            )}
+            {selectedAgent && (
+              <div className="agent-info">
+                <span className="name">@ {selectedAgent.name}</span>
+                <a className="remove" onClick={clearAgent}>
+                  ×
+                </a>
+              </div>
+            )}
+            {showTitle && (
+              <Input
+                className="title-input"
+                placeholder="请输入报告标题（可选）"
+                disabled={disabled || sending}
+                value={localTitle}
+                onChange={onTitleChange}
+              />
+            )}
+            <Input.TextArea
+              ref={inputRef}
+              className="input textarea-stacked"
+              placeholder={placeholder}
+              disabled={disabled || sending}
+              autoSize={{ minRows: rows, maxRows: rows }}
+              value={localValue}
+              onPressEnter={onKeydown}
+              onChange={(e) => setLocalValue(e.target.value)}
+            />
+          </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 />}
+                  />
+                </Tooltip>
+              </Upload>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              {!isMobile && (
+                <div className="tips">按 Enter 发送，Shift+Enter 换行</div>
+              )}
+              <a
+                className={`send-btn ${
+                  !sending && localValue?.length > 0 ? "send-btn-active" : ""
+                }`}
+                onClick={submit}
+              >
+                <SendOutlined />
+              </a>
+            </div>
+          </div>
+        </div>
+      </Wrapper>
+    );
+  }
+);

package/src/components/panel/CodePanel.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useMemo } from "react";
+import Editor from "@monaco-editor/react";
+import { Tooltip, Space, message } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+import copy from "copy-to-clipboard";
+import { PaneHeader } from "./PaneHeader";
+import { DesignerContext } from "../context/DesignerContext";
+
+export const CodePanel: React.FC = () => {
+  const { schema } = useContext(DesignerContext);
+  const code = useMemo(() => JSON.stringify(schema || {}, null, 2), [schema]);
+  const handleCopy = () => {
+    if (copy(code || "")) {
+      message.success("复制成功");
+    }
+  };
+  return (
+    <div
+      className="code-panel"
+      style={{ display: "flex", flexDirection: "column", height: "100%" }}
+    >
+      <PaneHeader
+        title="代码"
+        extra={
+          <Space>
+            <Tooltip title="复制到剪切板">
+              <a className="toolbar" onClick={handleCopy}>
+                <CopyOutlined />
+              </a>
+            </Tooltip>
+          </Space>
+        }
+      />
+      <div className="body" style={{ flex: "1 1 auto", display: "flex" }}>
+        <Editor
+          height="100%"
+          defaultLanguage="json"
+          value={code}
+          options={{
+            lineNumbers: "off",
+            readOnly: true,
+            minimap: { enabled: false },
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/panel/ComponentPanel.tsx

@@ -0,0 +1,119 @@
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
+import styled from "styled-components";
+import { DesignerContext } from "../context/DesignerContext";
+import { IconFont } from "../icon/IconFont";
+import { PluginType } from "../typing";
+import { uuid } from "../utils";
+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;
+  }
+  .group-title {
+    font-size: 12px;
+    color: #ababab;
+    padding: 4px 12px;
+  }
+  .plugin-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px 12px;
+    padding: 12px;
+  }
+  .plugin {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    width: calc(50% - 6px);
+    cursor: pointer;
+    user-select: none;
+  }
+  .plugin .icon {
+    font-size: 24px;
+    color: #191b35;
+  }
+  .plugin .label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 12px;
+  }
+`;
+
+const PluginTile: React.FC<{ plugin: PluginType }> = ({ plugin }) => {
+  const ref: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  /**
+   * 注册拖拽源：仅在设计模式下启用
+   */
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const cleanup = draggable({
+      element: el,
+      getInitialData: () => {
+        const item = {
+          id: uuid(),
+          type: plugin.key,
+          name: plugin.label,
+          ...JSON.parse(JSON.stringify(plugin.defaultOptions || {})),
+        };
+        return {
+          id: item.id,
+          data: item,
+        };
+      },
+      canDrag: () => true,
+      onDragStart: () => {},
+      onDrop: () => {},
+    });
+    return () => cleanup();
+  }, []);
+  return (
+    <div className="plugin drag-move" ref={ref}>
+      <IconFont className="icon" type={plugin.icon} />
+      <div className="label">{plugin.label}</div>
+    </div>
+  );
+};
+
+export const ComponentPanel: React.FC = () => {
+  const { plugins } = useContext(DesignerContext);
+  const grouped = useMemo(() => {
+    const grouped: { group: string; items: PluginType[] }[] = [];
+    plugins.forEach((item) => {
+      const g = grouped.find((s) => s.group === item.group);
+      if (g) g.items.push(item);
+      else grouped.push({ group: item.group, items: [item] });
+    });
+    return grouped;
+  }, [plugins]);
+  return (
+    <Root className="component-panel">
+      <PaneHeader title="组件库" />
+      <div className="body">
+        {grouped.map((group) => (
+          <div className="plugin-group" key={group.group}>
+            <div className="group-title">{group.group}</div>
+            <div className="plugin-list">
+              {group.items.map((item) => (
+                <PluginTile key={item.key} plugin={item} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Root>
+  );
+};