@baishuyun/chat-sdk 0.0.18 → 0.1.1

package/src/components/biz-comp/markdown-part.tsx

@@ -6,6 +6,7 @@ import { UserTextMsgBubble } from '../bs-ui/user-txt-msg-bubble';
 import { CollapsibleTxtMsg } from '../bs-ui/collapsible-txt-msg';
 import { AnalysisIcon } from '../bs-ui/bs-icons';
 import { UIDataTypes, UIMessagePart, UITools } from 'ai';
+import { formatJSONIfValid } from '@/lib/utils';
 
 export const MarkdownMsgpart = (
   props: MsgPartCompProps & {
@@ -14,7 +15,7 @@ export const MarkdownMsgpart = (
     collapsibleTitle?: string;
   }
 ) => {
-  const { part: p, role, id, collapsible = true, collapsibleTitle = '表单设计' } = props;
+  const { part: p, role, id, collapsible = true, collapsibleTitle, title, status } = props;
 
   const part = p as UIMessagePart<UIDataTypes, UITools>;
 
@@ -30,6 +31,18 @@ export const MarkdownMsgpart = (
     return <UserTextMsgBubble>{part.text}</UserTextMsgBubble>;
   }
 
+  const rawContent = sanitizeText(part.text);
+  let displayContent = rawContent;
+
+  if (status === 'ready') {
+
+    // 如果是合法 JSON，包装为代码块格式
+    const formattedJSON = formatJSONIfValid(rawContent);
+    if (formattedJSON) {
+      displayContent = `\`\`\`json\n${formattedJSON}\n\`\`\``;
+    }
+  }
+
   if (!collapsible) {
     return (
       <div>
@@ -42,7 +55,7 @@ export const MarkdownMsgpart = (
           data-testid="message-content"
         >
           <article className={typoCls} style={{ fontSize: 14 }}>
-            <MemoizedMarkdown id={id} content={sanitizeText(part.text)} />
+            <MemoizedMarkdown id={id} content={displayContent} />
           </article>
           {props.children}
         </MessageContent>
@@ -60,9 +73,9 @@ export const MarkdownMsgpart = (
         })}
         data-testid="message-content"
       >
-        <CollapsibleTxtMsg title={collapsibleTitle} icon={<AnalysisIcon />} defaultOpen>
+        <CollapsibleTxtMsg title={collapsibleTitle || title || '表单设计'} icon={<AnalysisIcon />} defaultOpen>
           <article className={typoCls} style={{ fontSize: 14 }}>
-            <MemoizedMarkdown id={id} content={sanitizeText(part.text)} />
+            <MemoizedMarkdown id={id} content={displayContent} />
           </article>
         </CollapsibleTxtMsg>
         {props.children}

package/src/components/biz-comp/multi-modal-input/index.tsx

@@ -108,7 +108,7 @@ function PureMultimodalInput({
 
   const placeholder = useChatPreference()?.placeholder || 'Send a message...';
   const maxCount = useChatPreference()?.acceptAttachmentMaxCount || 5;
-  const maxSizeMb = useChatPreference()?.acceptAttachmentMaxSizeMb || 100;
+  const maxSizeMb = useChatPreference()?.acceptAttachmentMaxSizeMb || 50;
   const tooltip = `上传附件（仅识别文字），最多${maxCount}个，单个文件最大${maxSizeMb}MB`;
 
   const clearAttachmentsAndUploadQueue = useCallback(() => {
@@ -303,12 +303,14 @@ function PureMultimodalInput({
         className="border border-[#e0e0e0] bg-background p-[10px] shadow-xs transition-all duration-200 focus-within:border-border hover:border-[#0265ff]"
         onSubmit={(event) => {
           event.preventDefault();
-          if (status !== 'ready') {
-            // toast.error("Please wait for the model to finish its response!");
-          } else {
+          // if (status !== 'ready') {
+          //   console.error("Please wait for the model to finish its response!");
+          // } else {
+          //   submitForm();
+          // }
+          if (status === 'ready' || status === 'error') {
             submitForm();
           }
-          // submitForm();
         }}
       >
         {(attachments.length > 0 || uploadQueue.length > 0) && (

package/src/components/biz-comp/preview-message-wrapper.tsx

@@ -8,6 +8,7 @@ import { IconBtn } from '../bs-ui/icon-btn';
 import { CopyIcon, RefreshIcon } from '../bs-ui/bs-icons';
 import { useChatPreference } from '@/hooks/use-chat-preference';
 import { GenerateAnimation } from '../bs-ui/generate-animation';
+import { useChatStore } from '@/store/context';
 
 export const PreviewMessageWrapper = ({
   role,
@@ -32,11 +33,12 @@ export const PreviewMessageWrapper = ({
   const isUser = role === 'user';
 
   const chatPref = useChatPreference();
+  const botInfo = useChatStore((state) => state.botInfo);
 
   const avatarComInfo = useDefaultPluginCustomComponent('AvatarAndName');
   const Avatar: ComponentType<{ variant?: 'default' | 'active' }> | undefined =
     avatarComInfo?.Component;
-  const avatarJsx = Avatar ? <Avatar /> : <BotAvatarAndName name={'AI表单搭建'} />;
+  const avatarJsx = Avatar ? <Avatar /> : <BotAvatarAndName name={botInfo?.name || 'AI表单搭建'} />;
 
   // const [isHovered, setIsHovered] = useState(false);
 

package/src/components/biz-comp/preview-message.tsx

@@ -15,6 +15,8 @@ import {
   IsLoadingPart,
   mergeFileParts,
   imageUrlToBase64,
+  IsFakeMsgPart,
+  getMetaErrorMsg,
 } from '@/lib/utils';
 import { FakeBotMessage } from './FakeBotMsg';
 import { WarningMessage } from '../bs-ui/warning-msg';
@@ -24,6 +26,7 @@ import { AttachmentPart } from '../bs-ui/attachment-part';
 import { useChatStatus } from '@/hooks/use-frame-mode';
 import { useEvtBus } from '@/hooks/use-evt-bus';
 import type { FilePart } from '../bs-ui/attachment-part';
+import { useChatStore } from '@/store/context';
 
 const PurePreviewMessage = ({
   message,
@@ -51,6 +54,8 @@ const PurePreviewMessage = ({
 
   const chatStatus = useChatStatus();
 
+  const botInfo = useChatStore((state) => state.botInfo);
+
   const hasFileType = message.parts?.some((p: any) => {
     if (Array.isArray(p)) {
       return p.some((subP) => subP?.type === 'file');
@@ -153,6 +158,15 @@ const PurePreviewMessage = ({
           return <WarningMessage key={key} message={errMsg}></WarningMessage>;
         }
 
+        if (IsFakeMsgPart(part)) {
+          const errMsg = getMetaErrorMsg(part);
+          return (
+            <FakeBotMessage key={key} headless>
+              {errMsg}
+            </FakeBotMessage>
+          );
+        }
+
         if (IsLoadingPart(part)) {
           return (
             <FakeBotMessage key={key} headless>
@@ -164,6 +178,7 @@ const PurePreviewMessage = ({
         return (
           <ErrorBoundary>
             <MsgPartCom
+              title={botInfo?.name}
               setMessages={setMessages}
               sendMessage={sendMessage}
               addToolOutput={addToolOutput}

package/src/components/bs-ui/fields-design-info-table.tsx

@@ -50,7 +50,7 @@ function FieldRow({
   return (
     <div className="flex items-center w-full">
       {/* 名称 */}
-      <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px] whitespace-nowrap')}>
+      <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
         {isSubFormChild && (
           <span className="inline-flex items-center justify-center shrink-0 w-5 h-5 opacity-0">
             <ChevronIcon />
@@ -59,11 +59,11 @@ function FieldRow({
         <span>{field.fieldName}</span>
       </div>
       {/* 类型 */}
-      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] whitespace-nowrap')}>
+      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>
         {field.type}
       </div>
       {/* 必填 */}
-      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px] whitespace-nowrap')}>
+      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
         {field.required ? '是' : '否'}
       </div>
       {/* 说明 */}
@@ -100,11 +100,11 @@ function SubFormGroup({
           <span>{parent.fieldName}</span>
         </div>
         {/* 类型 */}
-        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] whitespace-nowrap')}>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>
           {parent.type}
         </div>
         {/* 必填 */}
-        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px] whitespace-nowrap')}>
+        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
           {parent.required ? '是' : '否'}
         </div>
         {/* 说明 */}
@@ -126,21 +126,21 @@ export function FieldsDesignInfoTable({ fields }: FieldsDesignInfoTableProps) {
     <div className="flex flex-col items-start w-full bg-white rounded-[10px] overflow-hidden text-black my-[10px] border border-[#E0E0E0]">
       {/* 表头 */}
       <div className="flex items-center w-full shrink-0 bg-[#E5E6EB] rounded-t-[10px] border-b border-[#E0E0E0]">
-        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold whitespace-nowrap')}>
+        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>
           名称
         </div>
-        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold whitespace-nowrap')}>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>
           类型
         </div>
         <div
           className={cn(
             cellCls,
-            'w-9 shrink-0 h-[34px] font-bold whitespace-nowrap justify-center'
+            'w-9 shrink-0 h-[34px] font-bold justify-center'
           )}
         >
           必填
         </div>
-        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold whitespace-nowrap')}>
+        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>
           说明
         </div>
       </div>

package/src/lib/utils.ts

@@ -71,6 +71,11 @@ export const IsErrorPart = (part: any): boolean => {
   return payload?.type === 'agent-error';
 };
 
+export const IsFakeMsgPart = (part: any): boolean => {
+  const payload = extractTextPartMeta(part);
+  return payload?.type === 'agent-fake-msg';
+};
+
 export const IsFilePart = (part: any): boolean => {
   return part?.type === 'file';
 };
@@ -117,6 +122,15 @@ export const GetPartErrMsg = (part: any): string => {
   return payload?.error || '未知错误';
 };
 
+export const getMetaErrorMsg = (part: any): string => {
+  if (part?.errorText) {
+    return part.errorText;
+  }
+
+  const payload = extractTextPartMeta(part);
+  return payload?.error || '未知错误';
+};
+
 export const GetFieldJsonInfo = (part: any): IFilledField | null => {
   const payload = extractTextPartMeta(part);
   if (payload?.type !== 'mcp-fields-json') {
@@ -384,3 +398,23 @@ export const imageUrlToBase64 = (url: string, mediaType = 'image/png'): Promise<
     img.onerror = () => resolve(url);
     img.src = url;
   });
+
+export const isValidJSON = (str: string): boolean => {
+  if (!str || typeof str !== 'string') return false;
+  try {
+    JSON.parse(str);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const formatJSONIfValid = (str: string): string | null => {
+  try {
+    const parsed = JSON.parse(str);
+    console.log('try parse JSON: ', str);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return null;
+  }
+};

package/src/plugins/report-query-plugin/index.ts

@@ -119,7 +119,7 @@ export class ReportQueryPlugin extends ChatAreaPlugin<IReportQueryContext> {
       return;
     }
 
-    await fetch(`${ensureEndSlash(apiEndpoint)}/form/conversation/clear`, {
+    await fetch(`${ensureEndSlash(apiEndpoint)}form/conversation/clear`, {
       method: 'POST',
       body: JSON.stringify({ conversationId }),
     });

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,
+        })),
     }))
   );
 };