@lobehub/chat 1.98.1 → 1.99.0

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+import InputNumber from '../../../components/SeedNumberInput';
+
+const SeedNumberInput = memo(() => {
+  const { t } = useTranslation('image');
+  const { value, setValue, min, max, step = 1 } = useGenerationConfigParam('seed');
+
+  return (
+    <InputNumber
+      max={max}
+      min={min}
+      onChange={setValue as any}
+      placeholder={t('config.seed.random')}
+      step={step}
+      value={value}
+    />
+  );
+});
+
+export default SeedNumberInput;

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

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+import Select from '../../../components/SizeSelect';
+
+const SizeSelect = memo(() => {
+  const { value, setValue, enumValues } = useGenerationConfigParam('size');
+  const options = enumValues!.map((size) => ({
+    label: size,
+    value: size,
+  }));
+
+  return <Select onChange={setValue} options={options} value={value} />;
+});
+
+export default SizeSelect;

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

@@ -0,0 +1,15 @@
+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;

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

@@ -0,0 +1,11 @@
+import { SliderWithInput } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+
+const SizeSliderInput = memo(() => {
+  const { value, setValue, min, max } = useGenerationConfigParam('steps');
+  return <SliderWithInput max={max} min={min} onChange={setValue} value={value} />;
+});
+
+export default SizeSliderInput;

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/constants.ts

@@ -0,0 +1 @@
+export const CONFIG_PANEL_WIDTH = 260;

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

@@ -0,0 +1,93 @@
+'use client';
+
+import { Text } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { imageGenerationConfigSelectors } from '@/store/image/selectors';
+import { useDimensionControl } from '@/store/image/slices/generationConfig/hooks';
+import { useImageStore } from '@/store/image/store';
+
+import DimensionControlGroup from './components/DimensionControlGroup';
+import ImageNum from './components/ImageNum';
+import ImageUrl from './components/ImageUrl';
+import ImageUrlsUpload from './components/ImageUrlsUpload';
+import ModelSelect from './components/ModelSelect';
+import SeedNumberInput from './components/SeedNumberInput';
+import SizeSelect from './components/SizeSelect';
+import StepsSliderInput from './components/StepsSliderInput';
+
+interface ConfigItemLayoutProps {
+  children: ReactNode;
+  label?: string;
+}
+
+const ConfigItemLayout = memo<ConfigItemLayoutProps>(({ label, children }) => {
+  return (
+    <Flexbox gap={8}>
+      {label && <Text weight={500}>{label.toUpperCase()}</Text>}
+      {children}
+    </Flexbox>
+  );
+});
+
+const isSupportedParamSelector = imageGenerationConfigSelectors.isSupportedParam;
+
+const ConfigPanel = memo(() => {
+  const { t } = useTranslation('image');
+
+  const isSupportImageUrl = useImageStore(isSupportedParamSelector('imageUrl'));
+  const isSupportSize = useImageStore(isSupportedParamSelector('size'));
+  const isSupportSeed = useImageStore(isSupportedParamSelector('seed'));
+  const isSupportSteps = useImageStore(isSupportedParamSelector('steps'));
+  const isSupportImageUrls = useImageStore(isSupportedParamSelector('imageUrls'));
+
+  const { showDimensionControl } = useDimensionControl();
+
+  return (
+    <Flexbox gap={32} padding={12}>
+      <ConfigItemLayout>
+        <ModelSelect />
+      </ConfigItemLayout>
+
+      {isSupportImageUrl && (
+        <ConfigItemLayout label={t('config.imageUrl.label')}>
+          <ImageUrl />
+        </ConfigItemLayout>
+      )}
+
+      {isSupportImageUrls && (
+        <ConfigItemLayout label={t('config.imageUrls.label')}>
+          <ImageUrlsUpload />
+        </ConfigItemLayout>
+      )}
+
+      {isSupportSize && (
+        <ConfigItemLayout label={t('config.size.label')}>
+          <SizeSelect />
+        </ConfigItemLayout>
+      )}
+
+      {showDimensionControl && <DimensionControlGroup />}
+
+      {isSupportSteps && (
+        <ConfigItemLayout label={t('config.steps.label')}>
+          <StepsSliderInput />
+        </ConfigItemLayout>
+      )}
+
+      {isSupportSeed && (
+        <ConfigItemLayout label={t('config.seed.label')}>
+          <SeedNumberInput />
+        </ConfigItemLayout>
+      )}
+
+      <ConfigItemLayout label={t('config.imageNum.label')}>
+        <ImageNum />
+      </ConfigItemLayout>
+    </Flexbox>
+  );
+});
+
+export default ConfigPanel;

package/src/app/[variants]/(main)/image/@topic/default.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import Topics from './features/Topics';
+import TopicUrlSync from './features/Topics/TopicUrlSync';
+
+const page = () => {
+  return (
+    <>
+      <TopicUrlSync />
+      <Topics />
+    </>
+  );
+};
+
+page.displayName = 'ImageTopics';
+
+export default page;

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+interface NewTopicButtonProps {
+  count?: number;
+  onClick?: () => void;
+  showMoreInfo?: boolean;
+}
+
+const NewTopicButton = memo<NewTopicButtonProps>(({ count, onClick, showMoreInfo }) => {
+  const { t } = useTranslation('image');
+
+  if (showMoreInfo)
+    return (
+      <Flexbox
+        align="center"
+        gap={8}
+        horizontal
+        justify="space-between"
+        style={{
+          marginBottom: 12,
+        }}
+        width={'100%'}
+      >
+        <div>
+          {t('topic.title')} {count ? count : ''}
+        </div>
+        <ActionIcon
+          icon={Plus}
+          onClick={onClick}
+          size={'small'}
+          title={t('topic.createNew')}
+          tooltipProps={{
+            placement: 'left',
+          }}
+        />
+      </Flexbox>
+    );
+
+  return (
+    <ActionIcon
+      icon={Plus}
+      onClick={onClick}
+      size={{
+        blockSize: 48,
+        size: 20,
+      }}
+      title={t('topic.createNew')}
+      tooltipProps={{
+        placement: 'left',
+      }}
+      variant={'filled'}
+    />
+  );
+});
+
+NewTopicButton.displayName = 'NewTopicButton';
+
+export default NewTopicButton;

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import NewTopicButton from './NewTopicButton';
+
+const borderRadius = 6;
+
+const SkeletonList = memo(() => {
+  return (
+    <Flexbox align="center" gap={6} width={'100%'}>
+      <NewTopicButton />
+
+      {/* Topic items skeleton */}
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index}>
+          <Skeleton.Avatar
+            active
+            size={48}
+            style={{
+              borderRadius,
+            }}
+          />
+        </div>
+      ))}
+    </Flexbox>
+  );
+});
+
+SkeletonList.displayName = 'SkeletonList';
+
+export default SkeletonList;

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

@@ -0,0 +1,136 @@
+'use client';
+
+import { ActionIcon, Avatar, Text } from '@lobehub/ui';
+import { App, Popover } from 'antd';
+import { useTheme } from 'antd-style';
+import { Trash } from 'lucide-react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { globalGeneralSelectors } from '@/store/global/selectors';
+import { useImageStore } from '@/store/image';
+import { generationTopicSelectors } from '@/store/image/slices/generationTopic/selectors';
+import { ImageGenerationTopic } from '@/types/generation';
+
+const formatTime = (date: Date, locale: string) => {
+  return new Intl.DateTimeFormat(locale, {
+    day: 'numeric',
+    month: 'long',
+  }).format(new Date(date));
+};
+
+interface TopicItemProps {
+  showMoreInfo?: boolean;
+  topic: ImageGenerationTopic;
+}
+
+const TopicItem = memo<TopicItemProps>(({ topic, showMoreInfo }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('image');
+  const { modal } = App.useApp();
+  const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
+
+  // 检查当前 topic 是否在加载中
+  const isLoading = useImageStore(generationTopicSelectors.isLoadingGenerationTopic(topic.id));
+  const removeGenerationTopic = useImageStore((s) => s.removeGenerationTopic);
+  const switchGenerationTopic = useImageStore((s) => s.switchGenerationTopic);
+  const activeTopicId = useImageStore(generationTopicSelectors.activeGenerationTopicId);
+
+  const isActive = activeTopicId === topic.id;
+
+  const handleClick = () => {
+    switchGenerationTopic(topic.id);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      content: t('topic.deleteConfirmDesc'),
+      okButtonProps: { danger: true },
+      okText: t('delete', { ns: 'common' }),
+      onOk: async () => {
+        try {
+          await removeGenerationTopic(topic.id);
+        } catch (error) {
+          console.error('Delete topic failed:', error);
+        }
+      },
+      title: t('topic.deleteConfirm'),
+    });
+  };
+
+  const tooltipContent = (
+    <Flexbox
+      align={'center'}
+      flex={1}
+      gap={16}
+      horizontal
+      justify={'space-between'}
+      style={{
+        overflow: 'hidden',
+      }}
+    >
+      <Flexbox
+        flex={1}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text ellipsis fontSize={14} weight={500}>
+          {topic.title || t('topic.untitled')}
+        </Text>
+        <Text ellipsis fontSize={12} type={'secondary'}>
+          {formatTime(topic.updatedAt, locale)}
+        </Text>
+      </Flexbox>
+      <ActionIcon danger icon={Trash} onClick={handleDelete} size="small" />
+    </Flexbox>
+  );
+
+  return (
+    <Popover
+      arrow={false}
+      content={tooltipContent}
+      placement={'left'}
+      styles={{
+        body: {
+          width: 200,
+        },
+      }}
+      trigger={showMoreInfo ? [] : ['hover']}
+    >
+      <Flexbox
+        align={'center'}
+        gap={12}
+        horizontal
+        justify={'center'}
+        onClick={handleClick}
+        style={{
+          cursor: 'pointer',
+        }}
+        width={'100%'}
+      >
+        <Avatar
+          avatar={topic.coverUrl ?? ''}
+          background={theme.colorFillSecondary}
+          bordered={isActive}
+          loading={isLoading}
+          shape="square"
+          size={48}
+          style={{
+            flex: 'none',
+          }}
+        />
+        {showMoreInfo && tooltipContent}
+      </Flexbox>
+    </Popover>
+  );
+});
+
+TopicItem.displayName = 'TopicItem';
+
+export default TopicItem;

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

@@ -0,0 +1,91 @@
+'use client';
+
+import { Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { type ReactNode } from 'react';
+import { Center, CenterProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  activeContainer: css`
+    border: 2px solid ${token.colorPrimary};
+    background: ${token.colorPrimaryBg};
+
+    &:hover {
+      background: ${token.colorPrimaryBgHover};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    flex: none;
+
+    width: 50px;
+    height: 50px;
+    border-radius: 6px;
+
+    background: transparent;
+
+    transition: all 0.2s ease-in-out;
+
+    &::before {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      border-radius: 6px;
+
+      opacity: 0;
+      background: radial-gradient(circle at center, ${token.colorPrimary}20 0%, transparent 70%);
+
+      transition: opacity 0.3s ease;
+    }
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+
+    &:active {
+      background: ${token.colorFillTertiary};
+    }
+
+    &:active::before {
+      opacity: 1;
+    }
+  `,
+}));
+
+interface TopicItemContainerProps extends CenterProps {
+  active?: boolean;
+  children: ReactNode;
+  tooltip?: ReactNode;
+}
+
+const TopicItemContainer = ({
+  children,
+  className,
+  active,
+  tooltip,
+  ...rest
+}: TopicItemContainerProps) => {
+  const { styles, cx } = useStyles();
+
+  const content = (
+    <Center className={cx(styles.container, active && styles.activeContainer, className)} {...rest}>
+      {children}
+    </Center>
+  );
+
+  if (!tooltip) return content;
+
+  return (
+    <Tooltip arrow placement="left" title={tooltip}>
+      {content}
+    </Tooltip>
+  );
+};
+
+export default TopicItemContainer;

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { useSize } from 'ahooks';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useFetchGenerationTopics } from '@/hooks/useFetchGenerationTopics';
+import { useImageStore } from '@/store/image';
+import { generationTopicSelectors } from '@/store/image/selectors';
+
+import NewTopicButton from './NewTopicButton';
+import TopicItem from './TopicItem';
+
+const TopicsList = memo(() => {
+  useFetchGenerationTopics();
+  const ref = useRef(null);
+  const { width = 80 } = useSize(ref) || {};
+  const [parent] = useAutoAnimate();
+  const generationTopics = useImageStore(generationTopicSelectors.generationTopics);
+  const openNewGenerationTopic = useImageStore((s) => s.openNewGenerationTopic);
+
+  const showMoreInfo = Boolean(width > 120);
+
+  const isEmpty = !generationTopics || generationTopics.length === 0;
+  if (isEmpty) {
+    return null;
+  }
+
+  return (
+    <Flexbox
+      align="center"
+      gap={12}
+      ref={ref}
+      style={{
+        maxHeight: '100%',
+        overflowY: 'auto',
+      }}
+      width={'100%'}
+    >
+      <NewTopicButton
+        count={generationTopics?.length}
+        onClick={openNewGenerationTopic}
+        showMoreInfo={showMoreInfo}
+      />
+      <Flexbox align="center" gap={12} ref={parent} width={'100%'}>
+        {generationTopics.map((topic) => (
+          <TopicItem key={topic.id} showMoreInfo={showMoreInfo} topic={topic} />
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+TopicsList.displayName = 'TopicsList';
+
+export default TopicsList;

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { useLayoutEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useImageStore } from '@/store/image';
+
+/**
+ * 双向绑定 url 的 topic 参数到 image store 的 activeGenerationTopicId
+ */
+const TopicUrlSync = () => {
+  const useStoreUpdater = createStoreUpdater(useImageStore);
+
+  const [topic, setTopic] = useQueryState('topic', { history: 'replace', throttleMs: 500 });
+  useStoreUpdater('activeGenerationTopicId', topic);
+
+  useLayoutEffect(() => {
+    const unsubscribeTopic = useImageStore.subscribe(
+      (s) => s.activeGenerationTopicId,
+      (state) => {
+        setTopic(state || null);
+      },
+    );
+
+    return () => {
+      unsubscribeTopic();
+    };
+  }, [setTopic]);
+
+  // 这个组件不渲染任何UI，仅用于同步状态
+  return null;
+};
+
+TopicUrlSync.displayName = 'TopicUrlSync';
+
+export default TopicUrlSync;

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

@@ -0,0 +1,19 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import SkeletonList from './SkeletonList';
+
+const TopicsList = dynamic(() => import('./TopicList'), {
+  loading: () => <SkeletonList />,
+  ssr: false,
+});
+
+const Topics = () => {
+  return <TopicsList />;
+};
+
+Topics.displayName = 'Topics';
+
+export default Topics;