@lobehub/lobehub 2.0.0-next.7 → 2.0.0-next.9

package/src/store/chat/slices/builtinTool/actions/dalle.ts

@@ -1,124 +0,0 @@
-import { produce } from 'immer';
-import pMap from 'p-map';
-import { SWRResponse } from 'swr';
-import { StateCreator } from 'zustand/vanilla';
-
-import { useClientDataSWR } from '@/libs/swr';
-import { fileService } from '@/services/file';
-import { imageGenerationService } from '@/services/textToImage';
-import { uploadService } from '@/services/upload';
-import { chatSelectors } from '@/store/chat/selectors';
-import { ChatStore } from '@/store/chat/store';
-import { useFileStore } from '@/store/file';
-import { DallEImageItem } from '@/types/tool/dalle';
-import { setNamespace } from '@/utils/storeDebug';
-
-const n = setNamespace('tool');
-
-const SWR_FETCH_KEY = 'FetchImageItem';
-
-export interface ChatDallEAction {
-  generateImageFromPrompts: (items: DallEImageItem[], id: string) => Promise<void>;
-  text2image: (id: string, data: DallEImageItem[]) => Promise<void>;
-  toggleDallEImageLoading: (key: string, value: boolean) => void;
-  updateImageItem: (id: string, updater: (data: DallEImageItem[]) => void) => Promise<void>;
-  useFetchDalleImageItem: (id: string) => SWRResponse;
-}
-
-export const dalleSlice: StateCreator<
-  ChatStore,
-  [['zustand/devtools', never]],
-  [],
-  ChatDallEAction
-> = (set, get) => ({
-  generateImageFromPrompts: async (items, messageId) => {
-    const { toggleDallEImageLoading, updateImageItem } = get();
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const getMessageById = (id: string) => chatSelectors.getMessageById(id)(get());
-
-    const message = getMessageById(messageId);
-    if (!message) return;
-
-    const parent = getMessageById(message!.parentId!);
-    const originPrompt = parent?.content;
-    let errorArray: any[] = [];
-
-    await pMap(items, async (params, index) => {
-      toggleDallEImageLoading(messageId + params.prompt, true);
-
-      let url = '';
-      try {
-        url = await imageGenerationService.generateImage(params);
-      } catch (e) {
-        toggleDallEImageLoading(messageId + params.prompt, false);
-        errorArray[index] = e;
-
-        await get().updatePluginState(messageId, { error: errorArray });
-      }
-
-      if (!url) return;
-
-      await updateImageItem(messageId, (draft) => {
-        draft[index].previewUrl = url;
-      });
-
-      toggleDallEImageLoading(messageId + params.prompt, false);
-      const imageFile = await uploadService.getImageFileByUrlWithCORS(
-        url,
-        `${originPrompt || params.prompt}_${index}.png`,
-      );
-
-      const data = await useFileStore.getState().uploadWithProgress({
-        file: imageFile,
-      });
-
-      if (!data) return;
-
-      await updateImageItem(messageId, (draft) => {
-        draft[index].imageId = data.id;
-        draft[index].previewUrl = undefined;
-      });
-    });
-  },
-  text2image: async (id, data) => {
-    // const isAutoGen = settingsSelectors.isDalleAutoGenerating(useGlobalStore.getState());
-    // if (!isAutoGen) return;
-
-    await get().generateImageFromPrompts(data, id);
-  },
-
-  toggleDallEImageLoading: (key, value) => {
-    set(
-      { dalleImageLoading: { ...get().dalleImageLoading, [key]: value } },
-      false,
-      n('toggleDallEImageLoading'),
-    );
-  },
-
-  updateImageItem: async (id, updater) => {
-    const message = chatSelectors.getMessageById(id)(get());
-    if (!message) return;
-
-    const data: DallEImageItem[] = JSON.parse(message.content);
-
-    const nextContent = produce(data, updater);
-    await get().internal_updateMessageContent(id, JSON.stringify(nextContent));
-  },
-
-  useFetchDalleImageItem: (id) =>
-    useClientDataSWR([SWR_FETCH_KEY, id], async () => {
-      const item = await fileService.getFile(id);
-
-      set(
-        produce((draft) => {
-          if (draft.dalleImageMap[id]) return;
-
-          draft.dalleImageMap[id] = item;
-        }),
-        false,
-        n('useFetchFile'),
-      );
-
-      return item;
-    }),
-});

package/src/tools/dalle/Render/GalleyGrid.tsx

@@ -1,60 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { ReactNode, memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Grid from '@/components/GalleyGrid/Grid';
-
-const MAX_SIZE_DESKTOP = 640;
-const MAX_SIZE_MOBILE = 280;
-
-interface GalleyGridProps<T = any> {
-  items: T[];
-  renderItem: (props: T) => ReactNode;
-}
-
-const GalleyGrid = memo<GalleyGridProps>(({ items, renderItem: Render }) => {
-  const { mobile } = useResponsive();
-
-  const { firstRow, lastRow } = useMemo(() => {
-    if (items.length === 4) {
-      return {
-        firstRow: items.slice(0, 2),
-        lastRow: items.slice(2, 4),
-      };
-    }
-
-    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
-
-    return {
-      firstRow: items.slice(0, firstCol),
-      lastRow: items.slice(firstCol, items.length),
-    };
-  }, [items]);
-
-  const { gap, max } = useMemo(
-    () => ({
-      gap: mobile ? 4 : 6,
-      max: (mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP) * firstRow.length,
-    }),
-    [mobile],
-  );
-
-  return (
-    <Flexbox gap={gap}>
-      <Grid col={firstRow.length} gap={gap} max={max}>
-        {firstRow.map((i, index) => (
-          <Render {...i} index={index} key={index} />
-        ))}
-      </Grid>
-      {lastRow.length > 0 && (
-        <Grid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
-          {lastRow.map((i, index) => (
-            <Render {...i} index={index} key={index} />
-          ))}
-        </Grid>
-      )}
-    </Flexbox>
-  );
-});
-
-export default GalleyGrid;

package/src/tools/dalle/Render/Item/EditMode.tsx

@@ -1,66 +0,0 @@
-import { Button, Select, TextArea } from '@lobehub/ui';
-import { Radio } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { DallEImageItem } from '@/types/tool/dalle';
-
-interface EditModeProps extends DallEImageItem {
-  setEdit: (edit: boolean) => void;
-}
-
-const EditMode = memo<EditModeProps>(({ prompt, setEdit, style, size, quality }) => {
-  const { t } = useTranslation('tool');
-
-  return (
-    <Flexbox gap={16}>
-      <TextArea style={{ minHeight: 120 }} value={prompt} variant={'filled'} />
-      <Flexbox horizontal justify={'space-between'}>
-        风格
-        <Radio.Group
-          defaultValue={style}
-          options={[
-            { label: 'vivid', value: 'vivid' },
-            { label: 'natural', value: 'natural' },
-          ]}
-        />
-      </Flexbox>
-      <Flexbox horizontal justify={'space-between'}>
-        质量
-        <Radio.Group
-          defaultValue={quality}
-          options={[
-            { label: 'standard', value: 'standard' },
-            { label: 'hd', value: 'hd' },
-          ]}
-        />
-      </Flexbox>
-      <Flexbox horizontal justify={'space-between'}>
-        尺寸
-        <Select
-          defaultValue={size}
-          options={[
-            { label: '1792x1024', value: '1792x1024' },
-            { label: '1024x1024', value: '1024x1024' },
-            { label: '1024x1792', value: '1024x1792' },
-          ]}
-          size={'small'}
-        />
-      </Flexbox>
-
-      <Flexbox direction={'horizontal-reverse'} gap={12}>
-        <Button type={'primary'}>{t('dalle.generate')}</Button>
-        <Button
-          onClick={() => {
-            setEdit(false);
-          }}
-        >
-          {t('cancel', { ns: 'common' })}
-        </Button>
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default EditMode;

package/src/tools/dalle/Render/Item/Error.tsx

@@ -1,49 +0,0 @@
-import { Alert, Button, Highlighter } from '@lobehub/ui';
-import { LucideRefreshCw } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
-
-interface ErrorProps {
-  index: number;
-  messageId: string;
-}
-
-const Error = memo<ErrorProps>(({ messageId, index }) => {
-  const { t } = useTranslation('error');
-  const { t: ct } = useTranslation('common');
-
-  const error = useChatStore(
-    (s) => chatSelectors.getMessageById(messageId)(s)?.pluginState?.['error']?.[index],
-  );
-  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
-
-  return (
-    error && (
-      <Flexbox gap={12}>
-        <Alert
-          extra={
-            <Highlighter actionIconSize={'small'} language={'json'}>
-              {JSON.stringify(error?.body || error, null, 2)}
-            </Highlighter>
-          }
-          extraDefaultExpand
-          message={t(`response.${error.errorType}` as any)}
-          type={'error'}
-        />
-        <Button
-          icon={LucideRefreshCw}
-          onClick={() => reInvokeToolMessage(messageId)}
-          type={'primary'}
-        >
-          {ct('retry')}
-        </Button>
-      </Flexbox>
-    )
-  );
-});
-
-export default Error;

package/src/tools/dalle/Render/Item/Image.tsx

@@ -1,44 +0,0 @@
-import { Icon, Image, Tooltip } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import ImageFileItem from './ImageFileItem';
-
-interface ImagePreviewProps {
-  imageId?: string;
-  previewUrl?: string;
-  prompt: string;
-}
-
-const ImagePreview = memo<ImagePreviewProps>(({ imageId, previewUrl, prompt }) => {
-  const { t } = useTranslation('tool');
-
-  return imageId ? (
-    // <Flexbox className={styles.action}>
-    //   <ActionIconGroup
-    //     items={[{ icon: LucideEdit, key: 'edit', label: t('edit', { ns: 'common' }) }]}
-    //     onActionClick={(e) => {
-    //       if (e.key === 'edit') {
-    //         setEdit(true);
-    //       }
-    //     }}
-    //   />
-    // </Flexbox>
-    <ImageFileItem id={imageId} />
-  ) : (
-    previewUrl && (
-      <Flexbox style={{ position: 'relative' }}>
-        <div style={{ position: 'absolute', right: 8, top: 8, zIndex: 10 }}>
-          <Tooltip title={t('dalle.downloading')}>
-            <Icon icon={Loader2} size={'large'} spin />
-          </Tooltip>
-        </div>
-        <Image alt={prompt} size={'100%'} src={previewUrl} />
-      </Flexbox>
-    )
-  );
-});
-
-export default ImagePreview;

package/src/tools/dalle/Render/Item/ImageFileItem.tsx

@@ -1,57 +0,0 @@
-import { Image } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { CSSProperties, memo } from 'react';
-
-import { usePlatform } from '@/hooks/usePlatform';
-import { useChatStore } from '@/store/chat';
-
-const MIN_IMAGE_SIZE = 64;
-
-export const useStyles = createStyles(({ css, token }) => ({
-  deleteButton: css`
-    color: #fff;
-    background: ${token.colorBgMask};
-
-    &:hover {
-      background: ${token.colorError};
-    }
-  `,
-  editableImage: css`
-    background: ${token.colorBgContainer};
-    box-shadow: 0 0 0 1px ${token.colorFill} inset;
-  `,
-  image: css`
-    margin-block: 0 !important;
-  `,
-}));
-
-interface FileItemProps {
-  alwaysShowClose?: boolean;
-  className?: string;
-  editable?: boolean;
-  id: string;
-  onClick?: () => void;
-  style?: CSSProperties;
-}
-const ImageFileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
-  const [useFetchDalleImageItem] = useChatStore((s) => [s.useFetchDalleImageItem]);
-  const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
-  const { data, isLoading } = useFetchDalleImageItem(id);
-  const { styles, cx } = useStyles();
-  const { isSafari } = usePlatform();
-
-  return (
-    <Image
-      alt={data?.name || id || ''}
-      alwaysShowActions={alwaysShowClose}
-      height={isSafari ? 'auto' : '100%'}
-      isLoading={isLoading}
-      size={IMAGE_SIZE as any}
-      src={data?.url}
-      style={{ height: isSafari ? 'auto' : '100%' }}
-      wrapperClassName={cx(styles.image, editable && styles.editableImage)}
-    />
-  );
-});
-
-export default ImageFileItem;

package/src/tools/dalle/Render/Item/index.tsx

@@ -1,88 +0,0 @@
-import { Highlighter, Icon } from '@lobehub/ui';
-import { Spin } from 'antd';
-import { createStyles } from 'antd-style';
-import { Loader2 } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useChatStore } from '@/store/chat';
-import { chatToolSelectors } from '@/store/chat/selectors';
-import { DallEImageItem } from '@/types/tool/dalle';
-
-import EditMode from './EditMode';
-import Error from './Error';
-import ImagePreview from './Image';
-
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  action: css`
-    position: absolute;
-    z-index: 100;
-    inset-block-start: 4px;
-    inset-inline-end: 4px;
-  `,
-  container: css`
-    overflow: scroll;
-    aspect-ratio: 1;
-    border: 1px solid ${token.colorBorder};
-    border-radius: 8px;
-
-    .${prefixCls}-spin-nested-loading {
-      height: 100%;
-    }
-  `,
-}));
-
-const ImageItem = memo<DallEImageItem & { index: number; messageId: string }>(
-  ({ prompt, messageId, imageId, previewUrl, index, style, size, quality }) => {
-    const { t } = useTranslation('tool');
-    const { styles } = useStyles();
-
-    const [edit, setEdit] = useState(false);
-    const loading = useChatStore(chatToolSelectors.isDallEImageGenerating(messageId + prompt));
-
-    if (edit)
-      return (
-        <Flexbox className={styles.container} padding={8}>
-          <EditMode
-            imageId={imageId}
-            prompt={prompt}
-            quality={quality}
-            setEdit={setEdit}
-            size={size}
-            style={style}
-          />
-        </Flexbox>
-      );
-
-    if (imageId || previewUrl)
-      return <ImagePreview imageId={imageId} previewUrl={previewUrl} prompt={prompt} />;
-
-    return (
-      <Flexbox className={styles.container} padding={8}>
-        {loading ? (
-          <Spin indicator={<Icon icon={Loader2} spin />} size={'large'} tip={t('dalle.generating')}>
-            {prompt}
-          </Spin>
-        ) : (
-          <Flexbox gap={12}>
-            <Flexbox>
-              <Highlighter
-                actionIconSize={'small'}
-                fileName={t('dalle.prompt')}
-                fullFeatured
-                language={'prompt'}
-                showLanguage
-              >
-                {prompt}
-              </Highlighter>
-            </Flexbox>
-            <Error index={index} messageId={messageId} />
-          </Flexbox>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default ImageItem;

package/src/tools/dalle/Render/ToolBar.tsx

@@ -1,56 +0,0 @@
-import { Button } from '@lobehub/ui';
-import { Checkbox } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useChatStore } from '@/store/chat';
-import { chatToolSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { DallEImageItem } from '@/types/tool/dalle';
-
-interface ToolBarProps {
-  content: DallEImageItem[];
-  messageId: string;
-}
-
-const ToolBar = memo<ToolBarProps>(({ content, messageId }) => {
-  const { t } = useTranslation('tool');
-  const generateImageFromPrompts = useChatStore((s) => s.generateImageFromPrompts);
-  const isLoading = useChatStore(chatToolSelectors.isGeneratingDallEImage);
-
-  const [isAutoGenerate, setSettings] = useUserStore((s) => [
-    settingsSelectors.isDalleAutoGenerating(s),
-    s.setSettings,
-  ]);
-
-  const genImages = () => {
-    generateImageFromPrompts(content, messageId);
-  };
-
-  const canGen = content.some((i) => !i.imageId);
-
-  return (
-    <Flexbox align={'center'} height={28} horizontal justify={'space-between'}>
-      {t('dalle.images')}
-      <Flexbox align={'center'} gap={8} horizontal>
-        <Checkbox
-          checked={isAutoGenerate}
-          onChange={(e) => {
-            setSettings({ tool: { dalle: { autoGenerate: e.target.checked } } });
-          }}
-        >
-          {t('dalle.autoGenerate')}
-        </Checkbox>
-        {canGen && (
-          <Button loading={isLoading} onClick={genImages} size={'small'} type={'primary'}>
-            {t('dalle.generate')}
-          </Button>
-        )}
-      </Flexbox>
-    </Flexbox>
-  );
-});
-
-export default ToolBar;

package/src/tools/dalle/Render/index.tsx

@@ -1,52 +0,0 @@
-import { BuiltinRenderProps } from '@lobechat/types';
-import { ActionIcon, PreviewGroup } from '@lobehub/ui';
-import { Download } from 'lucide-react';
-import { memo, useRef } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { fileService } from '@/services/file';
-import { DallEImageItem } from '@/types/tool/dalle';
-
-import GalleyGrid from './GalleyGrid';
-import ImageItem from './Item';
-
-const DallE = memo<BuiltinRenderProps<DallEImageItem[]>>(({ content, messageId }) => {
-  const currentRef = useRef(0);
-
-  const handleDownload = async () => {
-    // 1. Retrieve the blob URL of an image by its imageId
-    const id = content[currentRef.current]?.imageId;
-    if (!id) return;
-    const { url, name } = await fileService.getFile(id);
-    // 2. Download the image
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = name; // 设置下载的文件名
-    link.click();
-  };
-
-  return (
-    <Flexbox gap={16}>
-      {/* 没想好工具条的作用 */}
-      {/*<ToolBar content={content} messageId={messageId} />*/}
-      <PreviewGroup
-        preview={{
-          // 切换图片时设置
-          onChange: (current: number) => {
-            currentRef.current = current;
-          },
-          // 点击预览显示时设置
-
-          onVisibleChange: (visible: boolean, _prevVisible: boolean, current: number) => {
-            currentRef.current = current;
-          },
-          toolbarAddon: <ActionIcon color={'#fff'} icon={Download} onClick={handleDownload} />,
-        }}
-      >
-        <GalleyGrid items={content.map((c) => ({ ...c, messageId }))} renderItem={ImageItem} />
-      </PreviewGroup>
-    </Flexbox>
-  );
-});
-
-export default DallE;