feat: Add search button to the knowledge base, and adjusted the display for drag-and-drop uploads (#2365)

* feat: Add search button to the knowledge base, and adjusted the display for drag-and-drop uploads

* feat: Add search button to the knowledge base, and adjusted the display for drag-and-drop uploads

src/renderer/src/pages/knowledge/KnowledgeContent.tsx

@@ -90,17 +90,19 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
     }
 
     if (files) {
-      const _files: FileType[] = files.map((file) => ({
+      const _files: FileType[] = files
-        id: file.name,
+        .map((file) => ({
-        name: file.name,
+          id: file.name,
-        path: file.path,
+          name: file.name,
-        size: file.size,
+          path: file.path,
-        ext: `.${file.name.split('.').pop()}`,
+          size: file.size,
-        count: 1,
+          ext: `.${file.name.split('.').pop()}`,
-        origin_name: file.name,
+          count: 1,
-        type: file.type as FileTypes,
+          origin_name: file.name,
-        created_at: new Date()
+          type: file.type as FileTypes,
-      }))
+          created_at: new Date()
+        }))
+        .filter(({ ext }) => fileTypes.includes(ext))
       console.debug('[KnowledgeContent] Uploading files:', _files, files)
       const uploadedFiles = await FileManager.uploadFiles(_files)
       addFiles(uploadedFiles)
@@ -241,7 +243,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
         </TitleWrapper>
         <Dragger
           showUploadList={false}
-          customRequest={({ file }) => handleDrop([file as File])}
+          onDrop={({ dataTransfer }) => handleDrop([...dataTransfer.files])}
           multiple={true}
           accept={fileTypes.join(',')}
           style={{ marginTop: 10, background: 'transparent' }}>
@@ -253,7 +255,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
       </FileSection>
 
       <FileListSection>
-        {fileItems.map((item) => {
+        {fileItems.reverse().map((item) => {
           const file = item.content as FileType
           return (
             <ItemCard key={item.id}>
@@ -287,7 +289,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
           </Button>
         </TitleWrapper>
         <FlexColumn>
-          {directoryItems.map((item) => (
+          {directoryItems.reverse().map((item) => (
             <ItemCard key={item.id}>
               <ItemContent>
                 <ItemInfo>
@@ -325,7 +327,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
           </Button>
         </TitleWrapper>
         <FlexColumn>
-          {urlItems.map((item) => (
+          {urlItems.reverse().map((item) => (
             <ItemCard key={item.id}>
               <ItemContent>
                 <ItemInfo>
@@ -379,7 +381,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
           </Button>
         </TitleWrapper>
         <FlexColumn>
-          {sitemapItems.map((item) => (
+          {sitemapItems.reverse().map((item) => (
             <ItemCard key={item.id}>
               <ItemContent>
                 <ItemInfo>
@@ -416,7 +418,7 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
           </Button>
         </TitleWrapper>
         <FlexColumn>
-          {noteItems.map((note) => (
+          {noteItems.reverse().map((note) => (
             <ItemCard key={note.id}>
               <ItemContent>
                 <ItemInfo onClick={() => handleEditNote(note)} style={{ cursor: 'pointer' }}>

src/renderer/src/pages/knowledge/KnowledgePage.tsx

@@ -1,10 +1,21 @@
-import { DeleteOutlined, EditOutlined, FileTextOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
+import {
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+  DeleteOutlined,
+  EditOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  SettingOutlined
+} from '@ant-design/icons'
+import { Navbar, NavbarCenter, NavbarRight as NavbarRightFromComponents } from '@renderer/components/app/Navbar'
 import DragableList from '@renderer/components/DragableList'
+import { HStack } from '@renderer/components/Layout'
 import ListItem from '@renderer/components/ListItem'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
+import { useShortcut } from '@renderer/hooks/useShortcuts'
+import { NavbarIcon } from '@renderer/pages/home/Navbar'
+import KnowledgeSearchPopup from '@renderer/pages/knowledge/components/KnowledgeSearchPopup'
 import { KnowledgeBase } from '@renderer/types'
 import { Dropdown, Empty, MenuProps } from 'antd'
 import { FC, useCallback, useEffect, useState } from 'react'
@@ -81,10 +92,23 @@ const KnowledgePage: FC = () => {
     [deleteKnowledgeBase, renameKnowledgeBase, t]
   )
 
+  useShortcut('search_message', () => {
+    if (selectedBase) {
+      KnowledgeSearchPopup.show({ base: selectedBase }).then()
+    }
+  })
+
   return (
     <Container>
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('knowledge.title')}</NavbarCenter>
+        <NavbarRight>
+          <HStack alignItems="center">
+            <NarrowIcon onClick={() => selectedBase && KnowledgeSearchPopup.show({ base: selectedBase })}>
+              <SearchOutlined />
+            </NarrowIcon>
+          </HStack>
+        </NavbarRight>
       </Navbar>
       <ContentContainer id="content-container">
         <SideNav>
@@ -221,4 +245,15 @@ const AddKnowledgeName = styled.div`
   font-size: 13px;
 `
 
+const NarrowIcon = styled(NavbarIcon)`
+  @media (max-width: 1000px) {
+    display: none;
+  }
+`
+
+const NavbarRight = styled(NavbarRightFromComponents)`
+  min-width: auto;
+  padding-right: 140px;
+`
+
 export default KnowledgePage