bi-sdk-react 0.0.53 → 0.0.55

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

@@ -1,7 +1,8 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { MouseEventHandler, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { useDatasource } from "../../../hooks/datasource";
 import { CallbackType, HtmlBaseProps } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 export type HtmlRenderProps = {
   dataSource?: Record<string, any>;
@@ -30,13 +31,16 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   className,
   classNames = [],
 }) => {
-  const { initCallback } = useContext(PageContext);
+  const { initCallback, globalVars, env } = useContext(PageContext);
+  const { handleEvent } = useEvent(item);
   const [signal, setSignal] = useState<number>(0);
   const datasource = useDatasource({ item, signal });
 
   const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
   const func = (path: string) =>
     new Function(
+      "$g",
+      "$e",
       ...keys,
       `
       "use strict";
@@ -57,16 +61,16 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   const html = useMemo(
     () =>
       (template || "").replace(
-        /{\s*{\s*([^#]+)\s*}\s*}/g,
+        /{\s*{\s*([^}]+)\s*}\s*}/g,
         (_match: any, p1: string) => {
           try {
-            return (func(p1) as any)(...args);
+            return (func(p1) as any)(globalVars, env.global, ...args);
           } catch {
             return "";
           }
         },
       ),
-    [template, args],
+    [template, args, globalVars, env],
   );
 
   const callback: CallbackType = (refresh = true) => {
@@ -77,6 +81,10 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     };
   };
 
+  const click: MouseEventHandler = () => {
+    handleEvent("click");
+  };
+
   useEffect(() => {
     initCallback({ id: item.id, callback });
   }, []);
@@ -87,6 +95,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
       style={style}
       className={(classNames || []).join(" ") + (" " + className || "")}
       dangerouslySetInnerHTML={{ __html: html }}
+      onClick={click}
     />
   );
 };

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

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { PageContext } from "../../../context/PageContext";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { CallbackType, HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 const Placeholder = styled.div`
   text-align: center;
@@ -48,6 +49,7 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
   } = useContext(PageContext);
   const [open, setOpen] = useState(false);
   const [localChildren, setLocalChildren] = useState(item.children || []);
+  const { handleEvent } = useEvent(item);
 
   const onLocalChildrenChange = (list: any[]) => {
     item.children = list;
@@ -86,6 +88,10 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
     toolbarEl.style.left = `${rect.left + scrollLeft - 1}px`;
   };
 
+  const handleOpenChange = (open: boolean) => {
+    handleEvent(open ? "open" : "close");
+  };
+
   useEffect(() => {
     setLocalChildren(item.children || []);
   }, [item.children]);
@@ -132,6 +138,7 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
         {...rest}
         open={open}
         onCancel={() => setOpen(false)}
+        afterOpenChange={handleOpenChange}
         getContainer={() =>
           designable ? document.querySelector(".page-canvas")! : document.body
         }

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

@@ -1,33 +1,48 @@
-import React, { useMemo } from "react";
-import { HtmlBaseProps } from "../../../typing";
+import React, { ComponentType, MouseEventHandler, useMemo } from "react";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 export type TextRenderProps = {
   text?: string;
+  tag?: "span" | "a";
   customStyle?: React.CSSProperties;
-  item?: { style?: React.CSSProperties };
+  item: SchemaItemType;
   classNames?: string[];
 } & HtmlBaseProps;
 
 export const TextRender: React.FC<TextRenderProps> = ({
   id,
   text,
+  tag = "span",
   item,
   style = {},
   customStyle = {},
   className,
   classNames = [],
 }) => {
+  const { handleEvent } = useEvent(item);
   const actualStyle = useMemo(
     () => ({
       ...(item?.style || {}),
       ...(customStyle || {}),
       ...(style || {}),
     }),
-    [item, customStyle, style]
+    [item, customStyle, style],
   );
+
+  const Tag = tag || "span";
+
+  const click: MouseEventHandler = () => {
+    handleEvent("click");
+  };
   return (
-    <span id={id} style={actualStyle} className={(classNames || []).join(" ") + (" " + className || "")}>
+    <Tag
+      id={id}
+      style={actualStyle}
+      className={(classNames || []).join(" ") + (" " + className || "")}
+      onClick={click}
+    >
       {text}
-    </span>
+    </Tag>
   );
 };

package/src/components/typing.ts

@@ -79,7 +79,7 @@ export type FetchType = {
     removeConversation: (conversationId: string) => Promise<boolean>;
     removeMessage: (messageId: string) => Promise<boolean>;
   };
-  dataset?: (dataSetId: string, params: Record<string, any>) => Promise<any>;
+  dataset?: (dataSetId: string, params: Record<string, any>, aiPrompt?: string) => Promise<any>;
 };
 
 export type HtmlBaseProps = {
@@ -190,6 +190,14 @@ export type PageSchema = {
   scripts: ScriptItem[];
   variables: VariableItem[];
   items: SchemaItemType[];
+  datasets?: {
+    id: string;
+    name: string;
+    key: string;
+    aiPrompt?: string;
+    output: DataSetOutput;
+    dependencies?: string[];
+  }[]
 };
 
 export type EnvType = {

package/src/example.tsx

@@ -197,6 +197,15 @@ export const Example: React.FC = () => {
                 removeMessage: async (messageId) =>
                   Promise.resolve(true),
               },
+              dataset: async (dataSetId, params, aiPrompt) => {
+                console.log("dataset", dataSetId, params, aiPrompt);
+                return Promise.resolve({
+                  code: "OK",
+                  data: {
+                    ...params,
+                  }
+                });
+              },
               upload: async (file) =>
                 Promise.resolve({ id: uuid(), name: file.name }),
             }}