fix: assistant and topic list style

CherryHQ · Sep 4, 2024 · 521670f · 521670f
1 parent 87216b5
commit 521670f
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 55 deletions.
diff --git a/src/renderer/src/pages/home/Assistants.tsx b/src/renderer/src/pages/home/Assistants.tsx
@@ -1,4 +1,4 @@
-import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { CopyOutlined, DeleteOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
@@ -24,7 +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 { updateAssistant } = useAssistant(activeAssistant.id)
+  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
   const { toggleShowTopics } = useShowTopics()
   const { t } = useTranslation()
 
@@ -65,6 +65,19 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
             setActiveAssistant(_assistant)
           }
         },
+        {
+          label: t('chat.topics.delete.all.title'),
+          key: 'delete-all',
+          icon: <MinusCircleOutlined />,
+          onClick: () => {
+            window.modal.confirm({
+              title: t('chat.topics.delete.all.title'),
+              content: t('chat.topics.delete.all.content'),
+              okButtonProps: { danger: true },
+              onOk: removeAllTopics
+            })
+          }
+        },
         { type: 'divider' },
         {
           label: t('common.delete'),
@@ -74,7 +87,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           onClick: () => onDelete(assistant)
         }
       ] as ItemType[],
-    [addAssistant, onDelete, onEditAssistant, setActiveAssistant, t]
+    [addAssistant, onDelete, onEditAssistant, removeAllTopics, setActiveAssistant, t]
   )
 
   const onSwitchAssistant = useCallback(
@@ -146,17 +159,11 @@ const AssistantItem = styled.div`
     opacity: 0;
     color: var(--color-text-3);
   }
-  /* &:hover {
-    background-color: var(--color-background-soft);
-    .topics-count {
-      display: none;
-    }
-    .iconfont {
-      opacity: 1;
-    }
-  } */
   &.active {
     background-color: var(--color-background-mute);
+    .name {
+      font-weight: 500;
+    }
     .topics-count {
       display: none;
     }

diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -27,7 +27,6 @@ import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState }
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import SelectModelButton from '../components/SelectModelButton'
 import SettingsTab from '../Settings'
 import SendMessageButton from './SendMessageButton'
 
@@ -256,7 +255,6 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           )}
         </ToolbarMenu>
         <ToolbarMenu>
-          <SelectModelButton assistant={assistant} />
           {generating && (
             <Tooltip placement="top" title={t('chat.input.pause')} arrow>
               <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>

diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
@@ -13,6 +13,8 @@ import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import SelectModelButton from './components/SelectModelButton'
+
 interface Props {
   activeAssistant: Assistant
   activeTopic: Topic
@@ -84,10 +86,8 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
               <i className="iconfont icon-sidebar-left" />
             </NewButton>
           )}
-          <TitleText>
-            {assistant.name}
-            {/* {!showTopics && <HashTag onClick={() => toggleShowTopics()}>#{activeTopic.name}#</HashTag>} */}
-          </TitleText>
+          <TitleText style={{ marginRight: 10 }}>{assistant.name}</TitleText>
+          <SelectModelButton assistant={assistant} />
         </HStack>
         <HStack alignItems="center">
           <ThemeSwitch
@@ -134,6 +134,7 @@ const TitleText = styled.span`
   margin-left: 5px;
   font-family: Ubuntu;
   font-size: 13px;
+  font-weight: 500;
 `
 
 const ThemeSwitch = styled(Switch)`
@@ -144,15 +145,4 @@ const ThemeSwitch = styled(Switch)`
   }
 `
 
-// const HashTag = styled.span`
-//   -webkit-app-region: no-drag;
-//   color: var(--color-primary);
-//   margin-left: 5px;
-//   user-select: none;
-//   cursor: pointer;
-//   &:hover {
-//     text-decoration: underline;
-//   }
-// `
-
 export default HeaderNavbar
diff --git a/src/renderer/src/pages/home/Topics.tsx b/src/renderer/src/pages/home/Topics.tsx
@@ -6,7 +6,7 @@ import { fetchMessagesSummary } from '@renderer/services/api'
 import LocalStorage from '@renderer/services/storage'
 import { useAppSelector } from '@renderer/store'
 import { Assistant, Topic } from '@renderer/types'
-import { Button, Dropdown, MenuProps } from 'antd'
+import { Dropdown, MenuProps } from 'antd'
 import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -18,7 +18,7 @@ interface Props {
 }
 
 const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
-  const { assistant, removeTopic, updateTopic, updateTopics, removeAllTopics } = useAssistant(_assistant.id)
+  const { assistant, removeTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
   const { t } = useTranslation()
   const generating = useAppSelector((state) => state.runtime.generating)
 
@@ -87,15 +87,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
     [generating, setActiveTopic, t]
   )
 
-  const onDeleteAll = () => {
-    window.modal.confirm({
-      title: t('chat.topics.delete.all.title'),
-      content: t('chat.topics.delete.all.content'),
-      okButtonProps: { danger: true },
-      onOk: removeAllTopics
-    })
-  }
-
   return (
     <Container>
       <DragableList list={assistant.topics} onUpdate={updateTopics}>
@@ -109,13 +100,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
           </Dropdown>
         )}
       </DragableList>
-      {assistant.topics.length > 10 && (
-        <Footer>
-          <Button style={{ width: '100%' }} onClick={onDeleteAll}>
-            {t('chat.topics.delete.all.title')}
-          </Button>
-        </Footer>
-      )}
     </Container>
   )
 }
@@ -148,13 +132,8 @@ const TopicListItem = styled.div`
   &.active {
     background-color: var(--color-primary);
     color: white;
+    font-weight: 500;
   }
 `
 
-const Footer = styled.div`
-  padding: 0 10px;
-  padding-bottom: 10px;
-  width: 100%;
-`
-
 export default Topics
diff --git a/src/renderer/src/pages/home/components/SelectModelButton.tsx b/src/renderer/src/pages/home/components/SelectModelButton.tsx
@@ -23,7 +23,7 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
   }
 
   return (
-    <SelectModelDropdown model={model} onSelect={setModel} placement="topLeft">
+    <SelectModelDropdown model={model} onSelect={setModel} placement="top">
       <DropdownButton size="small" type="default">
         <ModelAvatar model={model} size={20} />
         <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>

diff --git a/src/renderer/src/store/migrate.ts b/src/renderer/src/store/migrate.ts
@@ -370,7 +370,7 @@ const migrateConfig = {
       settings: {
         ...state.settings,
         showTopics: true,
-        windowStyle: 'opaque'
+        windowStyle: 'transparent'
       }
     }
   }