@lobehub/chat 1.114.6 → 1.116.0

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicItem.tsx

@@ -23,10 +23,11 @@ const formatTime = (date: Date, locale: string) => {
 
 interface TopicItemProps {
   showMoreInfo?: boolean;
+  style?: React.CSSProperties;
   topic: ImageGenerationTopic;
 }
 
-const TopicItem = memo<TopicItemProps>(({ topic, showMoreInfo }) => {
+const TopicItem = memo<TopicItemProps>(({ topic, showMoreInfo, style }) => {
   const theme = useTheme();
   const { t } = useTranslation('image');
   const { modal } = App.useApp();
@@ -111,6 +112,7 @@ const TopicItem = memo<TopicItemProps>(({ topic, showMoreInfo }) => {
         onClick={handleClick}
         style={{
           cursor: 'pointer',
+          ...style,
         }}
         width={'100%'}
       >

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicList.tsx

@@ -47,8 +47,21 @@ const TopicsList = memo(() => {
         showMoreInfo={showMoreInfo}
       />
       <Flexbox align="center" gap={12} ref={parent} width={'100%'}>
-        {generationTopics.map((topic) => (
-          <TopicItem key={topic.id} showMoreInfo={showMoreInfo} topic={topic} />
+        {generationTopics.map((topic, index) => (
+          <TopicItem
+            key={topic.id}
+            showMoreInfo={showMoreInfo}
+            style={{
+              padding:
+                // fix the avatar border is clipped by overflow hidden
+                generationTopics.length === 1
+                  ? '4px 0'
+                  : index === generationTopics.length - 1
+                    ? '0 0 4px'
+                    : '0',
+            }}
+            topic={topic}
+          />
         ))}
       </Flexbox>
     </Flexbox>

package/src/app/[variants]/(main)/image/features/GenerationFeed/GenerationItem/utils.ts

@@ -111,13 +111,14 @@ export const getThumbnailMaxWidth = (
 ): number => {
   const dimensions = getImageDimensions(generation, generationBatch);
 
-  // Return default width if dimensions are not available
-  if (!dimensions.width || !dimensions.height) {
+  // Return default width if no dimension information is available
+  if (!dimensions.aspectRatio) {
     return DEFAULT_MAX_ITEM_WIDTH;
   }
 
-  const { width: originalWidth, height: originalHeight } = dimensions;
-  const aspectRatio = originalWidth / originalHeight;
+  // Parse aspect ratio string (format: "16 / 9")
+  const [widthStr, heightStr] = dimensions.aspectRatio.split(' / ');
+  const aspectRatio = Number(widthStr) / Number(heightStr);
 
   // Apply screen height constraint (half of screen height)
   // Note: window.innerHeight is safe to use here as this function is client-side only

package/src/config/aiModels/google.ts

@@ -189,6 +189,28 @@ const googleChatModels: AIChatModelCard[] = [
     },
     type: 'chat',
   },
+  {
+    abilities: {
+      imageOutput: true,
+      vision: true,
+    },
+    contextWindowTokens: 32_768 + 32_768,
+    description:
+      'Gemini 2.5 Flash Image Preview 是 Google 最新、最快、最高效的原生多模态模型，它允许您通过对话生成和编辑图像。',
+    displayName: 'Gemini 2.5 Flash Image Preview',
+    enabled: true,
+    id: 'gemini-2.5-flash-image-preview',
+    maxOutput: 32_768,
+    pricing: {
+      units: [
+        { name: 'textInput', rate: 0.3, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textOutput', rate: 2.5, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'imageOutput', rate: 3, strategy: 'fixed', unit: 'millionTokens' },
+      ],
+    },
+    releasedAt: '2025-08-27',
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -304,7 +326,6 @@ const googleChatModels: AIChatModelCard[] = [
     contextWindowTokens: 32_768 + 8192,
     description: 'Gemini 2.0 Flash 预览模型，支持图像生成',
     displayName: 'Gemini 2.0 Flash Preview Image Generation',
-    enabled: true,
     id: 'gemini-2.0-flash-preview-image-generation',
     maxOutput: 8192,
     pricing: {

package/src/config/aiModels/qwen.ts

@@ -1357,8 +1357,8 @@ const qwenImageModels: AIImageModelCard[] = [
       },
       seed: { default: null },
       size: {
-        default: '1328*1328',
-        enum: ['1664*928', '1472*1140', '1328*1328', '1140*1472', '928*1664'],
+        default: '1328x1328',
+        enum: ['1664x928', '1472x1140', '1328x1328', '1140x1472', '928x1664'],
       },
     },
     pricing: {

package/src/config/aiModels/vertexai.ts

@@ -121,6 +121,28 @@ const vertexaiChatModels: AIChatModelCard[] = [
     releasedAt: '2025-04-17',
     type: 'chat',
   },
+  {
+    abilities: {
+      imageOutput: true,
+      vision: true,
+    },
+    contextWindowTokens: 32_768 + 32_768,
+    description:
+      'Gemini 2.5 Flash Image Preview 是 Google 最新、最快、最高效的原生多模态模型，它允许您通过对话生成和编辑图像。',
+    displayName: 'Gemini 2.5 Flash Image Preview',
+    enabled: true,
+    id: 'gemini-2.5-flash-image-preview',
+    maxOutput: 32_768,
+    pricing: {
+      units: [
+        { name: 'textInput', rate: 0.3, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textOutput', rate: 2.5, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'imageOutput', rate: 3, strategy: 'fixed', unit: 'millionTokens' },
+      ],
+    },
+    releasedAt: '2025-08-27',
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,

package/src/libs/standard-parameters/index.ts

@@ -1,7 +1,7 @@
 import type { Simplify } from 'type-fest';
 import { z } from 'zod';
 
-export const MAX_SEED = 2 ** 31 - 1;
+import { MAX_SEED } from '@/const/image';
 
 // 定义顶层的元规范 - 平铺结构
 export const ModelParamsMetaSchema = z.object({

package/src/server/services/generation/index.ts

@@ -4,7 +4,7 @@ import mime from 'mime';
 import { nanoid } from 'nanoid';
 import sharp from 'sharp';
 
-import { IMAGE_GENERATION_CONFIG } from '@/const/imageGeneration';
+import { IMAGE_GENERATION_CONFIG } from '@/const/image';
 import { LobeChatDatabase } from '@/database/type';
 import { parseDataUri } from '@/libs/model-runtime/utils/uriParser';
 import { FileService } from '@/server/services/file';

package/src/store/chat/slices/builtinTool/actions/dalle.test.ts

@@ -7,6 +7,7 @@ import { messageService } from '@/services/message';
 import { imageGenerationService } from '@/services/textToImage';
 import { uploadService } from '@/services/upload';
 import { chatSelectors } from '@/store/chat/selectors';
+import { useFileStore } from '@/store/file';
 import { ChatMessage } from '@/types/message';
 import { DallEImageItem } from '@/types/tool/dalle';
 
@@ -41,24 +42,28 @@ describe('chatToolSlice - dalle', () => {
       vi.spyOn(uploadService, 'getImageFileByUrlWithCORS').mockResolvedValue(
         new File(['1'], 'file.png', { type: 'image/png' }),
       );
-      // @ts-ignore
-      vi.spyOn(uploadService, 'uploadToClientS3').mockResolvedValue({} as any);
-      vi.spyOn(ClientService.prototype, 'createFile').mockResolvedValue({
-        id: mockId,
-        url: '',
-      });
+
+      // Mock the new uploadWithProgress method from useFileStore
+      vi.spyOn(useFileStore, 'getState').mockReturnValue({
+        uploadWithProgress: vi.fn().mockResolvedValue({
+          id: mockId,
+          url: '',
+          dimensions: { width: 512, height: 512 },
+          filename: 'file.png',
+        }),
+      } as any);
+
+      // Mock store methods that are called in the implementation
       vi.spyOn(result.current, 'toggleDallEImageLoading');
-      vi.spyOn(ClientService.prototype, 'checkFileHash').mockImplementation(
-        async () => ({ isExist: false }) as any,
-      );
+      vi.spyOn(result.current, 'updatePluginState').mockResolvedValue(undefined);
+      vi.spyOn(result.current, 'internal_updateMessageContent').mockResolvedValue(undefined);
 
       await act(async () => {
         await result.current.generateImageFromPrompts(prompts, messageId);
       });
       // For each prompt, loading is toggled on and then off
       expect(imageGenerationService.generateImage).toHaveBeenCalledTimes(prompts.length);
-      // @ts-ignore
-      expect(uploadService.uploadToClientS3).toHaveBeenCalledTimes(prompts.length);
+      expect(useFileStore.getState().uploadWithProgress).toHaveBeenCalledTimes(prompts.length);
       expect(result.current.toggleDallEImageLoading).toHaveBeenCalledTimes(prompts.length * 2);
     });
   });
@@ -74,7 +79,7 @@ describe('chatToolSlice - dalle', () => {
         draft[0].previewUrl = 'new-url';
         draft[0].imageId = 'new-id';
       };
-      vi.spyOn(result.current, 'internal_updateMessageContent');
+      vi.spyOn(result.current, 'internal_updateMessageContent').mockResolvedValue(undefined);
 
       // 模拟 getMessageById 返回消息内容
       vi.spyOn(chatSelectors, 'getMessageById').mockImplementationOnce(
@@ -105,7 +110,9 @@ describe('chatToolSlice - dalle', () => {
       const data = [{ prompt: 'prompt 1' }, { prompt: 'prompt 2' }] as DallEImageItem[];
 
       // Mock generateImageFromPrompts
-      const generateImageFromPromptsMock = vi.spyOn(result.current, 'generateImageFromPrompts');
+      const generateImageFromPromptsMock = vi
+        .spyOn(result.current, 'generateImageFromPrompts')
+        .mockResolvedValue(undefined);
 
       await act(async () => {
         await result.current.text2image(id, data);

package/src/store/file/slices/upload/action.ts

@@ -7,6 +7,7 @@ import { LOBE_CHAT_CLOUD } from '@/const/branding';
 import { fileService } from '@/services/file';
 import { uploadService } from '@/services/upload';
 import { FileMetadata, UploadFileItem } from '@/types/files';
+import { getImageDimensions } from '@/utils/client/imageDimensions';
 
 import { FileStore } from '../../store';
 
@@ -36,6 +37,10 @@ interface UploadWithProgressParams {
 }
 
 interface UploadWithProgressResult {
+  dimensions?: {
+    height: number;
+    width: number;
+  };
   filename?: string;
   id: string;
   url: string;
@@ -61,6 +66,9 @@ export const createFileUploadSlice: StateCreator<
   FileUploadAction
 > = () => ({
   uploadBase64FileWithProgress: async (base64) => {
+    // Extract image dimensions from base64 data
+    const dimensions = await getImageDimensions(base64);
+
     const { metadata, fileType, size, hash } = await uploadService.uploadBase64ToS3(base64);
 
     const res = await fileService.createFile({
@@ -71,18 +79,21 @@ export const createFileUploadSlice: StateCreator<
       size: size,
       url: metadata.path,
     });
-    return { ...res, filename: metadata.filename };
+    return { ...res, dimensions, filename: metadata.filename };
   },
   uploadWithProgress: async ({ file, onStatusUpdate, knowledgeBaseId, skipCheckFileType }) => {
     const fileArrayBuffer = await file.arrayBuffer();
 
-    // 1. check file hash
+    // 1. extract image dimensions if applicable
+    const dimensions = await getImageDimensions(file);
+
+    // 2. check file hash
     const hash = sha256(fileArrayBuffer);
 
     const checkStatus = await fileService.checkFileHash(hash);
     let metadata: FileMetadata;
 
-    // 2. if file exist, just skip upload
+    // 3. if file exist, just skip upload
     if (checkStatus.isExist) {
       metadata = checkStatus.metadata as FileMetadata;
       onStatusUpdate?.({
@@ -91,7 +102,7 @@ export const createFileUploadSlice: StateCreator<
         value: { status: 'processing', uploadState: { progress: 100, restTime: 0, speed: 0 } },
       });
     }
-    // 2. if file don't exist, need upload files
+    // 3. if file don't exist, need upload files
     else {
       const { data, success } = await uploadService.uploadFileToS3(file, {
         onNotSupported: () => {
@@ -119,7 +130,7 @@ export const createFileUploadSlice: StateCreator<
       metadata = data;
     }
 
-    // 3. use more powerful file type detector to get file type
+    // 4. use more powerful file type detector to get file type
     let fileType = file.type;
 
     if (!file.type) {
@@ -129,7 +140,7 @@ export const createFileUploadSlice: StateCreator<
       fileType = type?.mime || 'text/plain';
     }
 
-    // 4. create file to db
+    // 5. create file to db
     const data = await fileService.createFile(
       {
         fileType,
@@ -153,6 +164,6 @@ export const createFileUploadSlice: StateCreator<
       },
     });
 
-    return { ...data, filename: file.name };
+    return { ...data, dimensions, filename: file.name };
   },
 });

package/src/store/image/slices/generationConfig/hooks.ts

@@ -97,7 +97,7 @@ export function useDimensionControl() {
   }, [paramsSchema]);
 
   // 只要不是所有维度相关的控件都不显示，那么这个容器就应该显示
-  const showDimensionControl = !(!isSupportAspectRatio && !isSupportWidth && !isSupportHeight);
+  const showDimensionControl = isSupportAspectRatio || isSupportWidth || isSupportHeight;
 
   return {
     isLocked: store.isAspectRatioLocked,

package/tsconfig.json

@@ -34,14 +34,5 @@
     ]
   },
   "exclude": ["node_modules", "public/sw.js", "apps/desktop", "tmp", "temp", ".temp"],
-  "include": [
-    "**/*.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "next-env.d.ts",
-    "src",
-    "tests",
-    "vitest.config.ts"
-  ]
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "next-env.d.ts"]
 }

package/.cursor/rules/debug.mdc

@@ -1,193 +0,0 @@
----
-description: Debug 调试指南
-globs: 
-alwaysApply: false
----
-# Debug 调试指南
-
-## 💡 调试流程概览
-
-当遇到问题时，请按照以下优先级进行处理：
-
-1. **快速判断** - 对于熟悉的错误，直接提供解决方案
-2. **信息收集** - 使用工具搜索相关代码和配置
-3. **网络搜索** - 查找现有解决方案
-4. **定位调试** - 添加日志进行问题定位
-5. **临时方案** - 如果找不到根本解决方案，提供临时解决方案
-6. **解决实施** - 提供可维护的最终解决方案
-
-## 🔍 错误信息分析
-
-### 错误来源识别
-
-错误信息可能来自：
-
-- **Terminal 输出** - 构建、运行时错误
-- **浏览器控制台** - 前端 JavaScript 错误
-- **开发工具** - ESLint、TypeScript、测试框架等
-- **服务器日志** - API、数据库连接等后端错误
-- **截图或文本** - 用户直接提供的错误信息
-
-## 🛠️ 信息收集工具
-
-### 代码搜索工具
-
-使用以下工具收集相关信息，并根据场景选择最合适的工具：
-
-- **`codebase_search` (语义搜索)**
-    - **何时使用**: 当你不确定具体的代码实现，想要寻找相关概念、功能或逻辑时。
-    - **示例**: `查询"文件上传"功能的实现`
-- **`grep_search` (精确/正则搜索)**
-    - **何时使用**: 当你知道要查找的确切字符串、函数名、变量名或一个特定的模式时。
-    - **示例**: `查找所有使用了 'useState' 的地方`
-- **`file_search` (文件搜索)**
-    - **何时使用**: 当你知道文件名的一部分，需要快速定位文件时。
-    - **示例**: `查找 'Button.tsx' 组件`
-- **`read_file` (内容读取)**
-    - **何时使用**: 在定位到具体文件后，用于查看其完整内容和上下文。
-- **`web_search` (网络搜索)**
-    - **何时使用**: 当错误信息可能与第三方库、API 或常见问题相关时，用于获取外部信息。
-
-### 环境与依赖检查
-
-- **检查 `package.json`**: 查看 `scripts` 了解项目如何运行、构建和测试。查看 `dependencies` 和 `devDependencies` 确认库版本，版本冲突有时是问题的根源。
-- **运行测试**: 使用 `ni vitest` 运行单元测试和集成测试，这可以快速定位功能回归或组件错误。
-
-### 项目特定搜索目标
-
-针对 lobe-chat 项目，重点关注：
-
-- **配置文件**: [package.json](mdc:package.json), [next.config.mjs](mdc:next.config.mjs)
-- **核心功能**: `src/features/` 下的相关模块
-- **状态管理**: `src/store/` 下的 Zustand stores
-- **数据库**: `src/database/` 和 `src/migrations/`
-- **类型定义**: `src/types/` 下的类型文件
-- **服务层**: `src/services/` 下的 API 服务
-- **启动流程**: [apps/desktop/src/main/core/App.ts](mdc:apps/desktop/src/main/core/App.ts) - 了解应用启动流程
-
-## 🌐 网络搜索策略
-
-### 搜索顺序优先级
-
-1. **和问题相关的项目的 github issue**
-
-2. **技术社区**
-    - Stack Overflow
-    - GitHub Discussions
-    - Reddit
-
-3. **官方文档**
-    - 使用 `mcp_context7_resolve-library-id` 和 `mcp_context7_get-library-docs` 工具
-    - 查阅官方文档网站
-
-### 搜索关键词策略
-
-- **错误信息**: 完整的错误消息
-- **技术栈**: "Next.js 15" + "error message"
-- **上下文**: 添加功能相关的关键词
-
-## 🔧 问题定位与结构化思考
-
-如果问题比较复杂，我们要按照先定位问题，再解决问题的大方向进行。
-
-### 结构化思考工具
-
-对于复杂或多步骤的调试任务，使用 `mcp_sequential-thinking_sequentialthinking` 工具来结构化思考过程。这有助于：
-
-- **分解问题**: 将大问题拆解成可管理的小步骤。
-- **清晰追踪**: 记录每一步的发现和决策，避免遗漏。
-- **自我修正**: 在过程中评估和调整调试路径。
-
-### 日志调试
-
-在问题产生的路径上添加日志，可以简单使用 `console.log` 或者参考 [debug-usage.mdc](mdc:.cursor/rules/debug-usage.mdc) 使用 `debug` 模块。添加完日志后，请求我运行相关的代码并提供关键输出和错误信息。
-
-### 引导式交互调试
-
-虽然我无法直接操作浏览器开发者工具，但我可以引导你进行交互式调试：
-
-1.  **设置断点**: 我会告诉你可以在哪些关键代码行设置断点。
-2.  **检查变量**: 我会请你在断点处检查特定变量的值或 `props`/`state`。
-3.  **分析调用栈**: 我会请你提供调用栈信息，以帮助理解代码执行流程。
-
-## 💡 临时解决方案策略
-
-当无法找到根本解决方案时，提供临时解决方案：
-
-### 临时方案准则
-
-- **快速修复** - 优先让功能可用
-- **最小修改** - 减少对现有代码的影响
-- **清晰标记** - 明确标注这是临时方案
-- **后续计划** - 说明后续如何找到更好的解决方案
-
-### 临时方案模板
-
-```markdown
-## 临时解决方案 ⚠️
-
-**问题**: [简要描述问题]
-
-**临时修复**:
-[具体的临时修复步骤]
-
-**风险说明**:
-
-- [可能的副作用或限制]
-- [需要注意的事项]
-
-**后续计划**:
-
-- [ ] 深入调研根本原因
-- [ ] 寻找更优雅的解决方案
-- [ ] 监控是否有其他影响
-```
-
-## ✅ 解决方案准则
-
-### 方案质量标准
-
-提供的解决方案应该：
-
-- **✅ 低侵入性** - 最小化对现有代码的修改
-- **✅ 可维护性** - 易于理解和后续维护
-- **✅ 类型安全** - 符合 TypeScript 规范
-- **✅ 最佳实践** - 遵循项目的编码规范
-- **✅ 测试友好** - 便于编写和运行测试
-- **❌ 避免长期 Hack** - 临时方案可以 hack，但要明确标注
-
-### 解决方案模板
-
-```markdown
-## 问题原因
-
-[简要说明问题产生的根本原因]
-
-## 解决方案
-
-[详细的解决步骤]
-
-## 代码修改
-
-[具体的代码变更]
-
-## 验证方法
-
-[如何验证问题已解决]
-
-## 预防措施
-
-[如何避免类似问题再次发生]
-```
-
-## 🔄 迭代调试流程
-
-如果初次解决方案无效：
-
-1.  **重新收集信息** - 基于新的错误信息搜索
-2.  **深入代码分析** - 查看更多相关代码文件
-3.  **运行相关测试** - 编写或运行一个失败的测试来稳定复现问题。
-4.  **扩大搜索范围** - 搜索更广泛的相关问题
-5.  **请求更多日志** - 添加更详细的调试信息
-6.  **提供临时方案** - 如果根本解决方案复杂，先提供临时修复
-7.  **分解问题** - 将复杂问题拆解为更小的子问题

package/packages/const/src/imageGeneration.ts

@@ -1,16 +0,0 @@
-/**
- * Image generation and processing configuration constants
- */
-export const IMAGE_GENERATION_CONFIG = {
-  /**
-   * Maximum cover image size in pixels (longest edge)
-   * Used for generating cover images from source images
-   */
-  COVER_MAX_SIZE: 256,
-
-  /**
-   * Maximum thumbnail size in pixels (longest edge)
-   * Used for generating thumbnail images from original images
-   */
-  THUMBNAIL_MAX_SIZE: 512,
-} as const;

package/src/app/(backend)/trpc/desktop/[trpc]/route.ts

@@ -1,26 +0,0 @@
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
-import type { NextRequest } from 'next/server';
-
-import { pino } from '@/libs/logger';
-import { createLambdaContext } from '@/libs/trpc/lambda/context';
-import { desktopRouter } from '@/server/routers/desktop';
-
-const handler = (req: NextRequest) =>
-  fetchRequestHandler({
-    /**
-     * @link https://trpc.io/docs/v11/context
-     */
-    createContext: () => createLambdaContext(req),
-
-    endpoint: '/trpc/desktop',
-
-    onError: ({ error, path, type }) => {
-      pino.info(`Error in tRPC handler (desktop) on path: ${path}, type: ${type}`);
-      console.error(error);
-    },
-
-    req,
-    router: desktopRouter,
-  });
-
-export { handler as GET, handler as POST };

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

@@ -1,24 +0,0 @@
-import { memo } from 'react';
-
-import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
-
-import Select from '../../../components/AspectRatioSelect';
-
-const AspectRatioSelect = memo(() => {
-  const { value, setValue, enumValues } = useGenerationConfigParam('aspectRatio');
-
-  // 如果模型支持 ratio 枚举值，则使用枚举值
-  if (enumValues && enumValues.length > 0) {
-    const options = enumValues.map((ratio) => ({
-      label: ratio,
-      value: ratio,
-    }));
-
-    return <Select onChange={setValue} options={options} style={{ width: '100%' }} value={value} />;
-  }
-
-  // 如果模型不支持 ratio 参数，返回 null（由外部处理是否显示）
-  return null;
-});
-
-export default AspectRatioSelect;

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

@@ -1,15 +0,0 @@
-import { SliderWithInput } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
-
-interface SizeSliderInputProps {
-  paramName: 'width' | 'height';
-}
-
-const SizeSliderInput = memo(({ paramName }: SizeSliderInputProps) => {
-  const { value, setValue, min, max } = useGenerationConfigParam(paramName);
-  return <SliderWithInput max={max} min={min} onChange={setValue} value={value} />;
-});
-
-export default SizeSliderInput;