@baishuyun/chat-sdk 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @baishuyun/chat-sdk
 
+## 0.0.12
+
+### Patch Changes
+
+- udpate style
+- Updated dependencies
+  - @baishuyun/agents@0.0.12
+
+## 0.0.11
+
+### Patch Changes
+
+- style update
+- Updated dependencies
+  - @baishuyun/agents@0.0.11
+
 ## 0.0.10
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/chat-sdk",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "",
   "main": "src/index.jsx",
   "module": "dist/chat-sdk.js",
@@ -35,7 +35,7 @@
     "tw-animate-css": "^1.4.0",
     "use-stick-to-bottom": "^1.1.1",
     "zustand": "^5.0.8",
-    "@baishuyun/agents": "0.0.10"
+    "@baishuyun/agents": "0.0.12"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.1.11",
@@ -51,8 +51,8 @@
     "tailwindcss": "^4.1.17",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
-    "@baishuyun/types": "1.0.10",
-    "@baishuyun/typescript-config": "0.0.10"
+    "@baishuyun/types": "1.0.12",
+    "@baishuyun/typescript-config": "0.0.12"
   },
   "exports": {
     ".": {

package/src/chat.tsx

@@ -2,7 +2,7 @@ import { DefaultChatTransport } from 'ai';
 import { useEffect, useMemo, useState } from 'react';
 import { ChatFrame } from '@/components/biz-comp/chat-frame';
 import { Messages } from '@/components/biz-comp/messages';
-import { Attachment, ChatMessage } from '@baishuyun/types';
+import { Attachment, ChatMessage, IGhostMsgEventDetail } from '@baishuyun/types';
 import { ChatSDK } from '@/.';
 import { MultimodalInput } from './components/biz-comp/multi-modal-input';
 import { useDefaultPluginCustomComponent } from './hooks/use-plugin-custom-components';
@@ -10,10 +10,14 @@ import { useMergedChat } from './hooks/use-merged-chat';
 import { useChatPreference } from './hooks/use-chat-preference';
 import { useMsgStatusBroadcast } from './hooks/use-msg-status-broadcast';
 import { useChatStatus } from './hooks/use-frame-mode';
+import { usePluginLifeCycleChainRunner } from './hooks/use-plugin-life-cycle-chain-runner';
+import { useEvt } from './hooks/use-evt';
 
 export const Chat = ({ client }: { client: ChatSDK }) => {
   const preference = useChatPreference(client);
 
+  const { exec: onAfterChatHide = () => {} } = usePluginLifeCycleChainRunner('onAfterChatAreaHide');
+
   const transport = useMemo(() => {
     return new DefaultChatTransport({
       api: client?.options?.chatApiEndpoint,
@@ -29,11 +33,26 @@ export const Chat = ({ client }: { client: ChatSDK }) => {
       enableMerge: preference?.enableMessageMerge,
     });
 
+  useEvt('send-ghost-msg', (detail) => {
+    const { text, options } = detail as IGhostMsgEventDetail;
+    sendMessage(
+      {
+        text,
+      },
+      options
+    );
+  });
+
   const { isHide } = useChatStatus();
 
   useEffect(() => {
     if (isHide) {
       stop();
+      onAfterChatHide({
+        clearMsgs: () => {
+          setMessages(() => []);
+        },
+      });
     }
   }, [isHide, stop]);
 

package/src/components/biz-comp/FieldChecker.tsx

@@ -16,11 +16,23 @@ export interface FieldCheckerProps {
   icon?: React.ReactNode;
   onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
   value?: unknown;
+  streaming?: boolean;
+  confirmed?: boolean;
   onLoaded?: (field: Field) => void;
 }
 
 export const FieldChecker = memo(
-  ({ field, disabled, isSubField, onChange, onLoaded, icon, value }: FieldCheckerProps) => {
+  ({
+    field,
+    disabled,
+    isSubField,
+    onChange,
+    onLoaded,
+    icon,
+    value,
+    streaming,
+    confirmed,
+  }: FieldCheckerProps) => {
     const { widget, label } = field;
     if (!widget) {
       return null;
@@ -68,6 +80,8 @@ export const FieldChecker = memo(
     return (
       <>
         <LineChecker
+          streaming={streaming}
+          confirmed={confirmed}
           title={label}
           disabled={disabled}
           defaultChecked={true}
@@ -90,6 +104,8 @@ export const FieldChecker = memo(
         {isSubForm
           ? widget.items.map((subField: Field, index: number) => (
               <FieldChecker
+                confirmed={confirmed}
+                streaming={streaming}
                 key={subField.label}
                 isSubField={true}
                 disabled={disabled}
@@ -106,6 +122,11 @@ export const FieldChecker = memo(
     );
   },
   (p1, p2) => {
-    return p1.field?.label === p2.field?.label && p1.disabled === p2.disabled;
+    return (
+      p1.field?.label === p2.field?.label &&
+      p1.disabled === p2.disabled &&
+      p1.confirmed === p2.confirmed &&
+      p1.streaming === p2.streaming
+    );
   }
 );

package/src/components/biz-comp/FieldCheckerListMsg.tsx

@@ -5,27 +5,52 @@ import { EditIcon, LetterAIcon } from '../bs-ui/bs-icons';
 import { FieldValueChecker, FieldValueCheckerProps } from './FieldValueChecker';
 
 export const FieldCheckerListMsg = memo(
-  ({ fields, children }: { fields: Array<FieldCheckerProps>; children?: ReactNode }) => {
+  ({
+    fields,
+    children,
+    streaming,
+    confirmed,
+  }: {
+    fields: Array<FieldCheckerProps>;
+    children?: ReactNode;
+    streaming: boolean;
+    confirmed?: boolean;
+  }) => {
     return (
       <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen>
         {fields.map((f) => (
-          <FieldChecker {...f} />
+          <FieldChecker {...f} streaming={streaming} confirmed={confirmed} />
         ))}
         {children}
       </CollapsibleTxtMsg>
     );
   },
   (p1, p2) => {
-    return p1.fields.length === p2.fields.length;
+    return (
+      p1.fields.length === p2.fields.length &&
+      p1.streaming === p2.streaming &&
+      p1.confirmed === p2.confirmed &&
+      p1.children === p2.children
+    );
   }
 );
 
 export const FieldValueCheckerListMsg = memo(
-  ({ props, children }: { props: Array<FieldValueCheckerProps>; children?: ReactNode }) => {
+  ({
+    props,
+    readonly,
+    children,
+    streaming,
+  }: {
+    props: Array<FieldValueCheckerProps>;
+    children?: ReactNode;
+    readonly?: boolean;
+    streaming?: boolean;
+  }) => {
     return (
       <CollapsibleTxtMsg title="字段填写" icon={<EditIcon />} defaultOpen>
         {props.map((f) => (
-          <FieldValueChecker {...f} />
+          <FieldValueChecker {...f} readonly={readonly} streaming={streaming} />
         ))}
         {children}
       </CollapsibleTxtMsg>

package/src/components/biz-comp/FieldValueChecker.tsx

@@ -14,12 +14,22 @@ export interface FieldValueCheckerProps {
   field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
   isSubField?: boolean;
   disabled?: boolean;
+  readonly?: boolean;
   onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
   onLoaded?: (field: Field) => void;
+  streaming?: boolean;
 }
 
 export const FieldValueChecker = memo(
-  ({ field, disabled, isSubField, onChange, onLoaded }: FieldValueCheckerProps) => {
+  ({
+    field,
+    disabled,
+    isSubField,
+    readonly,
+    streaming,
+    onChange,
+    onLoaded,
+  }: FieldValueCheckerProps) => {
     const { widget, label } = field;
     if (!widget) {
       return null;
@@ -52,20 +62,24 @@ export const FieldValueChecker = memo(
     return (
       <>
         <LineChecker
+          streaming={streaming}
           title={label}
           disabled={disabled}
           defaultChecked={true}
           onCheckedChange={handleCheck}
           className={extraPadding}
+          readonly={readonly}
           shortDesc={isSubForm ? '' : (value as string)}
           // extra={typeDesc}
         />
         {isSubForm && (
           <SubformFieldsValueChecker
+            readonly={readonly}
             subformField={field}
             onChange={(detail) => {
               onChange?.(detail.checked, detail.field, detail.parentFieldName, detail.row);
             }}
+            streaming={streaming}
           />
         )}
       </>
@@ -90,6 +104,18 @@ export const FieldValueChecker = memo(
       return false;
     }
 
+    // 只读状态一致
+    const isReadonlyEqual = p1.readonly === p2.readonly;
+    if (!isReadonlyEqual) {
+      return false;
+    }
+
+    // 流式状态一致
+    const isStreamingEqual = p1.streaming === p2.streaming;
+    if (!isStreamingEqual) {
+      return false;
+    }
+
     // 进一步比较子表单下的字段
     return isSubformFieldEqual(p1?.field, p2?.field);
   }

package/src/components/biz-comp/SubformFieldsValueChecker.tsx

@@ -13,6 +13,8 @@ const Checker = ({
 
   label,
   val,
+  streaming,
+  readonly,
   // desc,
 }: {
   label: string;
@@ -20,9 +22,13 @@ const Checker = ({
   onCheckedChange: (v: boolean) => void;
   disabled?: boolean;
   desc: string;
+  readonly?: boolean;
+  streaming?: boolean;
 }) => {
   return (
     <LineChecker
+      streaming={streaming}
+      readonly={readonly}
       title={label}
       disabled={disabled}
       defaultChecked={true}
@@ -37,12 +43,16 @@ const Checker = ({
 const SubFieldChecker = memo(
   ({
     field,
+    readonly,
     onCheckedChange,
+    streaming,
   }: {
     onCheckedChange: (
       checked: boolean,
       field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>
     ) => void;
+    readonly?: boolean;
+    streaming?: boolean;
     field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
   }) => {
     const { widget, label } = field;
@@ -74,6 +84,8 @@ const SubFieldChecker = memo(
 
     return (
       <Checker
+        streaming={streaming}
+        readonly={readonly}
         desc={typeDesc}
         label={label}
         val={value as string}
@@ -82,7 +94,10 @@ const SubFieldChecker = memo(
     );
   },
   (p1, p2) => {
-    const isNameEqual = p1.field.widget?.widgetName === p2.field.widget?.widgetName;
+    const isNameEqual =
+      p1.field.widget?.widgetName === p2.field.widget?.widgetName &&
+      p1.readonly === p2.readonly &&
+      p1.streaming === p2.streaming;
     return isNameEqual;
   }
 );
@@ -110,9 +125,13 @@ type onSubformFieldChangeParam = {
 export const SubformFieldsValueChecker = ({
   subformField,
   onChange,
+  streaming,
+  readonly,
 }: {
   onChange: (p: onSubformFieldChangeParam) => void;
   subformField: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  streaming?: boolean;
+  readonly?: boolean;
 }) => {
   if (!subformField.widget.value || !subformField.widget.value.length) {
     return null;
@@ -135,6 +154,8 @@ export const SubformFieldsValueChecker = ({
                 {rowData.map((fData: generatedField, col: number) => {
                   return (
                     <SubFieldChecker
+                      readonly={readonly}
+                      streaming={streaming}
                       field={{
                         label: fData.label,
                         widget: {

package/src/components/biz-comp/chat-client.tsx

@@ -14,6 +14,7 @@ import { useDefaultPluginCustomComponent } from '@/hooks/use-plugin-custom-compo
 import { BotAvatarAndName } from '../bs-ui/bot-avatar-name';
 import { ChatEntryButtonConfig } from '@baishuyun/types';
 import { useDraggable } from '@/hooks/use-draggable';
+import { TooltipProvider } from '../ui/tooltip';
 
 const ChatSlot = ({ client }: { client?: ChatSDK }) => {
   const { setStatus, isVisible, isFloat, isDock } = useChatStatus();
@@ -105,7 +106,7 @@ const ChatContent: React.FC<{ client?: ChatSDK }> = ({ client }): ReactPortal |
   return createPortal(<ChatSlot client={client} />, chatContentEl) as ReactPortal;
 };
 
-export const ChatEntryBtn = ({ client }: { client?: ChatSDK }) => {
+export const ChatEntryBtn = ({ client }: { client: ChatSDK }) => {
   const { bottom = 10, right = 10 } = client?.options?.btnOffset || {};
 
   const { entryVisible, entryWrapper, setStatus, isVisible, entryVariant } = useChatStore(
@@ -137,6 +138,7 @@ export const ChatEntryBtn = ({ client }: { client?: ChatSDK }) => {
 
   const EntryJsx = EntryCom ? (
     <EntryCom
+      client={client}
       variant={entryVariant}
       chatVisible={isVisible}
       style={entryStyle}
@@ -186,7 +188,7 @@ const MultiEntryButtonItem = ({
   client,
   config,
 }: {
-  client?: ChatSDK;
+  client: ChatSDK;
   config: ChatEntryButtonConfig;
 }) => {
   const { setStatus, isVisible } = useChatStore((store) => ({
@@ -213,6 +215,7 @@ const MultiEntryButtonItem = ({
 
   const EntryJsx = EntryCom ? (
     <EntryCom
+      client={client}
       variant={config.variant}
       chatVisible={isVisible}
       style={entryStyle}
@@ -249,7 +252,7 @@ const MultiEntryButtonItem = ({
 };
 
 /** Renders all multi-entry buttons from chatEntryButtons Map */
-const MultiEntryButtons = ({ client }: { client?: ChatSDK }) => {
+const MultiEntryButtons = ({ client }: { client: ChatSDK }) => {
   const chatEntryButtons = useChatStore((store) => store.chatEntryButtons);
 
   const buttons = Array.from(chatEntryButtons.values());
@@ -267,7 +270,7 @@ const MultiEntryButtons = ({ client }: { client?: ChatSDK }) => {
   );
 };
 
-export const ChatWidgets = ({ client }: { client?: ChatSDK }) => {
+export const ChatWidgets = ({ client }: { client: ChatSDK }) => {
   return (
     <>
       <ChatContent client={client} />
@@ -277,10 +280,14 @@ export const ChatWidgets = ({ client }: { client?: ChatSDK }) => {
   );
 };
 
-export const ChatClient = ({ store, client }: { client?: ChatSDK; store: ChatStore }) => {
+export const ChatClient = ({ store, client }: { client: ChatSDK; store: ChatStore }) => {
   return (
     <ChatStoreProvider store={store}>
-      <ChatWidgets client={client} />
+      <TooltipProvider
+        zIndex={client?.options?.safeZIndex != null ? client.options.safeZIndex + 1 : 50}
+      >
+        <ChatWidgets client={client} />
+      </TooltipProvider>
     </ChatStoreProvider>
   );
 };

package/src/components/biz-comp/field-icon.tsx

@@ -3,7 +3,7 @@ import { FieldType } from '@baishuyun/types';
 import { FontIcon } from '../bs-ui/font-icon';
 import { FormulasIcon } from '../bs-ui/bs-icons';
 
-export const FieldIcon = ({ type }: { type: FieldType & 'formula' }) => {
+export const FieldIcon = ({ type }: { type: FieldType }) => {
   const code = FIELD_ICON_CODE_MAP[type] || 'unknown';
   if (type === 'formula') {
     return <FormulasIcon />;

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

@@ -19,7 +19,7 @@ import {
   PromptInputToolbar,
   PromptInputTools,
 } from './prompt-input';
-import { PreviewAttachment } from './preview-attachment';
+import { AttachmentsPreviewer } from '@/components/bs-ui/attachments-previewer';
 import { ChatMessage, Attachment } from '@baishuyun/types';
 import { Button } from '@/components/ui/button';
 import { usePluginLifeCycleChainRunner } from '@/hooks/use-plugin-life-cycle-chain-runner';
@@ -221,6 +221,9 @@ function PureMultimodalInput({
     [setAttachments, uploadFile]
   );
 
+  const accept = useChatPreference()?.acceptAttachmentFileType?.join(',');
+  const hasAcceptableFileType = !!accept;
+
   // Add paste event listener to textarea
   useEffect(() => {
     const textarea = textareaRef.current;
@@ -241,7 +244,7 @@ function PureMultimodalInput({
         ref={fileInputRef}
         tabIndex={-1}
         type="file"
-        // accept=".csv,text/csv,text/plain,.txt"
+        accept={accept}
       />
 
       <PromptInput
@@ -257,37 +260,29 @@ function PureMultimodalInput({
         }}
       >
         {(attachments.length > 0 || uploadQueue.length > 0) && (
-          <div
-            className="flex flex-row items-end gap-2 overflow-x-scroll"
-            data-testid="attachments-preview"
-          >
-            {attachments.map((attachment) => (
-              <PreviewAttachment
-                attachment={attachment}
-                key={attachment.url}
-                onRemove={() => {
-                  setAttachments((currentAttachments) =>
-                    currentAttachments.filter((a) => a.url !== attachment.url)
-                  );
-                  if (fileInputRef.current) {
-                    fileInputRef.current.value = '';
-                  }
-                }}
-              />
-            ))}
-
-            {uploadQueue.map((filename) => (
-              <PreviewAttachment
-                attachment={{
-                  url: '',
-                  name: filename,
-                  contentType: '',
-                }}
-                isUploading={true}
-                key={filename}
-              />
-            ))}
-          </div>
+          <AttachmentsPreviewer
+            attachments={[
+              ...attachments.map((a) => ({
+                id: a.url,
+                url: a.url,
+                alt: a.name,
+                contentType: a.contentType,
+              })),
+              ...uploadQueue.map((filename) => ({
+                id: `uploading-${filename}`,
+                url: '',
+                alt: filename,
+                isLoading: true,
+              })),
+            ]}
+            onImageRemove={(item) => {
+              if (item.id.startsWith('uploading-')) return;
+              setAttachments((cur) => cur.filter((a) => a.url !== item.id));
+              if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+              }
+            }}
+          />
         )}
         <div className="flex flex-row items-start gap-1 sm:gap-2">
           <PromptInputTextarea
@@ -306,7 +301,9 @@ function PureMultimodalInput({
         <PromptInputToolbar className="border-top-0! border-t-0! p-0 shadow-none dark:border-0 dark:border-transparent!">
           <div></div>
           <PromptInputTools className="gap-2.5">
-            <AttachmentsButton fileInputRef={fileInputRef} status={status} />
+            {hasAcceptableFileType ? (
+              <AttachmentsButton fileInputRef={fileInputRef} status={status} />
+            ) : null}
             <ClearBtn setMessages={setMessages} status={status} />
             <DividerIcon />
             {status === 'submitted' || status === 'streaming' ? (

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

@@ -104,10 +104,7 @@ export const PromptInputToolbar = ({ className, ...props }: PromptInputToolbarPr
 export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
 
 export const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (
-  <div
-    className={cn('flex items-center gap-1', '[&_button:first-child]:rounded-bl-xl', className)}
-    {...props}
-  />
+  <div className={cn('flex items-center gap-1', className)} {...props} />
 );
 
 export type PromptInputButtonProps = ComponentProps<typeof Button>;

package/src/components/biz-comp/opening-lines.tsx

@@ -11,7 +11,7 @@ export const OpeningLines = ({ sendMessage, setMessages }: OpeningLinesProps) =>
 
   return (
     <>
-      请问可以帮你创建什么表单？试试下面的建议吧！
+      👋 你好，你想创建什么表单呢，不知道的话，可以试试下面的建议~
       <Suggestions
         onSelect={(title) => {
           sendMessage(

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

@@ -53,13 +53,20 @@ export const PreviewMessageWrapper = ({
         pointerEventsCls
       )}
     >
-      <IconBtn icon={<CopyIcon />} onClick={onCopy} />
+      <IconBtn
+        tooltip="复制"
+        icon={<CopyIcon />}
+        onClick={onCopy}
+        className="!hover:bg-[#eff0f6]"
+      />
       {onGenerate ? (
         <IconBtn
+          tooltip="重新生成"
           icon={<RefreshIcon />}
           onClick={() => {
             onGenerate && onGenerate();
           }}
+          className="!hover:bg-[#eff0f6]"
         />
       ) : null}
     </div>

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

@@ -20,6 +20,8 @@ import { WarningMessage } from '../bs-ui/warning-msg';
 import { GenerateAnimation } from '../bs-ui/generate-animation';
 import { AttachmentPartGroup } from '../bs-ui/attachment-part-group';
 import { AttachmentPart } from '../bs-ui/attachment-part';
+import { useChatStatus } from '@/hooks/use-frame-mode';
+import { useEvtBus } from '@/hooks/use-evt-bus';
 
 const PurePreviewMessage = ({
   message,
@@ -45,6 +47,8 @@ const PurePreviewMessage = ({
     (p: { type: string; text?: string }) => p.type === 'text' && p.text?.trim()
   );
 
+  const chatStatus = useChatStatus();
+
   const hasFileType = message.parts?.some((p: any) => {
     if (Array.isArray(p)) {
       return p.some((subP) => subP?.type === 'file');
@@ -66,6 +70,8 @@ const PurePreviewMessage = ({
 
   const parts = onBeforePartsRender(fileGroupedParts);
 
+  const evtBus = useEvtBus();
+
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
 
   const handleCopy = () => {
@@ -75,7 +81,13 @@ const PurePreviewMessage = ({
       .join('\n');
 
     if (textParts) {
-      navigator.clipboard.writeText(textParts);
+      try {
+        navigator.clipboard.writeText(textParts);
+        evtBus.emit('chat-msg-copied', {
+          messageId: message.id,
+          content: textParts,
+        });
+      } catch (err) {}
     }
   };
 
@@ -87,6 +99,10 @@ const PurePreviewMessage = ({
     });
   };
 
+  if (chatStatus.isHide) {
+    return null;
+  }
+
   return (
     <PreviewMessageWrapper
       role={message.role}