From bd87adc34bdf09dc28dde3a1d29828d3f4c1d24f Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:07:44 -0400
Subject: [PATCH 1/4] Added Featherless.ai Integration

---
 package-lock.json                             |  16 +-
 package.json                                  |   1 +
 src/renderer/packages/models/featherlessai.ts | 139 ++++++++++++++++++
 src/renderer/packages/models/index.ts         |  19 +++
 .../SettingDialog/FeatherlessAISetting.tsx    |  80 ++++++++++
 .../pages/SettingDialog/ModelSettingTab.tsx   |   4 +
 src/shared/defaults.ts                        |   5 +
 src/shared/types.ts                           |   8 +
 8 files changed, 269 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/packages/models/featherlessai.ts
 create mode 100644 src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx

diff --git a/package-lock.json b/package-lock.json
index a9c59ae0..004840a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,6 +100,7 @@
                 "electron": "^22.3.13",
                 "electron-builder": "^24.13.3",
                 "electron-devtools-installer": "^3.2.0",
+                "electron-reload": "^2.0.0-alpha.1",
                 "electronmon": "^2.0.2",
                 "eslint": "^8.42.0",
                 "eslint-config-airbnb-base": "^15.0.0",
@@ -7500,9 +7501,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001561",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz",
-            "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==",
+            "version": "1.0.30001655",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz",
+            "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==",
             "dev": true,
             "funding": [
                 {
@@ -9705,6 +9706,15 @@
                 "node": ">=4.0.0"
             }
         },
+        "node_modules/electron-reload": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "https://registry.npmjs.org/electron-reload/-/electron-reload-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-hTde7gv0TEqxbxlB3pj2CwoyCQ9sdiQrcP8GkpzhosxyVeYM3mZbMEVKCZK3L0fED7Mz5A9IWmK7zEvi4H3P1g==",
+            "dev": true,
+            "dependencies": {
+                "chokidar": "^3.5.2"
+            }
+        },
         "node_modules/electron-store": {
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/electron-store/-/electron-store-8.1.0.tgz",
diff --git a/package.json b/package.json
index 6708b34a..21a5feb2 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
         "electron": "^22.3.13",
         "electron-builder": "^24.13.3",
         "electron-devtools-installer": "^3.2.0",
+        "electron-reload": "^2.0.0-alpha.1",
         "electronmon": "^2.0.2",
         "eslint": "^8.42.0",
         "eslint-config-airbnb-base": "^15.0.0",
diff --git a/src/renderer/packages/models/featherlessai.ts b/src/renderer/packages/models/featherlessai.ts
new file mode 100644
index 00000000..b3e686a6
--- /dev/null
+++ b/src/renderer/packages/models/featherlessai.ts
@@ -0,0 +1,139 @@
+import { Message } from 'src/shared/types'
+import { ApiError, ChatboxAIAPIError } from './errors'
+import Base, { onResultChange } from './base'
+
+interface Options {
+    featherlessKey: string
+    apiHost: string
+    apiPath?: string
+    model: Model | 'custom-model'
+    openaiCustomModel?: string
+    temperature: number
+    topP: number
+}
+
+export default class FeatherlessAI extends Base {
+    public name = 'FeatherlessAI'
+
+    public options: Options
+    constructor(options: Options) {
+        super()
+        this.options = options
+        if (this.options.apiHost && this.options.apiHost.trim().length === 0) {
+            this.options.apiHost = 'https://api.featerless.ai'
+        }
+        if (this.options.apiHost && this.options.apiHost.startsWith('https://openrouter.ai/api/v1')) {
+            this.options.apiHost = 'https://openrouter.ai/api'
+        }
+        if (this.options.apiPath && !this.options.apiPath.startsWith('/')) {
+            this.options.apiPath = '/' + this.options.apiPath
+        }
+    }
+
+    async callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+        try {
+            return await this._callChatCompletion(rawMessages, signal, onResultChange)
+        } catch (e) {
+            if (e instanceof ApiError && e.message.includes('Invalid content type. image_url is only supported by certain models.')) {
+                throw ChatboxAIAPIError.fromCodeName('model_not_support_image', 'model_not_support_image')
+            }
+            throw e
+        }
+    }
+
+    async _callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+        let messages = await populateOpenAIMessage(rawMessages, this.options.model)
+
+        const model = this.options.model === 'custom-model'
+            ? this.options.openaiCustomModel || ''
+            : this.options.model
+        messages = injectModelSystemPrompt(model, messages)
+
+        const apiPath = this.options.apiPath || '/v1/chat/completions'
+        const response = await this.post(
+            `${this.options.apiHost}${apiPath}`,
+            this.getHeaders(),
+            {
+                messages,
+                model,
+                max_tokens: this.options.model === 'custom-model' ? undefined : openaiModelConfigs[this.options.model].maxTokens,                    
+                temperature: this.options.temperature,
+                top_p: this.options.topP,
+                stream: true,
+            },
+            signal
+        )
+        let result = ''
+        await this.handleSSE(response, (message) => {
+            if (message === '[DONE]') {
+                return
+            }
+            const data = JSON.parse(message)
+            if (data.error) {
+                throw new ApiError(`Error from OpenAI: ${JSON.stringify(data)}`)
+            }
+            const text = data.choices[0]?.delta?.content
+            if (text !== undefined) {
+                result += text
+                if (onResultChange) {
+                    onResultChange(result)
+                }
+            }
+        })
+        return result
+    }
+
+    getHeaders() {
+        const headers: Record<string, string> = {
+            Authorization: `Bearer ${this.options.featherlessKey}`,
+            'Content-Type': 'application/json',
+            'X-Title': 'chatbox',
+        }
+        if (this.options.apiHost.includes('openrouter.ai')) {
+            headers['HTTP-Referer'] = 'https://localhost:3000/'
+        }
+        return headers
+    }
+
+}
+//todo: implement the following functions
+// Ref: https://platform.openai.com/docs/models/gpt-4
+export const openaiModelConfigs = {
+    'anthracite-org/magnum-v2-72b': {
+        maxTokens: 4096,
+        maxContextTokens: 4096,
+    },
+    
+}
+export type Model = keyof typeof openaiModelConfigs
+export const models = Array.from(Object.keys(openaiModelConfigs)).sort() as Model[]
+
+export async function populateOpenAIMessage(rawMessages: Message[], model: Model | 'custom-model'): Promise<OpenAIMessage[]> {
+    return populateOpenAIMessageText(rawMessages)
+}
+
+export async function populateOpenAIMessageText(rawMessages: Message[]): Promise<OpenAIMessage[]> {
+    const messages: OpenAIMessage[] = rawMessages.map((m) => ({
+        role: m.role,
+        content: m.content,
+    }))
+    return messages
+}
+
+export function injectModelSystemPrompt(model: string, messages: OpenAIMessage[]) {
+    for (const message of messages) {
+        if (message.role === 'system') {
+            if (typeof message.content == 'string') {
+                message.content = `Current model: ${model}\n\n` + message.content
+            }
+            break
+        }
+    }
+    return messages
+}
+
+export interface OpenAIMessage {
+    role: 'system' | 'user' | 'assistant'
+    content: string
+    name?: string
+}
diff --git a/src/renderer/packages/models/index.ts b/src/renderer/packages/models/index.ts
index 23c5c07e..fc7acfa0 100644
--- a/src/renderer/packages/models/index.ts
+++ b/src/renderer/packages/models/index.ts
@@ -3,6 +3,7 @@ import { Settings, Config, ModelProvider, SessionType, ModelSettings, Session }
 import ChatboxAI from './chatboxai'
 import Ollama from './ollama'
 import SiliconFlow from './siliconflow'
+import FeatherlessAI from './featherlessai'
 
 export function getModel(setting: Settings, config: Config) {
     switch (setting.aiProvider) {
@@ -10,6 +11,8 @@ export function getModel(setting: Settings, config: Config) {
             return new ChatboxAI(setting, config)
         case ModelProvider.OpenAI:
             return new OpenAI(setting)
+        case ModelProvider.FeatherlessAI:
+            return new FeatherlessAI(setting)
         case ModelProvider.Ollama:
             return new Ollama(setting)
         case ModelProvider.SiliconFlow:
@@ -21,6 +24,7 @@ export function getModel(setting: Settings, config: Config) {
 
 export const aiProviderNameHash = {
     [ModelProvider.OpenAI]: 'OpenAI API',
+    [ModelProvider.FeatherlessAI]: 'FeatherlessAI',
     [ModelProvider.ChatboxAI]: 'Chatbox AI',
     [ModelProvider.Ollama]: 'Ollama',
     [ModelProvider.SiliconFlow]: 'SiliconCloud API',
@@ -38,6 +42,11 @@ export const AIModelProviderMenuOptionList = [
         label: aiProviderNameHash[ModelProvider.OpenAI],
         disabled: false,
     },
+    {
+        value: ModelProvider.FeatherlessAI,
+        label: aiProviderNameHash[ModelProvider.FeatherlessAI],
+        disabled: false,
+    },
     {
         value: ModelProvider.Ollama,
         label: aiProviderNameHash[ModelProvider.Ollama],
@@ -64,6 +73,16 @@ export function getModelDisplayName(settings: Settings, sessionType: SessionType
                 return `OpenAI Custom Model (${name})`
             }
             return settings.model || 'unknown'
+        case ModelProvider.FeatherlessAI:
+            if (settings.model === 'custom-model') {
+                let name = settings.featherlessCustomModel || ''
+                if (name.length >= 10) {
+                    name = name.slice(0, 10) + '...'
+                }
+                return `FeatherlessAI Custom Model (${name})`
+            }
+            return settings.model || 'unknown'
+
         case ModelProvider.ChatboxAI:
             const model = settings.chatboxAIModel || 'chatboxai-3.5'
             return model.replace('chatboxai-', 'Chatbox AI ')
diff --git a/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
new file mode 100644
index 00000000..f874f83a
--- /dev/null
+++ b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
@@ -0,0 +1,80 @@
+import { Typography, Box } from '@mui/material'
+import { ModelSettings } from '../../../shared/types'
+import { useTranslation } from 'react-i18next'
+import { Accordion, AccordionSummary, AccordionDetails } from '../../components/Accordion'
+import TemperatureSlider from '../../components/TemperatureSlider'
+import TopPSlider from '../../components/TopPSlider'
+import PasswordTextField from '../../components/PasswordTextField'
+import MaxContextMessageCountSlider from '../../components/MaxContextMessageCountSlider'
+import OpenAIModelSelect from '../../components/OpenAIModelSelect'
+import TextFieldReset from '@/components/TextFieldReset'
+
+interface ModelConfigProps {
+    settingsEdit: ModelSettings
+    setSettingsEdit: (settings: ModelSettings) => void
+}
+
+export default function FeatherlessAISetting(props: ModelConfigProps) {
+    const { settingsEdit, setSettingsEdit } = props
+    const { t } = useTranslation()
+    return (
+        <Box>
+            <PasswordTextField
+                label={t('api key')}
+                value={settingsEdit.featherlessKey}
+                setValue={(value) => {
+                    setSettingsEdit({ ...settingsEdit, featherlessKey: value })
+                }}
+                placeholder="rc-xxxxxxxxxxxxxxxxxxxxxxxx"
+            />
+            <>
+                <TextFieldReset
+                    margin="dense"
+                    label={t('api host')}
+                    type="text"
+                    fullWidth
+                    variant="outlined"
+                    value={settingsEdit.apiHost}
+                    placeholder="https://api.featherless.ai"
+                    defaultValue='https://api.featherless.ai'
+                    onValueChange={(value) => {
+                        value = value.trim()
+                        if (value.length > 4 && !value.startsWith('http')) {
+                            value = 'https://' + value
+                        }
+                        setSettingsEdit({ ...settingsEdit, apiHost: value })
+                    }}
+                />
+            </>
+            <Accordion>
+                <AccordionSummary aria-controls="panel1a-content">
+                    <Typography>
+                        {t('model')} & {t('token')}{' '}
+                    </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <OpenAIModelSelect
+                        model={settingsEdit.model}
+                        openaiCustomModel={settingsEdit.featherlessCustomModel}
+                        onChange={(model, featherlessCustomModel) =>
+                            setSettingsEdit({ ...settingsEdit, model, featherlessCustomModel })
+                        }
+                    />
+
+                    <TemperatureSlider
+                        value={settingsEdit.temperature}
+                        onChange={(value) => setSettingsEdit({ ...settingsEdit, temperature: value })}
+                    />
+                    <TopPSlider
+                        topP={settingsEdit.topP}
+                        setTopP={(v) => setSettingsEdit({ ...settingsEdit, topP: v })}
+                    />
+                    <MaxContextMessageCountSlider
+                        value={settingsEdit.openaiMaxContextMessageCount}
+                        onChange={(v) => setSettingsEdit({ ...settingsEdit, openaiMaxContextMessageCount: v })}
+                    />
+                </AccordionDetails>
+            </Accordion>
+        </Box>
+    )
+}
diff --git a/src/renderer/pages/SettingDialog/ModelSettingTab.tsx b/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
index 9e33d570..2d8d10b6 100644
--- a/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
+++ b/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
@@ -2,6 +2,7 @@ import { Divider, Box } from '@mui/material'
 import { ModelProvider, ModelSettings } from '../../../shared/types'
 import OpenAISetting from './OpenAISetting'
 import ChatboxAISetting from './ChatboxAISetting'
+import FeatherlessAISetting from './FeatherlessAISetting'
 import AIProviderSelect from '../../components/AIProviderSelect'
 import { OllamaHostInput, OllamaModelSelect } from './OllamaSetting'
 import SiliconFlowSetting from './SiliconFlowSetting'
@@ -25,6 +26,9 @@ export default function ModelSettingTab(props: ModelConfigProps) {
             {settingsEdit.aiProvider === ModelProvider.OpenAI && (
                 <OpenAISetting settingsEdit={settingsEdit} setSettingsEdit={setSettingsEdit} />
             )}
+            {settingsEdit.aiProvider === ModelProvider.FeatherlessAI && (
+                <FeatherlessAISetting settingsEdit={settingsEdit} setSettingsEdit={setSettingsEdit} />
+            )}
             {settingsEdit.aiProvider === ModelProvider.ChatboxAI && (
                 <ChatboxAISetting settingsEdit={settingsEdit} setSettingsEdit={setSettingsEdit} />
             )}
diff --git a/src/shared/defaults.ts b/src/shared/defaults.ts
index 504c79c4..a930835c 100644
--- a/src/shared/defaults.ts
+++ b/src/shared/defaults.ts
@@ -44,6 +44,11 @@ export function settings(): Settings {
         siliconCloudHost: 'https://api.siliconflow.cn',
         siliconCloudKey: '',
         siliconCloudModel: 'THUDM/glm-4-9b-chat',
+
+        featherlessKey:'', 
+        featherlessApiHost: '', 
+        featherlessApiPath: '', 
+        featherlessModel: 'custom-model',
     }
 }
 
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 8b0d08c2..1c04c069 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -66,6 +66,7 @@ export enum ModelProvider {
     OpenAI = 'openai',
     Ollama = 'ollama',
     SiliconFlow = 'silicon-flow',
+    FeatherlessAI = "FeatherlessAI",
 }
 
 export interface ModelSettings {
@@ -76,6 +77,13 @@ export interface ModelSettings {
     apiHost: string
     model: Model | 'custom-model'
     openaiCustomModel?: string
+    
+    // featherlessai
+    featherlessKey: string
+    featherlessApiHost: string
+    featherlessApiPath: string
+    featherlessModel: Model | 'custom-model'
+    featherlessCustomModel?: string
 
     // azure
     azureEndpoint: string

From 49ddcffd881bd6dc091a6cb5e614254c0e6a6953 Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:13:39 -0400
Subject: [PATCH 2/4] Merge from main

---
 src/renderer/components/AIProviderSelect.tsx  |  88 +++---
 src/renderer/components/Accordion.tsx         |   3 +-
 src/renderer/components/Header.tsx            |   9 +-
 src/renderer/components/InputBox.tsx          |  51 ++--
 src/renderer/components/Markdown.tsx          | 105 +++----
 src/renderer/components/Message.tsx           |  81 +++--
 src/renderer/components/MessageErrTips.tsx    |  44 +--
 src/renderer/components/MessageList.tsx       |  28 +-
 src/renderer/components/MiniButton.tsx        |  20 +-
 src/renderer/components/OpenAIModelSelect.tsx |   4 +-
 src/renderer/components/SessionItem.tsx       |   8 +-
 src/renderer/components/SessionList.tsx       |   9 +-
 .../components/SiliconFlowModelSelect.tsx     |  13 +-
 src/renderer/components/StyledMenu.tsx        |   2 +-
 src/renderer/components/TextFieldReset.tsx    |  24 +-
 src/renderer/components/Toasts.tsx            |   2 +-
 src/renderer/components/Toolbar.tsx           |  22 +-
 src/renderer/hooks/useAppTheme.ts             |  10 +-
 .../hooks/useDefaultSystemLanguage.ts         |   2 +-
 src/renderer/packages/event.ts                |   2 +-
 src/renderer/packages/models/base.ts          |  36 ++-
 src/renderer/packages/models/chatboxai.ts     |  14 +-
 src/renderer/packages/models/errors.ts        |  68 +++--
 src/renderer/packages/models/featherlessai.ts |  33 +-
 src/renderer/packages/models/ollama.ts        |  16 +-
 src/renderer/packages/models/openai.ts        |  34 ++-
 src/renderer/packages/platform.ts             |   4 +-
 src/renderer/packages/prompts.ts              |   2 +-
 src/renderer/packages/remote.ts               |  16 +-
 src/renderer/pages/AboutWindow.tsx            |  32 +-
 src/renderer/pages/ChatConfigWindow.tsx       |  20 +-
 src/renderer/pages/CleanWindow.tsx            |   3 +-
 src/renderer/pages/CopilotWindow.tsx          |  36 +--
 .../SettingDialog/AdvancedSettingTab.tsx      |  19 +-
 .../pages/SettingDialog/ChatSettingTab.tsx    |   2 +-
 .../pages/SettingDialog/ChatboxAISetting.tsx  | 286 +++++++++---------
 .../pages/SettingDialog/DisplaySettingTab.tsx |   4 +-
 .../SettingDialog/FeatherlessAISetting.tsx    |   2 +-
 .../pages/SettingDialog/ModelSettingTab.tsx   |   7 +-
 .../pages/SettingDialog/OllamaSetting.tsx     |  36 ++-
 .../pages/SettingDialog/OpenAISetting.tsx     |   2 +-
 src/renderer/setup/ga_init.ts                 |   5 +-
 src/renderer/setup/sentry_init.ts             |   3 +-
 src/renderer/storage/StoreStorage.ts          |   2 +-
 src/renderer/stores/atoms.ts                  |   6 +-
 src/renderer/stores/premiumActions.ts         |  10 +-
 src/renderer/stores/sessionActions.ts         |  39 +--
 src/shared/defaults.ts                        |   6 +-
 src/shared/types.ts                           |   4 +-
 49 files changed, 634 insertions(+), 640 deletions(-)

diff --git a/src/renderer/components/AIProviderSelect.tsx b/src/renderer/components/AIProviderSelect.tsx
index e081a3b8..1a819318 100644
--- a/src/renderer/components/AIProviderSelect.tsx
+++ b/src/renderer/components/AIProviderSelect.tsx
@@ -2,11 +2,11 @@ import { Chip, MenuItem, Typography } from '@mui/material'
 import { ModelProvider, ModelSettings } from '../../shared/types'
 import { useTranslation } from 'react-i18next'
 import { AIModelProviderMenuOptionList } from '../packages/models'
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import StyledMenu from './StyledMenu';
-import StarIcon from '@mui/icons-material/Star';
+import * as React from 'react'
+import Button from '@mui/material/Button'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import StyledMenu from './StyledMenu'
+import StarIcon from '@mui/icons-material/Star'
 
 interface ModelConfigProps {
     settings: ModelSettings
@@ -19,29 +19,25 @@ export default function AIProviderSelect(props: ModelConfigProps) {
     const { settings, setSettings, className, hideCustomProviderManage } = props
     const { t } = useTranslation()
 
-    const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
-    const menuState = Boolean(menuAnchorEl);
+    const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null)
+    const menuState = Boolean(menuAnchorEl)
     const openMenu = (event: React.MouseEvent<HTMLElement>) => {
-        setMenuAnchorEl(event.currentTarget);
-    };
+        setMenuAnchorEl(event.currentTarget)
+    }
     const closeMenu = () => {
-        setMenuAnchorEl(null);
-    };
+        setMenuAnchorEl(null)
+    }
 
     return (
         <>
-            <Typography variant='caption' className='opacity-50'>
+            <Typography variant="caption" className="opacity-50">
                 {t('Model Provider')}:
             </Typography>
-            <div className='flex items-end justify-between'>
-                <Button
-                    variant="contained"
-                    disableElevation
-                    onClick={openMenu}
-                    endIcon={<KeyboardArrowDownIcon />}
-                >
-                    <Typography className='text-left' maxWidth={200} noWrap>
-                        { AIModelProviderMenuOptionList.find((provider) => provider.value === settings.aiProvider)?.label || 'Unknown' }
+            <div className="flex items-end justify-between">
+                <Button variant="contained" disableElevation onClick={openMenu} endIcon={<KeyboardArrowDownIcon />}>
+                    <Typography className="text-left" maxWidth={200} noWrap>
+                        {AIModelProviderMenuOptionList.find((provider) => provider.value === settings.aiProvider)
+                            ?.label || 'Unknown'}
                     </Typography>
                 </Button>
                 <StyledMenu
@@ -57,34 +53,32 @@ export default function AIProviderSelect(props: ModelConfigProps) {
                         horizontal: 'left',
                     }}
                 >
-                    {
-                        AIModelProviderMenuOptionList.map((provider) => (
-                            <MenuItem disableRipple
-                                onClick={() => {
-                                    setSettings({
-                                        ...settings,
-                                        aiProvider: provider.value as ModelProvider,
-                                    })
-                                    closeMenu()
-                                }}
-                            >
-                                <StarIcon />
-                                {provider.label}
-                                {provider.featured && (
-                                    <Chip
-                                        label={t('Easy Access')}
-                                        size="small"
-                                        color="success"
-                                        variant="outlined"
-                                        sx={{ marginLeft: '10px' }}
-                                    />
-                                )}
-                            </MenuItem>
-                        ))
-                    }
+                    {AIModelProviderMenuOptionList.map((provider) => (
+                        <MenuItem
+                            disableRipple
+                            onClick={() => {
+                                setSettings({
+                                    ...settings,
+                                    aiProvider: provider.value as ModelProvider,
+                                })
+                                closeMenu()
+                            }}
+                        >
+                            <StarIcon />
+                            {provider.label}
+                            {provider.featured && (
+                                <Chip
+                                    label={t('Easy Access')}
+                                    size="small"
+                                    color="success"
+                                    variant="outlined"
+                                    sx={{ marginLeft: '10px' }}
+                                />
+                            )}
+                        </MenuItem>
+                    ))}
                 </StyledMenu>
             </div>
         </>
     )
 }
-
diff --git a/src/renderer/components/Accordion.tsx b/src/renderer/components/Accordion.tsx
index a224a87d..10a9fc23 100644
--- a/src/renderer/components/Accordion.tsx
+++ b/src/renderer/components/Accordion.tsx
@@ -8,8 +8,7 @@ export const Accordion = styled((props: AccordionProps) => (
     <MuiAccordion disableGutters elevation={0} square {...props} />
 ))(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
-    '&:not(:last-child)': {
-    },
+    '&:not(:last-child)': {},
     '&:before': {
         display: 'none',
     },
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index 07c0bc86..ce3553fb 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -7,7 +7,7 @@ import * as sessionActions from '../stores/sessionActions'
 import Toolbar from './Toolbar'
 import { cn } from '@/lib/utils'
 
-interface Props { }
+interface Props {}
 
 export default function Header(props: Props) {
     const theme = useTheme()
@@ -15,12 +15,9 @@ export default function Header(props: Props) {
     const setChatConfigDialogSession = useSetAtom(atoms.chatConfigDialogAtom)
 
     useEffect(() => {
-        if (
-            currentSession.name === 'Untitled'
-            && currentSession.messages.length >= 2
-        ) {
+        if (currentSession.name === 'Untitled' && currentSession.messages.length >= 2) {
             sessionActions.generateName(currentSession.id)
-            return 
+            return
         }
     }, [currentSession.messages.length])
 
diff --git a/src/renderer/components/InputBox.tsx b/src/renderer/components/InputBox.tsx
index 15a3cf1a..f24f7745 100644
--- a/src/renderer/components/InputBox.tsx
+++ b/src/renderer/components/InputBox.tsx
@@ -5,10 +5,7 @@ import { useTranslation } from 'react-i18next'
 import * as atoms from '../stores/atoms'
 import { useSetAtom } from 'jotai'
 import * as sessionActions from '../stores/sessionActions'
-import {
-    SendHorizontal,
-    Settings2,
-} from 'lucide-react'
+import { SendHorizontal, Settings2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import icon from '../static/icon.png'
 import { trackingEvent } from '@/packages/event'
@@ -50,13 +47,7 @@ export default function InputBox(props: Props) {
     }
 
     const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (
-            event.keyCode === 13 &&
-            !event.shiftKey &&
-            !event.ctrlKey &&
-            !event.altKey &&
-            !event.metaKey
-        ) {
+        if (event.keyCode === 13 && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
             event.preventDefault()
             handleSubmit()
             return
@@ -71,7 +62,8 @@ export default function InputBox(props: Props) {
     const [easterEgg, setEasterEgg] = useState(false)
 
     return (
-        <div className='pl-2 pr-4'
+        <div
+            className="pl-2 pr-4"
             style={{
                 borderTopWidth: '1px',
                 borderTopStyle: 'solid',
@@ -79,9 +71,11 @@ export default function InputBox(props: Props) {
             }}
         >
             <div className={cn('w-full mx-auto flex flex-col')}>
-                <div className='flex flex-row flex-nowrap justify-between py-1'>
-                    <div className='flex flex-row items-center'>
-                        <MiniButton className='mr-2 hover:bg-transparent' style={{ color: theme.palette.text.primary }}
+                <div className="flex flex-row flex-nowrap justify-between py-1">
+                    <div className="flex flex-row items-center">
+                        <MiniButton
+                            className="mr-2 hover:bg-transparent"
+                            style={{ color: theme.palette.text.primary }}
                             onClick={() => {
                                 setEasterEgg(true)
                                 setTimeout(() => setEasterEgg(false), 1000)
@@ -89,20 +83,23 @@ export default function InputBox(props: Props) {
                         >
                             <img className={cn('w-5 h-5', easterEgg ? 'animate-spin' : '')} src={icon} />
                         </MiniButton>
-                        <MiniButton className='mr-2' style={{ color: theme.palette.text.primary }}
+                        <MiniButton
+                            className="mr-2"
+                            style={{ color: theme.palette.text.primary }}
                             onClick={() => setChatConfigDialogSession(sessionActions.getCurrentSession())}
                             tooltipTitle={
-                                <div className='text-center inline-block'>
+                                <div className="text-center inline-block">
                                     <span>{t('Customize settings for the current conversation')}</span>
                                 </div>
                             }
-                            tooltipPlacement='top'
+                            tooltipPlacement="top"
                         >
-                            <Settings2 size='22' strokeWidth={1} />
+                            <Settings2 size="22" strokeWidth={1} />
                         </MiniButton>
                     </div>
-                    <div className='flex flex-row items-center'>
-                        <MiniButton className='w-8 ml-2'
+                    <div className="flex flex-row items-center">
+                        <MiniButton
+                            className="w-8 ml-2"
                             style={{
                                 color: theme.palette.getContrastText(theme.palette.primary.main),
                                 backgroundColor: theme.palette.primary.main,
@@ -112,21 +109,22 @@ export default function InputBox(props: Props) {
                                     {t('[Enter] send, [Shift+Enter] line break, [Ctrl+Enter] send without generating')}
                                 </Typography>
                             }
-                            tooltipPlacement='top'
+                            tooltipPlacement="top"
                             onClick={() => handleSubmit()}
                         >
-                            <SendHorizontal size='22' strokeWidth={1} />
+                            <SendHorizontal size="22" strokeWidth={1} />
                         </MiniButton>
                     </div>
                 </div>
-                <div className='w-full pl-1 pb-2'>
+                <div className="w-full pl-1 pb-2">
                     <textarea
                         className={cn(
                             `w-full max-h-[${maxTextareaHeight}px]`,
                             'overflow-y resize-none border-none outline-none',
                             'bg-transparent p-1'
                         )}
-                        value={messageInput} onChange={onMessageInput}
+                        value={messageInput}
+                        onChange={onMessageInput}
                         onKeyDown={onKeyDown}
                         ref={inputRef}
                         style={{
@@ -138,8 +136,7 @@ export default function InputBox(props: Props) {
                         }}
                         placeholder={t('Type your question here...') || ''}
                     />
-                    <div className='flex flex-row items-center'>
-                    </div>
+                    <div className="flex flex-row items-center"></div>
                 </div>
             </div>
         </div>
diff --git a/src/renderer/components/Markdown.tsx b/src/renderer/components/Markdown.tsx
index 4a8f619d..2fef397e 100644
--- a/src/renderer/components/Markdown.tsx
+++ b/src/renderer/components/Markdown.tsx
@@ -15,37 +15,34 @@ import { sanitizeUrl } from '@braintree/sanitize-url'
 import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
 import { copyToClipboard } from '@/packages/navigator'
 
-export default function Markdown(props: {
-    children: string
-    hiddenCodeCopyButton?: boolean
-    className?: string
-}) {
+export default function Markdown(props: { children: string; hiddenCodeCopyButton?: boolean; className?: string }) {
     const { children, hiddenCodeCopyButton, className } = props
-    return useMemo(() => (
-        <ReactMarkdown
-            remarkPlugins={
-                [remarkGfm, remarkMath, remarkBreaks]
-            }
-            rehypePlugins={[rehypeKatex]}
-            className={`break-words ${className || ''}`}
-            urlTransform={(url) => sanitizeUrl(url)}
-            components={{
-                code: (props: any) => CodeBlock({ ...props, hiddenCodeCopyButton }),
-                a: ({ node, ...props }) => (
-                    <a
-                        {...props}
-                        target="_blank"
-                        rel="noreferrer"
-                        onClick={(e) => {
-                            e.stopPropagation()
-                        }}
-                    />
-                ),
-            }}
-        >
-            { children }
-        </ReactMarkdown>
-    ), [children])
+    return useMemo(
+        () => (
+            <ReactMarkdown
+                remarkPlugins={[remarkGfm, remarkMath, remarkBreaks]}
+                rehypePlugins={[rehypeKatex]}
+                className={`break-words ${className || ''}`}
+                urlTransform={(url) => sanitizeUrl(url)}
+                components={{
+                    code: (props: any) => CodeBlock({ ...props, hiddenCodeCopyButton }),
+                    a: ({ node, ...props }) => (
+                        <a
+                            {...props}
+                            target="_blank"
+                            rel="noreferrer"
+                            onClick={(e) => {
+                                e.stopPropagation()
+                            }}
+                        />
+                    ),
+                }}
+            >
+                {children}
+            </ReactMarkdown>
+        ),
+        [children]
+    )
 }
 
 export function CodeBlock(props: any) {
@@ -99,36 +96,30 @@ export function CodeBlock(props: any) {
                     >
                         {'<' + language.toUpperCase() + '>'}
                     </span>
-                    {
-                        !hiddenCodeCopyButton && (
-                            <ContentCopyIcon
-                                sx={{
-                                    textDecoration: 'none',
-                                    color: 'white',
-                                    padding: '1px',
-                                    margin: '2px 10px 0 10px',
-                                    cursor: 'pointer',
-                                    opacity: 0.5,
-                                    ':hover': {
-                                        backgroundColor: 'rgb(80, 80, 80)',
-                                        opacity: 1,
-                                    },
-                                }}
-                                onClick={() => {
-                                    copyToClipboard(String(children))
-                                    toastActions.add(t('copied to clipboard'))
-                                }}
-                            />
-                        )
-                    }
+                    {!hiddenCodeCopyButton && (
+                        <ContentCopyIcon
+                            sx={{
+                                textDecoration: 'none',
+                                color: 'white',
+                                padding: '1px',
+                                margin: '2px 10px 0 10px',
+                                cursor: 'pointer',
+                                opacity: 0.5,
+                                ':hover': {
+                                    backgroundColor: 'rgb(80, 80, 80)',
+                                    opacity: 1,
+                                },
+                            }}
+                            onClick={() => {
+                                copyToClipboard(String(children))
+                                toastActions.add(t('copied to clipboard'))
+                            }}
+                        />
+                    )}
                 </div>
                 <SyntaxHighlighter
                     children={String(children).replace(/\n$/, '')}
-                    style={
-                        theme.palette.mode === 'dark'
-                            ? atomDark
-                            : a11yDark
-                    }
+                    style={theme.palette.mode === 'dark' ? atomDark : a11yDark}
                     language={language}
                     PreTag="div"
                     customStyle={{
diff --git a/src/renderer/components/Message.tsx b/src/renderer/components/Message.tsx
index 8cbe3dbc..8b0d81c7 100644
--- a/src/renderer/components/Message.tsx
+++ b/src/renderer/components/Message.tsx
@@ -1,11 +1,7 @@
 import { useEffect, useState, useRef } from 'react'
 import Box from '@mui/material/Box'
 import Avatar from '@mui/material/Avatar'
-import {
-    Typography,
-    Grid,
-    useTheme,
-} from '@mui/material'
+import { Typography, Grid, useTheme } from '@mui/material'
 import PersonIcon from '@mui/icons-material/Person'
 import SmartToyIcon from '@mui/icons-material/SmartToy'
 import SettingsIcon from '@mui/icons-material/Settings'
@@ -25,7 +21,7 @@ import * as scrollActions from '../stores/scrollActions'
 import Markdown from '@/components/Markdown'
 import '../static/Block.css'
 import MessageErrTips from './MessageErrTips'
-import * as dateFns from "date-fns"
+import * as dateFns from 'date-fns'
 import { cn } from '@/lib/utils'
 import { estimateTokensFromMessages } from '@/packages/token'
 import { countWord } from '@/packages/word-count'
@@ -56,9 +52,10 @@ export default function Message(props: Props) {
 
     const { msg, className, collapseThreshold, hiddenButtonGroup, small } = props
 
-    const needCollapse = collapseThreshold
-        && (JSON.stringify(msg.content)).length > collapseThreshold
-        && (JSON.stringify(msg.content)).length - collapseThreshold > 50
+    const needCollapse =
+        collapseThreshold &&
+        JSON.stringify(msg.content).length > collapseThreshold &&
+        JSON.stringify(msg.content).length - collapseThreshold > 50
     const [isCollapsed, setIsCollapsed] = useState(needCollapse)
 
     const ref = useRef<HTMLDivElement>(null)
@@ -115,7 +112,7 @@ export default function Message(props: Props) {
 
     const CollapseButton = (
         <span
-            className='cursor-pointer inline-block font-bold text-blue-500 hover:text-white hover:bg-blue-500'
+            className="cursor-pointer inline-block font-bold text-blue-500 hover:text-white hover:bg-blue-500"
             onClick={() => setIsCollapsed(!isCollapsed)}
         >
             [{isCollapsed ? t('Expand') : t('Collapse')}]
@@ -137,7 +134,7 @@ export default function Message(props: Props) {
                     system: 'system-msg',
                     assistant: 'assistant-msg',
                 }[msg?.role || 'user'],
-                className,
+                className
             )}
             sx={{
                 margin: '0',
@@ -169,7 +166,7 @@ export default function Message(props: Props) {
                                             height: '28px',
                                         }}
                                     >
-                                        <SmartToyIcon fontSize='small' />
+                                        <SmartToyIcon fontSize="small" />
                                     </Avatar>
                                 ),
                                 user: (
@@ -178,52 +175,44 @@ export default function Message(props: Props) {
                                             width: '28px',
                                             height: '28px',
                                         }}
-                                        className='cursor-pointer'
+                                        className="cursor-pointer"
                                         onClick={() => setOpenSettingWindow('chat')}
                                     >
-                                        <PersonIcon fontSize='small' />
+                                        <PersonIcon fontSize="small" />
+                                    </Avatar>
+                                ),
+                                system: (
+                                    <Avatar
+                                        sx={{
+                                            backgroundColor: theme.palette.warning.main,
+                                            width: '28px',
+                                            height: '28px',
+                                        }}
+                                    >
+                                        <SettingsIcon fontSize="small" />
                                     </Avatar>
                                 ),
-                                system:
-                                        <Avatar
-                                            sx={{
-                                                backgroundColor: theme.palette.warning.main,
-                                                width: '28px',
-                                                height: '28px',
-                                            }}
-                                        >
-                                            <SettingsIcon fontSize='small' />
-                                        </Avatar>
                             }[msg.role]
                         }
                     </Box>
                 </Grid>
                 <Grid item xs sm container sx={{ width: '0px', paddingRight: '15px' }}>
                     <Grid item xs>
-                        <Box className={cn('msg-content', { 'msg-content-small': small })} sx={
-                            small ? { fontSize: theme.typography.body2.fontSize } : {}
-                        }>
-                            {
-                                enableMarkdownRendering && !isCollapsed ? (
-                                    <Markdown>
-                                        {content}
-                                    </Markdown>
-                                ) : (
-                                    <div>
-                                        {content}
-                                        {
-                                            needCollapse && isCollapsed && (
-                                                CollapseButton
-                                            )
-                                        }
-                                    </div>
-                                )
-                            }
+                        <Box
+                            className={cn('msg-content', { 'msg-content-small': small })}
+                            sx={small ? { fontSize: theme.typography.body2.fontSize } : {}}
+                        >
+                            {enableMarkdownRendering && !isCollapsed ? (
+                                <Markdown>{content}</Markdown>
+                            ) : (
+                                <div>
+                                    {content}
+                                    {needCollapse && isCollapsed && CollapseButton}
+                                </div>
+                            )}
                         </Box>
                         <MessageErrTips msg={msg} />
-                        {
-                            needCollapse && !isCollapsed && CollapseButton
-                        }
+                        {needCollapse && !isCollapsed && CollapseButton}
                         <Typography variant="body2" sx={{ opacity: 0.5, paddingBottom: '2rem' }}>
                             {tips.join(', ')}
                         </Typography>
diff --git a/src/renderer/components/MessageErrTips.tsx b/src/renderer/components/MessageErrTips.tsx
index c182089f..bf3d9d20 100644
--- a/src/renderer/components/MessageErrTips.tsx
+++ b/src/renderer/components/MessageErrTips.tsx
@@ -18,7 +18,7 @@ export default function MessageErrTips(props: { msg: Message }) {
         return null
     }
     const tips: React.ReactNode[] = []
-    let onlyShowTips = false 
+    let onlyShowTips = false
     if (msg.error.startsWith('API Error')) {
         tips.push(
             <Trans
@@ -71,14 +71,22 @@ export default function MessageErrTips(props: { msg: Message }) {
                     }}
                     components={{
                         OpenSettingButton: (
-                            <Link className="cursor-pointer italic" onClick={() => setOpenSettingDialogAtom('ai')}></Link>
+                            <Link
+                                className="cursor-pointer italic"
+                                onClick={() => setOpenSettingDialogAtom('ai')}
+                            ></Link>
                         ),
                         OpenMorePlanButton: (
-                            <Link className="cursor-pointer italic" onClick={() => {
-                                platform.openLink('https://chatboxai.app/redirect_app/view_more_plans')
-                                trackingEvent('click_view_more_plans_button_from_upgrade_error_tips', { event_category: 'user' })
-                            }}></Link>
-                        )
+                            <Link
+                                className="cursor-pointer italic"
+                                onClick={() => {
+                                    platform.openLink('https://chatboxai.app/redirect_app/view_more_plans')
+                                    trackingEvent('click_view_more_plans_button_from_upgrade_error_tips', {
+                                        event_category: 'user',
+                                    })
+                                }}
+                            ></Link>
+                        ),
                     }}
                 />
             )
@@ -98,16 +106,18 @@ export default function MessageErrTips(props: { msg: Message }) {
     }
     return (
         <Alert icon={false} severity="error">
-            {tips.map((tip, i) => (<b key={i}>{tip}</b>))}
-            {
-                onlyShowTips
-                    ? <></>
-                    : <>
-                        <br />
-                        <br />
-                        {msg.error}
-                    </>
-            }
+            {tips.map((tip, i) => (
+                <b key={i}>{tip}</b>
+            ))}
+            {onlyShowTips ? (
+                <></>
+            ) : (
+                <>
+                    <br />
+                    <br />
+                    {msg.error}
+                </>
+            )}
         </Alert>
     )
 }
diff --git a/src/renderer/components/MessageList.tsx b/src/renderer/components/MessageList.tsx
index a88ea24c..44225534 100644
--- a/src/renderer/components/MessageList.tsx
+++ b/src/renderer/components/MessageList.tsx
@@ -4,7 +4,7 @@ import * as atoms from '../stores/atoms'
 import { useAtom, useAtomValue } from 'jotai'
 import { cn } from '@/lib/utils'
 
-interface Props { }
+interface Props {}
 
 export default function MessageList(props: Props) {
     const currentSession = useAtomValue(atoms.currentSessionAtom)
@@ -16,20 +16,18 @@ export default function MessageList(props: Props) {
     }, [ref])
     return (
         <div className={cn('w-full h-3/4 mx-auto')}>
-            <div className='overflow-y-auto h-full pr-0 pl-0' ref={ref}>
-                {
-                    currentMessageList.map((msg, index) => (
-                        <Message
-                            id={msg.id}
-                            key={'msg-' + msg.id}
-                            msg={msg}
-                            sessionId={currentSession.id}
-                            sessionType={currentSession.type || 'chat'}
-                            className={index === 0 ? 'pt-4' : ''}
-                            collapseThreshold={msg.role === 'system' ? 150 : undefined}
-                        />
-                    ))
-                }
+            <div className="overflow-y-auto h-full pr-0 pl-0" ref={ref}>
+                {currentMessageList.map((msg, index) => (
+                    <Message
+                        id={msg.id}
+                        key={'msg-' + msg.id}
+                        msg={msg}
+                        sessionId={currentSession.id}
+                        sessionType={currentSession.type || 'chat'}
+                        className={index === 0 ? 'pt-4' : ''}
+                        collapseThreshold={msg.role === 'system' ? 150 : undefined}
+                    />
+                ))}
             </div>
         </div>
     )
diff --git a/src/renderer/components/MiniButton.tsx b/src/renderer/components/MiniButton.tsx
index 662b478d..d8a1ce49 100644
--- a/src/renderer/components/MiniButton.tsx
+++ b/src/renderer/components/MiniButton.tsx
@@ -9,17 +9,31 @@ export default function MiniButton(props: {
     className?: string
     style?: React.CSSProperties
     tooltipTitle?: React.ReactNode
-    tooltipPlacement?: "top" | "bottom" | "left" | "right" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"
+    tooltipPlacement?:
+        | 'top'
+        | 'bottom'
+        | 'left'
+        | 'right'
+        | 'bottom-end'
+        | 'bottom-start'
+        | 'left-end'
+        | 'left-start'
+        | 'right-end'
+        | 'right-start'
+        | 'top-end'
+        | 'top-start'
 }) {
     const { onClick, disabled, className, style, tooltipTitle, tooltipPlacement, children } = props
     const button = (
-        <button onClick={onClick} disabled={disabled}
+        <button
+            onClick={onClick}
+            disabled={disabled}
             className={cn(
                 'bg-transparent hover:bg-slate-400/25',
                 'border-none rounded',
                 'h-8 w-8 p-1',
                 disabled ? '' : 'cursor-pointer',
-                className,
+                className
             )}
             style={style}
         >
diff --git a/src/renderer/components/OpenAIModelSelect.tsx b/src/renderer/components/OpenAIModelSelect.tsx
index 94597990..1e072284 100644
--- a/src/renderer/components/OpenAIModelSelect.tsx
+++ b/src/renderer/components/OpenAIModelSelect.tsx
@@ -38,9 +38,7 @@ export default function OpenAIModelSelect(props: Props) {
                     fullWidth
                     variant="outlined"
                     value={props.openaiCustomModel || ''}
-                    onChange={(e) =>
-                        props.onChange(props.model, e.target.value.trim())
-                    }
+                    onChange={(e) => props.onChange(props.model, e.target.value.trim())}
                 />
             )}
         </FormControl>
diff --git a/src/renderer/components/SessionItem.tsx b/src/renderer/components/SessionItem.tsx
index 7db1ac6f..fce8040d 100644
--- a/src/renderer/components/SessionItem.tsx
+++ b/src/renderer/components/SessionItem.tsx
@@ -45,12 +45,16 @@ function _SessionItem(props: Props) {
                 selected={selected}
                 onClick={onClick}
                 sx={{ padding: '0.1rem', margin: '0.1rem' }}
-                className='group/session-item'
+                className="group/session-item"
             >
                 <ListItemIcon>
                     <IconButton color={'inherit'} onClick={onClick}>
                         {session.picUrl ? (
-                            <Avatar sizes={medianSize} sx={{ width: medianSize, height: medianSize }} src={session.picUrl} />
+                            <Avatar
+                                sizes={medianSize}
+                                sx={{ width: medianSize, height: medianSize }}
+                                src={session.picUrl}
+                            />
                         ) : (
                             <ChatBubbleOutlineOutlinedIcon fontSize="small" />
                         )}
diff --git a/src/renderer/components/SessionList.tsx b/src/renderer/components/SessionList.tsx
index 6e6d06fb..02bf94a7 100644
--- a/src/renderer/components/SessionList.tsx
+++ b/src/renderer/components/SessionList.tsx
@@ -49,8 +49,8 @@ export default function SessionList(props: Props) {
         const activeId = event.active.id
         const overId = event.over.id
         if (activeId !== overId) {
-            const oldIndex = sortedSessions.findIndex(s => s.id === activeId)
-            const newIndex = sortedSessions.findIndex(s => s.id === overId)
+            const oldIndex = sortedSessions.findIndex((s) => s.id === activeId)
+            const newIndex = sortedSessions.findIndex((s) => s.id === overId)
             const newReversed = arrayMove(sortedSessions, oldIndex, newIndex)
             setSessions(atoms.sortSessions(newReversed))
         }
@@ -89,10 +89,7 @@ export default function SessionList(props: Props) {
     )
 }
 
-function SortableItem(props: {
-    id: string
-    children?: React.ReactNode
-}) {
+function SortableItem(props: { id: string; children?: React.ReactNode }) {
     const { id, children } = props
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })
     return (
diff --git a/src/renderer/components/SiliconFlowModelSelect.tsx b/src/renderer/components/SiliconFlowModelSelect.tsx
index bed1cd40..a3975b68 100644
--- a/src/renderer/components/SiliconFlowModelSelect.tsx
+++ b/src/renderer/components/SiliconFlowModelSelect.tsx
@@ -6,7 +6,10 @@ import { models } from '../packages/models/siliconflow'
 export interface Props {
     model: ModelSettings['siliconCloudModel']
     siliconflowCustomModel: ModelSettings['openaiCustomModel']
-    onChange(model: ModelSettings['siliconCloudModel'], siliconflowCustomModel: ModelSettings['openaiCustomModel']): void
+    onChange(
+        model: ModelSettings['siliconCloudModel'],
+        siliconflowCustomModel: ModelSettings['openaiCustomModel']
+    ): void
     className?: string
 }
 
@@ -19,7 +22,9 @@ export default function SiliconFlowModelSelect(props: Props) {
                 label={t('siliconCloudModel')}
                 id="model-select"
                 value={props.model}
-                onChange={(e) => props.onChange(e.target.value as ModelSettings['siliconCloudModel'], props.siliconflowCustomModel)}
+                onChange={(e) =>
+                    props.onChange(e.target.value as ModelSettings['siliconCloudModel'], props.siliconflowCustomModel)
+                }
             >
                 {models.map((model) => (
                     <MenuItem key={model} value={model}>
@@ -38,9 +43,7 @@ export default function SiliconFlowModelSelect(props: Props) {
                     fullWidth
                     variant="outlined"
                     value={props.siliconflowCustomModel || ''}
-                    onChange={(e) =>
-                        props.onChange(props.model, e.target.value.trim())
-                    }
+                    onChange={(e) => props.onChange(props.model, e.target.value.trim())}
                 />
             )}
         </FormControl>
diff --git a/src/renderer/components/StyledMenu.tsx b/src/renderer/components/StyledMenu.tsx
index b1a1c425..57cf1092 100644
--- a/src/renderer/components/StyledMenu.tsx
+++ b/src/renderer/components/StyledMenu.tsx
@@ -15,7 +15,7 @@ const StyledMenu = styled((props: MenuProps) => (
         }}
         PopoverClasses={{
             root: '',
-            paper: 'bg-white dark:bg-slate-800'
+            paper: 'bg-white dark:bg-slate-800',
         }}
         {...props}
     />
diff --git a/src/renderer/components/TextFieldReset.tsx b/src/renderer/components/TextFieldReset.tsx
index f362e0ab..2236408f 100644
--- a/src/renderer/components/TextFieldReset.tsx
+++ b/src/renderer/components/TextFieldReset.tsx
@@ -2,11 +2,13 @@ import React from 'react'
 import { TextField, Button } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 
-export default function TextFieldReset(props: {
-    defaultValue?: string
-    value: string
-    onValueChange: (value: string) => void
-} & Omit<React.ComponentProps<typeof TextField>, 'defaultValue' | 'value' | 'onChange'>) {
+export default function TextFieldReset(
+    props: {
+        defaultValue?: string
+        value: string
+        onValueChange: (value: string) => void
+    } & Omit<React.ComponentProps<typeof TextField>, 'defaultValue' | 'value' | 'onChange'>
+) {
     const { t } = useTranslation()
     const defaultValue = props.defaultValue || ''
     const handleReset = () => props.onValueChange(defaultValue)
@@ -21,12 +23,12 @@ export default function TextFieldReset(props: {
                 defaultValue === props.value
                     ? {}
                     : {
-                        endAdornment: (
-                            <Button variant='text' onClick={handleReset} onMouseDown={handleMouseDown}>
-                                {t('reset')}
-                            </Button>
-                        ),
-                    }
+                          endAdornment: (
+                              <Button variant="text" onClick={handleReset} onMouseDown={handleMouseDown}>
+                                  {t('reset')}
+                              </Button>
+                          ),
+                      }
             }
             helperText={props.helperText}
         />
diff --git a/src/renderer/components/Toasts.tsx b/src/renderer/components/Toasts.tsx
index 7e984086..8ebf2dc0 100644
--- a/src/renderer/components/Toasts.tsx
+++ b/src/renderer/components/Toasts.tsx
@@ -10,7 +10,7 @@ function Toasts() {
         <>
             {toasts.map((toast) => (
                 <Snackbar
-                    className='Snackbar'
+                    className="Snackbar"
                     key={toast.id}
                     open
                     onClose={() => toastActions.remove(toast.id)}
diff --git a/src/renderer/components/Toolbar.tsx b/src/renderer/components/Toolbar.tsx
index d6724b71..675c03a4 100644
--- a/src/renderer/components/Toolbar.tsx
+++ b/src/renderer/components/Toolbar.tsx
@@ -3,11 +3,11 @@ import IconButton from '@mui/material/IconButton'
 import { useAtomValue, useSetAtom } from 'jotai'
 import * as atoms from '../stores/atoms'
 import { useTranslation } from 'react-i18next'
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import StyledMenu from './StyledMenu'
 import { useState } from 'react'
 import { MenuItem } from '@mui/material'
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
+import CleaningServicesIcon from '@mui/icons-material/CleaningServices'
 
 export default function Toolbar() {
     const { t } = useTranslation()
@@ -33,21 +33,13 @@ export default function Toolbar() {
 
     return (
         <Box>
-            <IconButton
-                edge="start"
-                color="inherit"
-                aria-label="more-menu-button"
-                sx={{}}
-                onClick={handleMoreMenuOpen}
-            >
+            <IconButton edge="start" color="inherit" aria-label="more-menu-button" sx={{}} onClick={handleMoreMenuOpen}>
                 <MoreHorizIcon />
             </IconButton>
-            <StyledMenu
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleMoreMenuClose}
-            >
-                <MenuItem onClick={handleSessionClean} disableRipple
+            <StyledMenu anchorEl={anchorEl} open={open} onClose={handleMoreMenuClose}>
+                <MenuItem
+                    onClick={handleSessionClean}
+                    disableRipple
                     sx={{
                         '&:hover': {
                             backgroundColor: 'rgba(255, 0, 0, 0.1)',
diff --git a/src/renderer/hooks/useAppTheme.ts b/src/renderer/hooks/useAppTheme.ts
index 941d6dba..3b4702a1 100644
--- a/src/renderer/hooks/useAppTheme.ts
+++ b/src/renderer/hooks/useAppTheme.ts
@@ -55,11 +55,11 @@ export function getThemeDesign(realTheme: 'light' | 'dark', fontSize: number): T
             ...(realTheme === 'light'
                 ? {}
                 : {
-                    background: {
-                        default: 'rgb(40, 40, 40)',
-                        paper: 'rgb(40, 40, 40)',
-                    },
-                }),
+                      background: {
+                          default: 'rgb(40, 40, 40)',
+                          paper: 'rgb(40, 40, 40)',
+                      },
+                  }),
         },
         typography: {
             fontSize,
diff --git a/src/renderer/hooks/useDefaultSystemLanguage.ts b/src/renderer/hooks/useDefaultSystemLanguage.ts
index 04a8f11c..ad7c43a4 100644
--- a/src/renderer/hooks/useDefaultSystemLanguage.ts
+++ b/src/renderer/hooks/useDefaultSystemLanguage.ts
@@ -6,7 +6,7 @@ import platform from '../packages/platform'
 export function useSystemLanguageWhenInit() {
     useEffect(() => {
         setTimeout(() => {
-            ; (async () => {
+            ;(async () => {
                 const store = getDefaultStore()
                 const settings = store.get(settingsAtom)
                 if (!settings.languageInited) {
diff --git a/src/renderer/packages/event.ts b/src/renderer/packages/event.ts
index b625c74d..9a950c0e 100644
--- a/src/renderer/packages/event.ts
+++ b/src/renderer/packages/event.ts
@@ -6,7 +6,7 @@ export function trackingEvent(name: string, params: { [key: string]: string } =
     const store = getDefaultStore()
     // ONLY track when user allow
     const allowReportingAndTracking = store.get(allowReportingAndTrackingAtom)
-    if (! allowReportingAndTracking) {
+    if (!allowReportingAndTracking) {
         return
     }
     platform.trackingEvent(name, params)
diff --git a/src/renderer/packages/models/base.ts b/src/renderer/packages/models/base.ts
index 616a8409..f57cc9a6 100644
--- a/src/renderer/packages/models/base.ts
+++ b/src/renderer/packages/models/base.ts
@@ -1,24 +1,39 @@
 import { Message } from 'src/shared/types'
-import { ApiError, NetworkError, AIProviderNoImplementedPaintError, BaseError, AIProviderNoImplementedChatError } from './errors'
+import {
+    ApiError,
+    NetworkError,
+    AIProviderNoImplementedPaintError,
+    BaseError,
+    AIProviderNoImplementedChatError,
+} from './errors'
 import { createParser } from 'eventsource-parser'
 import _ from 'lodash'
 
 export default class Base {
     public name = 'Unknown'
 
-    constructor() {
-    }
+    constructor() {}
 
-    async callChatCompletion(messages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async callChatCompletion(
+        messages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         throw new AIProviderNoImplementedChatError(this.name)
     }
 
-    async chat(messages: Message[], onResultUpdated?: (data: { text: string, cancel(): void }) => void): Promise<string> {
+    async chat(
+        messages: Message[],
+        onResultUpdated?: (data: { text: string; cancel(): void }) => void
+    ): Promise<string> {
         messages = await this.preprocessMessage(messages)
         return await this._chat(messages, onResultUpdated)
     }
 
-    protected async _chat(messages: Message[], onResultUpdated?: (data: { text: string, cancel(): void }) => void): Promise<string> {
+    protected async _chat(
+        messages: Message[],
+        onResultUpdated?: (data: { text: string; cancel(): void }) => void
+    ): Promise<string> {
         let canceled = false
         const controller = new AbortController()
         const stop = () => {
@@ -94,7 +109,7 @@ export default class Base {
         }
     }
 
-    async * iterableStreamAsync(stream: ReadableStream): AsyncIterableIterator<Uint8Array> {
+    async *iterableStreamAsync(stream: ReadableStream): AsyncIterableIterator<Uint8Array> {
         const reader = stream.getReader()
         try {
             while (true) {
@@ -149,12 +164,7 @@ export default class Base {
         }
     }
 
-    async get(
-        url: string,
-        headers: Record<string, string>,
-        signal?: AbortSignal,
-        retry = 3
-    ) {
+    async get(url: string, headers: Record<string, string>, signal?: AbortSignal, retry = 3) {
         let requestError: ApiError | NetworkError | null = null
         for (let i = 0; i < retry + 1; i++) {
             try {
diff --git a/src/renderer/packages/models/chatboxai.ts b/src/renderer/packages/models/chatboxai.ts
index b9d2abbb..d6462779 100644
--- a/src/renderer/packages/models/chatboxai.ts
+++ b/src/renderer/packages/models/chatboxai.ts
@@ -32,7 +32,11 @@ export default class ChatboxAI extends Base {
         this.config = config
     }
 
-    async callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         const messages = await populateChatboxAIMessage(rawMessages)
         const response = await this.post(
             `${API_ORIGIN}/api/ai/chat`,
@@ -122,12 +126,7 @@ export default class ChatboxAI extends Base {
         }
     }
 
-    async get(
-        url: string,
-        headers: Record<string, string>,
-        signal?: AbortSignal,
-        retry = 3
-    ) {
+    async get(url: string, headers: Record<string, string>, signal?: AbortSignal, retry = 3) {
         let requestError: ApiError | NetworkError | null = null
         for (let i = 0; i < retry + 1; i++) {
             try {
@@ -162,7 +161,6 @@ export default class ChatboxAI extends Base {
             throw new Error('Unknown error')
         }
     }
-
 }
 
 export interface ChatboxAIMessage {
diff --git a/src/renderer/packages/models/errors.ts b/src/renderer/packages/models/errors.ts
index 3c2325d0..425c52c4 100644
--- a/src/renderer/packages/models/errors.ts
+++ b/src/renderer/packages/models/errors.ts
@@ -41,80 +41,88 @@ export class AIProviderNoImplementedChatError extends BaseError {
 
 export class ChatboxAIAPIError extends BaseError {
     static codeNameMap: { [codename: string]: ChatboxAIAPIErrorDetail } = {
-        'token_quota_exhausted': {
+        token_quota_exhausted: {
             name: 'token_quota_exhausted',
-            code: 10004,    // for compatibility with the old code
-            i18nKey: 'You have reached your monthly quota for the {{model}} model. Please <OpenSettingButton>go to Settings</OpenSettingButton> to switch to a different model, view your quota usage, or upgrade your plan.',
+            code: 10004, // for compatibility with the old code
+            i18nKey:
+                'You have reached your monthly quota for the {{model}} model. Please <OpenSettingButton>go to Settings</OpenSettingButton> to switch to a different model, view your quota usage, or upgrade your plan.',
         },
-        'license_upgrade_required': {
+        license_upgrade_required: {
             name: 'license_upgrade_required',
             code: 20001,
-            i18nKey: 'Your current License (Chatbox AI Lite) does not support the {{model}} model. To use this model, please <OpenMorePlanButton>upgrade</OpenMorePlanButton> to Chatbox AI Pro or a higher-tier package. Alternatively, you can switch to a different model by <OpenSettingButton>accessing the settings</OpenSettingButton>.',
+            i18nKey:
+                'Your current License (Chatbox AI Lite) does not support the {{model}} model. To use this model, please <OpenMorePlanButton>upgrade</OpenMorePlanButton> to Chatbox AI Pro or a higher-tier package. Alternatively, you can switch to a different model by <OpenSettingButton>accessing the settings</OpenSettingButton>.',
         },
-        'expired_license': {
+        expired_license: {
             name: 'expired_license',
             code: 20002,
             i18nKey: 'Your license has expired. Please check your subscription or purchase a new one.',
         },
-        'license_key_required': {
+        license_key_required: {
             name: 'license_key_required',
             code: 20003,
-            i18nKey: 'You have selected Chatbox AI as the model provider, but a license key has not been entered yet. Please <OpenSettingButton>click here to open Settings</OpenSettingButton> and enter your license key, or choose a different model provider.'
+            i18nKey:
+                'You have selected Chatbox AI as the model provider, but a license key has not been entered yet. Please <OpenSettingButton>click here to open Settings</OpenSettingButton> and enter your license key, or choose a different model provider.',
         },
-        'license_not_found': {
+        license_not_found: {
             name: 'license_not_found',
             code: 20004,
-            i18nKey: 'The license key you entered is invalid. Please check your license key and try again.'
+            i18nKey: 'The license key you entered is invalid. Please check your license key and try again.',
         },
-        'rate_limit_exceeded': {
+        rate_limit_exceeded: {
             name: 'rate_limit_exceeded',
             code: 20005,
-            i18nKey: 'You have exceeded the rate limit for the Chatbox AI service. Please try again later.'
+            i18nKey: 'You have exceeded the rate limit for the Chatbox AI service. Please try again later.',
         },
-        'bad_params': {
+        bad_params: {
             name: 'bad_params',
             code: 20006,
-            i18nKey: 'Invalid request parameters detected. Please try again later. Persistent failures may indicate an outdated software version. Consider upgrading to access the latest performance improvements and features.'
+            i18nKey:
+                'Invalid request parameters detected. Please try again later. Persistent failures may indicate an outdated software version. Consider upgrading to access the latest performance improvements and features.',
         },
-        'file_type_not_supported': {
+        file_type_not_supported: {
             name: 'file_type_not_supported',
             code: 20007,
-            i18nKey: 'File type not supported. Supported types include txt, md, html, doc, docx, pdf, excel, pptx, csv, and all text-based files, including code files.'
+            i18nKey:
+                'File type not supported. Supported types include txt, md, html, doc, docx, pdf, excel, pptx, csv, and all text-based files, including code files.',
         },
-        'file_expired': {
+        file_expired: {
             name: 'file_expired',
             code: 20008,
-            i18nKey: 'The file you sent has expired. To protect your privacy, all file-related cache data has been cleared. You need to create a new conversation or refresh the context, and then send the file again.'
+            i18nKey:
+                'The file you sent has expired. To protect your privacy, all file-related cache data has been cleared. You need to create a new conversation or refresh the context, and then send the file again.',
         },
-        'file_not_found': {
+        file_not_found: {
             name: 'file_not_found',
             code: 20009,
-            i18nKey: 'The cache data for the file was not found. Please create a new conversation or refresh the context, and then send the file again.'
+            i18nKey:
+                'The cache data for the file was not found. Please create a new conversation or refresh the context, and then send the file again.',
         },
-        'file_too_large': {
+        file_too_large: {
             name: 'file_too_large',
             code: 20010,
-            i18nKey: 'The file size exceeds the limit of 50MB. Please reduce the file size and try again.'
+            i18nKey: 'The file size exceeds the limit of 50MB. Please reduce the file size and try again.',
         },
-        'model_not_support_file': {
+        model_not_support_file: {
             name: 'model_not_support_file',
             code: 20011,
-            i18nKey: 'The current model {{model}} does not support sending files. Currently supported models: Chatbox AI 4.'
+            i18nKey:
+                'The current model {{model}} does not support sending files. Currently supported models: Chatbox AI 4.',
         },
-        'model_not_support_file_2': {
+        model_not_support_file_2: {
             name: 'model_not_support_file_2',
             code: 20012,
-            i18nKey: 'The current model {{model}} does not support sending files.'
+            i18nKey: 'The current model {{model}} does not support sending files.',
         },
-        'model_not_support_image': {
+        model_not_support_image: {
             name: 'model_not_support_image',
             code: 20013,
-            i18nKey: 'The current model {{model}} does not support sending images. Recommended model: Chatbox AI 4.'
+            i18nKey: 'The current model {{model}} does not support sending images. Recommended model: Chatbox AI 4.',
         },
-        'model_not_support_image_2': {
+        model_not_support_image_2: {
             name: 'model_not_support_image_2',
             code: 20014,
-            i18nKey: 'The current model {{model}} does not support sending images.'
+            i18nKey: 'The current model {{model}} does not support sending images.',
         },
     }
     static fromCodeName(response: string, codeName: string) {
diff --git a/src/renderer/packages/models/featherlessai.ts b/src/renderer/packages/models/featherlessai.ts
index b3e686a6..db724be1 100644
--- a/src/renderer/packages/models/featherlessai.ts
+++ b/src/renderer/packages/models/featherlessai.ts
@@ -30,23 +30,32 @@ export default class FeatherlessAI extends Base {
         }
     }
 
-    async callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         try {
             return await this._callChatCompletion(rawMessages, signal, onResultChange)
         } catch (e) {
-            if (e instanceof ApiError && e.message.includes('Invalid content type. image_url is only supported by certain models.')) {
+            if (
+                e instanceof ApiError &&
+                e.message.includes('Invalid content type. image_url is only supported by certain models.')
+            ) {
                 throw ChatboxAIAPIError.fromCodeName('model_not_support_image', 'model_not_support_image')
             }
             throw e
         }
     }
 
-    async _callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async _callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         let messages = await populateOpenAIMessage(rawMessages, this.options.model)
 
-        const model = this.options.model === 'custom-model'
-            ? this.options.openaiCustomModel || ''
-            : this.options.model
+        const model = this.options.model === 'custom-model' ? this.options.openaiCustomModel || '' : this.options.model
         messages = injectModelSystemPrompt(model, messages)
 
         const apiPath = this.options.apiPath || '/v1/chat/completions'
@@ -56,7 +65,10 @@ export default class FeatherlessAI extends Base {
             {
                 messages,
                 model,
-                max_tokens: this.options.model === 'custom-model' ? undefined : openaiModelConfigs[this.options.model].maxTokens,                    
+                max_tokens:
+                    this.options.model === 'custom-model'
+                        ? undefined
+                        : openaiModelConfigs[this.options.model].maxTokens,
                 temperature: this.options.temperature,
                 top_p: this.options.topP,
                 stream: true,
@@ -94,7 +106,6 @@ export default class FeatherlessAI extends Base {
         }
         return headers
     }
-
 }
 //todo: implement the following functions
 // Ref: https://platform.openai.com/docs/models/gpt-4
@@ -103,12 +114,14 @@ export const openaiModelConfigs = {
         maxTokens: 4096,
         maxContextTokens: 4096,
     },
-    
 }
 export type Model = keyof typeof openaiModelConfigs
 export const models = Array.from(Object.keys(openaiModelConfigs)).sort() as Model[]
 
-export async function populateOpenAIMessage(rawMessages: Message[], model: Model | 'custom-model'): Promise<OpenAIMessage[]> {
+export async function populateOpenAIMessage(
+    rawMessages: Message[],
+    model: Model | 'custom-model'
+): Promise<OpenAIMessage[]> {
     return populateOpenAIMessageText(rawMessages)
 }
 
diff --git a/src/renderer/packages/models/ollama.ts b/src/renderer/packages/models/ollama.ts
index a3befaf1..4dd8e104 100644
--- a/src/renderer/packages/models/ollama.ts
+++ b/src/renderer/packages/models/ollama.ts
@@ -33,8 +33,12 @@ export default class Ollama extends Base {
         return host
     }
 
-    async callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
-        const messages = rawMessages.map(m => ({ role: m.role, content: m.content }))
+    async callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
+        const messages = rawMessages.map((m) => ({ role: m.role, content: m.content }))
         const res = await this.post(
             `${this.getHost()}/api/chat`,
             { 'Content-Type': 'application/json' },
@@ -44,9 +48,9 @@ export default class Ollama extends Base {
                 stream: true,
                 options: {
                     temperature: this.options.temperature,
-                }
+                },
             },
-            signal,
+            signal
         )
         let result = ''
         await this.handleNdjson(res, (message) => {
@@ -55,7 +59,7 @@ export default class Ollama extends Base {
                 return
             }
             const word = data['message']?.['content']
-            if (! word) {
+            if (!word) {
                 throw new ApiError(JSON.stringify(data))
             }
             result += word
@@ -69,7 +73,7 @@ export default class Ollama extends Base {
     async listModels(): Promise<string[]> {
         const res = await this.get(`${this.getHost()}/api/tags`, {})
         const json = await res.json()
-        if (! json['models']) {
+        if (!json['models']) {
             throw new ApiError(JSON.stringify(json))
         }
         return json['models'].map((m: any) => m['name'])
diff --git a/src/renderer/packages/models/openai.ts b/src/renderer/packages/models/openai.ts
index 5ebd38ef..0ba40d91 100644
--- a/src/renderer/packages/models/openai.ts
+++ b/src/renderer/packages/models/openai.ts
@@ -30,23 +30,32 @@ export default class OpenAI extends Base {
         }
     }
 
-    async callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         try {
             return await this._callChatCompletion(rawMessages, signal, onResultChange)
         } catch (e) {
-            if (e instanceof ApiError && e.message.includes('Invalid content type. image_url is only supported by certain models.')) {
+            if (
+                e instanceof ApiError &&
+                e.message.includes('Invalid content type. image_url is only supported by certain models.')
+            ) {
                 throw ChatboxAIAPIError.fromCodeName('model_not_support_image', 'model_not_support_image')
             }
             throw e
         }
     }
 
-    async _callChatCompletion(rawMessages: Message[], signal?: AbortSignal, onResultChange?: onResultChange): Promise<string> {
+    async _callChatCompletion(
+        rawMessages: Message[],
+        signal?: AbortSignal,
+        onResultChange?: onResultChange
+    ): Promise<string> {
         let messages = await populateOpenAIMessage(rawMessages, this.options.model)
 
-        const model = this.options.model === 'custom-model'
-            ? this.options.openaiCustomModel || ''
-            : this.options.model
+        const model = this.options.model === 'custom-model' ? this.options.openaiCustomModel || '' : this.options.model
         messages = injectModelSystemPrompt(model, messages)
 
         const apiPath = this.options.apiPath || '/v1/chat/completions'
@@ -56,9 +65,10 @@ export default class OpenAI extends Base {
             {
                 messages,
                 model,
-                max_tokens: this.options.model === 'gpt-4-vision-preview'
-                    ? openaiModelConfigs['gpt-4-vision-preview'].maxTokens
-                    : undefined,
+                max_tokens:
+                    this.options.model === 'gpt-4-vision-preview'
+                        ? openaiModelConfigs['gpt-4-vision-preview'].maxTokens
+                        : undefined,
                 temperature: this.options.temperature,
                 top_p: this.options.topP,
                 stream: true,
@@ -95,7 +105,6 @@ export default class OpenAI extends Base {
         }
         return headers
     }
-
 }
 
 // Ref: https://platform.openai.com/docs/models/gpt-4
@@ -209,7 +218,10 @@ export const openaiModelConfigs = {
 export type Model = keyof typeof openaiModelConfigs
 export const models = Array.from(Object.keys(openaiModelConfigs)).sort() as Model[]
 
-export async function populateOpenAIMessage(rawMessages: Message[], model: Model | 'custom-model'): Promise<OpenAIMessage[]> {
+export async function populateOpenAIMessage(
+    rawMessages: Message[],
+    model: Model | 'custom-model'
+): Promise<OpenAIMessage[]> {
     return populateOpenAIMessageText(rawMessages)
 }
 
diff --git a/src/renderer/packages/platform.ts b/src/renderer/packages/platform.ts
index 214413c8..214d8530 100644
--- a/src/renderer/packages/platform.ts
+++ b/src/renderer/packages/platform.ts
@@ -1,5 +1,5 @@
-import { ElectronIPC } from "src/shared/electron-types"
-import { Config, Settings } from "src/shared/types"
+import { ElectronIPC } from 'src/shared/electron-types'
+import { Config, Settings } from 'src/shared/types'
 import { getOS } from './navigator'
 import { parseLocale } from '@/i18n/parser'
 
diff --git a/src/renderer/packages/prompts.ts b/src/renderer/packages/prompts.ts
index 475b0447..4614a3da 100644
--- a/src/renderer/packages/prompts.ts
+++ b/src/renderer/packages/prompts.ts
@@ -14,7 +14,7 @@ The following is the conversation:
 
 \`\`\`
 ${
-    format(msgs.map((msg) => msg.content.slice(0, 100)))    // only use the first 100 characters of each message to save tokens
+    format(msgs.map((msg) => msg.content.slice(0, 100))) // only use the first 100 characters of each message to save tokens
 }
 \`\`\`
 
diff --git a/src/renderer/packages/remote.ts b/src/renderer/packages/remote.ts
index 256417e1..694817ac 100644
--- a/src/renderer/packages/remote.ts
+++ b/src/renderer/packages/remote.ts
@@ -11,7 +11,6 @@ import { ofetch } from 'ofetch'
 
 export const API_ORIGIN = 'https://chatboxai.app'
 
-
 export async function checkNeedUpdate(version: string, os: string, config: Config, settings: Settings) {
     type Response = {
         need_update?: boolean
@@ -122,10 +121,7 @@ export async function getLicenseDetailRealtime(params: { licenseKey: string }) {
     return res['data'] || null
 }
 
-export async function activateLicense(params: {
-    licenseKey: string,
-    instanceName: string
-}) {
+export async function activateLicense(params: { licenseKey: string; instanceName: string }) {
     type Response = {
         data: {
             valid: boolean
@@ -144,10 +140,7 @@ export async function activateLicense(params: {
     return json['data']
 }
 
-export async function deactivateLicense(params: {
-    licenseKey: string,
-    instanceId: string
-}) {
+export async function deactivateLicense(params: { licenseKey: string; instanceId: string }) {
     await ofetch(`${API_ORIGIN}/api/license/deactivate`, {
         method: 'POST',
         headers: {
@@ -157,10 +150,7 @@ export async function deactivateLicense(params: {
     })
 }
 
-export async function validateLicense(params: {
-    licenseKey: string,
-    instanceId: string
-}) {
+export async function validateLicense(params: { licenseKey: string; instanceId: string }) {
     type Response = {
         data: {
             valid: boolean
diff --git a/src/renderer/pages/AboutWindow.tsx b/src/renderer/pages/AboutWindow.tsx
index 34d9dc49..0126f037 100644
--- a/src/renderer/pages/AboutWindow.tsx
+++ b/src/renderer/pages/AboutWindow.tsx
@@ -48,12 +48,9 @@ export default function AboutWindow(props: Props) {
             <DialogContent>
                 <Box sx={{ textAlign: 'center', padding: '0 20px' }}>
                     <img src={iconPNG} style={{ width: '100px', margin: 0, display: 'inline-block' }} />
-                    <h3 style={{ margin: '4px 0 5px 0' }}>Chatbox
-                        {
-                            /\d/.test(versionHook.version)
-                                ? `(v${versionHook.version})`
-                                : ''
-                        }
+                    <h3 style={{ margin: '4px 0 5px 0' }}>
+                        Chatbox
+                        {/\d/.test(versionHook.version) ? `(v${versionHook.version})` : ''}
                     </h3>
                     <p className="p-0 m-0">{t('about-slogan')}</p>
                     <p className="p-0 m-0 opacity-60 text-xs">{t('about-introduction')}</p>
@@ -65,14 +62,19 @@ export default function AboutWindow(props: Props) {
                         alignItems: 'center',
                         flexWrap: 'wrap',
                     }}
-                    className='mt-1'
+                    className="mt-1"
                 >
-                    <Badge color="primary" variant="dot" invisible={!versionHook.needCheckUpdate}
+                    <Badge
+                        color="primary"
+                        variant="dot"
+                        invisible={!versionHook.needCheckUpdate}
                         sx={{ margin: '4px' }}
                     >
                         <Button
                             variant="outlined"
-                            onClick={() => platform.openLink(`https://chatboxai.app/redirect_app/check_update/${language}`)}
+                            onClick={() =>
+                                platform.openLink(`https://chatboxai.app/redirect_app/check_update/${language}`)
+                            }
                         >
                             {t('Check Update')}
                         </Button>
@@ -106,21 +108,23 @@ export default function AboutWindow(props: Props) {
                         backgroundColor: 'paper',
                     }}
                 >
-                    <div className='my-1'>
+                    <div className="my-1">
                         <b>Benn:</b>
                     </div>
-                    <div className='my-1'>
+                    <div className="my-1">
                         <span>{t('Auther Message')}</span>
                     </div>
-                    <div className='my-1'>
+                    <div className="my-1">
                         <a
-                            className='underline font-normal cursor-pointer mr-4' style={{ color: theme.palette.primary.main }}
+                            className="underline font-normal cursor-pointer mr-4"
+                            style={{ color: theme.palette.primary.main }}
                             onClick={() => platform.openLink(`https://chatboxai.app/redirect_app/donate/${language}`)}
                         >
                             {t('Donate')}
                         </a>
                         <a
-                            className='underline font-normal cursor-pointer mr-4' style={{ color: theme.palette.primary.main }}
+                            className="underline font-normal cursor-pointer mr-4"
+                            style={{ color: theme.palette.primary.main }}
                             onClick={() => platform.openLink(`https://chatboxai.app/redirect_app/author/${language}`)}
                         >
                             {t('Follow me on Twitter(X)')}
diff --git a/src/renderer/pages/ChatConfigWindow.tsx b/src/renderer/pages/ChatConfigWindow.tsx
index 32aca110..6a572dd3 100644
--- a/src/renderer/pages/ChatConfigWindow.tsx
+++ b/src/renderer/pages/ChatConfigWindow.tsx
@@ -1,25 +1,13 @@
 import React, { useEffect } from 'react'
-import {
-    Button,
-    Dialog,
-    DialogContent,
-    DialogActions,
-    DialogTitle,
-    DialogContentText,
-    TextField,
-} from '@mui/material'
-import {
-    Session,
-    createMessage,
-} from '../../shared/types'
+import { Button, Dialog, DialogContent, DialogActions, DialogTitle, DialogContentText, TextField } from '@mui/material'
+import { Session, createMessage } from '../../shared/types'
 import { useTranslation } from 'react-i18next'
 import * as sessionActions from '../stores/sessionActions'
 import * as atoms from '../stores/atoms'
 import { useAtom } from 'jotai'
 import { trackingEvent } from '@/packages/event'
 
-interface Props {
-}
+interface Props {}
 
 export default function ChatConfigWindow(props: Props) {
     const { t } = useTranslation()
@@ -95,7 +83,7 @@ export default function ChatConfigWindow(props: Props) {
                     value={editingData.name}
                     onChange={(e) => setEditingData({ ...editingData, name: e.target.value })}
                 />
-                <div className='mt-1'>
+                <div className="mt-1">
                     <TextField
                         margin="dense"
                         label={t('Instruction (System Prompt)')}
diff --git a/src/renderer/pages/CleanWindow.tsx b/src/renderer/pages/CleanWindow.tsx
index f7f4247d..394ca474 100644
--- a/src/renderer/pages/CleanWindow.tsx
+++ b/src/renderer/pages/CleanWindow.tsx
@@ -5,8 +5,7 @@ import { useAtom } from 'jotai'
 import * as sessionActions from '../stores/sessionActions'
 import { trackingEvent } from '@/packages/event'
 
-interface Props {
-}
+interface Props {}
 
 export default function CleanWindow(props: Props) {
     const [sessionClean, setSessionClean] = useAtom(atoms.sessionCleanDialogAtom)
diff --git a/src/renderer/pages/CopilotWindow.tsx b/src/renderer/pages/CopilotWindow.tsx
index e2ab2a8d..a56c60b3 100644
--- a/src/renderer/pages/CopilotWindow.tsx
+++ b/src/renderer/pages/CopilotWindow.tsx
@@ -132,7 +132,7 @@ export default function CopilotWindow(props: Props) {
                 <ScrollableTabsButtonAuto
                     values={[{ value: 'my', label: t('My Copilots') }]}
                     currentValue="my"
-                    onChange={() => { }}
+                    onChange={() => {}}
                 />
                 <div
                     style={{
@@ -174,7 +174,7 @@ export default function CopilotWindow(props: Props) {
                         },
                     ]}
                     currentValue="chatbox-featured"
-                    onChange={() => { }}
+                    onChange={() => {}}
                 />
                 <div
                     style={{
@@ -200,18 +200,18 @@ export default function CopilotWindow(props: Props) {
 
 type MiniItemProps =
     | {
-        mode: 'local'
-        detail: CopilotDetail
-        useMe(): void
-        switchStarred(): void
-        editMe(): void
-        deleteMe(): void
-    }
+          mode: 'local'
+          detail: CopilotDetail
+          useMe(): void
+          switchStarred(): void
+          editMe(): void
+          deleteMe(): void
+      }
     | {
-        mode: 'remote'
-        detail: CopilotDetail
-        useMe(): void
-    }
+          mode: 'remote'
+          detail: CopilotDetail
+          useMe(): void
+      }
 
 function MiniItem(props: MiniItemProps) {
     const { t } = useTranslation()
@@ -248,19 +248,15 @@ function MiniItem(props: MiniItemProps) {
                     opacity: 1,
                 },
             }}
-            className='w-48 hover:bg-slate-400/25 border-solid border-slate-400/20 rounded-md'
+            className="w-48 hover:bg-slate-400/25 border-solid border-slate-400/20 rounded-md"
             onClick={useCopilot}
         >
-            <Avatar
-                sizes="30px"
-                sx={{ width: '30px', height: '30px' }}
-                src={props.detail.picUrl}
-            ></Avatar>
+            <Avatar sizes="30px" sx={{ width: '30px', height: '30px' }} src={props.detail.picUrl}></Avatar>
             <div
                 style={{
                     marginLeft: '5px',
                 }}
-                className='w-28'
+                className="w-28"
             >
                 <Typography variant="body1" noWrap>
                     {props.detail.name}
diff --git a/src/renderer/pages/SettingDialog/AdvancedSettingTab.tsx b/src/renderer/pages/SettingDialog/AdvancedSettingTab.tsx
index cc1febec..0b8d3f2b 100644
--- a/src/renderer/pages/SettingDialog/AdvancedSettingTab.tsx
+++ b/src/renderer/pages/SettingDialog/AdvancedSettingTab.tsx
@@ -1,7 +1,4 @@
-import {
-    Typography,
-    Box,
-} from '@mui/material'
+import { Typography, Box } from '@mui/material'
 import { Settings } from '../../../shared/types'
 import { useTranslation } from 'react-i18next'
 import { Accordion, AccordionSummary, AccordionDetails } from '../../components/Accordion'
@@ -55,26 +52,26 @@ export function AnalyticsSetting() {
     return (
         <Box>
             <div>
-                <p className='opacity-70'>
-                    {t('Chatbox respects your privacy and only uploads anonymous error data and events when necessary. You can change your preferences at any time in the settings.')}
+                <p className="opacity-70">
+                    {t(
+                        'Chatbox respects your privacy and only uploads anonymous error data and events when necessary. You can change your preferences at any time in the settings.'
+                    )}
                 </p>
             </div>
-            <div className='my-2'>
+            <div className="my-2">
                 <AllowReportingAndTrackingCheckbox />
             </div>
         </Box>
     )
 }
 
-export function AllowReportingAndTrackingCheckbox(props: {
-    className?: string
-}) {
+export function AllowReportingAndTrackingCheckbox(props: { className?: string }) {
     const { t } = useTranslation()
     const [allowReportingAndTracking, setAllowReportingAndTracking] = useAtom(atoms.allowReportingAndTrackingAtom)
     return (
         <span className={props.className}>
             <input
-                type='checkbox'
+                type="checkbox"
                 checked={allowReportingAndTracking}
                 onChange={(e) => setAllowReportingAndTracking(e.target.checked)}
             />
diff --git a/src/renderer/pages/SettingDialog/ChatSettingTab.tsx b/src/renderer/pages/SettingDialog/ChatSettingTab.tsx
index a4d39b83..79f6827a 100644
--- a/src/renderer/pages/SettingDialog/ChatSettingTab.tsx
+++ b/src/renderer/pages/SettingDialog/ChatSettingTab.tsx
@@ -12,7 +12,7 @@ export default function ChatSettingTab(props: {
 
     return (
         <Box>
-            <Box className='mb-2'>
+            <Box className="mb-2">
                 <TextField
                     margin="dense"
                     label={t('Default Prompt for New Conversation')}
diff --git a/src/renderer/pages/SettingDialog/ChatboxAISetting.tsx b/src/renderer/pages/SettingDialog/ChatboxAISetting.tsx
index bfc85752..f9f998b8 100644
--- a/src/renderer/pages/SettingDialog/ChatboxAISetting.tsx
+++ b/src/renderer/pages/SettingDialog/ChatboxAISetting.tsx
@@ -4,12 +4,12 @@ import { Trans, useTranslation } from 'react-i18next'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import PasswordTextField from '../../components/PasswordTextField'
 import ChatboxAIModelSelect from '../../components/ChatboxAIModelSelect'
-import LinearProgress, { LinearProgressProps, linearProgressClasses } from '@mui/material/LinearProgress';
-import { styled } from '@mui/material/styles';
+import LinearProgress, { LinearProgressProps, linearProgressClasses } from '@mui/material/LinearProgress'
+import { styled } from '@mui/material/styles'
 import { Accordion, AccordionSummary, AccordionDetails } from '../../components/Accordion'
 import React, { useState } from 'react'
 import * as remote from '@/packages/remote'
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress'
 import platform from '@/packages/platform'
 import { trackingEvent } from '@/packages/event'
 import * as premiumActions from '@/stores/premiumActions'
@@ -43,32 +43,37 @@ export default function ChatboxAISetting(props: ModelConfigProps) {
                 switch (result.error) {
                     case 'reached_activation_limit':
                         setTip(
-                            <Box className='text-red-500'>
-                                <Trans i18nKey="This license key has reached the activation limit, <a>click here</a> to manage license and devices to deactivate old devices."
-                                    components={{ a: <a href={`https://chatboxai.app/redirect_app/manage_license/${language}`} target='_blank' rel='noreferrer' /> }}
+                            <Box className="text-red-500">
+                                <Trans
+                                    i18nKey="This license key has reached the activation limit, <a>click here</a> to manage license and devices to deactivate old devices."
+                                    components={{
+                                        a: (
+                                            <a
+                                                href={`https://chatboxai.app/redirect_app/manage_license/${language}`}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                            />
+                                        ),
+                                    }}
                                 />
                             </Box>
                         )
-                        break;
+                        break
                     case 'not_found':
                         setTip(
-                            <Box className='text-red-500'>
-                                {t('License not found, please check your license key')}
-                            </Box>
+                            <Box className="text-red-500">{t('License not found, please check your license key')}</Box>
                         )
-                        break;
+                        break
                     case 'expired':
                         setTip(
-                            <Box className='text-red-500'>
-                                {t('License expired, please check your license key')}
-                            </Box>
+                            <Box className="text-red-500">{t('License expired, please check your license key')}</Box>
                         )
-                        break;
+                        break
                 }
             }
         } catch (e) {
             setTip(
-                <Box className='text-red-500'>
+                <Box className="text-red-500">
                     {t('Failed to activate license, please check your license key and network connection')}
                     <br />
                     {(e as any).message}
@@ -89,30 +94,26 @@ export default function ChatboxAISetting(props: ModelConfigProps) {
                     disabled={activated}
                 />
                 <Box>
-                    <ButtonGroup
-                        disabled={loading}
-                        sx={{ display: 'block', marginBottom: '15px' }}
-                    >
-                        {
-                            activated && (
-                                <>
-                                    <span className='text-green-700 text-xs mr-2'>{t('License Activated')}</span>
-                                    <Button variant='text' onClick={() => {
+                    <ButtonGroup disabled={loading} sx={{ display: 'block', marginBottom: '15px' }}>
+                        {activated && (
+                            <>
+                                <span className="text-green-700 text-xs mr-2">{t('License Activated')}</span>
+                                <Button
+                                    variant="text"
+                                    onClick={() => {
                                         premiumActions.deactivate()
                                         trackingEvent('click_deactivate_license_button', { event_category: 'user' })
-                                    }}>
-                                        {t('clean')}({t('Deactivate')})
-                                    </Button>
-                                </>
-                            )
-                        }
-                        {
-                            !activated && (
-                                <Button variant={settingsEdit.licenseKey ? 'outlined' : "text"} onClick={activate}>
-                                    {loading ? t('Activating...') : t('Activate License')}
+                                    }}
+                                >
+                                    {t('clean')}({t('Deactivate')})
                                 </Button>
-                            )
-                        }
+                            </>
+                        )}
+                        {!activated && (
+                            <Button variant={settingsEdit.licenseKey ? 'outlined' : 'text'} onClick={activate}>
+                                {loading ? t('Activating...') : t('Activate License')}
+                            </Button>
+                        )}
                     </ButtonGroup>
                 </Box>
                 {activated && (
@@ -128,25 +129,21 @@ export default function ChatboxAISetting(props: ModelConfigProps) {
 }
 
 // 详细信息卡片
-function DetailCard(props: { licenseKey?: string, activated: boolean }) {
+function DetailCard(props: { licenseKey?: string; activated: boolean }) {
     const { licenseKey, activated } = props
     const { t } = useTranslation()
     return (
         <Card sx={{ marginTop: '20px', padding: '10px 14px' }} elevation={3}>
-            {
-                activated && (
-                    <Box>
-                        <Box className='mb-2'>
-                            <ActivedButtonGroup />
-                        </Box>
-                        <LicenseDetail licenseKey={licenseKey} />
+            {activated && (
+                <Box>
+                    <Box className="mb-2">
+                        <ActivedButtonGroup />
                     </Box>
-                )
-            }
-            {
-                !activated && (<InactivedButtonGroup />)
-            }
-            <Box className='mt-2' sx={{ opacity: activated ? '0.5' : undefined }}>
+                    <LicenseDetail licenseKey={licenseKey} />
+                </Box>
+            )}
+            {!activated && <InactivedButtonGroup />}
+            <Box className="mt-2" sx={{ opacity: activated ? '0.5' : undefined }}>
                 <Typography>
                     {t('Chatbox AI offers a user-friendly AI solution to help you enhance productivity')}
                 </Typography>
@@ -155,15 +152,13 @@ function DetailCard(props: { licenseKey?: string, activated: boolean }) {
                         t('Smartest AI-Powered Services for Rapid Access'),
                         t('Vision, Drawing, File Understanding and more'),
                         t('Hassle-free setup'),
-                        t('Ideal for work and study')
-                    ].map(
-                        (item) => (
-                            <Box key={item} sx={{ display: 'flex', margin: '4px 0' }}>
-                                <CheckCircleOutlineIcon color={activated ? 'success' : 'action'} />
-                                <b style={{ marginLeft: '5px' }}>{item}</b>
-                            </Box>
-                        )
-                    )}
+                        t('Ideal for work and study'),
+                    ].map((item) => (
+                        <Box key={item} sx={{ display: 'flex', margin: '4px 0' }}>
+                            <CheckCircleOutlineIcon color={activated ? 'success' : 'action'} />
+                            <b style={{ marginLeft: '5px' }}>{item}</b>
+                        </Box>
+                    ))}
                 </Box>
             </Box>
         </Card>
@@ -186,7 +181,7 @@ function ActivedButtonGroup() {
                 {t('Manage License and Devices')}
             </Button>
             <Button
-                variant='outlined'
+                variant="outlined"
                 // color='warning'
                 sx={{ marginRight: '10px' }}
                 onClick={() => {
@@ -240,32 +235,37 @@ function InactivedButtonGroup() {
 }
 
 function BorderLinearProgress(props: LinearProgressProps) {
-    return (<_BorderLinearProgress variant="determinate" {...props}
-        color={
-            props.value !== undefined && props.value <= 10
-                ? 'error'
-                : props.value !== undefined && props.value <= 20 ? 'warning' : 'inherit'
-        }
-    />)
+    return (
+        <_BorderLinearProgress
+            variant="determinate"
+            {...props}
+            color={
+                props.value !== undefined && props.value <= 10
+                    ? 'error'
+                    : props.value !== undefined && props.value <= 20
+                    ? 'warning'
+                    : 'inherit'
+            }
+        />
+    )
 }
 
 const _BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
     height: 5,
     borderRadius: 5,
-    [`&.${linearProgressClasses.colorPrimary}`]: {
-    },
+    [`&.${linearProgressClasses.colorPrimary}`]: {},
     [`& .${linearProgressClasses.bar}`]: {
         borderRadius: 5,
     },
-}));
+}))
 
 function LicenseDetail(props: { licenseKey?: string }) {
     const { licenseKey } = props
     const { t } = useTranslation()
-    const [expanded, setExpanded] = useState<boolean>(false);
+    const [expanded, setExpanded] = useState<boolean>(false)
     const [licenseDetail, setLicenseDetail] = useState<ChatboxAILicenseDetail | null>(null)
     const onChange = (event: React.SyntheticEvent, newExpanded: boolean) => {
-        setExpanded(newExpanded);
+        setExpanded(newExpanded)
         if (!newExpanded) {
             setLicenseDetail(null)
             return
@@ -282,91 +282,87 @@ function LicenseDetail(props: { licenseKey?: string }) {
         })
     }
     return (
-        <Accordion expanded={expanded} onChange={onChange} className='mb-4'>
+        <Accordion expanded={expanded} onChange={onChange} className="mb-4">
             <AccordionSummary>
                 <div>
-                    <span className='font-bold text-green-700 block'>
-                        {t('License Activated')}!
-                    </span>
-                    <span className='opacity-50 text-xs font-light block'>
+                    <span className="font-bold text-green-700 block">{t('License Activated')}!</span>
+                    <span className="opacity-50 text-xs font-light block">
                         {t('Click to view license details and quota usage')}
                     </span>
                 </div>
             </AccordionSummary>
             <AccordionDetails>
-                {
-                    licenseDetail ? (
-                        <>
-                            <Box className='grid grid-cols-2'>
-                                <Tooltip title={`${(licenseDetail.remaining_quota_35 * 100).toFixed(2)} %`}>
-                                    <Box className='mr-4 mb-4' >
-                                        <Typography className=''>
-                                            {t('Chatbox AI 3.5 Quota')}
-                                        </Typography>
-                                        <BorderLinearProgress className='mt-1' variant="determinate"
-                                            value={Math.floor(licenseDetail.remaining_quota_35 * 100)} />
-                                    </Box>
-                                </Tooltip>
-                                <Tooltip title={`${(licenseDetail.remaining_quota_4 * 100).toFixed(2)} %`}>
-                                    <Box className='mr-4 mb-4' >
-                                        <Typography className=''>
-                                            {t('Chatbox AI 4 Quota')}
-                                        </Typography>
-                                        <BorderLinearProgress className='mt-1' variant="determinate"
-                                            value={Math.floor(licenseDetail.remaining_quota_4 * 100)} />
-                                    </Box>
-                                </Tooltip>
-                                <Tooltip title={`${licenseDetail.image_total_quota - licenseDetail.image_used_count} / ${licenseDetail.image_total_quota}`}>
-                                    <Box className='mr-4 mb-4' >
-                                        <Typography >
-                                            {t('Chatbox AI Image Quota')}
-                                        </Typography>
-                                        <BorderLinearProgress className='mt-1' variant="determinate"
-                                            value={Math.floor(licenseDetail.remaining_quota_image * 100)} />
-                                    </Box>
-                                </Tooltip>
-                            </Box>
-                            <Box className='grid grid-cols-2'>
-                                <Box className='mr-4 mb-4' >
-                                    <Typography className=''>
-                                        {t('Quota Reset')}
-                                    </Typography>
-                                    <Typography className=''><span className='font-bold'>{
-                                        new Date(licenseDetail.token_refreshed_time).toLocaleDateString()
-                                    }</span></Typography>
+                {licenseDetail ? (
+                    <>
+                        <Box className="grid grid-cols-2">
+                            <Tooltip title={`${(licenseDetail.remaining_quota_35 * 100).toFixed(2)} %`}>
+                                <Box className="mr-4 mb-4">
+                                    <Typography className="">{t('Chatbox AI 3.5 Quota')}</Typography>
+                                    <BorderLinearProgress
+                                        className="mt-1"
+                                        variant="determinate"
+                                        value={Math.floor(licenseDetail.remaining_quota_35 * 100)}
+                                    />
                                 </Box>
-                                {
-                                    licenseDetail.token_expire_time && (
-                                        <Box className='mr-4 mb-4' >
-                                            <Typography className=''>
-                                                {t('License Expiry')}
-                                            </Typography>
-                                            <Typography className=''><span className='font-bold'>{
-                                                new Date(licenseDetail.token_expire_time).toLocaleDateString()
-                                            }</span></Typography>
-                                        </Box>
-                                    )
-                                }
-                                <Box className='mr-4 mb-4' >
-                                    <Typography className=''>
-                                        {t('License Plan Overview')}
-                                    </Typography>
-                                    <Typography>
-                                        <span className='font-bold'>
-                                            {licenseDetail.name}
+                            </Tooltip>
+                            <Tooltip title={`${(licenseDetail.remaining_quota_4 * 100).toFixed(2)} %`}>
+                                <Box className="mr-4 mb-4">
+                                    <Typography className="">{t('Chatbox AI 4 Quota')}</Typography>
+                                    <BorderLinearProgress
+                                        className="mt-1"
+                                        variant="determinate"
+                                        value={Math.floor(licenseDetail.remaining_quota_4 * 100)}
+                                    />
+                                </Box>
+                            </Tooltip>
+                            <Tooltip
+                                title={`${licenseDetail.image_total_quota - licenseDetail.image_used_count} / ${
+                                    licenseDetail.image_total_quota
+                                }`}
+                            >
+                                <Box className="mr-4 mb-4">
+                                    <Typography>{t('Chatbox AI Image Quota')}</Typography>
+                                    <BorderLinearProgress
+                                        className="mt-1"
+                                        variant="determinate"
+                                        value={Math.floor(licenseDetail.remaining_quota_image * 100)}
+                                    />
+                                </Box>
+                            </Tooltip>
+                        </Box>
+                        <Box className="grid grid-cols-2">
+                            <Box className="mr-4 mb-4">
+                                <Typography className="">{t('Quota Reset')}</Typography>
+                                <Typography className="">
+                                    <span className="font-bold">
+                                        {new Date(licenseDetail.token_refreshed_time).toLocaleDateString()}
+                                    </span>
+                                </Typography>
+                            </Box>
+                            {licenseDetail.token_expire_time && (
+                                <Box className="mr-4 mb-4">
+                                    <Typography className="">{t('License Expiry')}</Typography>
+                                    <Typography className="">
+                                        <span className="font-bold">
+                                            {new Date(licenseDetail.token_expire_time).toLocaleDateString()}
                                         </span>
                                     </Typography>
                                 </Box>
+                            )}
+                            <Box className="mr-4 mb-4">
+                                <Typography className="">{t('License Plan Overview')}</Typography>
+                                <Typography>
+                                    <span className="font-bold">{licenseDetail.name}</span>
+                                </Typography>
                             </Box>
-                        </>
-                    ) : (
-                        <Box className='flex items-center justify-center'>
-                            <CircularProgress />
                         </Box>
-
-                    )
-                }
+                    </>
+                ) : (
+                    <Box className="flex items-center justify-center">
+                        <CircularProgress />
+                    </Box>
+                )}
             </AccordionDetails>
         </Accordion>
     )
-}
\ No newline at end of file
+}
diff --git a/src/renderer/pages/SettingDialog/DisplaySettingTab.tsx b/src/renderer/pages/SettingDialog/DisplaySettingTab.tsx
index 65d8291d..1bc46e19 100644
--- a/src/renderer/pages/SettingDialog/DisplaySettingTab.tsx
+++ b/src/renderer/pages/SettingDialog/DisplaySettingTab.tsx
@@ -15,12 +15,12 @@ export default function DisplaySettingTab(props: {
     return (
         <Box>
             <SimpleSelect
-                label={(
+                label={
                     <span className="inline-flex items-center justify-center">
                         <TranslateIcon fontSize="small" />
                         {t('language')}
                     </span>
-                )}
+                }
                 value={settingsEdit.language}
                 onChange={(language) => setSettingsEdit({ ...settingsEdit, language: language })}
                 options={languages.map((language) => ({ value: language, label: languageNameMap[language] }))}
diff --git a/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
index f874f83a..2bbb793f 100644
--- a/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
+++ b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
@@ -36,7 +36,7 @@ export default function FeatherlessAISetting(props: ModelConfigProps) {
                     variant="outlined"
                     value={settingsEdit.apiHost}
                     placeholder="https://api.featherless.ai"
-                    defaultValue='https://api.featherless.ai'
+                    defaultValue="https://api.featherless.ai"
                     onValueChange={(value) => {
                         value = value.trim()
                         if (value.length > 4 && !value.startsWith('http')) {
diff --git a/src/renderer/pages/SettingDialog/ModelSettingTab.tsx b/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
index 2d8d10b6..7ead6fa8 100644
--- a/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
+++ b/src/renderer/pages/SettingDialog/ModelSettingTab.tsx
@@ -18,10 +18,7 @@ export default function ModelSettingTab(props: ModelConfigProps) {
     const { settingsEdit, setSettingsEdit } = props
     return (
         <Box>
-            <AIProviderSelect
-                settings={settingsEdit}
-                setSettings={setSettingsEdit}
-            />
+            <AIProviderSelect settings={settingsEdit} setSettings={setSettingsEdit} />
             <Divider sx={{ marginTop: '10px', marginBottom: '24px' }} />
             {settingsEdit.aiProvider === ModelProvider.OpenAI && (
                 <OpenAISetting settingsEdit={settingsEdit} setSettingsEdit={setSettingsEdit} />
@@ -53,7 +50,7 @@ export default function ModelSettingTab(props: ModelConfigProps) {
                     />
                 </>
             )}
-             {settingsEdit.aiProvider === ModelProvider.SiliconFlow && (
+            {settingsEdit.aiProvider === ModelProvider.SiliconFlow && (
                 <SiliconFlowSetting settingsEdit={settingsEdit} setSettingsEdit={setSettingsEdit} />
             )}
         </Box>
diff --git a/src/renderer/pages/SettingDialog/OllamaSetting.tsx b/src/renderer/pages/SettingDialog/OllamaSetting.tsx
index 400cd4f7..4a40f400 100644
--- a/src/renderer/pages/SettingDialog/OllamaSetting.tsx
+++ b/src/renderer/pages/SettingDialog/OllamaSetting.tsx
@@ -20,27 +20,33 @@ export function OllamaHostInput(props: {
             <TextFieldReset
                 label={t('api host')}
                 value={props.ollamaHost}
-                defaultValue='http://localhost:11434'
+                defaultValue="http://localhost:11434"
                 onValueChange={props.setOllamaHost}
                 fullWidth
                 className={props.className}
             />
-            {
-                props.ollamaHost
-                && props.ollamaHost.length > 16
-                && !props.ollamaHost.includes('localhost')
-                && !props.ollamaHost.includes('127.0.0.1') && (
-                    <Alert icon={false} severity='info' className='my-4'>
-                        <Trans i18nKey='Please ensure that the Remote Ollama Service is able to connect remotely. For more details, refer to <a>this tutorial</a>.'
+            {props.ollamaHost &&
+                props.ollamaHost.length > 16 &&
+                !props.ollamaHost.includes('localhost') &&
+                !props.ollamaHost.includes('127.0.0.1') && (
+                    <Alert icon={false} severity="info" className="my-4">
+                        <Trans
+                            i18nKey="Please ensure that the Remote Ollama Service is able to connect remotely. For more details, refer to <a>this tutorial</a>."
                             components={{
-                                a: <a className='cursor-pointer font-bold' onClick={() => {
-                                    platform.openLink(`https://chatboxai.app/redirect_app/ollama_guide/${language}`)
-                                }}></a>,
+                                a: (
+                                    <a
+                                        className="cursor-pointer font-bold"
+                                        onClick={() => {
+                                            platform.openLink(
+                                                `https://chatboxai.app/redirect_app/ollama_guide/${language}`
+                                            )
+                                        }}
+                                    ></a>
+                                ),
                             }}
                         />
                     </Alert>
-                )
-            }
+                )}
         </>
     )
 }
@@ -73,9 +79,7 @@ export function OllamaModelSelect(props: {
                 label={t('model')}
                 id="ollama-model-select"
                 value={props.ollamaModel}
-                onChange={(e) =>
-                    props.setOlamaModel(e.target.value)
-                }
+                onChange={(e) => props.setOlamaModel(e.target.value)}
             >
                 {models.map((model) => (
                     <MenuItem key={model} value={model}>
diff --git a/src/renderer/pages/SettingDialog/OpenAISetting.tsx b/src/renderer/pages/SettingDialog/OpenAISetting.tsx
index 137cc39a..e6287101 100644
--- a/src/renderer/pages/SettingDialog/OpenAISetting.tsx
+++ b/src/renderer/pages/SettingDialog/OpenAISetting.tsx
@@ -36,7 +36,7 @@ export default function OpenAISetting(props: ModelConfigProps) {
                     variant="outlined"
                     value={settingsEdit.apiHost}
                     placeholder="https://api.openai.com"
-                    defaultValue='https://api.openai.com'
+                    defaultValue="https://api.openai.com"
                     onValueChange={(value) => {
                         value = value.trim()
                         if (value.length > 4 && !value.startsWith('http')) {
diff --git a/src/renderer/setup/ga_init.ts b/src/renderer/setup/ga_init.ts
index 8d9e2101..2636d650 100644
--- a/src/renderer/setup/ga_init.ts
+++ b/src/renderer/setup/ga_init.ts
@@ -1,11 +1,10 @@
 import platform from '@/packages/platform'
-
 ;(() => {
     try {
         // ONLY enable tracking when reporting and tracking is allowed by the user
         // Has already been checked in the main process, no need to check again here.
         platform.initTracking()
-    } catch(e) {
+    } catch (e) {
         console.error(e)
     }
-})();
+})()
diff --git a/src/renderer/setup/sentry_init.ts b/src/renderer/setup/sentry_init.ts
index 012fd69e..ea574512 100644
--- a/src/renderer/setup/sentry_init.ts
+++ b/src/renderer/setup/sentry_init.ts
@@ -1,11 +1,10 @@
 import * as Sentry from '@sentry/react'
 import platform from '../packages/platform'
-
 ;(async () => {
     const settings = await platform.getSettings()
 
     // ONLY enable Sentry when reporting and tracking is allowed by the user
-    if (! settings.allowReportingAndTracking) {
+    if (!settings.allowReportingAndTracking) {
         return
     }
 
diff --git a/src/renderer/storage/StoreStorage.ts b/src/renderer/storage/StoreStorage.ts
index a3a0be9a..841fccd5 100644
--- a/src/renderer/storage/StoreStorage.ts
+++ b/src/renderer/storage/StoreStorage.ts
@@ -19,7 +19,7 @@ export default class StoreStorage extends BaseStorage {
         let value: T = await super.getItem(key, initialValue)
 
         if (key === StorageKey.ChatSessions && value === initialValue) {
-            const lang = await platform.getLocale().catch(e => 'en')
+            const lang = await platform.getLocale().catch((e) => 'en')
             if (lang.startsWith('zh')) {
                 value = defaultSessionsForCN as T
             } else {
diff --git a/src/renderer/stores/atoms.ts b/src/renderer/stores/atoms.ts
index b3ff1c87..6e7d21b8 100644
--- a/src/renderer/stores/atoms.ts
+++ b/src/renderer/stores/atoms.ts
@@ -1,6 +1,5 @@
 import { atom, SetStateAction } from 'jotai'
-import { Session, Toast, Settings, CopilotDetail, Message, SettingWindowTab
-} from '../../shared/types'
+import { Session, Toast, Settings, CopilotDetail, Message, SettingWindowTab } from '../../shared/types'
 import { selectAtom, atomWithStorage } from 'jotai/utils'
 import { focusAtom } from 'jotai-optics'
 import * as defaults from '../../shared/defaults'
@@ -88,7 +87,7 @@ export const currentSessionAtom = atom((get) => {
     const sessions = get(sessionsAtom)
     let current = sessions.find((session) => session.id === id)
     if (!current) {
-        return sessions[sessions.length - 1]    // fallback to the last session
+        return sessions[sessions.length - 1] // fallback to the last session
     }
     return current
 })
@@ -96,7 +95,6 @@ export const currentSessionAtom = atom((get) => {
 export const currentSessionNameAtom = selectAtom(currentSessionAtom, (s) => s.name)
 export const currsentSessionPicUrlAtom = selectAtom(currentSessionAtom, (s) => s.picUrl)
 
-
 export const currentMessageListAtom = selectAtom(currentSessionAtom, (s) => {
     let messageContext: Message[] = []
     if (s.messages) {
diff --git a/src/renderer/stores/premiumActions.ts b/src/renderer/stores/premiumActions.ts
index 92124ac8..343d1033 100644
--- a/src/renderer/stores/premiumActions.ts
+++ b/src/renderer/stores/premiumActions.ts
@@ -11,7 +11,7 @@ import { ModelProvider, Settings } from 'src/shared/types'
 export function useAutoValidate() {
     const [settings, setSettings] = useAtom(settingsAtom)
     const clearValidatedData = () => {
-        setSettings(settings => ({
+        setSettings((settings) => ({
             ...settings,
             licenseKey: '',
             licenseInstances: omit(settings.licenseInstances, settings.licenseKey || ''),
@@ -19,7 +19,7 @@ export function useAutoValidate() {
         }))
     }
     useEffect(() => {
-        ; (async () => {
+        ;(async () => {
             if (!settings.licenseKey || !settings.licenseInstances) {
                 return
             }
@@ -38,11 +38,7 @@ export function useAutoValidate() {
                     return
                 }
             } catch (err) {
-                if (
-                    err instanceof FetchError
-                    && err.status
-                    && [401, 403, 404].includes(err.status)
-                ) {
+                if (err instanceof FetchError && err.status && [401, 403, 404].includes(err.status)) {
                     clearValidatedData()
                 } else {
                     Sentry.captureException(err)
diff --git a/src/renderer/stores/sessionActions.ts b/src/renderer/stores/sessionActions.ts
index 2312dbda..5e050505 100644
--- a/src/renderer/stores/sessionActions.ts
+++ b/src/renderer/stores/sessionActions.ts
@@ -1,10 +1,5 @@
 import { getDefaultStore } from 'jotai'
-import {
-    Settings,
-    createMessage,
-    Message,
-    Session,
-} from '../../shared/types'
+import { Settings, createMessage, Message, Session } from '../../shared/types'
 import * as atoms from './atoms'
 import * as promptFormat from '../packages/prompts'
 import * as Sentry from '@sentry/react'
@@ -12,7 +7,13 @@ import { v4 as uuidv4 } from 'uuid'
 import * as defaults from '../../shared/defaults'
 import * as scrollActions from './scrollActions'
 import { getModel, getModelDisplayName } from '@/packages/models'
-import { AIProviderNoImplementedPaintError, NetworkError, ApiError, BaseError, ChatboxAIAPIError } from '@/packages/models/errors'
+import {
+    AIProviderNoImplementedPaintError,
+    NetworkError,
+    ApiError,
+    BaseError,
+    ChatboxAIAPIError,
+} from '@/packages/models/errors'
 import platform from '../packages/platform'
 import { throttle } from 'lodash'
 import { countWord } from '@/packages/word-count'
@@ -197,7 +198,7 @@ export async function generate(sessionId: string, targetMsg: Message) {
             case 'chat':
             case undefined:
                 const promptMsgs = genMessageContext(settings, messages.slice(0, targetMsgIx))
-                const throttledModifyMessage = throttle(({ text, cancel }: { text: string, cancel: () => void }) => {
+                const throttledModifyMessage = throttle(({ text, cancel }: { text: string; cancel: () => void }) => {
                     targetMsg = { ...targetMsg, content: text, cancel }
                     modifyMessage(sessionId, targetMsg)
                 }, 100)
@@ -217,7 +218,13 @@ export async function generate(sessionId: string, targetMsg: Message) {
         if (!(err instanceof Error)) {
             err = new Error(`${err}`)
         }
-        if (!(err instanceof ApiError || err instanceof NetworkError || err instanceof AIProviderNoImplementedPaintError)) {
+        if (
+            !(
+                err instanceof ApiError ||
+                err instanceof NetworkError ||
+                err instanceof AIProviderNoImplementedPaintError
+            )
+        ) {
             Sentry.captureException(err) // unexpected error should be reported
         }
         let errorCode: number | undefined = undefined
@@ -250,9 +257,8 @@ async function _generateName(sessionId: string, modifyName: (sessionId: string,
     const configs = await platform.getConfig()
     try {
         const model = getModel(settings, configs)
-        let name = await model.chat(promptFormat.nameConversation(
-            session.messages.filter(m => m.role !== 'system')
-                .slice(0, 4))
+        let name = await model.chat(
+            promptFormat.nameConversation(session.messages.filter((m) => m.role !== 'system').slice(0, 4))
         )
         name = name.replace(/['"“”]/g, '')
         name = name.slice(0, 10)
@@ -269,9 +275,7 @@ export async function generateName(sessionId: string) {
 }
 
 function genMessageContext(settings: Settings, msgs: Message[]) {
-    const {
-        openaiMaxContextMessageCount
-    } = settings
+    const { openaiMaxContextMessageCount } = settings
     if (msgs.length === 0) {
         throw new Error('No messages to replay')
     }
@@ -289,10 +293,7 @@ function genMessageContext(settings: Settings, msgs: Message[]) {
         const size = estimateTokensFromMessages([msg]) + 20 // 20 is a rough estimation of the overhead of the prompt
         if (settings.aiProvider === 'openai') {
         }
-        if (
-            openaiMaxContextMessageCount <= 20 &&
-            prompts.length >= openaiMaxContextMessageCount + 1
-        ) {
+        if (openaiMaxContextMessageCount <= 20 && prompts.length >= openaiMaxContextMessageCount + 1) {
             break
         }
         prompts = [msg, ...prompts]
diff --git a/src/shared/defaults.ts b/src/shared/defaults.ts
index a930835c..fc8ee87a 100644
--- a/src/shared/defaults.ts
+++ b/src/shared/defaults.ts
@@ -45,9 +45,9 @@ export function settings(): Settings {
         siliconCloudKey: '',
         siliconCloudModel: 'THUDM/glm-4-9b-chat',
 
-        featherlessKey:'', 
-        featherlessApiHost: '', 
-        featherlessApiPath: '', 
+        featherlessKey: '',
+        featherlessApiHost: '',
+        featherlessApiPath: '',
         featherlessModel: 'custom-model',
     }
 }
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 1c04c069..c2fc722b 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -66,7 +66,7 @@ export enum ModelProvider {
     OpenAI = 'openai',
     Ollama = 'ollama',
     SiliconFlow = 'silicon-flow',
-    FeatherlessAI = "FeatherlessAI",
+    FeatherlessAI = 'FeatherlessAI',
 }
 
 export interface ModelSettings {
@@ -77,7 +77,7 @@ export interface ModelSettings {
     apiHost: string
     model: Model | 'custom-model'
     openaiCustomModel?: string
-    
+
     // featherlessai
     featherlessKey: string
     featherlessApiHost: string

From e44b52ae7f05ff767ded5dac7f1512a1edb8bf61 Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:22:37 -0400
Subject: [PATCH 3/4] hotfix for model selection

---
 .../components/FeatherlessModelSelect.tsx     | 46 +++++++++
 src/renderer/packages/models/featherlessai.ts | 94 ++++++++-----------
 src/renderer/packages/models/index.ts         | 10 +-
 .../SettingDialog/FeatherlessAISetting.tsx    | 14 +--
 src/shared/types.ts                           |  3 +-
 5 files changed, 96 insertions(+), 71 deletions(-)
 create mode 100644 src/renderer/components/FeatherlessModelSelect.tsx

diff --git a/src/renderer/components/FeatherlessModelSelect.tsx b/src/renderer/components/FeatherlessModelSelect.tsx
new file mode 100644
index 00000000..24298f74
--- /dev/null
+++ b/src/renderer/components/FeatherlessModelSelect.tsx
@@ -0,0 +1,46 @@
+import { Select, MenuItem, FormControl, InputLabel, TextField } from '@mui/material'
+import { ModelSettings } from '../../shared/types'
+import { useTranslation } from 'react-i18next'
+import { models } from '../packages/models/featherlessai'
+
+export interface Props {
+    model: ModelSettings['featherlessModel']
+    featherlessCustomModel: ModelSettings['featherlessCustomModel']
+    onChange(model: ModelSettings['featherlessModel'], featherlessCustomModel: ModelSettings['featherlessCustomModel']): void
+    className?: string
+}
+
+export default function FeatherlessModelSelect(props: Props) {
+    const { t } = useTranslation()
+    return (
+        <FormControl fullWidth variant="outlined" margin="dense" className={props.className}>
+            <InputLabel htmlFor="model-select">{t('model')}</InputLabel>
+            <Select
+                label={t('model')}
+                id="model-select"
+                value={props.model}
+                onChange={(e) => props.onChange(e.target.value as ModelSettings['featherlessModel'], props.model)}
+            >
+                {models.map((model) => (
+                    <MenuItem key={model} value={model}>
+                        {model}
+                    </MenuItem>
+                ))}
+                <MenuItem key="custom-model" value={'custom-model'}>
+                    {t('Custom Model')}
+                </MenuItem>
+            </Select>
+            {props.model === 'custom-model' && (
+                <TextField
+                    margin="dense"
+                    label={t('Custom Model Name')}
+                    type="text"
+                    fullWidth
+                    variant="outlined"
+                    value={props.featherlessCustomModel || ''}
+                    onChange={(e) => props.onChange(props.model, e.target.value.trim())}
+                />
+            )}
+        </FormControl>
+    )
+}
diff --git a/src/renderer/packages/models/featherlessai.ts b/src/renderer/packages/models/featherlessai.ts
index db724be1..601ef3d4 100644
--- a/src/renderer/packages/models/featherlessai.ts
+++ b/src/renderer/packages/models/featherlessai.ts
@@ -1,61 +1,45 @@
 import { Message } from 'src/shared/types'
-import { ApiError, ChatboxAIAPIError } from './errors'
+import { ApiError } from './errors'
 import Base, { onResultChange } from './base'
 
 interface Options {
     featherlessKey: string
     apiHost: string
     apiPath?: string
-    model: Model | 'custom-model'
-    openaiCustomModel?: string
+    featherlessModel: Model | 'custom-model'
+    featherlessCustomModel?: string
     temperature: number
     topP: number
 }
 
 export default class FeatherlessAI extends Base {
     public name = 'FeatherlessAI'
-
     public options: Options
+
     constructor(options: Options) {
         super()
         this.options = options
-        if (this.options.apiHost && this.options.apiHost.trim().length === 0) {
-            this.options.apiHost = 'https://api.featerless.ai'
-        }
-        if (this.options.apiHost && this.options.apiHost.startsWith('https://openrouter.ai/api/v1')) {
-            this.options.apiHost = 'https://openrouter.ai/api'
-        }
-        if (this.options.apiPath && !this.options.apiPath.startsWith('/')) {
-            this.options.apiPath = '/' + this.options.apiPath
+        this.options.apiHost = 'https://api.featherless.ai' // Hardcoded API host
+
+        // Validate the model before proceeding to ensure only FeatherlessAI models are used
+        if (!this.isValidModel(this.options.featherlessModel)) {
+            throw new Error(`Invalid model: ${this.options.featherlessModel}. Only FeatherlessAI models are supported.`);
         }
     }
 
-    async callChatCompletion(
-        rawMessages: Message[],
-        signal?: AbortSignal,
-        onResultChange?: onResultChange
-    ): Promise<string> {
-        try {
-            return await this._callChatCompletion(rawMessages, signal, onResultChange)
-        } catch (e) {
-            if (
-                e instanceof ApiError &&
-                e.message.includes('Invalid content type. image_url is only supported by certain models.')
-            ) {
-                throw ChatboxAIAPIError.fromCodeName('model_not_support_image', 'model_not_support_image')
-            }
-            throw e
-        }
+    // Ensure the model is from FeatherlessAI
+    isValidModel(model: string): boolean {
+        return model in featherlessModelConfigs || model === 'custom-model';
     }
 
-    async _callChatCompletion(
+    async callChatCompletion(
         rawMessages: Message[],
         signal?: AbortSignal,
         onResultChange?: onResultChange
     ): Promise<string> {
-        let messages = await populateOpenAIMessage(rawMessages, this.options.model)
+        let messages = await populateFeatherlessMessage(rawMessages, this.options.featherlessModel)
 
-        const model = this.options.model === 'custom-model' ? this.options.openaiCustomModel || '' : this.options.model
+        const model = this.options.featherlessModel === 'custom-model' ? this.options.featherlessCustomModel || '' : this.options.featherlessModel
         messages = injectModelSystemPrompt(model, messages)
 
         const apiPath = this.options.apiPath || '/v1/chat/completions'
@@ -66,9 +50,9 @@ export default class FeatherlessAI extends Base {
                 messages,
                 model,
                 max_tokens:
-                    this.options.model === 'custom-model'
+                    this.options.featherlessModel === 'custom-model'
                         ? undefined
-                        : openaiModelConfigs[this.options.model].maxTokens,
+                        : featherlessModelConfigs[this.options.featherlessModel].maxTokens,
                 temperature: this.options.temperature,
                 top_p: this.options.topP,
                 stream: true,
@@ -82,7 +66,7 @@ export default class FeatherlessAI extends Base {
             }
             const data = JSON.parse(message)
             if (data.error) {
-                throw new ApiError(`Error from OpenAI: ${JSON.stringify(data)}`)
+                throw new ApiError(`Error from FeatherlessAI: ${JSON.stringify(data)}`)
             }
             const text = data.choices[0]?.delta?.content
             if (text !== undefined) {
@@ -99,41 +83,43 @@ export default class FeatherlessAI extends Base {
         const headers: Record<string, string> = {
             Authorization: `Bearer ${this.options.featherlessKey}`,
             'Content-Type': 'application/json',
-            'X-Title': 'chatbox',
-        }
-        if (this.options.apiHost.includes('openrouter.ai')) {
-            headers['HTTP-Referer'] = 'https://localhost:3000/'
         }
         return headers
     }
 }
-//todo: implement the following functions
-// Ref: https://platform.openai.com/docs/models/gpt-4
-export const openaiModelConfigs = {
-    'anthracite-org/magnum-v2-72b': {
-        maxTokens: 4096,
-        maxContextTokens: 4096,
-    },
+
+// Model configuration for FeatherlessAI
+export const featherlessModelConfigs = {
+    'anthracite-org/magnum-v2-72b': { maxTokens: 4096 },
+    'TheDrummer/Rocinante-12B-v1.1': { maxTokens: 4096 },
+    'MarinaraSpaghetti/NemoMix-Unleashed-12B': { maxTokens: 4096 },
+    'alpindale/magnum-72b-v1': { maxTokens: 4096 },
+    'alpindale/WizardLM-2-8x22B': { maxTokens: 4096 },
+    'Sao10K/L3-70B-Euryale-v2.1': { maxTokens: 4096 },
+    'Sao10K/L3-70B-Euryale-v2.2': { maxTokens: 4096 },
+    'TheDrummer/Rocinante-12B-v1': { maxTokens: 4096 },
+    'nothingiisreal/MN-12B-Starcannon-v3': { maxTokens: 4096 },
+    'PygmalionAI/mythalion-13b': { maxTokens: 4096 },
 }
-export type Model = keyof typeof openaiModelConfigs
-export const models = Array.from(Object.keys(openaiModelConfigs)).sort() as Model[]
+export type Model = keyof typeof featherlessModelConfigs
+export const models = Array.from(Object.keys(featherlessModelConfigs)).sort() as Model[]
 
-export async function populateOpenAIMessage(
+export async function populateFeatherlessMessage(
     rawMessages: Message[],
     model: Model | 'custom-model'
-): Promise<OpenAIMessage[]> {
-    return populateOpenAIMessageText(rawMessages)
+): Promise<FeatherlessMessage[]> {
+    return populateFeatherlessMessageText(rawMessages)
 }
 
-export async function populateOpenAIMessageText(rawMessages: Message[]): Promise<OpenAIMessage[]> {
-    const messages: OpenAIMessage[] = rawMessages.map((m) => ({
+export async function populateFeatherlessMessageText(rawMessages: Message[]): Promise<FeatherlessMessage[]> {
+    const messages: FeatherlessMessage[] = rawMessages.map((m) => ({
         role: m.role,
         content: m.content,
     }))
     return messages
 }
 
-export function injectModelSystemPrompt(model: string, messages: OpenAIMessage[]) {
+export function injectModelSystemPrompt(model: string, messages: FeatherlessMessage[]) {
     for (const message of messages) {
         if (message.role === 'system') {
             if (typeof message.content == 'string') {
@@ -145,7 +131,7 @@ export function injectModelSystemPrompt(model: string, messages: OpenAIMessage[]
     return messages
 }
 
-export interface OpenAIMessage {
+export interface FeatherlessMessage {
     role: 'system' | 'user' | 'assistant'
     content: string
     name?: string
diff --git a/src/renderer/packages/models/index.ts b/src/renderer/packages/models/index.ts
index fc7acfa0..b7094c66 100644
--- a/src/renderer/packages/models/index.ts
+++ b/src/renderer/packages/models/index.ts
@@ -74,15 +74,7 @@ export function getModelDisplayName(settings: Settings, sessionType: SessionType
             }
             return settings.model || 'unknown'
         case ModelProvider.FeatherlessAI:
-            if (settings.model === 'custom-model') {
-                let name = settings.featherlessCustomModel || ''
-                if (name.length >= 10) {
-                    name = name.slice(0, 10) + '...'
-                }
-                return `FeatherlessAI Custom Model (${name})`
-            }
-            return settings.model || 'unknown'
-
+            return `featherless (${settings.featherlessModel})`
         case ModelProvider.ChatboxAI:
             const model = settings.chatboxAIModel || 'chatboxai-3.5'
             return model.replace('chatboxai-', 'Chatbox AI ')
diff --git a/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
index 2bbb793f..7f509d6d 100644
--- a/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
+++ b/src/renderer/pages/SettingDialog/FeatherlessAISetting.tsx
@@ -6,7 +6,7 @@ import TemperatureSlider from '../../components/TemperatureSlider'
 import TopPSlider from '../../components/TopPSlider'
 import PasswordTextField from '../../components/PasswordTextField'
 import MaxContextMessageCountSlider from '../../components/MaxContextMessageCountSlider'
-import OpenAIModelSelect from '../../components/OpenAIModelSelect'
+import FeatherlessModelSelect from '../../components/FeatherlessModelSelect'
 import TextFieldReset from '@/components/TextFieldReset'
 
 interface ModelConfigProps {
@@ -49,15 +49,15 @@ export default function FeatherlessAISetting(props: ModelConfigProps) {
             <Accordion>
                 <AccordionSummary aria-controls="panel1a-content">
                     <Typography>
-                        {t('model')} & {t('token')}{' '}
+                        {t('featherlessModel')} & {t('token')}{' '}
                     </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                    <OpenAIModelSelect
-                        model={settingsEdit.model}
-                        openaiCustomModel={settingsEdit.featherlessCustomModel}
-                        onChange={(model, featherlessCustomModel) =>
-                            setSettingsEdit({ ...settingsEdit, model, featherlessCustomModel })
+                    <FeatherlessModelSelect
+                        model={settingsEdit.featherlessModel}
+                        featherlessCustomModel={settingsEdit.featherlessCustomModel}
+                        onChange={(featherlessModel, featherlessCustomModel) =>
+                            setSettingsEdit({ ...settingsEdit, featherlessModel, featherlessCustomModel })
                         }
                     />
 
diff --git a/src/shared/types.ts b/src/shared/types.ts
index c2fc722b..8627adee 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid'
 import { Model } from '../renderer/packages/models/openai'
+import {featherlessModelConfigs, Model as FeatherlessModel} from '../renderer/packages/models/featherlessai'
 import * as siliconflow from '../renderer/packages/models/siliconflow'
 
 export const MessageRoleEnum = {
@@ -82,7 +83,7 @@ export interface ModelSettings {
     featherlessKey: string
     featherlessApiHost: string
     featherlessApiPath: string
-    featherlessModel: Model | 'custom-model'
+    featherlessModel: FeatherlessModel | 'custom-model'
     featherlessCustomModel?: string
 
     // azure

From b817db2920d2dc62b5de74461b0ce4b21c9cf113 Mon Sep 17 00:00:00 2001
From: DarokCx <77368869+DarokCx@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:23:58 -0400
Subject: [PATCH 4/4] added models

---
 src/renderer/components/FeatherlessModelSelect.tsx | 5 ++++-
 src/renderer/packages/models/featherlessai.ts      | 9 ++++++---
 src/shared/types.ts                                | 2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/FeatherlessModelSelect.tsx b/src/renderer/components/FeatherlessModelSelect.tsx
index 24298f74..04e3c97d 100644
--- a/src/renderer/components/FeatherlessModelSelect.tsx
+++ b/src/renderer/components/FeatherlessModelSelect.tsx
@@ -6,7 +6,10 @@ import { models } from '../packages/models/featherlessai'
 export interface Props {
     model: ModelSettings['featherlessModel']
     featherlessCustomModel: ModelSettings['featherlessCustomModel']
-    onChange(model: ModelSettings['featherlessModel'], featherlessCustomModel: ModelSettings['featherlessCustomModel']): void
+    onChange(
+        model: ModelSettings['featherlessModel'],
+        featherlessCustomModel: ModelSettings['featherlessCustomModel']
+    ): void
     className?: string
 }
 
diff --git a/src/renderer/packages/models/featherlessai.ts b/src/renderer/packages/models/featherlessai.ts
index 601ef3d4..348003a2 100644
--- a/src/renderer/packages/models/featherlessai.ts
+++ b/src/renderer/packages/models/featherlessai.ts
@@ -23,13 +23,13 @@ export default class FeatherlessAI extends Base {
 
         // Validate the model before proceeding to ensure only FeatherlessAI models are used
         if (!this.isValidModel(this.options.featherlessModel)) {
-            throw new Error(`Invalid model: ${this.options.featherlessModel}. Only FeatherlessAI models are supported.`);
+            throw new Error(`Invalid model: ${this.options.featherlessModel}. Only FeatherlessAI models are supported.`)
         }
     }
 
     // Ensure the model is from FeatherlessAI
     isValidModel(model: string): boolean {
-        return model in featherlessModelConfigs || model === 'custom-model';
+        return model in featherlessModelConfigs || model === 'custom-model'
     }
 
     async callChatCompletion(
@@ -39,7 +39,10 @@ export default class FeatherlessAI extends Base {
     ): Promise<string> {
         let messages = await populateFeatherlessMessage(rawMessages, this.options.featherlessModel)
 
-        const model = this.options.featherlessModel === 'custom-model' ? this.options.featherlessCustomModel || '' : this.options.featherlessModel
+        const model =
+            this.options.featherlessModel === 'custom-model'
+                ? this.options.featherlessCustomModel || ''
+                : this.options.featherlessModel
         messages = injectModelSystemPrompt(model, messages)
 
         const apiPath = this.options.apiPath || '/v1/chat/completions'
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 8627adee..fbdac506 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid'
 import { Model } from '../renderer/packages/models/openai'
-import {featherlessModelConfigs, Model as FeatherlessModel} from '../renderer/packages/models/featherlessai'
+import { featherlessModelConfigs, Model as FeatherlessModel } from '../renderer/packages/models/featherlessai'
 import * as siliconflow from '../renderer/packages/models/siliconflow'
 
 export const MessageRoleEnum = {