feat(settings): add input status show switch

electron.vite.config.ts

@@ -16,9 +16,6 @@ export default defineConfig({
       }
     },
     plugins: [react()],
-    assetsInclude: ['**/*.md'],
-    server: {
-      host: '0.0.0.0'
-    }
+    assetsInclude: ['**/*.md']
   }
 })

src/renderer/src/i18n/index.ts

@@ -69,7 +69,6 @@ const resources = {
         'input.send': 'Send',
         'input.pause': 'Pause',
         'input.settings': 'Settings',
-        'input.estimated_tokens': '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.',
@@ -110,6 +109,8 @@ const resources = {
         'general.message.use_serif_font': 'Use serif font',
         'general.user_name': 'User Name',
         'general.user_name.placeholder': 'Enter your name',
+        'general.input.title': 'Input Settings',
+        'general.input.show_estimated_tokens': 'Show estimated input tokens',
         'provider.api_key': 'API Key',
         'provider.check': 'Check',
         'provider.get_api_key': 'Get API Key',
@@ -220,7 +221,6 @@ const resources = {
         'input.send': '发送',
         'input.pause': '暂停',
         'input.settings': '设置',
-        'input.estimated_tokens': '预估消耗',
         'settings.temperature': '模型温度',
         'settings.temperature.tip':
           '模型生成文本的随机程度。值越大，回复内容越赋有多样性、创造性、随机性；设为 0 根据事实回答。日常聊天建议设置为 0.7',
@@ -262,6 +262,8 @@ const resources = {
         'general.message.title': '消息设置',
         'general.message.divider': '消息分割线',
         'general.message.use_serif_font': '使用衬线字体',
+        'general.input.title': '输入设置',
+        'general.input.show_estimated_tokens': '状态显示',
         'provider.api_key': 'API 密钥',
         'provider.check': '检查',
         'provider.get_api_key': '点击这里获取密钥',

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

@@ -37,7 +37,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const [text, setText] = useState('')
   const { toggleRightSidebar } = useShowRightSidebar()
   const { addTopic } = useAssistant(assistant.id)
-  const { sendMessageShortcut } = useSettings()
+  const { sendMessageShortcut, showInputEstimatedTokens } = useSettings()
   const [expended, setExpend] = useState(false)
   const [estimateTokenCount, setEstimateTokenCount] = useState(0)
   const generating = useAppSelector((state) => state.runtime.generating)
@@ -193,10 +193,12 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         ref={inputRef}
         styles={{ textarea: { paddingLeft: 0 } }}
       />
+      {showInputEstimatedTokens && (
         <TextCount>
-        <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} |{' '}
-        {t('assistant.input.estimated_tokens')}: {`${inputTokenCount}/${estimateTokenCount}`}
+          <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T↑
+          {`${inputTokenCount}/${estimateTokenCount}`}
         </TextCount>
+      )}
     </Container>
   )
 }
@@ -255,11 +257,15 @@ const ToolbarButton = styled(Button)`
 
 const TextCount = styled.div`
   position: absolute;
-  right: 8px;
-  bottom: 8px;
+  right: 0;
+  bottom: 0;
   font-size: 11px;
   color: var(--color-text-3);
   z-index: 10;
+  background-color: #121212;
+  padding: 2px 8px;
+  border-top-left-radius: 7px;
+  user-select: none;
 `
 
 export default Inputbar

src/renderer/src/pages/settings/GeneralSettings.tsx

@@ -8,14 +8,27 @@ import useAvatar from '@renderer/hooks/useAvatar'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { setLanguage, setMessageFont, setShowMessageDivider, setUserName } from '@renderer/store/settings'
+import {
+  setLanguage,
+  setMessageFont,
+  setShowInputEstimatedTokens,
+  setShowMessageDivider,
+  setUserName
+} from '@renderer/store/settings'
 import { useTranslation } from 'react-i18next'
 import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings'
 import i18n from '@renderer/i18n'
 
 const GeneralSettings: FC = () => {
   const avatar = useAvatar()
-  const { language, proxyUrl: storeProxyUrl, userName, showMessageDivider, messageFont } = useSettings()
+  const {
+    language,
+    proxyUrl: storeProxyUrl,
+    userName,
+    showMessageDivider,
+    messageFont,
+    showInputEstimatedTokens
+  } = useSettings()
   const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
@@ -112,6 +125,16 @@ const GeneralSettings: FC = () => {
         />
       </SettingRow>
       <SettingDivider />
+      <SettingTitle style={{ marginTop: 20 }}>{t('settings.general.input.title')}</SettingTitle>
+      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.general.input.show_estimated_tokens')}</SettingRowTitle>
+        <Switch
+          checked={showInputEstimatedTokens}
+          onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
     </SettingContainer>
   )
 }

src/renderer/src/store/migrate.ts

@@ -257,7 +257,8 @@ const migrateConfig = {
       ...state,
       settings: {
         ...state.settings,
-        messageFont: 'system'
+        messageFont: 'system',
+        showInputEstimatedTokens: false
       }
     }
   }

src/renderer/src/store/settings.ts

@@ -11,6 +11,7 @@ export interface SettingsState {
   userName: string
   showMessageDivider: boolean
   messageFont: 'system' | 'serif'
+  showInputEstimatedTokens: boolean
 }
 
 const initialState: SettingsState = {
@@ -21,7 +22,8 @@ const initialState: SettingsState = {
   proxyUrl: undefined,
   userName: '',
   showMessageDivider: true,
-  messageFont: 'system'
+  messageFont: 'system',
+  showInputEstimatedTokens: false
 }
 
 const settingsSlice = createSlice({
@@ -51,6 +53,9 @@ const settingsSlice = createSlice({
     },
     setMessageFont: (state, action: PayloadAction<'system' | 'serif'>) => {
       state.messageFont = action.payload
+    },
+    setShowInputEstimatedTokens: (state, action: PayloadAction<boolean>) => {
+      state.showInputEstimatedTokens = action.payload
     }
   }
 })
@@ -63,7 +68,8 @@ export const {
   setProxyUrl,
   setUserName,
   setShowMessageDivider,
-  setMessageFont
+  setMessageFont,
+  setShowInputEstimatedTokens
 } = settingsSlice.actions
 
 export default settingsSlice.reducer