@lobehub/lobehub 2.0.0-next.8 → 2.0.0-next.80

package/src/features/KnowledgeManager/Home/RecentDocuments.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import RecentDocumentCard from './RecentDocumentCard';
+import RecentFilesSkeleton from './RecentFilesSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgContainerSecondary}, transparent);
+  `,
+  scrollContainer: css`
+    scroll-behavior: smooth;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow: auto hidden;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+    padding-inline-end: 80px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+interface RecentDocumentsProps {
+  documents: FileListItem[];
+  isLoading?: boolean;
+  onOpenDocument: (id: string) => void;
+}
+
+const RecentDocuments = memo<RecentDocumentsProps>(({ documents, isLoading, onOpenDocument }) => {
+  const { styles } = useStyles();
+
+  if (isLoading) {
+    return <RecentFilesSkeleton />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {documents.map((document) => (
+          <RecentDocumentCard
+            document={document}
+            key={document.id}
+            onClick={() => onOpenDocument(document.id)}
+          />
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentDocuments;

package/src/features/KnowledgeManager/Home/RecentFileCard.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { formatSize } from '@lobechat/utils/format';
+import { Image as LobeImage, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { FileListItem } from '@/types/files';
+
+const IMAGE_FILE_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'image/webp',
+  'image/svg+xml',
+]);
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+    flex-shrink: 0;
+
+    width: 280px;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorBgLayout};
+  `,
+  imagePreview: css`
+    width: 100%;
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    object-fit: cover;
+    background: ${token.colorBgLayout};
+  `,
+  info: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin: 0 !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+  `,
+}));
+
+interface RecentFileCardProps {
+  file: FileListItem;
+  onClick: () => void;
+}
+
+const RecentFileCard = memo<RecentFileCardProps>(({ file, onClick }) => {
+  const { styles } = useStyles();
+
+  const isImage = IMAGE_FILE_TYPES.has(file.fileType);
+  const relativeTime = dayjs(file.updatedAt).fromNow();
+
+  return (
+    <div className={styles.card} onClick={onClick} role="button" tabIndex={0}>
+      <Flexbox gap={12} style={{ position: 'relative' }}>
+        {/* Preview or Icon */}
+        {isImage && file.url ? (
+          <LobeImage
+            alt={file.name}
+            className={styles.imagePreview}
+            preview={false}
+            src={file.url}
+          />
+        ) : (
+          <div className={styles.iconWrapper}>
+            <FileIcon fileName={file.name} fileType={file.fileType} size={48} />
+          </div>
+        )}
+
+        {/* File Info */}
+        <Flexbox gap={6} style={{ overflow: 'hidden', position: 'relative' }}>
+          <Text className={styles.title} ellipsis={{ rows: 2 }}>
+            {file.name}
+          </Text>
+          <Flexbox className={styles.info} gap={8} horizontal>
+            <span>{relativeTime}</span>
+            <span>•</span>
+            <span>{formatSize(file.size)}</span>
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </div>
+  );
+});
+
+export default RecentFileCard;

package/src/features/KnowledgeManager/Home/RecentFiles.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import RecentFileCard from './RecentFileCard';
+import RecentFilesSkeleton from './RecentFilesSkeleton';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgContainerSecondary}, transparent);
+  `,
+  scrollContainer: css`
+    scroll-behavior: smooth;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow: auto hidden;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+    padding-inline-end: 80px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+interface RecentFilesProps {
+  files: FileListItem[];
+  isLoading?: boolean;
+  onOpenFile: (id: string) => void;
+}
+
+const RecentFiles = memo<RecentFilesProps>(({ files, isLoading, onOpenFile }) => {
+  const { styles } = useStyles();
+
+  if (isLoading) {
+    return <RecentFilesSkeleton />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {files.map((file) => (
+          <RecentFileCard file={file} key={file.id} onClick={() => onOpenFile(file.id)} />
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentFiles;

package/src/features/KnowledgeManager/Home/RecentFilesSkeleton.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    flex-shrink: 0;
+
+    width: 280px;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+  `,
+  container: css`
+    position: relative;
+    overflow: hidden;
+  `,
+  fadeEdge: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0 0;
+    inset-inline-end: 0;
+
+    width: 80px;
+
+    background: linear-gradient(to left, ${token.colorBgLayout}, transparent);
+  `,
+  previewSkeleton: css`
+    width: 100%;
+    height: 160px;
+    margin-block-end: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  scrollContainer: css`
+    /* Hide scrollbar */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+    display: flex;
+    gap: 16px;
+
+    padding-block-end: 8px;
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `,
+}));
+
+const RecentFilesSkeleton = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.scrollContainer}>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Flexbox className={styles.card} gap={12} key={index}>
+            <div className={styles.previewSkeleton} />
+            <Flexbox gap={6}>
+              <Skeleton active paragraph={false} title={{ width: '90%' }} />
+              <Skeleton active paragraph={false} title={{ style: { height: 12 }, width: '70%' }} />
+            </Flexbox>
+          </Flexbox>
+        ))}
+      </div>
+      <div className={styles.fadeEdge} />
+    </div>
+  );
+});
+
+export default RecentFilesSkeleton;

package/src/features/KnowledgeManager/Home/UploadEntries.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { FileTypeIcon, Icon } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { ArrowUpIcon, FolderUp, PlusIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
+
+import { useFileStore } from '@/store/file';
+
+const ICON_SIZE = 64;
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    min-height: 120px;
+    padding: 16px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorBgContainer};
+
+    transition: all ${token.motionDurationMid} ${token.motionEaseInOut};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: ${token.boxShadowTertiary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.3;
+    filter: blur(24px);
+  `,
+  grid: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: left;
+  `,
+  icon: css`
+    position: absolute;
+    z-index: 1;
+    inset-block-end: -16px;
+    inset-inline-end: 8px;
+
+    flex: none;
+  `,
+  uploadWrapper: css`
+    /* Make the wrapper transparent so hover passes through to the card */
+    & > span {
+      display: block;
+    }
+  `,
+}));
+
+interface UploadEntriesProps {
+  knowledgeBaseId?: string;
+}
+
+const UploadEntries = memo<UploadEntriesProps>(({ knowledgeBaseId }) => {
+  const { t } = useTranslation('file');
+  const theme = useTheme();
+  const { styles } = useStyles();
+  const navigate = useNavigate();
+
+  const createDocument = useFileStore((s) => s.createDocument);
+  const pushDockFileList = useFileStore((s) => s.pushDockFileList);
+  // const { open } = useCreateNewModal();
+
+  const handleCreateNote = async () => {
+    try {
+      const newDoc = await createDocument({
+        content: '',
+        knowledgeBaseId,
+        title: t('home.uploadEntries.newDocument.title'),
+      });
+      // Navigate to the newly created document
+      // The KnowledgeHomePage will automatically set category to 'documents' when it detects the id param
+      navigate(`/${newDoc.id}`);
+    } catch (error) {
+      console.error('Failed to create document:', error);
+    }
+  };
+
+  // const handleCreateKnowledgeBase = () => {
+  //   open({
+  //     onSuccess: (id) => {
+  //       navigate(`/bases/${id}`);
+  //     },
+  //   });
+  // };
+
+  const handleUploadFiles = async (file: File) => {
+    try {
+      await pushDockFileList([file], knowledgeBaseId);
+    } catch (error) {
+      console.error('Failed to upload file:', error);
+    }
+    return false;
+  };
+
+  const handleUploadFolder = async (file: File) => {
+    try {
+      await pushDockFileList([file], knowledgeBaseId);
+    } catch (error) {
+      console.error('Failed to upload folder:', error);
+    }
+    return false;
+  };
+
+  return (
+    <div className={styles.grid}>
+      {/* Create New Note */}
+      <Flexbox className={styles.card} onClick={handleCreateNote} padding={16}>
+        <span className={styles.actionTitle}>{t('home.uploadEntries.newDocument.title')}</span>
+        <div className={styles.glow} style={{ background: theme.purple }} />
+        <FileTypeIcon
+          className={styles.icon}
+          color={theme.purple}
+          icon={<Icon color={'#fff'} icon={PlusIcon} />}
+          size={ICON_SIZE}
+          type={'file'}
+        />
+      </Flexbox>
+
+      {/* Create Knowledge Base */}
+      {/* <Flexbox className={styles.card} onClick={handleCreateKnowledgeBase} padding={16}>
+        <span className={styles.actionTitle}>{t('home.uploadEntries.knowledgeBase.title')}</span>
+        <div className={styles.glow} style={{ background: theme.colorPrimary }} />
+        <FileTypeIcon
+          className={styles.icon}
+          color={theme.colorPrimary}
+          icon={<Icon color={'#fff'} icon={LibraryBig} />}
+          size={ICON_SIZE}
+          type={'file'}
+        />
+      </Flexbox> */}
+
+      {/* Upload Files */}
+      <Upload
+        beforeUpload={handleUploadFiles}
+        className={styles.uploadWrapper}
+        multiple
+        showUploadList={false}
+      >
+        <Flexbox className={styles.card} padding={16}>
+          <span className={styles.actionTitle}>{t('home.uploadEntries.files.title')}</span>
+          <div className={styles.glow} style={{ background: theme.geekblue }} />
+          <FileTypeIcon
+            className={styles.icon}
+            color={theme.geekblue}
+            icon={<Icon color={'#fff'} icon={ArrowUpIcon} />}
+            size={ICON_SIZE}
+            type={'file'}
+          />
+        </Flexbox>
+      </Upload>
+
+      {/* Upload Folder */}
+      <Upload
+        beforeUpload={handleUploadFolder}
+        className={styles.uploadWrapper}
+        directory
+        multiple
+        showUploadList={false}
+      >
+        <Flexbox className={styles.card} padding={16}>
+          <span className={styles.actionTitle}>{t('home.uploadEntries.folder.title')}</span>
+          <div className={styles.glow} style={{ background: theme.green }} />
+          <FileTypeIcon
+            className={styles.icon}
+            color={theme.green}
+            icon={<Icon color={'#fff'} icon={FolderUp} />}
+            size={ICON_SIZE}
+            type={'file'}
+          />
+        </Flexbox>
+      </Upload>
+    </div>
+  );
+});
+
+export default UploadEntries;