@baishuyun/chat-sdk 0.0.17 → 0.1.0

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

@@ -46,7 +46,7 @@ const ChatSlot = ({ client }: { client?: ChatSDK }) => {
   const avatarJsx = Avatar ? (
     <Avatar variant="active" />
   ) : (
-    <BotAvatarAndName name={'AI表单搭建'} variant="active" />
+    <BotAvatarAndName name={client?.options?.botInfo?.name || 'AI表单搭建'} variant="active" />
   );
 
   const modeStyle = isFloat
@@ -107,7 +107,7 @@ const ChatContent: React.FC<{ client?: ChatSDK }> = ({ client }): ReactPortal |
 };
 
 export const ChatEntryBtn = ({ client }: { client: ChatSDK }) => {
-  const { bottom = 10, right = 10 } = client?.options?.btnOffset || {};
+  const { bottom = 15, right = 40 } = client?.options?.btnOffset || {};
 
   const { entryVisible, status, entryWrapper, setStatus, isVisible, entryVariant } = useChatStore(
     (store) => ({

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

@@ -101,6 +101,7 @@ function PureMultimodalInput({
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploadQueue, setUploadQueue] = useState<string[]>([]);
+  const uploadAbortControllers = useRef<Map<string, AbortController>>(new Map());
 
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
   const { exec: onAfterSendMsg } = usePluginLifeCycleChainRunner('onAfterMessageSend');
@@ -153,7 +154,7 @@ function PureMultimodalInput({
 
   const toast = useToast();
 
-  const uploadFile = useCallback(async (file: File) => {
+  const uploadFile = useCallback(async (file: File, signal?: AbortSignal) => {
     const formData = new FormData();
     formData.append('file', file);
 
@@ -161,6 +162,7 @@ function PureMultimodalInput({
       const response = await fetch(fileUploadEndpoint, {
         method: 'POST',
         body: formData,
+        signal,
       });
 
       if (response.ok) {
@@ -182,7 +184,7 @@ function PureMultimodalInput({
         return;
       }
 
-      if (attachments.length + files.length >= maxCount) {
+      if (attachments.length + files.length > maxCount) {
         toast({
           type: 'error',
           msg: `最多只能上传${maxCount}个附件`,
@@ -203,7 +205,11 @@ function PureMultimodalInput({
       setUploadQueue(files.map((file) => file.name));
 
       try {
-        const uploadPromises = files.map((file) => uploadFile(file));
+        const uploadPromises = files.map((file) => {
+          const controller = new AbortController();
+          uploadAbortControllers.current.set(file.name, controller);
+          return uploadFile(file, controller.signal);
+        });
         const uploadedAttachments = await Promise.all(uploadPromises);
         const successfullyUploadedAttachments = uploadedAttachments.filter(
           (attachment) => attachment !== undefined
@@ -219,6 +225,7 @@ function PureMultimodalInput({
         console.error('Error uploading files!', error);
       } finally {
         setUploadQueue([]);
+        uploadAbortControllers.current.clear();
       }
     },
     [setAttachments, uploadFile, attachments]
@@ -296,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) && (
@@ -320,8 +329,18 @@ function PureMultimodalInput({
                 isLoading: true,
               })),
             ]}
+            imageSize={52}
             onImageRemove={(item) => {
-              if (item.id.startsWith('uploading-')) return;
+              if (item.id.startsWith('uploading-')) {
+                const filename = item.alt || '';
+                const controller = uploadAbortControllers.current.get(filename);
+                if (controller) {
+                  controller.abort();
+                  uploadAbortControllers.current.delete(filename);
+                }
+                setUploadQueue((cur) => cur.filter((f) => f !== filename));
+                return;
+              }
               setAttachments((cur) => cur.filter((a) => a.url !== item.id));
               if (fileInputRef.current) {
                 fileInputRef.current.value = '';
@@ -354,7 +373,7 @@ function PureMultimodalInput({
               <PromptInputSubmit
                 className="cursor-pointer rounded-full bg-[#0265FF] text-primary-foreground transition-colors duration-200 hover:bg-[#0265FF]/90 disabled:bg-[#E5E6EB] disabled:text-white h-[26px] w-[26px] disabled:opacity-100"
                 data-testid="send-button"
-                disabled={!input.trim() || uploadQueue.length > 0}
+                disabled={(!input.trim() && attachments.length <= 0) || uploadQueue.length > 0}
                 status={status}
               >
                 <PlaneIcon />

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

@@ -14,14 +14,19 @@ import {
   IsFilePart,
   IsLoadingPart,
   mergeFileParts,
+  imageUrlToBase64,
+  IsFakeMsgPart,
+  getMetaErrorMsg,
 } from '@/lib/utils';
 import { FakeBotMessage } from './FakeBotMsg';
 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, useFakeGlobalLoadingMessage } from '@/hooks/use-frame-mode';
+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,
@@ -49,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');
@@ -72,6 +79,26 @@ const PurePreviewMessage = ({
 
   const evtBus = useEvtBus();
 
+  const handleAttachmentClick = async (part: FilePart) => {
+    const isImage = part.mediaType?.startsWith('image/');
+    const resolvedUrl = isImage
+      ? await imageUrlToBase64(part.url, part.mediaType)
+      : part.url;
+
+    evtBus.emit('send-attachment-info', {
+      widgetType: isImage ? 'image' : 'file',
+      title: part.name,
+      files: [{
+        imageUrl: isImage ? resolvedUrl : undefined,
+        // url: resolvedUrl,
+        // name: part.name,
+        // mediaType: part.mediaType,
+      }],
+      currentItem: 0,
+      autoClose: false,
+    });
+  };
+
   const { exec: onBeforeSendMsg } = usePluginLifeCycleChainRunner('onBeforeMessageSend');
   const { exec: onAfterSendMsg } = usePluginLifeCycleChainRunner('onAfterMessageSend');
 
@@ -119,11 +146,11 @@ const PurePreviewMessage = ({
         const key = `message-${message.id}-part-${index}-${Array.isArray(part) ? 'file-group' : part.type}`;
 
         if (IsFilePart(part)) {
-          return <AttachmentPart key={key} part={part as FileUIPart} iconOnly />;
+          return <AttachmentPart key={key} part={part as FileUIPart} iconOnly onClick={handleAttachmentClick} />;
         }
 
         if (IsFileGroupPart(part)) {
-          return <AttachmentPartGroup key={key} parts={part as FileUIPart[]} iconOnly />;
+          return <AttachmentPartGroup key={key} parts={part as FileUIPart[]} iconOnly onPartClick={handleAttachmentClick} />;
         }
 
         if (IsErrorPart(part)) {
@@ -131,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>
@@ -142,6 +178,7 @@ const PurePreviewMessage = ({
         return (
           <ErrorBoundary>
             <MsgPartCom
+              title={botInfo?.name}
               setMessages={setMessages}
               sendMessage={sendMessage}
               addToolOutput={addToolOutput}

package/src/components/bs-ui/attachment-part-group.tsx

@@ -11,21 +11,24 @@ export interface AttachmentPartGroupProps {
   gap?: number;
   /** Show only icons without file names */
   iconOnly?: boolean;
+  /** Click handler for individual parts */
+  onPartClick?: (part: FilePart) => void;
 }
 
 export const AttachmentPartGroup = ({
   parts,
   className,
-  size = 102,
+  size = 100,
   gap = 10,
   iconOnly,
+  onPartClick,
 }: AttachmentPartGroupProps) => {
   if (!parts.length) return null;
 
   return (
     <div className={cn('flex flex-wrap content-center items-center', className)} style={{ gap }}>
       {parts.map((part, index) => (
-        <AttachmentPart key={part.url || index} part={part} size={size} iconOnly={iconOnly} />
+        <AttachmentPart key={part.url || index} part={part} size={size} iconOnly={iconOnly} onClick={onPartClick} />
       ))}
     </div>
   );

package/src/components/bs-ui/attachment-part.tsx

@@ -18,6 +18,8 @@ export interface AttachmentPartProps {
   size?: number;
   /** Show only the icon without file name */
   iconOnly?: boolean;
+  /** Click handler for the attachment */
+  onClick?: (part: FilePart) => void;
 }
 
 type FileIconComponent = ComponentType;
@@ -150,12 +152,13 @@ const FileMsgPart = ({
   );
 };
 
-export const AttachmentPart = ({ part, className, size = 102, iconOnly }: AttachmentPartProps) => {
+export const AttachmentPart = ({ part, className, size = 102, iconOnly, onClick }: AttachmentPartProps) => {
   const { url, name, mediaType } = part;
+  const handleClick = onClick ? () => onClick(part) : undefined;
 
   // Render image for image types
   if (isImageType(mediaType)) {
-    return <ImgMsgPart url={url} alt={name} className={className} size={size} />;
+    return <ImgMsgPart url={url} alt={name} className={className} size={size} onClick={handleClick} />;
   }
 
   // Render file icon for other types
@@ -163,12 +166,14 @@ export const AttachmentPart = ({ part, className, size = 102, iconOnly }: Attach
   const displayName = iconOnly ? undefined : getDisplayFileName(name);
 
   return (
-    <FileMsgPart
-      fileName={displayName}
-      icon={icon}
-      iconSize={iconSize}
-      className={className}
-      size={size}
-    />
+    <div onClick={handleClick} className={onClick ? 'cursor-pointer' : undefined}>
+      <FileMsgPart
+        fileName={displayName}
+        icon={icon}
+        iconSize={iconSize}
+        className={className}
+        size={size}
+      />
+    </div>
   );
 };

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

@@ -270,14 +270,14 @@ export const AttachmentsPreviewer = ({
               )}
 
               {attachment.isLoading && (
-                <div className="absolute inset-0 flex items-center justify-center rounded-[10px] bg-black/50">
+                <div className="absolute inset-0 flex items-center justify-center rounded-[10px] bg-black/50 pointer-events-none">
                   <div className="inline-flex animate-spin items-center justify-center">
                     <LoaderIcon size={16} />
                   </div>
                 </div>
               )}
 
-              {onImageRemove && !attachment.isLoading && (
+              {onImageRemove /* && !attachment.isLoading*/ && (
                 <button
                   className={cn(
                     'absolute -top-[6px] -right-[6px]',

package/src/components/bs-ui/base-button.tsx

@@ -2,21 +2,23 @@ import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 import { transCls } from '@/const/ui';
+import { BsTooltip } from './tooltip';
 
 export interface BaseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ReactNode;
+  tooltip?: string;
   hoverTextCls?: string;
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
-  ({ className, children, hoverTextCls, icon, type, ...rest }, ref) => {
-    return (
+  ({ className, children, hoverTextCls, tooltip, icon, type, ...rest }, ref) => {
+    const btn = (
       <button
         ref={ref}
         type={type ?? 'button'}
         className={cn(
           'group inline-flex items-center gap-[6px] px-[16px] rounded-[4px] h-[34px]',
-          'border border-[#E0E0E0] bg-transparent',
+          'border border-solid border-[#E0E0E0] bg-transparent',
           'text-[14px] font-[400] leading-[normal] text-[#030303]',
           'hover:bg-[#EFF0F6] hover:border-transparent',
           'cursor-pointer',
@@ -30,9 +32,17 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         {...rest}
       >
         {icon ? <span className="shrink-0">{icon}</span> : null}
-        <span className="whitespace-nowrap">{children}</span>
+        {children ? (
+          <span className="whitespace-nowrap">{children}</span>
+        ) : null}
       </button>
     );
+
+    if (tooltip) {
+      return <BsTooltip content={tooltip}>{btn}</BsTooltip>;
+    }
+
+    return btn;
   }
 );
 

package/src/components/bs-ui/border-animation.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface BorderAnimationProps {
+  children?: React.ReactNode;
+  className?: string;
+  /** Duration of one full animation cycle in seconds @default 2 */
+  duration?: number;
+  /** Border radius in pixels @default 4 */
+  borderRadius?: number;
+  /** Width of the animated beam in pixels @default 30 */
+  beamWidth?: number;
+  /** Height of the animated beam in pixels @default 4 */
+  beamHeight?: number;
+  /** Gradient for the animated beam */
+  gradient?: string;
+  height?: string | number;
+  /** Border width in pixels @default 1.5 */
+  borderWidth?: number;
+  /** Default border color @default '#E5E5E5' */
+  borderColor?: string;
+}
+
+const defaultGradient = `linear-gradient(90deg, 
+  rgba(132, 180, 255, 0) 0%, 
+  rgba(132, 180, 255, 0.5) 10%, 
+  rgba(132, 180, 255, 1) 25%, 
+  rgb(2, 101, 255) 50%, 
+  rgba(177, 250, 255, 1) 75%, 
+  rgba(177, 250, 255, 0.5) 90%, 
+  rgba(177, 250, 255, 0) 100%
+)`;
+
+export const BorderAnimation: React.FC<BorderAnimationProps> = ({
+  children,
+  className,
+  duration = 2,
+  borderRadius = 4,
+  beamWidth = 170,
+  beamHeight = 4,
+//   gradient = 'linear-gradient(180deg, #84B4FF 0%, #0265FF 50%, #B1FAFF 100%)',
+//   gradient = 'linear-gradient(90deg, rgb(132, 180, 255) 0%, rgb(2, 101, 255) 50%, rgb(177, 250, 255) 100%)',
+  gradient = defaultGradient,
+  borderWidth = 1,
+  height,
+  borderColor = 'transparent',
+}) => {
+    const pseudoCls = "gradient-border"
+  return (
+    <div
+      className={cn('relative w-full overflow-hidden', className, pseudoCls)}
+      style={{
+        borderRadius: `${borderRadius}px`,
+        border: `${borderWidth}px solid ${borderColor}`,
+        ...(height ? { height } : {}),
+      }}
+    >
+      {children}
+      {/* Animated border overlay */}
+      <div
+        style={{
+          position: 'absolute',
+        //   inset: `${-borderWidth}px`,
+          inset: 0,
+          pointerEvents: 'none',
+          border: `${borderWidth}px solid transparent`,
+          borderRadius: 'inherit',
+        //   contain: 'layout style paint',
+          maskImage:
+            'linear-gradient(transparent, transparent), linear-gradient(white, white)',
+          WebkitMaskImage:
+            'linear-gradient(transparent, transparent), linear-gradient(white, white)',
+          maskOrigin: 'border-box, border-box',
+          WebkitMaskOrigin: 'border-box, border-box',
+          maskClip: 'padding-box, border-box',
+          WebkitMaskClip: 'padding-box, border-box',
+          maskComposite: 'intersect',
+          WebkitMaskComposite: 'source-in',
+        }}
+      >
+        {/* Traveling beam */}
+        <div
+          style={{
+            position: 'absolute',
+            aspectRatio: '1 / 1',
+            width: `${beamWidth}px`,
+            height: `${beamHeight}px`,
+            background: gradient,
+            offsetPath: `rect(0px auto auto 0px round ${borderRadius}px)`,
+            animation: `bs-border-travel ${duration}s linear infinite`,
+            willChange: 'offset-distance',
+            transform: 'translateZ(0)',
+            backfaceVisibility: 'hidden',
+          }}
+        />
+      </div>
+      <style>{`
+        @keyframes bs-border-travel {
+          0% { offset-distance: 0%; }
+          100% { offset-distance: 100%; }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default BorderAnimation;

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

@@ -1094,3 +1094,9 @@ export const DataReportIcon = () => (
     />
   </svg>
 );
+
+export const BrushIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="currentColor">
+    <path d="M14.72 2.64C14.72 2.16 14.56 1.76 14.24 1.44L13.28 0.48C12.64 -0.16 11.6 -0.16 10.96 0.48L8.8 2.64L7.04 0.96C6.4 0.32 5.36 0.32 4.72 0.96L3.12 2.56L0.48 5.28C0.16 5.6 0 6 0 6.4C0 6.8 0.16 7.28 0.48 7.6L2 9.12L7.12 14.24C7.44 14.56 7.84 14.72 8.24 14.72H8.32C8.72 14.72 9.2 14.56 9.52 14.24L12.08 11.68C12.08 11.68 12.16 11.68 12.16 11.6C12.16 11.6 12.16 11.52 12.24 11.52L13.76 10C14.08 9.68 14.24 9.28 14.24 8.8C14.24 8.32 14.08 7.92 13.76 7.6L12.08 5.92L14.24 3.76C14.48 3.44 14.72 3.04 14.72 2.64ZM8.64 13.44C8.56 13.52 8.4 13.6 8.24 13.6H8.16C8 13.6 7.92 13.52 7.76 13.44L6.8 12.48L7.6 11.68C7.84 11.44 7.84 11.12 7.6 10.88C7.36 10.64 7.04 10.64 6.8 10.88L6 11.68L4.96 10.64L6.24 9.36C6.48 9.12 6.48 8.8 6.24 8.56C6 8.32 5.68 8.32 5.44 8.56L4.16 9.84L2.96 8.64L3.6 8C3.84 7.76 3.84 7.44 3.6 7.2C3.36 6.96 3.04 6.96 2.8 7.2L2.16 7.84L1.2 6.8C1.12 6.72 1.12 6.56 1.12 6.4C1.12 6.24 1.2 6.16 1.28 6L3.52 3.76L10.96 11.2L8.64 13.44ZM13.44 2.96L10.88 5.52C10.64 5.76 10.64 6.08 10.88 6.32L12.96 8.4C13.04 8.48 13.12 8.64 13.12 8.8C13.12 8.96 13.04 9.04 12.96 9.2L11.68 10.4L4.32 2.96L5.52 1.76C5.68 1.6 6.08 1.6 6.24 1.76L8.32 3.84C8.56 4.08 8.88 4.08 9.12 3.84L11.68 1.28C11.84 1.12 12.24 1.12 12.4 1.28L13.36 2.24C13.44 2.32 13.52 2.48 13.52 2.64C13.52 2.8 13.52 2.88 13.44 2.96Z"/>
+  </svg>
+)

package/src/components/bs-ui/confirm-dialog.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/dialog';
 import { QuestionIcon } from './bs-icons';
 import { cn } from '@/lib/utils';
+import { BaseButton } from './base-button';
 
 export interface ConfirmDialogProps {
   open?: boolean;
@@ -84,7 +85,6 @@ export function ConfirmDialog({
           {showLink ? (
             <button
               type="button"
-              onClick={onLinkClick}
               className="text-[14px] text-[#0265ff] hover:text-[#0265ff]/80 bg-transparent border-none cursor-pointer"
             >
               {linkText}
@@ -95,25 +95,31 @@ export function ConfirmDialog({
 
           <div className="flex items-center gap-3">
             {showCancel && (
-              <button
-                type="button"
+              <BaseButton
+                className="hover:text-[#121111]"
                 onClick={onCancel}
-                style={btnStyle}
-                className={cn(
-                  'h-8 px-5 py-1.5 rounded border border-[#e0e0e0]',
-                  'text-[14px] text-[#030303] bg-white',
-                  'hover:bg-gray-50 cursor-pointer'
-                )}
               >
                 {cancelText}
-              </button>
+              </BaseButton>
+              // <button
+              //   type="button"
+              //   onClick={onCancel}
+              //   style={btnStyle}
+              //   className={cn(
+              //     'h-8 px-5 py-1.5 rounded border border-[#e0e0e0]',
+              //     'text-[14px] text-[#030303] bg-white',
+              //     'hover:bg-gray-50 cursor-pointer'
+              //   )}
+              // >
+              //   {cancelText}
+              // </button>
             )}
             <button
               type="button"
               onClick={onConfirm}
               style={btnStyle}
               className={cn(
-                'h-8 px-5 py-1.5 rounded',
+                // 'h-8 px-5 py-1.5 rounded',
                 'text-[14px] text-white bg-[#0265ff]',
                 'hover:bg-[#0265ff]/80 cursor-pointer border-none'
               )}

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

@@ -5,6 +5,7 @@ import { BorderColorAnimation } from './border-color-animation';
 import { FieldsGeneratingIndicator } from './fields-generating-indicator';
 import { PreviewerHeader, PreviewerHeaderProps } from './previewer-header';
 import { useShadow } from '@/hooks/use-shadow';
+import { TooltipProvider } from '../ui/tooltip';
 
 export interface FieldsPreviewerProps extends PreviewerHeaderProps {
   fullscreen?: boolean;
@@ -67,6 +68,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
     variant = 'fields-previewer',
     onSave,
     onCancel,
+    onClear,
     style,
     confirmContent,
     fullContent,
@@ -139,6 +141,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
           closeBtnLabel={closeBtnLabel}
           disableOperation={disableOperation}
           disableConfirm={disableConfirm}
+          onClear={onClear}
         />
         <div className={contentCls} style={fullContentStyle}>
           {empty && isFields ? <PlaceholderDashedBox /> : children}
@@ -187,16 +190,21 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
     );
 
     return (
-      <AbsFullscreenGradientBg
+      <TooltipProvider
+        delayDuration={100}
         zIndex={zIndex}
-        padding={isFields ? p : 0}
-        disableGradient={fullscreen || !isFields}
-        bgColor={isFields ? '#fff' : '#F5F7FA'}
-        ref={setAbsContainer}
       >
-        {fullscreen ? contentJsx : content}
-        {rightArea}
-      </AbsFullscreenGradientBg>
+        <AbsFullscreenGradientBg
+          zIndex={zIndex}
+          padding={isFields ? p : 0}
+          disableGradient={fullscreen || !isFields}
+          bgColor={isFields ? '#fff' : '#F5F7FA'}
+          ref={setAbsContainer}
+        >
+          {fullscreen ? contentJsx : content}
+          {rightArea}
+        </AbsFullscreenGradientBg>
+      </TooltipProvider>
     );
   }
 );