@baishuyun/chat-sdk 0.0.16 → 0.0.17

package/src/plugins/form-filling-plugin/components/batch-generator-action.tsx

@@ -1,5 +1,3 @@
-import { BorderColorAnimation } from '@/components/bs-ui/border-color-animation';
-import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
 import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
 import { TextUIPart } from 'ai';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
@@ -11,7 +9,10 @@ import { DATA_COUNT_PER_BATCH, FILLING_EVENTS, PLUGIN_NAME } from '../const';
 import { useEvtBus } from '@/hooks/use-evt-bus';
 import { ChatMessage, UseChatHelpers } from '@baishuyun/types';
 import { type Field } from '@/plugins/form-builder-base-plugin/types';
-import { CircleChecker } from '@/components/bs-ui/circle-checker';
+import { GeneratedDataCounter } from './generated-data-counter';
+import { FirstBatchGeneratingAnimation } from './first-batch-generating-animation';
+import { NonFirstBatchGeneratingAnimation } from './non-first-batch-generating-animation';
+import { usePlugin } from '@/hooks/use-plugin';
 
 type FilledField = {
   fieldName: string;
@@ -93,30 +94,51 @@ const BaseBatchGeneratorAction = ({
   id,
   fields,
 }: BatchGeneratorActionProps) => {
+  const pluginInst = usePlugin<FormFillingPlugin>(PLUGIN_NAME);
+
   const [streamingState, setStreamingState] = useState(status === 'streaming');
 
+  const [totalCount, setTotalCount] = useState(pluginInst?.getCount(id) || 0);
+
+  const [next, setNext] = useState(totalCount > 0);
+
   const evtBus = useEvtBus();
 
+  const getRowNum = useCallback(() => {
+    if (!fields || fields.length === 0) {
+      return 0;
+    }
+
+    const lastField = fields[fields.length - 1];
+    return lastField.row || 0;
+  }, [fields]);
+
   useEffect(() => {
     if (status === 'ready' || status === 'error') {
       setStreamingState(false);
     }
   }, [status]);
 
+  useEffect(() => {
+    if (!pluginInst) {
+      return;
+    }
+
+    if (streamingState) {
+      return;
+    }
+
+    const newRows = getRowNum();
+    pluginInst.setCount(id, newRows);
+
+    setTotalCount(pluginInst.getCount(id) || 0);
+  }, [streamingState, getRowNum, pluginInst, id]);
+
   const formFillingCtx: FormFillingPluginCtx | null = usePluginCtx<
     FormFillingPluginCtx,
     FormFillingPlugin
   >(PLUGIN_NAME);
 
-  const getRowNum = () => {
-    if (!fields || fields.length === 0) {
-      return 0;
-    }
-
-    const lastField = fields[fields.length - 1];
-    return lastField.row || 0;
-  };
-
   const handleCheckChange = useCallback(
     (checked: boolean) => {
       evtBus.emit('form-filling-fields-checked-update', {
@@ -132,11 +154,7 @@ const BaseBatchGeneratorAction = ({
   if (!streamingState) {
     return (
       <div className="rounded-[10px] border border-[var(--e0e0e0,#E0E0E0)] w-full flex items-center flex-col gap-[10px] p-[4px] pb-[20px]">
-        <div className="flex items-center w-full py-[10px] px-[16px] gap-[6px]">
-          <CircleChecker defaultChecked onCheckedChange={handleCheckChange}>
-            已生成{getRowNum()}条数据
-          </CircleChecker>
-        </div>
+        <GeneratedDataCounter count={totalCount} handleCheckChange={handleCheckChange} />
 
         <PrimaryConfirmBtn
           text={`继续生成${DATA_COUNT_PER_BATCH}条`}
@@ -146,6 +164,8 @@ const BaseBatchGeneratorAction = ({
               return;
             }
 
+            setNext(true);
+
             setStreamingState(true);
 
             const formStructure = Array.from(formFillingCtx?.fieldMap.values() || []);
@@ -169,22 +189,12 @@ const BaseBatchGeneratorAction = ({
     );
   }
 
-  return (
-    <BorderColorAnimation
-      width="100%"
-      height={40}
-      padding={10}
-      borderRadius={4}
-      bgInset={1000}
-      borderWidth={1.5}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      <GenerateAnimation>数据生成中，可点击下方按钮暂停</GenerateAnimation>
-    </BorderColorAnimation>
-  );
+  const isFirstBatch = totalCount <= DATA_COUNT_PER_BATCH && !next;
+  if (isFirstBatch) {
+    return <FirstBatchGeneratingAnimation />;
+  }
+
+  return <NonFirstBatchGeneratingAnimation />;
 };
 
 const PartParser = ({ parts, ...rest }: BatchGeneratorActionProps) => {
@@ -218,7 +228,7 @@ export const BatchGeneratorAction = memo(PartParser, (prevProps, nextProps) => {
     prevProps.parts?.length === nextProps.parts?.length &&
     prevLastPart?.text === lastPart?.text &&
     prevProps.status === nextProps.status &&
-    prevProps.sendMessage === nextProps.sendMessage &&
+    // prevProps.sendMessage === nextProps.sendMessage &&
     prevProps.id === nextProps.id
   );
 });

package/src/plugins/form-filling-plugin/components/first-batch-generating-animation.tsx

@@ -0,0 +1,21 @@
+import { BorderColorAnimation } from '@/components/bs-ui/border-color-animation';
+import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
+
+export const FirstBatchGeneratingAnimation = () => {
+  return (
+    <BorderColorAnimation
+      width="100%"
+      height={40}
+      padding={10}
+      borderRadius={10}
+      bgInset={1000}
+      borderWidth={1.5}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <GenerateAnimation>数据生成中，可点击下方按钮暂停</GenerateAnimation>
+    </BorderColorAnimation>
+  );
+};

package/src/plugins/form-filling-plugin/components/generated-data-counter.tsx

@@ -0,0 +1,17 @@
+import { CircleChecker } from '@/components/bs-ui/circle-checker';
+
+export const GeneratedDataCounter = ({
+  count,
+  handleCheckChange,
+}: {
+  count: number;
+  handleCheckChange: (checked: boolean) => void;
+}) => {
+  return (
+    <div className="flex items-center w-full py-[10px] px-[16px] gap-[6px]">
+      <CircleChecker defaultChecked onCheckedChange={handleCheckChange}>
+        已生成{count}条数据
+      </CircleChecker>
+    </div>
+  );
+};

package/src/plugins/form-filling-plugin/components/non-first-batch-generating-animation.tsx

@@ -0,0 +1,28 @@
+import { BorderColorAnimation } from '@/components/bs-ui/border-color-animation';
+import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
+import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
+import { DATA_COUNT_PER_BATCH } from '../const';
+
+export const NonFirstBatchGeneratingAnimation = () => {
+  return (
+    <BorderColorAnimation
+      width="100%"
+      height={110}
+      padding={4}
+      borderRadius={10}
+      bgInset={1000}
+      borderWidth={1.5}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <div className="flex flex-col gap-[10px] w-full">
+        <GenerateAnimation className='ml-[16px]'>继续生成中，可点击下方暂停按钮暂停</GenerateAnimation>
+        <PrimaryConfirmBtn
+          className="w-[300px] mx-auto"
+         text={`继续生成${DATA_COUNT_PER_BATCH}条`} disabled />
+      </div>
+    </BorderColorAnimation>
+  );
+};

package/src/plugins/form-filling-plugin/index.ts

@@ -91,6 +91,7 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
   }) => {
     if (!visible) {
       this.lifecycleHooks?.onBeforeMessagesClear?.();
+      this.Context.counterMap.clear();
     }
   };
 
@@ -102,6 +103,18 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
     this.Context!.fillMode = mode;
   };
 
+  public getCount = (messageId: string): number => {
+    console.log('get count', messageId, this.Context.counterMap.get(messageId));
+    return this.Context.counterMap.get(messageId) || 0;
+  };
+
+  public setCount = (messageId: string, inc: number) => {
+    const existingCount = this.Context.counterMap.get(messageId) || 0;
+    const newCount = existingCount + inc;
+    console.log('set count', messageId, newCount);
+    this.Context.counterMap.set(messageId, newCount);
+  };
+
   public dispose?: (() => void) | undefined = () => {
     this.batchFillingDataManager.dispose();
 
@@ -229,6 +242,7 @@ export const FormFillingPluginRegisterEntry: PluginRegistryEntry<FormFillingPlug
       subFieldsNameMap: new Map(),
       conversationId: '',
       fillMode: 'AI',
+      counterMap: new Map(),
     };
   },
 };

package/src/plugins/form-filling-plugin/types.ts

@@ -11,4 +11,6 @@ export interface FormFillingPluginCtx {
   conversationId: string;
 
   fillMode: FormFillingMode;
+
+  counterMap: Map<string, number>; // key is messageId, value is row counter
 }

package/src/plugins/report-query-plugin/components/query-msg-part.tsx

@@ -7,10 +7,7 @@ import { usePluginCtx } from '@/hooks/use-plugin-ctx';
 import { ReportQueryPlugin } from '@/index';
 import { PLUGIN_NAME } from '../const';
 import { IReportQueryContext } from '../types';
-import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
-import { HighlightMsg } from '@/components/biz-comp/highlight-msg';
-import { CollapsibleTxtMsg } from '@/components/bs-ui/collapsible-txt-msg';
-import { AggregateTableIcon } from '@/components/bs-ui/bs-icons';
+import { CreatedSourceMsg } from './result-cards/CreatedSourceMsg';
 
 export const QueryMsgPart = ({ part, ...rest }: MsgPartCompProps) => {
   const textPart = part as TextUIPart;
@@ -29,25 +26,26 @@ export const QueryMsgPart = ({ part, ...rest }: MsgPartCompProps) => {
 
     if (result.isAggregate) {
       return (
-        <FakeBotMessage headless className="w-full">
-          <HighlightMsg>已为你创建聚合表</HighlightMsg>
-          <CollapsibleTxtMsg
-            icon={
-              <span className="text-[#0265ff]">
-                <AggregateTableIcon />
-              </span>
-            }
-            title={result.title!}
-            disableExpand
-          />
-        </FakeBotMessage>
+        <CreatedSourceMsg type={'aggregate'} title={result.title || ''} done={textPart.state === 'done'} />
       );
     }
 
-    console.log('set query result in context', result);
+    console.log('queryResult', result)
+
     ctx.queryResult = result;
     ctx.queryResult.appID = ctx.appInfo?.appId || '';
-    return <DataTableCard {...(result || {})}></DataTableCard>;
+
+    return (
+      <>
+        {(result.source && (result.source !== 'aggregate')) ? (
+          <CreatedSourceMsg type={result.source} title={result.title || ''} done={textPart.state === 'done'} />
+        ) : null}
+        <DataTableCard
+          {...(result || {})}
+          streaming={textPart?.state === 'streaming'}
+        ></DataTableCard>
+      </>
+    );
   }
 
   if (textPart.text !== undefined && textPart.text.trim() !== '') {

package/src/plugins/report-query-plugin/components/result-cards/CreatedSourceMsg.tsx

@@ -0,0 +1,36 @@
+import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
+import { HighlightMsg } from '@/components/biz-comp/highlight-msg';
+import { CollapsibleTxtMsg } from '@/components/bs-ui/collapsible-txt-msg';
+import { QuerySourceType } from '@baishuyun/types';
+import { CreatedSourceConfigMap } from '../../const';
+import { useEffect } from 'react';
+import { useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
+
+export const CreatedSourceMsg = ({ type, title, done }: { type: QuerySourceType; title: string; done?: boolean }) => {
+  const config = CreatedSourceConfigMap[type];
+  if (!config) {
+    return null;
+  }
+
+  const loading = useFakeGlobalLoadingMessage();
+
+  useEffect(() => {
+    // if (done) {
+
+    // }
+    loading?.clearGlobalFakeLoadingMessage();
+
+  }, [])
+
+  const icon = <config.iconComponent />;
+  return (
+    <FakeBotMessage headless className="w-full">
+      <HighlightMsg>已为你创建{config.label}</HighlightMsg>
+      <CollapsibleTxtMsg
+        icon={<span className={`text-[${config.color}]`}>{icon}</span>}
+        title={title}
+        disableExpand
+      />
+    </FakeBotMessage>
+  );
+};

package/src/plugins/report-query-plugin/components/result-cards/DataTableCard.tsx

@@ -4,16 +4,23 @@ import { IQueryResult } from '@baishuyun/types';
 import { IReportQueryContext } from '../../types';
 import { ReportQueryPlugin } from '../..';
 import { PLUGIN_NAME } from '../../const';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ConditionField, DataSourceField, DimensionField, MetricField } from './DataTableFields';
 import { CardFieldsWrapper } from '@/components/bs-ui/card-field';
 import { FilterCondition } from './FilterCondition';
 import { SplitLine } from '@/components/bs-ui/split-line';
 import { DashWidgetIcon } from '@/components/biz-comp/dash-widget-icon';
+import { useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
 
-export const DataTableCard = (props: IQueryResult) => {
+export const DataTableCard = (
+  props: IQueryResult & {
+    streaming?: boolean;
+  }
+) => {
   const ctx = usePluginCtx<IReportQueryContext, ReportQueryPlugin>(PLUGIN_NAME);
 
+  const globalLoading = useFakeGlobalLoadingMessage();
+
   const getFormName = useCallback(
     (id: string) => {
       const form = ctx?.appInfo?.formMap?.get(id);
@@ -22,6 +29,12 @@ export const DataTableCard = (props: IQueryResult) => {
     [ctx]
   );
 
+  useEffect(() => {
+    if (props.streaming) {
+      globalLoading.clearGlobalFakeLoadingMessage();
+    }
+  }, [props.streaming]);
+
   const formId = props.formIds?.[0] || '';
   const name = formId ? getFormName(formId) : '';
 

package/src/plugins/report-query-plugin/const.ts

@@ -1 +1,23 @@
+import { QuerySourceType } from '@baishuyun/types';
+import { ICreatedSourceConfig } from './types';
+import { AggregateTableIcon, DataReportIcon, DataViewIcon } from '@/components/bs-ui/bs-icons';
+
 export const PLUGIN_NAME = 'ReportQueryPlugin';
+
+export const CreatedSourceConfigMap: Record<QuerySourceType, ICreatedSourceConfig> = {
+  etl: {
+    label: '数据视图',
+    color: '#0265ff',
+    iconComponent: DataViewIcon,
+  },
+  aggregate: {
+    label: '聚合表',
+    color: '#0265ff',
+    iconComponent: AggregateTableIcon,
+  },
+  report: {
+    label: '数据报表',
+    color: '#4ACC8C',
+    iconComponent: DataReportIcon,
+  },
+};

package/src/plugins/report-query-plugin/index.ts

@@ -1,5 +1,6 @@
 import {
   ChatAreaPlugin,
+  IChatSDK,
   IDashForm,
   PluginCustomComponent,
   PluginHooks,
@@ -14,6 +15,12 @@ import { QueryMsgPart } from './components/query-msg-part';
 import { queryResult2createParams, queryResult2previewerProps } from './utils';
 
 export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
+  private _inst: IChatSDK | null = null;
+
+  public init?: ((sdk: IChatSDK) => void) | undefined = (sdkInst: IChatSDK) => {
+    this._inst = sdkInst;
+  };
+
   public pluginName: string = PLUGIN_NAME;
 
   public customComponents?: Partial<PluginCustomComponent> | undefined = {
@@ -24,8 +31,20 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
   };
 
   public lifecycleHooks?: PluginHooks | undefined = {
+    onBeforeMessagesClear: (conversationId) => {
+      const req = async () => {
+        await fetch(`https://agent.online-office.net/web/api/form/conversation/clear`, {
+          // await fetch(`http://192.168.50.38:3001/web/api/form/conversation/clear`, {
+          method: 'POST',
+          body: JSON.stringify({ conversationId }),
+        });
+      };
+
+      req();
+    },
+
     onAfterChatAreaHide: ({ clearMsgs }) => {
-      // clearMsgs();
+      clearMsgs();
     },
 
     onBeforeChatRender: () => {
@@ -43,6 +62,11 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
         },
       };
     },
+
+    onAfterMessageSend: (_) => {
+      console.log('enter onAfterMessageSend hook in ReportQueryPlugin');
+      this.setLoadingMsg('正在处理');
+    },
   };
 
   public getPreviewerProps = (entryId: string) => {
@@ -92,14 +116,17 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
     console.log('forms received in plugin:', formMap);
   };
 
+  private setLoadingMsg = (message: string) => {
+    this._inst?.setGlobalLoadingMessage(message);
+  };
+
   public constructor(ctx: IReportQueryContext) {
     super(ctx);
     this.Context = ctx;
   }
 
   public clearCtx = () => {
-    // console.log('clear plugin context');
-    // this.Context.queryResult = undefined;
+    this.Context.queryResult = undefined;
   };
 }
 

package/src/plugins/report-query-plugin/types.ts

@@ -14,3 +14,9 @@ export interface IReportQueryContext {
 
   queryResult?: IQueryResult;
 }
+
+export interface ICreatedSourceConfig {
+  label: string;
+  color: string;
+  iconComponent: React.ComponentType;
+}

package/src/sdk.impl.tsx

@@ -69,6 +69,10 @@ export class ChatSDK implements IChatSDK {
     this.Store.getState().setChatAreaPluginInstList(instList);
   }
 
+  public setGlobalLoadingMessage(message?: string): void {
+    this.Store.getState().setGlobalFakeLoadingMessage(message);
+  }
+
   public getPluginCtx<T>(pluginName: string): DeepReadonly<T> | undefined {
     const pluginInst = this.Store.getState().chatAreaPluginInstList.find(
       (inst) => inst.pluginName === pluginName

package/src/store/index.ts

@@ -23,6 +23,7 @@ export const createStore = (sdkInst: ChatSDK) => {
     clientStyle: '',
 
     msgClearTimestamp: Date.now(),
+    globalFakeLoadingMessage: '',
   };
 
   return create<ChatContextType>()(
@@ -36,6 +37,16 @@ export const createStore = (sdkInst: ChatSDK) => {
 
       clearMessages: () => set(() => ({ msgClearTimestamp: Date.now() })),
 
+      clearGlobalFakeLoadingMessage: () =>
+        set(() => ({
+          globalFakeLoadingMessage: undefined,
+        })),
+
+      setGlobalFakeLoadingMessage: (message) =>
+        set(() => ({
+          globalFakeLoadingMessage: message,
+        })),
+
       setChatStatus: (status: ChatStatus) =>
         set(() => ({
           chatStatus: status,

package/src/stories/FormInfoEditor.stories.tsx

@@ -1,21 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
 
-import {
-  FormInfoEditor,
-  FormIconOption,
-  FORM_ICON_OPTIONS,
-} from "@/components/bs-ui/form-info-editor";
+import { FormInfoEditor, FormIconOption } from '@/components/bs-ui/form-info-editor';
+import { FORM_ICON_OPTIONS } from '@/const/ui';
 
 const meta: Meta<typeof FormInfoEditor> = {
-  title: "Example/Chat/FormInfoEditor",
+  title: 'Example/Chat/FormInfoEditor',
   component: FormInfoEditor,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
   args: {
-    name: "供应商管理表",
+    name: '供应商管理表',
   },
   decorators: [
     (Story) => (
@@ -32,7 +29,7 @@ type Story = StoryObj<typeof meta>;
 // Default collapsed state
 export const Default: Story = {
   args: {
-    name: "供应商管理表",
+    name: '供应商管理表',
     selectedIcon: FORM_ICON_OPTIONS[0],
   },
 };
@@ -40,7 +37,7 @@ export const Default: Story = {
 // Expanded edit state
 export const Expanded: Story = {
   args: {
-    name: "供应商管理表",
+    name: '供应商管理表',
     expanded: true,
     selectedIcon: FORM_ICON_OPTIONS[0],
   },
@@ -49,7 +46,7 @@ export const Expanded: Story = {
 // With icon options in expanded state (using all 36 form icons)
 export const WithIconOptions: Story = {
   args: {
-    name: "供应商管理表",
+    name: '供应商管理表',
     expanded: true,
     iconOptions: FORM_ICON_OPTIONS,
     selectedIcon: FORM_ICON_OPTIONS[20],
@@ -65,11 +62,9 @@ export const WithIconOptions: Story = {
 
 // Interactive example with state management
 const InteractiveTemplate = () => {
-  const [name, setName] = useState("供应商管理表");
+  const [name, setName] = useState('供应商管理表');
   const [expanded, setExpanded] = useState(false);
-  const [selectedIcon, setSelectedIcon] = useState<FormIconOption>(
-    FORM_ICON_OPTIONS[0]
-  );
+  const [selectedIcon, setSelectedIcon] = useState<FormIconOption>(FORM_ICON_OPTIONS[0]);
 
   return (
     <FormInfoEditor
@@ -101,7 +96,7 @@ export const Interactive: Story = {
 // Long form name - test ellipsis
 export const LongName: Story = {
   args: {
-    name: "这是一个很长的表单名称用于测试文本溢出情况显示省略号",
+    name: '这是一个很长的表单名称用于测试文本溢出情况显示省略号',
     selectedIcon: FORM_ICON_OPTIONS[5],
   },
 };
@@ -109,8 +104,8 @@ export const LongName: Story = {
 // Custom width
 export const CustomWidth: Story = {
   args: {
-    name: "供应商管理表",
-    className: "w-[400px]",
+    name: '供应商管理表',
+    className: 'w-[400px]',
     selectedIcon: FORM_ICON_OPTIONS[0],
   },
   decorators: [
@@ -125,7 +120,7 @@ export const CustomWidth: Story = {
 // Expanded with long name
 export const ExpandedLongName: Story = {
   args: {
-    name: "这是一个很长的表单名称用于测试文本溢出情况",
+    name: '这是一个很长的表单名称用于测试文本溢出情况',
     expanded: true,
     iconOptions: FORM_ICON_OPTIONS.slice(0, 18), // Show 18 icons (3 rows)
     selectedIcon: FORM_ICON_OPTIONS[0],
@@ -135,7 +130,7 @@ export const ExpandedLongName: Story = {
 // Empty name
 export const EmptyName: Story = {
   args: {
-    name: "",
+    name: '',
     expanded: true,
     selectedIcon: FORM_ICON_OPTIONS[0],
   },
@@ -147,11 +142,7 @@ export const SideBySide: Story = {
     <div className="flex flex-col gap-4 w-[328px]">
       <div>
         <p className="text-sm text-gray-500 mb-2">默认状态 (收起)</p>
-        <FormInfoEditor
-          name="供应商管理表"
-          expanded={false}
-          selectedIcon={FORM_ICON_OPTIONS[0]}
-        />
+        <FormInfoEditor name="供应商管理表" expanded={false} selectedIcon={FORM_ICON_OPTIONS[0]} />
       </div>
       <div>
         <p className="text-sm text-gray-500 mb-2">长名称 (带省略号)</p>