@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/plugins/mcp-form-builder-plugin/components/create-form-confirm.tsx

@@ -0,0 +1,126 @@
+import { useRef, useState, memo, useEffect } from 'react';
+import { usePlugin } from '@/hooks/use-plugin';
+import { MCP_PLUGIN_NAME } from '../const';
+import { McpFormBuilderPlugin } from '..';
+import { EVENTS } from '@/plugins/form-builder-base-plugin/const';
+import { ChatMessage, RealFormInfo, UseChatHelpers } from '@baishuyun/types';
+import { useEvt } from '@/hooks/use-evt';
+import { parseFormDesignInfo } from '../utils';
+import { useEvtBus } from '@/hooks/use-evt-bus';
+import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
+import FormInfoEditor, { FORM_ICON_OPTIONS } from '@/components/bs-ui/form-info-editor';
+import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
+import { GenerateAnimation } from '@/components/bs-ui/generate-animation';
+
+export const CreateFormConfirm = memo(
+  ({
+    designDoc,
+    sendMessage,
+  }: {
+    sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
+    onMount?: () => void;
+    designDoc: string;
+  }) => {
+    const plugin = usePlugin(MCP_PLUGIN_NAME) as McpFormBuilderPlugin;
+
+    const [confirm, setConfirm] = useState(false);
+
+    const [success, setSuccess] = useState(false);
+
+    const evtBus = useEvtBus();
+
+    const formRef = useRef<RealFormInfo | null>(null);
+
+    useEvt(EVENTS.CREATE_FORM_SUCCESS, (formInfo: RealFormInfo) => {
+      plugin?.onFormCreate(formInfo);
+      setSuccess(true);
+      formRef.current = formInfo;
+    });
+
+    useEffect(() => {
+      if (!formRef.current) return;
+
+      evtBus.emit('form-builder-FieldsCreatedFinish', formRef.current!);
+    }, []);
+
+    const designInfo = parseFormDesignInfo(designDoc);
+
+    const afterConfirm = (
+      <FakeBotMessage>
+        {success ? (
+          <>
+            已为你创建{designInfo.formName}
+            <FormInfoEditor
+              onConfirm={(name, icon) => {
+                if (!formRef.current) {
+                  return;
+                }
+
+                formRef.current.formName = name;
+                formRef.current.formIcon = icon;
+
+                evtBus.emit(EVENTS.UPDATE_FORM_INFO, formRef.current);
+              }}
+              onNameChange={(name) => {
+                if (!formRef.current) {
+                  return;
+                }
+
+                formRef.current.formName = name;
+
+                evtBus.emit(EVENTS.UPDATE_FORM_INFO, formRef.current);
+              }}
+              onIconChange={(opt) => {
+                if (!formRef.current) {
+                  return;
+                }
+
+                formRef.current.formIcon = opt.value;
+
+                evtBus.emit(EVENTS.UPDATE_FORM_INFO, formRef.current);
+              }}
+              name={designInfo.formName}
+              iconOptions={FORM_ICON_OPTIONS}
+              className="w-full"
+              onMount={() => {
+                setTimeout(() => {
+                  sendMessage(
+                    { text: `确认搭建：${plugin.getCurrentWorkingForm()?.formName}` },
+                    {
+                      body: {
+                        stage: 'build',
+                      },
+                    }
+                  );
+                }, 500);
+              }}
+            />
+          </>
+        ) : (
+          <GenerateAnimation>创建中</GenerateAnimation>
+        )}
+      </FakeBotMessage>
+    );
+
+    return (
+      <>
+        <PrimaryConfirmBtn
+          prefixDesc={`确认搭建：${designInfo.formName}`}
+          onClick={() => {
+            plugin?.onBeforeFormCreate(designInfo);
+
+            evtBus.emit('form-builder-FormCreateConfirmed', {
+              name: designInfo.formName,
+            });
+
+            setConfirm(true);
+          }}
+        />
+        {confirm ? afterConfirm : null}
+      </>
+    );
+  },
+  (p1, p2) => {
+    return p1.designDoc === p2.designDoc;
+  }
+);

package/src/plugins/mcp-form-builder-plugin/components/entry-btn.tsx

@@ -0,0 +1,9 @@
+import { PrimaryEntryBtn } from '@/components/bs-ui/primary-entry-btn';
+import { EntryButtonProps } from '@baishuyun/types';
+export const EntryButton = ({ style, chatVisible, onClick }: EntryButtonProps) => {
+  return (
+    <PrimaryEntryBtn style={style} minimal={chatVisible} onClick={onClick}>
+      AI表单搭建
+    </PrimaryEntryBtn>
+  );
+};

package/src/plugins/mcp-form-builder-plugin/components/follow-up.tsx

@@ -0,0 +1,15 @@
+import LinearGradientBorderBtn from '@/components/bs-ui/linear-gradient-border-btn';
+import { SuggestionCardProps } from '@baishuyun/types';
+
+export const FollowUp = (props: SuggestionCardProps) => {
+  return (
+    <LinearGradientBorderBtn
+      className="self-start"
+      onClick={() => {
+        props.onSelect?.(props.title);
+      }}
+    >
+      {props.description}
+    </LinearGradientBorderBtn>
+  );
+};

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

@@ -0,0 +1,135 @@
+import { MarkdownMsgpart } from '@/components/biz-comp/markdown-part';
+import { MessageContent } from '@/components/biz-comp/message-content';
+import { FollowUp } from './follow-up';
+
+import {
+  GetFieldJsonInfo,
+  IsFieldsJsonPart,
+  IsSuggesstionPart,
+  NeedToAppendFieldsSaveConfirm,
+} from '@/lib/utils';
+import { MsgPartCompProps, RealFormInfo } 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 { McpFormBuilderPlugin } from '..';
+import { CreateFormConfirm } from './create-form-confirm';
+import { FakeBotMessage } from '@/components/biz-comp/FakeBotMsg';
+import { FieldCheckerListMsg } from '@/components/biz-comp/FieldCheckerListMsg';
+import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
+import { FieldIcon } from '../../../components/biz-comp/field-icon';
+
+export const McpMessagePart = (props: MsgPartCompProps) => {
+  const { part: p, sendMessage } = props;
+
+  const fieldsConfirmed = useFieldsConfirmed();
+
+  const part = p as TextUIPart;
+
+  const isFieldsJson = IsFieldsJsonPart(part);
+
+  const isFieldsSaveConfirm = NeedToAppendFieldsSaveConfirm(part);
+
+  const evtBus = useEvtBus();
+
+  const plugin = usePlugin<McpFormBuilderPlugin>(MCP_PLUGIN_NAME);
+
+  const fieldsParts = Array.isArray(part) && part.length ? part : isFieldsJson ? [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) => {
+          evtBus.emit('form-builder-FieldCheckedChanged', {
+            field,
+            checked: check,
+            parentFieldName,
+            index,
+          });
+        },
+      };
+    });
+
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <FieldCheckerListMsg fields={fieldPropsArray} />
+      </MessageContent>
+    );
+  }
+
+  // suggestion
+  if (IsSuggesstionPart(part)) {
+    return fieldsConfirmed ? (
+      <FollowUp
+        title={part.text}
+        description={part.text}
+        onSelect={(title) => {
+          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 ? (
+      <PrimaryConfirmBtn
+        onClick={() => {
+          evtBus.emit(
+            'form-builder-FieldsConfirmed',
+            plugin?.getCurrentWorkingForm() as RealFormInfo
+          );
+
+          plugin.onAfterFieldsSave((processedInfo) => {
+            evtBus.emit('form-builder-FieldsConfirmed', processedInfo as RealFormInfo);
+          });
+        }}
+      >
+        保存字段
+      </PrimaryConfirmBtn>
+    ) : (
+      <FakeBotMessage>试试以下建议</FakeBotMessage>
+    );
+  }
+
+  const appendConfirmBtn =
+    // TODO: 特殊文本解析在 node 端处理，前端只负责渲染
+    part.state === 'done' && part.text.includes('【确认搭建');
+
+  if (isFieldsSaveConfirm) {
+    return null;
+  }
+
+  return (
+    <MarkdownMsgpart {...props}>
+      {appendConfirmBtn ? (
+        <CreateFormConfirm sendMessage={sendMessage} designDoc={part.text} />
+      ) : null}
+    </MarkdownMsgpart>
+  );
+};

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

@@ -0,0 +1,13 @@
+export const MCP_PLUGIN_NAME = "McpFormBuilderPlugin";
+
+export const DEFAULT_DATA_LOAD_CONF = {
+  //数据加载的配置
+  mode: "tree", //显示模式  tree 树菜单  list 列表
+  extendSet: {
+    sort: ["datahelp", "module", "formEvent"],
+    status: true,
+    triggerField: "",
+    triggerFieldMode: "none",
+  },
+  dataloadmode: ["add", "cover"],
+};

package/src/plugins/mcp-form-builder-plugin/hooks/use-fields-confirmed.ts

@@ -0,0 +1,12 @@
+import { useEvt } from "@/hooks/use-evt";
+import { EVENTS } from "@/plugins/form-builder-base-plugin/const";
+import { useState } from "react";
+
+export const useFieldsConfirmed = () => {
+  const [confirmed, setConfirmed] = useState(false);
+  useEvt(EVENTS.SAVE_FIELDS, () => {
+    setConfirmed(true);
+  });
+
+  return confirmed;
+};

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

@@ -0,0 +1,225 @@
+import {
+  FieldType,
+  MsgPartCompProps,
+  PluginCustomComponent,
+  PluginHooks,
+  PluginRegistryEntry,
+  RealFormInfo,
+  ValueOf,
+} from '@baishuyun/types';
+import type { McpFormBuilderPluginCtx, Field, FormInfo } from './types';
+import { McpMessagePart } from './components/msg-part';
+import { FormBuilderBasePlugin } from '../form-builder-base-plugin';
+import { MCP_PLUGIN_NAME } from './const';
+import {
+  type LinkInfo,
+  type DesignInfo,
+  formFieldsWalker,
+  isFieldTypeEqual,
+  hasSubFields,
+  hasLinkInfo,
+  fieldProcessorFactory,
+} from './utils';
+import { EVENTS } from '../form-builder-base-plugin/const';
+import { IsFieldsJsonPart, mergeConsecutiveTargets } from '@/lib/utils';
+import { EntryButton } from './components/entry-btn';
+
+type part = ValueOf<Pick<MsgPartCompProps, 'part'>>;
+
+export class McpFormBuilderPlugin extends FormBuilderBasePlugin<McpFormBuilderPluginCtx> {
+  public pluginName: string = MCP_PLUGIN_NAME;
+
+  private currentWorkingFormName: string = '';
+
+  public customComponents?: Partial<PluginCustomComponent> | undefined = {
+    MessagePart: McpMessagePart,
+    EntryButton,
+  };
+
+  public lifecycleHooks?: Partial<PluginHooks> | undefined = {
+    onBeforeMessagePartsRender(parts: Array<part>) {
+      return mergeConsecutiveTargets<part>(parts, IsFieldsJsonPart) as part[];
+    },
+  };
+
+  public constructor(ctx: McpFormBuilderPluginCtx) {
+    super(ctx);
+
+    this.addEventListeners();
+  }
+
+  public dispose = () => {
+    this.removeEventListeners();
+  };
+
+  public onAfterFieldCreate(field: Field) {
+    const currentFormInfo = this.Context.formMap.get(this.currentWorkingFormName);
+
+    if (!currentFormInfo) {
+      return;
+    }
+
+    // 子表单创建后，存入表单 map
+    currentFormInfo.fields.push(field);
+    currentFormInfo.fieldMap.set(field.label, field);
+
+    // 子表单字段打平放入 map 中，方便查找
+    if (hasSubFields(field)) {
+      field.widget.items.forEach((subField: Field) => {
+        currentFormInfo.fieldMap.set(subField.label, subField);
+      });
+    }
+
+    // 数据加载字段，也写入关联信息，方便后续处理
+    if (isFieldTypeEqual(field, 'dataload')) {
+      currentFormInfo.designInfo.linkInfoMap.set(field.label, {
+        fieldName: field.label,
+        targetFormName: field.widget.loaddataconfig?.forms || '',
+      });
+    }
+  }
+
+  private enhanceField(field: Field) {
+    const processorCreator = fieldProcessorFactory[field.widget.type as FieldType];
+    if (!processorCreator) {
+      return field;
+    }
+
+    const currentFormInfo = this.Context.formMap.get(this.currentWorkingFormName);
+
+    if (!currentFormInfo) {
+      return field;
+    }
+
+    const processor = processorCreator(this.Context.formMap);
+
+    const currentFieldLinkInfo = currentFormInfo.designInfo.linkInfoMap.get(field.label);
+    if (!currentFieldLinkInfo) {
+      return field;
+    }
+
+    console.log('识别到表单中有关联字段，尝试补全关联信息');
+    return processor(currentFormInfo, field, currentFieldLinkInfo);
+  }
+
+  public onBeforeFieldCreate(field: Field) {
+    if (!isFieldTypeEqual(field, 'subform')) {
+      return this.enhanceField(field);
+    }
+
+    // 处理子表单中的关联字段
+    if (!field.widget.items || field.widget.items.length === 0) {
+      return field;
+    }
+
+    field.widget.items = field.widget.items.map((subField: Field) => {
+      return this.enhanceField(subField);
+    });
+
+    return field;
+  }
+
+  // 记录表单设计信息
+  public onBeforeFormCreate(designInfo: DesignInfo) {
+    const formName = designInfo.formName || 'Unnamed Form';
+
+    console.log('表单设计信息提取完毕，结构化数据如下：', designInfo);
+
+    const formInfo = this.Context.formMap.get(formName);
+    if (!formInfo) {
+      this.Context.formMap.set(formName, {
+        designInfo,
+        fields: [],
+        fieldMap: new Map(),
+        formName,
+      });
+    }
+
+    this.currentWorkingFormName = formName;
+  }
+
+  // handleFormCreate
+  public onFormCreate(formInfo: RealFormInfo) {
+    // 更新表单信息
+    const existingFormInfo = this.Context.formMap.get(formInfo.formName!);
+
+    if (!existingFormInfo) {
+      console.log('未找到已有表单，放弃更新信息');
+      return;
+    }
+
+    existingFormInfo.formId = formInfo.formId;
+    existingFormInfo.appId = formInfo.appId;
+
+    // this.onAfterFieldsSave(() => {});
+  }
+
+  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;
+        }
+
+        if (!hasLinkInfo(formInfo.designInfo)) {
+          console.log('关联信息为空，不处理');
+          return false;
+        }
+
+        return true;
+      },
+
+      // 目标字段筛选
+      isTargetField: (_: string, linkInfo: LinkInfo) => {
+        // 如果目标字段关联了当前表单，则需要处理
+        return linkInfo.targetFormName === cwf.formName;
+      },
+
+      // 字段处理，补全关联信息
+      fieldProcessor: (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => {
+        const fieldType = field.widget?.type as FieldType;
+
+        // 没有对应的处理器，跳过
+        if (!fieldProcessorFactory[fieldType]) {
+          return;
+        }
+
+        // 创建处理器
+        const processorCreator = fieldProcessorFactory[fieldType];
+        const processor = processorCreator(this.Context.formMap);
+
+        // 字段处理
+        return processor(formInfo, field, linkInfo);
+      },
+
+      onFormProcessed,
+    });
+  }
+
+  public getCurrentWorkingForm() {
+    return this.Context.formMap.get(this.currentWorkingFormName);
+  }
+
+  private addEventListeners() {}
+
+  private removeEventListeners() {}
+}
+
+export const McpFormBuilderPluginRegisterEntry: PluginRegistryEntry<McpFormBuilderPluginCtx> = {
+  EVENTS,
+  Plugin: McpFormBuilderPlugin,
+  createContext: () => {
+    return {
+      formMap: new Map(),
+    };
+  },
+};

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

@@ -0,0 +1,21 @@
+import { FieldsTools } from '@baishuyun/agents';
+import { ValueOf } from '@baishuyun/types';
+import { ToolUIPart } from 'ai';
+import { DesignInfo } from './utils';
+
+export type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+export interface FormInfo {
+  appId?: string;
+  formId?: string;
+  formName?: string;
+  fields: Field[];
+
+  fieldMap: Map<string, Field>; // Keyed by field name
+
+  designInfo: DesignInfo;
+}
+
+export interface McpFormBuilderPluginCtx {
+  formMap: Map<string, FormInfo>; // Keyed by formId
+}