@lobehub/chat 1.103.1 → 1.103.2

package/src/app/[variants]/(main)/image/features/GenerationFeed/ReferenceImages.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ImageItem from '@/components/ImageItem';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    gap: 8px;
+    margin-block-end: 12px;
+  `,
+  image: css`
+    overflow: hidden;
+    flex-shrink: 0;
+
+    width: 60px;
+    height: 60px;
+    border-radius: ${token.borderRadius}px;
+  `,
+  imageSingle: css`
+    position: relative;
+    transform: rotate(-3deg);
+
+    flex-shrink: 0;
+
+    width: 64px;
+    height: 64px;
+
+    transition: transform 0.2s ease;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: -1;
+      inset: -4px;
+
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadius}px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: 0 2px 8px ${token.colorBgMask};
+    }
+
+    &:hover {
+      transform: rotate(-1deg) scale(1.05);
+    }
+  `,
+  imageSingleInner: css`
+    overflow: hidden;
+
+    width: 100%;
+    height: 100%;
+    border-radius: ${token.borderRadiusSM}px;
+
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+interface ReferenceImagesProps {
+  imageUrl?: string | null;
+  imageUrls?: string[];
+  layout?: 'single' | 'multiple';
+}
+
+export const ReferenceImages = memo<ReferenceImagesProps>(({ imageUrl, imageUrls, layout }) => {
+  const { styles } = useStyles();
+
+  // Collect all images
+  const allImages: string[] = [];
+  if (imageUrl) {
+    allImages.push(imageUrl);
+  }
+  if (imageUrls && imageUrls.length > 0) {
+    allImages.push(...imageUrls);
+  }
+
+  // Don't render if no images
+  if (allImages.length === 0) {
+    return null;
+  }
+
+  // Single image layout (no label, with frame effect)
+  if (layout === 'single' && allImages.length === 1) {
+    return (
+      <div className={styles.imageSingle}>
+        <div className={styles.imageSingleInner}>
+          <ImageItem
+            alt="Reference image"
+            preview={{
+              src: allImages[0],
+            }}
+            style={{ height: '100%', width: '100%' }}
+            url={allImages[0]}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // Multiple images layout
+  return (
+    <Flexbox className={styles.container} horizontal wrap="wrap">
+      {allImages.map((url, index) => (
+        <div className={styles.image} key={`${url}-${index}`}>
+          <ImageItem
+            alt={`Reference image ${index + 1}`}
+            preview={{
+              src: url,
+            }}
+            style={{ height: '100%', width: '100%' }}
+            url={url}
+          />
+        </div>
+      ))}
+    </Flexbox>
+  );
+});
+
+ReferenceImages.displayName = 'ReferenceImages';

package/src/config/aiModels/fal.ts

@@ -1,9 +1,13 @@
+import { ModelParamsSchema } from '@/libs/standard-parameters';
 import { AIImageModelCard } from '@/types/aiModel';
 
-import { fluxKontextDevParamsSchema } from '../paramsSchemas/fal/flux-kontext-dev';
-import { fluxProKontextParamsSchema } from '../paramsSchemas/fal/flux-pro-kontext';
-import { fluxSchnellParamsSchema } from '../paramsSchemas/fal/flux-schnell';
-import { imagen4ParamsSchema } from '../paramsSchemas/fal/imagen4';
+export const fluxSchnellParamsSchema: ModelParamsSchema = {
+  height: { default: 1024, max: 1536, min: 512, step: 1 },
+  prompt: { default: '' },
+  seed: { default: null },
+  steps: { default: 4, max: 12, min: 1 },
+  width: { default: 1024, max: 1536, min: 512, step: 1 },
+};
 
 const falImageModels: AIImageModelCard[] = [
   {
@@ -11,7 +15,12 @@ const falImageModels: AIImageModelCard[] = [
     displayName: 'FLUX.1 Kontext Dev',
     enabled: true,
     id: 'flux-kontext/dev',
-    parameters: fluxKontextDevParamsSchema,
+    parameters: {
+      imageUrl: { default: null },
+      prompt: { default: '' },
+      seed: { default: null },
+      steps: { default: 28, max: 50, min: 10 },
+    },
     releasedAt: '2025-06-28',
     type: 'image',
   },
@@ -21,7 +30,15 @@ const falImageModels: AIImageModelCard[] = [
     displayName: 'FLUX.1 Kontext [pro]',
     enabled: true,
     id: 'flux-pro/kontext',
-    parameters: fluxProKontextParamsSchema,
+    parameters: {
+      aspectRatio: {
+        default: '1:1',
+        enum: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      },
+      imageUrl: { default: null },
+      prompt: { default: '' },
+      seed: { default: null },
+    },
     releasedAt: '2025-05-01',
     type: 'image',
   },
@@ -41,7 +58,14 @@ const falImageModels: AIImageModelCard[] = [
     enabled: true,
     id: 'imagen4/preview',
     organization: 'Deepmind',
-    parameters: imagen4ParamsSchema,
+    parameters: {
+      aspectRatio: {
+        default: '1:1',
+        enum: ['1:1', '16:9', '9:16', '3:4', '4:3'],
+      },
+      prompt: { default: '' },
+      seed: { default: null },
+    },
     releasedAt: '2025-05-21',
     type: 'image',
   },

package/src/config/aiModels/openai.ts

@@ -1,4 +1,4 @@
-import { gptImage1ParamsSchema } from '@/config/paramsSchemas/openai/gpt-image-1';
+import { ModelParamsSchema } from '@/libs/standard-parameters';
 import {
   AIChatModelCard,
   AIEmbeddingModelCard,
@@ -8,6 +8,15 @@ import {
   AITTSModelCard,
 } from '@/types/aiModel';
 
+export const gptImage1ParamsSchema: ModelParamsSchema = {
+  imageUrls: { default: [] },
+  prompt: { default: '' },
+  size: {
+    default: 'auto',
+    enum: ['auto', '1024x1024', '1536x1024', '1024x1536'],
+  },
+};
+
 export const openaiChatModels: AIChatModelCard[] = [
   {
     abilities: {

package/src/features/ElectronTitlebar/WinControl/index.tsx

@@ -1,95 +1,90 @@
-import { createStyles } from 'antd-style';
-import { Minus, Square, XIcon } from 'lucide-react';
-
-import { electronSystemService } from '@/services/electron/system';
-
-import { TITLE_BAR_HEIGHT } from '../const';
-
-const useStyles = createStyles(({ css, cx, token }) => {
-  const icon = css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: ${TITLE_BAR_HEIGHT * 1.2}px;
-    min-height: ${TITLE_BAR_HEIGHT}px;
-
-    color: ${token.colorTextSecondary};
-
-    transition: all ease-in-out 100ms;
-
-    -webkit-app-region: no-drag;
-
-    &:hover {
-      color: ${token.colorText};
-      background: ${token.colorFillTertiary};
-    }
-
-    &:active {
-      color: ${token.colorText};
-      background: ${token.colorFillSecondary};
-    }
-  `;
-  return {
-    close: cx(
-      icon,
-      css`
-        padding-inline-end: 2px;
-
-        &:hover {
-          color: ${token.colorTextLightSolid};
-
-          /* win11 的色值，亮暗色均不变 */
-          background: #d33328;
-        }
-
-        &:active {
-          color: ${token.colorTextLightSolid};
-
-          /* win11 的色值 */
-          background: #8b2b25;
-        }
-      `,
-    ),
-    container: css`
-      cursor: pointer;
-      display: flex;
-    `,
-    icon,
-  };
-});
+// const useStyles = createStyles(({ css, cx, token }) => {
+//   const icon = css`
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//
+//     width: ${TITLE_BAR_HEIGHT * 1.2}px;
+//     min-height: ${TITLE_BAR_HEIGHT}px;
+//
+//     color: ${token.colorTextSecondary};
+//
+//     transition: all ease-in-out 100ms;
+//
+//     -webkit-app-region: no-drag;
+//
+//     &:hover {
+//       color: ${token.colorText};
+//       background: ${token.colorFillTertiary};
+//     }
+//
+//     &:active {
+//       color: ${token.colorText};
+//       background: ${token.colorFillSecondary};
+//     }
+//   `;
+//   return {
+//     close: cx(
+//       icon,
+//       css`
+//         padding-inline-end: 2px;
+//
+//         &:hover {
+//           color: ${token.colorTextLightSolid};
+//
+//           /* win11 的色值，亮暗色均不变 */
+//           background: #d33328;
+//         }
+//
+//         &:active {
+//           color: ${token.colorTextLightSolid};
+//
+//           /* win11 的色值 */
+//           background: #8b2b25;
+//         }
+//       `,
+//     ),
+//     container: css`
+//       cursor: pointer;
+//       display: flex;
+//     `,
+//     icon,
+//   };
+// });
 
 const WinControl = () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.container}>
-      <div
-        className={styles.icon}
-        onClick={() => {
-          electronSystemService.minimizeWindow();
-        }}
-      >
-        <Minus absoluteStrokeWidth size={14} strokeWidth={1.2} />
-      </div>
-      <div
-        className={styles.icon}
-        onClick={() => {
-          electronSystemService.maximizeWindow();
-        }}
-      >
-        <Square absoluteStrokeWidth size={10} strokeWidth={1.2} />
-      </div>
-      <div
-        className={styles.close}
-        onClick={() => {
-          electronSystemService.closeWindow();
-        }}
-      >
-        <XIcon absoluteStrokeWidth size={14} strokeWidth={1.2} />
-      </div>
-    </div>
-  );
+  return <div style={{ width: 132 }} />;
+
+  // const { styles } = useStyles();
+  //
+  // return (
+  //   <div className={styles.container}>
+  //     <div
+  //       className={styles.icon}
+  //       onClick={() => {
+  //         electronSystemService.minimizeWindow();
+  //       }}
+  //     >
+  //       <Minus absoluteStrokeWidth size={14} strokeWidth={1.2} />
+  //     </div>
+  //     <div
+  //       className={styles.icon}
+  //       onClick={() => {
+  //         electronSystemService.maximizeWindow();
+  //       }}
+  //     >
+  //       <Square absoluteStrokeWidth size={10} strokeWidth={1.2} />
+  //     </div>
+  //     <div
+  //       className={styles.close}
+  //       onClick={() => {
+  //         electronSystemService.closeWindow();
+  //       }}
+  //     >
+  //       <XIcon absoluteStrokeWidth size={14} strokeWidth={1.2} />
+  //     </div>
+  //   </div>
+  // );
 };
 
 export default WinControl;

package/src/features/ElectronTitlebar/hooks/useWatchThemeUpdate.ts

@@ -7,10 +7,14 @@ import { useElectronStore } from '@/store/electron';
 import { useGlobalStore } from '@/store/global';
 
 export const useWatchThemeUpdate = () => {
-  const [systemAppearance, updateElectronAppState] = useElectronStore((s) => [
-    s.appState.systemAppearance,
-    s.updateElectronAppState,
-  ]);
+  const [isAppStateInit, systemAppearance, updateElectronAppState, isMac] = useElectronStore(
+    (s) => [
+      s.isAppStateInit,
+      s.appState.systemAppearance,
+      s.updateElectronAppState,
+      s.appState.isMac,
+    ],
+  );
   const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);
 
   const theme = useTheme();
@@ -24,11 +28,12 @@ export const useWatchThemeUpdate = () => {
   });
 
   useEffect(() => {
+    if (!isAppStateInit || !isMac) return;
     document.documentElement.style.background = 'none';
 
     // https://x.com/alanblogsooo/status/1939208908993896684
     const isNotSameTheme = !systemAppearance ? true : theme.appearance !== systemAppearance;
 
     document.body.style.background = rgba(theme.colorBgLayout, isNotSameTheme ? 0.95 : 0.66);
-  }, [theme, systemAppearance]);
+  }, [theme, systemAppearance, isAppStateInit, isMac]);
 };

package/src/features/ImageTopicPanel/index.tsx

@@ -67,7 +67,6 @@ const ImageTopicPanel = memo<PropsWithChildren>(({ children }) => {
           flex: 'none',
           height: '100%',
           minWidth: 80,
-          padding: 16,
         }}
       >
         {children}

package/src/features/PluginDevModal/index.tsx

@@ -7,6 +7,8 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
+import { isDesktop } from '@/const/version';
+import { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
 import MCPManifestForm from './MCPManifestForm';
@@ -112,7 +114,7 @@ const DevModal = memo<DevModalProps>(
           containerMaxWidth={'auto'}
           destroyOnHidden
           footer={footer}
-          height={'100vh'}
+          height={isDesktop ? `calc(100vh - ${TITLE_BAR_HEIGHT}px)` : '100vh'}
           onClose={(e) => {
             e.stopPropagation();
             onOpenChange(false);

package/src/features/User/__tests__/UserAvatar.test.tsx

@@ -1,6 +1,7 @@
 import { act, render, screen } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { BRANDING_NAME } from '@/const/branding';
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
 
@@ -63,8 +64,8 @@ describe('UserAvatar', () => {
       });
 
       render(<UserAvatar />);
-      expect(screen.getByAltText('LobeChat')).toBeInTheDocument();
-      expect(screen.getByAltText('LobeChat')).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
+      expect(screen.getByAltText(BRANDING_NAME)).toBeInTheDocument();
+      expect(screen.getByAltText(BRANDING_NAME)).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
     });
   });
 
@@ -76,8 +77,8 @@ describe('UserAvatar', () => {
       });
 
       render(<UserAvatar />);
-      expect(screen.getByAltText('LobeChat')).toBeInTheDocument();
-      expect(screen.getByAltText('LobeChat')).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
+      expect(screen.getByAltText(BRANDING_NAME)).toBeInTheDocument();
+      expect(screen.getByAltText(BRANDING_NAME)).toHaveAttribute('src', DEFAULT_USER_AVATAR_URL);
     });
   });
 });

package/src/libs/model-runtime/fal/index.ts

@@ -3,7 +3,7 @@ import debug from 'debug';
 import { pick } from 'lodash-es';
 import { ClientOptions } from 'openai';
 
-import { RuntimeImageGenParamsValue } from '@/libs/standard-parameters/meta-schema';
+import { RuntimeImageGenParamsValue } from '@/libs/standard-parameters/index';
 
 import { LobeRuntimeAI } from '../BaseAI';
 import { AgentRuntimeErrorType } from '../error';

package/src/libs/model-runtime/types/image.ts

@@ -1,4 +1,4 @@
-import { RuntimeImageGenParams } from '@/libs/standard-parameters/meta-schema';
+import { RuntimeImageGenParams } from '@/libs/standard-parameters/index';
 
 export type CreateImagePayload = {
   model: string;

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

@@ -5,7 +5,7 @@ import OpenAI, { ClientOptions } from 'openai';
 import { Stream } from 'openai/streaming';
 
 import { LOBE_DEFAULT_MODEL_LIST } from '@/config/aiModels';
-import { RuntimeImageGenParamsValue } from '@/libs/standard-parameters/meta-schema';
+import { RuntimeImageGenParamsValue } from '@/libs/standard-parameters/index';
 import type { ChatModelCard } from '@/types/llm';
 import { getModelPropertyWithFallback } from '@/utils/getFallbackModelProperty';
 

package/src/libs/model-runtime/utils/response.ts

@@ -6,6 +6,8 @@ export const StreamingResponse = (
     headers: {
       'Cache-Control': 'no-cache',
       'Content-Type': 'text/event-stream',
+      // for Nginx: disable chunk buffering
+      'X-Accel-Buffering': 'no',
       ...options?.headers,
     },
   });

package/src/libs/model-runtime/utils/streams/google-ai.test.ts

@@ -186,6 +186,52 @@ describe('GoogleGenerativeAIStream', () => {
     ]);
   });
 
+  it('should handle token count with cached token count', async () => {
+    vi.spyOn(uuidModule, 'nanoid').mockReturnValueOnce('1');
+
+    const data = {
+      candidates: [{ content: { role: 'model' }, finishReason: 'STOP', index: 0 }],
+      usageMetadata: {
+        promptTokenCount: 15725,
+        candidatesTokenCount: 1053,
+        totalTokenCount: 16778,
+        cachedContentTokenCount: 14286,
+        promptTokensDetails: [{ modality: 'TEXT', tokenCount: 15725 }],
+        cacheTokensDetails: [{ modality: 'TEXT', tokenCount: 14286 }],
+      },
+      modelVersion: 'gemini-2.0-flash-exp',
+    };
+
+    const mockGoogleStream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(data);
+
+        controller.close();
+      },
+    });
+
+    const protocolStream = GoogleGenerativeAIStream(mockGoogleStream);
+
+    const decoder = new TextDecoder();
+    const chunks = [];
+
+    // @ts-ignore
+    for await (const chunk of protocolStream) {
+      chunks.push(decoder.decode(chunk, { stream: true }));
+    }
+
+    expect(chunks).toEqual([
+      // stop
+      'id: chat_1\n',
+      'event: stop\n',
+      `data: "STOP"\n\n`,
+      // usage
+      'id: chat_1\n',
+      'event: usage\n',
+      `data: {"inputCachedTokens":14286,"inputTextTokens":15725,"outputTextTokens":1053,"totalInputTokens":15725,"totalOutputTokens":1053,"totalTokens":16778}\n\n`,
+    ]);
+  });
+
   it('should handle stop with content', async () => {
     vi.spyOn(uuidModule, 'nanoid').mockReturnValueOnce('1');
 

package/src/libs/model-runtime/utils/streams/google-ai.ts

@@ -33,10 +33,10 @@ const transformGoogleGenerativeAIStream = (
       { data: candidate.finishReason, id: context?.id, type: 'stop' },
       {
         data: {
-          // TODO: Google SDK 0.24.0 don't have promptTokensDetails types
-          inputImageTokens: usage.promptTokensDetails?.find((i: any) => i.modality === 'IMAGE')
+          inputCachedTokens: usage.cachedContentTokenCount,
+          inputImageTokens: usage.promptTokensDetails?.find((i) => i.modality === 'IMAGE')
             ?.tokenCount,
-          inputTextTokens: usage.promptTokensDetails?.find((i: any) => i.modality === 'TEXT')
+          inputTextTokens: usage.promptTokensDetails?.find((i) => i.modality === 'TEXT')
             ?.tokenCount,
           outputReasoningTokens: reasoningTokens,
           outputTextTokens,
@@ -79,7 +79,7 @@ const transformGoogleGenerativeAIStream = (
     // 首先检查是否为 reasoning 内容 (thought: true)
     if (Array.isArray(candidate.content?.parts) && candidate.content.parts.length > 0) {
       for (const part of candidate.content.parts) {
-        if (part && part.text && (part as any).thought === true) {
+        if (part && part.text && part.thought === true) {
           return { data: part.text, id: context.id, type: 'reasoning' };
         }
       }

package/src/libs/model-runtime/utils/streams/vertex-ai.ts

@@ -31,13 +31,11 @@ const transformVertexAIStream = (
       { data: candidate.finishReason, id: context?.id, type: 'stop' },
       {
         data: {
-          // TODO: Google SDK 0.24.0 don't have promptTokensDetails types
-          inputImageTokens: (usage as any).promptTokensDetails?.find(
-            (i: any) => i.modality === 'IMAGE',
-          )?.tokenCount,
-          inputTextTokens: (usage as any).promptTokensDetails?.find(
-            (i: any) => i.modality === 'TEXT',
-          )?.tokenCount,
+          inputCachedTokens: usage.cachedContentTokenCount,
+          inputImageTokens: usage.promptTokensDetails?.find((i) => i.modality === 'IMAGE')
+            ?.tokenCount,
+          inputTextTokens: usage.promptTokensDetails?.find((i) => i.modality === 'TEXT')
+            ?.tokenCount,
           outputReasoningTokens,
           outputTextTokens,
           totalInputTokens: usage.promptTokenCount,
@@ -56,7 +54,7 @@ const transformVertexAIStream = (
     candidate.content.parts.length > 0
   ) {
     for (const part of candidate.content.parts) {
-      if (part && part.text && (part as any).thought === true) {
+      if (part && part.text && part.thought === true) {
         return { data: part.text, id: context.id, type: 'reasoning' };
       }
     }

package/src/libs/standard-parameters/{meta-schema.test.ts → index.test.ts}

@@ -6,7 +6,7 @@ import {
   type RuntimeImageGenParams,
   extractDefaultValues,
   validateModelParamsSchema,
-} from './meta-schema';
+} from './index';
 
 describe('meta-schema', () => {
   describe('ModelParamsMetaSchema', () => {