bi-sdk-react 0.0.4 → 0.0.6

package/src/components/plugins/@antd/item-props/HtmlProps.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import { Form } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
+import { IconFont } from "../../../icon/IconFont";
 
 export type HtmlModel = { template: string };
 
@@ -21,16 +22,14 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
       <Form layout="vertical">
         <Form.Item
           label={
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              模板 <a onClick={format}>格式化</a>
-            </div>
+            <>
+              模板
+              <a onClick={format}>
+                <IconFont type="icon-formate" /> 格式化
+              </a>
+            </>
           }
+          className="ant-form-item-label-space"
         >
           <div
             style={{

package/src/components/plugins/@antd/item-props/TextProps.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import { Form, Input, Select, Button, Space, ColorPicker } from "antd";
 import type { PropEditorProps } from "./types";
 
-export type TextModel = { text?: string; customStyle?: React.CSSProperties };
+export type TextModel = {
+  text?: string;
+  customStyle?: React.CSSProperties;
+  classNames?: string[];
+};
 
 export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
   model,
@@ -23,6 +27,14 @@ export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
           onChange={(e) => triggerModel("text", e.target.value)}
         />
       </Form.Item>
+      <Form.Item label="类名">
+        <Select
+          size="small"
+          value={model.classNames}
+          mode="tags"
+          onChange={(value) => triggerModel("classNames", value)}
+        />
+      </Form.Item>
       <div
         style={{
           display: "flex",

package/src/components/plugins/@antd/items/EchartsRender.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import * as echarts from "echarts";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { EnvContext } from "../../../context/EnvContext";
+import { getVars } from "../../../utils";
 
 export type EchartsRenderProps = {
   item: any;
@@ -19,6 +21,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
   style,
   className,
 }) => {
+  const { initCallback, env } = useContext(EnvContext);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [chart, setChart] = useState<echarts.ECharts | null>(null);
   const datasource = useDatasource(id, item.datasource);
@@ -68,12 +71,17 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
       }
     }
   };
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback echarts", vars);
+  };
   useEffect(() => {
     if (!chartRef.current) return;
     const next = echarts.init(chartRef.current);
     setChart(next);
     const onResize = () => next.resize();
     window.addEventListener("resize", onResize);
+    initCallback({ id: item.id, callback });
     return () => {
       window.removeEventListener("resize", onResize);
       next.dispose();

package/src/components/plugins/@antd/items/HtmlRender.tsx

@@ -1,6 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { getVars } from "../../../utils";
+import { EnvContext } from "../../../context/EnvContext";
 
 export type HtmlRenderProps = {
   dataSource?: Record<string, any>;
@@ -27,6 +29,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   style,
   className,
 }) => {
+  const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
   const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
   const func = (path: string) =>
@@ -63,6 +66,15 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     [template, args]
   );
 
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback html", vars);
+  };
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
+
   return (
     <div
       id={id}

package/src/components/plugins/@antd/items/ListRender.tsx

@@ -1,8 +1,15 @@
-import React, { MouseEventHandler, useMemo } from "react";
+import React, {
+  MouseEventHandler,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
 import { Avatar, Pagination } from "antd";
 import styled, { css } from "styled-components";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { getVars } from "../../../utils";
+import { EnvContext } from "../../../context/EnvContext";
 
 type DataItem = {
   title?: string;
@@ -184,6 +191,7 @@ export const ListRender: React.FC<ListRenderProps> = ({
   style = {},
   className,
 }) => {
+  const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
   const list = datasource || [];
   const pagination = useMemo(() => {
@@ -208,6 +216,15 @@ export const ListRender: React.FC<ListRenderProps> = ({
     bordered ? "p-list--bordered" : undefined,
     className,
   ];
+
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback list", vars);
+  };
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
   return (
     <div
       id={id}

package/src/components/plugins/@antd/items/TableRender.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import { Table, type TableProps } from "antd";
 import { HtmlBaseProps } from "../../../typing";
+import { getVars } from "../../../utils";
+import { EnvContext } from "../../../context/EnvContext";
 
 export type TableRenderProps = {
   dataSource?: any[];
@@ -9,10 +11,12 @@ export type TableRenderProps = {
   bordered?: boolean;
   size?: TableProps["size"];
   showHeader?: boolean;
+  item: any;
 } & HtmlBaseProps;
 
 export const TableRender: React.FC<TableRenderProps> = ({
   id,
+  item,
   dataSource = [],
   columns = [],
   pageSize = 10,
@@ -22,6 +26,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
   style = {},
   className,
 }) => {
+  const { env, initCallback } = useContext(EnvContext);
   const pagination =
     !pageSize || pageSize <= dataSource.length
       ? false
@@ -82,6 +87,16 @@ export const TableRender: React.FC<TableRenderProps> = ({
             );
           },
   }));
+
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback table", vars);
+  };
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
+
   return (
     <Table
       id={id}

package/src/components/plugins/@antd/items/TextRender.tsx

@@ -5,6 +5,7 @@ export type TextRenderProps = {
   text?: string;
   customStyle?: React.CSSProperties;
   item?: { style?: React.CSSProperties };
+  classNames?: string[];
 } & HtmlBaseProps;
 
 export const TextRender: React.FC<TextRenderProps> = ({
@@ -14,6 +15,7 @@ export const TextRender: React.FC<TextRenderProps> = ({
   style = {},
   customStyle = {},
   className,
+  classNames = [],
 }) => {
   const actualStyle = useMemo(
     () => ({
@@ -24,7 +26,7 @@ export const TextRender: React.FC<TextRenderProps> = ({
     [item, customStyle, style]
   );
   return (
-    <span id={id} style={actualStyle} className={className}>
+    <span id={id} style={actualStyle} className={(classNames || []).join(" ") + (" " + className || "")}>
       {text}
     </span>
   );

package/src/components/styles.css

@@ -10,3 +10,23 @@ a.toolbar {
     color: var(--ant-color-primary);
   }
 }
+
+.ant-form-compact .ant-form-item {
+  margin-bottom: 8px;
+}
+
+.ant-form-item-label label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ant-form-item.ant-form-item-label-space .ant-form-item-label label {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &::after {
+    content: none;
+  }
+}

package/src/components/typing.ts

@@ -1,4 +1,89 @@
-import { MouseEventHandler } from "react";
+import React, { MouseEventHandler } from "react";
+
+export type ChatRequestType = {
+  message: string;
+  files?: { id: string; name: string; extension: string }[] | null;
+  agents?: { id: string | number; name: string }[] | null;
+  page?: PageSchema | null;
+  pageItems?: SchemaItemType[] | null;
+};
+
+export type ChatResponseAnswerEffectType = {
+  datasets?: DataSetType[] | null;
+  schema?: PageSchema;
+  pageItems?: SchemaItemType[] | null;
+};
+
+export type ChatResponseAnswerPlanType = {
+  name: string;
+  description: string;
+};
+
+export type ChatResponseAnswerType = {
+  answer: string;
+  plans?: ChatResponseAnswerPlanType[] | null;
+  effect?: ChatResponseAnswerEffectType | null;
+  extra?:
+    | { id: string; element: string; action: string; area: string }[]
+    | null;
+};
+
+export type ChatResponseType = {
+  id: string;
+  answer: ChatResponseAnswerType;
+  createdAt: string;
+  conversation?: ChatConversationType | null;
+};
+
+export type ChatConversationType = {
+  id: string;
+  name: string;
+  createdAt: string;
+  isActived: boolean;
+};
+
+export type ChatMessageType = {
+  id: string;
+  conversationId: string | null;
+  question: string;
+  answer: ChatResponseAnswerType;
+  files: { id: string; name: string; extension: string }[];
+  agents: { id: string | number; name: string }[];
+  createdAt: string;
+  sending?: boolean;
+};
+
+export type FetchType = {
+  upload?: (file: File) => Promise<{ id: string; name: string }>;
+  ai?: {
+    chat: (
+      bizType: string,
+      bizId: string,
+      conversationId: string | null,
+      request: ChatRequestType
+    ) => Promise<ChatResponseType>;
+    conversationList: (
+      bizType: string,
+      bizId: string
+    ) => Promise<ChatConversationType[]>;
+    messageList: (
+      bizType: string,
+      bizId: string,
+      conversationId?: string | null
+    ) => Promise<ChatMessageType[]>;
+    removeConversation: (
+      bizType: string,
+      bizId: string,
+      conversationId: string
+    ) => Promise<boolean>;
+    removeMessage: (
+      bizType: string,
+      bizId: string,
+      messageId: string
+    ) => Promise<boolean>;
+  };
+  dataset?: (dataSetId: string, params: Record<string, any>) => Promise<any>;
+};
 
 export type HtmlBaseProps = {
   id?: string;
@@ -17,10 +102,11 @@ export type SchemaItemType = {
   cascadeIds?: string[];
   children?: SchemaItemType[] | Record<string, SchemaItemType[]>;
   datasource?: {
-    source?: "custom" | "define";
+    source?: "custom" | "define" | "dataset";
     datasourceId?: string | null;
     scriptId?: string | null;
     custom?: string | null;
+    dataset?: DataSetType;
   };
 };
 
@@ -58,6 +144,31 @@ export type SqlType = {
   query: string;
 };
 
+export enum FieldType {
+  STRING = "STRING",
+  NUMBER = "NUMBER",
+  BOOLEAN = "BOOLEAN",
+  OBJECT = "OBJECT",
+  ARRAY = "ARRAY",
+}
+
+export type DataSetOutputField = {
+  key?: string;
+  name?: string;
+  type?: FieldType;
+  schema?: DataSetOutput;
+};
+
+export type DataSetOutput = {
+  fields?: DataSetOutputField[];
+};
+
+export type DataSetType = {
+  id: string;
+  name: string;
+  output: DataSetOutput;
+};
+
 export type PageInfo = {
   name?: string;
   description?: string;
@@ -78,3 +189,7 @@ export type EnvType = {
 };
 
 export type CallbacksType = Record<string, (v: any) => void>;
+
+export type DatasetSelectorFunction = (
+  onSelect: (dataset: DataSetType) => void
+) => React.ReactNode;

package/src/components/utils.ts

@@ -35,3 +35,43 @@ export const handleCallback = (
 };
 
 export const uuid = () => v4();
+
+
+
+export const formatTime = (dateStr: string) => {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (diff < 60 * 1000) {
+    return "刚刚";
+  }
+  if (diff < 60 * 60 * 1000) {
+    return `${Math.floor(diff / (60 * 1000))}分钟前`;
+  }
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const HH = pad(date.getHours());
+  const mm = pad(date.getMinutes());
+
+  const isToday =
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear();
+
+  if (isToday) {
+    return `${HH}:${mm}`;
+  }
+
+  const MM = pad(date.getMonth() + 1);
+  const DD = pad(date.getDate());
+  const isThisYear = date.getFullYear() === now.getFullYear();
+
+  if (isThisYear) {
+    return `${MM}-${DD} ${HH}:${mm}`;
+  }
+
+  const YYYY = date.getFullYear();
+  return `${YYYY}-${MM}-${DD} ${HH}:${mm}`;
+};