@baishuyun/chat-sdk 0.0.17 → 0.0.18

package/src/plugins/form-builder-plugin/components/msg-part.tsx

@@ -1,178 +1,33 @@
 import { MarkdownMsgpart } from '@/components/biz-comp/markdown-part';
-import { MessageContent } from '@/components/biz-comp/message-content';
-import { FollowUp } from './follow-up';
 
-import {
-  GetFieldJsonInfo,
-  getIconValue,
-  IsFieldsJsonPart,
-  IsSuggesstionPart,
-  NeedToAppendFieldsSaveConfirm,
-} from '@/lib/utils';
-import { MsgPartCompProps, RealFormInfo } from '@baishuyun/types';
+import { MsgPartCompProps } from '@baishuyun/types';
 import { TextUIPart } from 'ai';
 import { useFieldsConfirmed } from '../hooks/use-fields-confirmed';
-import { useEvtBus } from '@/hooks/use-evt-bus';
-import { usePlugin } from '@/hooks/use-plugin';
-import { MCP_PLUGIN_NAME } from '../const';
-import { FormBuilderPlugin } from '..';
-import { CreateFormConfirm } from './create-form-confirm';
-import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
-import {
-  FieldCheckerListMsg,
-  FieldCheckerListMsgRef,
-} from '@/components/biz-comp/FieldCheckerListMsg';
-import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
-import { FieldIcon } from '../../../components/biz-comp/field-icon';
-import { CheckerIcon } from '@/components/bs-ui/bs-icons';
-import { usePluginCtx } from '@/hooks/use-plugin-ctx';
-import { McpFormBuilderPluginCtx } from '../types';
-import { DesignInfo } from './design-info';
-import { useRef } from 'react';
+import { FormBuildPartRenderStrategyMap } from '../types';
+import { FieldsPart } from './fields-part';
+import { SuggestionPart, SuggestionPrefixPart } from './suggestion-part';
+import { getRenderStrategy } from '../utils/get-render-strategy';
+import { DesignDocPart } from './design-doc-part';
+
+const FormBuildPartRenderer: FormBuildPartRenderStrategyMap = {
+  fields: FieldsPart,
+  followup: SuggestionPart,
+  followup_prefix: SuggestionPrefixPart,
+  design_doc: DesignDocPart,
+  markdown: MarkdownMsgpart,
+  unknown: MarkdownMsgpart,
+};
 
 export const McpMessagePart = (props: MsgPartCompProps) => {
-  const { part: p, sendMessage, status } = props;
-
-  const fieldsConfirmed = useFieldsConfirmed();
+  const { part: p } = props;
 
   const part = p as TextUIPart;
 
-  const isFieldsJson = IsFieldsJsonPart(part);
-
-  const isFieldsSaveConfirm = NeedToAppendFieldsSaveConfirm(part);
-
-  const evtBus = useEvtBus();
-
-  const plugin = usePlugin<FormBuilderPlugin>(MCP_PLUGIN_NAME);
-
-  const checkerRef = useRef<FieldCheckerListMsgRef>(null);
-
-  const ctx = usePluginCtx<McpFormBuilderPluginCtx, FormBuilderPlugin>(MCP_PLUGIN_NAME);
-
-  const fieldsParts = Array.isArray(part) && part.length ? part : isFieldsJson ? [part] : [];
+  const strategy = getRenderStrategy(part);
 
-  if (fieldsParts.length) {
-    const fieldPropsArray = fieldsParts.map((p) => {
-      const field = GetFieldJsonInfo(p);
-      return {
-        field,
-        disabled: fieldsConfirmed,
-        onLoaded: (field: any) => {
-          const finalField = plugin?.onBeforeFieldCreate(field);
-          evtBus.emit('form-builder-FieldCreated', {
-            field: finalField,
-            checked: true,
-          });
-          plugin?.onAfterFieldCreate(field);
-        },
-        icon: <FieldIcon type={field.widget?.type} />,
-        onChange: (check: boolean, field: any, parentFieldName?: string, index?: number) => {
-          console.log('field checked changed:', { check, field, parentFieldName, index });
-          evtBus.emit('form-builder-FieldCheckedChanged', {
-            field,
-            checked: check,
-            parentFieldName,
-            index,
-          });
-        },
-      };
-    });
+  const PartComp = FormBuildPartRenderer[strategy] || MarkdownMsgpart;
 
-    const formName = plugin?.getCurrentWorkingForm()?.formName || '';
-
-    return (
-      <MessageContent className="gap-0 py-0" compact>
-        <div>
-          <b style={{ display: 'inline-block' }}>{formName}</b>
-          {` 已生成${fieldPropsArray.length}个字段`}
-        </div>
-        <FieldCheckerListMsg
-          ref={checkerRef}
-          fields={fieldPropsArray}
-          streaming={status === 'streaming'}
-          confirmed={fieldsConfirmed}
-        >
-          {status === 'ready' ? (
-            <PrimaryConfirmBtn
-              className="mt-[20px] mb-[10px]"
-              disabledWithInfo={fieldsConfirmed}
-              onClick={() => {
-                evtBus.emit(
-                  'form-builder-FieldsConfirmed',
-                  plugin?.getCurrentWorkingForm() as RealFormInfo
-                );
-                plugin.onAfterFieldsSave((processedInfo) => {
-                  evtBus.emit('form-builder-FieldsConfirmed', processedInfo as RealFormInfo);
-                });
-              }}
-            >
-              {fieldsConfirmed ? (
-                <>
-                  <CheckerIcon className="text-[#0265ff]" /> 已保存{' '}
-                  {checkerRef.current?.getCheckedFieldsLength() ?? 0} 个字段
-                </>
-              ) : (
-                '保存字段'
-              )}
-            </PrimaryConfirmBtn>
-          ) : null}
-        </FieldCheckerListMsg>
-        {status === 'ready'
-          ? '请选择需要的字段添加到表单。您可以补充描述后重新生成，表单中已添加字段在下次生成时保留。'
-          : null}
-      </MessageContent>
-    );
-  }
-
-  // suggestion
-  if (IsSuggesstionPart(part)) {
-    return fieldsConfirmed ? (
-      <FollowUp
-        title={part.text}
-        description={part.text}
-        onSelect={(title, icon) => {
-          if (ctx) {
-            ctx.workStage === 'design';
-
-            console.log('follow up icon code', icon);
-            console.log('follow up icon value', getIconValue(icon));
-            ctx.pickedIconValue = getIconValue(icon);
-          }
-
-          sendMessage(
-            { text: title },
-            {
-              body: {
-                stage: 'design',
-              },
-            }
-          );
-        }}
-        headless
-      />
-    ) : null;
-  }
-
-  // save fields confirm
-  if (isFieldsSaveConfirm) {
-    const formInfo = plugin?.getCurrentWorkingForm() as RealFormInfo;
-    evtBus.emit('form-builder-FieldsCreatedFinish', formInfo);
-    return <>{fieldsConfirmed ? <FakeBotMessage>试试以下建议</FakeBotMessage> : null}</>;
-  }
-
-  const appendConfirmBtn =
-    // TODO: 特殊文本解析在 node 端处理，前端只负责渲染
-    part.text?.includes('【确认搭建');
-
-  const isDesignDoc = part.text?.startsWith('待搭建表单信息');
+  const fieldsConfirmed = useFieldsConfirmed();
 
-  return isDesignDoc ? (
-    <DesignInfo designMarkdown={part.text} id={props.id}>
-      {appendConfirmBtn ? (
-        <CreateFormConfirm sendMessage={sendMessage} designDoc={part.text} />
-      ) : null}
-    </DesignInfo>
-  ) : (
-    <MarkdownMsgpart {...props}></MarkdownMsgpart>
-  );
+  return <PartComp {...props} part={part} confirmed={fieldsConfirmed} />;
 };

package/src/plugins/form-builder-plugin/components/suggestion-part.tsx

@@ -0,0 +1,62 @@
+import { MsgPartCompProps, RealFormInfo } from '@baishuyun/types';
+import { IExtraPartProps, McpFormBuilderPluginCtx } from '../types';
+import { FollowUp } from './follow-up';
+import { TextUIPart } from 'ai';
+import { usePluginCtx } from '@/hooks/use-plugin-ctx';
+import { FormBuilderPlugin } from '..';
+import { MCP_PLUGIN_NAME } from '../const';
+import { getIconValue } from '@/lib/utils';
+import { usePlugin } from '@/hooks/use-plugin';
+import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
+import { useEffect } from 'react';
+import { useEvtBus } from '@/hooks/use-evt-bus';
+
+export const SuggestionPrefixPart: React.FC<MsgPartCompProps & IExtraPartProps> = (props) => {
+  const { confirmed: fieldsConfirmed } = props;
+  const plugin = usePlugin<FormBuilderPlugin>(MCP_PLUGIN_NAME);
+  const formInfo = plugin?.getCurrentWorkingForm() as RealFormInfo;
+  const evtBus = useEvtBus();
+
+  useEffect(() => {
+    evtBus.emit('form-builder-FieldsCreatedFinish', formInfo);
+  }, []);
+
+  return <>{fieldsConfirmed ? <FakeBotMessage>试试以下建议</FakeBotMessage> : null}</>;
+};
+
+export const SuggestionPart: React.FC<MsgPartCompProps & IExtraPartProps> = (props) => {
+  const { confirmed, sendMessage, part: p } = props;
+  const part = p as TextUIPart;
+
+  const ctx = usePluginCtx<McpFormBuilderPluginCtx, FormBuilderPlugin>(MCP_PLUGIN_NAME);
+
+  if (!confirmed) {
+    return null;
+  }
+
+  return (
+    <FollowUp
+      title={part.text}
+      description={part.text}
+      onSelect={(title, icon) => {
+        if (ctx) {
+          ctx.workStage === 'design';
+
+          console.log('follow up icon code', icon);
+          console.log('follow up icon value', getIconValue(icon));
+          ctx.pickedIconValue = getIconValue(icon);
+        }
+
+        sendMessage(
+          { text: title },
+          {
+            body: {
+              stage: 'design',
+            },
+          }
+        );
+      }}
+      headless
+    />
+  );
+};

package/src/plugins/form-builder-plugin/hooks/index.tsx

@@ -0,0 +1,50 @@
+import { TextUIPart } from 'ai';
+import { usePlugin } from '@/hooks/use-plugin';
+import { useEvtBus } from '@/hooks/use-evt-bus';
+import { GetFieldJsonInfo, IsFieldsJsonPart } from '@/lib/utils';
+import { FormBuilderPlugin } from '..';
+import { MCP_PLUGIN_NAME } from '../const';
+import { FieldValueCheckerProps } from '@/components/biz-comp/FieldValueChecker';
+import { FieldIcon } from '@/components/biz-comp/field-icon';
+
+export const useBuildFieldsData = (part: TextUIPart, fieldsConfirmed: boolean) => {
+  const isFieldsJson = IsFieldsJsonPart(part);
+  const fieldsParts = Array.isArray(part) && part.length ? part : isFieldsJson ? [part] : [];
+
+  const evtBus = useEvtBus();
+
+  const plugin = usePlugin<FormBuilderPlugin>(MCP_PLUGIN_NAME);
+
+  return fieldsParts
+    .map((p) => {
+      const field = GetFieldJsonInfo(p);
+
+      if (!field?.widget) {
+        return null;
+      }
+
+      return {
+        field,
+        disabled: fieldsConfirmed,
+        onLoaded: (field: any) => {
+          const finalField = plugin?.onBeforeFieldCreate(field);
+          evtBus.emit('form-builder-FieldCreated', {
+            field: finalField,
+            checked: true,
+          });
+          plugin?.onAfterFieldCreate(field);
+        },
+        icon: <FieldIcon type={field.widget?.type} />,
+        onChange: (check: boolean, field: any, parentFieldName?: string, index?: number) => {
+          console.log('field checked changed:', { check, field, parentFieldName, index });
+          evtBus.emit('form-builder-FieldCheckedChanged', {
+            field,
+            checked: check,
+            parentFieldName,
+            index,
+          });
+        },
+      };
+    })
+    .filter(Boolean) as Array<FieldValueCheckerProps>;
+};

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

@@ -20,9 +20,10 @@ import {
   hasSubFields,
   hasLinkInfo,
   fieldProcessorFactory,
+  ensureCleanFormName,
 } from './utils';
 import { EVENTS } from '../form-builder-base-plugin/const';
-import { IsFieldsJsonPart, mergeConsecutiveTargets } from '@/lib/utils';
+import { ensureEndSlash, IsFieldsJsonPart, mergeConsecutiveTargets } from '@/lib/utils';
 import { EntryButton } from './components/entry-btn';
 import { FormBuilderOpeningLines } from './components/opening-lines';
 
@@ -45,10 +46,6 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
     OpeningLines: FormBuilderOpeningLines,
   };
 
-  // clear cwf(current working form) when workStage is build, which means rebuild fields from scratch.
-  //   1. clear fields.
-  //   2. clear fieldMap.
-  //   3. rebuild linkInfo based on rebuild fields?
   private clearCurrentWorkingForm = () => {
     if (this.Context.workStage !== 'build') {
       // 仅在搭建阶段清空当前表单信息
@@ -60,14 +57,6 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
       return;
     }
 
-    // 清空当前表单字段信息
-    cwf.fields = [];
-    cwf.fieldMap.clear();
-
-    // TODO: 清空当前表单关联信息
-    // cwf.designInfo.linkInfoMap.clear();
-
-    // 触发字段清空事件，通知更新状态
     const evtBus = this._chatInstance?.eventBus;
     if (evtBus) {
       evtBus.emit<'form-builder-FieldsCleared'>(EVENTS.FIELDS_CLEARED, {});
@@ -76,15 +65,7 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
 
   public lifecycleHooks?: Partial<PluginHooks> | undefined = {
     onBeforeMessagesClear: (conversationId) => {
-      const req = async () => {
-        await fetch(`https://agent.online-office.net/web/api/form/conversation/clear`, {
-          method: 'POST',
-          body: JSON.stringify({ conversationId }),
-        });
-      };
-
-      req();
-
+      this.clearHistoryConversation(conversationId || '', this._chatInstance || undefined);
       this.Context.workStage = 'design';
     },
     onBeforeMessagePartsRender(parts: Array<part>) {
@@ -99,12 +80,20 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
           body: {
             stage: this.Context.workStage,
             name: this.getCurrentWorkingForm()?.formName || text,
+            text,
           },
         },
       };
     },
-    onAfterChatAreaHide({ clearMsgs }) {
+    onAfterChatAreaHide: ({ clearMsgs }) => {
       clearMsgs();
+
+      this.clearCurrentWorkingForm();
+
+      this.Context = {
+        formMap: new Map(),
+        workStage: 'design',
+      };
     },
     onBeforeChatRender: () => {
       return {
@@ -162,6 +151,24 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
     }
   }
 
+  private clearHistoryConversation = async (conversationId: string, inst?: IChatSDK) => {
+    const apiEndpoint = 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 enhanceField(field: Field) {
     const processorCreator = fieldProcessorFactory[field.widget.type as FieldType];
     if (!processorCreator) {
@@ -258,19 +265,17 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
     this.Context.pickedIconValue = 33;
   };
 
-  public onAfterFieldsSave(onFormProcessed: (processedForm: FormInfo) => void) {
+  public onAfterFieldsSave = (onFormProcessed: (processedForm: FormInfo) => void) => {
     // 取当前正在处理的表单 current working form
     const cwf = this.getCurrentWorkingForm();
     if (!cwf) {
       return;
     }
 
-    // 上下文中表单字段遍历，识别需要回写的表单、字段
     formFieldsWalker(this.Context.formMap, {
       // 目标表单筛选
       isTargetForm: (formName: string, formInfo: FormInfo) => {
         if (formName === cwf.formName) {
-          console.log('跳过自身表单');
           return false;
         }
 
@@ -284,16 +289,21 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
 
       // 目标字段筛选
       isTargetField: (_: string, linkInfo: LinkInfo) => {
-        // 如果目标字段关联了当前表单，则需要处理
-        return linkInfo.targetFormName === cwf.formName;
+        return ensureCleanFormName(linkInfo.targetFormName) === ensureCleanFormName(cwf.formName!);
       },
 
       // 字段处理，补全关联信息
       fieldProcessor: (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => {
+        if (!field) {
+          console.log('[fieldProcessor] 字段信息不存在，跳过处理');
+          return;
+        }
+
         const fieldType = field.widget?.type as FieldType;
 
         // 没有对应的处理器，跳过
         if (!fieldProcessorFactory[fieldType]) {
+          console.log(`[fieldProcessor] 未找到${fieldType}类型的处理器，跳过处理`);
           return;
         }
 
@@ -307,7 +317,7 @@ export class FormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPlugi
 
       onFormProcessed,
     });
-  }
+  };
 
   public getCurrentWorkingForm() {
     return this.Context.formMap.get(this.currentWorkingFormName);
@@ -324,7 +334,6 @@ export const FormBuilderPluginRegisterEntry: PluginRegistryEntry<McpFormBuilderP
   createContext: () => {
     return {
       formMap: new Map(),
-
       workStage: 'design', // 默认设计阶段
     };
   },

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

@@ -1,6 +1,6 @@
 import { FieldsTools } from '@baishuyun/agents';
-import { FormBuilderWorkStage, ValueOf } from '@baishuyun/types';
-import { ToolUIPart } from 'ai';
+import { FormBuilderWorkStage, MsgPartCompProps, ValueOf } from '@baishuyun/types';
+import { TextUIPart, ToolUIPart } from 'ai';
 import { DesignInfo } from './utils';
 
 export type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
@@ -24,3 +24,20 @@ export interface McpFormBuilderPluginCtx {
 
   pickedIconValue?: number;
 }
+
+export type FormBuildPartRenderStrategy =
+  | 'fields'
+  | 'followup'
+  | 'followup_prefix'
+  | 'design_doc'
+  | 'markdown'
+  | 'unknown';
+
+export interface IExtraPartProps {
+  confirmed?: boolean;
+  part: TextUIPart;
+}
+
+export type FormBuildPartRenderStrategyMap = {
+  [key in FormBuildPartRenderStrategy]: React.FC<MsgPartCompProps & IExtraPartProps>;
+};

package/src/plugins/form-builder-plugin/utils/get-render-strategy.ts

@@ -0,0 +1,27 @@
+import { IsFieldsJsonPart, IsSuggesstionPart, NeedToAppendFieldsSaveConfirm } from '@/lib/utils';
+import { TextUIPart } from 'ai';
+
+export const getRenderStrategy = (part: TextUIPart) => {
+  const isFieldsJson = IsFieldsJsonPart(part);
+  const fieldsParts = Array.isArray(part) && part.length ? part : isFieldsJson ? [part] : [];
+
+  if (fieldsParts.length) {
+    return 'fields';
+  }
+
+  if (IsSuggesstionPart(part)) {
+    return 'followup';
+  }
+
+  const isFieldsSaveConfirm = NeedToAppendFieldsSaveConfirm(part);
+  if (isFieldsSaveConfirm) {
+    return 'followup_prefix';
+  }
+
+  const isDesignDoc = part.text?.startsWith('待搭建表单信息');
+  if (isDesignDoc) {
+    return 'design_doc';
+  }
+
+  return 'markdown';
+};