@lobehub/chat 1.116.4 → 1.117.1

package/src/components/ChatItem/components/Title.tsx

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import { ChatItemProps } from '../type';
+
+export interface TitleProps {
+  avatar: ChatItemProps['avatar'];
+  placement?: ChatItemProps['placement'];
+  showTitle?: ChatItemProps['showTitle'];
+  time?: ChatItemProps['time'];
+}
+
+const formatTime = (time: number): string => {
+  const now = dayjs();
+  const target = dayjs(time);
+
+  if (target.isSame(now, 'day')) {
+    return target.format('HH:mm:ss');
+  } else if (target.isSame(now, 'year')) {
+    return target.format('MM-DD HH:mm:ss');
+  } else {
+    return target.format('YYYY-MM-DD HH:mm:ss');
+  }
+};
+
+const Title = memo<TitleProps>(({ showTitle, placement, time, avatar }) => {
+  const { styles } = useStyles({ placement, showTitle, time });
+
+  return (
+    <Flexbox
+      className={styles.name}
+      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+      gap={4}
+    >
+      {showTitle ? avatar.title || 'untitled' : undefined}
+      {time && <time>{formatTime(time)}</time>}
+    </Flexbox>
+  );
+});
+
+export default Title;

package/src/components/ChatItem/index.ts

@@ -0,0 +1,2 @@
+export { default as ChatItem } from './ChatItem';
+export type * from './type';

package/src/components/ChatItem/style.ts

@@ -0,0 +1,208 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+
+export const useStyles = createStyles(
+  (
+    { cx, css, token, responsive },
+    {
+      placement,
+      variant,
+      title,
+      avatarSize,
+      editing,
+      time,
+    }: {
+      avatarSize?: number;
+      editing?: boolean;
+      placement?: 'left' | 'right';
+      primary?: boolean;
+      showTitle?: boolean;
+      time?: number;
+      title?: string;
+      variant?: 'bubble' | 'docs';
+    },
+  ) => {
+    const blockStylish = css`
+      padding-block: 8px;
+      padding-inline: 12px;
+      border: 1px solid ${rgba(token.colorBorderSecondary, 0.66)};
+      border-radius: ${token.borderRadiusLG}px;
+
+      background-color: ${token.colorBgContainer};
+    `;
+
+    const rawStylish = css`
+      padding-block-start: ${title ? 0 : '6px'};
+    `;
+
+    const rawContainerStylish = css`
+      margin-block-end: -16px;
+      transition: background-color 100ms ${token.motionEaseOut};
+    `;
+
+    const typeStylish = variant === 'bubble' ? blockStylish : rawStylish;
+
+    const editingStylish =
+      editing &&
+      css`
+        width: 100%;
+      `;
+
+    return {
+      actions: cx(
+        css`
+          flex: none;
+          align-self: ${variant === 'bubble'
+            ? 'flex-end'
+            : placement === 'left'
+              ? 'flex-start'
+              : 'flex-end'};
+          justify-content: ${placement === 'left' ? 'flex-end' : 'flex-start'};
+        `,
+        editing &&
+          css`
+            pointer-events: none !important;
+            opacity: 0 !important;
+          `,
+      ),
+      avatarContainer: css`
+        position: relative;
+        flex: none;
+        width: ${avatarSize}px;
+        height: ${avatarSize}px;
+      `,
+      avatarGroupContainer: css`
+        width: ${avatarSize}px;
+      `,
+      container: cx(
+        variant === 'docs' && rawContainerStylish,
+        css`
+          position: relative;
+
+          width: 100%;
+          max-width: 100vw;
+          padding-block: 24px 12px;
+          padding-inline: 12px;
+
+          time {
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          div[role='menubar'] {
+            display: flex;
+          }
+
+          time,
+          div[role='menubar'] {
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 200ms ${token.motionEaseOut};
+          }
+
+          &:hover {
+            time,
+            div[role='menubar'] {
+              pointer-events: unset;
+              opacity: 1;
+            }
+          }
+
+          ${responsive.mobile} {
+            padding-block-start: ${variant === 'docs' ? '16px' : '12px'};
+            padding-inline: 8px;
+          }
+        `,
+      ),
+      editingContainer: cx(
+        editingStylish,
+        css`
+          padding-block: 8px 12px;
+          padding-inline: 12px;
+          border: 1px solid ${token.colorBorderSecondary};
+
+          &:active,
+          &:hover {
+            border-color: ${token.colorBorder};
+          }
+        `,
+        variant === 'docs' &&
+          css`
+            border-radius: ${token.borderRadius}px;
+            background: ${token.colorFillQuaternary};
+          `,
+      ),
+      editingInput: css`
+        width: 100%;
+      `,
+      errorContainer: css`
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+      `,
+
+      loading: css`
+        position: absolute;
+        inset-block-end: 0;
+        inset-inline: ${placement === 'right' ? '-4px' : 'unset'}
+          ${placement === 'left' ? '-4px' : 'unset'};
+
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+
+        color: ${token.colorBgLayout};
+
+        background: ${token.colorPrimary};
+      `,
+      message: cx(
+        typeStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+
+          ${responsive.mobile} {
+            width: 100%;
+          }
+        `,
+      ),
+      messageContainer: cx(
+        editingStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+          margin-block-start: ${time ? -16 : 0}px;
+
+          ${responsive.mobile} {
+            overflow-x: auto;
+          }
+        `,
+      ),
+      messageContent: cx(
+        editingStylish,
+        css`
+          position: relative;
+          overflow: hidden;
+          max-width: 100%;
+
+          ${responsive.mobile} {
+            flex-direction: column !important;
+          }
+        `,
+      ),
+      messageExtra: cx('message-extra'),
+      name: css`
+        pointer-events: none;
+
+        margin-block-end: 6px;
+
+        font-size: 12px;
+        line-height: 1;
+        color: ${token.colorTextDescription};
+        text-align: ${placement === 'left' ? 'left' : 'right'};
+      `,
+    };
+  },
+);

package/src/components/ChatItem/type.ts

@@ -0,0 +1,80 @@
+import { AlertProps, AvatarProps, DivProps, MarkdownProps } from '@lobehub/ui';
+import { EditableMessageProps, MetaData } from '@lobehub/ui/chat';
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+
+export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange'> {
+  aboveMessage?: ReactNode;
+  /**
+   * @description Actions to be displayed in the chat item
+   */
+  actions?: ReactNode;
+  actionsWrapWidth?: number;
+  /**
+   * @description Metadata for the avatar
+   */
+  avatar: MetaData;
+  avatarAddon?: ReactNode;
+  avatarProps?: AvatarProps;
+  belowMessage?: ReactNode;
+  /**
+   * @description Whether the chat item is in editing mode
+   */
+  editing?: boolean;
+  /**
+   * @description Props for Error render
+   */
+  error?: AlertProps;
+  errorMessage?: ReactNode;
+  fontSize?: number;
+  /**
+   * @description Whether the chat item is in loading state
+   */
+  loading?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  /**
+   * @description The message content of the chat item
+   */
+  message?: ReactNode;
+  messageExtra?: ReactNode;
+  onAvatarClick?: () => void;
+  /**
+   * @description Callback when the message content changes
+   * @param value - The new message content
+   */
+  onChange?: (value: string) => void;
+  onDoubleClick?: DivProps['onDoubleClick'];
+  /**
+   * @description Callback when the editing mode changes
+   * @param editing - The new editing mode
+   */
+  onEditingChange?: (editing: boolean) => void;
+  /**
+   * @default "..."
+   */
+  placeholderMessage?: string;
+  /**
+   * @description The placement of the chat item
+   * @default 'left'
+   */
+  placement?: 'left' | 'right';
+  /**
+   * @description Whether the chat item is primary
+   */
+  primary?: boolean;
+  renderMessage?: (content: ReactNode) => ReactNode;
+  /**
+   * @description Whether to show the title of the chat item
+   */
+  showTitle?: boolean;
+  text?: EditableMessageProps['text'];
+  /**
+   * @description The timestamp of the chat item
+   */
+  time?: number;
+  /**
+   * @description The type of the chat item
+   * @default 'bubble'
+   */
+  variant?: 'bubble' | 'docs';
+}

package/src/config/aiModels/google.ts

@@ -1,3 +1,4 @@
+import { CHAT_MODEL_IMAGE_GENERATION_PARAMS } from '@/const/image';
 import { ModelParamsSchema } from '@/libs/standard-parameters';
 import { AIChatModelCard, AIImageModelCard } from '@/types/aiModel';
 
@@ -194,21 +195,21 @@ const googleChatModels: AIChatModelCard[] = [
       imageOutput: true,
       vision: true,
     },
-    contextWindowTokens: 32_768 + 32_768,
+    contextWindowTokens: 32_768 + 8192,
     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,
+    maxOutput: 8192,
     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' },
+        { name: 'imageOutput', rate: 30, strategy: 'fixed', unit: 'millionTokens' },
       ],
     },
-    releasedAt: '2025-08-27',
+    releasedAt: '2025-08-26',
     type: 'chat',
   },
   {
@@ -605,71 +606,90 @@ const imagenBaseParameters: ModelParamsSchema = {
   prompt: { default: '' },
 };
 
+/* eslint-disable sort-keys-fix/sort-keys-fix */
 const googleImageModels: AIImageModelCard[] = [
   {
-    description: 'Imagen 4th generation text-to-image model series',
-    displayName: 'Imagen 4',
+    displayName: 'Gemini 2.5 Flash Image Preview',
+    id: 'gemini-2.5-flash-image-preview:image',
     enabled: true,
+    type: 'image',
+    description:
+      'Gemini 2.5 Flash Image Preview 是 Google 最新、最快、最高效的原生多模态模型，它允许您通过对话生成和编辑图像。',
+    releasedAt: '2025-08-26',
+    parameters: CHAT_MODEL_IMAGE_GENERATION_PARAMS,
+    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' },
+      ],
+    },
+  },
+  {
+    displayName: 'Imagen 4',
     id: 'imagen-4.0-generate-001',
+    enabled: true,
+    type: 'image',
+    description: 'Imagen 4th generation text-to-image model series',
     organization: 'Deepmind',
+    releasedAt: '2025-08-15',
     parameters: imagenBaseParameters,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.04, strategy: 'fixed', unit: 'image' }],
     },
-    releasedAt: '2024-08-14',
-    type: 'image',
   },
   {
-    description: 'Imagen 4th generation text-to-image model series Ultra version',
     displayName: 'Imagen 4 Ultra',
-    enabled: true,
     id: 'imagen-4.0-ultra-generate-001',
+    enabled: true,
+    type: 'image',
+    description: 'Imagen 4th generation text-to-image model series Ultra version',
     organization: 'Deepmind',
+    releasedAt: '2025-08-15',
     parameters: imagenBaseParameters,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.06, strategy: 'fixed', unit: 'image' }],
     },
-    releasedAt: '2024-08-14',
-    type: 'image',
   },
   {
-    description: 'Imagen 4th generation text-to-image model series Fast version',
     displayName: 'Imagen 4 Fast',
-    enabled: true,
     id: 'imagen-4.0-fast-generate-001',
+    enabled: true,
+    type: 'image',
+    description: 'Imagen 4th generation text-to-image model series Fast version',
     organization: 'Deepmind',
+    releasedAt: '2025-08-15',
     parameters: imagenBaseParameters,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.02, strategy: 'fixed', unit: 'image' }],
     },
-    releasedAt: '2024-08-14',
-    type: 'image',
   },
   {
-    description: 'Imagen 4th generation text-to-image model series',
     displayName: 'Imagen 4 Preview 06-06',
     id: 'imagen-4.0-generate-preview-06-06',
+    type: 'image',
+    description: 'Imagen 4th generation text-to-image model series',
     organization: 'Deepmind',
+    releasedAt: '2024-06-06',
     parameters: imagenBaseParameters,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.04, strategy: 'fixed', unit: 'image' }],
     },
-    releasedAt: '2024-06-06',
-    type: 'image',
   },
   {
-    description: 'Imagen 4th generation text-to-image model series Ultra version',
     displayName: 'Imagen 4 Ultra Preview 06-06',
     id: 'imagen-4.0-ultra-generate-preview-06-06',
+    type: 'image',
+    description: 'Imagen 4th generation text-to-image model series Ultra version',
     organization: 'Deepmind',
+    releasedAt: '2025-06-11',
     parameters: imagenBaseParameters,
     pricing: {
       units: [{ name: 'imageGeneration', rate: 0.06, strategy: 'fixed', unit: 'image' }],
     },
-    releasedAt: '2024-06-06',
-    type: 'image',
   },
 ];
+/* eslint-enable sort-keys-fix/sort-keys-fix */
 
 export const allModels = [...googleChatModels, ...googleImageModels];
 

package/src/config/aiModels/openrouter.ts

@@ -11,6 +11,39 @@ const openrouterChatModels: AIChatModelCard[] = [
     id: 'openrouter/auto',
     type: 'chat',
   },
+  {
+    abilities: {
+      imageOutput: true,
+      vision: true,
+    },
+    contextWindowTokens: 32_768 + 8192,
+    description: 'Gemini 2.5 Flash 实验模型，支持图像生成',
+    displayName: 'Gemini 2.5 Flash Image Preview',
+    id: 'google/gemini-2.5-flash-image-preview',
+    maxOutput: 8192,
+    pricing: {
+      units: [
+        { name: 'imageOutput', rate: 30, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textInput', rate: 0.3, strategy: 'fixed', unit: 'millionTokens' },
+        { name: 'textOutput', rate: 2.5, strategy: 'fixed', unit: 'millionTokens' },
+      ],
+    },
+    releasedAt: '2025-08-26',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      imageOutput: true,
+      vision: true,
+    },
+    contextWindowTokens: 32_768 + 8192,
+    description: 'Gemini 2.5 Flash 实验模型，支持图像生成',
+    displayName: 'Gemini 2.5 Flash Image Preview (free)',
+    id: 'google/gemini-2.5-flash-image-preview:free',
+    maxOutput: 8192,
+    releasedAt: '2025-08-26',
+    type: 'chat',
+  },
   {
     abilities: {
       reasoning: true,

package/src/config/aiModels/vertexai.ts

@@ -126,21 +126,21 @@ const vertexaiChatModels: AIChatModelCard[] = [
       imageOutput: true,
       vision: true,
     },
-    contextWindowTokens: 32_768 + 32_768,
+    contextWindowTokens: 32_768 + 8192,
     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,
+    maxOutput: 8192,
     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' },
+        { name: 'imageOutput', rate: 30, strategy: 'fixed', unit: 'millionTokens' },
       ],
     },
-    releasedAt: '2025-08-27',
+    releasedAt: '2025-08-26',
     type: 'chat',
   },
   {

package/src/features/ChatItem/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { ChatItemProps, ChatItem as ChatItemRaw } from '@lobehub/ui/chat';
 import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 
+import { ChatItemProps, ChatItem as ChatItemRaw } from '@/components/ChatItem';
 import { isDesktop } from '@/const/version';
 import { useElectronStore } from '@/store/electron';
 import { electronSyncSelectors } from '@/store/electron/selectors';

package/src/features/Conversation/Extras/Usage/UsageDetail/index.tsx

@@ -61,6 +61,12 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
         ? detailTokens.outputReasoning.credit
         : detailTokens.outputReasoning.token,
     },
+    !!detailTokens.outputImage && {
+      color: theme.purple,
+      id: 'outputImage',
+      title: t('messages.tokenDetails.outputImage'),
+      value: isShowCredit ? detailTokens.outputImage.credit : detailTokens.outputImage.token,
+    },
     !!detailTokens.outputAudio && {
       color: theme.cyan9,
       id: 'outputAudio',

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.test.ts

@@ -143,6 +143,44 @@ describe('getDetailsToken', () => {
     });
   });
 
+  it('should handle outputImageTokens correctly', () => {
+    const usage = {
+      inputTextTokens: 100,
+      outputImageTokens: 60,
+      outputReasoningTokens: 30,
+      totalOutputTokens: 200,
+      totalTokens: 300,
+    } as ModelTokensUsage;
+
+    const result = getDetailsToken(usage, mockModelCard);
+
+    expect(result.outputImage).toEqual({
+      credit: 1, // 60 * 0.02 = 1.2 -> 1
+      id: 'outputImage',
+      token: 60,
+    });
+
+    expect(result.outputReasoning).toEqual({
+      credit: 1, // 30 * 0.02 = 0.6 -> 1
+      token: 30,
+    });
+
+    expect(result.outputText).toEqual({
+      credit: 2, // (200 - 30 - 60) * 0.02 = 2.2 -> 2
+      token: 110,
+    });
+
+    expect(result.totalOutput).toEqual({
+      credit: 4, // 200 * 0.02 = 4
+      token: 200,
+    });
+
+    expect(result.totalTokens).toEqual({
+      credit: 4, // total credit equals totalOutputCredit here
+      token: 300,
+    });
+  });
+
   it('should handle inputCitationTokens correctly', () => {
     const usage: ModelTokensUsage = {
       inputCitationTokens: 75,

package/src/features/Conversation/Extras/Usage/UsageDetail/tokens.ts

@@ -21,9 +21,14 @@ export const getDetailsToken = (
 
   const outputReasoningTokens = usage.outputReasoningTokens || (usage as any).reasoningTokens || 0;
 
+  const outputImageTokens = usage.outputImageTokens || (usage as any).imageTokens || 0;
+
   const outputTextTokens = usage.outputTextTokens
     ? usage.outputTextTokens
-    : totalOutputTokens - outputReasoningTokens - (usage.outputAudioTokens || 0);
+    : totalOutputTokens -
+      outputReasoningTokens -
+      (usage.outputAudioTokens || 0) -
+      outputImageTokens;
 
   const inputWriteCacheTokens = usage.inputWriteCacheTokens || 0;
   const inputCacheTokens = usage.inputCachedTokens || (usage as any).cachedTokens || 0;
@@ -93,6 +98,13 @@ export const getDetailsToken = (
           token: usage.outputAudioTokens,
         }
       : undefined,
+    outputImage: !!outputImageTokens
+      ? {
+          credit: calcCredit(outputImageTokens, formatPrice.output),
+          id: 'outputImage',
+          token: outputImageTokens,
+        }
+      : undefined,
     outputReasoning: !!outputReasoningTokens
       ? {
           credit: calcCredit(outputReasoningTokens, formatPrice.output),

package/src/locales/default/chat.ts

@@ -128,6 +128,7 @@ export default {
       inputWriteCached: '输入缓存写入',
       output: '输出',
       outputAudio: '音频输出',
+      outputImage: '图像输出',
       outputText: '文本输出',
       outputTitle: '输出明细',
       reasoning: '深度思考',