@lobehub/chat 1.98.2 → 1.99.0

package/src/app/[variants]/(main)/image/NotSupportClient.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { Database, FileImage, Network, Sparkles } from 'lucide-react';
+import Link from 'next/link';
+import { Trans, useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import FeatureList from '@/components/FeatureList';
+import { LOBE_CHAT_CLOUD } from '@/const/branding';
+import { DATABASE_SELF_HOSTING_URL, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
+
+const BLOCK_SIZE = 100;
+const ICON_SIZE = { size: 72, strokeWidth: 1.5 };
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 16px;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    height: 140px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorFillTertiary};
+    box-shadow: 0 0 0 1px ${token.colorFillTertiary} inset;
+
+    transition: background 0.3s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.5;
+    filter: blur(24px);
+  `,
+
+  icon: css`
+    border-radius: ${token.borderRadiusLG}px;
+    color: ${token.colorTextLightSolid};
+  `,
+  iconGroup: css`
+    margin-block-start: -44px;
+  `,
+}));
+
+const NotSupportClient = () => {
+  const { t } = useTranslation('image');
+  const theme = useTheme();
+  const { styles } = useStyles();
+
+  const features = [
+    {
+      avatar: Network,
+      desc: t('notSupportGuide.features.multiProviders.desc'),
+      title: t('notSupportGuide.features.multiProviders.title'),
+    },
+    {
+      avatar: Database,
+      desc: t('notSupportGuide.features.fileIntegration.desc'),
+      title: t('notSupportGuide.features.fileIntegration.title'),
+    },
+    {
+      avatar: Sparkles,
+      desc: t('notSupportGuide.features.llmAssisted.desc'),
+      title: t('notSupportGuide.features.llmAssisted.title'),
+    },
+  ];
+
+  return (
+    <Center gap={40} height={'100%'} width={'100%'}>
+      <Flexbox className={styles.iconGroup} gap={12} horizontal>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.purple,
+            transform: 'rotateZ(-20deg) translateX(10px)',
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={FileImage} size={ICON_SIZE} />
+        </Center>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.gold,
+            transform: 'translateY(-22px)',
+            zIndex: 1,
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={Sparkles} size={ICON_SIZE} />
+        </Center>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.geekblue,
+            transform: 'rotateZ(20deg) translateX(-10px)',
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={Network} size={ICON_SIZE} />
+        </Center>
+      </Flexbox>
+
+      <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
+        <Typography.Title>{t('notSupportGuide.title')}</Typography.Title>
+        <Typography.Text type={'secondary'}>
+          <Trans i18nKey={'notSupportGuide.desc'} ns={'image'}>
+            当前部署实例为客户端数据库模式，无法使用 AI 图像生成功能。请切换到
+            <Link href={DATABASE_SELF_HOSTING_URL}>服务端数据库部署模式</Link>
+            ，或直接使用官方的
+            <Link
+              href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=client_not_support_image`}
+            >
+              {LOBE_CHAT_CLOUD}
+            </Link>
+          </Trans>
+        </Typography.Text>
+      </Flexbox>
+
+      <Flexbox style={{ marginTop: 40 }}>
+        <FeatureList data={features} />
+      </Flexbox>
+    </Center>
+  );
+};
+
+export default NotSupportClient;

package/src/app/[variants]/(main)/image/_layout/Desktop/Container.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const Container = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+
+  return (
+    <Center
+      flex={1}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+      }}
+    >
+      <Flexbox
+        gap={16}
+        height={'100%'}
+        padding={24}
+        style={{
+          maxWidth: 906,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default Container;

package/src/app/[variants]/(main)/image/_layout/Desktop/RegisterHotkeys.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useRegisterImageHotkeys } from '@/hooks/useHotkeys/imageScope';
+
+const RegisterHotkeys = () => {
+  useRegisterImageHotkeys();
+  return null;
+};
+
+export default RegisterHotkeys;

package/src/app/[variants]/(main)/image/_layout/Desktop/index.tsx

@@ -0,0 +1,30 @@
+import { Flexbox } from 'react-layout-kit';
+
+import ImagePanel from '@/features/ImageSidePanel';
+import ImageTopicPanel from '@/features/ImageTopicPanel';
+
+import { LayoutProps } from '../type';
+import Container from './Container';
+import RegisterHotkeys from './RegisterHotkeys';
+
+const Layout = ({ children, menu, topic }: LayoutProps) => {
+  return (
+    <>
+      <Flexbox
+        height={'100%'}
+        horizontal
+        style={{ maxWidth: '100%', overflow: 'hidden', position: 'relative' }}
+        width={'100%'}
+      >
+        <ImagePanel>{menu}</ImagePanel>
+        <Container>{children}</Container>
+        <ImageTopicPanel>{topic}</ImageTopicPanel>
+      </Flexbox>
+      <RegisterHotkeys />
+    </>
+  );
+};
+
+Layout.displayName = 'DesktopAiImageLayout';
+
+export default Layout;

package/src/app/[variants]/(main)/image/_layout/Mobile/index.tsx

@@ -0,0 +1,14 @@
+import NProgress from '@/components/NProgress';
+
+const Layout = () => {
+  return (
+    <>
+      <NProgress />
+      <h2>Coming Soon!</h2>
+    </>
+  );
+};
+
+Layout.displayName = 'MobileAiImageLayout';
+
+export default Layout;

package/src/app/[variants]/(main)/image/_layout/type.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  menu: ReactNode;
+  topic: ReactNode;
+}

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

@@ -0,0 +1,196 @@
+'use client';
+
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { ModelTag } from '@lobehub/icons';
+import { ActionIconGroup, Block, Grid, Markdown, Tag, Text } from '@lobehub/ui';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { omit } from 'lodash-es';
+import { CopyIcon, RotateCcwSquareIcon, Trash2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InvalidAPIKey from '@/components/InvalidAPIKey';
+import { RuntimeImageGenParams } from '@/libs/standard-parameters/meta-schema';
+import { useImageStore } from '@/store/image';
+import { AsyncTaskErrorType } from '@/types/asyncTask';
+import { GenerationBatch } from '@/types/generation';
+
+import { GenerationItem } from './GenerationItem';
+
+const useStyles = createStyles(({ cx, css, token }) => ({
+  batchActions: cx(
+    'batch-actions',
+    css`
+      opacity: 0;
+      transition: opacity 0.1s ${token.motionEaseInOut};
+    `,
+  ),
+  batchDeleteButton: css`
+    &:hover {
+      border-color: ${token.colorError} !important;
+      color: ${token.colorError} !important;
+      background: ${token.colorErrorBg} !important;
+    }
+  `,
+  container: css`
+    &:hover {
+      .batch-actions {
+        opacity: 1;
+      }
+    }
+  `,
+
+  prompt: css`
+    pre {
+      overflow: hidden !important;
+      padding-block: 4px;
+      font-size: 13px;
+    }
+  `,
+}));
+
+// 扩展 dayjs 插件
+dayjs.extend(relativeTime);
+
+interface GenerationBatchItemProps {
+  batch: GenerationBatch;
+}
+
+export const GenerationBatchItem = memo<GenerationBatchItemProps>(({ batch }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['image', 'modelProvider', 'error']);
+  const { message } = App.useApp();
+
+  const [imageGridRef] = useAutoAnimate();
+
+  const activeTopicId = useImageStore((s) => s.activeGenerationTopicId);
+  const removeGenerationBatch = useImageStore((s) => s.removeGenerationBatch);
+  const recreateImage = useImageStore((s) => s.recreateImage);
+  const reuseSettings = useImageStore((s) => s.reuseSettings);
+
+  const time = useMemo(() => {
+    return dayjs(batch.createdAt).format('YYYY-MM-DD HH:mm:ss');
+  }, [batch.createdAt]);
+
+  const handleCopyPrompt = async () => {
+    try {
+      await navigator.clipboard.writeText(batch.prompt);
+      message.success(t('generation.actions.promptCopied'));
+    } catch (error) {
+      console.error('Failed to copy prompt:', error);
+      message.error(t('generation.actions.promptCopyFailed'));
+    }
+  };
+
+  const handleReuseSettings = () => {
+    reuseSettings(
+      batch.model,
+      batch.provider,
+      omit(batch.config as RuntimeImageGenParams, ['seed']),
+    );
+  };
+
+  const handleDeleteBatch = async () => {
+    if (!activeTopicId) return;
+
+    try {
+      await removeGenerationBatch(batch.id, activeTopicId);
+    } catch (error) {
+      console.error('Failed to delete batch:', error);
+    }
+  };
+
+  if (batch.generations.length === 0) {
+    return null;
+  }
+
+  const isInvalidApiKey = batch.generations.some(
+    (generation) => generation.task.error?.name === AsyncTaskErrorType.InvalidProviderAPIKey,
+  );
+
+  if (isInvalidApiKey) {
+    return (
+      <InvalidAPIKey
+        bedrockDescription={t('bedrock.unlock.imageGenerationDescription', { ns: 'modelProvider' })}
+        description={t('unlock.apiKey.imageGenerationDescription', {
+          name: batch.provider,
+          ns: 'error',
+        })}
+        id={batch.id}
+        onClose={() => {
+          removeGenerationBatch(batch.id, activeTopicId!);
+        }}
+        onRecreate={() => {
+          recreateImage(batch.id);
+        }}
+        provider={batch.provider}
+      />
+    );
+  }
+
+  return (
+    <Block className={styles.container} gap={8} variant="borderless">
+      <Markdown variant={'chat'}>{batch.prompt}</Markdown>
+      <Flexbox gap={4} horizontal justify="space-between" style={{ marginBottom: 10 }}>
+        <Flexbox gap={4} horizontal>
+          <ModelTag model={batch.model} />
+          {batch.width && batch.height && (
+            <Tag>
+              {batch.width} × {batch.height}
+            </Tag>
+          )}
+          <Tag>{t('generation.metadata.count', { count: batch.generations.length })}</Tag>
+        </Flexbox>
+      </Flexbox>
+      <Grid maxItemWidth={200} ref={imageGridRef} rows={batch.generations.length || 4}>
+        {batch.generations.map((generation) => (
+          <GenerationItem
+            generation={generation}
+            generationBatch={batch}
+            key={generation.id}
+            prompt={batch.prompt}
+          />
+        ))}
+      </Grid>
+      <Flexbox
+        align={'center'}
+        className={styles.batchActions}
+        horizontal
+        justify={'space-between'}
+      >
+        <Text as={'time'} fontSize={12} type={'secondary'}>
+          {time}
+        </Text>
+        <ActionIconGroup
+          items={[
+            {
+              icon: RotateCcwSquareIcon,
+              key: 'reuseSettings',
+              label: t('generation.actions.reuseSettings'),
+              onClick: handleReuseSettings,
+            },
+            {
+              icon: CopyIcon,
+              key: 'copyPrompt',
+              label: t('generation.actions.copyPrompt'),
+              onClick: handleCopyPrompt,
+            },
+            {
+              danger: true,
+              icon: Trash2,
+              key: 'deleteBatch',
+              label: t('generation.actions.deleteBatch'),
+              onClick: handleDeleteBatch,
+            },
+          ]}
+        />
+      </Flexbox>
+    </Block>
+  );
+});
+
+GenerationBatchItem.displayName = 'GenerationBatchItem';

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

@@ -0,0 +1,60 @@
+'use client';
+
+import { ActionIconGroup, ActionIconGroupProps } from '@lobehub/ui';
+import { Dices, Download, Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useStyles } from './styles';
+import { ActionButtonsProps } from './types';
+
+// 操作按钮组件
+export const ActionButtons = memo<ActionButtonsProps>(
+  ({
+    onDelete,
+    onDownload,
+    onCopySeed,
+    showDownload = false,
+    showCopySeed = false,
+    seedTooltip,
+  }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation('image');
+
+    return (
+      <ActionIconGroup
+        actionIconProps={{
+          tooltipProps: { placement: 'left' },
+        }}
+        className={styles.generationActionButton}
+        horizontal={false}
+        items={
+          [
+            Boolean(showDownload && onDownload) && {
+              icon: Download,
+              key: 'download',
+              label: t('generation.actions.download'),
+              onClick: onDownload,
+            },
+            Boolean(showCopySeed && onCopySeed) && {
+              icon: Dices,
+              key: 'copySeed',
+              label: seedTooltip,
+              onClick: onCopySeed,
+            },
+            {
+              danger: true,
+              icon: Trash2,
+              key: 'delete',
+              label: t('generation.actions.delete'),
+              onClick: onDelete,
+            },
+          ].filter(Boolean) as ActionIconGroupProps['items']
+        }
+        variant="outlined"
+      />
+    );
+  },
+);
+
+ActionButtons.displayName = 'ActionButtons';

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { Text } from '@lobehub/ui';
+import { useEffect, useRef, useState } from 'react';
+
+interface ElapsedTimeProps {
+  generationId: string;
+  isActive: boolean;
+}
+
+const getSessionStorageKey = (generationId: string) => `generation_start_time_${generationId}`;
+
+/**
+ * 显示图片生成的耗时
+ * - 少于1分钟：显示秒数，精度0.1秒
+ * - 1分钟或以上：显示分钟数，精度1位小数
+ * - 使用 sessionStorage 在页面刷新时保持准确计时
+ */
+export function ElapsedTime({ generationId, isActive }: ElapsedTimeProps) {
+  const [elapsedTime, setElapsedTime] = useState<number | null>(null);
+  const frameRef = useRef<number | null>(null);
+  const lastUpdateRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (!isActive) {
+      // 如果不是活跃状态，清理计时器并重置时间
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+
+      // 清理 sessionStorage 中的数据
+      const storageKey = getSessionStorageKey(generationId);
+      sessionStorage.removeItem(storageKey);
+      setElapsedTime(null);
+      return;
+    }
+
+    const storageKey = getSessionStorageKey(generationId);
+
+    // 只在组件挂载时设置开始时间
+    const clientStartTime = (() => {
+      const stored = sessionStorage.getItem(storageKey);
+      if (stored) return Number(stored);
+
+      const now = Date.now();
+      sessionStorage.setItem(storageKey, now.toString());
+      return now;
+    })();
+
+    const update = (timestamp: number) => {
+      if (timestamp - lastUpdateRef.current >= 100) {
+        const elapsed = (Date.now() - clientStartTime) / 100;
+        setElapsedTime(Math.max(0, elapsed));
+        lastUpdateRef.current = timestamp;
+      }
+      frameRef.current = requestAnimationFrame(update);
+    };
+
+    frameRef.current = requestAnimationFrame(update);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [generationId, isActive]);
+
+  // 格式化耗时显示
+  const formattedTime = (() => {
+    if (elapsedTime === null) return '';
+
+    const totalSeconds = elapsedTime / 10;
+
+    // 少于60秒，显示秒数，精度0.1秒
+    if (totalSeconds < 60) {
+      return `${totalSeconds.toFixed(1)}s`;
+    }
+
+    // 60秒或以上，显示分钟数，精度1位小数
+    const minutes = totalSeconds / 60;
+    return `${minutes.toFixed(1)}min`;
+  })();
+
+  return (
+    <Text code fontSize={10} type={'secondary'}>
+      {formattedTime}
+    </Text>
+  );
+}

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

@@ -0,0 +1,65 @@
+'use client';
+
+import { Block, Icon, Text } from '@lobehub/ui';
+import { ImageOffIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { ActionButtons } from './ActionButtons';
+import { useStyles } from './styles';
+import { ErrorStateProps } from './types';
+
+// 错误状态组件
+export const ErrorState = memo<ErrorStateProps>(
+  ({ generation, aspectRatio, onDelete, onCopyError }) => {
+    const { styles, theme } = useStyles();
+    const { t } = useTranslation('image');
+
+    const errorMessage = generation.task.error
+      ? typeof generation.task.error.body === 'string'
+        ? generation.task.error.body
+        : generation.task.error.body?.detail || generation.task.error.name || 'Unknown error'
+      : '';
+
+    return (
+      <Block
+        align={'center'}
+        className={styles.placeholderContainer}
+        justify={'center'}
+        onClick={onCopyError}
+        padding={16}
+        style={{
+          aspectRatio,
+          cursor: 'pointer',
+          maxWidth: generation.asset?.width ? generation.asset.width / 2 : 'unset',
+        }}
+        variant={'filled'}
+      >
+        <Center gap={8}>
+          <Icon color={theme.colorTextDescription} icon={ImageOffIcon} size={24} />
+          <Text strong type={'secondary'}>
+            {t('generation.status.failed')}
+          </Text>
+          {generation.task.error && (
+            <Text
+              code
+              ellipsis={{ rows: 2 }}
+              fontSize={10}
+              style={{
+                wordBreak: 'break-all',
+              }}
+              title={t('generation.actions.copyError')}
+              type={'secondary'}
+            >
+              {errorMessage}
+            </Text>
+          )}
+        </Center>
+        <ActionButtons onDelete={onDelete} />
+      </Block>
+    );
+  },
+);
+
+ErrorState.displayName = 'ErrorState';