@baishuyun/chat-sdk 0.0.11 → 0.0.12

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/chat-sdk",
-  "version": "0.0.11",
+  "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.11"
+    "@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/typescript-config": "0.0.11",
-    "@baishuyun/types": "1.0.11"
+    "@baishuyun/types": "1.0.12",
+    "@baishuyun/typescript-config": "0.0.12"
   },
   "exports": {
     ".": {

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

@@ -36,11 +36,21 @@ export const FieldCheckerListMsg = memo(
 );
 
 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,7 +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 '@radix-ui/react-tooltip';
+import { TooltipProvider } from '../ui/tooltip';
 
 const ChatSlot = ({ client }: { client?: ChatSDK }) => {
   const { setStatus, isVisible, isFloat, isDock } = useChatStatus();
@@ -283,7 +283,9 @@ export const ChatWidgets = ({ client }: { client: ChatSDK }) => {
 export const ChatClient = ({ store, client }: { client: ChatSDK; store: ChatStore }) => {
   return (
     <ChatStoreProvider store={store}>
-      <TooltipProvider>
+      <TooltipProvider
+        zIndex={client?.options?.safeZIndex != null ? client.options.safeZIndex + 1 : 50}
+      >
         <ChatWidgets client={client} />
       </TooltipProvider>
     </ChatStoreProvider>

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

@@ -21,6 +21,7 @@ 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,
@@ -69,6 +70,8 @@ const PurePreviewMessage = ({
 
   const parts = onBeforePartsRender(fileGroupedParts);
 
+  const evtBus = useEvtBus();
+
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
 
   const handleCopy = () => {
@@ -78,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) {}
     }
   };
 

package/src/components/bs-ui/attachments-previewer.tsx

@@ -1,12 +1,16 @@
 import { cn } from '@/lib/utils';
 import { transCls } from '@/const/ui';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import { RemoveCircleIcon } from './bs-icons';
+import { useRef, useState, useEffect, useCallback, ComponentType } from 'react';
+import { RemoveCircleIcon, XlsxIcon, CsvFileIcon, TxtFileIcon, UnknownFileIcon } from './bs-icons';
+import { LoaderIcon } from '@/components/ui/icons';
 
 export interface AttachmentItem {
   id: string;
   url: string;
   alt?: string;
+  isLoading?: boolean;
+  /** MIME type, used to decide whether to show image or icon */
+  contentType?: string;
 }
 
 export interface AttachmentsPreviewerProps {
@@ -18,6 +22,59 @@ export interface AttachmentsPreviewerProps {
   onImageRemove?: (attachment: AttachmentItem, index: number) => void;
 }
 
+type FileIconComponent = ComponentType;
+
+interface FileTypeConfig {
+  icon: FileIconComponent;
+  /** Icon original size for scaling */
+  iconSize: number;
+}
+
+const FILE_TYPE_MAP: Record<string, FileTypeConfig> = {
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
+    icon: XlsxIcon,
+    iconSize: 52,
+  },
+  'application/vnd.ms-excel': { icon: XlsxIcon, iconSize: 52 },
+  'text/csv': { icon: CsvFileIcon, iconSize: 16 },
+  'text/plain': { icon: TxtFileIcon, iconSize: 16 },
+  'application/octet-stream': { icon: TxtFileIcon, iconSize: 16 },
+};
+
+const DEFAULT_FILE_CONFIG: FileTypeConfig = {
+  icon: UnknownFileIcon,
+  iconSize: 16,
+};
+
+const isImageType = (mediaType?: string): boolean => Boolean(mediaType?.startsWith('image/'));
+
+const getFileConfig = (mediaType?: string, fileName?: string): FileTypeConfig => {
+  if (mediaType && FILE_TYPE_MAP[mediaType]) {
+    return FILE_TYPE_MAP[mediaType];
+  }
+
+  if (fileName) {
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    switch (ext) {
+      case 'xlsx':
+      case 'xls':
+        return FILE_TYPE_MAP['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
+      case 'csv':
+        return FILE_TYPE_MAP['text/csv'];
+      case 'txt':
+      case 'ts':
+      case 'tsx':
+      case 'js':
+      case 'jsx':
+      case 'json':
+      case 'md':
+        return FILE_TYPE_MAP['text/plain'];
+    }
+  }
+
+  return DEFAULT_FILE_CONFIG;
+};
+
 const ChevronRightIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <path
@@ -53,6 +110,7 @@ const NavButton = ({
 }) => {
   return (
     <button
+      type="button"
       onClick={onClick}
       className={cn(
         'flex items-center justify-center',
@@ -171,36 +229,70 @@ export const AttachmentsPreviewer = ({
         className="flex overflow-x-auto scrollbar-hide py-[8px]"
         style={{ gap, height: imageSize + 16 }}
       >
-        {attachments.map((attachment, index) => (
-          <div
-            key={attachment.id}
-            className={cn('relative shrink-0 cursor-pointer group', transCls)}
-            style={{ width: imageSize, height: imageSize }}
-            onClick={() => onImageClick?.(attachment, index)}
-          >
-            <img
-              src={attachment.url}
-              alt={attachment.alt || `Attachment ${index + 1}`}
-              className="absolute inset-0 w-full h-full object-cover rounded-[10px]"
-            />
-            {onImageRemove && (
-              <button
-                className={cn(
-                  'absolute -top-[6px] -right-[6px]',
-                  'flex items-center justify-center',
-                  'opacity-0 group-hover:opacity-100 cursor-pointer',
-                  transCls
-                )}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onImageRemove(attachment, index);
-                }}
-              >
-                <RemoveCircleIcon />
-              </button>
-            )}
-          </div>
-        ))}
+        {attachments.map((attachment, index) => {
+          const isImage = isImageType(attachment.contentType);
+          const { icon: Icon, iconSize } = getFileConfig(attachment.contentType, attachment.alt);
+          const scaledIconSize = (52 / 102) * imageSize;
+          const iconScale = scaledIconSize / iconSize;
+
+          return (
+            <div
+              key={attachment.id}
+              className={cn('relative shrink-0 cursor-pointer group', transCls)}
+              style={{ width: imageSize, height: imageSize }}
+              onClick={() => onImageClick?.(attachment, index)}
+            >
+              {isImage && attachment.url ? (
+                <img
+                  src={attachment.url}
+                  alt={attachment.alt || `Attachment ${index + 1}`}
+                  className="absolute inset-0 h-full w-full rounded-[10px] object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-[10px] bg-[#EFF0F6]">
+                  <div
+                    className="shrink-0 flex items-center justify-center"
+                    style={{ width: scaledIconSize, height: scaledIconSize }}
+                  >
+                    <div
+                      style={{
+                        transform: iconScale !== 1 ? `scale(${iconScale})` : undefined,
+                        transformOrigin: 'center',
+                      }}
+                    >
+                      <Icon />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {attachment.isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center rounded-[10px] bg-black/50">
+                  <div className="inline-flex animate-spin items-center justify-center">
+                    <LoaderIcon size={16} />
+                  </div>
+                </div>
+              )}
+
+              {onImageRemove && !attachment.isLoading && (
+                <button
+                  className={cn(
+                    'absolute -top-[6px] -right-[6px]',
+                    'flex items-center justify-center',
+                    'opacity-0 group-hover:opacity-100 cursor-pointer',
+                    transCls
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onImageRemove(attachment, index);
+                  }}
+                >
+                  <RemoveCircleIcon />
+                </button>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       {/* Left navigation */}

package/src/components/bs-ui/bot-avatar-name.tsx

@@ -13,7 +13,7 @@ export const BotAvatarAndName = ({
 
   const variantStyles = {
     default: 'text-[#999] text-[14px] font-[400]',
-    active: 'text-[#0265FF] text-[14px] font-[500]',
+    active: 'text-[#0265FF] text-[14px] font-[700]',
   };
 
   return (

package/src/components/bs-ui/card.tsx

@@ -27,7 +27,7 @@ export const Card = ({ title, desc, index, icon, onClick }: CardProps) => {
         {index === undefined ? null : <div>{index}</div>}
         {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
         {/* make title text ellipsis */}
-        <div className="truncate text-[#12111] group-hover:text-[#0265FF]">{title}</div>
+        <div className="truncate !text-[#12111] group-hover:text-[#0265FF]">{title}</div>
       </div>
       <div className="text-[#666] leading-5 text-[12px]">{desc}</div>
     </div>

package/src/components/bs-ui/fields-previewer.tsx

@@ -73,6 +73,9 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
     confirmTitle,
     containerStyle,
     readonly,
+
+    closeBtnLabel,
+    disableOperation,
   }: FieldsPreviewerProps) => {
     const p = fullscreen ? 0 : padding;
     const pr = fullscreen ? 0 : rightSpaceWidth;
@@ -132,6 +135,8 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
           dialogContainer={shadowContainer || absContainer!}
           confirmTitle={confirmTitle}
           confirmContent={confirmContent}
+          closeBtnLabel={closeBtnLabel}
+          disableOperation={disableOperation}
         />
         <div className={contentCls} style={fullContentStyle}>
           {empty && isFields ? <PlaceholderDashedBox /> : children}

package/src/components/bs-ui/form-info-editor.tsx

@@ -168,7 +168,7 @@ export const FormInfoEditor = memo(
               setExpanded(true);
             }}
             className={cn(
-              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:opacity-70',
+              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
               transCls,
               {
                 'pointer-events-none opacity-0': readonly,
@@ -255,7 +255,7 @@ export const FormInfoEditor = memo(
                         setIsDropdownOpen(false);
                       }}
                       className={cn(
-                        'w-[40px] h-[40px] rounded-[9.5px] border flex items-center justify-center cursor-pointer',
+                        'aspect-square rounded-[9.5px] border flex items-center justify-center cursor-pointer overflow-hidden',
                         iconOpt?.id === option.id
                           ? 'border-[#0265ff] border-2'
                           : 'border-[#e0e0e0] hover:bg-[#eff0f6]',
@@ -264,7 +264,6 @@ export const FormInfoEditor = memo(
                       title={option.label}
                     >
                       <FormIcon
-                        size={40}
                         code={option.code}
                         style={{ background: 'transparent', color: '#0265ff' }}
                       />