@baishuyun/chat-sdk 0.0.17 → 0.1.0

package/src/sdk.impl.tsx

@@ -3,6 +3,7 @@ import { ChatStore, createStore, setupStoreSubscriptions } from '@/store';
 import { ChatClient } from '@/components/biz-comp/chat-client';
 import './style.css';
 import {
+  ChatMessage,
   DeepReadonly,
   IChatSDK,
   IChatSDKOption,
@@ -10,18 +11,25 @@ import {
   type PluginRegistryEntry,
 } from '@baishuyun/types';
 import { EvtBus } from './lib/event-emitter';
+import type { UseChatHelpers } from '@ai-sdk/react';
+import { ChatRequestOptions, JSONValue } from 'ai';
 
 export class ChatSDK implements IChatSDK {
   static instances: ChatSDK[] = [];
 
   private root: ReturnType<typeof createRoot> | undefined;
   private readonly Store: ChatStore;
+  private chatComponentReadyResolve!: () => void;
+  private chatComponentReadyPromise: Promise<void>;
 
   public options: IChatSDKOption;
 
   public eventBus = new EvtBus() as IEvtBus;
 
   constructor(options: IChatSDKOption) {
+    this.chatComponentReadyPromise = new Promise((resolve) => {
+      this.chatComponentReadyResolve = resolve;
+    });
     this.options = options;
 
     const renderEl = document.createElement('div');
@@ -92,10 +100,56 @@ export class ChatSDK implements IChatSDK {
     return undefined;
   }
 
+  markChatComponentReady() {
+    this.chatComponentReadyResolve();
+  }
+
+  whenChatComponentReady(): Promise<void> {
+    return this.chatComponentReadyPromise;
+  }
+
+  _sendMessage?: UseChatHelpers<ChatMessage>['sendMessage'];
+  _appendFakeBotMessage?: (text: string) => void;
+
+  public appendBotMessage = async (text: string) => {
+    await this.whenChatComponentReady();
+    this._appendFakeBotMessage?.(text);
+  }
+
+  public sendMessage = async (text: string, customVariable: JSONValue, options: ChatRequestOptions) => {
+    await this.whenChatComponentReady();
+
+    // if is streaming, return;
+    this._sendMessage?.(
+      { text },           // First arg: message data
+      {                   // Second arg: options
+        ...options,
+        body: {
+          ...(options?.body || {}),
+          userVar: customVariable,
+        },
+      }
+    );
+  }
+
   public clearChatHistory() {
     this.Store.getState().clearMessages();
   }
 
+  public getLastBotMsg(textOnly?: boolean): ChatMessage | string | undefined {
+    const lastBotMessage = this.Store.getState().lastBotMessage;
+    if (!lastBotMessage) return undefined;
+
+    if (textOnly) {
+      return lastBotMessage.parts
+        .filter((part) => part.type === 'text')
+        .map((part) => (part as any).text)
+        .join('');
+    }
+
+    return lastBotMessage;
+  }
+
   public getFullStyle() {
     return this.options.style;
   }
@@ -121,13 +175,6 @@ export class ChatSDK implements IChatSDK {
     };
   }
 
-  public setUserId(userId: string) {
-    this.options.chatApiHeaders = {
-      ...this.options.chatApiHeaders,
-      'X-User-Id': userId,
-    };
-  }
-
   public getChatStatus() {
     return this.Store.getState().chatStatus;
   }

package/src/store/index.ts

@@ -6,6 +6,7 @@ import {
   ChatStatus,
   IChatSDKOption,
   IEvtBus,
+  ChatMessage,
 } from '@baishuyun/types';
 import { ChatSDK } from '..';
 import { create } from 'zustand';
@@ -24,6 +25,8 @@ export const createStore = (sdkInst: ChatSDK) => {
 
     msgClearTimestamp: Date.now(),
     globalFakeLoadingMessage: '',
+    lastBotMessage: undefined,
+    botInfo: sdkInst.options?.botInfo,
   };
 
   return create<ChatContextType>()(
@@ -104,6 +107,11 @@ export const createStore = (sdkInst: ChatSDK) => {
           newButtons.set(id, { ...existing, visible });
           return { chatEntryButtons: newButtons };
         }),
+
+      setLastBotMessage: (message?: ChatMessage | undefined) =>
+        set(() => ({
+          lastBotMessage: message,
+        })),
     }))
   );
 };
@@ -118,7 +126,6 @@ export const setupStoreSubscriptions = (store: ChatStore, option: IChatSDKOption
       option.onChatStatusChange?.(status);
       // @deprecated, will be removed in future versions
       eventBus.emit('chat-area-visibility-change', { visible, status });
-      console.log('chat status changed:', status);
     }
   );
 };

package/src/stories/BorderAnimation.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderAnimation } from '@/components/bs-ui/border-animation';
+
+const meta = {
+  title: 'Animation/BorderAnimation',
+  component: BorderAnimation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof BorderAnimation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="flex items-center gap-[6px] bg-white px-[10px] py-[4px] rounded-[4px]">
+        <span className="text-[#999] text-[14px]">
+          数据生成中，可点击下方按钮暂停
+        </span>
+      </div>
+    ),
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <h3 className="text-[16px] font-medium text-[#333]">标题内容</h3>
+        <p className="text-[14px] text-[#666] mt-1">
+          这是一段描述文字，展示边框动画效果。
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const LargerRadius: Story = {
+  args: {
+    borderRadius: 12,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[12px]">
+        <p className="text-[14px] text-[#666]">圆角 12px 的边框动画</p>
+      </div>
+    ),
+  },
+};
+
+export const SlowAnimation: Story = {
+  args: {
+    duration: 5,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">慢速动画（5秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const FastAnimation: Story = {
+  args: {
+    duration: 1,
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">快速动画（1秒一圈）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    gradient:
+      'linear-gradient(180deg, #FF84B4 0%, #FF0265 50%, #FFB1FA 100%)',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义渐变色（粉色系）</p>
+      </div>
+    ),
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    className: 'w-[300px]',
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">自定义宽度 300px</p>
+      </div>
+    ),
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: (
+      <div className="bg-white px-4 py-3 rounded-[4px]">
+        <p className="text-[14px] text-[#666]">
+          宽度 100%，自动填满父容器
+        </p>
+      </div>
+    ),
+  },
+};

package/src/stories/PreviewerHeader.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PreviewerHeader } from '@/components/bs-ui/previewer-header';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -10,6 +11,13 @@ const meta: Meta<typeof PreviewerHeader> = {
   parameters: {
     layout: 'centered',
   },
+  decorators: [
+    (Story) => (
+      <TooltipProvider delayDuration={100}>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -65,3 +73,19 @@ export const LoadingOnSave: Story = {
     style: { width: 700 },
   },
 };
+
+
+export const ShowClear: Story = {
+  args: {
+    title: '编辑表单',
+    onClear: () => {
+      alert('清除点击');
+    },
+    onSave: async () => {
+      await delay(2000);
+      alert('保存完成');
+    },
+    onCancel: () => alert('取消点击'),
+    style: { width: 700 },
+  },
+};

package/src/style.css

@@ -163,6 +163,31 @@
   }
 }
 
+@utility rounded-inherit {
+  border-radius: inherit;
+}
+
+@layer components {
+  .gradient-border {
+    @apply relative;
+  }
+  .gradient-border::before {
+    content: '';
+    @apply absolute inset-0 rounded-inherit p-[1px] pointer-events-none;
+    background: linear-gradient(
+      90deg,
+      rgb(132, 180, 255) 0%,
+      rgb(2, 101, 255) 50%,
+      rgb(177, 250, 255) 100%
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+}
+
 .prose {
   --tw-prose-body: #121111;
 }

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

@@ -1,90 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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;
-};