@baishuyun/chat-sdk 0.0.17 → 0.0.18

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

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

@@ -6,13 +6,15 @@ export interface ImgMsgPartProps {
   className?: string;
   /** Size in pixels (width & height), defaults to 102 */
   size?: number;
+  onClick?: () => void;
 }
 
-export const ImgMsgPart = ({ url, alt = '', className, size = 102 }: ImgMsgPartProps) => {
+export const ImgMsgPart = ({ url, alt = '', className, size = 102, onClick }: ImgMsgPartProps) => {
   return (
     <div
-      className={cn('relative overflow-hidden rounded-[10px] border border-[#e0e0e0]', className)}
+      className={cn('relative overflow-hidden rounded-[10px] border border-[#e0e0e0] hover:border-[#0265FF]/20 hover:cursor-pointer', onClick && 'cursor-pointer', className)}
       style={{ width: size, height: size }}
+      onClick={onClick}
     >
       <img
         src={url}

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

@@ -5,6 +5,9 @@ import { BackIcon, InfoIcon } from './bs-icons';
 import { LinearGradientColorBgAnimation } from './linear-gradient-color-bg-animation';
 import { ConfirmDialog } from './confirm-dialog';
 import { Spinner } from '../ui/spinner';
+import { BaseButton } from './base-button';
+import { BrushIcon } from './bs-icons';
+import { cn } from '@/lib/utils';
 
 export interface PreviewerHeaderProps {
   title: string;
@@ -14,6 +17,7 @@ export interface PreviewerHeaderProps {
   onBackClick?: () => void;
   onSave?: (isConfirm?: boolean) => void;
   onCancel?: () => void;
+  onClear?: () => void;
   style?: React.CSSProperties;
 
   confirmTitle?: string;
@@ -25,6 +29,7 @@ export interface PreviewerHeaderProps {
   disableConfirm?: boolean;
 
   disableOperation?: boolean;
+
 }
 
 export const PreviewerHeader = ({
@@ -39,6 +44,7 @@ export const PreviewerHeader = ({
   onSave,
   closeBtnLabel,
   onCancel,
+  onClear,
   variant = 'fields-previewer',
   dialogContainer,
   disableConfirm,
@@ -67,9 +73,9 @@ export const PreviewerHeader = ({
           <IconBtn
             icon={<BackIcon />}
             onClick={() => {
-              if (disableOperation) {
-                return;
-              }
+              // if (disableOperation) {
+              //   return;
+              // }
 
               if (disableConfirm) {
                 onCancel?.();
@@ -91,6 +97,19 @@ export const PreviewerHeader = ({
         )}
       </div>
       <div className="flex items-center gap-[10px]">
+        {onClear && (
+          <BaseButton
+            className={cn('w-[34px] h-[34px] text-[#8d8d8d] p-0 flex items-center justify-center hover:border-[#e0e0e0] hover:text-[#8d8d8d] border border-solid border-[#e0e0e0] ', {
+                'pointer-events-none opacity-50': disableOperation || loading,
+            })}
+            tooltip='清除全部'
+            icon={<BrushIcon />}
+            onClick={() => {
+              onClear?.();
+            }}
+          />
+        )}
+
         {onSave && (
           <button
             onClick={async () => {
@@ -120,9 +139,9 @@ export const PreviewerHeader = ({
         {onCancel && (
           <button
             onClick={() => {
-              if (disableOperation) {
-                return;
-              }
+              // if (disableOperation) {
+              //   return;
+              // }
 
               if (disableConfirm) {
                 onCancel?.();
@@ -136,7 +155,7 @@ export const PreviewerHeader = ({
               btnResetStyle,
               'text-[#121111] text-[14px] bg-[#fff] border border-solid border-[#e0e0e0] hover:bg-[#f0f0f0]',
               {
-                'pointer-events-none opacity-50': disableOperation || loading,
+                'pointer-events-none opacity-50': loading,
               }
             )}
           >

package/src/components/bs-ui/primary-entry-btn.tsx

@@ -6,7 +6,7 @@ import { transCls } from '@/const/ui';
 
 export interface PrimaryEntryBtnProps extends ButtonProps {
   minimal?: boolean;
-  entryVariant?: 'default' | 'ghost' | 'selected';
+  entryVariant?: 'default' | 'ghost' | 'selected' | 'light';
   icon?: ReactNode;
 }
 
@@ -23,6 +23,7 @@ export const PrimaryEntryBtn = ({
     default:
       "relative overflow-hidden bg-[linear-gradient(180deg,#DBE9FF_0%,#E9FFFD_100%)] h-[30px] hover:text-white before:content-[''] before:absolute before:inset-0 before:z-0 before:bg-[linear-gradient(180deg,#267AFF_0%,#B2EEFF_100%)] before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200 before:ease-out font-[500] text-[#0265ff]",
     ghost: 'bg-transparent text-[#030303] font-[400] px-[10px] hover:bg-[#EFF0F6] h-[34px]',
+    light: 'text-[#030303] font-[400] px-[10px] bg-[#F0F6FF] hover:bg-[#d8dde5] h-[34px]',
     selected: 'bg-[#EFF0F6] text-[#030303] font-[400] px-[10px]',
   };
 

package/src/index.tsx

@@ -1,7 +1,6 @@
 export { ChatSDK } from './sdk.impl';
 
 export * from './plugins/form-builder-plugin';
-export * from './plugins/general-model-form-builder-plugin';
 export * from './plugins/form-filling-plugin';
 export * from './plugins/report-query-plugin';
 

package/src/lib/utils.ts

@@ -2,7 +2,7 @@ import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { UIDataTypes, UIMessagePart, UITools } from 'ai';
 import { Field } from '@/plugins/form-builder-base-plugin/types';
-import { IQueryResult } from '@baishuyun/types';
+import { IFilledField, IQueryResult } from '@baishuyun/types';
 import { FORM_ICON_OPTIONS } from '@/const/ui';
 
 export function cn(...inputs: ClassValue[]) {
@@ -117,7 +117,7 @@ export const GetPartErrMsg = (part: any): string => {
   return payload?.error || '未知错误';
 };
 
-export const GetFieldJsonInfo = (part: any): any => {
+export const GetFieldJsonInfo = (part: any): IFilledField | null => {
   const payload = extractTextPartMeta(part);
   if (payload?.type !== 'mcp-fields-json') {
     return null;
@@ -326,3 +326,61 @@ export const getIconOption = (iconValue?: number) => {
 
   return option || options[8];
 };
+
+export const ensureEndSlash = (url: string): string => {
+  if (!url) {
+    return '';
+  }
+
+  return url.endsWith('/') ? url : `${url}/`;
+};
+
+export const generatePhoneFromTimestamp = (): string => {
+  const timestamp = Date.now().toString();
+  // 第二位取 3-9 的随机数，避免过于规律
+  const secondDigit = 3 + Math.floor(Math.random() * 7);
+  // 取时间戳后9位，如果不足则前面补零
+  const suffix = timestamp.slice(-9).padStart(9, '0');
+  return `1${secondDigit}${suffix}`;
+};
+
+export const shortTimeHash = (length = 4) => {
+  const time = Date.now().toString(36); // 时间转36进制
+  const random = Math.random().toString(36).slice(2, 4); // 防碰撞
+  const combined = time + random;
+
+  // 进一步混淆
+  let hash = '';
+  for (let i = 0; i < combined.length && hash.length < length; i++) {
+    hash += combined.charCodeAt(i).toString(36);
+  }
+
+  return hash.slice(0, length);
+};
+
+export const generateUniqueValue = (numOnly?: boolean) => {
+  if (numOnly) {
+    return generatePhoneFromTimestamp();
+  }
+
+  return shortTimeHash(4);
+};
+
+/**
+ * Convert an image URL to a base64 data URL via canvas.
+ * Returns the original URL on failure (e.g. CORS).
+ */
+export const imageUrlToBase64 = (url: string, mediaType = 'image/png'): Promise<string> =>
+  new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      canvas.getContext('2d')!.drawImage(img, 0, 0);
+      resolve(canvas.toDataURL(mediaType));
+    };
+    img.onerror = () => resolve(url);
+    img.src = url;
+  });

package/src/plugins/form-builder-plugin/components/create-form-confirm.tsx

@@ -65,8 +65,6 @@ export const CreateFormConfirm = memo(
       <GenerateAnimation>创建中</GenerateAnimation>
     );
 
-    console.log('current working form', plugin?.getCurrentWorkingForm());
-
     const afterConfirm = (
       <FakeBotMessage>
         {success ? (

package/src/plugins/form-builder-plugin/components/design-doc-part.tsx

@@ -0,0 +1,19 @@
+import { MsgPartCompProps } from '@baishuyun/types';
+import { IExtraPartProps } from '../types';
+import { DesignInfo } from './design-info';
+import { CreateFormConfirm } from './create-form-confirm';
+
+export const DesignDocPart: React.FC<MsgPartCompProps & IExtraPartProps> = (props) => {
+  const { part, sendMessage } = props;
+  const appendConfirmBtn =
+    // TODO: 特殊文本解析在 node 端处理，前端只负责渲染
+    part.text?.includes('【确认搭建');
+
+  return (
+    <DesignInfo designMarkdown={part.text} id={props.id}>
+      {appendConfirmBtn ? (
+        <CreateFormConfirm sendMessage={sendMessage} designDoc={part.text} />
+      ) : null}
+    </DesignInfo>
+  );
+};

package/src/plugins/form-builder-plugin/components/fields-part.tsx

@@ -0,0 +1,78 @@
+import { MessageContent } from '@/components/biz-comp/message-content';
+import { MsgPartCompProps, RealFormInfo } from '@baishuyun/types';
+import { useBuildFieldsData } from '../hooks';
+import { IExtraPartProps } from '../types';
+import { useRef } from 'react';
+import {
+  FieldCheckerListMsg,
+  FieldCheckerListMsgRef,
+} from '@/components/biz-comp/FieldCheckerListMsg';
+import { TextUIPart } from 'ai';
+import { FormBuilderPlugin } from '..';
+import { MCP_PLUGIN_NAME } from '../const';
+import { usePlugin } from '@/hooks/use-plugin';
+import { PrimaryConfirmBtn } from '@/components/bs-ui/primary-confirm-btn';
+import { CheckerIcon } from '@/components/bs-ui/bs-icons';
+import { useEvtBus } from '@/hooks/use-evt-bus';
+
+export const FieldsPart: React.FC<MsgPartCompProps & IExtraPartProps> = (props) => {
+  const { confirmed: fieldsConfirmed, part, status } = props;
+  const p = part as TextUIPart;
+  const fieldPropsArray = useBuildFieldsData(p, !!fieldsConfirmed);
+  const checkerRef = useRef<FieldCheckerListMsgRef>(null);
+  const plugin = usePlugin<FormBuilderPlugin>(MCP_PLUGIN_NAME);
+  const formName = plugin?.getCurrentWorkingForm()?.formName || '';
+  const evtBus = useEvtBus();
+
+  const fieldsPrefix = (
+    <div>
+      <b style={{ display: 'inline-block' }}>{formName}</b>
+      {` 已生成${fieldPropsArray.length}个字段`}
+    </div>
+  );
+
+  const confirmedLabel = fieldsConfirmed ? (
+    <>
+      <CheckerIcon className="text-[#0265ff]" /> 已保存{' '}
+      {checkerRef.current?.getCheckedFieldsLength() ?? 0} 个字段
+    </>
+  ) : (
+    '保存字段'
+  );
+
+  const fieldsSuffix =
+    status === 'ready'
+      ? '请选择需要的字段添加到表单。您可以补充描述后重新生成，表单中已添加字段在下次生成时保留。'
+      : null;
+
+  return (
+    <MessageContent className="gap-0 py-0" compact>
+      {fieldsPrefix}
+      <FieldCheckerListMsg
+        ref={checkerRef}
+        fields={fieldPropsArray}
+        streaming={status === 'streaming'}
+        confirmed={fieldsConfirmed}
+      >
+        {status === 'ready' ? (
+          <PrimaryConfirmBtn
+            className="mt-[20px] mb-[10px]"
+            disabledWithInfo={fieldsConfirmed}
+            onClick={() => {
+              evtBus.emit(
+                'form-builder-FieldsConfirmed',
+                plugin?.getCurrentWorkingForm() as RealFormInfo
+              );
+              plugin.onAfterFieldsSave((processedInfo) => {
+                evtBus.emit('form-builder-FieldsConfirmed', processedInfo as RealFormInfo);
+              });
+            }}
+          >
+            {confirmedLabel}
+          </PrimaryConfirmBtn>
+        ) : null}
+      </FieldCheckerListMsg>
+      {fieldsSuffix}
+    </MessageContent>
+  );
+};