From 9d96b826e2d12913e63d403919319fa52e691adc Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Wed, 24 Jul 2024 13:04:59 +0800 Subject: [PATCH] feat(settings): add input status show switch --- electron.vite.config.ts | 5 +--- src/renderer/src/i18n/index.ts | 6 +++-- .../src/pages/home/components/Inputbar.tsx | 20 +++++++++----- .../src/pages/settings/GeneralSettings.tsx | 27 +++++++++++++++++-- src/renderer/src/store/migrate.ts | 3 ++- src/renderer/src/store/settings.ts | 10 +++++-- 6 files changed, 53 insertions(+), 18 deletions(-) diff --git a/electron.vite.config.ts b/electron.vite.config.ts index 09e2b730..8b7aa3c3 100644 --- a/electron.vite.config.ts +++ b/electron.vite.config.ts @@ -16,9 +16,6 @@ export default defineConfig({ } }, plugins: [react()], - assetsInclude: ['**/*.md'], - server: { - host: '0.0.0.0' - } + assetsInclude: ['**/*.md'] } }) diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index 5daa5eae..f806bf7e 100644 --- a/src/renderer/src/i18n/index.ts +++ b/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': '点击这里获取密钥', diff --git a/src/renderer/src/pages/home/components/Inputbar.tsx b/src/renderer/src/pages/home/components/Inputbar.tsx index cf922a75..37540b88 100644 --- a/src/renderer/src/pages/home/components/Inputbar.tsx +++ b/src/renderer/src/pages/home/components/Inputbar.tsx @@ -37,7 +37,7 @@ const Inputbar: FC = ({ 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 = ({ assistant, setActiveTopic }) => { ref={inputRef} styles={{ textarea: { paddingLeft: 0 } }} /> - - {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} |{' '} - {t('assistant.input.estimated_tokens')}: {`${inputTokenCount}/${estimateTokenCount}`} - + {showInputEstimatedTokens && ( + + {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T↑ + {`${inputTokenCount}/${estimateTokenCount}`} + + )} ) } @@ -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 diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx index 2370b9fa..b9870a10 100644 --- a/src/renderer/src/pages/settings/GeneralSettings.tsx +++ b/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(storeProxyUrl) const dispatch = useAppDispatch() const { t } = useTranslation() @@ -112,6 +125,16 @@ const GeneralSettings: FC = () => { /> + {t('settings.general.input.title')} + + + {t('settings.general.input.show_estimated_tokens')} + dispatch(setShowInputEstimatedTokens(checked))} + /> + + ) } diff --git a/src/renderer/src/store/migrate.ts b/src/renderer/src/store/migrate.ts index 7867698e..a3295f24 100644 --- a/src/renderer/src/store/migrate.ts +++ b/src/renderer/src/store/migrate.ts @@ -257,7 +257,8 @@ const migrateConfig = { ...state, settings: { ...state.settings, - messageFont: 'system' + messageFont: 'system', + showInputEstimatedTokens: false } } } diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts index 284cc761..d6078d55 100644 --- a/src/renderer/src/store/settings.ts +++ b/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) => { + state.showInputEstimatedTokens = action.payload } } }) @@ -63,7 +68,8 @@ export const { setProxyUrl, setUserName, setShowMessageDivider, - setMessageFont + setMessageFont, + setShowInputEstimatedTokens } = settingsSlice.actions export default settingsSlice.reducer