@lobehub/chat 1.100.2 → 1.101.0

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/index.tsx

@@ -12,6 +12,8 @@ import { useFileStore } from '@/store/file';
 import { FileUploadStatus } from '@/types/files/upload';
 
 import { CONFIG_PANEL_WIDTH } from '../../constants';
+import { useDragAndDrop } from '../../hooks/useDragAndDrop';
+import { useConfigPanelStyles } from '../../style';
 import ImageManageModal, { type ImageItem } from './ImageManageModal';
 
 // ======== Business Types ======== //
@@ -105,6 +107,14 @@ const useStyles = createStyles(({ css, token }) => {
       width: 100%;
       height: ${thumbnailSize}px;
       padding: 0;
+      border-radius: ${token.borderRadiusLG}px;
+
+      transition: all 0.2s ease;
+
+      &.drag-over {
+        transform: scale(1.02);
+        background: ${token.colorPrimaryBg};
+      }
     `,
 
     moreOverlay: css`
@@ -139,6 +149,12 @@ const useStyles = createStyles(({ css, token }) => {
         border-color: ${token.colorPrimary};
         background: ${token.colorFillSecondary};
       }
+
+      &.drag-over {
+        transform: scale(1.02);
+        border-color: ${token.colorPrimary};
+        background: ${token.colorPrimaryBg};
+      }
     `,
 
     placeholderIcon: css`
@@ -167,6 +183,11 @@ const useStyles = createStyles(({ css, token }) => {
       background: ${token.colorFillSecondary};
 
       transition: all 0.2s ease;
+
+      &.drag-over {
+        transform: scale(1.02);
+        background: ${token.colorPrimaryBg};
+      }
     `,
 
     progressPrimary: css`
@@ -197,6 +218,8 @@ const useStyles = createStyles(({ css, token }) => {
 
       background: ${token.colorBgContainer};
 
+      transition: all 0.2s ease;
+
       &:hover .upload-more-overlay {
         opacity: 1;
       }
@@ -204,6 +227,11 @@ const useStyles = createStyles(({ css, token }) => {
       &:hover .delete-icon {
         opacity: 1;
       }
+
+      &.drag-over {
+        transform: scale(1.02);
+        background: ${token.colorPrimaryBg};
+      }
     `,
     uploadMoreButton: css`
       cursor: pointer;
@@ -256,15 +284,21 @@ const isLocalBlobUrl = (url: string): boolean => url.startsWith('blob:');
 // ======== Sub-Components ======== //
 
 interface ImageUploadPlaceholderProps {
+  isDragOver?: boolean;
   onClick?: () => void;
 }
 
-const ImageUploadPlaceholder: FC<ImageUploadPlaceholderProps> = memo(({ onClick }) => {
+const ImageUploadPlaceholder: FC<ImageUploadPlaceholderProps> = memo(({ isDragOver, onClick }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('components');
 
   return (
-    <Center className={styles.placeholder} gap={16} horizontal={false} onClick={onClick}>
+    <Center
+      className={`${styles.placeholder} ${isDragOver ? 'drag-over' : ''}`}
+      gap={16}
+      horizontal={false}
+      onClick={onClick}
+    >
       <ImageIcon className={styles.placeholderIcon} size={48} strokeWidth={1.5} />
       <div className={styles.placeholderText}>
         {t('MultiImagesUpload.placeholder.primary')}
@@ -408,104 +442,117 @@ ImageUploadProgress.displayName = 'ImageUploadProgress';
 
 interface ImageThumbnailsProps {
   images: string[];
+  isDragOver?: boolean;
   onClick?: () => void;
   onDelete?: (index: number) => void;
 }
 
-const ImageThumbnails: FC<ImageThumbnailsProps> = memo(({ images, onClick, onDelete }) => {
-  const { styles } = useStyles();
+const ImageThumbnails: FC<ImageThumbnailsProps> = memo(
+  ({ images, isDragOver, onClick, onDelete }) => {
+    const { styles } = useStyles();
+    const { styles: configStyles } = useConfigPanelStyles();
 
-  // Display max 4 images, with overflow indication
-  const displayImages = images.slice(0, 4);
-  const remainingCount = Math.max(0, images.length - 3); // Show +x for images beyond first 3
+    // Display max 4 images, with overflow indication
+    const displayImages = images.slice(0, 4);
+    const remainingCount = Math.max(0, images.length - 3); // Show +x for images beyond first 3
 
-  const handleDelete = (index: number, event: React.MouseEvent) => {
-    event.stopPropagation(); // Prevent triggering container click
-    onDelete?.(index);
-  };
+    const handleDelete = (index: number, event: React.MouseEvent) => {
+      event.stopPropagation(); // Prevent triggering container click
+      onDelete?.(index);
+    };
 
-  const renderImageItem = (imageUrl: string, index: number) => {
-    const isLastItem = index === 3;
-    const showOverlay = isLastItem && remainingCount > 1;
+    const renderImageItem = (imageUrl: string, index: number) => {
+      const isLastItem = index === 3;
+      const showOverlay = isLastItem && remainingCount > 1;
+
+      return (
+        <div className={styles.imageItem} key={imageUrl}>
+          <Image
+            alt={`Uploaded image ${index + 1}`}
+            fill
+            src={imageUrl}
+            style={{ objectFit: 'cover' }}
+            unoptimized
+          />
+          {!showOverlay && (
+            <div
+              className={`${styles.deleteIcon} delete-icon`}
+              onClick={(e) => handleDelete(index, e)}
+            >
+              <X size={12} />
+            </div>
+          )}
+          {showOverlay && <div className={styles.moreOverlay}>+{remainingCount}</div>}
+        </div>
+      );
+    };
 
     return (
-      <div className={styles.imageItem} key={imageUrl}>
-        <Image
-          alt={`Uploaded image ${index + 1}`}
-          fill
-          src={imageUrl}
-          style={{ objectFit: 'cover' }}
-          unoptimized
-        />
-        {!showOverlay && (
-          <div
-            className={`${styles.deleteIcon} delete-icon`}
-            onClick={(e) => handleDelete(index, e)}
-          >
-            <X size={12} />
-          </div>
-        )}
-        {showOverlay && <div className={styles.moreOverlay}>+{remainingCount}</div>}
+      <div
+        className={`${styles.imageThumbnails} ${configStyles.dragTransition} ${isDragOver ? configStyles.dragOver : ''}`}
+        onClick={onClick}
+      >
+        {displayImages.map(renderImageItem)}
       </div>
     );
-  };
-
-  return (
-    <div className={styles.imageThumbnails} onClick={onClick}>
-      {displayImages.map(renderImageItem)}
-    </div>
-  );
-});
+  },
+);
 
 ImageThumbnails.displayName = 'ImageThumbnails';
 
 interface SingleImageDisplayProps {
   imageUrl: string;
+  isDragOver?: boolean;
   onClick?: () => void;
   onDelete?: () => void;
 }
 
-const SingleImageDisplay: FC<SingleImageDisplayProps> = memo(({ imageUrl, onClick, onDelete }) => {
-  const { styles } = useStyles();
-  const { t } = useTranslation('components');
-
-  const handleDelete = (event: React.MouseEvent) => {
-    event.stopPropagation(); // Prevent triggering container click
-    onDelete?.();
-  };
+const SingleImageDisplay: FC<SingleImageDisplayProps> = memo(
+  ({ imageUrl, isDragOver, onClick, onDelete }) => {
+    const { styles } = useStyles();
+    const { styles: configStyles } = useConfigPanelStyles();
+    const { t } = useTranslation('components');
 
-  const handleOverlayClick = (event: React.MouseEvent) => {
-    event.stopPropagation(); // Prevent triggering container click
-    onClick?.();
-  };
+    const handleDelete = (event: React.MouseEvent) => {
+      event.stopPropagation(); // Prevent triggering container click
+      onDelete?.();
+    };
 
-  return (
-    <div className={styles.singleImageDisplay}>
-      <Image
-        alt="Uploaded image"
-        fill
-        src={imageUrl}
-        style={{ objectFit: 'contain' }}
-        unoptimized
-      />
-
-      {/* Delete button */}
-      <div className={`${styles.deleteIcon} delete-icon`} onClick={handleDelete}>
-        <X size={12} />
-      </div>
+    const handleOverlayClick = (event: React.MouseEvent) => {
+      event.stopPropagation(); // Prevent triggering container click
+      onClick?.();
+    };
 
-      {/* Upload more overlay */}
+    return (
       <div
-        className={`${styles.uploadMoreOverlay} upload-more-overlay`}
-        onClick={handleOverlayClick}
+        className={`${styles.singleImageDisplay} ${configStyles.dragTransition} ${isDragOver ? configStyles.dragOver : ''}`}
       >
-        <button className={styles.uploadMoreButton} type="button">
-          {t('MultiImagesUpload.actions.uploadMore')}
-        </button>
+        <Image
+          alt="Uploaded image"
+          fill
+          src={imageUrl}
+          style={{ objectFit: 'contain' }}
+          unoptimized
+        />
+
+        {/* Delete button */}
+        <div className={`${styles.deleteIcon} delete-icon`} onClick={handleDelete}>
+          <X size={12} />
+        </div>
+
+        {/* Upload more overlay */}
+        <div
+          className={`${styles.uploadMoreOverlay} upload-more-overlay`}
+          onClick={handleOverlayClick}
+        >
+          <button className={styles.uploadMoreButton} type="button">
+            {t('MultiImagesUpload.actions.uploadMore')}
+          </button>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 SingleImageDisplay.displayName = 'SingleImageDisplay';
 
@@ -517,6 +564,7 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
     const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
     const [displayItems, setDisplayItems] = useState<DisplayItem[]>([]);
     const [modalOpen, setModalOpen] = useState(false);
+    const { styles: configStyles } = useConfigPanelStyles();
 
     // Cleanup blob URLs to prevent memory leaks
     useEffect(() => {
@@ -656,6 +704,18 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
       await handleFilesSelected(Array.from(files));
     };
 
+    // ======== Drag and Drop Handlers ======== //
+
+    const handleDrop = async (files: File[]) => {
+      // Add all image files to existing images
+      await handleFilesSelected(files);
+    };
+
+    const { isDragOver, dragHandlers } = useDragAndDrop({
+      accept: 'image/*',
+      onDrop: handleDrop,
+    });
+
     // 处理 Modal 完成回调
     const handleModalComplete = async (imageItems: ImageItem[]) => {
       // 分离现有URL和新文件
@@ -685,7 +745,7 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
     const isSingleImage = value && value.length === 1;
 
     return (
-      <div className={className} style={style}>
+      <div className={className} {...dragHandlers} style={style}>
         {/* Hidden file input */}
         <input
           accept="image/*"
@@ -702,22 +762,32 @@ const MultiImagesUpload: FC<MultiImagesUploadProps> = memo(
 
         {/* Conditional rendering based on state */}
         {isUploading ? (
-          <ImageUploadProgress
-            completedCount={completedFiles}
-            currentProgress={overallProgress}
-            showCount={totalFiles > 1}
-            totalCount={totalFiles}
-          />
+          <div
+            className={`${configStyles.dragTransition} ${isDragOver ? configStyles.dragOver : ''}`}
+          >
+            <ImageUploadProgress
+              completedCount={completedFiles}
+              currentProgress={overallProgress}
+              showCount={totalFiles > 1}
+              totalCount={totalFiles}
+            />
+          </div>
         ) : isSingleImage ? (
           <SingleImageDisplay
             imageUrl={value[0]}
+            isDragOver={isDragOver}
             onClick={handleOpenModal}
             onDelete={() => handleDelete(0)}
           />
         ) : hasImages ? (
-          <ImageThumbnails images={value || []} onClick={handleOpenModal} onDelete={handleDelete} />
+          <ImageThumbnails
+            images={value || []}
+            isDragOver={isDragOver}
+            onClick={handleOpenModal}
+            onDelete={handleDelete}
+          />
         ) : (
-          <ImageUploadPlaceholder onClick={handlePlaceholderClick} />
+          <ImageUploadPlaceholder isDragOver={isDragOver} onClick={handlePlaceholderClick} />
         )}
 
         {/* Image Management Modal */}

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/SeedNumberInput.tsx

@@ -7,18 +7,9 @@ import InputNumber from '../../../components/SeedNumberInput';
 
 const SeedNumberInput = memo(() => {
   const { t } = useTranslation('image');
-  const { value, setValue, min, max, step = 1 } = useGenerationConfigParam('seed');
+  const { value, setValue } = useGenerationConfigParam('seed');
 
-  return (
-    <InputNumber
-      max={max}
-      min={min}
-      onChange={setValue as any}
-      placeholder={t('config.seed.random')}
-      step={step}
-      value={value}
-    />
-  );
+  return <InputNumber onChange={setValue} placeholder={t('config.seed.random')} value={value} />;
 });
 
 export default SeedNumberInput;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/hooks/useDragAndDrop.ts

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+
+interface UseDragAndDropOptions {
+  accept?: string; // MIME type filter, e.g., 'image/*'
+  onDrop: (files: File[]) => void;
+}
+
+export const useDragAndDrop = ({ onDrop, accept = 'image/*' }: UseDragAndDropOptions) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dragCounter = useRef(0);
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Check if dragging files
+    if (e.dataTransfer.types.includes('Files')) {
+      dragCounter.current++;
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragCounter.current = 0;
+    setIsDragOver(false);
+
+    const files = Array.from(e.dataTransfer.files);
+
+    // Filter files based on accept type
+    const filteredFiles = files.filter((file) => {
+      if (accept === '*/*') return true;
+      if (accept.endsWith('/*')) {
+        const acceptType = accept.slice(0, -2);
+        return file.type.startsWith(acceptType);
+      }
+      return file.type === accept;
+    });
+
+    if (filteredFiles.length > 0) {
+      onDrop(filteredFiles);
+    }
+  };
+
+  const dragHandlers = {
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDrop: handleDrop,
+  };
+
+  return {
+    dragHandlers,
+    isDragOver,
+  };
+};

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/style.ts

@@ -0,0 +1,17 @@
+import { createStyles } from 'antd-style';
+
+export const useConfigPanelStyles = createStyles(({ css, token }) => ({
+  dragOver: css`
+    transform: scale(1.02);
+    border-color: ${token.colorPrimary} !important;
+    box-shadow: 0 0 0 2px ${token.colorPrimary}20;
+    transition: transform 0.2s ease;
+  `,
+
+  dragTransition: css`
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  `,
+}));

package/src/config/aiModels/zhipu.ts

@@ -1,4 +1,4 @@
-import { AIChatModelCard } from '@/types/aiModel';
+import { AIChatModelCard, AIImageModelCard } from '@/types/aiModel';
 
 const zhipuChatModels: AIChatModelCard[] = [
   {
@@ -8,7 +8,8 @@ const zhipuChatModels: AIChatModelCard[] = [
       vision: true,
     },
     contextWindowTokens: 64_000,
-    description: 'GLM-4.1V-Thinking 系列模型是目前已知10B级别的VLM模型中性能最强的视觉模型，融合了同级别SOTA的各项视觉语言任务，包括视频理解、图片问答、学科解题、OCR文字识别、文档和图表解读、GUI Agent、前端网页Coding、Grounding等，多项任务能力甚至超过8倍参数量的Qwen2.5-VL-72B。通过领先的强化学习技术，模型掌握了通过思维链推理的方式提升回答的准确性和丰富度，从最终效果和可解释性等维度都显著超过传统的非thinking模型。',
+    description:
+      'GLM-4.1V-Thinking 系列模型是目前已知10B级别的VLM模型中性能最强的视觉模型，融合了同级别SOTA的各项视觉语言任务，包括视频理解、图片问答、学科解题、OCR文字识别、文档和图表解读、GUI Agent、前端网页Coding、Grounding等，多项任务能力甚至超过8倍参数量的Qwen2.5-VL-72B。通过领先的强化学习技术，模型掌握了通过思维链推理的方式提升回答的准确性和丰富度，从最终效果和可解释性等维度都显著超过传统的非thinking模型。',
     displayName: 'GLM-4.1V-Thinking-FlashX',
     id: 'glm-4.1v-thinking-flashx',
     pricing: {
@@ -28,7 +29,8 @@ const zhipuChatModels: AIChatModelCard[] = [
       vision: true,
     },
     contextWindowTokens: 64_000,
-    description: 'GLM-4.1V-Thinking 系列模型是目前已知10B级别的VLM模型中性能最强的视觉模型，融合了同级别SOTA的各项视觉语言任务，包括视频理解、图片问答、学科解题、OCR文字识别、文档和图表解读、GUI Agent、前端网页Coding、Grounding等，多项任务能力甚至超过8倍参数量的Qwen2.5-VL-72B。通过领先的强化学习技术，模型掌握了通过思维链推理的方式提升回答的准确性和丰富度，从最终效果和可解释性等维度都显著超过传统的非thinking模型。',
+    description:
+      'GLM-4.1V-Thinking 系列模型是目前已知10B级别的VLM模型中性能最强的视觉模型，融合了同级别SOTA的各项视觉语言任务，包括视频理解、图片问答、学科解题、OCR文字识别、文档和图表解读、GUI Agent、前端网页Coding、Grounding等，多项任务能力甚至超过8倍参数量的Qwen2.5-VL-72B。通过领先的强化学习技术，模型掌握了通过思维链推理的方式提升回答的准确性和丰富度，从最终效果和可解释性等维度都显著超过传统的非thinking模型。',
     displayName: 'GLM-4.1V-Thinking-Flash',
     enabled: true,
     id: 'glm-4.1v-thinking-flash',
@@ -103,8 +105,7 @@ const zhipuChatModels: AIChatModelCard[] = [
       search: true,
     },
     contextWindowTokens: 128_000,
-    description:
-      '高速低价：Flash增强版本，超快推理速度，更快并发保障。',
+    description: '高速低价：Flash增强版本，超快推理速度，更快并发保障。',
     displayName: 'GLM-Z1-FlashX',
     id: 'glm-z1-flashx',
     maxOutput: 32_000,
@@ -409,6 +410,28 @@ const zhipuChatModels: AIChatModelCard[] = [
   },
 ];
 
-export const allModels = [...zhipuChatModels];
+const zhipuImageModels: AIImageModelCard[] = [
+  // https://bigmodel.cn/dev/api/image-model/cogview
+  {
+    description:
+      'CogView-4 是智谱首个支持生成汉字的开源文生图模型，在语义理解、图像生成质量、中英文字生成能力等方面全面提升，支持任意长度的中英双语输入，能够生成在给定范围内的任意分辨率图像。',
+    displayName: 'CogView-4',
+    enabled: true,
+    id: 'cogview-4',
+    parameters: {
+      prompt: {
+        default: '',
+      },
+      size: {
+        default: '1024x1024',
+        enum: ['1024x1024', '768x1344', '864x1152', '1344x768', '1152x864', '1440x720', '720x1440'],
+      },
+    },
+    releasedAt: '2025-03-04',
+    type: 'image',
+  },
+];
+
+export const allModels = [...zhipuChatModels, ...zhipuImageModels];
 
 export default allModels;

package/src/libs/model-runtime/utils/openaiCompatibleFactory/index.test.ts

@@ -1227,9 +1227,26 @@ describe('LobeOpenAICompatibleFactory', () => {
         );
       });
 
-      it('should throw error when b64_json is missing', async () => {
+      it('should handle url format response successfully', async () => {
         vi.spyOn(instance['client'].images, 'generate').mockResolvedValue({
-          data: [{ url: 'https://example.com/image.jpg' }],
+          data: [{ url: 'https://example.com/generated-image.jpg' }],
+        } as any);
+
+        const payload = {
+          model: 'dall-e-3',
+          params: { prompt: 'Test prompt' },
+        };
+
+        const result = await (instance as any).createImage(payload);
+
+        expect(result).toEqual({
+          imageUrl: 'https://example.com/generated-image.jpg',
+        });
+      });
+
+      it('should throw error when both b64_json and url are missing', async () => {
+        vi.spyOn(instance['client'].images, 'generate').mockResolvedValue({
+          data: [{ some_other_field: 'value' }],
         } as any);
 
         const payload = {
@@ -1238,7 +1255,7 @@ describe('LobeOpenAICompatibleFactory', () => {
         };
 
         await expect((instance as any).createImage(payload)).rejects.toThrow(
-          'Invalid image response: missing b64_json field',
+          'Invalid image response: missing both b64_json and url fields',
         );
       });
     });

package/src/libs/model-runtime/utils/openaiCompatibleFactory/index.ts

@@ -390,21 +390,30 @@ export const createOpenAICompatibleRuntime = <T extends Record<string, any> = an
         throw new Error('Invalid image response: first data item is null or undefined');
       }
 
-      if (!imageData.b64_json) {
-        log('Invalid image response: missing b64_json field');
-        throw new Error('Invalid image response: missing b64_json field');
-      }
-
-      // 确定图片的 MIME 类型，默认为 PNG
-      const mimeType = 'image/png'; // OpenAI 图片生成默认返回 PNG 格式
+      let imageUrl: string;
 
-      // 将 base64 字符串转换为完整的 data URL
-      const dataUrl = `data:${mimeType};base64,${imageData.b64_json}`;
+      // 处理 base64 格式的响应
+      if (imageData.b64_json) {
+        // 确定图片的 MIME 类型，默认为 PNG
+        const mimeType = 'image/png'; // OpenAI 图片生成默认返回 PNG 格式
 
-      log('Successfully converted base64 to data URL, length: %d', dataUrl.length);
+        // 将 base64 字符串转换为完整的 data URL
+        imageUrl = `data:${mimeType};base64,${imageData.b64_json}`;
+        log('Successfully converted base64 to data URL, length: %d', imageUrl.length);
+      }
+      // 处理 URL 格式的响应
+      else if (imageData.url) {
+        imageUrl = imageData.url;
+        log('Using direct image URL: %s', imageUrl);
+      }
+      // 如果两种格式都不存在，抛出错误
+      else {
+        log('Invalid image response: missing both b64_json and url fields');
+        throw new Error('Invalid image response: missing both b64_json and url fields');
+      }
 
       return {
-        imageUrl: dataUrl,
+        imageUrl,
       };
     }
 

package/src/locales/default/components.ts

@@ -73,10 +73,11 @@ export default {
   ImageUpload: {
     actions: {
       changeImage: '点击更换图片',
+      dropMultipleFiles: '不支持多上传多个文件，只会使用第一个文件',
     },
     placeholder: {
       primary: '添加图片',
-      secondary: '点击上传',
+      secondary: '点击或拖拽上传',
     },
   },
   KeyValueEditor: {
@@ -111,7 +112,7 @@ export default {
   },
   MultiImagesUpload: {
     actions: {
-      uploadMore: '点击上传更多',
+      uploadMore: '点击或拖拽上传更多',
     },
     modal: {
       complete: '完成',
@@ -121,7 +122,7 @@ export default {
       upload: '上传图片',
     },
     placeholder: {
-      primary: '点击上传图片',
+      primary: '点击或拖拽上传图片',
       secondary: '支持多张图片选择',
     },
     progress: {