From 11b2cd88b7444e8c65d8100a7af6ff17b5086d84 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 11 Sep 2024 16:14:06 +0800
Subject: [PATCH] feat: Added configurable Droppable component props to
 DragableList, updated translations and implemented search functionality.

- Added support for configurable Droppable component props to the DragableList component.
- Updated translations for multiple components and languages.
- Implemented search functionality in the Assistants page.
---
 .../src/components/DragableList/index.tsx     | 17 +++++-
 src/renderer/src/i18n/index.ts                |  8 ++-
 src/renderer/src/pages/home/Assistants.tsx    | 58 +++++++++++++++----
 3 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/src/renderer/src/components/DragableList/index.tsx b/src/renderer/src/components/DragableList/index.tsx
index 41c613fb..93501101 100644
--- a/src/renderer/src/components/DragableList/index.tsx
+++ b/src/renderer/src/components/DragableList/index.tsx
@@ -2,6 +2,7 @@ import {
   DragDropContext,
   Draggable,
   Droppable,
+  DroppableProps,
   DropResult,
   OnDragEndResponder,
   OnDragStartResponder,
@@ -18,9 +19,19 @@ interface Props<T> {
   onUpdate: (list: T[]) => void
   onDragStart?: OnDragStartResponder
   onDragEnd?: OnDragEndResponder
+  droppableProps?: Partial<DroppableProps>
 }
 
-const DragableList: FC<Props<any>> = ({ children, list, style, listStyle, onDragStart, onUpdate, onDragEnd }) => {
+const DragableList: FC<Props<any>> = ({
+  children,
+  list,
+  style,
+  listStyle,
+  droppableProps,
+  onDragStart,
+  onUpdate,
+  onDragEnd
+}) => {
   const _onDragEnd = (result: DropResult, provided: ResponderProvided) => {
     onDragEnd?.(result, provided)
     if (result.destination) {
@@ -33,11 +44,11 @@ const DragableList: FC<Props<any>> = ({ children, list, style, listStyle, onDrag
 
   return (
     <DragDropContext onDragStart={onDragStart} onDragEnd={_onDragEnd}>
-      <Droppable droppableId="droppable">
+      <Droppable droppableId="droppable" {...droppableProps}>
         {(provided) => (
           <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...style }}>
             {list.map((item, index) => (
-              <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index}>
+              <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index} {...droppableProps}>
                 {(provided) => (
                   <div
                     ref={provided.innerRef}
diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts
index 1c896359..2a73a7f9 100644
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@@ -73,7 +73,7 @@ const resources = {
         'topics.list': 'Topic List',
         'input.new_topic': 'New Topic',
         'input.topics': ' Topics ',
-        'input.clear': 'Clear Messages',
+        'input.clear': 'Clear',
         'input.new.context': 'Clear Context',
         'input.expand': 'Expand',
         'input.collapse': 'Collapse',
@@ -99,7 +99,8 @@ const resources = {
         'settings.max': 'Max',
         'suggestions.title': 'Suggested Questions',
         'add.assistant.title': 'Add Assistant',
-        'message.new.context': 'New Context'
+        'message.new.context': 'New Context',
+        'assistant.search.placeholder': 'Search Assistants'
       },
       agents: {
         title: 'Assistants',
@@ -353,7 +354,8 @@ const resources = {
         'settings.max': '不限',
         'suggestions.title': '建议的问题',
         'add.assistant.title': '添加智能体',
-        'message.new.context': '清除上下文'
+        'message.new.context': '清除上下文',
+        'assistant.search.placeholder': '搜索智能体'
       },
       agents: {
         title: '智能体',
diff --git a/src/renderer/src/pages/home/Assistants.tsx b/src/renderer/src/pages/home/Assistants.tsx
index e63b51ea..788d0bad 100644
--- a/src/renderer/src/pages/home/Assistants.tsx
+++ b/src/renderer/src/pages/home/Assistants.tsx
@@ -1,4 +1,4 @@
-import { DeleteOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'
+import { DeleteOutlined, EditOutlined, MinusCircleOutlined, SearchOutlined } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
@@ -8,10 +8,10 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { useAppSelector } from '@renderer/store'
 import { Assistant } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Dropdown } from 'antd'
+import { Dropdown, Input } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
-import { last } from 'lodash'
-import { FC, useCallback } from 'react'
+import { isEmpty, last } from 'lodash'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -24,6 +24,7 @@ interface Props {
 const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
   const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
   const generating = useAppSelector((state) => state.runtime.generating)
+  const [search, setSearch] = useState('')
   const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
   const { t } = useTranslation()
 
@@ -104,9 +105,35 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
     [generating, setActiveAssistant, t]
   )
 
+  const list = assistants.filter((assistant) => assistant.name?.toLowerCase().includes(search.toLowerCase().trim()))
+
+  const onSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      if (list.length === 1) {
+        onSwitchAssistant(list[0])
+        setSearch('')
+      }
+    }
+  }
+
   return (
     <Container>
-      <DragableList list={assistants} onUpdate={updateAssistants}>
+      {assistants.length >= 10 && (
+        <SearchContainer>
+          <Input
+            placeholder={t('chat.assistant.search.placeholder')}
+            variant="filled"
+            prefix={<SearchOutlined style={{ color: 'var(--color-icon)' }} />}
+            suffix={<CommandKey>⌘+K</CommandKey>}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ borderRadius: 4 }}
+            onKeyDown={onSearch}
+            allowClear
+          />
+        </SearchContainer>
+      )}
+      <DragableList list={list} onUpdate={updateAssistants} droppableProps={{ isDropDisabled: !isEmpty(search) }}>
         {(assistant) => {
           const isCurrent = assistant.id === activeAssistant?.id
           return (
@@ -187,17 +214,12 @@ const ArrowRightButton = styled.div`
   min-height: 22px;
   border-radius: 4px;
   position: absolute;
+  background-color: var(--color-background);
   right: 9px;
   top: 6px;
   .anticon {
     font-size: 14px;
   }
-  &:hover {
-    background-color: var(--color-background);
-  }
-  &.active {
-    background-color: var(--color-background);
-  }
 `
 
 const TopicCount = styled.div`
@@ -215,4 +237,18 @@ const TopicCount = styled.div`
   align-items: center;
 `
 
+const SearchContainer = styled.div`
+  margin: 0 10px;
+  margin-bottom: 10px;
+`
+
+const CommandKey = styled.div`
+  color: var(--color-text-3);
+  font-size: 11px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background-color: var(--color-background-mute);
+  margin-right: -4px;
+`
+
 export default Assistants