Revert "feat: remove model settings from settings tab"

This reverts commit a9aa5a8da001fe1715697001c083331a904aec0e.

# Conflicts:
#	src/renderer/src/pages/home/Tabs/Settings.tsx

src/renderer/src/pages/home/Tabs/Settings.tsx

@@ -1,6 +1,9 @@
-import { CheckOutlined } from '@ant-design/icons'
+import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { codeThemes } from '@renderer/context/SyntaxHighlighterProvider'
+import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings'
 import { useAppDispatch } from '@renderer/store'
@@ -19,14 +22,26 @@ import {
   setShowMessageDivider,
   setShowTopicTime
 } from '@renderer/store/settings'
-import { Col, Row, Select, Slider, Switch } from 'antd'
+import { Assistant, AssistantSettings, ThemeMode } from '@renderer/types'
+import { Col, Row, Select, Slider, Switch, Tooltip } from 'antd'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-const SettingsTab: FC = () => {
+interface Props {
+  assistant: Assistant
+}
+
+const SettingsTab: FC<Props> = (props) => {
+  const { assistant, updateAssistantSettings, updateAssistant } = useAssistant(props.assistant.id)
   const { messageStyle, codeStyle, fontSize } = useSettings()
+
+  const [temperature, setTemperature] = useState(assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE)
+  const [contextCount, setContextCount] = useState(assistant?.settings?.contextCount ?? DEFAULT_CONTEXTCOUNT)
+  const [enableMaxTokens, setEnableMaxTokens] = useState(assistant?.settings?.enableMaxTokens ?? false)
+  const [maxTokens, setMaxTokens] = useState(assistant?.settings?.maxTokens ?? 0)
   const [fontSizeValue, setFontSizeValue] = useState(fontSize)
+  const [streamOutput, setStreamOutput] = useState(assistant?.settings?.streamOutput ?? true)
   const { t } = useTranslation()
 
   const dispatch = useAppDispatch()
@@ -48,13 +63,144 @@ const SettingsTab: FC = () => {
     setTopicPosition
   } = useSettings()
 
+  const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
+    updateAssistantSettings(settings)
+  }
+
+  const onTemperatureChange = (value) => {
+    if (!isNaN(value as number)) {
+      onUpdateAssistantSettings({ temperature: value })
+    }
+  }
+
+  const onContextCountChange = (value) => {
+    if (!isNaN(value as number)) {
+      onUpdateAssistantSettings({ contextCount: value })
+    }
+  }
+
+  const onMaxTokensChange = (value) => {
+    if (!isNaN(value as number)) {
+      onUpdateAssistantSettings({ maxTokens: value })
+    }
+  }
+
+  const onReset = () => {
+    setTemperature(DEFAULT_TEMPERATURE)
+    setContextCount(DEFAULT_CONTEXTCOUNT)
+    updateAssistant({
+      ...assistant,
+      settings: {
+        ...assistant.settings,
+        temperature: DEFAULT_TEMPERATURE,
+        contextCount: DEFAULT_CONTEXTCOUNT,
+        enableMaxTokens: false,
+        maxTokens: DEFAULT_MAX_TOKENS,
+        streamOutput: true,
+        hideMessages: false,
+        autoResetModel: false
+      }
+    })
+  }
+
   useEffect(() => {
-    setFontSizeValue(fontSize)
+    setTemperature(assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE)
-  }, [fontSize])
+    setContextCount(assistant?.settings?.contextCount ?? DEFAULT_CONTEXTCOUNT)
+    setEnableMaxTokens(assistant?.settings?.enableMaxTokens ?? false)
+    setMaxTokens(assistant?.settings?.maxTokens ?? DEFAULT_MAX_TOKENS)
+    setStreamOutput(assistant?.settings?.streamOutput ?? true)
+  }, [assistant])
 
   return (
     <Container>
-      <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
+      <SettingGroup style={{ marginTop: 10 }}>
+        <SettingSubtitle style={{ marginTop: 0 }}>
+          {t('settings.messages.model.title')}{' '}
+          <Tooltip title={t('chat.settings.reset')}>
+            <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
+          </Tooltip>
+        </SettingSubtitle>
+        <SettingDivider />
+        <Row align="middle">
+          <Label>{t('chat.settings.temperature')}</Label>
+          <Tooltip title={t('chat.settings.temperature.tip')}>
+            <QuestionIcon />
+          </Tooltip>
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              min={0}
+              max={2}
+              onChange={setTemperature}
+              onChangeComplete={onTemperatureChange}
+              value={typeof temperature === 'number' ? temperature : 0}
+              step={0.1}
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Label>{t('chat.settings.context_count')}</Label>
+          <Tooltip title={t('chat.settings.context_count.tip')}>
+            <QuestionIcon />
+          </Tooltip>
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              min={0}
+              max={20}
+              onChange={setContextCount}
+              onChangeComplete={onContextCountChange}
+              value={typeof contextCount === 'number' ? contextCount : 0}
+              step={1}
+            />
+          </Col>
+        </Row>
+        <SettingRow>
+          <SettingRowTitleSmall>{t('model.stream_output')}</SettingRowTitleSmall>
+          <Switch
+            size="small"
+            checked={streamOutput}
+            onChange={(checked) => {
+              setStreamOutput(checked)
+              onUpdateAssistantSettings({ streamOutput: checked })
+            }}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <Row align="middle" justify="space-between">
+          <HStack alignItems="center">
+            <Label>{t('chat.settings.max_tokens')}</Label>
+            <Tooltip title={t('chat.settings.max_tokens.tip')}>
+              <QuestionIcon />
+            </Tooltip>
+          </HStack>
+          <Switch
+            size="small"
+            checked={enableMaxTokens}
+            onChange={(enabled) => {
+              setEnableMaxTokens(enabled)
+              onUpdateAssistantSettings({ enableMaxTokens: enabled })
+            }}
+          />
+        </Row>
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
+              disabled={!enableMaxTokens}
+              min={0}
+              max={32000}
+              onChange={setMaxTokens}
+              onChangeComplete={onMaxTokensChange}
+              value={typeof maxTokens === 'number' ? maxTokens : 0}
+              step={100}
+            />
+          </Col>
+        </Row>
+      </SettingGroup>
+      <SettingGroup>
+        <SettingSubtitle style={{ marginTop: 0 }}>{t('settings.messages.title')}</SettingSubtitle>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
@@ -85,7 +231,26 @@ const SettingsTab: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('chat.settings.code_collapsible')}</SettingRowTitleSmall>
-        <Switch size="small" checked={codeCollapsible} onChange={(checked) => dispatch(setCodeCollapsible(checked))} />
+          <Switch
+            size="small"
+            checked={codeCollapsible}
+            onChange={(checked) => dispatch(setCodeCollapsible(checked))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall>
+          <Select
+            value={codeStyle}
+            onChange={(value) => dispatch(setCodeStyle(value))}
+            style={{ width: 135 }}
+            size="small">
+            {codeThemes.map((theme) => (
+              <Select.Option key={theme} value={theme}>
+                {theme}
+              </Select.Option>
+            ))}
+          </Select>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -147,7 +312,9 @@ const SettingsTab: FC = () => {
             />
           </Col>
         </Row>
-      <SettingSubtitle>{t('settings.messages.input.title')}</SettingSubtitle>
+      </SettingGroup>
+      <SettingGroup>
+        <SettingSubtitle style={{ marginTop: 0 }}>{t('settings.messages.input.title')}</SettingSubtitle>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
@@ -225,6 +392,7 @@ const SettingsTab: FC = () => {
           <Switch size="small" checked={showTopicTime} onChange={(checked) => dispatch(setShowTopicTime(checked))} />
         </SettingRow>
         <SettingDivider />
+      </SettingGroup>
     </Container>
   )
 }
@@ -233,14 +401,33 @@ const Container = styled(Scrollbar)`
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding-bottom: 10px;
+  padding: 0 10px;
-  padding: 10px 15px;
+  padding-right: 5px;
-  margin-bottom: 10px;
+`
-  padding-top: 0;
+
+const Label = styled.p`
+  margin: 0;
+  font-size: 12px;
+  margin-right: 5px;
+`
+
+const QuestionIcon = styled(QuestionCircleOutlined)`
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--color-text-3);
 `
 
 const SettingRowTitleSmall = styled(SettingRowTitle)`
   font-size: 13px;
 `
 
+export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
+  padding: 10px;
+  width: 100%;
+  margin-top: 0;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  background: var(--color-background-soft);
+`
+
 export default SettingsTab

src/renderer/src/pages/home/Tabs/index.tsx

@@ -137,7 +137,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
         {tab === 'topic' && (
           <Topics assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
         )}
-        {tab === 'settings' && <Settings />}
+        {tab === 'settings' && <Settings assistant={activeAssistant} />}
       </TabContent>
     </Container>
   )