From 5f4736e8c1e06369c258144afcf61ee07274c1d0 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 13 Jun 2025 10:24:52 +0800
Subject: [PATCH] refactor(AssistantsTab): streamline drag-and-drop structure
 and improve layout consistency

- Removed unnecessary div wrappers to simplify the component structure.
- Enhanced the layout of the assistant items for better spacing and alignment.
- Added padding to the GroupTitle for improved visual consistency.
---
 .../src/pages/home/Tabs/AssistantsTab.tsx     | 120 +++++++++---------
 1 file changed, 58 insertions(+), 62 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
index 183f3118a8..4b30167072 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
@@ -161,68 +161,63 @@ const Assistants: FC<AssistantsTabProps> = ({
   if (assistantsTabSortType === 'tags') {
     return (
       <Container className="assistants-tab" ref={containerRef}>
-        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 4, gap: 10 }}>
-          <DragableList
-            droppableProps={{ type: 'TAG' }}
-            list={getGroupedAssistants.map((_) => ({
-              ..._,
-              disabled: _.tag === t('assistants.tags.untagged')
-            }))}
-            onUpdate={() => {}}
-            onDragEnd={handleGroupDragEnd}
-            style={{ paddingBottom: 0 }}>
-            {(group) => (
-              <Droppable droppableId={group.tag} type="ASSISTANT">
-                {(provided) => (
-                  <TagsContainer key={group.tag} {...provided.droppableProps} ref={provided.innerRef}>
-                    {group.tag !== t('assistants.tags.untagged') && (
-                      <GroupTitle onClick={() => toggleTagCollapse(group.tag)}>
-                        <Tooltip title={group.tag}>
-                          <GroupTitleName>
-                            {collapsedTags[group.tag] ? (
-                              <RightOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
-                            ) : (
-                              <DownOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
-                            )}
-                            {group.tag}
-                          </GroupTitleName>
-                        </Tooltip>
-                        <GroupTitleDivider />
-                      </GroupTitle>
-                    )}
-                    {!collapsedTags[group.tag] && (
-                      <div>
-                        {group.assistants.map((assistant, index) => (
-                          <Draggable
-                            key={`draggable_${group.tag}_${assistant?.id}_${index}`}
-                            draggableId={`draggable_${group.tag}_${assistant?.id}_${index}`}
-                            index={index}>
-                            {(provided) => (
-                              <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                                <AssistantItem
-                                  key={assistant?.id}
-                                  assistant={assistant}
-                                  sortBy="tags"
-                                  isActive={assistant?.id === activeAssistant.id}
-                                  onSwitch={setActiveAssistant}
-                                  onDelete={onDelete}
-                                  addAgent={addAgent}
-                                  addAssistant={addAssistant}
-                                  onCreateDefaultAssistant={() => {}}
-                                />
-                              </div>
-                            )}
-                          </Draggable>
-                        ))}
-                      </div>
-                    )}
-                    {provided.placeholder}
-                  </TagsContainer>
-                )}
-              </Droppable>
-            )}
-          </DragableList>
-        </div>
+        <DragableList
+          droppableProps={{ type: 'TAG' }}
+          list={getGroupedAssistants.map((_) => ({ ..._, disabled: _.tag === t('assistants.tags.untagged') }))}
+          onUpdate={() => {}}
+          onDragEnd={handleGroupDragEnd}
+          style={{ paddingBottom: 0 }}>
+          {(group) => (
+            <Droppable droppableId={group.tag} type="ASSISTANT">
+              {(provided) => (
+                <TagsContainer key={group.tag} {...provided.droppableProps} ref={provided.innerRef}>
+                  {group.tag !== t('assistants.tags.untagged') && (
+                    <GroupTitle onClick={() => toggleTagCollapse(group.tag)}>
+                      <Tooltip title={group.tag}>
+                        <GroupTitleName>
+                          {collapsedTags[group.tag] ? (
+                            <RightOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
+                          ) : (
+                            <DownOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
+                          )}
+                          {group.tag}
+                        </GroupTitleName>
+                      </Tooltip>
+                      <GroupTitleDivider />
+                    </GroupTitle>
+                  )}
+                  {!collapsedTags[group.tag] && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                      {group.assistants.map((assistant, index) => (
+                        <Draggable
+                          key={`draggable_${group.tag}_${assistant?.id}_${index}`}
+                          draggableId={`draggable_${group.tag}_${assistant?.id}_${index}`}
+                          index={index}>
+                          {(provided) => (
+                            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                              <AssistantItem
+                                key={assistant?.id}
+                                assistant={assistant}
+                                sortBy="tags"
+                                isActive={assistant?.id === activeAssistant.id}
+                                onSwitch={setActiveAssistant}
+                                onDelete={onDelete}
+                                addAgent={addAgent}
+                                addAssistant={addAssistant}
+                                onCreateDefaultAssistant={() => {}}
+                              />
+                            </div>
+                          )}
+                        </Draggable>
+                      ))}
+                    </div>
+                  )}
+                  {provided.placeholder}
+                </TagsContainer>
+              )}
+            </Droppable>
+          )}
+        </DragableList>
         <AssistantAddItem onClick={onCreateAssistant}>
           <AssistantName>
             <PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
@@ -308,6 +303,7 @@ const GroupTitle = styled.div`
   justify-content: space-between;
   align-items: center;
   height: 24px;
+  padding-top: 8px;
 `
 
 const GroupTitleName = styled.div`