@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,450 @@
+import { extractFormName } from '@/lib/utils';
+import { Field, FormInfo } from '../types';
+import { FieldType } from '@baishuyun/types';
+import { DEFAULT_DATA_LOAD_CONF } from '../const';
+
+export interface FormField {
+  fieldName: string; // 字段名称（如合同编号、关联供应商）
+  type: string; // 字段类型（如流水号、关联查询）
+  required: boolean; // 是否必填
+  description: string; // 字段说明
+  relationDesc?: string; // 关联字段说明
+}
+
+// 提取出的关联信息类型
+export interface LinkInfo {
+  fieldName: string; // 关联字段名称
+  field?: Field; // 关联字段的完整定义
+
+  targetFormName: string; // 关联的目标表单名称
+}
+
+export interface DesignInfo {
+  formName: string; // 表单名称
+  linkInfoMap: Map<string, LinkInfo>;
+}
+
+function getMatchResult(origin: string, pattern: RegExp) {
+  const matches = origin.match(pattern);
+  return matches ? matches[1] : '';
+}
+
+function ensureFormNameSuffix(name: string, suffix: string = '表') {
+  if (name.endsWith(suffix)) {
+    return name;
+  }
+
+  return name + suffix;
+}
+
+function extraFormNameFromFieldDesc(desc?: string) {
+  if (!desc) {
+    return '';
+  }
+
+  // 模式库
+  const patternLib = [/关联来源:(.*)表?，/, /关联(.*)表?/, /（从(.*)表?中查询）/, /来自(.*)表?/];
+
+  for (const pattern of patternLib) {
+    const result = getMatchResult(desc, pattern);
+    if (result) {
+      return ensureFormNameSuffix(result);
+    }
+  }
+
+  return '';
+}
+
+function parseRawFormText(rawText: string): FormField[] {
+  // 按行分割原始文本
+  const lines = rawText.split('\n').filter((line) => line.trim());
+  const fields: FormField[] = [];
+
+  lines.forEach((line) => {
+    // 分割字段名和属性（如：合同编号 | 类型：流水号 | 必填：是 | 说明：xxx）
+    const [fieldName, typePart, requiredPart, descPart, relationPart = ''] = line
+      .split('|')
+      .map((item) => item.trim());
+
+    if (!fieldName || !typePart || !requiredPart || !descPart) {
+      return;
+    }
+
+    // 提取类型
+    const typeMatch = typePart.match(/类型：(.*)/);
+    const type = typeMatch ? typeMatch[1] : '';
+
+    // 提取必填状态
+    const requiredMatch = requiredPart.match(/必填：(\w+)/);
+    const required = requiredMatch ? requiredMatch[1] === '是' : false;
+
+    // 提取说明
+    const descMatch = descPart.match(/说明：(.+)/);
+    const description = descMatch ? descMatch[1] : '';
+
+    // 提取关联字段说明（如果有的话）
+    // 关系：（关联来源:供应商信息管理表，关联字段:供应商ID、供应商名称、联系人、联系方式）
+    const relationDesc = getMatchResult(relationPart, /关系：(.+)/);
+
+    fields.push({
+      fieldName,
+      type,
+      required,
+      description,
+      relationDesc,
+    });
+  });
+
+  return fields;
+}
+
+function extractLinkInfo(fields: FormField[]): Map<string, LinkInfo> {
+  // 存储提取结果
+  const linkInfoMap: Map<string, LinkInfo> = new Map();
+
+  // 遍历所有字段
+  fields.forEach((field) => {
+    // 仅处理关联查询类型的字段
+    if (field.type === '关联查询' || field.type === '关联数据') {
+      const targetFormName =
+        extraFormNameFromFieldDesc(field.relationDesc) ||
+        extraFormNameFromFieldDesc(field.description);
+      const fieldNameMatch = field.fieldName.match(/\d+\. (.*)/);
+      const fName = fieldNameMatch ? fieldNameMatch[1] : field.fieldName;
+
+      const subFormFieldNames = fName.split('-');
+
+      const finalName =
+        subFormFieldNames.length > 1 ? subFormFieldNames[subFormFieldNames.length - 1] : fName;
+
+      // 组装关联信息
+      linkInfoMap.set(finalName, {
+        fieldName: finalName, // 关联字段名（如"关联供应商"）
+        targetFormName,
+      });
+    }
+  });
+
+  return linkInfoMap;
+}
+
+/**
+ * 解析 mcp 返回的表单设计文档，提取关联信息
+ * @param designDoc
+ * @returns
+ */
+export const parseFormDesignInfo = (designDoc: string): DesignInfo => {
+  return {
+    linkInfoMap: extractLinkInfo(parseRawFormText(designDoc)),
+    formName: extractFormName(designDoc),
+  };
+};
+
+export const isFieldTypeEqual = (field: Field, type: FieldType) => {
+  if (!field || !field.widget) {
+    return false;
+  }
+
+  return field.widget.type === type;
+};
+
+export const hasSubFields = (field: Field) => {
+  if (!isFieldTypeEqual(field, 'subform')) {
+    return false;
+  }
+
+  return field.widget?.items?.length > 0;
+};
+
+export const isLinkField = (field: Field) => {
+  return isFieldTypeEqual(field, 'linkdata') || isFieldTypeEqual(field, 'linkquery');
+};
+
+export const isSubFormField = (field: Field) => {
+  if (!field || !field.widget) {
+    return false;
+  }
+
+  return field.widget.type === 'subform';
+};
+
+export const isSNField = (field: Field) => {
+  if (!field || !field.widget) {
+    return false;
+  }
+
+  return field.widget.type === 'sn';
+};
+
+export const isTextField = (field: Field) => {
+  if (!field || !field.widget) {
+    return false;
+  }
+
+  return field.widget.type === 'text';
+};
+
+export const hasLinkInfo = (designInfo: DesignInfo) => {
+  if (!designInfo) {
+    return false;
+  }
+
+  return designInfo.linkInfoMap && designInfo.linkInfoMap.size > 0;
+};
+
+export type FieldProcessor = (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => Field;
+
+export interface FormFieldsWalkerConfig {
+  isTargetForm: (formName: string, info: FormInfo) => boolean;
+  isTargetField: (fieldName: string, linkInfo: LinkInfo) => boolean;
+  fieldProcessor: FieldProcessor;
+  onFormProcessed: (formInfo: FormInfo) => void;
+}
+
+/**
+ * 表单字段遍历器，目标为 infoMap
+ */
+export const formFieldsWalker = (
+  // 上下文中全量表单信息
+  infoMap: Map<string, FormInfo>,
+  options: FormFieldsWalkerConfig
+) => {
+  const { isTargetForm, isTargetField, fieldProcessor, onFormProcessed } = options;
+
+  let isDirty;
+  for (const [name, info] of infoMap) {
+    isDirty = false;
+
+    if (!isTargetForm(name, info)) {
+      console.log('不是目标表单，不处理');
+      continue;
+    }
+
+    const linkMap = info.designInfo.linkInfoMap;
+
+    for (const [fieldName, linkInfo] of linkMap) {
+      if (isTargetField(fieldName, linkInfo)) {
+        isDirty = true;
+
+        const targetField = info.fieldMap.get(fieldName);
+
+        const result = fieldProcessor(info, targetField, linkInfo);
+
+        info.fieldMap.set(fieldName, result);
+      }
+    }
+
+    if (isDirty) {
+      onFormProcessed(info);
+    }
+  }
+};
+
+export const buildWidgetName: (prefix?: string, index?: number) => string = (
+  prefix: string = '_widget',
+  index?: number
+) => {
+  const baseName = `${prefix}_${Date.now()}`;
+
+  if (index === undefined) {
+    return baseName;
+  }
+
+  const idxLength = index.toString().length;
+  const slicedBaseName = baseName.slice(0, -idxLength);
+
+  return `${slicedBaseName}${index}`;
+};
+
+// 补全数据加载字段的信息
+export const enhanceDataLoadField = (
+  field: Field,
+  linkInfo: LinkInfo,
+  formMap: Map<string, FormInfo>,
+  onEnhanced: (processed?: Field) => void
+) => {
+  if (!isFieldTypeEqual(field, 'dataload')) {
+    console.log('非数据加载字段，跳过处理', field);
+    return field;
+  }
+
+  // 无关联信息直接返回
+  if (!linkInfo.targetFormName) {
+    console.log('无关联信息，跳过处理', field);
+    return field;
+  }
+
+  // 无表单映射直接返回
+  if (formMap.size === 0) {
+    console.log('无表单映射，跳过处理', field);
+    return field;
+  }
+
+  // 未找到目标表单直接返回
+  const targetForm = formMap.get(linkInfo.targetFormName);
+  if (!targetForm) {
+    console.log('无表单映射，跳过处理', field);
+    field.widget.loaddataconfig = DEFAULT_DATA_LOAD_CONF;
+    return field;
+  }
+
+  const mapFields = field.widget?.loaddataconfig?.mapFields || [];
+  const dataLoadFields = field.widget?.loaddataconfig?.fields || [];
+
+  if (!mapFields || mapFields.length === 0 || mapFields.length !== dataLoadFields.length) {
+    console.log('无映射字段，跳过处理', field);
+    return field;
+  }
+
+  // 开始逐个补全
+  console.log('开始数据加载补全逻辑', field, targetForm);
+  field.widget.loaddataconfig.forms = targetForm.formId;
+
+  for (let i = 0; i < mapFields.length; i++) {
+    const originMapField = mapFields[i];
+    const originDataLoadField = dataLoadFields[i];
+
+    const targetDepFieldName = originMapField.depend.field;
+    const targetDepFieldInfo = targetForm.fieldMap.get(targetDepFieldName);
+
+    if (!targetDepFieldInfo) {
+      console.log('未找到目标依赖字段，跳过处理该映射字段', originMapField);
+      continue;
+    }
+
+    const targetDepFieldTag = buildWidgetName('f', i);
+    originMapField.field = buildWidgetName('_widget', i);
+    originMapField.depend.field = targetDepFieldTag;
+
+    originDataLoadField.name = targetDepFieldInfo.widget.widgetName;
+    originDataLoadField.form = targetForm.formId;
+    originDataLoadField.tag = targetDepFieldTag;
+  }
+
+  console.log('数据加载字段信息已补全', field);
+  onEnhanced(field);
+  return field;
+};
+
+// 补全关联字段的信息
+export const enhanceLinkField = (
+  field: Field,
+  linkInfo: LinkInfo,
+  formMap: Map<string, FormInfo>,
+  onEnhanced: (processed?: Field) => void
+): Field => {
+  console.log(field, linkInfo, formMap);
+
+  // 非关联字段直接返回
+  if (!isLinkField(field)) {
+    console.log('非关联字段，跳过处理', field);
+    return field;
+  }
+
+  // 无关联信息直接返回
+  if (!linkInfo.targetFormName) {
+    console.log('无关联信息，跳过处理', field);
+    return field;
+  }
+
+  // 无表单映射直接返回
+  if (formMap.size === 0) {
+    console.log('无表单映射，跳过处理', field);
+    return field;
+  }
+
+  // 未找到目标表单直接返回
+  const targetForm = formMap.get(linkInfo.targetFormName);
+  if (!targetForm) {
+    console.log('未找到目标表单，跳过处理', field);
+    return field;
+  }
+
+  try {
+    field.widget.refAppId = targetForm.appId;
+    field.widget.linkForm = targetForm.formId;
+    // field.widget.type = "linkdata";
+  } catch (e) {
+    console.error('尝试建立表单关联失败');
+    return field;
+  }
+
+  const targetSNFieldInTargetForm = targetForm.fields.find(isSNField);
+  if (!targetSNFieldInTargetForm) {
+    console.log('未找到目标表单的主键字段，跳过处理', field);
+    return field;
+  }
+
+  if (isFieldTypeEqual(field, 'linkdata')) {
+    // 关联主键字段
+    try {
+      field.widget.linkKey = targetSNFieldInTargetForm.widget.widgetName;
+      field.widget.linkType = 'sn';
+    } catch (e) {
+      console.error('尝试建立主键关联失败');
+      return field;
+    }
+  }
+
+  const targetTargetTextFieldInTargetForm = targetForm.fields.find(isTextField);
+  if (!targetTargetTextFieldInTargetForm) {
+    console.log('未找到目标表单的显示字段，跳过处理', field);
+    return field;
+  }
+
+  // 关联显示字段, 默认显示标题
+  try {
+    field.widget.linkFields = [
+      {
+        text: targetTargetTextFieldInTargetForm.label,
+        name: targetTargetTextFieldInTargetForm.widget.widgetName,
+        type: 'text',
+      },
+      // {
+      //   name: "label",
+      //   text: "标题",
+      //   type: "textarea",
+      // },
+    ];
+  } catch (e) {
+    console.error('尝试建立显示字段关联失败');
+    return field;
+  }
+
+  // 关联信息已补全
+  console.log('关联字段信息已补全', field);
+  onEnhanced(field);
+  return field;
+};
+
+export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+
+/**
+ * 表单字段处理器工厂
+ */
+export const fieldProcessorFactory: PartialRecord<
+  FieldType,
+  (ctxInfo: Map<string, FormInfo>) => FieldProcessor
+> = {
+  linkdata: (formMap) => (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => {
+    return enhanceLinkField(field, linkInfo, formMap, (_) => {
+      formInfo.designInfo.linkInfoMap.delete(linkInfo.fieldName);
+    });
+  },
+
+  linkquery: (formMap) => (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => {
+    return enhanceLinkField(field, linkInfo, formMap, (_) => {
+      formInfo.designInfo.linkInfoMap.delete(linkInfo.fieldName);
+    });
+  },
+
+  dataload: (formMap) => (formInfo: FormInfo, field: Field, linkInfo: LinkInfo) => {
+    // todo: enhance data load Field;
+    console.log('进入数据加载字段处理器！');
+    console.log('上下文表单', formMap);
+    console.log('处理器入参', formInfo, field, linkInfo);
+    return enhanceDataLoadField(field, linkInfo, formMap, (_) => {
+      formInfo.designInfo.linkInfoMap.delete(linkInfo.fieldName);
+    });
+  },
+};

package/src/sdk.impl.tsx

@@ -0,0 +1,108 @@
+import { createRoot } from 'react-dom/client';
+import { ChatStore, createStore } from '@/store';
+import { ChatClient } from '@/components/biz-comp/chat-client';
+import './style.css';
+import { IChatSDK, IChatSDKOption, IEvtBus, type PluginRegistryEntry } from '@baishuyun/types';
+import { EvtBus } from './lib/event-emitter';
+
+export class ChatSDK implements IChatSDK {
+  static instances: ChatSDK[] = [];
+
+  private root: ReturnType<typeof createRoot> | undefined;
+  private readonly Store: ChatStore;
+
+  public options: IChatSDKOption;
+
+  public eventBus = new EvtBus() as IEvtBus;
+
+  constructor(options: IChatSDKOption) {
+    this.options = options;
+
+    const renderEl = document.createElement('div');
+
+    document.body.appendChild(renderEl);
+    // renderEl.classList.add("bs-chat-sdk-render-root");
+    // set render id as sdk instance root
+    renderEl.id = `bs-chat-sdk-inst-root-${Date.now()}`;
+
+    this.options.style += __SDK_STYLES__;
+
+    this.Store = createStore(this);
+
+    this.initPlugins(); // 插件实例化
+
+    this.root = createRoot(renderEl);
+    this.root.render(<ChatClient client={this} store={this.Store} />);
+
+    ChatSDK.instances.push(this);
+  }
+
+  private diposePlugins() {
+    const pluginInstList = this.Store.getState().chatAreaPluginInstList;
+    pluginInstList.forEach((inst) => {
+      if (typeof inst.dispose === 'function') {
+        inst.dispose();
+        inst.Context = {};
+      }
+    });
+  }
+
+  private initPlugins() {
+    if (!this.options || !this.options.plugins?.length) return;
+
+    const instList = this.options.plugins.map((entry: PluginRegistryEntry<any>) => {
+      const ctx = entry.createContext();
+      const p = new entry.Plugin(ctx);
+      p.init?.(this);
+      return p;
+    });
+
+    // Store中保存插件实例
+    this.Store.getState().setChatAreaPluginInstList(instList);
+  }
+
+  public clearChatHistory() {
+    this.Store.getState().clearMessages();
+  }
+
+  public showChatArea(docked?: boolean) {
+    this.Store.getState().setChatAreaVisible(true);
+    if (docked) {
+      this.Store.getState().setFrameMode('dock');
+    }
+  }
+
+  public isChatVisible() {
+    return this.Store.getState().chatAreaVisible;
+  }
+
+  public hideChatArea() {
+    this.Store.getState().setChatAreaVisible(false);
+  }
+
+  public dockChatArea() {
+    this.Store.getState().setFrameMode('dock');
+  }
+
+  public undockChatArea() {
+    this.Store.getState().setFrameMode('float');
+  }
+
+  public showChatEntryButton(el?: HTMLElement) {
+    this.Store.getState().setChatEntryVisible(true, el);
+  }
+
+  public hideChatEntryButton() {
+    this.Store.getState().setChatEntryVisible(false);
+  }
+
+  public destroy() {
+    // 插件销毁
+    this.diposePlugins();
+
+    // 事件总线销毁
+    this.eventBus.removeAllListeners();
+
+    ChatSDK.instances = ChatSDK.instances.filter((instance) => instance !== this);
+  }
+}

package/src/store/context.tsx

@@ -0,0 +1,22 @@
+import { createContext, FC, useContext } from 'react';
+import { shallow } from 'zustand/shallow';
+import { ChatStore } from '@/store';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { ChatContextType } from '@baishuyun/types';
+
+export const ChatStoreCtx = createContext<{
+  chatStore: ChatStore;
+  // @ts-expect-error -- linter-disable-autofix
+}>(undefined);
+
+export const ChatStoreProvider: FC<{
+  store: ChatStore;
+  children: React.ReactNode;
+}> = ({ store, children }) => {
+  return <ChatStoreCtx.Provider value={{ chatStore: store }}>{children}</ChatStoreCtx.Provider>;
+};
+
+export const useChatStore: <T>(selector: (store: ChatContextType) => T) => T = (selector) => {
+  const store = useContext(ChatStoreCtx).chatStore;
+  return useStoreWithEqualityFn(store, selector, shallow);
+};

package/src/store/index.ts

@@ -0,0 +1,53 @@
+import { ChatAreaPlugin, ChatContextType, ChatState, IEvtBus } from '@baishuyun/types';
+import { ChatSDK } from '..';
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+export const createStore = (sdkInst: ChatSDK) => {
+  const defaultState: ChatState = {
+    chatAreaVisible: false,
+    chatEntryVisible: false,
+    chatAreaPluginInstList: [],
+    chatAreaPluginMap: new Map(),
+    eventBus: sdkInst.eventBus as IEvtBus,
+    frameMode: sdkInst.options?.frameMode || 'float',
+
+    msgClearTimestamp: Date.now(),
+  };
+
+  return create<ChatContextType>()(
+    subscribeWithSelector((set) => ({
+      ...defaultState,
+
+      clearMessages: () => set(() => ({ msgClearTimestamp: Date.now() })),
+
+      setFrameMode: (mode) =>
+        set(() => ({
+          frameMode: mode,
+        })),
+
+      setChatAreaPluginInstList: (list) =>
+        set(() => {
+          let map = new Map<string, ChatAreaPlugin>();
+          list.forEach((inst) => {
+            map.set(inst.pluginName, inst);
+          });
+
+          return {
+            chatAreaPluginMap: map,
+            chatAreaPluginInstList: list,
+          };
+        }),
+
+      setChatEntryVisible: (visible: boolean, entryWrapper?: HTMLElement) =>
+        set(() => ({
+          chatEntryVisible: visible,
+          chatEntryElWrapper: entryWrapper,
+        })),
+
+      setChatAreaVisible: (visible: boolean) => set(() => ({ chatAreaVisible: visible })),
+    }))
+  );
+};
+
+export type ChatStore = ReturnType<typeof createStore>;

package/src/stories/AbsFullscreenGradientBg.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AbsFullscreenGradientBg } from '@/components/bs-ui/abs-fullscreen-gradient-bg';
+
+const meta = {
+  title: 'Example/Chat/AbsFullscreenGradientBg',
+  component: AbsFullscreenGradientBg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    zIndex: 1,
+  },
+} satisfies Meta<typeof AbsFullscreenGradientBg>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    zIndex: 1,
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    zIndex: 1,
+    children: (
+      <div style={{ position: 'relative', zIndex: 1, padding: '40px', color: '#333' }}>
+        <h1>Content over gradient background</h1>
+        <p>This demonstrates how content can be placed over the gradient background.</p>
+      </div>
+    ),
+  },
+};