@lobehub/chat 1.11.9 → 1.12.0

package/src/app/(main)/files/features/FileDetail.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Descriptions, Divider, Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import dayjs from 'dayjs';
+import { BoltIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FileListItem } from '@/types/files';
+import { formatSize } from '@/utils/format';
+
+export const DETAIL_PANEL_WIDTH = 300;
+
+const FileDetail = memo<FileListItem>((props) => {
+  const { name, embeddingStatus, size, createdAt, updatedAt, chunkCount } = props || {};
+  const { t } = useTranslation('file');
+  const theme = useTheme();
+
+  if (!props) return null;
+
+  const items = [
+    { children: name, key: 'name', label: t('detail.basic.filename') },
+    { children: formatSize(size), key: 'size', label: t('detail.basic.size') },
+    {
+      children: name.split('.').pop()?.toUpperCase(),
+      key: 'type',
+      label: t('detail.basic.type'),
+    },
+
+    {
+      children: dayjs(createdAt).format('YYYY-MM-DD HH:mm'),
+      key: 'createdAt',
+      label: t('detail.basic.createdAt'),
+    },
+    {
+      children: dayjs(updatedAt).format('YYYY-MM-DD HH:mm'),
+      key: 'updatedAt',
+      label: t('detail.basic.updatedAt'),
+    },
+  ];
+
+  const dataItems = [
+    {
+      children: (
+        <Tag bordered={false} icon={<Icon icon={BoltIcon} />}>
+          {' '}
+          {chunkCount}
+        </Tag>
+      ),
+      key: 'chunkCount',
+      label: t('detail.data.chunkCount'),
+    },
+    {
+      children: (
+        <Tag bordered={false} color={embeddingStatus || 'default'}>
+          {t(`detail.data.embedding.${embeddingStatus || 'default'}`)}
+        </Tag>
+      ),
+      key: 'embeddingStatus',
+      label: t('detail.data.embeddingStatus'),
+    },
+  ];
+
+  return (
+    <Flexbox
+      padding={16}
+      style={{ borderInlineStart: `1px solid ${theme.colorSplit}` }}
+      width={DETAIL_PANEL_WIDTH}
+    >
+      <Descriptions
+        colon={false}
+        column={1}
+        items={items}
+        labelStyle={{ width: 120 }}
+        size={'small'}
+        title={t('detail.basic.title')}
+      />
+      <Divider />
+      <Descriptions
+        colon={false}
+        column={1}
+        items={dataItems}
+        labelStyle={{ width: 120 }}
+        size={'small'}
+      />
+    </Flexbox>
+  );
+});
+
+export default FileDetail;

package/src/app/(main)/files/hooks/useFileCategory.ts

@@ -0,0 +1,9 @@
+import { useQueryState } from 'nuqs';
+
+import { FilesTabs } from '@/types/files';
+
+export const useFileCategory = () =>
+  useQueryState('category', {
+    clearOnDefault: true,
+    defaultValue: FilesTabs.All,
+  });

package/src/app/(main)/files/layout.tsx

@@ -0,0 +1,12 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { serverFeatureFlags } from '@/config/featureFlags';
+
+export default ({ children }: PropsWithChildren) => {
+  const enableKnowledgeBase = serverFeatureFlags().enableKnowledgeBase;
+
+  if (!enableKnowledgeBase) return notFound();
+
+  return children;
+};

package/src/app/(main)/files/loading.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { LoaderCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const { t } = useTranslation('common');
+  return (
+    <Center height={'100%'} width={'100%'}>
+      <Flexbox align={'center'} gap={8}>
+        <div>
+          <Icon icon={LoaderCircle} size={'large'} spin />
+        </div>
+        <Typography.Text type={'secondary'}>{t('loading')}</Typography.Text>
+      </Flexbox>
+    </Center>
+  );
+};

package/src/app/(main)/repos/[id]/@menu/Head/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Skeleton, Typography } from 'antd';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import GoBack from '@/components/GoBack';
+import RepoIcon from '@/components/RepoIcon';
+
+import { useKnowledgeBaseItem } from '../../hooks/useKnowledgeItem';
+
+const Head = memo<{ id: string }>(({ id }) => {
+  const { data, isLoading } = useKnowledgeBaseItem(id);
+
+  return (
+    <Flexbox gap={8}>
+      <GoBack href={'/files'} />
+      <Flexbox align={'center'} gap={8} height={36} horizontal>
+        <Center style={{ minWidth: 24 }} width={24}>
+          <RepoIcon />
+        </Center>
+        {isLoading ? (
+          <Skeleton active paragraph={{ rows: 1, style: { marginBottom: 0 } }} title={false} />
+        ) : (
+          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            {data?.name}
+          </Typography.Text>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+export default Head;

package/src/app/(main)/repos/[id]/@menu/Menu/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { FileText, Settings2Icon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Menu from '@/components/Menu';
+import type { MenuProps } from '@/components/Menu';
+
+const FileMenu = memo<{ id: string }>(({ id }) => {
+  const { t } = useTranslation('knowledgeBase');
+  const pathname = usePathname();
+
+  const [activeKey, setActiveKey] = useState(pathname);
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={FileText} />,
+        key: `/repos/${id}`,
+        label: <Link href={`/repos/${id}`}>{t('tab.files')}</Link>,
+      },
+      // {
+      //   icon: <Icon icon={TestTubeDiagonal} />,
+      //   key: `/repos/${id}/testing`,
+      //   label: <Link href={`/repos/${id}/testing`}>{t('tab.testing')}</Link>,
+      // },
+      {
+        icon: <Icon icon={Settings2Icon} />,
+        key: `/repos/${id}/settings`,
+        label: <Link href={`/repos/${id}/settings`}>{t('tab.settings')}</Link>,
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <Flexbox>
+      <Menu
+        items={items}
+        onClick={({ key }) => {
+          setActiveKey(key);
+        }}
+        selectable
+        selectedKeys={[activeKey]}
+        variant={'compact'}
+      />
+    </Flexbox>
+  );
+});
+
+export default FileMenu;

package/src/app/(main)/repos/[id]/@menu/default.tsx

@@ -0,0 +1,25 @@
+import { Flexbox } from 'react-layout-kit';
+
+import Head from './Head';
+import Menu from './Menu';
+
+interface Params {
+  id: string;
+}
+
+type Props = { params: Params };
+
+const MenuPage = ({ params }: Props) => {
+  const id = params.id;
+
+  return (
+    <Flexbox gap={16} height={'100%'} paddingInline={12} style={{ paddingTop: 12 }}>
+      <Head id={id} />
+      <Menu id={id} />
+    </Flexbox>
+  );
+};
+
+MenuPage.displayName = 'Menu';
+
+export default MenuPage;

package/src/app/(main)/repos/[id]/_layout/Desktop/index.tsx

@@ -0,0 +1,25 @@
+import { Flexbox } from 'react-layout-kit';
+
+import FilePanel from '@/features/FileSidePanel';
+
+import { LayoutProps } from '../type';
+
+const Layout = ({ children, menu }: LayoutProps) => {
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{ maxWidth: 'calc(100vw - 64px)', overflow: 'hidden', position: 'relative' }}
+      width={'100%'}
+    >
+      <FilePanel>{menu}</FilePanel>
+      <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
+        {children}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+Layout.displayName = 'DesktopRepoLayout';
+
+export default Layout;

package/src/app/(main)/repos/[id]/_layout/Mobile.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useQuery } from '@/hooks/useQuery';
+
+import { LayoutProps } from './type';
+
+const useStyles = createStyles(({ css, token }) => ({
+  main: css`
+    position: relative;
+    overflow: hidden;
+    background: ${token.colorBgLayout};
+  `,
+}));
+
+const Layout = memo<LayoutProps>(({ children, menu }) => {
+  const { showMobileWorkspace } = useQuery();
+  const { styles } = useStyles();
+
+  return (
+    <>
+      <Flexbox
+        className={styles.main}
+        height="100%"
+        style={showMobileWorkspace ? { display: 'none' } : undefined}
+        width="100%"
+      >
+        {menu}
+      </Flexbox>
+      <Flexbox
+        className={styles.main}
+        height="100%"
+        style={showMobileWorkspace ? undefined : { display: 'none' }}
+        width="100%"
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+});
+
+Layout.displayName = 'MobileChatLayout';
+
+export default Layout;

package/src/app/(main)/repos/[id]/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  menu: ReactNode;
+}

package/src/app/(main)/repos/[id]/hooks/useKnowledgeItem.ts

@@ -0,0 +1,7 @@
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+
+export const useKnowledgeBaseItem = (id: string) => {
+  const useFetchKnowledgeBaseItem = useKnowledgeBaseStore((s) => s.useFetchKnowledgeBaseItem);
+
+  return useFetchKnowledgeBaseItem(id);
+};

package/src/app/(main)/repos/[id]/layout.tsx

@@ -0,0 +1,13 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+Layout.displayName = 'RepoLayout';
+
+export default (props: LayoutProps) => {
+  return <Layout {...props} />;
+};

package/src/app/(main)/repos/[id]/page.tsx

@@ -0,0 +1,18 @@
+import { redirect } from 'next/navigation';
+
+import { KnowledgeBaseModel } from '@/database/server/models/knowledgeBase';
+import FileManager from '@/features/FileManager';
+
+interface Params {
+  id: string;
+}
+
+type Props = { params: Params };
+
+export default async ({ params }: Props) => {
+  const item = await KnowledgeBaseModel.findById(params.id);
+
+  if (!item) return redirect('/repos');
+
+  return <FileManager knowledgeBaseId={params.id} title={item.name} />;
+};

package/src/app/(main)/repos/layout.tsx

@@ -0,0 +1,13 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { serverFeatureFlags } from '@/config/featureFlags';
+import { isServerMode } from '@/const/version';
+
+export default ({ children }: PropsWithChildren) => {
+  const enableKnowledgeBase = serverFeatureFlags().enableKnowledgeBase;
+
+  if (!isServerMode || !enableKnowledgeBase) return notFound();
+
+  return children;
+};

package/src/app/(main)/repos/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default () => {
+  return redirect('/files');
+};

package/src/app/trpc/async/[trpc]/route.ts

@@ -0,0 +1,28 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import type { NextRequest } from 'next/server';
+
+import { pino } from '@/libs/logger';
+import { createAsyncRouteContext } from '@/server/asyncContext';
+import { asyncRouter } from '@/server/routers/async';
+
+export const maxDuration = 60;
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    /**
+     * @link https://trpc.io/docs/v11/context
+     */
+    createContext: () => createAsyncRouteContext(req),
+
+    endpoint: '/trpc/async',
+
+    onError: ({ error, path, type }) => {
+      pino.info(`Error in tRPC handler (async) on path: ${path}, type: ${type}`);
+      console.error(error);
+    },
+
+    req,
+    router: asyncRouter,
+  });
+
+export { handler as GET, handler as POST };

package/src/chains/abstractChunk.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_MODEL } from '@/const/settings';
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainAbstractChunkText = (text: string): Partial<ChatStreamPayload> => {
+  return {
+    messages: [
+      {
+        content:
+          '你是一名擅长从 chunk 中提取摘要的助理，你需要将用户的会话总结为 1~2 句话的摘要，输出成 chunk 所使用的语种',
+        role: 'system',
+      },
+      {
+        content: `chunk: ${text}`,
+        role: 'user',
+      },
+    ],
+    model: DEFAULT_MODEL,
+  };
+};

package/src/chains/answerWithContext.ts

@@ -0,0 +1,34 @@
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainAnswerWithContext = ({
+  context,
+  knowledge,
+  question,
+}: {
+  context: string[];
+  knowledge: string[];
+  question: string;
+}): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content: `You are a helpful assistant good answering questions related to ${knowledge.join('/')}. And you'll be provided with a question and several passages that might be relevant. And your task is to provide answer based on the question and passages.
+
+Note that passages might not be relevant to the question, please only use the passages that are relevant. Or if there is no relevant passage, please answer using your knowledge.
+
+Answer should use the same original language as the question and follow markdown syntax.
+
+The provided passages as context:
+
+<Context>
+${context.join('\n')}
+</Context>`,
+      role: 'system',
+    },
+    {
+      content: `The question to answer:
+
+${question}`,
+      role: 'user',
+    },
+  ],
+});

package/src/chains/rewriteQuery.ts

@@ -0,0 +1,22 @@
+import { ChatStreamPayload } from '@/types/openai/chat';
+
+export const chainRewriteQuery = (
+  query: string,
+  context: string[],
+): Partial<ChatStreamPayload> => ({
+  messages: [
+    {
+      content: `Given the following conversation and a follow-up question, rephrase the follow up question to be a standalone question, in its original language. Keep as much details as possible from previous messages. Keep entity names and all.
+
+<chatHistory>
+${context.join('\n')}
+</chatHistory>
+`,
+      role: 'system',
+    },
+    {
+      content: `Follow Up Input: ${query}, it's standalone query:`,
+      role: 'user',
+    },
+  ],
+});

package/src/components/DragUpload/index.tsx

@@ -1,14 +1,15 @@
+/* eslint-disable no-undef */
 import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { FileImage, FileText, FileUpIcon } from 'lucide-react';
 import { darken, lighten } from 'polished';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-const DRAGGING_ROOT_ID = 'dragging-root';
-const getContainer = () => document.querySelector(`#${DRAGGING_ROOT_ID}`);
+import { getContainer, useDragUpload } from './useDragUpload';
+
 const BLOCK_SIZE = 64;
 const ICON_SIZE = 36;
 
@@ -64,110 +65,16 @@ const useStyles = createStyles(({ css, token }) => {
   };
 });
 
-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();
-  }
-};
-
 interface DragUploadProps {
   enabledFiles?: boolean;
-  onUploadFiles: (files?: FileList) => Promise<void>;
+  onUploadFiles: (files: File[]) => Promise<void>;
 }
 
 const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }) => {
   const { styles, theme } = useStyles();
   const { t } = useTranslation('components');
-  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) {
-      e.preventDefault();
-
-      // reset counter
-      dragCounter.current = 0;
-
-      setIsDragging(false);
-
-      // get filesList
-      // TODO: support folder files upload
-      const files = e.dataTransfer?.files;
-
-      // upload files
-      onUploadFiles(files);
-    }
-  };
-
-  const handlePaste = (event: ClipboardEvent) => {
-    // get files from clipboard
-    const files = event.clipboardData?.files;
-
-    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]);
+  const isDragging = useDragUpload(onUploadFiles);
 
   if (!isDragging) return;