@lobehub/chat 1.98.1 → 1.99.0

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { Block } from '@lobehub/ui';
+import { Spin } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import { AsyncTaskStatus } from '@/types/asyncTask';
+
+import { ActionButtons } from './ActionButtons';
+import { ElapsedTime } from './ElapsedTime';
+import { useStyles } from './styles';
+import { LoadingStateProps } from './types';
+
+// 加载状态组件
+export const LoadingState = memo<LoadingStateProps>(({ generation, aspectRatio, onDelete }) => {
+  const { styles } = useStyles();
+
+  const isGenerating =
+    generation.task.status === AsyncTaskStatus.Processing ||
+    generation.task.status === AsyncTaskStatus.Pending;
+
+  return (
+    <Block
+      align={'center'}
+      className={styles.placeholderContainer}
+      justify={'center'}
+      style={{
+        aspectRatio,
+        maxWidth: generation.asset?.width ? generation.asset.width / 2 : 'unset',
+      }}
+      variant={'filled'}
+    >
+      <Center gap={8}>
+        <Spin percent={'auto'} />
+        <ElapsedTime generationId={generation.id} isActive={isGenerating} />
+      </Center>
+      <ActionButtons onDelete={onDelete} />
+    </Block>
+  );
+});
+
+LoadingState.displayName = 'LoadingState';

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { Block } from '@lobehub/ui';
+import { memo } from 'react';
+
+import ImageItem from '@/components/ImageItem';
+
+import { ActionButtons } from './ActionButtons';
+import { useStyles } from './styles';
+import { SuccessStateProps } from './types';
+
+// 成功状态组件
+export const SuccessState = memo<SuccessStateProps>(
+  ({ generation, prompt, aspectRatio, onDelete, onDownload, onCopySeed, seedTooltip }) => {
+    const { styles } = useStyles();
+
+    return (
+      <Block
+        align={'center'}
+        className={styles.imageContainer}
+        justify={'center'}
+        style={{
+          aspectRatio,
+          maxWidth: generation.asset?.width ? generation.asset.width / 2 : 'unset',
+        }}
+        variant={'filled'}
+      >
+        <ImageItem
+          alt={prompt}
+          preview={{
+            src: generation.asset!.url,
+          }}
+          style={{ height: '100%', width: '100%' }}
+          url={generation.asset!.thumbnailUrl}
+        />
+        <ActionButtons
+          onCopySeed={onCopySeed}
+          onDelete={onDelete}
+          onDownload={onDownload}
+          seedTooltip={seedTooltip}
+          showCopySeed={!!generation.seed}
+          showDownload
+        />
+      </Block>
+    );
+  },
+);
+
+SuccessState.displayName = 'SuccessState';

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

@@ -0,0 +1,156 @@
+'use client';
+
+import { App } from 'antd';
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDownloadImage } from '@/hooks/useDownloadImage';
+import { useImageStore } from '@/store/image';
+import { imageGenerationConfigSelectors } from '@/store/image/selectors';
+import { AsyncTaskStatus } from '@/types/asyncTask';
+import { inferFileExtensionFromImageUrl } from '@/utils/url';
+
+import { ErrorState } from './ErrorState';
+import { LoadingState } from './LoadingState';
+import { SuccessState } from './SuccessState';
+import { GenerationItemProps } from './types';
+import { getAspectRatio } from './utils';
+
+const isSupportedParamSelector = imageGenerationConfigSelectors.isSupportedParam;
+
+export const GenerationItem = memo<GenerationItemProps>(
+  ({ generationBatch, generation, prompt }) => {
+    const { message } = App.useApp();
+    const { t } = useTranslation('image');
+    const useCheckGenerationStatus = useImageStore((s) => s.useCheckGenerationStatus);
+    const deleteGeneration = useImageStore((s) => s.removeGeneration);
+    const reuseSeed = useImageStore((s) => s.reuseSeed);
+    const activeTopicId = useImageStore((s) => s.activeGenerationTopicId);
+    const isSupportSeed = useImageStore(isSupportedParamSelector('seed'));
+    const { downloadImage } = useDownloadImage();
+
+    const isFinalized =
+      generation.task.status === AsyncTaskStatus.Success ||
+      generation.task.status === AsyncTaskStatus.Error;
+
+    const shouldPoll = !isFinalized;
+    useCheckGenerationStatus(generation.id, generation.task.id, activeTopicId!, shouldPoll);
+
+    const aspectRatio = getAspectRatio(
+      generation.asset ?? {
+        height: generationBatch.config?.height,
+        type: 'image',
+        width: generationBatch.config?.width,
+      },
+    );
+
+    // 事件处理函数
+    const handleDeleteGeneration = async () => {
+      try {
+        await deleteGeneration(generation.id);
+      } catch (error) {
+        console.error('Failed to delete generation:', error);
+      }
+    };
+
+    const handleDownloadImage = async () => {
+      if (!generation.asset?.url) return;
+
+      // Generate filename with prompt and timestamp
+      const timestamp = dayjs(generation.createdAt).format('YYYY-MM-DD_HH-mm-ss');
+      const safePrompt = prompt
+        .slice(0, 30)
+        .replaceAll(/[^\s\w-]/g, '')
+        .trim();
+
+      // Detect file extension from URL
+      const fileExtension = inferFileExtensionFromImageUrl(generation.asset.url);
+      const fileName = `${safePrompt}_${timestamp}.${fileExtension}`;
+
+      await downloadImage(generation.asset.url, fileName);
+    };
+
+    const handleCopySeed = async () => {
+      if (!generation.seed) return;
+
+      // If current model supports seed parameter, apply it directly to configuration
+      if (isSupportSeed) {
+        try {
+          reuseSeed(generation.seed);
+          message.success(t('generation.actions.seedApplied'));
+        } catch (error) {
+          console.error('Failed to apply seed:', error);
+          message.error(t('generation.actions.seedApplyFailed'));
+        }
+      } else {
+        // If current model doesn't support seed parameter, copy to clipboard
+        try {
+          await navigator.clipboard.writeText(generation.seed.toString());
+          message.success(t('generation.actions.seedCopied'));
+        } catch (error) {
+          console.error('Failed to copy seed:', error);
+          message.error(t('generation.actions.seedCopyFailed'));
+        }
+      }
+    };
+
+    const handleCopyError = async () => {
+      if (!generation.task.error) return;
+
+      const errorMessage =
+        typeof generation.task.error.body === 'string'
+          ? generation.task.error.body
+          : generation.task.error.body?.detail || generation.task.error.name || 'Unknown error';
+
+      try {
+        await navigator.clipboard.writeText(errorMessage);
+        message.success(t('generation.actions.errorCopied'));
+      } catch (error) {
+        console.error('Failed to copy error message:', error);
+        message.error(t('generation.actions.errorCopyFailed'));
+      }
+    };
+
+    // 根据状态渲染对应组件
+    if (generation.task.status === AsyncTaskStatus.Success && generation.asset?.url) {
+      const seedTooltip = isSupportSeed
+        ? t('generation.actions.applySeed')
+        : t('generation.actions.copySeed');
+
+      return (
+        <SuccessState
+          aspectRatio={aspectRatio}
+          generation={generation}
+          onCopySeed={handleCopySeed}
+          onDelete={handleDeleteGeneration}
+          onDownload={handleDownloadImage}
+          prompt={prompt}
+          seedTooltip={seedTooltip}
+        />
+      );
+    }
+
+    if (generation.task.status === AsyncTaskStatus.Error) {
+      return (
+        <ErrorState
+          aspectRatio={aspectRatio}
+          generation={generation}
+          onCopyError={handleCopyError}
+          onDelete={handleDeleteGeneration}
+        />
+      );
+    }
+
+    // Loading state (Processing 或 Pending)
+    return (
+      <LoadingState
+        aspectRatio={aspectRatio}
+        generation={generation}
+        onDelete={handleDeleteGeneration}
+      />
+    );
+  },
+);
+
+GenerationItem.displayName = 'GenerationItem';

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

@@ -0,0 +1,51 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ cx, css, token }) => ({
+  // 图片操作按钮的公共样式
+  generationActionButton: cx(
+    'generation-actions',
+    css`
+      position: absolute;
+      z-index: 10;
+      inset-block-start: 8px;
+      inset-inline-end: 8px;
+
+      opacity: 0;
+
+      transition: opacity 0.1s ${token.motionEaseInOut};
+    `,
+  ),
+
+  imageContainer: css`
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    &:hover .generation-actions {
+      opacity: 1;
+    }
+  `,
+  loadingContent: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  placeholderContainer: css`
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    &:hover .generation-actions {
+      opacity: 1;
+    }
+  `,
+
+  spinIcon: css`
+    color: ${token.colorPrimary};
+  `,
+}));

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

@@ -0,0 +1,39 @@
+import { Generation, GenerationBatch } from '@/types/generation';
+
+export interface GenerationItemProps {
+  generation: Generation;
+  generationBatch: GenerationBatch;
+  prompt: string;
+}
+
+export interface ActionButtonsProps {
+  onCopySeed?: () => void;
+  onDelete: () => void;
+  onDownload?: () => void;
+  seedTooltip?: string;
+  showCopySeed?: boolean;
+  showDownload?: boolean;
+}
+
+export interface SuccessStateProps {
+  aspectRatio: string;
+  generation: Generation;
+  onCopySeed?: () => void;
+  onDelete: () => void;
+  onDownload: () => void;
+  prompt: string;
+  seedTooltip?: string;
+}
+
+export interface ErrorStateProps {
+  aspectRatio: string;
+  generation: Generation;
+  onCopyError: () => void;
+  onDelete: () => void;
+}
+
+export interface LoadingStateProps {
+  aspectRatio: string;
+  generation: Generation;
+  onDelete: () => void;
+}

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

@@ -0,0 +1,11 @@
+import { Generation } from '@/types/generation';
+
+// 计算图片的宽高比，用于设置容器的 aspect-ratio
+export const getAspectRatio = (asset: Generation['asset']) => {
+  if (!asset?.width || !asset?.height) {
+    // 如果没有尺寸信息，使用 1:1 比例
+    return '1 / 1';
+  }
+
+  return `${asset.width} / ${asset.height}`;
+};

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { Divider } from 'antd';
+import { Fragment, memo, useEffect, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useImageStore } from '@/store/image';
+import { generationBatchSelectors } from '@/store/image/selectors';
+
+import { GenerationBatchItem } from './BatchItem';
+
+const GenerationFeed = memo(() => {
+  const [parent, enableAnimations] = useAutoAnimate();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isInitialLoadRef = useRef(true);
+  const prevBatchesCountRef = useRef(0);
+
+  const currentGenerationBatches = useImageStore(generationBatchSelectors.currentGenerationBatches);
+
+  // Smart scroll function that accounts for sticky elements
+  const scrollToBottom = (behavior: 'smooth' | 'auto' = 'smooth') => {
+    if (!containerRef.current) return;
+
+    // Find the main scrollable container (usually the parent of the sticky element)
+    const scrollableParent =
+      containerRef.current.closest('[style*="overflow"]') || document.documentElement;
+
+    // Get the position of our target element
+    const targetRect = containerRef.current.getBoundingClientRect();
+    const scrollableRect = scrollableParent.getBoundingClientRect();
+
+    // Calculate the scroll position, adding extra offset for sticky elements
+    // The 120px accounts for typical sticky input height + some padding
+    const scrollTop = scrollableParent.scrollTop + targetRect.bottom - scrollableRect.bottom + 999;
+
+    scrollableParent.scrollTo({
+      behavior: behavior,
+      top: scrollTop,
+    });
+  };
+
+  // Auto-scroll to bottom, with different behavior for initial load vs. updates
+  useEffect(() => {
+    const currentBatches = currentGenerationBatches || [];
+    const currentBatchesCount = currentBatches.length;
+    const prevBatchesCount = prevBatchesCountRef.current;
+
+    if (currentBatchesCount === 0) {
+      prevBatchesCountRef.current = 0;
+      return;
+    }
+
+    if (isInitialLoadRef.current) {
+      // On initial load, scroll instantly to the end.
+      scrollToBottom('auto');
+      isInitialLoadRef.current = false;
+    } else if (currentBatchesCount > prevBatchesCount) {
+      // For subsequent updates where a batch was ADDED, scroll smoothly.
+      enableAnimations(false);
+      // Wait for React to re-render without animations.
+      const timer = setTimeout(() => {
+        scrollToBottom('smooth');
+        // Re-enable animations for future interactions like deleting items.
+        enableAnimations(true);
+      }, 50); // A small delay is enough.
+
+      return () => clearTimeout(timer);
+    }
+
+    // Always update the ref with the latest count for the next render.
+    prevBatchesCountRef.current = currentBatchesCount;
+  }, [currentGenerationBatches, enableAnimations]);
+
+  if (!currentGenerationBatches || currentGenerationBatches.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Flexbox flex={1} gap={16} ref={parent} width="100%">
+        {currentGenerationBatches.map((batch, index) => (
+          <Fragment key={batch.id}>
+            {Boolean(index !== 0) && <Divider dashed style={{ margin: 0 }} />}
+            <GenerationBatchItem batch={batch} key={batch.id} />
+          </Fragment>
+        ))}
+      </Flexbox>
+      {/* Invisible element for scroll target */}
+      <div ref={containerRef} style={{ height: 1 }} />
+    </>
+  );
+});
+
+GenerationFeed.displayName = 'GenerationFeed';
+
+export default GenerationFeed;

package/src/app/[variants]/(main)/image/features/ImageWorkspace/Content.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Center } from 'react-layout-kit';
+
+import { useImageStore } from '@/store/image';
+import { generationBatchSelectors, generationTopicSelectors } from '@/store/image/selectors';
+
+import GenerationFeed from '../GenerationFeed';
+import PromptInput from '../PromptInput';
+import EmptyState from './EmptyState';
+import SkeletonList from './SkeletonList';
+
+const ImageWorkspaceContent = () => {
+  const activeTopicId = useImageStore(generationTopicSelectors.activeGenerationTopicId);
+  const useFetchGenerationBatches = useImageStore((s) => s.useFetchGenerationBatches);
+  const isCurrentGenerationTopicLoaded = useImageStore(
+    generationBatchSelectors.isCurrentGenerationTopicLoaded,
+  );
+  useFetchGenerationBatches(activeTopicId);
+  const currentBatches = useImageStore(generationBatchSelectors.currentGenerationBatches);
+  const hasGenerations = currentBatches && currentBatches.length > 0;
+
+  if (!isCurrentGenerationTopicLoaded) {
+    return <SkeletonList />;
+  }
+
+  if (!hasGenerations) return <EmptyState />;
+
+  return (
+    <>
+      {/* 生成结果展示区 */}
+      <GenerationFeed key={activeTopicId} />
+
+      {/* 底部输入框 */}
+      <Center
+        style={{
+          bottom: 24,
+          position: 'sticky',
+          width: '100%',
+        }}
+      >
+        <PromptInput disableAnimation={true} showTitle={false} />
+      </Center>
+    </>
+  );
+};
+
+export default ImageWorkspaceContent;

package/src/app/[variants]/(main)/image/features/ImageWorkspace/EmptyState.tsx

@@ -0,0 +1,37 @@
+import { AuroraBackground } from '@lobehub/ui/awesome';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PromptInput from '../PromptInput';
+
+const EmptyState = memo(() => {
+  return (
+    <>
+      <AuroraBackground
+        style={{
+          height: 400,
+          inset: 0,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+          position: 'absolute',
+          width: '100%',
+          zIndex: 0,
+        }}
+      />
+      <Flexbox
+        flex={1}
+        height="100%"
+        style={{
+          overflow: 'hidden',
+          zIndex: 1,
+        }}
+      >
+        <Center flex={1} padding={24}>
+          <PromptInput showTitle={true} />
+        </Center>
+      </Flexbox>
+    </>
+  );
+});
+
+export default EmptyState;

package/src/app/[variants]/(main)/image/features/ImageWorkspace/SkeletonList.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Block, Grid } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PromptInput from '@/app/[variants]/(main)/image/features/PromptInput';
+
+const SkeletonList = memo(() => {
+  return (
+    <>
+      <Block variant={'borderless'}>
+        <Flexbox gap={12}>
+          {/* Prompt text skeleton */}
+          <Skeleton.Button active style={{ height: 20, width: '95%' }} />
+
+          {/* Metadata skeleton */}
+          <Flexbox gap={12} horizontal style={{ width: '100%' }}>
+            <Skeleton.Button active style={{ height: 16, width: 120 }} />
+            <Skeleton.Button active style={{ height: 16, width: 80 }} />
+            <Skeleton.Button active style={{ height: 16, width: 60 }} />
+            <Skeleton.Button active style={{ height: 16, width: 70 }} />
+          </Flexbox>
+
+          {/* Image grid skeleton - 2x2 layout */}
+          <Grid maxItemWidth={200} rows={4} width={'100%'}>
+            {Array.from({ length: 4 }).map((_, imageIndex) => (
+              <Skeleton.Button active key={imageIndex} style={{ height: 200, width: '100%' }} />
+            ))}
+          </Grid>
+        </Flexbox>
+      </Block>
+      <div style={{ flex: 1 }} />
+      <Center
+        style={{
+          bottom: 24,
+          position: 'sticky',
+          width: '100%',
+        }}
+      >
+        <PromptInput disableAnimation={true} showTitle={false} />
+      </Center>
+    </>
+  );
+});
+
+SkeletonList.displayName = 'SkeletonList';
+
+export default SkeletonList;

package/src/app/[variants]/(main)/image/features/ImageWorkspace/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+
+import { useImageStore } from '@/store/image';
+
+import Content from './Content';
+import EmptyState from './EmptyState';
+
+const ImageWorkspace = () => {
+  const [topic] = useQueryState('topic');
+  const isCreatingWithNewTopic = useImageStore((s) => s.isCreatingWithNewTopic);
+
+  // 如果没有 topic 参数，或者正在创建新 topic 的图片，显示空状态布局
+  if (!topic || isCreatingWithNewTopic) {
+    return <EmptyState />;
+  }
+
+  // 有 topic 参数且不在创建新 topic 状态时显示主要内容
+  return <Content />;
+};
+
+export default ImageWorkspace;

package/src/app/[variants]/(main)/image/features/PromptInput/Title.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Icon, Text } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Palette } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+const PromptTitle = () => {
+  const { t } = useTranslation('image');
+  const theme = useTheme();
+
+  return (
+    <Center gap={16} horizontal style={{ width: '100%' }}>
+      <Center
+        flex={'none'}
+        height={54}
+        style={{
+          backgroundColor: theme.colorText,
+          borderRadius: 16,
+        }}
+        width={54}
+      >
+        <Icon color={theme.colorBgLayout} icon={Palette} size={32} />
+      </Center>
+      <Text
+        as={'h1'}
+        style={{
+          margin: 0,
+        }}
+      >
+        {t('config.header.title')}
+      </Text>
+    </Center>
+  );
+};
+
+export default PromptTitle;