feat: add new add topic button

2024-09-20 15:11:50 +08:00 · 2024-09-20 15:11:50 +08:00 · 1ec7df9a7e
commit 1ec7df9a7e
parent 83925832be
10 changed files with 174 additions and 65 deletions
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@ -1,3 +1,4 @@
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons'
 import { TopView } from '@renderer/components/TopView'
 import systemAgents from '@renderer/config/agents.json'
 import { useAgents } from '@renderer/hooks/useAgents'
@ -5,11 +6,13 @@ import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant
 import { covertAgentToAssistant } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Agent, Assistant } from '@renderer/types'
-import { Input, Modal, Tag } from 'antd'
-import { useMemo, useState } from 'react'
+import { Divider, Input, InputRef, Modal, Tag } from 'antd'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

+import { HStack } from '../Layout'
+
 interface Props {
  resolve: (value: Assistant | undefined) => void
 }
@ -21,6 +24,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
  const [searchText, setSearchText] = useState('')
  const { defaultAssistant } = useDefaultAssistant()
  const { assistants, addAssistant } = useAssistants()
+  const inputRef = useRef<InputRef>(null)

  const defaultAgent: Agent = useMemo(
    () => ({
@ -65,30 +69,52 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
    AddAssistantPopup.hide()
  }

+  useEffect(() => {
+    open && setTimeout(() => inputRef.current?.focus(), 0)
+  }, [open])
+
  return (
    <Modal
      centered
-      title={t('chat.add.assistant.title')}
      open={open}
      onCancel={onCancel}
      afterClose={onClose}
      transitionName="ant-move-down"
      maskTransitionName="ant-fade"
+      styles={{ content: { borderRadius: 20, padding: 0, overflow: 'hidden', paddingBottom: 20 } }}
+      closeIcon={null}
      footer={null}>
-      <Input
-        placeholder={t('common.search')}
-        value={searchText}
-        onChange={(e) => setSearchText(e.target.value)}
-        allowClear
-        autoFocus
-        style={{ marginBottom: 16 }}
-      />
+      <HStack style={{ padding: '0 12px', marginTop: 5 }}>
+        <Input
+          prefix={
+            <SearchIcon>
+              <SearchOutlined />
+            </SearchIcon>
+          }
+          ref={inputRef}
+          placeholder={t('assistants.search')}
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          allowClear
+          autoFocus
+          style={{ paddingLeft: 0 }}
+          bordered={false}
+          size="large"
+        />
+      </HStack>
+      <Divider style={{ margin: 0 }} />
      <Container>
        {agents.map((agent) => (
-          <AgentItem key={agent.id} onClick={() => onCreateAssistant(agent)}>
-            {agent.emoji} {agent.name}
-            {agent.group === 'system' && <Tag color="orange">{t('agents.tag.system')}</Tag>}
-            {agent.group === 'user' && <Tag color="green">{t('agents.tag.user')}</Tag>}
+          <AgentItem
+            key={agent.id}
+            onClick={() => onCreateAssistant(agent)}
+            className={agent.id === 'default' ? 'default' : ''}>
+            <HStack alignItems="center" gap={5}>
+              {agent.id === 'default' && <PlusOutlined style={{ marginLeft: -2 }} />}
+              {agent.emoji} {agent.name}
+            </HStack>
+            {agent.group === 'system' && <Tag color="green">{t('agents.tag.system')}</Tag>}
+            {agent.group === 'user' && <Tag color="orange">{t('agents.tag.user')}</Tag>}
          </AgentItem>
        ))}
      </Container>
@ -97,7 +123,9 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
 }

 const Container = styled.div`
+  padding: 0 12px;
  height: 50vh;
+  margin-top: 10px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
@ -109,12 +137,14 @@ const AgentItem = styled.div`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-  padding: 8px;
+  padding: 10px 15px;
  border-radius: 8px;
  user-select: none;
-  background-color: var(--color-background-soft);
  margin-bottom: 8px;
  cursor: pointer;
+  &.default {
+    background-color: var(--color-background-soft);
+  }
  .anticon {
    font-size: 16px;
    color: var(--color-icon);
@ -124,6 +154,18 @@ const AgentItem = styled.div`
  }
 `

+const SearchIcon = styled.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-background-soft);
+  margin-right: 6px;
+`
+
 export default class AddAssistantPopup {
  static topviewId = 0
  static hide() {
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@ -99,8 +99,8 @@ const Container = styled.div`
 `

 const AvatarImg = styled(Avatar)`
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
  background-color: var(--color-background-soft);
  margin-bottom: ${isMac ? '12px' : '12px'};
  margin-top: ${isMac ? '5px' : '2px'};
@ -124,7 +124,7 @@ const Icon = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
-  border-radius: 6px;
+  border-radius: 50%;
  margin-bottom: 5px;
  transition: background-color 0.2s ease;
  -webkit-app-region: none;
@ -139,7 +139,7 @@ const Icon = styled.div`
    font-size: 17px;
  }
  &:hover {
-    background-color: var(--color-background-soft);
+    background-color: var(--color-background-mute);
    cursor: pointer;
    .iconfont,
    .anticon {
@ -147,7 +147,7 @@ const Icon = styled.div`
    }
  }
  &.active {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-background-soft);
    .iconfont,
    .anticon {
      color: var(--color-icon-white);
--- a/src/renderer/src/context/AntdProvider.tsx
+++ b/src/renderer/src/context/AntdProvider.tsx
@ -23,7 +23,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
          }
        },
        token: {
-          colorPrimary: '#00b96b'
+          colorPrimary: '#00b96b',
+          borderRadius: 6
        }
      }}>
      {children}
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@ -61,7 +61,8 @@ const resources = {
        'reset.double.confirm.content': 'All data will be lost, do you want to continue?',
        'upgrade.success.title': 'Upgrade successfully',
        'upgrade.success.content': 'Please restart the application to complete the upgrade',
-        'upgrade.success.button': 'Restart'
+        'upgrade.success.button': 'Restart',
+        'topic.added': 'New topic added'
      },
      chat: {
        save: 'Save',
@ -108,6 +109,11 @@ const resources = {
        'message.new.branch': 'New Branch',
        'assistant.search.placeholder': 'Search'
      },
+      assistants: {
+        title: 'Assistants',
+        abbr: 'Assistant',
+        search: 'Search assistants...'
+      },
      files: {
        title: 'Files',
        file: 'File',
@ -333,7 +339,8 @@ const resources = {
        'reset.double.confirm.content': '你的全部数据都会丢失，如果没有备份数据，将无法恢复，确定要继续吗？',
        'upgrade.success.title': '升级成功',
        'upgrade.success.content': '重启应用以完成升级',
-        'upgrade.success.button': '重启'
+        'upgrade.success.button': '重启',
+        'topic.added': '话题添加成功'
      },
      chat: {
        save: '保存',
@ -376,11 +383,16 @@ const resources = {
        'settings.set_as_default': '应用到默认助手',
        'settings.max': '不限',
        'suggestions.title': '建议的问题',
-        'add.assistant.title': '添加智能体',
+        'add.assistant.title': '添加助手',
        'message.new.context': '清除上下文',
        'message.new.branch': '新分支',
        'assistant.search.placeholder': '搜索'
      },
+      assistants: {
+        title: '助手',
+        abbr: '助手',
+        search: '搜索助手'
+      },
      files: {
        title: '文件',
        file: '文件',
--- 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, PlusOutlined } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
@ -20,13 +20,20 @@ import styled from 'styled-components'
 interface Props {
  activeAssistant: Assistant
  setActiveAssistant: (assistant: Assistant) => void
+  onCreateDefaultAssistant: () => void
  onCreateAssistant: () => void
 }

-const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
+const Assistants: FC<Props> = ({
+  activeAssistant,
+  setActiveAssistant,
+  onCreateAssistant,
+  onCreateDefaultAssistant
+}) => {
  const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
  const generating = useAppSelector((state) => state.runtime.generating)
  const [search, setSearch] = useState('')
+  const [dragging, setDragging] = useState(false)
  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
  const { clickAssistantToShowTopic, topicPosition } = useSettings()
  const searchRef = useRef<InputRef>(null)
@ -36,10 +43,10 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
  const onDelete = useCallback(
    (assistant: Assistant) => {
      const _assistant = last(assistants.filter((a) => a.id !== assistant.id))
-      _assistant ? setActiveAssistant(_assistant) : onCreateAssistant()
+      _assistant ? setActiveAssistant(_assistant) : onCreateDefaultAssistant()
      removeAssistant(assistant.id)
    },
-    [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
+    [assistants, onCreateDefaultAssistant, removeAssistant, setActiveAssistant]
  )

  const onEditAssistant = useCallback(
@ -175,7 +182,12 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
          />
        </SearchContainer>
      )}
-      <DragableList list={list} onUpdate={updateAssistants} droppableProps={{ isDropDisabled: !isEmpty(search) }}>
+      <DragableList
+        list={list}
+        onUpdate={updateAssistants}
+        droppableProps={{ isDropDisabled: !isEmpty(search) }}
+        onDragStart={() => setDragging(true)}
+        onDragEnd={() => setDragging(false)}>
        {(assistant) => {
          const isCurrent = assistant.id === activeAssistant?.id
          return (
@ -193,6 +205,12 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
          )
        }}
      </DragableList>
+      {!dragging && (
+        <AddButton onClick={onCreateAssistant}>
+          <AddButtonText>{t('chat.add.assistant.title')}</AddButtonText>
+          <PlusOutlined />
+        </AddButton>
+      )}
    </Container>
  )
 }
@ -212,7 +230,7 @@ const AssistantItem = styled.div`
  justify-content: space-between;
  padding: 7px 10px;
  position: relative;
-  border-radius: 4px;
+  border-radius: 6px;
  margin: 0 10px;
  padding-right: 35px;
  cursor: pointer;
@ -293,4 +311,29 @@ const CommandKey = styled.div`
  margin-right: -4px;
 `

+const AddButton = styled.div`
+  height: 34px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  margin: 0 10px;
+  margin-top: -2px;
+  color: var(--color-text-2);
+  transition: all 0.2s ease-in-out;
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 8px;
+  .anticon {
+    margin: 0 4px;
+  }
+  &:hover {
+    color: var(--color-text-1);
+    background-color: var(--color-background-soft);
+  }
+`
+
+const AddButtonText = styled.span``
+
 export default Assistants
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@ -21,7 +21,7 @@ const HomePage: FC = () => {

  return (
    <Container>
-      <Navbar activeAssistant={activeAssistant} setActiveAssistant={setActiveAssistant} activeTopic={activeTopic} />
+      <Navbar activeAssistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
      <ContentContainer>
        {showAssistants && (
          <RightSidebar
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@ -1,10 +1,8 @@
 import {
  ClearOutlined,
  ControlOutlined,
-  FormOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
-  HistoryOutlined,
  PauseCircleOutlined,
  QuestionCircleOutlined
 } from '@ant-design/icons'
@ -289,7 +287,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
          <ToolbarMenu>
            <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
              <ToolbarButton type="text" onClick={addNewTopic}>
-                <FormOutlined />
+                <i className="iconfont icon-a-addchat" />
              </ToolbarButton>
            </Tooltip>
            <Tooltip placement="top" title={t('chat.input.clear')} arrow>
@ -305,16 +303,6 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
                </ToolbarButton>
              </Popconfirm>
            </Tooltip>
-            <Tooltip placement="top" title={t('chat.input.topics')} arrow>
-              <ToolbarButton
-                type="text"
-                onClick={() => {
-                  !showTopics && toggleShowTopics()
-                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0)
-                }}>
-                <HistoryOutlined />
-              </ToolbarButton>
-            </Tooltip>
            <Tooltip placement="top" title={t('chat.input.settings')} arrow>
              <ToolbarButton
                type="text"
@ -421,6 +409,10 @@ const ToolbarButton = styled(Button)`
    transition: all 0.3s ease;
    color: var(--color-icon);
  }
+  .icon-a-addchat {
+    font-size: 19px;
+    margin-bottom: -2px;
+  }
  &:hover {
    background-color: var(--color-background-soft);
    .anticon,
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@ -1,16 +1,17 @@
 import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
-import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
-import { syncAsistantToAgent } from '@renderer/services/assistant'
+import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
 import { Assistant, Topic } from '@renderer/types'
 import { Switch } from 'antd'
 import { FC, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 import SelectModelButton from './components/SelectModelButton'
@ -18,20 +19,16 @@ import SelectModelButton from './components/SelectModelButton'
 interface Props {
  activeAssistant: Assistant
  activeTopic: Topic
-  setActiveAssistant: (assistant: Assistant) => void
+  setActiveTopic: (topic: Topic) => void
 }

-const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant }) => {
-  const { assistant, updateAssistant } = useAssistant(activeAssistant.id)
+const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveTopic }) => {
+  const { assistant, updateAssistant, addTopic } = useAssistant(activeAssistant.id)
  const { showAssistants, toggleShowAssistants } = useShowAssistants()
  const { theme, toggleTheme } = useTheme()
  const { topicPosition } = useSettings()
  const { showTopics, toggleShowTopics } = useShowTopics()
-
-  const onCreateAssistant = async () => {
-    const assistant = await AddAssistantPopup.show()
-    assistant && setActiveAssistant(assistant)
-  }
+  const { t } = useTranslation()

  const onEditAssistant = useCallback(async () => {
    const _assistant = await AssistantSettingPopup.show({ assistant })
@ -39,6 +36,14 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant }) => {
    syncAsistantToAgent(_assistant)
  }, [assistant, updateAssistant])

+  const addNewTopic = useCallback(() => {
+    const topic = getDefaultTopic()
+    addTopic(topic)
+    setActiveTopic(topic)
+    db.topics.add({ id: topic.id, messages: [] })
+    window.message.success({ content: t('message.topic.added') })
+  }, [addTopic, setActiveTopic, t])
+
  return (
    <Navbar>
      {showAssistants && (
@ -46,7 +51,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant }) => {
          <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
            <i className="iconfont icon-hide-sidebar" />
          </NewButton>
-          <NewButton onClick={onCreateAssistant}>
+          <NewButton onClick={addNewTopic}>
            <i className="iconfont icon-a-addchat" />
          </NewButton>
        </NavbarLeft>
@ -85,7 +90,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant }) => {

 export const NewButton = styled.div`
  -webkit-app-region: none;
-  border-radius: 4px;
+  border-radius: 8px;
  height: 30px;
  padding: 0 7px;
  display: flex;
--- a/src/renderer/src/pages/home/RightSidebar.tsx
+++ b/src/renderer/src/pages/home/RightSidebar.tsx
@ -1,4 +1,5 @@
 import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
+import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShowTopics } from '@renderer/hooks/useStore'
@ -43,12 +44,18 @@ const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssist
  }

  const showTab = !(position === 'left' && topicPosition === 'right')
+
  const assistantTab = {
-    label: t('common.assistant'),
+    label: t('assistants.abbr'),
    value: 'assistants',
    icon: <i className="iconfont icon-business-smart-assistant" />
  }

+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
+
  const onCreateDefaultAssistant = () => {
    const assistant = { ...defaultAssistant, id: uuid() }
    addAssistant(assistant)
@ -108,7 +115,8 @@ const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssist
          <Assistants
            activeAssistant={activeAssistant}
            setActiveAssistant={setActiveAssistant}
-            onCreateAssistant={onCreateDefaultAssistant}
+            onCreateAssistant={onCreateAssistant}
+            onCreateDefaultAssistant={onCreateDefaultAssistant}
          />
        )}
        {tab === 'topic' && (
--- a/src/renderer/src/pages/home/Topics.tsx
+++ b/src/renderer/src/pages/home/Topics.tsx
@ -136,7 +136,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
          return (
            <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
              <TopicListItem className={isActive ? 'active' : ''} onClick={() => onSwitchTopic(topic)}>
-                <TopicName>{topic.name}</TopicName>
+                <TopicName className="name">{topic.name}</TopicName>
                {assistant.topics.length > 1 && (
                  <MenuButton
                    className="menu"
@ -162,14 +162,17 @@ const Container = styled.div`
  flex-direction: column;
  padding-top: 10px;
  overflow-y: scroll;
-  max-height: calc(100vh - var(--navbar-height) - 140px);
+  max-height: calc(100vh - var(--navbar-height) - 70px);
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `

 const TopicListItem = styled.div`
  padding: 7px 10px;
  margin: 0 10px;
  cursor: pointer;
-  border-radius: 4px;
+  border-radius: 6px;
  font-family: Ubuntu;
  font-size: 13px;
  display: flex;
@ -183,7 +186,10 @@ const TopicListItem = styled.div`
  }
  &.active {
    background-color: var(--color-background-mute);
-    font-weight: 500;
+    .name {
+      opacity: 1;
+      font-weight: 500;
+    }
    .menu {
      opacity: 1;
      background-color: var(--color-background-mute);
@ -195,12 +201,12 @@ const TopicListItem = styled.div`
 `

 const TopicName = styled.div`
-  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
+  opacity: 0.6;
 `

 const MenuButton = styled.div`