@baishuyun/chat-sdk 0.0.16 → 0.0.18

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

@@ -18,6 +18,7 @@ import { FormFillingOpeningLines } from './components/FormFillingOpeningLines';
 import { FillMessagePart } from './components/msg-part';
 import { UIDataTypes, UIMessagePart, UITools } from 'ai';
 import {
+  ensureEndSlash,
   extractTextPartMeta,
   IsFieldsJsonPart,
   mergeConsecutiveTargets,
@@ -74,26 +75,11 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
       this.handleFillModeUpdate
     );
 
-    sdk.eventBus.on<'chat-area-visibility-change'>(
-      'chat-area-visibility-change',
-      this.handleChatAreaVisibilityChange
-    );
-
     // this.handleFormStructureReady({
     //   fields: MOCK_FORM_STRUCTURE,
     // });
   };
 
-  private handleChatAreaVisibilityChange: EventHandler<{ visible: boolean }> = ({
-    visible,
-  }: {
-    visible: boolean;
-  }) => {
-    if (!visible) {
-      this.lifecycleHooks?.onBeforeMessagesClear?.();
-    }
-  };
-
   private handleFillModeUpdate: EventHandler<{ mode: FormFillingMode }> = ({
     mode,
   }: {
@@ -102,6 +88,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();
 
@@ -114,11 +112,6 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
       FILLING_EVENTS.FORM_FILLING_MODE_UPDATE,
       this.handleFillModeUpdate
     );
-
-    this.sdkInst.eventBus.off<'chat-area-visibility-change'>(
-      'chat-area-visibility-change',
-      this.handleChatAreaVisibilityChange
-    );
   };
 
   private handleFormStructureReady: EventHandler<FormStructure> = (params: FormStructure) => {
@@ -144,7 +137,38 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
     });
   };
 
+  private clearHistoryConversation = async (conversationId: string) => {
+    const apiEndpoint = this.sdkInst?.options.backendApiEndpoint;
+    if (!apiEndpoint) {
+      console.error('Backend API endpoint is not defined in SDK options.');
+      return;
+    }
+
+    if (!conversationId) {
+      console.error('Conversation ID is required to clear history.');
+      return;
+    }
+
+    await fetch(`${ensureEndSlash(apiEndpoint)}form/conversation/clear`, {
+      method: 'POST',
+      body: JSON.stringify({ conversationId }),
+    });
+  };
+
+  public clearBatchFilledData = () => {
+    this.clearHistoryConversation(this.Context.conversationId);
+    this.sdkInst.clearChatHistory();
+    this.batchFillingDataManager.clear();
+  };
+
   public lifecycleHooks?: PluginHooks | undefined = {
+    onAfterChatAreaHide: ({ clearMsgs }) => {
+      // reset to AI mode when chat area is hidden
+      clearMsgs?.();
+      this.Context.fillMode = 'AI';
+      this.Context.counterMap.clear();
+      this.clearHistoryConversation(this.Context.conversationId);
+    },
     onBeforeChatRender: () => {
       return {
         enableMessageMerge: true,
@@ -163,39 +187,31 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
     onBeforeMessagePartsRender: (parts: Array<part>) => {
       // todo: reduce loops
       const mergedParts = mergeParts(parts as UIMessagePart<UIDataTypes, UITools>[], (p0, p1) => {
+        if (p0.type !== p1.type) {
+          return false;
+        }
+
         if (Array.isArray(p0) || Array.isArray(p1)) {
           return false;
         }
 
         const meta0 = extractTextPartMeta(p0);
         const meta1 = extractTextPartMeta(p1);
-        return meta0?.field?.fieldName == meta1?.field?.fieldName;
-      });
-
-      return mergeConsecutiveTargets<part>(mergedParts, IsFieldsJsonPart) as part[];
-    },
-    onBeforeMessagesClear: () => {
-      const conversationId = this.Context?.conversationId || '';
-      if (!conversationId) {
-        return;
-      }
 
-      const req = async () => {
-        await fetch(`https://agent.online-office.net/web/api/form/conversation/clear`, {
-          method: 'POST',
-          body: JSON.stringify({ conversationId }),
-        });
+        const fieldName0 = meta0?.field?.fieldName;
+        const fieldName1 = meta1?.field?.fieldName;
 
-        const keepCtx = this.Context.fillMode === 'batch';
-
-        if (keepCtx) {
-          return;
+        if (!fieldName0 || !fieldName1) {
+          return false;
         }
 
-        this.Context = FormFillingPluginRegisterEntry.createContext();
-      };
+        return fieldName0 === fieldName1;
+      });
 
-      req();
+      return mergeConsecutiveTargets<part>(mergedParts, IsFieldsJsonPart) as part[];
+    },
+    onBeforeMessagesClear: (id) => {
+      this.clearHistoryConversation(id!);
     },
     onBeforeMessageSend: (ctx) => {
       const formStructure = Array.from(this.Context?.fieldMap.values() || []);
@@ -216,6 +232,9 @@ export class FormFillingPlugin extends ChatAreaPlugin<FormFillingPluginCtx> {
         },
       };
     },
+    onAfterMessageSend: (_) => {
+      this.sdkInst?.setGlobalLoadingMessage('正在处理');
+    },
   };
 }
 
@@ -229,6 +248,7 @@ export const FormFillingPluginRegisterEntry: PluginRegistryEntry<FormFillingPlug
       subFieldsNameMap: new Map(),
       conversationId: '',
       fillMode: 'AI',
+      counterMap: new Map(),
     };
   },
 };

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

@@ -1,5 +1,7 @@
-import { FormFillingMode } from '@baishuyun/types';
+import { FormFillingMode, MsgPartCompProps } from '@baishuyun/types';
 import { Field } from '../form-builder-base-plugin/types';
+import { TextUIPart } from 'ai';
+import { FieldValueCheckerProps } from '@/components/biz-comp/FieldValueChecker';
 
 export interface FormFillingPluginCtx {
   fieldMap: Map<string, Field>;
@@ -11,4 +13,22 @@ export interface FormFillingPluginCtx {
   conversationId: string;
 
   fillMode: FormFillingMode;
+
+  counterMap: Map<string, number>; // key is messageId, value is row counter
 }
+
+export type FillPartRenderStrategy =
+  | 'batch' // 批量填写模式渲染
+  | 'single' // 单条填写模式渲染
+  | 'markdown' // markdown 内容渲染，通用行为
+  | 'unknown'; // 未知类型，null
+
+export interface IFieldsData {
+  fieldsParts: TextUIPart[];
+  filledFields: Array<FieldValueCheckerProps>;
+  fieldPropsArray: Array<FieldValueCheckerProps | null>;
+}
+
+export type FillPartRenderStrategyMap = {
+  [key in FillPartRenderStrategy]: React.FC<MsgPartCompProps & IFieldsData>;
+};

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

@@ -7,11 +7,9 @@ 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';
 
+// TODO: refactor with strategy pattern;
 export const QueryMsgPart = ({ part, ...rest }: MsgPartCompProps) => {
   const textPart = part as TextUIPart;
   const ctx = usePluginCtx<IReportQueryContext, ReportQueryPlugin>(PLUGIN_NAME);
@@ -29,25 +27,34 @@ 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,
@@ -12,8 +13,15 @@ import { QueryEntryBtn } from './components/query-entry-btn';
 import { QueryAvatar } from './components/avatar';
 import { QueryMsgPart } from './components/query-msg-part';
 import { queryResult2createParams, queryResult2previewerProps } from './utils';
+import { ensureEndSlash } from '@/lib/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 +32,12 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
   };
 
   public lifecycleHooks?: PluginHooks | undefined = {
+    onBeforeMessagesClear: (conversationId) => {
+      this.clearHistoryConversation(conversationId || '');
+    },
+
     onAfterChatAreaHide: ({ clearMsgs }) => {
-      // clearMsgs();
+      clearMsgs();
     },
 
     onBeforeChatRender: () => {
@@ -43,11 +55,15 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
         },
       };
     },
+
+    onAfterMessageSend: (_) => {
+      console.log('enter onAfterMessageSend hook in ReportQueryPlugin');
+      this.setLoadingMsg('正在处理');
+    },
   };
 
   public getPreviewerProps = (entryId: string) => {
     if (!this.Context.queryResult) {
-      console.log('No query result in context');
       return null;
     }
 
@@ -56,7 +72,6 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
 
   public getCreateParams = (entryId: string) => {
     if (!this.Context.queryResult) {
-      console.log('No query result in context');
       return null;
     }
 
@@ -92,14 +107,35 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
     console.log('forms received in plugin:', formMap);
   };
 
+  private clearHistoryConversation = async (conversationId: string, inst?: IChatSDK) => {
+    const apiEndpoint = (inst || this._inst)?.options.backendApiEndpoint;
+    if (!apiEndpoint) {
+      console.error('Backend API endpoint is not defined in SDK options.');
+      return;
+    }
+
+    if (!conversationId) {
+      console.error('Conversation ID is required to clear history.');
+      return;
+    }
+
+    await fetch(`${ensureEndSlash(apiEndpoint)}/form/conversation/clear`, {
+      method: 'POST',
+      body: JSON.stringify({ conversationId }),
+    });
+  };
+
+  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,
@@ -107,7 +118,6 @@ export const setupStoreSubscriptions = (store: ChatStore, option: IChatSDKOption
       option.onChatStatusChange?.(status);
       // @deprecated, will be removed in future versions
       eventBus.emit('chat-area-visibility-change', { visible, status });
-      console.log('chat status changed:', status);
     }
   );
 };

package/src/stories/BorderAnimation.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderAnimation } from '@/components/bs-ui/border-animation';
+
+const meta = {
+  title: 'Animation/BorderAnimation',
+  component: BorderAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof BorderAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="flex items-center gap-[6px] bg-white px-[10px] py-[4px] rounded-[4px]">
+        <span className="text-[#999] text-[14px]">
+          数据生成中，可点击下方按钮暂停
+        </span>
+      </div>
+    ),
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <h3 className="text-[16px] font-medium text-[#333]">标题内容</h3>
+        <p className="text-[14px] text-[#666] mt-1">
+          这是一段描述文字，展示边框动画效果。
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const LargerRadius: Story = {
+  args: {
+    borderRadius: 12,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[12px]">
+        <p className="text-[14px] text-[#666]">圆角 12px 的边框动画</p>
+      </div>
+    ),
+  },
+};
+
+export const SlowAnimation: Story = {
+  args: {
+    duration: 5,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">慢速动画（5秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const FastAnimation: Story = {
+  args: {
+    duration: 1,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">快速动画（1秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    gradient:
+      'linear-gradient(180deg, #FF84B4 0%, #FF0265 50%, #FFB1FA 100%)',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义渐变色（粉色系）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    className: 'w-[300px]',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义宽度 300px</p>
+      </div>
+    ),
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">
+          宽度 100%，自动填满父容器
+        </p>
+      </div>
+    ),
+  },
+};