@lobehub/chat 1.11.8 → 1.12.0

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/Item/index.tsx

@@ -0,0 +1,69 @@
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Content, { knowledgeItemClass } from './Content';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  active: css`
+    background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
+    transition: background 200ms ${token.motionEaseOut};
+
+    &:hover {
+      background: ${token.colorFill};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+
+    margin-inline: 8px;
+    padding-block: 4px;
+    padding-inline: 8px;
+
+    border-radius: ${token.borderRadius}px;
+
+    &.${knowledgeItemClass} {
+      width: calc(100% - 16px);
+    }
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  split: css`
+    border-block-end: 1px solid ${token.colorSplit};
+  `,
+}));
+
+export interface KnowledgeBaseItemProps {
+  active?: boolean;
+  id: string;
+  name: string;
+}
+
+const KnowledgeBaseItem = memo<KnowledgeBaseItemProps>(({ name, active, id }) => {
+  const { styles, cx } = useStyles();
+  const [isHover, setHovering] = useState(false);
+
+  return (
+    <Link href={`/repos/${id}`}>
+      <Flexbox
+        align={'center'}
+        className={cx(styles.container, knowledgeItemClass, active && styles.active)}
+        distribution={'space-between'}
+        horizontal
+        onMouseEnter={() => {
+          setHovering(true);
+        }}
+        onMouseLeave={() => {
+          setHovering(false);
+        }}
+      >
+        <Content id={id} name={name} showMore={isHover} />
+      </Flexbox>
+    </Link>
+  );
+});
+
+export default KnowledgeBaseItem;

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/KnowledgeBaseList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+
+import EmptyStatus from './EmptyStatus';
+import Item from './Item';
+import { SkeletonList } from './SkeletonList';
+
+const KnowledgeBaseList = () => {
+  const useFetchKnowledgeBaseList = useKnowledgeBaseStore((s) => s.useFetchKnowledgeBaseList);
+  const { data, isLoading } = useFetchKnowledgeBaseList();
+
+  if (isLoading) return <SkeletonList />;
+
+  if (data?.length === 0) return <EmptyStatus />;
+
+  return (
+    <Flexbox height={'100%'}>
+      <Virtuoso
+        data={data}
+        fixedItemHeight={36}
+        itemContent={(index, data) => <Item id={data.id} key={data.id} name={data.name} />}
+      />
+    </Flexbox>
+  );
+};
+
+export default KnowledgeBaseList;

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/SkeletonList.tsx

@@ -0,0 +1,57 @@
+'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, prefixCls }) => ({
+  container: css`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    height: 36px;
+    padding: 8px;
+
+    .${prefixCls}-skeleton-content {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+
+  paragraph: css`
+    > li {
+      height: 20px !important;
+    }
+  `,
+}));
+
+export const Placeholder = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <Skeleton
+      active
+      avatar={false}
+      className={styles.container}
+      paragraph={{
+        className: styles.paragraph,
+        rows: 1,
+        style: { marginBottom: 0 },
+        width: '100%',
+      }}
+      title={false}
+    />
+  );
+});
+
+export const SkeletonList = memo(() => (
+  <Flexbox paddingInline={24}>
+    {Array.from({ length: 3 }).map((_, i) => (
+      <Placeholder key={i} />
+    ))}
+  </Flexbox>
+));
+
+export default SkeletonList;

package/src/app/(main)/files/(content)/@menu/features/KnowledgeBase/index.tsx

@@ -0,0 +1,54 @@
+import { CaretDownFilled, CaretRightOutlined } from '@ant-design/icons';
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { PlusIcon } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useCreateNewModal } from '@/features/KnowledgeBaseModal';
+
+import KnowledgeBaseList from './KnowledgeBaseList';
+
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+const KnowledgeBase = () => {
+  const { t } = useTranslation('file');
+  const { styles } = useStyles();
+
+  const [showList, setShowList] = useState(true);
+
+  const { open } = useCreateNewModal();
+
+  return (
+    <Flexbox flex={1} gap={8}>
+      <Flexbox
+        align={'center'}
+        className={styles.header}
+        horizontal
+        justify={'space-between'}
+        paddingInline={'16px 12px'}
+      >
+        <Flexbox align={'center'} gap={8} horizontal>
+          <ActionIcon
+            icon={(showList ? CaretDownFilled : CaretRightOutlined) as any}
+            onClick={() => {
+              setShowList(!showList);
+            }}
+            size={'small'}
+          />
+          <div style={{ lineHeight: '14px' }}>{t('knowledgeBase.title')}</div>
+        </Flexbox>
+        <ActionIcon icon={PlusIcon} onClick={open} size={'small'} title={t('knowledgeBase.new')} />
+      </Flexbox>
+
+      {showList && <KnowledgeBaseList />}
+    </Flexbox>
+  );
+};
+
+export default KnowledgeBase;

package/src/app/(main)/files/(content)/@modal/(.)[id]/FileDetail.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { memo } from 'react';
+
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+
+import Detail from '../../../features/FileDetail';
+
+const FileDetail = memo<{ id: string }>(({ id }) => {
+  const file = useFileStore(fileManagerSelectors.getFileById(id));
+
+  if (!file) return;
+
+  return <Detail {...file} />;
+});
+export default FileDetail;

package/src/app/(main)/files/(content)/@modal/(.)[id]/FilePreview.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+import FileViewer from '@/features/FileViewer';
+import { fileManagerSelectors, useFileStore } from '@/store/file';
+
+const FilePreview = memo<{ id: string }>(({ id }) => {
+  const file = useFileStore(fileManagerSelectors.getFileById(id));
+
+  if (!file) return;
+
+  return <FileViewer {...file} />;
+});
+export default FilePreview;

package/src/app/(main)/files/(content)/@modal/(.)[id]/FullscreenModal.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { ConfigProvider } from 'antd';
+import { createStyles } from 'antd-style';
+import { useRouter } from 'next/navigation';
+import { ReactNode, useState } from 'react';
+
+import { DETAIL_PANEL_WIDTH } from '@/app/(main)/files/features/FileDetail';
+
+const useStyles = createStyles(({ css, token }, showDetail: boolean) => {
+  return {
+    body: css`
+      height: 100%;
+      max-height: calc(100dvh - 56px) !important;
+    `,
+    content: css`
+      height: 100%;
+      background: transparent !important;
+      border: none !important;
+    `,
+    extra: css`
+      position: fixed;
+      z-index: ${token.zIndexPopupBase + 10};
+      inset-block: 0 0;
+      inset-inline-end: 0;
+
+      width: ${DETAIL_PANEL_WIDTH}px;
+
+      background: ${token.colorBgLayout};
+      border-inline-start: 1px solid ${token.colorSplit};
+    `,
+    header: css`
+      background: transparent !important;
+    `,
+    modal: css`
+      position: relative;
+      inset-block-start: 0;
+
+      width: ${showDetail ? `calc(100vw - ${DETAIL_PANEL_WIDTH}px) ` : '100vw'} !important;
+      max-width: none;
+      height: 100%;
+      margin: 0;
+      padding-block-end: 0;
+
+      > div {
+        height: 100%;
+      }
+    `,
+  };
+});
+
+interface FullscreenModalProps {
+  children: ReactNode;
+  detail?: ReactNode;
+}
+
+const FullscreenModal = ({ children, detail }: FullscreenModalProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(true);
+
+  const { styles } = useStyles(!!detail);
+
+  return (
+    <>
+      <ConfigProvider theme={{ token: { motion: false } }}>
+        <Modal
+          className={styles.modal}
+          classNames={{ body: styles.body, content: styles.content, header: styles.header }}
+          footer={false}
+          onCancel={() => {
+            router.back();
+            setOpen(false);
+          }}
+          open={open}
+          width={'auto'}
+        >
+          {children}
+        </Modal>
+      </ConfigProvider>
+      {!!detail && <div className={styles.extra}>{detail}</div>}
+    </>
+  );
+};
+export default FullscreenModal;

package/src/app/(main)/files/(content)/@modal/(.)[id]/page.tsx

@@ -0,0 +1,19 @@
+import FileDetail from './FileDetail';
+import FilePreview from './FilePreview';
+import FullscreenModal from './FullscreenModal';
+
+interface Params {
+  id: string;
+}
+
+type Props = { params: Params };
+
+const Page = ({ params }: Props) => {
+  return (
+    <FullscreenModal detail={<FileDetail id={params.id} />}>
+      <FilePreview id={params.id} />
+    </FullscreenModal>
+  );
+};
+
+export default Page;

package/src/app/(main)/files/(content)/@modal/default.tsx

@@ -0,0 +1,3 @@
+// This ensures that the modal is not rendered when it's not active.
+
+export default () => null;

package/src/app/(main)/files/(content)/NotSupportClient.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { Database, FileImage, FileText, FileUpIcon, LibraryBig, SearchCheck } from 'lucide-react';
+import Link from 'next/link';
+import { Trans, useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import FeatureList from '@/components/FeatureList';
+import { DATABASE_SELF_HOSTING_URL, OFFICIAL_URL, UTM_SOURCE } from '@/const/url';
+
+const BLOCK_SIZE = 100;
+const ICON_SIZE = 72;
+
+const useStyles = createStyles(({ css, token }) => ({
+  actionTitle: css`
+    margin-block-start: 12px;
+    font-size: 16px;
+    color: ${token.colorTextSecondary};
+  `,
+  card: css`
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 200px;
+    height: 140px;
+
+    font-weight: 500;
+    text-align: center;
+
+    background: ${token.colorFillTertiary};
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow: 0 0 0 1px ${token.colorFillTertiary} inset;
+
+    transition: background 0.3s ease-in-out;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  glow: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-end: 0;
+
+    width: 48px;
+    height: 48px;
+
+    opacity: 0.5;
+    filter: blur(24px);
+  `,
+
+  icon: css`
+    color: ${token.colorTextLightSolid};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  iconGroup: css`
+    margin-block-start: -44px;
+  `,
+}));
+
+const NotSupportClient = () => {
+  const { t } = useTranslation('file');
+  const theme = useTheme();
+  const { styles } = useStyles();
+
+  const features = [
+    {
+      avatar: Database,
+      desc: t('notSupportGuide.features.allKind.desc'),
+      title: t('notSupportGuide.features.allKind.title'),
+    },
+    {
+      avatar: SearchCheck,
+      desc: t('notSupportGuide.features.embeddings.desc'),
+      title: t('notSupportGuide.features.embeddings.title'),
+    },
+    {
+      avatar: LibraryBig,
+      desc: t('notSupportGuide.features.repos.desc'),
+      title: t('notSupportGuide.features.repos.title'),
+    },
+  ];
+
+  return (
+    <Center gap={40} height={'100%'} width={'100%'}>
+      <Flexbox className={styles.iconGroup} gap={12} horizontal>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.purple,
+            transform: 'rotateZ(-20deg) translateX(10px)',
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+        </Center>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.gold,
+            transform: 'translateY(-22px)',
+            zIndex: 1,
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+        </Center>
+        <Center
+          className={styles.icon}
+          height={BLOCK_SIZE * 1.25}
+          style={{
+            background: theme.geekblue,
+            transform: 'rotateZ(20deg) translateX(-10px)',
+          }}
+          width={BLOCK_SIZE}
+        >
+          <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+        </Center>
+      </Flexbox>
+
+      <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
+        <Typography.Title>{t('notSupportGuide.title')}</Typography.Title>
+        <Typography.Text type={'secondary'}>
+          <Trans i18nKey={'notSupportGuide.desc'} ns={'file'}>
+            当前部署实例为客户端数据库模式，无法使用文件管理功能。请切换到
+            <Link href={DATABASE_SELF_HOSTING_URL}>服务端数据库部署模式</Link>
+            ，或直接使用官方的
+            <Link
+              href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=client_not_support_file`}
+            >
+              LobeChat Cloud
+            </Link>
+          </Trans>
+        </Typography.Text>
+      </Flexbox>
+
+      <Flexbox style={{ marginTop: 40 }}>
+        <FeatureList data={features} />
+      </Flexbox>
+    </Center>
+  );
+};
+
+export default NotSupportClient;

package/src/app/(main)/files/(content)/_layout/Desktop/index.tsx

@@ -0,0 +1,28 @@
+import { Flexbox } from 'react-layout-kit';
+
+import FilePanel from '@/features/FileSidePanel';
+
+import { LayoutProps } from '../type';
+
+const Layout = ({ children, menu, modal }: 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>
+      {modal}
+    </>
+  );
+};
+
+Layout.displayName = 'DesktopFileLayout';
+
+export default Layout;

package/src/app/(main)/files/(content)/_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)/files/(content)/_layout/type.ts

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

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

@@ -0,0 +1,18 @@
+import ServerLayout from '@/components/server/ServerLayout';
+import { isServerMode } from '@/const/version';
+
+import NotSupportClient from './NotSupportClient';
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+Layout.displayName = 'FileLayout';
+
+export default (props: LayoutProps) => {
+  // if there is client db mode , tell user to switch to server mode
+  if (!isServerMode) return <NotSupportClient />;
+
+  return <Layout {...props} />;
+};

package/src/app/(main)/files/(content)/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import { useFileCategory } from '@/app/(main)/files/hooks/useFileCategory';
+import FileManager from '@/features/FileManager';
+import { FilesTabs } from '@/types/files';
+
+export default () => {
+  const { t } = useTranslation('file');
+  const [category] = useFileCategory();
+
+  return <FileManager category={category} title={t(`tab.${category as FilesTabs}`)} />;
+};

package/src/app/(main)/files/[id]/Header.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Divider, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { ArrowLeftIcon, DownloadIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { downloadFile } from '@/utils/downloadFile';
+
+interface HeaderProps {
+  filename: string;
+  id: string;
+  url: string;
+}
+const Header = memo<HeaderProps>(({ filename, url }) => {
+  const { t } = useTranslation('common');
+  const router = useRouter();
+
+  const theme = useTheme();
+  return (
+    <Flexbox
+      align={'center'}
+      horizontal
+      justify={'space-between'}
+      paddingBlock={12}
+      paddingInline={12}
+      style={{ borderBottom: `1px solid ${theme.colorSplit}` }}
+    >
+      <Flexbox align={'baseline'} horizontal>
+        <Button
+          icon={<Icon icon={ArrowLeftIcon}></Icon>}
+          onClick={() => {
+            router.push('/files');
+          }}
+          size={'small'}
+          type={'text'}
+        >
+          {t('back')}
+        </Button>
+        <Divider type={'vertical'} />
+        <Typography.Title
+          level={1}
+          style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 0, paddingInlineStart: 8 }}
+        >
+          {filename}
+        </Typography.Title>
+      </Flexbox>
+      <Flexbox>
+        <ActionIcon
+          icon={DownloadIcon}
+          onClick={() => {
+            downloadFile(url, filename);
+          }}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+export default Header;