feat: input status use tag

src/renderer/src/i18n/index.ts

@@ -71,6 +71,8 @@ const resources = {
         'input.send': 'Send',
         'input.pause': 'Pause',
         'input.settings': 'Settings',
+        'input.context_count.tip': 'Context Count',
+        'input.estimated_tokens.tip': 'Estimated tokens',
         'settings.temperature': 'Temperature',
         'settings.temperature.tip':
           'Lower values make the model more creative and unpredictable, while higher values make it more deterministic and precise.',
@@ -256,6 +258,8 @@ const resources = {
         'input.send': '发送',
         'input.pause': '暂停',
         'input.settings': '设置',
+        'input.context_count.tip': '上下文数',
+        'input.estimated_tokens.tip': '预估 token 数',
         'settings.temperature': '模型温度',
         'settings.temperature.tip':
           '模型生成文本的随机程度。值越大，回复内容越赋有多样性、创造性、随机性；设为 0 根据事实回答。日常聊天建议设置为 0.7',

src/renderer/src/pages/home/components/NavigationCenter.tsx

@@ -1,18 +1,15 @@
-import { CodeSandboxOutlined } from '@ant-design/icons'
 import { NavbarCenter } from '@renderer/components/app/Navbar'
 import { isMac } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useShowAssistants } from '@renderer/hooks/useStore'
 import { Assistant } from '@renderer/types'
 import { removeLeadingEmoji } from '@renderer/utils'
-import { Button } from 'antd'
-import { upperFirst } from 'lodash'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { NewButton } from '../HomePage'
-import SelectModelDropdown from './SelectModelDropdown'
+import SelectModelButton from './SelectModelButton'
 
 interface Props {
   activeAssistant: Assistant
@@ -20,7 +17,6 @@ interface Props {
 
 const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
   const { assistant } = useAssistant(activeAssistant.id)
-  const { model, setModel } = useAssistant(activeAssistant.id)
   const { t } = useTranslation()
   const { showAssistants, toggleShowAssistants } = useShowAssistants()
 
@@ -32,12 +28,7 @@ const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
         </NewButton>
       )}
       <AssistantName>{removeLeadingEmoji(assistant?.name) || t('assistant.default.name')}</AssistantName>
-      <SelectModelDropdown model={model} onSelect={setModel}>
+      <SelectModelButton assistant={assistant} />
-        <DropdownButton size="small" type="primary" ghost>
-          <CodeSandboxOutlined />
-          <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
-        </DropdownButton>
-      </SelectModelDropdown>
     </NavbarCenter>
   )
 }
@@ -48,15 +39,4 @@ const AssistantName = styled.span`
   margin-right: 10px;
 `
 
-const DropdownButton = styled(Button)`
-  font-size: 11px;
-  border-radius: 15px;
-  padding: 0 8px;
-`
-
-const ModelName = styled.span`
-  margin-left: -2px;
-  font-weight: bolder;
-`
-
 export default NavigationCenter

src/renderer/src/pages/home/components/SelectModelButton.tsx

@@ -0,0 +1,41 @@
+import { getModelLogo } from '@renderer/config/provider'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { Assistant } from '@renderer/types'
+import { Avatar, Button } from 'antd'
+import { upperFirst } from 'lodash'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import SelectModelDropdown from './SelectModelDropdown'
+
+interface Props {
+  assistant: Assistant
+}
+
+const SelectModelButton: FC<Props> = ({ assistant }) => {
+  const { model, setModel } = useAssistant(assistant.id)
+  const { t } = useTranslation()
+
+  return (
+    <SelectModelDropdown model={model} onSelect={setModel}>
+      <DropdownButton size="small" type="default">
+        <Avatar src={getModelLogo(model?.id || '')} style={{ width: 20, height: 20 }} />
+        <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
+      </DropdownButton>
+    </SelectModelDropdown>
+  )
+}
+
+const DropdownButton = styled(Button)`
+  font-size: 11px;
+  border-radius: 15px;
+  padding: 12px 8px 12px 3px;
+`
+
+const ModelName = styled.span`
+  margin-left: -2px;
+  font-weight: bolder;
+`
+
+export default SelectModelButton

src/renderer/src/pages/home/components/input/Inputbar.tsx

@@ -17,7 +17,7 @@ import store, { useAppSelector } from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Message, Topic } from '@renderer/types'
 import { estimateInputTokenCount, uuid } from '@renderer/utils'
-import { Button, Popconfirm, Tooltip } from 'antd'
+import { Button, Popconfirm, Tag, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 import { debounce, isEmpty } from 'lodash'
@@ -178,8 +178,12 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           </Tooltip>
           {showInputEstimatedTokens && (
             <TextCount>
-              <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T↑
+              <Tooltip title={t('assistant.input.context_count.tip')}>
-              {`${inputTokenCount}/${estimateTokenCount}`}
+                <Tag style={{ cursor: 'pointer' }}>{assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT}</Tag>
+              </Tooltip>
+              <Tooltip title={t('assistant.input.estimated_tokens.tip')}>
+                <Tag style={{ cursor: 'pointer' }}>↑{`${inputTokenCount} / ${estimateTokenCount}`}</Tag>
+              </Tooltip>
             </TextCount>
           )}
         </ToolbarMenu>