Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-04 11:49:02 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: assistant drap and drop

Browse Source
This commit is contained in:
kangfenmao 2024-09-02 20:48:31 +08:00
parent 8c390475e2
commit 8feab6a49d
1 changed files with 13 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/renderer/src/pages/home/Assistants.tsx
View File

@ -1,12 +1,12 @@
import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons' import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd' import DragableList from '@renderer/components/DragableList'
import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup' import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant' import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant' import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
import { useAppSelector } from '@renderer/store' import { useAppSelector } from '@renderer/store'
import { Assistant } from '@renderer/types' import { Assistant } from '@renderer/types'
import { droppableReorder, uuid } from '@renderer/utils' import { uuid } from '@renderer/utils'
import { Dropdown } from 'antd' import { Dropdown } from 'antd'
import { ItemType } from 'antd/es/menu/interface' import { ItemType } from 'antd/es/menu/interface'
import { last } from 'lodash' import { last } from 'lodash'
@ -70,18 +70,6 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
[addAssistant, onDelete, setActiveAssistant, t, updateAssistant] [addAssistant, onDelete, setActiveAssistant, t, updateAssistant]
) )
const onDragEnd = useCallback(
(result: DropResult) => {
if (result.destination) {
const sourceIndex = result.source.index
const destIndex = result.destination.index
const reorderAssistants = droppableReorder<Assistant>(assistants, sourceIndex, destIndex)
updateAssistants(reorderAssistants)
}
},
[assistants, updateAssistants]
)
const onSwitchAssistant = useCallback( const onSwitchAssistant = useCallback(
(assistant: Assistant): any => { (assistant: Assistant): any => {
if (generating) { if (generating) {
@ -98,33 +86,17 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
return ( return (
<Container> <Container>
<DragDropContext onDragEnd={onDragEnd}> <DragableList list={assistants} onUpdate={updateAssistants}>
<Droppable droppableId="droppable"> {(assistant) => (
{(provided) => ( <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
<div {...provided.droppableProps} ref={provided.innerRef}> <AssistantItem
{assistants.map((assistant, index) => ( onClick={() => onSwitchAssistant(assistant)}
<Draggable key={`draggable_${assistant.id}_${index}`} draggableId={assistant.id} index={index}> className={assistant.id === activeAssistant?.id ? 'active' : ''}>
{(provided) => ( <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
<div </AssistantItem>
ref={provided.innerRef} </Dropdown>
{...provided.draggableProps} )}
{...provided.dragHandleProps} </DragableList>
style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
<Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
<AssistantItem
onClick={() => onSwitchAssistant(assistant)}
className={assistant.id === activeAssistant?.id ? 'active' : ''}>
<AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
</AssistantItem>
</Dropdown>
</div>
)}
</Draggable>
))}
</div>
)}
</Droppable>
</DragDropContext>
</Container> </Container>
) )
} }