@baishuyun/chat-sdk 0.0.1-alpha.1

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

@@ -0,0 +1,11 @@
+import { Field } from "../form-builder-base-plugin/types";
+
+export interface FormFillingPluginCtx {
+  fieldMap: Map<string, Field>;
+
+  valueMap: Map<string, unknown>;
+
+  subFieldsNameMap: Map<string, string>; // key sub field widget name, value parent field widget name
+
+  conversationId: string;
+}

package/src/plugins/form-filling-plugin/utils.ts

@@ -0,0 +1,63 @@
+import { FieldType, IAddress, ILocation } from '@baishuyun/types';
+
+function isStringArray(value: unknown): value is string[] {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  return value.every((item) => typeof item === 'string');
+}
+
+function isOptionArray(value: unknown): value is Array<{ label: string; value: string }> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+
+  return value.every(
+    (item) =>
+      typeof item === 'object' &&
+      item !== null &&
+      'label' in item &&
+      'value' in item &&
+      typeof (item as any).label === 'string' &&
+      typeof (item as any).value === 'string'
+  );
+}
+
+export const valueNormalizer = (value: string | string[]): string => {
+  if (isStringArray(value)) {
+    return value.join(', ');
+  }
+
+  if (isOptionArray(value)) {
+    const values = value.map((item) => item.value);
+    return values.join(', ');
+  }
+
+  return value;
+};
+
+export const toHumanReadable = (value: unknown, type: FieldType): string | unknown => {
+  if (type === 'address' && typeof value === 'object') {
+    const v = value as IAddress;
+    return `${v.province} ${v.city} ${v.district} ${v.detail}`;
+  }
+
+  if (type === 'location' && typeof value === 'object') {
+    const v = value as ILocation;
+    console.log('location info', v);
+    const lnglatXY = v.lnglatXY || ['', ''];
+    return `经度: ${lnglatXY[0] || ''}, 纬度: ${lnglatXY[1] || ''}`;
+  }
+
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+
+  if (isOptionArray(value)) {
+    const values = value.map((item) => item.value);
+    return values.join(', ');
+  }
+
+  return value;
+};

package/src/plugins/general-model-form-builder-plugin/components/confirmer.tsx

@@ -0,0 +1,90 @@
+import { MessageContent } from '../../../components/biz-comp/message-content';
+import { Button } from '@/components/ui/button';
+import { ConfirmTools } from '@baishuyun/agents';
+import type { ConfirmTypes } from '@baishuyun/types';
+import { ChatRequestOptions, ToolUIPart } from 'ai';
+import { Suggestions } from '../../../components/biz-comp/suggestions';
+
+export const Confirmer = ({
+  input,
+  type,
+  onConfirm,
+  onCancel,
+}: {
+  type: ConfirmTypes;
+  onConfirm: (opt?: ChatRequestOptions, msg?: string) => void;
+  onCancel?: (opt?: ChatRequestOptions) => void;
+} & Pick<ToolUIPart<ConfirmTools>, 'input'>) => {
+  // 建表、保存字段
+  if (type === 'tool-confirmToCreateForm' || type === 'tool-confirmToSaveCheckedFields') {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <Button
+          onClick={() => {
+            onConfirm({
+              body: {
+                stage: type === 'tool-confirmToCreateForm' ? 'build' : 'continue',
+              },
+            });
+          }}
+        >
+          确认
+        </Button>
+      </MessageContent>
+    );
+  }
+
+  // 是否继续创建关联表
+  if (type === 'tool-confirmToCreateRelatedForm' && input.forms.length > 0) {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <Button
+          onClick={() => {
+            onConfirm({
+              body: { stage: 'continue ' },
+            });
+          }}
+        >
+          确认
+        </Button>
+        <Button
+          onClick={() => {
+            onCancel && onCancel();
+          }}
+        >
+          跳过
+        </Button>
+      </MessageContent>
+    );
+  }
+
+  // 继续为关联表创建字段
+  if (type === 'tool-confirmToCreateFieldsForRelatedForm') {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        {
+          <Suggestions
+            items={input.forms}
+            onSelect={(name) => {
+              onConfirm(
+                {
+                  body: { stage: 'design' },
+                },
+                name
+              );
+            }}
+          />
+        }
+        <Button
+          onClick={() => {
+            onCancel && onCancel();
+          }}
+        >
+          取消
+        </Button>
+      </MessageContent>
+    );
+  }
+
+  return null;
+};

package/src/plugins/general-model-form-builder-plugin/components/ghost-evt-dispatcher.tsx

@@ -0,0 +1,69 @@
+import { ConfirmTypes } from '@baishuyun/types';
+import { memo, useEffect } from 'react';
+import { FakeBotMessage } from '../../../components/biz-comp/FakeBotMsg';
+import { usePlugin } from '@/hooks/use-plugin';
+import { PLUGIN_NAME, DEFAULT_EVT } from '../const';
+import { ModelFormBuilderPlugin } from '..';
+
+const eventFactory: Record<
+  ConfirmTypes,
+  (plugin: ModelFormBuilderPlugin) => (output: string, input: any) => CustomEvent
+> = {
+  'tool-confirmToCreateForm': (plugin) => (_: string, input: any) => {
+    return plugin.publicMethods!.dispatchCreateFormEvent(input.formName);
+  },
+  'tool-confirmToSaveCheckedFields': (plugin) => (_: string) => {
+    return plugin.publicMethods!.dispatchSaveFieldsEvent();
+  },
+  'tool-confirmToCreateFieldsForRelatedForm': (_) => (_: string) => {
+    // return plugin.publicMethods!.dispatchCreateFieldsForRelatedFormEvent();
+    // new CustomEvent("form-builder-RelatedFormFieldsConfirmed"),
+    return DEFAULT_EVT;
+  },
+  'tool-confirmToCreateRelatedForm': (_) => (_: string) => {
+    return DEFAULT_EVT;
+  },
+};
+
+const BaseDispatcher = ({
+  output,
+  input,
+  type,
+}: {
+  output: string;
+  input: any;
+  type: ConfirmTypes;
+}) => {
+  const plugin = usePlugin(PLUGIN_NAME);
+  if (!plugin) {
+    return;
+  }
+
+  useEffect(() => {
+    const eventCreator = eventFactory[type];
+    if (eventCreator) {
+      const event = eventCreator(plugin as ModelFormBuilderPlugin)(output, input);
+      dispatchEvent(event);
+    }
+  }, []);
+  return <FakeBotMessage headless>{output}</FakeBotMessage>;
+};
+
+/**
+ * 确认事件分发
+ */
+export const GhostEvtDispatcher = memo(BaseDispatcher, (prevProps, nextProps) => {
+  if (prevProps.output !== nextProps.output) {
+    return false;
+  }
+
+  if (prevProps.type !== nextProps.type) {
+    return false;
+  }
+
+  if (prevProps.input !== nextProps.input) {
+    return false;
+  }
+
+  return true;
+});

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

@@ -0,0 +1,147 @@
+import { Confirmer } from '@/plugins/general-model-form-builder-plugin/components/confirmer';
+import { FieldChecker } from '@/components/biz-comp/FieldChecker';
+import { GhostEvtDispatcher } from '@/plugins/general-model-form-builder-plugin/components/ghost-evt-dispatcher';
+import { MemoizedMarkdown } from '@/components/biz-comp/markdown';
+import { MessageContent } from '@/components/biz-comp/message-content';
+import { NewConfirmer } from '@/plugins/general-model-form-builder-plugin/components/new-confirmer';
+import { cn, sanitizeText } from '@/lib/utils';
+import {
+  APPROVAL,
+  ConfirmTools,
+  ContinueTools,
+  DesignConfirmPayload,
+  FormBuildTools,
+  SaveCheckedFieldsPayload,
+  ToolsCanBeExecutedDirectly,
+  ToolsRequiringConfirmation,
+} from '@baishuyun/agents';
+import { ConfirmDataPart, ConfirmTypes, MsgPartCompProps } from '@baishuyun/types';
+import {
+  ChatRequestOptions,
+  DataUIPart,
+  getToolName,
+  InferUITools,
+  isToolUIPart,
+  TextUIPart,
+  ToolUIPart,
+} from 'ai';
+import { useCallback } from 'react';
+
+export const ModelMessagePart = (props: MsgPartCompProps) => {
+  const { part: p, id, index, sendMessage, role, addToolOutput } = props;
+
+  const part = p as
+    | ToolUIPart<ConfirmTools | FormBuildTools | InferUITools<ContinueTools>>
+    | TextUIPart
+    | DataUIPart<ConfirmDataPart<DesignConfirmPayload | SaveCheckedFieldsPayload>>;
+
+  const key = `message-${id}-part-${index}-${part.type}`;
+
+  // markdown text
+  if (part.type === 'text' && part.text) {
+    return (
+      <div key={key}>
+        <MessageContent
+          className={cn({
+            'w-fit wrap-break-words rounded-2 px-3 py-2 text-right text-white': role === 'user',
+            'bg-transparent px-0 py-0 text-left': role === 'assistant',
+          })}
+          data-testid="message-content"
+          style={role === 'user' ? { backgroundColor: '#006cff' } : undefined}
+        >
+          <MemoizedMarkdown id={id} content={sanitizeText(part.text)} />
+        </MessageContent>
+      </div>
+    );
+  }
+
+  if (part.type === 'data-confirm') {
+    const data = part.data;
+    return (
+      <NewConfirmer
+        key={key}
+        input={data.payload}
+        sendMessage={sendMessage}
+        onCancel={() => {}}
+        type={data.type as ConfirmTypes}
+      />
+    );
+  }
+  if (isToolUIPart<FormBuildTools>(part)) {
+    // 工具返回
+    const toolName = getToolName(part);
+    // 自定义确认提示
+    if (toolName === 'promptToCreateRelatedForm' && part.state === 'output-available') {
+      return (
+        <div key={key}>
+          <MessageContent className="gap-0 py-0" compact>
+            <MemoizedMarkdown
+              id={id}
+              content={sanitizeText(part.output ? '是否继续创建关联表？' : '表单创建已完成。')}
+            />
+          </MessageContent>
+        </div>
+      );
+    }
+
+    // 字段构建工具
+    if (part.state === 'output-available' && ToolsCanBeExecutedDirectly.has(toolName)) {
+      return (
+        <div key={key}>
+          <MessageContent className="gap-0 py-0" compact>
+            {part?.output && <FieldChecker field={part.output} />}
+          </MessageContent>
+        </div>
+      );
+    }
+
+    // 确认工具
+    if (ToolsRequiringConfirmation.includes(toolName) && part.state === 'input-available') {
+      const handleConfirm = useCallback(
+        (opt?: ChatRequestOptions) => {
+          addToolOutput({
+            toolCallId: part.toolCallId,
+            tool: toolName,
+            output: APPROVAL.YES,
+          });
+          sendMessage(undefined, opt);
+        },
+        [part.toolCallId, toolName]
+      );
+
+      const handleCancle = useCallback(() => {
+        addToolOutput({
+          toolCallId: part.toolCallId,
+          tool: toolName,
+          output: APPROVAL.NO,
+        });
+        sendMessage();
+      }, [part.toolCallId, toolName]);
+
+      return (
+        <Confirmer
+          key={key}
+          input={part.input}
+          onConfirm={handleConfirm}
+          onCancel={handleCancle}
+          type={part.type as ConfirmTypes}
+        />
+      );
+    }
+
+    // 确认事件分发
+    if (ToolsRequiringConfirmation.includes(toolName) && part.state === 'output-available') {
+      const p = part as ToolUIPart<ConfirmTools>;
+      return (
+        <GhostEvtDispatcher
+          input={p.input}
+          output={p.output}
+          type={p.type as ConfirmTypes}
+          key={part.toolCallId}
+        />
+      );
+    }
+  }
+
+  return null;
+};

package/src/plugins/general-model-form-builder-plugin/components/new-confirmer.tsx

@@ -0,0 +1,191 @@
+import { MessageContent } from '../../../components/biz-comp/message-content';
+import { OneTimeClickBtn } from '@/components/ui/one-time-click-btn';
+import { ConfirmTools } from '@baishuyun/agents';
+import type { ConfirmTypes } from '@baishuyun/types';
+import { ChatRequestOptions, ToolUIPart } from 'ai';
+import { Suggestions } from '../../../components/biz-comp/suggestions';
+import { useState } from 'react';
+import type { ChatMessage, UseChatHelpers } from '@baishuyun/types';
+import { Button } from '../../../components/ui/button';
+import { usePlugin } from '@/hooks/use-plugin';
+import { PLUGIN_NAME } from '../const';
+import { ModelFormBuilderPlugin } from '..';
+
+export const NewConfirmer = ({
+  input,
+  type,
+  sendMessage,
+  onConfirm,
+  onCancel,
+}: {
+  type: ConfirmTypes;
+  sendMessage: UseChatHelpers<ChatMessage>['sendMessage'];
+  onConfirm?: (opt?: ChatRequestOptions, msg?: string) => void;
+  onCancel?: (opt?: ChatRequestOptions) => void;
+} & Pick<ToolUIPart<ConfirmTools>, 'input'>) => {
+  const [fieldsSaved, setFieldsSaved] = useState(false);
+  const [goOn, setGoOn] = useState(false);
+  const [skip, setSkip] = useState(false);
+
+  const plugin = usePlugin(PLUGIN_NAME) as ModelFormBuilderPlugin;
+
+  // 建表、保存字段
+  if (type === 'tool-confirmToCreateForm') {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <OneTimeClickBtn
+          onClick={() => {
+            plugin?.publicMethods?.dispatchCreateFormEvent(input.formName);
+            sendMessage(undefined, {
+              body: {
+                stage: 'build',
+                name: input.formName,
+              },
+            });
+          }}
+        >
+          确认
+        </OneTimeClickBtn>
+      </MessageContent>
+    );
+  }
+
+  if (type === 'tool-confirmToSaveCheckedFields') {
+    const keys = Object.keys(input.relatedForms);
+    const hasRelatedForms = keys.length;
+
+    const prompts = `${keys.join('、')}暂无已有工作表，将为您继续创建工作表`;
+
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <OneTimeClickBtn
+          onClick={() => {
+            plugin?.publicMethods?.dispatchSaveFieldsEvent();
+            setFieldsSaved(true);
+          }}
+        >
+          保存字段
+        </OneTimeClickBtn>
+
+        {hasRelatedForms && fieldsSaved && !goOn && !skip ? (
+          <>
+            {prompts}
+            <OneTimeClickBtn
+              onClick={() => {
+                // sendMessage(undefined, {
+                //   body: {
+                //     stage: BuildStage.BUILD,
+                //     name: input.formName,
+                //   },
+                // });
+                //
+                // plugin?.publicMethods?.dispatchSaveFieldsEvent();
+                // dispatchEvent(
+                //   new CustomEvent("form-builder-createRelatedForms", {
+                //     detail: { forms: input.relatedForms },
+                //   }),
+                // );
+                setGoOn(true);
+              }}
+            >
+              继续创建？
+            </OneTimeClickBtn>
+            <OneTimeClickBtn
+              onClick={() => {
+                // sendMessage(undefined, {
+                //   body: {
+                //     stage: BuildStage.BUILD,
+                //     name: input.formName,
+                //   },
+                // });
+                //
+                // (dispatchEvent(new CustomEvent("form-builder-FieldsConfirmed")),
+                //   setFieldsSaved(true));
+                setSkip(true);
+              }}
+            >
+              跳过
+            </OneTimeClickBtn>
+          </>
+        ) : null}
+
+        {goOn ? (
+          <>
+            请选择要创建的关联表：
+            <Suggestions
+              items={keys.map((f: string) => ({
+                title: f,
+                description: '',
+              }))}
+              onSelect={(name) => {
+                sendMessage(
+                  { text: name },
+                  {
+                    body: {
+                      stage: 'design',
+                      name,
+                    },
+                  }
+                );
+              }}
+            />
+          </>
+        ) : null}
+      </MessageContent>
+    );
+  }
+
+  // 是否继续创建关联表
+  if (type === 'tool-confirmToCreateRelatedForm' && input.forms.length > 0) {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        <Button
+          onClick={() => {
+            onConfirm?.({
+              body: { stage: 'continue' },
+            });
+          }}
+        >
+          确认
+        </Button>
+        <Button
+          onClick={() => {
+            onCancel && onCancel();
+          }}
+        >
+          跳过
+        </Button>
+      </MessageContent>
+    );
+  }
+
+  // 继续为关联表创建字段
+  if (type === 'tool-confirmToCreateFieldsForRelatedForm') {
+    return (
+      <MessageContent className="gap-0 py-0" compact>
+        {
+          <Suggestions
+            items={input.forms}
+            onSelect={(name) => {
+              onConfirm?.(
+                {
+                  body: { stage: 'design' },
+                },
+                name
+              );
+            }}
+          />
+        }
+        <Button
+          onClick={() => {
+            onCancel && onCancel();
+          }}
+        >
+          取消
+        </Button>
+      </MessageContent>
+    );
+  }
+
+  return null;
+};

package/src/plugins/general-model-form-builder-plugin/const.ts

@@ -0,0 +1,3 @@
+export const PLUGIN_NAME = "ModelFormBuilderPlugin";
+
+export const DEFAULT_EVT = new CustomEvent("default");

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

@@ -0,0 +1,20 @@
+import { PluginCustomComponent, PluginRegistryEntry } from '@baishuyun/types';
+import { ModelFormBuilderPluginCtx } from './types';
+import { ModelMessagePart } from './components/msg-part';
+import { FormBuilderBasePlugin } from '../form-builder-base-plugin';
+import { PLUGIN_NAME } from './const';
+
+export class ModelFormBuilderPlugin extends FormBuilderBasePlugin<ModelFormBuilderPluginCtx> {
+  public pluginName: string = PLUGIN_NAME;
+
+  public customComponents?: Partial<PluginCustomComponent> | undefined = {
+    MessagePart: ModelMessagePart,
+  };
+}
+
+export const ModelFormBuilderPluginRegisterEntry: PluginRegistryEntry<ModelFormBuilderPluginCtx> = {
+  Plugin: ModelFormBuilderPlugin,
+  createContext: () => {
+    return {};
+  },
+};

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

@@ -0,0 +1 @@
+export interface ModelFormBuilderPluginCtx {}