refactor(DragableList, AssistantsTab, AssistantItem): improve layout and styling consistency

- Adjusted margin and padding in DragableList for better spacing.
- Simplified structure in AssistantsTab by removing unnecessary divs and enhancing item layout.
- Added style prop to AssistantItem for flexible styling options.
- Updated GroupTitle and TagsContainer for improved visual consistency.

src/renderer/src/components/DragableList/index.tsx

@@ -60,9 +60,9 @@ const DragableList: FC<Props<any>> = ({
                           {...provided.draggableProps}
                           {...provided.dragHandleProps}
                           style={{
+                            marginBottom: 8,
                             ...listStyle,
-                            ...provided.draggableProps.style,
-                            marginBottom: 8
+                            ...provided.draggableProps.style
                           }}>
                           {children(item, index)}
                         </div>

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -165,8 +165,7 @@ const Assistants: FC<AssistantsTabProps> = ({
           droppableProps={{ type: 'TAG' }}
           list={getGroupedAssistants.map((_) => ({ ..._, disabled: _.tag === t('assistants.tags.untagged') }))}
           onUpdate={() => {}}
-          onDragEnd={handleGroupDragEnd}
-          style={{ paddingBottom: 0 }}>
+          onDragEnd={handleGroupDragEnd}>
           {(group) => (
             <Droppable droppableId={group.tag} type="ASSISTANT">
               {(provided) => (
@@ -187,7 +186,7 @@ const Assistants: FC<AssistantsTabProps> = ({
                     </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}`}
@@ -204,13 +203,15 @@ const Assistants: FC<AssistantsTabProps> = ({
                                 onDelete={onDelete}
                                 addAgent={addAgent}
                                 addAssistant={addAssistant}
+                                handleSortByChange={handleSortByChange}
                                 onCreateDefaultAssistant={() => {}}
+                                style={{ margin: '4px 0' }}
                               />
                             </div>
                           )}
                         </Draggable>
                       ))}
-                    </div>
+                    </>
                   )}
                   {provided.placeholder}
                 </TagsContainer>
@@ -268,13 +269,12 @@ const Assistants: FC<AssistantsTabProps> = ({
 const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column;
-  padding: 4px 10px;
+  padding: 0 10px;
 `
 
 const TagsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
 `
 
 const AssistantAddItem = styled.div`
@@ -303,7 +303,7 @@ const GroupTitle = styled.div`
   justify-content: space-between;
   align-items: center;
   height: 24px;
-  padding-top: 8px;
+  margin: 5px 0;
 `
 
 const GroupTitleName = styled.div`

src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx

@@ -44,6 +44,7 @@ interface AssistantItemProps {
   onTagClick?: (tag: string) => void
   handleSortByChange?: (sortType: AssistantsSortType) => void
   singleLine?: boolean
+  style?: React.CSSProperties
 }
 
 const AssistantItem: FC<AssistantItemProps> = ({
@@ -55,7 +56,8 @@ const AssistantItem: FC<AssistantItemProps> = ({
   addAgent,
   addAssistant,
   handleSortByChange,
-  singleLine = false
+  singleLine = false,
+  style
 }) => {
   const { t } = useTranslation()
   const { allTags } = useTags()
@@ -164,7 +166,8 @@ const AssistantItem: FC<AssistantItemProps> = ({
     return (
       <Container
         onClick={handleSwitch}
-        className={classNames({ active: isActive, 'is-menu-open': isMenuOpen, singleLine })}>
+        className={classNames({ active: isActive, 'is-menu-open': isMenuOpen, singleLine })}
+        style={style}>
         {assistantNave}
         <Button
           className="item-menu-button"
@@ -184,7 +187,8 @@ const AssistantItem: FC<AssistantItemProps> = ({
     <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
       <Container
         onClick={handleSwitch}
-        className={classNames({ active: isActive, 'is-menu-open': isMenuOpen, singleLine })}>
+        className={classNames({ active: isActive, 'is-menu-open': isMenuOpen, singleLine })}
+        style={style}>
         {assistantNave}
         <Dropdown menu={{ items: menuItems }} trigger={['click']} onOpenChange={setIsMenuOpen}>
           <Button