@lobehub/lobehub 2.0.0-next.54 → 2.0.0-next.56

package/src/features/KnowledgeManager/FileExplorer/MasonryFileItem/DefaultFileItem.tsx

@@ -0,0 +1,149 @@
+import { Button, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { isNull } from 'lodash-es';
+import { FileBoxIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { AsyncTaskStatus, IAsyncTaskError } from '@/types/asyncTask';
+import { formatSize } from '@/utils/format';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
+
+import ChunksBadge from '../FileListItem/ChunkTag';
+
+const useStyles = createStyles(({ css, token }) => ({
+  floatingChunkBadge: css`
+    position: absolute;
+    z-index: 3;
+    inset-block-end: 8px;
+    inset-inline-end: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    opacity: 0;
+    background: ${token.colorBgContainer};
+    box-shadow: ${token.boxShadow};
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  name: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    margin-block-end: 12px;
+
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+    word-break: break-word;
+  `,
+}));
+
+interface DefaultFileItemProps {
+  chunkCount?: number | null;
+  chunkingError?: IAsyncTaskError | null;
+  chunkingStatus?: AsyncTaskStatus | null;
+  embeddingError?: IAsyncTaskError | null;
+  embeddingStatus?: AsyncTaskStatus | null;
+  fileType?: string;
+  finishEmbedding?: boolean;
+  id: string;
+  name: string;
+  size: number;
+}
+
+const DefaultFileItem = memo<DefaultFileItemProps>(
+  ({
+    chunkCount,
+    chunkingError,
+    chunkingStatus,
+    embeddingError,
+    embeddingStatus,
+    fileType,
+    finishEmbedding,
+    id,
+    name,
+    size,
+  }) => {
+    const { t } = useTranslation('components');
+    const { styles, cx } = useStyles();
+    const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
+      fileManagerSelectors.isCreatingFileParseTask(id)(s),
+      s.parseFilesToChunks,
+    ]);
+
+    const isSupportedForChunking = !isChunkingUnsupported(fileType || '');
+
+    return (
+      <>
+        <Flexbox
+          align={'center'}
+          gap={12}
+          justify={'center'}
+          paddingBlock={24}
+          paddingInline={12}
+          style={{ minHeight: 180 }}
+        >
+          <FileIcon fileName={name} fileType={fileType} size={64} />
+          <div className={styles.name} style={{ textAlign: 'center' }}>
+            {name}
+          </div>
+          <div
+            style={{
+              color: 'var(--lobe-chat-text-tertiary)',
+              fontSize: 12,
+              textAlign: 'center',
+            }}
+          >
+            {formatSize(size)}
+          </div>
+        </Flexbox>
+        {/* Floating chunk badge or action button */}
+        {!isNull(chunkingStatus) && chunkingStatus ? (
+          <div
+            className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ChunksBadge
+              chunkCount={chunkCount}
+              chunkingError={chunkingError}
+              chunkingStatus={chunkingStatus}
+              embeddingError={embeddingError}
+              embeddingStatus={embeddingStatus}
+              finishEmbedding={finishEmbedding}
+              id={id}
+            />
+          </div>
+        ) : (
+          isSupportedForChunking && (
+            <Tooltip title={t('FileManager.actions.chunkingTooltip')}>
+              <div
+                className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!isCreatingFileParseTask) {
+                    parseFiles([id]);
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <Button
+                  icon={FileBoxIcon}
+                  loading={isCreatingFileParseTask}
+                  size={'small'}
+                  type={'text'}
+                />
+              </div>
+            </Tooltip>
+          )
+        )}
+      </>
+    );
+  },
+);
+
+export default DefaultFileItem;

package/src/features/KnowledgeManager/FileExplorer/MasonryFileItem/ImageFileItem.tsx

@@ -0,0 +1,245 @@
+import { Button, Tooltip } from '@lobehub/ui';
+import { Image } from 'antd';
+import { createStyles } from 'antd-style';
+import { isNull } from 'lodash-es';
+import { FileBoxIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { AsyncTaskStatus, IAsyncTaskError } from '@/types/asyncTask';
+import { formatSize } from '@/utils/format';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
+
+import ChunksBadge from '../FileListItem/ChunkTag';
+
+const useStyles = createStyles(({ css, token }) => ({
+  floatingChunkBadge: css`
+    position: absolute;
+    z-index: 3;
+    inset-block-end: 8px;
+    inset-inline-end: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    opacity: 0;
+    background: ${token.colorBgContainer};
+    box-shadow: ${token.boxShadow};
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  hoverOverlay: css`
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: 16px;
+
+    opacity: 0;
+    background: ${token.colorBgMask};
+
+    transition: opacity ${token.motionDurationMid};
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  imagePlaceholder: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${token.colorFillQuaternary};
+  `,
+  imageWrapper: css`
+    position: relative;
+    width: 100%;
+    background: ${token.colorFillQuaternary};
+
+    img {
+      display: block;
+      height: auto;
+    }
+  `,
+  name: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    margin-block-end: 12px;
+
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+    word-break: break-word;
+  `,
+  overlaySize: css`
+    font-size: 12px;
+    color: ${token.colorTextLightSolid};
+    opacity: 0.9;
+  `,
+  overlayTitle: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    max-width: 100%;
+    margin-block-end: 8px;
+
+    font-size: 14px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorTextLightSolid};
+    text-align: center;
+    word-break: break-word;
+  `,
+}));
+
+interface ImageFileItemProps {
+  chunkCount?: number | null;
+  chunkingError?: IAsyncTaskError | null;
+  chunkingStatus?: AsyncTaskStatus | null;
+  embeddingError?: IAsyncTaskError | null;
+  embeddingStatus?: AsyncTaskStatus | null;
+  fileType?: string;
+  finishEmbedding?: boolean;
+  id: string;
+  isInView: boolean;
+  name: string;
+  size: number;
+  url?: string;
+}
+
+const ImageFileItem = memo<ImageFileItemProps>(
+  ({
+    chunkCount,
+    chunkingError,
+    chunkingStatus,
+    embeddingError,
+    embeddingStatus,
+    fileType,
+    finishEmbedding,
+    id,
+    isInView,
+    name,
+    size,
+    url,
+  }) => {
+    const { t } = useTranslation('components');
+    const { styles, cx } = useStyles();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
+      fileManagerSelectors.isCreatingFileParseTask(id)(s),
+      s.parseFilesToChunks,
+    ]);
+
+    const isSupportedForChunking = !isChunkingUnsupported(fileType || '');
+
+    return (
+      <>
+        <div className={styles.imageWrapper}>
+          {!imageLoaded && (
+            <div className={styles.imagePlaceholder}>
+              <Flexbox
+                align={'center'}
+                gap={12}
+                justify={'center'}
+                paddingBlock={24}
+                paddingInline={12}
+              >
+                <FileIcon fileName={name} fileType={fileType} size={48} />
+                <div className={styles.name} style={{ textAlign: 'center' }}>
+                  {name}
+                </div>
+                <div
+                  style={{
+                    color: 'var(--lobe-chat-text-tertiary)',
+                    fontSize: 12,
+                    textAlign: 'center',
+                  }}
+                >
+                  {formatSize(size)}
+                </div>
+              </Flexbox>
+            </div>
+          )}
+          {isInView && url && (
+            <Image
+              alt={name}
+              loading="lazy"
+              onError={() => setImageLoaded(false)}
+              onLoad={() => setImageLoaded(true)}
+              preview={{
+                src: url,
+              }}
+              src={url}
+              style={{
+                display: 'block',
+                height: 'auto',
+                opacity: imageLoaded ? 1 : 0,
+                transition: 'opacity 0.3s',
+                width: '100%',
+              }}
+              wrapperStyle={{
+                display: 'block',
+                width: '100%',
+              }}
+            />
+          )}
+          {/* Hover overlay */}
+          <div className={styles.hoverOverlay}>
+            <div className={styles.overlayTitle}>{name}</div>
+            <div className={styles.overlaySize}>{formatSize(size)}</div>
+          </div>
+        </div>
+        {/* Floating chunk badge or action button */}
+        {!isNull(chunkingStatus) && chunkingStatus ? (
+          <div
+            className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ChunksBadge
+              chunkCount={chunkCount}
+              chunkingError={chunkingError}
+              chunkingStatus={chunkingStatus}
+              embeddingError={embeddingError}
+              embeddingStatus={embeddingStatus}
+              finishEmbedding={finishEmbedding}
+              id={id}
+            />
+          </div>
+        ) : (
+          isSupportedForChunking && (
+            <Tooltip title={t('FileManager.actions.chunkingTooltip')}>
+              <div
+                className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!isCreatingFileParseTask) {
+                    parseFiles([id]);
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <Button
+                  icon={FileBoxIcon}
+                  loading={isCreatingFileParseTask}
+                  size={'small'}
+                  type={'text'}
+                />
+              </div>
+            </Tooltip>
+          )
+        )}
+      </>
+    );
+  },
+);
+
+export default ImageFileItem;

package/src/features/KnowledgeManager/FileExplorer/MasonryFileItem/MarkdownFileItem.tsx

@@ -0,0 +1,232 @@
+import { Button, Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { isNull } from 'lodash-es';
+import { FileBoxIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import FileIcon from '@/components/FileIcon';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+import { AsyncTaskStatus, IAsyncTaskError } from '@/types/asyncTask';
+import { formatSize } from '@/utils/format';
+import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
+
+import ChunksBadge from '../FileListItem/ChunkTag';
+
+const useStyles = createStyles(({ css, token }) => ({
+  floatingChunkBadge: css`
+    position: absolute;
+    z-index: 3;
+    inset-block-end: 8px;
+    inset-inline-end: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    opacity: 0;
+    background: ${token.colorBgContainer};
+    box-shadow: ${token.boxShadow};
+
+    transition: opacity ${token.motionDurationMid};
+  `,
+  hoverOverlay: css`
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: 16px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    opacity: 0;
+    background: ${token.colorBgMask};
+
+    transition: opacity ${token.motionDurationMid};
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 120px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  markdownLoading: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 120px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+
+    background: ${token.colorFillQuaternary};
+  `,
+  markdownPreview: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    min-height: 120px;
+    max-height: 300px;
+    padding: 16px;
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-size: 13px;
+    line-height: 1.6;
+    color: ${token.colorTextSecondary};
+    word-wrap: break-word;
+    white-space: pre-wrap;
+
+    background: ${token.colorFillQuaternary};
+
+    &::after {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      height: 60px;
+
+      background: linear-gradient(to bottom, transparent, ${token.colorFillQuaternary});
+    }
+  `,
+  overlaySize: css`
+    font-size: 12px;
+    color: ${token.colorTextLightSolid};
+    opacity: 0.9;
+  `,
+  overlayTitle: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    max-width: 100%;
+    margin-block-end: 8px;
+
+    font-size: 14px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorTextLightSolid};
+    text-align: center;
+    word-break: break-word;
+  `,
+}));
+
+interface MarkdownFileItemProps {
+  chunkCount?: number | null;
+  chunkingError?: IAsyncTaskError | null;
+  chunkingStatus?: AsyncTaskStatus | null;
+  embeddingError?: IAsyncTaskError | null;
+  embeddingStatus?: AsyncTaskStatus | null;
+  fileType?: string;
+  finishEmbedding?: boolean;
+  id: string;
+  isLoadingMarkdown: boolean;
+  markdownContent: string;
+  name: string;
+  size: number;
+}
+
+const MarkdownFileItem = memo<MarkdownFileItemProps>(
+  ({
+    chunkCount,
+    chunkingError,
+    chunkingStatus,
+    embeddingError,
+    embeddingStatus,
+    fileType,
+    finishEmbedding,
+    id,
+    isLoadingMarkdown,
+    markdownContent,
+    name,
+    size,
+  }) => {
+    const { t } = useTranslation('components');
+    const { styles, cx } = useStyles();
+    const [isCreatingFileParseTask, parseFiles] = useFileStore((s) => [
+      fileManagerSelectors.isCreatingFileParseTask(id)(s),
+      s.parseFilesToChunks,
+    ]);
+
+    const isSupportedForChunking = !isChunkingUnsupported(fileType || '');
+
+    return (
+      <>
+        <div style={{ position: 'relative' }}>
+          {isLoadingMarkdown ? (
+            <div className={styles.markdownLoading}>Loading preview...</div>
+          ) : markdownContent ? (
+            <div className={styles.markdownPreview}>{markdownContent}</div>
+          ) : (
+            <div className={styles.iconWrapper}>
+              <FileIcon fileName={name} fileType={fileType} size={64} />
+            </div>
+          )}
+          {/* Hover overlay */}
+          <div className={styles.hoverOverlay}>
+            <div className={styles.overlayTitle}>{name}</div>
+            <div className={styles.overlaySize}>{formatSize(size)}</div>
+          </div>
+        </div>
+        {/* Floating chunk badge or action button */}
+        {!isNull(chunkingStatus) && chunkingStatus ? (
+          <div
+            className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <ChunksBadge
+              chunkCount={chunkCount}
+              chunkingError={chunkingError}
+              chunkingStatus={chunkingStatus}
+              embeddingError={embeddingError}
+              embeddingStatus={embeddingStatus}
+              finishEmbedding={finishEmbedding}
+              id={id}
+            />
+          </div>
+        ) : (
+          isSupportedForChunking && (
+            <Tooltip title={t('FileManager.actions.chunkingTooltip')}>
+              <div
+                className={cx('floatingChunkBadge', styles.floatingChunkBadge)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!isCreatingFileParseTask) {
+                    parseFiles([id]);
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <Button
+                  icon={FileBoxIcon}
+                  loading={isCreatingFileParseTask}
+                  size={'small'}
+                  type={'text'}
+                />
+              </div>
+            </Tooltip>
+          )
+        )}
+      </>
+    );
+  },
+);
+
+export default MarkdownFileItem;