@lobehub/chat 1.11.9 → 1.12.0

package/src/app/(main)/chat/(workspace)/@portal/Home/Files/FileList/Item.tsx

@@ -0,0 +1,53 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { ChatFileItem } from '@/types/message';
+import { formatSize } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    overflow: hidden;
+
+    max-width: 420px;
+    padding-block: 8px;
+    padding-inline: 12px;
+
+    background: ${token.colorFillTertiary};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+}));
+
+const ArtifactItem = memo<ChatFileItem>(({ name, fileType, size }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.container}
+      gap={8}
+      horizontal
+      // onClick={() => {
+      //   if (!isToolHasUI || !identifier) return;
+      //
+      //   openToolUI(messageId, identifier);
+      // }}
+    >
+      <FileIcon fileName={name} fileType={fileType} />
+      <Flexbox>
+        <Typography.Text ellipsis={{ tooltip: true }}>{name}</Typography.Text>
+        <Typography.Text type={'secondary'}>{formatSize(size)}</Typography.Text>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ArtifactItem;

package/src/app/(main)/chat/(workspace)/@portal/Home/Files/FileList/index.tsx

@@ -0,0 +1,50 @@
+import { Avatar, Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { InboxIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import Balancer from 'react-wrap-balancer';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import SkeletonLoading from '../../../components/SkeletonLoading';
+import FileItem from './Item';
+
+const FileList = () => {
+  const { t } = useTranslation('portal');
+  const files = useChatStore(chatSelectors.currentUserFiles, isEqual);
+  const theme = useTheme();
+  const isCurrentChatLoaded = useChatStore(chatSelectors.isCurrentChatLoaded);
+
+  return !isCurrentChatLoaded ? (
+    <Flexbox gap={12} paddingInline={12}>
+      <SkeletonLoading />
+    </Flexbox>
+  ) : files.length === 0 ? (
+    <Center
+      gap={8}
+      paddingBlock={24}
+      style={{ border: `1px dashed ${theme.colorSplit}`, borderRadius: 8, marginInline: 12 }}
+    >
+      <Avatar
+        avatar={<Icon icon={InboxIcon} size={'large'} />}
+        background={theme.colorFillTertiary}
+        size={48}
+      />
+      <Balancer>
+        <Typography.Text type={'secondary'}>{t('emptyArtifactList')}</Typography.Text>
+      </Balancer>
+    </Center>
+  ) : (
+    <Flexbox gap={12} paddingInline={12}>
+      {files.map((m) => (
+        <FileItem {...m} key={m.id} />
+      ))}
+    </Flexbox>
+  );
+};
+
+export default FileList;

package/src/app/(main)/chat/(workspace)/@portal/Home/Files/index.tsx

@@ -0,0 +1,21 @@
+import { Typography } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from './FileList';
+
+export const Files = memo(() => {
+  const { t } = useTranslation('portal');
+
+  return (
+    <Flexbox gap={8}>
+      <Typography.Title level={5} style={{ marginInline: 12 }}>
+        {t('files')}
+      </Typography.Title>
+      <FileList />
+    </Flexbox>
+  );
+});
+
+export default Files;

package/src/app/(main)/chat/(workspace)/@portal/Home/index.tsx

@@ -1,10 +1,12 @@
 import { Flexbox } from 'react-layout-kit';
 
 import Artifacts from './Artifacts';
+import Files from './Files';
 
 const Home = () => {
   return (
     <Flexbox gap={12} height={'100%'}>
+      <Files />
       <Artifacts />
     </Flexbox>
   );

package/src/app/(main)/chat/(workspace)/@portal/router.tsx

@@ -6,13 +6,17 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
 import Artifacts from './Artifacts';
+import FilePreview from './FilePreview';
 import Home from './Home';
 
 const PortalView = memo(() => {
   const showArtifactUI = useChatStore(chatPortalSelectors.showArtifactUI);
+  const showFilePreview = useChatStore(chatPortalSelectors.showFilePreview);
 
   if (showArtifactUI) return <Artifacts />;
 
+  if (showFilePreview) return <FilePreview />;
+
   return <Home />;
 });
 

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/KnowledgeTag.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Icon, Tag } from '@lobehub/ui';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
+import { LibraryBig } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import KnowledgeIcon from '@/components/KnowledgeIcon';
+import { KnowledgeItem } from '@/types/knowledgeBase';
+
+export interface PluginTagProps {
+  data: KnowledgeItem[];
+}
+
+const PluginTag = memo<PluginTagProps>(({ data }) => {
+  if (data.length === 0) return null;
+
+  const items: MenuProps['items'] = data.map((item) => ({
+    icon: <KnowledgeIcon fileType={item.fileType} name={item.name} type={item.type} />,
+    key: item.id,
+    label: <Flexbox style={{ paddingInlineStart: 8 }}>{item.name}</Flexbox>,
+  }));
+
+  const count = data.length;
+
+  return (
+    <Dropdown menu={{ items }}>
+      <div>
+        <Tag>
+          {<Icon icon={LibraryBig} />}
+          {data[0].name}
+          {count > 1 && <div>({data.length - 1}+)</div>}
+        </Tag>
+      </div>
+    </Dropdown>
+  );
+});
+
+export default PluginTag;

package/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Tags.tsx

@@ -1,3 +1,4 @@
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -9,12 +10,15 @@ import { useUserStore } from '@/store/user';
 import { modelProviderSelectors } from '@/store/user/selectors';
 
 import PluginTag from '../../../features/PluginTag';
+import KnowledgeTag from './KnowledgeTag';
 
 const TitleTags = memo(() => {
-  const [model, plugins] = useAgentStore((s) => [
+  const [model, hasKnowledge] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
-    agentSelectors.currentAgentPlugins(s),
+    agentSelectors.hasKnowledge(s),
   ]);
+  const plugins = useAgentStore(agentSelectors.currentAgentPlugins, isEqual);
+  const enabledKnowledge = useAgentStore(agentSelectors.currentEnabledKnowledge, isEqual);
 
   const showPlugin = useUserStore(modelProviderSelectors.isModelEnabledFunctionCall(model));
 
@@ -24,6 +28,7 @@ const TitleTags = memo(() => {
         <ModelTag model={model} />
       </ModelSwitchPanel>
       {showPlugin && plugins?.length > 0 && <PluginTag plugins={plugins} />}
+      {hasKnowledge && <KnowledgeTag data={enabledKnowledge} />}
     </Flexbox>
   );
 });

package/src/app/(main)/chat/(workspace)/_layout/Desktop/HotKeys.tsx

@@ -18,7 +18,7 @@ const HotKeys = () => {
   ]);
   const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
 
-  const [clearImageList] = useFileStore((s) => [s.clearImageList]);
+  const [clearImageList] = useFileStore((s) => [s.clearChatUploadFileList]);
   const clearHotkeys = [META_KEY, ALT_KEY, CLEAN_MESSAGE_KEY].join('+');
 
   const resetConversation = useCallback(() => {

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PanelTitle from '@/components/PanelTitle';
+
+import FileMenu from './features/FileMenu';
+import KnowledgeBase from './features/KnowledgeBase';
+
+const Menu = () => {
+  const { t } = useTranslation('file');
+
+  return (
+    <Flexbox gap={16} height={'100%'}>
+      <Flexbox paddingInline={8}>
+        <PanelTitle desc={t('desc')} title={t('title')} />
+        <FileMenu />
+      </Flexbox>
+      <KnowledgeBase />
+    </Flexbox>
+  );
+};
+
+Menu.displayName = 'Menu';
+
+export default Menu;

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { FileText, Globe, ImageIcon, LayoutGrid, Mic2, SquarePlay } from 'lucide-react';
+import Link from 'next/link';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useFileCategory } from '@/app/(main)/files/hooks/useFileCategory';
+import Menu from '@/components/Menu';
+import type { MenuProps } from '@/components/Menu';
+import { FilesTabs } from '@/types/files';
+
+const FileMenu = memo(() => {
+  const { t } = useTranslation('file');
+  const [activeKey, setActiveKey] = useFileCategory();
+
+  const items: MenuProps['items'] = useMemo(
+    () =>
+      [
+        {
+          icon: <Icon icon={LayoutGrid} />,
+          key: FilesTabs.All,
+          label: (
+            <Link href={'/files'} onClick={(e) => e.preventDefault()}>
+              {t('tab.all')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={FileText} />,
+          key: FilesTabs.Documents,
+          label: (
+            <Link href={'/files?category=documents'} onClick={(e) => e.preventDefault()}>
+              {t('tab.documents')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={ImageIcon} />,
+          key: FilesTabs.Images,
+          label: (
+            <Link href={'/files?category=images'} onClick={(e) => e.preventDefault()}>
+              {t('tab.images')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={Mic2} />,
+          key: FilesTabs.Audios,
+          label: (
+            <Link href={'/files?category=audios'} onClick={(e) => e.preventDefault()}>
+              {t('tab.audios')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={SquarePlay} />,
+          key: FilesTabs.Videos,
+          label: (
+            <Link href={'/files?category=videos'} onClick={(e) => e.preventDefault()}>
+              {t('tab.videos')}
+            </Link>
+          ),
+        },
+        {
+          icon: <Icon icon={Globe} />,
+          key: FilesTabs.Websites,
+          label: (
+            <Link href={'/files?category=websites'} onClick={(e) => e.preventDefault()}>
+              {t('tab.websites')}
+            </Link>
+          ),
+        },
+      ]
+        .filter(Boolean)
+        .slice(0, 5) as MenuProps['items'],
+    [t],
+  );
+
+  return (
+    <Flexbox>
+      <Menu
+        items={items}
+        onClick={({ key }) => {
+          setActiveKey(key);
+        }}
+        selectable
+        selectedKeys={[activeKey]}
+        variant={'compact'}
+      />
+    </Flexbox>
+  );
+});
+
+export default FileMenu;

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

@@ -0,0 +1,53 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+
+  paragraph: css`
+    justify-content: center;
+    width: 100%;
+
+    kbd {
+      margin-inline: 2px;
+      padding-inline: 6px;
+      background: ${token.colorFillTertiary};
+      border-radius: 4px;
+    }
+  `,
+}));
+const EmptyStatus = () => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox
+      align={'flex-end'}
+      className={styles.container}
+      gap={12}
+      paddingInline={20}
+      width={'100%'}
+    >
+      <svg
+        fill="currentColor"
+        fillRule="evenodd"
+        style={{ flex: 'none', height: 'fit-content', lineHeight: 1 }}
+        viewBox="0 0 126 64"
+        width={130}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M.5 63a.5.5 0 001 0h-1zM122 1l-2.887 5h5.774L122 1zM1.5 62.042a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1-1.916a.5.5 0 10-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 101 0h-1zm1.063-1.938a.5.5 0 10-.991-.13l.991.13zm-.418-2.274a.5.5 0 00.924.383l-.924-.383zm1.904-1.312a.5.5 0 10-.793-.609l.793.61zm.776-2.178a.5.5 0 00.61.793l-.61-.793zm2.304-.187a.5.5 0 00-.383-.924l.383.924zm1.761-1.497a.5.5 0 00.13.991l-.13-.991zm2.12.928a.5.5 0 100-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.018-1a.5.5 0 100 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.018-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 100-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.02-1a.5.5 0 100 1v-1zm2.018 1a.5.5 0 100-1v1zm2.02-1a.5.5 0 100 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.02 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.019 1a.5.5 0 000-1v1zm2.019-1a.5.5 0 000 1v-1zm2.12.928a.501.501 0 00-.13-.991l.13.991zm1.761-1.497a.501.501 0 00.383.924l-.383-.924zm2.304-.187a.5.5 0 00-.609-.793l.609.793zm.776-2.178a.5.5 0 10.793.609l-.793-.61zm1.904-1.312a.5.5 0 10-.924-.383l.924.383zm-.418-2.274a.5.5 0 10.991.13l-.991-.13zm1.063-1.938a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.916a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.916a.5.5 0 001 0h-1zm1-1.917a.5.5 0 00-1 0h1zm-1-1.917a.5.5 0 001 0h-1zM1.5 63v-.958h-1V63h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834V40h-1v.958h1zm0-.958c0-.333.022-.66.063-.98l-.991-.13A8.574 8.574 0 00.5 40h1zm.569-2.87c.253-.61.584-1.18.98-1.696l-.793-.609a8.49 8.49 0 00-1.11 1.921l.923.383zm2.365-3.08a7.487 7.487 0 011.695-.981l-.383-.924a8.495 8.495 0 00-1.92 1.111l.608.793zm3.586-1.487c.32-.041.648-.063.98-.063v-1c-.376 0-.746.024-1.11.072l.13.991zM9 32.5h1.01v-1H9v1zm3.029 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.02v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.02v1zm4.038 0h2.019v-1h-2.019v1zm4.038 0h2.02v-1h-2.02v1zm4.039 0h2.019v-1h-2.019v1zm4.038 0H114v-1h-1.01v1zm1.01 0c.376 0 .746-.024 1.11-.072l-.13-.991c-.32.041-.648.063-.98.063v1zm3.254-.645a8.506 8.506 0 001.921-1.111l-.609-.793a7.519 7.519 0 01-1.695.98l.383.924zm3.49-2.68a8.516 8.516 0 001.111-1.921l-.924-.383a7.527 7.527 0 01-.98 1.695l.793.609zm1.684-4.066c.048-.363.072-.733.072-1.109h-1c0 .332-.022.66-.063.98l.991.13zM122.5 24v-.958h-1V24h1zm0-2.875v-1.917h-1v1.917h1zm0-3.833v-1.917h-1v1.917h1zm0-3.834v-1.916h-1v1.916h1zm0-3.833V7.708h-1v1.917h1zm0-3.833V3.875h-1v1.917h1z"></path>
+      </svg>
+      <Flexbox align={'center'} className={styles.paragraph} horizontal>
+        <Trans i18nKey={'knowledgeBase.list.empty'} ns={'file'}>
+          点击 <kbd>+</kbd> 开始创建知识库
+        </Trans>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default EmptyStatus;

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

@@ -0,0 +1,175 @@
+import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
+import { App, Dropdown, type MenuProps, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { LucideLoader2, MoreVertical, PencilLine, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import BubblesLoading from '@/components/BubblesLoading';
+import RepoIcon from '@/components/RepoIcon';
+import { LOADING_FLAT } from '@/const/message';
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+
+export const knowledgeItemClass = 'knowledge-base-item';
+
+const useStyles = createStyles(({ css }) => ({
+  content: css`
+    position: relative;
+    overflow: hidden;
+    flex: 1;
+  `,
+  icon: css`
+    min-width: 24px;
+    border-radius: 4px;
+  `,
+  title: css`
+    flex: 1;
+    height: 28px;
+    line-height: 28px;
+    text-align: start;
+  `,
+}));
+
+const { Paragraph } = Typography;
+
+interface KnowledgeBaseItemProps {
+  id: string;
+  name: string;
+  showMore: boolean;
+}
+
+const Content = memo<KnowledgeBaseItemProps>(({ id, name, showMore }) => {
+  const { t } = useTranslation(['file', 'common']);
+
+  const [editing, updateKnowledgeBase, removeKnowledgeBase, isLoading] = useKnowledgeBaseStore(
+    (s) => [
+      s.knowledgeBaseRenamingId === id,
+      s.updateKnowledgeBase,
+      s.removeKnowledgeBase,
+      s.knowledgeBaseLoadingIds.includes(id),
+    ],
+  );
+
+  const { styles } = useStyles();
+
+  const toggleEditing = (visible?: boolean) => {
+    useKnowledgeBaseStore.setState(
+      { knowledgeBaseRenamingId: visible ? id : null },
+      false,
+      'toggleEditing',
+    );
+  };
+
+  const { modal } = App.useApp();
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: <Icon icon={PencilLine} />,
+        key: 'rename',
+        label: t('rename', { ns: 'common' }),
+        onClick: () => {
+          toggleEditing(true);
+        },
+      },
+      {
+        type: 'divider',
+      },
+      {
+        danger: true,
+        icon: <Icon icon={Trash} />,
+        key: 'delete',
+        label: t('delete', { ns: 'common' }),
+        onClick: () => {
+          if (!id) return;
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            onOk: async () => {
+              await removeKnowledgeBase(id);
+            },
+            title: t('knowledgeBase.list.confirmRemoveKnowledgeBase'),
+          });
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <Flexbox
+      align={'center'}
+      gap={8}
+      horizontal
+      justify={'space-between'}
+      onDoubleClick={(e) => {
+        if (!id) return;
+        if (e.altKey) toggleEditing(true);
+      }}
+    >
+      <Center className={isLoading ? '' : styles.icon} height={24} width={24}>
+        {isLoading ? <Icon icon={LucideLoader2} spin /> : <RepoIcon />}
+      </Center>
+      {!editing ? (
+        name === LOADING_FLAT ? (
+          <Flexbox flex={1} height={28} justify={'center'}>
+            <BubblesLoading />
+          </Flexbox>
+        ) : (
+          <Paragraph
+            className={styles.title}
+            ellipsis={{ rows: 1, tooltip: { placement: 'left', title: name } }}
+            style={{ margin: 0, opacity: isLoading ? 0.6 : undefined }}
+          >
+            {name}
+          </Paragraph>
+        )
+      ) : (
+        <EditableText
+          editing={editing}
+          onChangeEnd={(v) => {
+            if (name !== v) {
+              updateKnowledgeBase(id, { name: v });
+            }
+            toggleEditing(false);
+          }}
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+          onEditingChange={toggleEditing}
+          showEditIcon={false}
+          size={'small'}
+          style={{ height: 28 }}
+          type={'pure'}
+          value={name}
+        />
+      )}
+
+      {showMore && !editing && (
+        <div
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <Dropdown
+            arrow={false}
+            menu={{
+              items: items,
+              onClick: ({ domEvent }) => {
+                domEvent.stopPropagation();
+              },
+            }}
+            trigger={['click']}
+          >
+            <ActionIcon className={knowledgeItemClass} icon={MoreVertical} size={'small'} />
+          </Dropdown>
+        </div>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Content;

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;