@baishuyun/ai-design 2.0.52 → 2.0.54

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @baishuyun/ai-design
 
+## 2.0.54
+
+### Patch Changes
+
+- bugfix
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.49
+  - @baishuyun/types@3.0.45
+
+## 2.0.53
+
+### Patch Changes
+
+- fix mobile style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.48
+  - @baishuyun/types@3.0.44
+
 ## 2.0.52
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.52",
+  "version": "2.0.54",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.47",
-    "@baishuyun/types": "3.0.43"
+    "@baishuyun/ai-feat-utils": "2.0.49",
+    "@baishuyun/types": "3.0.45"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.43",
+    "@baishuyun/types": "3.0.45",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],
@@ -93,6 +93,7 @@
   "scripts": {
     "build": "vite build && tailwindcss -i src/style.css -o dist/tailwind.css && node scripts/post-build.cjs",
     "dev": "vite build --watch",
+    "dev:build": "vite build --emptyOutDir false",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build"
   }

package/src/components/bs-icons.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 // import { FontIcon } from './font-icon';
 
 export const DockIcon = () => (
@@ -345,6 +347,33 @@ export const MagicIcon = () => (
   </svg>
 );
 
+export const LightMagicIcon = () => {
+  const gradientId = useId();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill={`url(#${gradientId})`}
+      aria-hidden="true"
+    >
+      <path d="M3.84977 8.21777L2.78422 8.53223L1.71875 8.21777L2.03313 9.29512L1.71875 10.3725L2.7843 10.0546L3.84977 10.3725L3.53875 9.29512L3.84977 8.21777Z" />
+      <path d="M10.7931 4.81571L10.3248 4.41969L9.71924 4.3418L10.1109 3.86837L10.188 3.25602L10.6562 3.65212L11.2618 3.72993L10.8701 4.20337L10.7931 4.81571Z" />
+      <path d="M7.54602 5.06195L6.54219 4.21313L5.24414 4.04617L6.08375 3.03125L6.24891 1.71875L7.25266 2.56766L8.55063 2.73461L7.71117 3.74945L7.54602 5.06195Z" />
+      <path d="M15.6525 14.4317C15.5819 14.3576 15.4972 14.2983 15.4035 14.2573C15.3097 14.2162 15.2087 14.1942 15.1064 14.1926C15.0041 14.191 14.9024 14.2097 14.8074 14.2477C14.7124 14.2857 14.6259 14.3423 14.5529 14.4141C14.2445 14.7162 14.2367 15.2139 14.5355 15.5258L16.946 18.0416C17.0166 18.1157 17.1012 18.175 17.195 18.2161C17.2887 18.2571 17.3897 18.2791 17.4921 18.2807C17.5944 18.2824 17.696 18.2637 17.791 18.2256C17.8861 18.1876 17.9726 18.1311 18.0455 18.0593C18.354 17.7572 18.3618 17.2594 18.063 16.9476L15.6525 14.4317Z" />
+      <path d="M12.6321 4.68029C13.3036 4.3106 14.1329 4.73779 14.232 5.50435L14.5525 7.98349C14.6017 8.36714 14.7806 8.72257 15.0596 8.99044L16.8545 10.7087C17.4097 11.2403 17.2642 12.1698 16.5737 12.5019L14.3408 13.5761C13.9937 13.7439 13.7147 14.0262 13.5511 14.3753L12.4883 16.6329C12.1598 17.3308 11.2408 17.478 10.7151 16.9168L9.01464 15.1018C8.75218 14.821 8.40056 14.6398 8.01956 14.589L5.56769 14.2649C4.80956 14.1647 4.38706 13.3262 4.75261 12.6472L5.93456 10.4518C6.11827 10.1104 6.18011 9.71661 6.10988 9.33537L5.6566 6.8781C5.51636 6.11794 6.17457 5.45248 6.92636 5.59427L9.35636 6.05248C9.73363 6.12349 10.1238 6.06091 10.4607 5.87521L12.6321 4.68029Z" />
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor="white" />
+          <stop offset="1" stopColor="#A6FFFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
 export const ChevronIcon = ({ isOpen }: { isOpen?: boolean }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -954,11 +983,11 @@ export const SearchIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
-export const EditIcon = () => (
+export const EditIcon = ({ size = 16}: { size?: number }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
+    width={size}
+    height={size}
     viewBox="0 0 16 16"
     fill="currentColor"
   >
@@ -1340,11 +1369,11 @@ export const FormulasIcon = () => (
   </svg>
 );
 
-export const ScrollArrowDownIcon = () => (
+export const ScrollArrowDownIcon = ({ size = 24 }: { size?: number }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
+    width={size}
+    height={size}
     viewBox="0 0 24 24"
     fill="currentColor"
   >

package/src/components/collapsible-txt-msg.tsx

@@ -31,6 +31,7 @@ export const CollapsibleTxtMsg = ({
 }: CollapsibleTxtMsgProps) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const sizeCls = isMobile ? 'text-[16px]' : 'text-[14px]';
+  const iconSizeCls = 'w-[16px] h-[16px]';
 
   const cls = classNames({
     'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost
@@ -53,7 +54,7 @@ export const CollapsibleTxtMsg = ({
         }}
       >
         <div className="flex gap-2.5 items-center">
-          <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
+          <div className={classNames("shrink-0 flex items-center", iconSizeCls)}>{icon || <AnalysisIcon />}</div>
           <p className={`text-[#666] ${sizeCls} leading-normal`}>{t}</p>
         </div>
         <button

package/src/components/fake-bot-msg.tsx

@@ -6,7 +6,7 @@ export const FakeBotMessage = ({
   children,
   className,
   avatarJsx,
-  isMobile
+  isMobile,
 }: {
   children: ReactNode;
   offset?: boolean;
@@ -22,6 +22,7 @@ export const FakeBotMessage = ({
           isMobile={isMobile}
           className={cn(
             'wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left w-full',
+            isMobile && 'gap-[10px]',
             className
           )}
           data-testid="message-content"
@@ -32,19 +33,26 @@ export const FakeBotMessage = ({
     );
   }
 
-
   return (
     <div
-      className={cn('group/message w-full')}
+      className={cn('group/message w-full', className)}
       data-role="assistant"
       data-testid={`message-assistant`}
     >
-      <div className="flex w-full flex-col items-start justify-start gap-2.5">
+      <div
+        className={cn(
+          'flex w-full flex-col items-start justify-start',
+          isMobile ? 'gap-[10px]' : 'gap-2.5'
+        )}
+      >
         {avatarJsx}
         <div className="flex flex-col min-w-0 grow gap-2.5 w-full">
           <MessageContent
             isMobile={isMobile}
-            className="w-full wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left"
+            className={cn(
+              'w-full wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left',
+              isMobile && 'gap-[10px]'
+            )}
             data-testid="message-content"
           >
             {children}

package/src/components/field-checker-list-msg.tsx

@@ -26,8 +26,9 @@ export const FieldCheckerListMsg = memo(
       children?: ReactNode;
       streaming: boolean;
       confirmed?: boolean;
+      isMobile?: boolean;
     }
-  >(({ fields, children, streaming, confirmed }, ref) => {
+  >(({ fields, children, streaming, confirmed, isMobile }, ref) => {
     // Track individual field checked states (all default to true)
     const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>(() => {
       const map: Record<string, boolean> = {};
@@ -72,7 +73,7 @@ export const FieldCheckerListMsg = memo(
     );
 
     return (
-      <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen>
+      <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen isMobile={isMobile}>
         {
           <div
             className={cn(

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

@@ -66,6 +66,7 @@ export interface FormInfoEditorProps {
   onMount?: () => void;
   readonly?: boolean;
   iconRenderer?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
+  mobile?: boolean;
 }
 
 /**
@@ -85,6 +86,7 @@ export const FormInfoEditor = memo(
     expanded: controlledExpanded,
     onExpandedChange,
     iconRenderer,
+    mobile,
     className,
   }: FormInfoEditorProps) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
@@ -103,6 +105,16 @@ export const FormInfoEditor = memo(
       onMount?.();
     }, []);
 
+    const fontCls = cn({
+      'text-[16px]': mobile,
+      'text-[14px]': !mobile,
+    });
+
+    const sizeCls = cn({
+      'w-[16px] h-[16px]': !mobile,
+      'w-[20px] h-[20px]': !mobile
+    })
+
     // Default Status (Collapsed)
     if (!expanded || readonly) {
       return (
@@ -121,7 +133,7 @@ export const FormInfoEditor = memo(
           {/* Left side: Form icon and name */}
           <div className="flex items-center gap-[10px] min-w-0 flex-1 mr-[10px]">
             <FormIcon size={36} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
-            <p className="text-[14px] text-black leading-normal truncate">{nameVal}</p>
+            <p className={cn("text-black leading-normal truncate", fontCls)}>{nameVal}</p>
           </div>
 
           <button
@@ -130,19 +142,21 @@ export const FormInfoEditor = memo(
               setExpanded(true);
             }}
             className={cn(
-              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
+              'flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
               transCls,
+              sizeCls,
               {
                 'pointer-events-none opacity-0': readonly,
               }
             )}
           >
-            <EditIcon />
+            <EditIcon size={mobile ? 20 : 16} />
           </button>
         </div>
       );
     }
 
+
     // Expanded Status (Edit mode)
     return (
       <div
@@ -155,7 +169,7 @@ export const FormInfoEditor = memo(
       >
         {/* Name field */}
         <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">名称</p>
+          <p className={cn("text-[#030303] font-bold leading-normal", fontCls)}>名称</p>
           <input
             type="text"
             value={nameVal}
@@ -167,9 +181,10 @@ export const FormInfoEditor = memo(
             }}
             className={cn(
               'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
-              'text-[14px] text-[#030303] leading-normal outline-none',
+              'text-[#030303] leading-normal outline-none',
               'focus:border-[#0265ff]',
               'hover:border-[#0265ff]',
+              fontCls,
               transCls
             )}
           />
@@ -177,7 +192,7 @@ export const FormInfoEditor = memo(
 
         {/* Icon field */}
         <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">图标</p>
+          <p className={cn("text-[#030303] font-bold leading-normal", fontCls)}>图标</p>
           <div className="relative" style={{ zIndex: 10 }}>
             <button
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}

package/src/components/scroll-to-bottom-btn.tsx

@@ -5,9 +5,10 @@ import { ScrollArrowDownIcon } from './bs-icons';
 export interface ScrollToBottomProps {
   onClick?: () => void;
   className?: string;
+  isMobile?: boolean;
 }
 
-export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
+export const ScrollToBottomBtn = ({ onClick, className, isMobile }: ScrollToBottomProps) => {
   return (
     <button
       type="button"
@@ -22,7 +23,7 @@ export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) =
         className
       )}
     >
-      <ScrollArrowDownIcon />
+      <ScrollArrowDownIcon size={isMobile ? 20 : 24 } />
     </button>
   );
 };

package/src/components/user-txt-msg-bubble.tsx

@@ -11,11 +11,12 @@ export interface UserTextMsgBubbleProps {
 export const UserTextMsgBubble = ({ text, children, isMobile }: UserTextMsgBubbleProps) => {
   const content = (text || children) as string;
   const sizeCls = isMobile ? 'text-[16px]' : 'text-[14px]';
+  const paddingCls = isMobile ? "px-[10px] py-[9px]" : "px-2.5 py-[8px]";
 
   if (typeof content !== 'string') {
     return (
       <div
-        className={`px-2.5 py-[8px] text-[#0265FF] ${sizeCls} w-fit`}
+        className={`${paddingCls} text-[#0265FF] ${sizeCls} w-fit`}
         style={{
           borderRadius: `10px 0 10px 10px`,
           wordWrap: 'break-word',
@@ -31,7 +32,7 @@ export const UserTextMsgBubble = ({ text, children, isMobile }: UserTextMsgBubbl
   const summary = `${content?.slice(0, 10)}...`;
   return (
     <div
-      className={`px-2.5 py-[8px] text-[#0265FF] ${sizeCls} w-fit`}
+      className={`${paddingCls} text-[#0265FF] ${sizeCls} w-fit`}
       style={{
         borderRadius: `10px 0 10px 10px`,
         wordWrap: 'break-word',

package/src/components/warning-msg.tsx

@@ -11,7 +11,7 @@ export const WarningMessage = ({
   className,
 }: WarningMessageProps) => {
   return (
-    <div className={cn('flex flex-col items-center gap-[10px]', className)}>
+    <div className={cn('flex flex-col items-center gap-[10px] m-t-[40px]', className)}>
       <div className="relative" style={{ width: 120, height: 77 }}>
         <div
           className="bg-no-repeat"

package/style.css

@@ -849,9 +849,6 @@
   .w-5 {
     width: calc(3.5px * 5);
   }
-  .w-9 {
-    width: calc(3.5px * 9);
-  }
   .w-10 {
     width: calc(3.5px * 10);
   }
@@ -1844,6 +1841,9 @@
   .py-\[8px\] {
     padding-block: 8px;
   }
+  .py-\[9px\] {
+    padding-block: 9px;
+  }
   .py-\[10px\] {
     padding-block: 10px;
   }