@baishuyun/chat-sdk 0.0.1-alpha.1

package/src/components/web-comp/fields-previewer-web-component.ts

@@ -0,0 +1,259 @@
+import { createRoot, Root } from 'react-dom/client';
+import { createElement } from 'react';
+import { FieldsPreviewer, FieldsPreviewerProps } from '../bs-ui/fields-previewer';
+
+// Declare the global SDK styles injected by vite
+declare const __SDK_STYLES__: string;
+
+/**
+ * A wrapper component that renders a slot element for light DOM children
+ */
+const SlotContainer = () => {
+  return createElement('slot');
+};
+
+/**
+ * Web Component wrapper for FieldsPreviewer
+ * This allows using the FieldsPreviewer component in React 17 or non-React applications
+ *
+ * Usage:
+ * ```html
+ * <fields-previewer
+ *   title="Form Preview"
+ *   tips="Preview your form here"
+ *   z-index="1"
+ * >
+ *   <div>Your content here</div>
+ * </fields-previewer>
+ * ```
+ *
+ * Or via JavaScript:
+ * ```js
+ * const previewer = document.createElement('fields-previewer');
+ * previewer.setProps({
+ *   title: 'Form Preview',
+ *   onSave: () => console.log('save'),
+ * });
+ * previewer.innerHTML = '<div>Your content</div>';
+ * document.body.appendChild(previewer);
+ * ```
+ */
+export class FieldsPreviewerWebComponent extends HTMLElement {
+  private root: Root | null = null;
+  private shadowContainer: HTMLDivElement | null = null;
+  private shadowWrapper: HTMLDivElement | null = null;
+  private _props: Partial<FieldsPreviewerProps> = {};
+  private _childrenOverride: React.ReactNode | null = null;
+  private _externalRootEl: HTMLElement | null = null;
+
+  // Observed attributes for reactive updates
+  static get observedAttributes() {
+    return [
+      'title',
+      'tips',
+      'fullscreen',
+      'streaming',
+      'empty',
+      'z-index',
+      'padding',
+      'right-space-width',
+      'active',
+
+      // fields counter
+      'fields-count',
+    ];
+  }
+
+  constructor() {
+    super();
+    // Don't attach shadow here - we'll do it in connectedCallback based on rootEl
+  }
+
+  connectedCallback() {
+    if (this._externalRootEl) {
+      return;
+    }
+
+    this.setupShadowDOM();
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+    // Clean up external shadow wrapper if exists
+    if (this.shadowWrapper && this.shadowWrapper.parentNode) {
+      this.shadowWrapper.parentNode.removeChild(this.shadowWrapper);
+      this.shadowWrapper = null;
+    }
+  }
+
+  /**
+   * Set the external root element where shadow DOM will be rendered
+   * Must be called before the element is connected to the DOM, or call refresh() after
+   */
+  public setRootEl(el: HTMLElement) {
+    if (this._externalRootEl === el && !el) return;
+
+    this._externalRootEl = el;
+    // If already connected, re-setup
+    if (this.isConnected) {
+      this.cleanup();
+      this.setupShadowDOM();
+      this.render();
+    }
+  }
+
+  private cleanup() {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+    if (this.shadowWrapper && this.shadowWrapper.parentNode) {
+      this.shadowWrapper.parentNode.removeChild(this.shadowWrapper);
+      this.shadowWrapper = null;
+    }
+  }
+
+  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null) {
+    if (oldValue !== newValue) {
+      this.updatePropsFromAttributes();
+      this.render();
+    }
+  }
+
+  public injectStyles(styles: string) {
+    const shadowRoot = this._externalRootEl ? this.shadowWrapper?.shadowRoot : this.shadowRoot;
+
+    if (!shadowRoot) return;
+
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(styles);
+
+    // Apply the stylesheet to the shadow root
+    (shadowRoot as any).adoptedStyleSheets = [
+      ...(shadowRoot as any).adoptedStyleSheets,
+      styleSheet,
+    ];
+
+    console.log('injected styles into shadow root');
+  }
+
+  private setupShadowDOM() {
+    // const targetEl = this._externalRootEl || this;
+
+    // If using external root, create a wrapper div to attach shadow
+    if (this._externalRootEl) {
+      this.shadowWrapper = document.createElement('div');
+      this.shadowWrapper.style.width = '100%';
+      this.shadowWrapper.style.height = '100%';
+      this._externalRootEl.appendChild(this.shadowWrapper);
+      this.shadowWrapper.attachShadow({ mode: 'open' });
+    } else {
+      // Attach shadow to self
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode: 'open' });
+      }
+    }
+
+    const shadowRoot = this._externalRootEl ? this.shadowWrapper!.shadowRoot : this.shadowRoot;
+
+    if (!shadowRoot) return;
+
+    console.log('found new shadow root:', this._externalRootEl);
+
+    // Inject styles
+    const styleEl = document.createElement('style');
+    styleEl.textContent = typeof __SDK_STYLES__ !== 'undefined' ? __SDK_STYLES__ : '';
+    shadowRoot.appendChild(styleEl);
+
+    // Create container for React
+    this.shadowContainer = document.createElement('div');
+    this.shadowContainer.style.width = '100%';
+    this.shadowContainer.style.height = '100%';
+    shadowRoot.appendChild(this.shadowContainer);
+
+    // Create React root
+    this.root = createRoot(this.shadowContainer);
+  }
+
+  private updatePropsFromAttributes() {
+    const booleanAttr = (name: string): boolean | undefined => {
+      const value = this.getAttribute(name);
+      if (value === null) return undefined;
+      return value === 'true' || value === '';
+    };
+
+    const numberAttr = (name: string): number | undefined => {
+      const value = this.getAttribute(name);
+      if (value === null) return undefined;
+      const num = parseFloat(value);
+      return isNaN(num) ? undefined : num;
+    };
+
+    this._props = {
+      ...this._props,
+      title: this.getAttribute('title') ?? this._props.title,
+      tips: this.getAttribute('tips') ?? this._props.tips,
+      fullscreen: booleanAttr('fullscreen') ?? this._props.fullscreen,
+      streaming: booleanAttr('streaming') ?? this._props.streaming,
+      empty: booleanAttr('empty') ?? this._props.empty,
+      active: booleanAttr('active') ?? this._props.active,
+      zIndex: numberAttr('z-index') ?? this._props.zIndex,
+      padding: numberAttr('padding') ?? this._props.padding,
+      rightSpaceWidth: numberAttr('right-space-width') ?? this._props.rightSpaceWidth,
+    };
+  }
+
+  /**
+   * Set props programmatically (useful for passing callbacks and React children)
+   * If you pass `children` here, it will override the slot-based children
+   */
+  public setProps(props: Partial<FieldsPreviewerProps>) {
+    // Extract children override if provided
+    if ('children' in props) {
+      this._childrenOverride = props.children;
+      const { children: _, ...restProps } = props;
+      this._props = { ...this._props, ...restProps };
+    } else {
+      this._props = { ...this._props, ...props };
+    }
+    this.render();
+  }
+
+  /**
+   * Get current props
+   */
+  public getProps(): Partial<FieldsPreviewerProps> {
+    return { ...this._props };
+  }
+
+  private render() {
+    if (!this.root) return;
+
+    this.updatePropsFromAttributes();
+
+    // Use children override if set via setProps, otherwise use slot for light DOM children
+    const children = this._childrenOverride ?? createElement(SlotContainer);
+
+    const element = createElement(FieldsPreviewer, {
+      ...this._props,
+      children,
+    } as FieldsPreviewerProps);
+    this.root.render(element);
+  }
+}
+
+// Register the web component
+export function registerFieldsPreviewerWebComponent(tagName = 'fields-previewer-container') {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, FieldsPreviewerWebComponent);
+  }
+}
+
+// Auto-register with default tag name
+if (typeof window !== 'undefined') {
+  registerFieldsPreviewerWebComponent();
+}

package/src/const/index.ts

@@ -0,0 +1,61 @@
+import { FieldType } from '@baishuyun/types';
+
+export const FieldTypeNameMap: Record<FieldType, string> = {
+  text: '输入框',
+  password: '密码输入框',
+  location: '定位',
+  datetime: '日期时间选择器',
+  radiogroup: '单选框',
+  radio: '单选框',
+  combo: '下拉框',
+  address: '地址',
+  button: '按钮',
+  textarea: '多行输入框',
+  combocheck: '多选下拉框',
+  checkboxgroup: '多选框组',
+  separator: '分割线',
+  upload: '附件上传',
+  number: '数字输入框',
+  dataload: '数据加载',
+  image: '图片上传',
+  signature: '签名',
+  dept: '部门选择',
+  user: '成员选择',
+  usergroup: '成员多选',
+  deptgroup: '部门多选',
+  unknown: '未知类型',
+  sn: '流水号',
+  linkdata: '关联数据',
+  linkquery: '关联查询',
+  subform: '子表单',
+};
+
+export const FIELD_ICON_CODE_MAP: Record<FieldType, string> = {
+  address: '&#xe881;',
+  subform: '&#xe847;',
+  password: '&#xe854;', // text
+  button: '&#xe8e8;',
+  textarea: '&#xe84f;',
+  datetime: '&#xe849;',
+  text: '&#xe854;',
+  location: '&#xe87f;',
+  radiogroup: '&#xe853;',
+  radio: '&#xe861;',
+  combo: '&#xe84a;',
+  combocheck: '&#xe84b;',
+  separator: '&#xe850;',
+  checkboxgroup: '&#xe84c;',
+  upload: '&#xe621;',
+  number: '&#xe846;',
+  image: '&#xe880;',
+  signature: '&#xe87e;',
+  user: '&#xe856;',
+  dataload: '&#xe848;', // field
+  linkdata: '&#xe857;',
+  linkquery: '&#xe857;',
+  usergroup: '&#xe851;',
+  dept: '&#xe84d;',
+  sn: '&#xe882;',
+  deptgroup: '&#xe852;',
+  unknown: '&#xe848;',
+};

package/src/const/ui.ts

@@ -0,0 +1,7 @@
+export const BotImgUrl = `
+  url(data:image/png;base64,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)
+  `;
+
+export const ChatHeaderBgImgUrl = `url(data:image/png;base64,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)`;
+
+export const transCls = "transition-all duration-200 ease-out";

package/src/global.d.ts

@@ -0,0 +1 @@
+declare const __SDK_STYLES__: string;

package/src/hooks/use-evt-bus.ts

@@ -0,0 +1,11 @@
+import { useChatStore } from "@/store/context";
+
+export const useEvtBus = () => {
+  const { eventBus } = useChatStore((store) => {
+    return {
+      eventBus: store.eventBus,
+    };
+  });
+
+  return eventBus;
+};

package/src/hooks/use-evt.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useEvtBus } from './use-evt-bus';
+import { EventKey, FormBuilderEventMap } from '@baishuyun/types';
+
+export const useEvt = (evtName: EventKey<FormBuilderEventMap>, handler: (data: any) => void) => {
+  const evtBus = useEvtBus();
+
+  useEffect(() => {
+    const handlerWrapper = (data: any) => handler(data);
+
+    evtBus.on(evtName, handlerWrapper);
+
+    return () => {
+      evtBus.off(evtName, handlerWrapper);
+    };
+  }, []);
+};

package/src/hooks/use-frame-mode.ts

@@ -0,0 +1,13 @@
+import { useChatStore } from "@/store/context";
+
+export const useFrameMode = () => {
+  const { mode, setMode } = useChatStore((store) => ({
+    mode: store.frameMode,
+    setMode: store.setFrameMode,
+  }));
+
+  return {
+    mode,
+    setMode,
+  };
+};

package/src/hooks/use-plugin-component.ts

@@ -0,0 +1,12 @@
+import { CustomComponentType } from '@baishuyun/types';
+import { usePluginCustomComponents } from './use-plugin-custom-components';
+
+export const usePluginComponent = (compType: CustomComponentType) => {
+  const comInfos = usePluginCustomComponents<CustomComponentType>(compType);
+  if (!comInfos || !comInfos.length) {
+    return null;
+  }
+
+  const targetComConfig = comInfos[0];
+  return targetComConfig.Component ?? null;
+};

package/src/hooks/use-plugin-ctx.ts

@@ -0,0 +1,12 @@
+import { ChatAreaPlugin } from '@baishuyun/types';
+import { usePlugin } from './use-plugin';
+
+export const usePluginCtx = <T, P extends ChatAreaPlugin>(name: string) => {
+  const plugin = usePlugin<P>(name);
+
+  if (!plugin) {
+    return null;
+  }
+
+  return plugin.Context as T;
+};

package/src/hooks/use-plugin-custom-components.ts

@@ -0,0 +1,31 @@
+import { ComponentConfig, PluginCustomComponent } from '@baishuyun/types';
+import { usePluginList } from './use-plugin-list';
+
+export const usePluginCustomComponents = <K extends keyof PluginCustomComponent>(
+  componentKey: K
+): ComponentConfig<K>[] => {
+  const pluginList = usePluginList();
+
+  const pluginComponentsList = pluginList
+    .map((_plugin) => ({
+      pluginName: _plugin.pluginName,
+      Component: _plugin.customComponents?.[componentKey],
+    }))
+    .filter((componentConfig): componentConfig is ComponentConfig<K> =>
+      Boolean(componentConfig.Component)
+    );
+
+  return pluginComponentsList;
+};
+
+export const useDefaultPluginCustomComponent = <K extends keyof PluginCustomComponent>(
+  componentKey: K
+): ComponentConfig<K> | null => {
+  const pluginComponents = usePluginCustomComponents(componentKey);
+
+  if (pluginComponents.length > 0) {
+    return pluginComponents[0] as ComponentConfig<K>;
+  }
+
+  return null;
+};

package/src/hooks/use-plugin-life-cycle-chain-runner.ts

@@ -0,0 +1,26 @@
+import { PluginLifecycleHooksType } from '@baishuyun/types';
+import { usePluginList } from './use-plugin-list';
+import { useCallback } from 'react';
+
+export const usePluginLifeCycleChainRunner = (cycleType: PluginLifecycleHooksType) => {
+  const pluginList = usePluginList();
+
+  const chainExec = useCallback((ctx: any) => {
+    let resultCtx = ctx;
+
+    for (const plugin of pluginList) {
+      const hook = plugin.lifecycleHooks?.[cycleType];
+      if (!hook) {
+        continue;
+      }
+
+      resultCtx = hook(resultCtx);
+    }
+
+    return resultCtx;
+  }, []);
+
+  return {
+    exec: chainExec,
+  };
+};

package/src/hooks/use-plugin-list.ts

@@ -0,0 +1,11 @@
+import { useChatStore } from "@/store/context";
+
+export const usePluginList = () => {
+  const { pluginList } = useChatStore((store) => {
+    return {
+      pluginList: store.chatAreaPluginInstList,
+    };
+  });
+
+  return pluginList;
+};

package/src/hooks/use-plugin.ts

@@ -0,0 +1,11 @@
+import { useChatStore } from "@/store/context";
+
+export const usePlugin = <T>(pluginName: string) => {
+  const { pluginMap } = useChatStore((store) => {
+    return {
+      pluginMap: store.chatAreaPluginMap,
+    };
+  });
+
+  return pluginMap.get(pluginName) as T;
+};

package/src/hooks/use-shadow.ts

@@ -0,0 +1,128 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface UseShadowOptions {
+  /** Shadow DOM挂载的根元素（默认挂到body） */
+  rootEl?: HTMLElement;
+  /** 要注入到Shadow DOM中的样式文本 */
+  style?: string;
+  /** Shadow内部容器的类名 */
+  containerClasses?: string[];
+  /** 包裹Shadow的外层元素类名 */
+  wrapperClasses?: string[];
+  /** 包裹元素的内联样式 */
+  wrapperStyle?: React.CSSProperties;
+
+  extraHtml?: string;
+
+  id: string;
+}
+
+/**
+ * 通用的创建Shadow DOM的Hook
+ * @param options 配置项：样式、根元素、类名等
+ * @returns Shadow DOM内部的容器元素（用于React Portal挂载）
+ */
+export const useShadow = ({
+  id,
+  style = '',
+  rootEl,
+  containerClasses = [],
+  wrapperClasses = [],
+  wrapperStyle = {},
+  extraHtml = '',
+}: UseShadowOptions): { shadowContainer: HTMLElement | null; destroy: () => void } => {
+  const [shadowContainer, setShadowContainer] = useState<HTMLElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    wrapperRef.current?.classList.add(...wrapperClasses);
+    shadowContainer?.classList.add(...containerClasses);
+  }, [wrapperClasses, containerClasses]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperRef.current!.style[key as any] = value;
+        }
+      });
+    }
+  }, [wrapperStyle]);
+
+  useEffect(() => {
+    // Cleanup previous shadow container if it exists
+    if (wrapperRef.current && wrapperRef.current.parentNode) {
+      wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+      wrapperRef.current = null;
+    }
+
+    try {
+      // 1. 创建外层包裹元素（挂载Shadow Root的载体）
+      const wrapperEl = document.createElement('div');
+      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
+      // wrapperEl.style.height = '100%';
+      wrapperRef.current = wrapperEl;
+
+      // apply wrapper styles
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperEl.style[key as any] = value;
+        }
+      });
+
+      // 2. 创建并挂载Shadow Root
+      const shadowRoot = wrapperEl.attachShadow({ mode: 'open' });
+
+      // 注入额外的HTML内容
+      if (extraHtml) {
+        shadowRoot.innerHTML = extraHtml;
+      }
+
+      // 3. 注入样式到Shadow DOM
+      if (style) {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = style;
+        shadowRoot.appendChild(styleEl);
+      }
+
+      // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
+      const containerEl = document.createElement('div');
+      containerEl.classList.add(...containerClasses, 'shadow-container');
+      shadowRoot.appendChild(containerEl);
+
+      // 5. 将外层元素挂载到指定根节点
+      const mountRoot = rootEl || document.body;
+      mountRoot.appendChild(wrapperEl);
+      console.log('shadow mounted to', mountRoot);
+
+      setShadowContainer(containerEl);
+    } catch (error) {
+      console.error('创建Shadow DOM失败:', error);
+      setShadowContainer(null);
+    }
+
+    // Cleanup on unmount or when rootEl changes
+    return () => {
+      if (wrapperRef.current && wrapperRef.current.parentNode) {
+        wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+        wrapperRef.current = null;
+      }
+    };
+  }, [rootEl]); // Recreate when rootEl changes
+
+  if (shadowContainer) {
+    shadowContainer.id = id;
+  }
+
+  return {
+    shadowContainer,
+    destroy: () => {
+      if (wrapperRef.current && wrapperRef.current.parentNode) {
+        wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+        wrapperRef.current = null;
+      }
+    },
+  };
+};

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { ChatSDK } from './sdk.impl';
+
+export * from './plugins/mcp-form-builder-plugin';
+export * from './plugins/general-model-form-builder-plugin';
+export * from './plugins/form-filling-plugin';
+
+export {
+  FieldsPreviewerWebComponent,
+  registerFieldsPreviewerWebComponent,
+} from './components/web-comp/fields-previewer-web-component';