@lobehub/chat 1.11.9 → 1.12.0

package/src/components/DragUpload/useDragUpload.tsx

@@ -0,0 +1,146 @@
+/* eslint-disable no-undef */
+import { useEffect, useRef, useState } from 'react';
+
+const DRAGGING_ROOT_ID = 'dragging-root';
+export const getContainer = () => document.querySelector(`#${DRAGGING_ROOT_ID}`);
+
+const handleDragOver = (e: DragEvent) => {
+  if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return;
+
+  const isFile = e.dataTransfer.types.includes('Files');
+  if (isFile) {
+    e.preventDefault();
+  }
+};
+
+const processEntry = async (entry: FileSystemEntry): Promise<File[]> => {
+  return new Promise((resolve) => {
+    if (entry.isFile) {
+      (entry as FileSystemFileEntry).file((file) => {
+        resolve([file]);
+      });
+    } else if (entry.isDirectory) {
+      const dirReader = (entry as FileSystemDirectoryEntry).createReader();
+      dirReader.readEntries(async (entries) => {
+        const filesPromises = entries.map((element) => processEntry(element));
+        const fileArrays = await Promise.all(filesPromises);
+        resolve(fileArrays.flat());
+      });
+    } else {
+      resolve([]);
+    }
+  });
+};
+
+const getFileListFromDataTransferItems = async (items: DataTransferItem[]) => {
+  // get filesList
+  const filePromises: Promise<File[]>[] = [];
+  for (const item of items) {
+    if (item.kind === 'file') {
+      const entry = item.webkitGetAsEntry();
+      if (entry) {
+        filePromises.push(processEntry(entry));
+      }
+    }
+  }
+
+  const fileArrays = await Promise.all(filePromises);
+  return fileArrays.flat();
+};
+
+export const useDragUpload = (onUploadFiles: (files: File[]) => Promise<void>) => {
+  const [isDragging, setIsDragging] = useState(false);
+  // When a file is dragged to a different area, the 'dragleave' event may be triggered,
+  // causing isDragging to be mistakenly set to false.
+  // to fix this issue, use a counter to ensure the status change only when drag event left the browser window .
+  const dragCounter = useRef(0);
+
+  const handleDragEnter = (e: DragEvent) => {
+    if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return;
+
+    const isFile = e.dataTransfer.types.includes('Files');
+    if (isFile) {
+      dragCounter.current += 1;
+      e.preventDefault();
+      setIsDragging(true);
+    }
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return;
+
+    const isFile = e.dataTransfer.types.includes('Files');
+    if (isFile) {
+      e.preventDefault();
+
+      // reset counter
+      dragCounter.current -= 1;
+
+      if (dragCounter.current === 0) {
+        setIsDragging(false);
+      }
+    }
+  };
+
+  const handleDrop = async (e: DragEvent) => {
+    if (!e.dataTransfer?.items || e.dataTransfer.items.length === 0) return;
+
+    const isFile = e.dataTransfer.types.includes('Files');
+    if (!isFile) return;
+
+    e.preventDefault();
+
+    // reset counter
+    dragCounter.current = 0;
+
+    setIsDragging(false);
+    const items = Array.from(e.dataTransfer?.items);
+
+    const files = await getFileListFromDataTransferItems(items);
+
+    if (files.length === 0) return;
+
+    // upload files
+    onUploadFiles(files);
+  };
+
+  const handlePaste = async (event: ClipboardEvent) => {
+    // get files from clipboard
+    if (!event.clipboardData) return;
+    const items = Array.from(event.clipboardData?.items);
+
+    const files = await getFileListFromDataTransferItems(items);
+    if (files.length === 0) return;
+
+    onUploadFiles(files);
+  };
+
+  useEffect(() => {
+    if (getContainer()) return;
+    const root = document.createElement('div');
+    root.id = DRAGGING_ROOT_ID;
+    document.body.append(root);
+
+    return () => {
+      root.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('dragenter', handleDragEnter);
+    window.addEventListener('dragover', handleDragOver);
+    window.addEventListener('dragleave', handleDragLeave);
+    window.addEventListener('drop', handleDrop);
+    window.addEventListener('paste', handlePaste);
+
+    return () => {
+      window.removeEventListener('dragenter', handleDragEnter);
+      window.removeEventListener('dragover', handleDragOver);
+      window.removeEventListener('dragleave', handleDragLeave);
+      window.removeEventListener('drop', handleDrop);
+      window.removeEventListener('paste', handlePaste);
+    };
+  }, [handleDragEnter, handleDragOver, handleDragLeave, handleDrop, handlePaste]);
+
+  return isDragging;
+};

package/src/components/FeatureList/index.tsx

@@ -0,0 +1,64 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
+  desc: css`
+    width: 280px;
+    margin-block-end: 0;
+    color: ${token.colorTextSecondary};
+
+    ${responsive.mobile} {
+      line-height: ${token.lineHeight};
+    }
+  `,
+  icon: css`
+    color: ${isDarkMode ? token.blue : token.geekblue};
+  `,
+  iconCtn: css`
+    width: 72px;
+    height: 72px;
+    background: ${isDarkMode ? token.blue1 : token.geekblue1};
+    border-radius: 50%;
+  `,
+  title: css`
+    margin-block-end: 0;
+    font-size: ${token.fontSizeLG}px;
+    font-weight: bold;
+  `,
+}));
+
+export interface FeatureItem {
+  avatar: LucideIcon;
+  desc: string;
+  title: string;
+}
+interface FeatureListProps {
+  data: FeatureItem[];
+}
+
+const FeatureList = memo<FeatureListProps>(({ data }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox gap={32}>
+      {data.map((item) => {
+        return (
+          <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
+            <Center className={styles.iconCtn}>
+              <Icon className={styles.icon} icon={item.avatar} size={{ fontSize: 36 }} />
+            </Center>
+            <Flexbox gap={8}>
+              <p className={styles.title}>{item.title}</p>
+              <p className={styles.desc}>{item.desc}</p>
+            </Flexbox>
+          </Flexbox>
+        );
+      })}
+    </Flexbox>
+  );
+});
+
+export default FeatureList;

package/src/components/FileParsingStatus/index.tsx

@@ -0,0 +1,230 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Badge, Button, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import { BoltIcon, Loader2Icon, RotateCwIcon } from 'lucide-react';
+import { darken, lighten } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { AsyncTaskStatus, FileParsingTask } from '@/types/asyncTask';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  errorReason: css`
+    padding: 4px;
+
+    font-family: monospace;
+    font-size: 12px;
+
+    background: ${isDarkMode ? darken(0.1, token.colorText) : lighten(0.1, token.colorText)};
+    border-radius: 4px;
+  `,
+}));
+
+interface FileParsingStatusProps extends FileParsingTask {
+  className?: string;
+  hideEmbeddingButton?: boolean;
+  onClick?: (status: AsyncTaskStatus) => void;
+  onEmbeddingClick?: () => void;
+  onErrorClick?: (task: 'chunking' | 'embedding') => void;
+  preparingEmbedding?: boolean;
+}
+
+const FileParsingStatus = memo<FileParsingStatusProps>(
+  ({
+    chunkingStatus,
+    onEmbeddingClick,
+    chunkingError,
+    finishEmbedding,
+    chunkCount,
+    embeddingStatus,
+    embeddingError,
+    onClick,
+    preparingEmbedding,
+    onErrorClick,
+    className,
+    hideEmbeddingButton,
+  }) => {
+    const { t } = useTranslation(['components', 'common']);
+    const { styles, cx } = useStyles();
+
+    switch (chunkingStatus) {
+      case AsyncTaskStatus.Processing: {
+        return (
+          <Tooltip
+            overlayStyle={{ pointerEvents: 'none' }}
+            title={t('FileParsingStatus.chunks.status.processingTip')}
+          >
+            <Tag
+              bordered={false}
+              className={className}
+              color={'processing'}
+              icon={<Badge status={'processing'} />}
+              style={{ display: 'flex', gap: 4 }}
+            >
+              {t('FileParsingStatus.chunks.status.processing')}
+            </Tag>
+          </Tooltip>
+        );
+      }
+
+      case AsyncTaskStatus.Error: {
+        return (
+          <Tooltip
+            overlayStyle={{ maxWidth: 340, pointerEvents: 'none' }}
+            // style={{}}
+            title={
+              <Flexbox gap={4}>
+                {t('FileParsingStatus.chunks.status.errorResult')}
+                {chunkingError && (
+                  <Flexbox className={styles.errorReason}>
+                    [{chunkingError.name}]:{' '}
+                    {chunkingError.body && typeof chunkingError.body !== 'string'
+                      ? chunkingError.body.detail
+                      : chunkingError.body}
+                  </Flexbox>
+                )}
+              </Flexbox>
+            }
+          >
+            <Tag bordered={false} className={className} color={'error'}>
+              {t('FileParsingStatus.chunks.status.error')}{' '}
+              <Icon
+                icon={RotateCwIcon}
+                onClick={() => {
+                  onErrorClick?.('chunking');
+                }}
+                style={{ cursor: 'pointer' }}
+                title={t('retry', { ns: 'common' })}
+              />
+            </Tag>
+          </Tooltip>
+        );
+      }
+
+      case AsyncTaskStatus.Success: {
+        const isEmbeddingProcessing = embeddingStatus === AsyncTaskStatus.Processing;
+
+        switch (embeddingStatus) {
+          case AsyncTaskStatus.Processing: {
+            return (
+              <Flexbox horizontal>
+                <Tooltip
+                  overlayStyle={{ pointerEvents: 'none' }}
+                  title={t('FileParsingStatus.chunks.embeddingStatus.processing')}
+                >
+                  <Tag
+                    bordered={false}
+                    className={cx('chunk-tag', className)}
+                    color={'processing'}
+                    icon={
+                      preparingEmbedding ? (
+                        <Icon icon={Loader2Icon} spin />
+                      ) : (
+                        <Icon icon={BoltIcon} spin={isEmbeddingProcessing} />
+                      )
+                    }
+                    style={{ cursor: 'pointer' }}
+                  >
+                    {chunkCount}
+                  </Tag>
+                </Tooltip>
+              </Flexbox>
+            );
+          }
+
+          case AsyncTaskStatus.Error: {
+            return (
+              <Tooltip
+                overlayStyle={{ maxWidth: 340, pointerEvents: 'none' }}
+                title={
+                  <Flexbox gap={4}>
+                    {t('FileParsingStatus.chunks.embeddingStatus.errorResult')}
+                    {embeddingError && (
+                      <Flexbox className={styles.errorReason}>
+                        [{embeddingError.name}]:{' '}
+                        {embeddingError.body && typeof embeddingError.body !== 'string'
+                          ? embeddingError.body.detail
+                          : embeddingError.body}
+                      </Flexbox>
+                    )}
+                  </Flexbox>
+                }
+              >
+                <Tag bordered={false} className={className} color={'error'}>
+                  {t('FileParsingStatus.chunks.embeddingStatus.error')}{' '}
+                  <Icon
+                    icon={RotateCwIcon}
+                    onClick={() => {
+                      onErrorClick?.('embedding');
+                    }}
+                    style={{ cursor: 'pointer' }}
+                    title={t('retry', { ns: 'common' })}
+                  />
+                </Tag>
+              </Tooltip>
+            );
+          }
+        }
+
+        return (
+          <Flexbox horizontal>
+            <Tooltip
+              overlayStyle={{ pointerEvents: 'none' }}
+              title={
+                finishEmbedding
+                  ? t('FileParsingStatus.chunks.embeddingStatus.success')
+                  : t('FileParsingStatus.chunks.embeddingStatus.empty')
+              }
+            >
+              <Tag
+                bordered={false}
+                className={cx('chunk-tag', className)}
+                color={finishEmbedding ? 'purple' : undefined}
+                icon={
+                  preparingEmbedding ? (
+                    <Icon icon={Loader2Icon} spin />
+                  ) : (
+                    <Icon icon={BoltIcon} spin={isEmbeddingProcessing} />
+                  )
+                }
+                onClick={() => {
+                  onClick?.(AsyncTaskStatus.Success);
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                {chunkCount}
+                {
+                  // if want to hide button
+                  hideEmbeddingButton ||
+                  // or if finished the embedding
+                  finishEmbedding ||
+                  // or if preparing the embedding
+                  preparingEmbedding ? null : (
+                    <Button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onEmbeddingClick?.();
+                      }}
+                      style={{
+                        fontSize: 12,
+                        height: 'auto',
+                        paddingBlock: 0,
+                        paddingInline: '8px 0',
+                      }}
+                      type={'link'}
+                    >
+                      {t('FileParsingStatus.chunks.embeddings')}
+                    </Button>
+                  )
+                }
+              </Tag>
+            </Tooltip>
+          </Flexbox>
+        );
+      }
+    }
+  },
+);
+
+export default FileParsingStatus;

package/src/components/ImageItem/index.tsx

@@ -22,6 +22,14 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   image: css`
     margin-block: 0 !important;
+
+    .ant-image {
+      height: 100% !important;
+
+      img {
+        height: 100% !important;
+      }
+    }
   `,
 }));
 
@@ -37,7 +45,7 @@ interface FileItemProps {
   url?: string;
 }
 
-const ImageItem = memo<FileItemProps>(
+const FileItem = memo<FileItemProps>(
   ({ editable, alt, onRemove, url, loading, alwaysShowClose }) => {
     const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
     const { styles, cx } = useStyles();
@@ -72,4 +80,4 @@ const ImageItem = memo<FileItemProps>(
   },
 );
 
-export default ImageItem;
+export default FileItem;

package/src/components/KnowledgeIcon/index.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import RepoIcon from '@/components/RepoIcon';
+import { KnowledgeType } from '@/types/knowledgeBase';
+
+interface KnowledgeIconProps {
+  fileType?: string;
+  name: string;
+  size?: number | { file?: number; repo?: number };
+  type: KnowledgeType;
+}
+
+const KnowledgeIcon = memo<KnowledgeIconProps>(({ type, size, fileType, name }) => {
+  const repoSize = (typeof size === 'object' ? size.repo : size) || 24;
+  const fileSize = (typeof size === 'object' ? size.file : size) || 24;
+
+  return type === KnowledgeType.KnowledgeBase ? (
+    <Center height={repoSize} width={repoSize}>
+      <RepoIcon size={repoSize / 1.2} />
+    </Center>
+  ) : (
+    <FileIcon fileName={name} fileType={fileType!} size={fileSize} />
+  );
+});
+
+export default KnowledgeIcon;

package/src/config/app.ts

@@ -13,6 +13,11 @@ declare global {
 
 export const getAppConfig = () => {
   const ACCESS_CODES = process.env.ACCESS_CODE?.split(',').filter(Boolean) || [];
+  const isInVercel = process.env.VERCEL === '1';
+
+  const vercelUrl = `https://${process.env.VERCEL_URL}`;
+
+  const APP_URL = process.env.APP_URL ? process.env.APP_URL : isInVercel ? vercelUrl : undefined;
 
   return createEnv({
     client: {
@@ -52,7 +57,7 @@ export const getAppConfig = () => {
         : 'https://chat-plugins.lobehub.com',
 
       PLUGIN_SETTINGS: process.env.PLUGIN_SETTINGS,
-      APP_URL: process.env.APP_URL,
+      APP_URL,
     },
   });
 };

package/src/config/featureFlags/schema.ts

@@ -46,7 +46,7 @@ export const DEFAULT_FEATURE_FLAGS: IFeatureFlags = {
   check_updates: true,
   welcome_suggest: true,
 
-  knowledge_base: false,
+  knowledge_base: true,
 
   clerk_sign_up: true,
 

package/src/const/file.ts

@@ -0,0 +1 @@
+export const FILE_UPLOAD_BLACKLIST = ['.DS_Store'];

package/src/const/url.ts

@@ -25,6 +25,7 @@ export const DOCUMENTS = urlJoin(OFFICIAL_SITE, '/docs');
 export const USAGE_DOCUMENTS = urlJoin(DOCUMENTS, '/usage');
 export const SELF_HOSTING_DOCUMENTS = urlJoin(DOCUMENTS, '/self-hosting');
 export const WEBRTC_SYNC_DOCUMENTS = urlJoin(SELF_HOSTING_DOCUMENTS, '/advanced/webrtc');
+export const DATABASE_SELF_HOSTING_URL = urlJoin(SELF_HOSTING_DOCUMENTS, '/server-database');
 
 // use this for the link
 export const DOCUMENTS_REFER_URL = `${DOCUMENTS}?utm_source=${UTM_SOURCE}`;

package/src/database/client/models/file.ts

@@ -15,8 +15,14 @@ class _FileModel extends BaseModel<'files'> {
     return this._addWithSync(file, `file-${id}`);
   }
 
-  async findById(id: string): Promise<DBModel<DB_File>> {
-    return this.table.get(id);
+  async findById(id: string): Promise<DBModel<DB_File> | undefined> {
+    const item = await this.table.get(id);
+    if (!item) return;
+
+    // arrayBuffer to url
+    const base64 = Buffer.from(item.data!).toString('base64');
+
+    return { ...item, url: `data:${item.fileType};base64,${base64}` };
   }
 
   async delete(id: string) {

package/src/database/server/migrations/0005_pgvector.sql

@@ -0,0 +1,2 @@
+-- Custom SQL migration file, put you code below! --
+CREATE EXTENSION IF NOT EXISTS vector;