@baishuyun/chat-sdk 0.0.16 → 0.0.18

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,11 @@ 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';
+import { useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
 
 type FilledField = {
   fieldName: string;
@@ -23,7 +25,6 @@ type FilledField = {
 
 const useFillingEvtEmitter = (id: string) => {
   const evtBus = useEvtBus();
-
   return useCallback((f: FilledField) => {
     const normalizedValue = valueNormalizer(f.value as string | string[]);
 
@@ -93,30 +94,52 @@ 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,20 +155,19 @@ 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}条`}
           className="w-[300px]"
+          light
           onClick={() => {
             if (status === 'streaming' || streamingState) {
               return;
             }
 
+            setNext(true);
+
             setStreamingState(true);
 
             const formStructure = Array.from(formFillingCtx?.fieldMap.values() || []);
@@ -169,22 +191,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) => {
@@ -194,9 +206,12 @@ const PartParser = ({ parts, ...rest }: BatchGeneratorActionProps) => {
 
   const emit = useFillingEvtEmitter(rest.id);
 
+  const loadingMsg = useFakeGlobalLoadingMessage();
+
   usePartParser(lastPart, (all, latestField) => {
     setFields(all);
     emit(latestField);
+    loadingMsg.clearGlobalFakeLoadingMessage();
   });
 
   if (!lastPart) {
@@ -218,7 +233,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/entry-btn.tsx

@@ -39,7 +39,7 @@ export const EntryButton = ({ style, onClick, variant }: EntryButtonProps) => {
         }
         onClick?.();
       }}
-      entryVariant="ghost"
+      entryVariant="light"
       icon={<ColorfulEditIcon />}
     >
       AI填写

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

@@ -0,0 +1,11 @@
+import BorderAnimation from '@/components/bs-ui/border-animation';
+import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
+import { memo } from 'react';
+
+export const FirstBatchGeneratingAnimation = memo(() => {
+  return (
+    <BorderAnimation borderRadius={4} height={40} className="flex items-center px-[10px]">
+      <GenerateAnimation>数据生成中，可点击下方按钮暂停</GenerateAnimation>
+    </BorderAnimation>
+  );
+});

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/msg-part.tsx

@@ -1,141 +1,58 @@
-import { useState } from 'react';
 import { MarkdownMsgpart } from '@/components/biz-comp/markdown-part';
-import { MessageContent } from '@/components/biz-comp/message-content';
 import { usePluginCtx } from '@/hooks/use-plugin-ctx';
-
-import { GetFieldJsonInfo, IsFieldsJsonPart, NeedToAppendFieldsSaveConfirm } from '@/lib/utils';
 import { MsgPartCompProps } from '@baishuyun/types';
 import { TextUIPart } from 'ai';
-import { FILLING_EVENTS, PLUGIN_NAME } from '../const';
-import { FormFillingPluginCtx } from '../types';
-import { useEvtBus } from '@/hooks/use-evt-bus';
-import { FormFillingPlugin } from '..';
-import { valueNormalizer } from '../utils';
-import { FieldValueCheckerProps } from '@/components/biz-comp/FieldValueChecker';
-import { FieldValueCheckerListMsg } from '@/components/biz-comp/FieldCheckerListMsg';
-import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
-import { BatchGeneratorAction } from './batch-generator-action';
-import { useEvt } from '@/hooks/use-evt';
-
-export const FillMessagePart = (props: MsgPartCompProps) => {
-  const { part: p, id, sendMessage, setMessages, status } = props;
-
-  const part = p as TextUIPart;
 
-  const isFieldsJson = IsFieldsJsonPart(part);
-
-  const formFillingCtx = usePluginCtx<FormFillingPluginCtx, FormFillingPlugin>(PLUGIN_NAME);
-
-  const showConfirmBtn = NeedToAppendFieldsSaveConfirm(part);
-
-  const [confirmed, setConfirmed] = useState(false);
+import { PLUGIN_NAME } from '../const';
+import { FillPartRenderStrategy, FillPartRenderStrategyMap, FormFillingPluginCtx, IFieldsData } from '../types';
+import { FormFillingPlugin } from '..';
+import { useConversationIdInCtx } from '../hooks/use-conversation-id-in-ctx';
+import { useFieldsData } from '../hooks/use-fields-data';
+import { BatchFillPart } from './batch-fill-part';
+import { SingleFillPart } from './single-fill-part';
+
+const RENDER_STRATEGY_COMPONENT_MAP: FillPartRenderStrategyMap = {
+  batch: BatchFillPart,
+  single: SingleFillPart,
+  markdown: MarkdownMsgpart,
+  unknown: (_) => null,
+};
 
-  if (formFillingCtx) {
-    formFillingCtx.conversationId = id;
+const getRenderStrategy = (ctx: FormFillingPluginCtx | null, fieldsData: IFieldsData, part: any): FillPartRenderStrategy => {
+  if (fieldsData.fieldsParts.length && ctx && ctx.fillMode !== 'batch') {
+    return 'single';
   }
 
-  useEvt('chat-area-visibility-change', (data) => {
-    const visible = (data as { visible?: boolean } | undefined)?.visible;
+  if (ctx?.fillMode === 'batch' && fieldsData.fieldsParts.length) {
+    return 'batch';
+  }
 
-    if (visible === false && formFillingCtx?.fillMode === 'batch') {
-      setMessages(() => []);
-    }
-  });
+  if (part.text !== undefined && part.text.trim() !== '') {
+    return 'markdown';
+  }
 
-  const evtBus = useEvtBus();
+  return 'unknown';
+}
 
-  const fieldsParts = Array.isArray(part) && part.length ? part : isFieldsJson ? [part] : [];
-  if (fieldsParts.length && formFillingCtx && formFillingCtx.fillMode !== 'batch') {
-    const fieldPropsArray: Array<FieldValueCheckerProps | null> = fieldsParts.map((p) => {
-      const field = GetFieldJsonInfo(p);
-      if (
-        !formFillingCtx.fieldMap?.has(field.fieldName) &&
-        !formFillingCtx.subFieldsNameMap?.has(field.fieldName)
-      ) {
-        console.warn('unregistered field:', field.fieldName, formFillingCtx.fieldMap);
-        return null;
-      }
+export const FillMessagePart = (props: MsgPartCompProps) => {
+  const { part: p, id } = props;
 
-      const normalizedValue = valueNormalizer(field.value);
-      return {
-        field: {
-          label: field.label,
-          widget: {
-            widgetName: field.fieldName,
-            type: field.fieldType,
-            value: field.value,
-          },
-        },
-        onLoaded: (f: any) => {
-          f.widget.value = normalizedValue;
-          formFillingCtx.valueMap.set(f.widget?.widgetName, normalizedValue);
-          evtBus.emit(FILLING_EVENTS.FIELD_FILLED_UPDATE, {
-            field: f,
-            checked: true,
-          });
-        },
-        onChange: (check: boolean, f: any, parentFieldName?: string, row?: number) => {
-          if (check) {
-            formFillingCtx.valueMap.set(f.widget?.widgetName, normalizedValue);
-          }
-          evtBus.emit(FILLING_EVENTS.FIELD_FILLED_UPDATE, {
-            field: f,
-            checked: check,
-            parentFieldName,
-            rowIndex: row,
-          });
-        },
-      };
-    });
+  const part = p as TextUIPart;
 
-    const filled = fieldPropsArray.filter((f) => f !== null);
+  const formFillingCtx = usePluginCtx<FormFillingPluginCtx, FormFillingPlugin>(PLUGIN_NAME);
 
-    return (
-      <MessageContent className="gap-0 py-0" compact>
-        {status === 'ready' ? `已为你填写${filled.length}个字段` : null}
-        <FieldValueCheckerListMsg
-          props={filled}
-          readonly={confirmed}
-          streaming={status === 'streaming'}
-        >
-          {status === 'ready' ? (
-            <PrimaryConfirmBtn
-              className="mt-[20px] mb-[10px]"
-              disabled={confirmed}
-              onClick={() => {
-                setConfirmed(true);
-              }}
-            >
-              {confirmed ? '已确认' : '确认'}
-            </PrimaryConfirmBtn>
-          ) : null}
-        </FieldValueCheckerListMsg>
-        {status === 'ready'
-          ? '请选择需要的字段添加到表单。你可以补充描述后重新生成，表单中已添加字段在下次生成时保留。'
-          : null}
-      </MessageContent>
-    );
-  }
+  useConversationIdInCtx(formFillingCtx, id);
 
-  if (formFillingCtx?.fillMode === 'batch' && fieldsParts.length) {
-    return (
-      <BatchGeneratorAction
-        id={id}
-        setMessages={setMessages}
-        status={status}
-        parts={fieldsParts}
-        sendMessage={sendMessage}
-      />
-    );
-  }
+  const fieldsData = useFieldsData(part, formFillingCtx);
 
-  if (showConfirmBtn) {
-    return <PrimaryConfirmBtn>保存</PrimaryConfirmBtn>;
-  }
+  const renderStrategy = getRenderStrategy(formFillingCtx, fieldsData, part);
 
-  if (part.text !== undefined && part.text.trim() !== '') {
-    return <MarkdownMsgpart {...props} />;
-  }
+  const Component = RENDER_STRATEGY_COMPONENT_MAP[renderStrategy];
 
-  return null;
+  return (
+    <Component
+      {...props}
+      {...fieldsData}
+    />
+  )
 };

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

@@ -0,0 +1,18 @@
+import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
+import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
+import { DATA_COUNT_PER_BATCH } from '../const';
+import { memo } from 'react';
+import BorderAnimation from '@/components/bs-ui/border-animation';
+
+export const NonFirstBatchGeneratingAnimation = memo(() => {
+  return (
+    <BorderAnimation borderRadius={10} height={110}>
+      <div className="flex flex-col gap-[10px] w-full pt-[4px]">
+        <GenerateAnimation className='ml-[16px] py-[10px]'>继续生成中，可点击下方暂停按钮暂停</GenerateAnimation>
+        <PrimaryConfirmBtn
+          className="w-[300px] mx-auto"
+        text={`继续生成${DATA_COUNT_PER_BATCH}条`} disabled />
+      </div>
+    </BorderAnimation>
+  );
+});

package/src/plugins/form-filling-plugin/components/single-fill-part.tsx

@@ -0,0 +1,42 @@
+import { MsgPartCompProps } from "@baishuyun/types";
+import { IFieldsData } from "../types";
+import { MessageContent } from "@/components/biz-comp/message-content";
+import { FieldValueCheckerListMsg } from "@/components/biz-comp/FieldCheckerListMsg";
+import { PrimaryConfirmBtn } from "@/components/bs-ui/primary-confirm-btn";
+import { useState } from "react";
+
+export const SingleFillPart: React.FC<MsgPartCompProps & IFieldsData> = (props) => {
+    const { status, filledFields} = props;
+    const [confirmed, setConfirmed] = useState(false);
+
+    const prefixTips = status === 'ready' ? `已为你填写${filledFields.length}个字段` : null;
+    const suffixTips = status === 'ready'
+        ? '请选择需要的字段添加到表单。你可以补充描述后重新生成，表单中已添加字段在下次生成时保留。'
+        : null;
+
+        const confirmedText = confirmed ? '已确认' : '确认';
+
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        {prefixTips}
+        <FieldValueCheckerListMsg
+          props={filledFields}
+          readonly={confirmed}
+          streaming={status === 'streaming'}
+        >
+          {status === 'ready' ? (
+            <PrimaryConfirmBtn
+              className="mt-[20px] mb-[10px]"
+              disabled={confirmed}
+              onClick={() => {
+                setConfirmed(true);
+              }}
+            >
+                {confirmedText}
+            </PrimaryConfirmBtn>
+          ) : null}
+        </FieldValueCheckerListMsg>
+        {suffixTips}
+      </MessageContent>
+    )
+}

package/src/plugins/form-filling-plugin/hooks/use-conversation-id-in-ctx.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { FormFillingPluginCtx } from '../types';
+
+export const useConversationIdInCtx = (
+  ctx: FormFillingPluginCtx | null,
+  conversationId?: string
+) => {
+  useEffect(() => {
+    if (ctx && conversationId) {
+      ctx.conversationId = conversationId;
+    }
+  }, [ctx, conversationId]);
+};

package/src/plugins/form-filling-plugin/hooks/use-fields-data.ts

@@ -0,0 +1,110 @@
+import { TextUIPart } from 'ai';
+import { FormFillingPluginCtx, IFieldsData } from '../types';
+import { GetFieldJsonInfo, IsFieldsJsonPart } from '@/lib/utils';
+import { FieldValueCheckerProps } from '@/components/biz-comp/FieldValueChecker';
+import { valueNormalizer } from '../utils';
+import { useEvtBus } from '@/hooks/use-evt-bus';
+import { FILLING_EVENTS } from '../const';
+import { IEvtBus } from '@baishuyun/types';
+import { useMemo } from 'react';
+
+// 解析消息中的字段数据，生成表单填写组件所需的数据结构
+const extractFieldParts = (part: TextUIPart): TextUIPart[] => {
+  if (Array.isArray(part) && part.length > 0) return part;
+  if (IsFieldsJsonPart(part)) return [part];
+  return [];
+};
+
+// 判断是否为单条填写模式
+const isSingleFillMode = (parts: TextUIPart[], ctx: FormFillingPluginCtx | null): boolean => {
+  return parts.length > 0 && ctx !== null && ctx.fillMode !== 'batch';
+};
+
+// 原问题：onLoaded/onChange 在 render 中定义，导致子组件每次都会收到新的函数引用
+// 改进：若性能敏感，应使用 useMemo 或拆分为独立组件
+
+interface FieldConfig {
+  field: FieldValueCheckerProps['field'];
+  onLoaded: (f: any) => void;
+  onChange: FieldValueCheckerProps['onChange'];
+}
+
+const createFieldConfig = (
+  part: TextUIPart,
+  ctx: FormFillingPluginCtx,
+  evtBus: IEvtBus
+): FieldConfig | null => {
+  const field = GetFieldJsonInfo(part);
+  if (!field) return null;
+
+  const isRegistered =
+    ctx.fieldMap?.has(field.fieldName) || ctx.subFieldsNameMap?.has(field.fieldName);
+
+  if (!isRegistered) {
+    console.warn('[useFieldsData] Unregistered field skipped:', field.fieldName);
+    return null;
+  }
+
+  const normalizedValue = valueNormalizer(field.value as string | string[]);
+
+  return {
+    field: {
+      label: field.label,
+      widget: {
+        widgetName: field.fieldName,
+        type: field.fieldType,
+        value: field.value,
+      },
+    },
+    onLoaded: (instance) => {
+      instance.widget.value = normalizedValue;
+      ctx.valueMap.set(instance.widget?.widgetName, normalizedValue);
+      evtBus.emit(FILLING_EVENTS.FIELD_FILLED_UPDATE, {
+        field: instance,
+        checked: true,
+      });
+    },
+    onChange: (checked, instance, parentFieldName, rowIndex) => {
+      if (checked) {
+        ctx.valueMap.set(instance.widget?.widgetName, normalizedValue);
+      }
+      evtBus.emit(FILLING_EVENTS.FIELD_FILLED_UPDATE, {
+        field: instance,
+        checked,
+        parentFieldName,
+        rowIndex,
+      });
+    },
+  };
+};
+
+export const useFieldsData = (
+  part: TextUIPart,
+  formFillingCtx: FormFillingPluginCtx | null
+): IFieldsData => {
+  const evtBus = useEvtBus();
+
+  const rawFieldParts = useMemo(() => extractFieldParts(part), [part]);
+
+  const isSingleMode = useMemo(
+    () => isSingleFillMode(rawFieldParts, formFillingCtx),
+    [rawFieldParts, formFillingCtx]
+  );
+
+  const fieldConfigs = useMemo(() => {
+    if (!isSingleMode || !formFillingCtx) return [];
+
+    return rawFieldParts
+      .map((p) => createFieldConfig(p, formFillingCtx, evtBus))
+      .filter((config): config is FieldConfig => config !== null);
+  }, [rawFieldParts, formFillingCtx, evtBus, isSingleMode]);
+
+  return useMemo(
+    () => ({
+      fieldsParts: rawFieldParts,
+      fieldPropsArray: fieldConfigs,
+      filledFields: fieldConfigs.filter(Boolean),
+    }),
+    [rawFieldParts, fieldConfigs]
+  );
+};