From 5abf06c1b18e52cbd2156895970af34096095ab3 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 02:21:27 +0300
Subject: [PATCH 01/10] feat: re-organize settings dialog

---
 src/components/SettingDialog.tsx | 295 ++++++++++++++++++++++---------
 1 file changed, 214 insertions(+), 81 deletions(-)

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index f02dbd6..191b77b 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -1,9 +1,15 @@
 import {
   BeakerIcon,
+  ChatBubbleLeftEllipsisIcon,
+  ChatBubbleLeftRightIcon,
   ChatBubbleOvalLeftEllipsisIcon,
+  CircleStackIcon,
   Cog6ToothIcon,
+  CogIcon,
+  CpuChipIcon,
   FunnelIcon,
   HandRaisedIcon,
+  RocketLaunchIcon,
   SquaresPlusIcon,
 } from '@heroicons/react/24/outline';
 import { useState } from 'react';
@@ -16,7 +22,7 @@ import { useModals } from './ModalProvider';
 
 type SettKey = keyof typeof CONFIG_DEFAULT;
 
-const BASIC_KEYS: SettKey[] = [
+const GENERATION_KEYS: SettKey[] = [
   'temperature',
   'top_k',
   'top_p',
@@ -46,6 +52,8 @@ enum SettingInputType {
   LONG_INPUT,
   CHECKBOX,
   CUSTOM,
+  SECTION,
+  SPACE,
 }
 
 interface SettingFieldInput {
@@ -67,13 +75,29 @@ interface SettingFieldCustom {
 }
 
 interface SettingSection {
+  type: SettingInputType.SECTION;
+  label: string | React.ReactElement;
+}
+
+interface SettingSpace {
+  type: SettingInputType.SPACE;
+}
+
+interface SettingTab {
   title: React.ReactElement;
-  fields: (SettingFieldInput | SettingFieldCustom)[];
+  fields: (
+    | SettingFieldInput
+    | SettingFieldCustom
+    | SettingSection
+    | SettingSpace
+  )[];
 }
 
 const ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
+const TITLE_ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 
-const SETTING_SECTIONS: SettingSection[] = [
+const SETTING_TABS: SettingTab[] = [
+  /* General */
   {
     title: (
       <>
@@ -97,14 +121,27 @@ const SETTING_SECTIONS: SettingSection[] = [
         label: 'System Message (will be disabled if left empty)',
         key: 'systemMessage',
       },
-      ...BASIC_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
-      ),
+    ],
+  },
+
+  /* Conversations */
+  {
+    title: (
+      <>
+        <ChatBubbleLeftRightIcon className={ICON_CLASSNAME} />
+        Conversations
+      </>
+    ),
+    fields: [
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <ChatBubbleLeftEllipsisIcon className={TITLE_ICON_CLASSNAME} />
+            Chat
+          </>
+        ),
+      },
       {
         type: SettingInputType.SHORT_INPUT,
         label: 'Paste length to file',
@@ -115,52 +152,39 @@ const SETTING_SECTIONS: SettingSection[] = [
         label: 'Parse PDF as image instead of text',
         key: 'pdfAsImage',
       },
-    ],
-  },
-  {
-    title: (
-      <>
-        <FunnelIcon className={ICON_CLASSNAME} />
-        Samplers
-      </>
-    ),
-    fields: [
+
+      /* Performance */
       {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Samplers queue',
-        key: 'samplers',
+        type: SettingInputType.SPACE,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <RocketLaunchIcon className={ICON_CLASSNAME} />
+            Performance
+          </>
+        ),
+      },
+      {
+        type: SettingInputType.CHECKBOX,
+        label: 'Show performance metrics',
+        key: 'showTokensPerSecond',
+      },
+
+      /* Reasoning */
+      {
+        type: SettingInputType.SPACE,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <ChatBubbleOvalLeftEllipsisIcon className={ICON_CLASSNAME} />
+            Reasoning
+          </>
+        ),
       },
-      ...SAMPLER_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
-      ),
-    ],
-  },
-  {
-    title: (
-      <>
-        <HandRaisedIcon className={ICON_CLASSNAME} />
-        Penalties
-      </>
-    ),
-    fields: PENALTY_KEYS.map((key) => ({
-      type: SettingInputType.SHORT_INPUT,
-      label: key,
-      key,
-    })),
-  },
-  {
-    title: (
-      <>
-        <ChatBubbleOvalLeftEllipsisIcon className={ICON_CLASSNAME} />
-        Reasoning
-      </>
-    ),
-    fields: [
       {
         type: SettingInputType.CHECKBOX,
         label: 'Expand thought process by default when generating messages',
@@ -174,11 +198,13 @@ const SETTING_SECTIONS: SettingSection[] = [
       },
     ],
   },
+
+  /* Import/Export */
   {
     title: (
       <>
-        <SquaresPlusIcon className={ICON_CLASSNAME} />
-        Advanced
+        <CircleStackIcon className={ICON_CLASSNAME} />
+        Import/Export
       </>
     ),
     fields: [
@@ -201,10 +227,98 @@ const SETTING_SECTIONS: SettingSection[] = [
           );
         },
       },
+    ],
+  },
+
+  /* Advanced */
+  {
+    title: (
+      <>
+        <SquaresPlusIcon className={ICON_CLASSNAME} />
+        Advanced
+      </>
+    ),
+    fields: [
+      /* Generation */
       {
-        type: SettingInputType.CHECKBOX,
-        label: 'Show tokens per second',
-        key: 'showTokensPerSecond',
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <CogIcon className={TITLE_ICON_CLASSNAME} />
+            Generation
+          </>
+        ),
+      },
+      ...GENERATION_KEYS.map(
+        (key) =>
+          ({
+            type: SettingInputType.SHORT_INPUT,
+            label: key,
+            key,
+          }) as SettingFieldInput
+      ),
+
+      /* Samplers */
+      {
+        type: SettingInputType.SPACE,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <FunnelIcon className={ICON_CLASSNAME} />
+            Samplers
+          </>
+        ),
+      },
+      {
+        type: SettingInputType.SHORT_INPUT,
+        label: 'Samplers queue',
+        key: 'samplers',
+      },
+      ...SAMPLER_KEYS.map(
+        (key) =>
+          ({
+            type: SettingInputType.SHORT_INPUT,
+            label: key,
+            key,
+          }) as SettingFieldInput
+      ),
+
+      /* Penalties */
+      {
+        type: SettingInputType.SPACE,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <HandRaisedIcon className={ICON_CLASSNAME} />
+            Penalties
+          </>
+        ),
+      },
+      ...PENALTY_KEYS.map(
+        (key) =>
+          ({
+            type: SettingInputType.SHORT_INPUT,
+            label: key,
+            key,
+          }) as SettingFieldInput
+      ),
+
+      /* Custom */
+      {
+        type: SettingInputType.SPACE,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <CpuChipIcon className={TITLE_ICON_CLASSNAME} />
+            Custom
+          </>
+        ),
       },
       {
         type: SettingInputType.LONG_INPUT,
@@ -221,6 +335,8 @@ const SETTING_SECTIONS: SettingSection[] = [
       },
     ],
   },
+
+  /* Experimental */
   {
     title: (
       <>
@@ -281,7 +397,7 @@ export default function SettingDialog({
   onClose: () => void;
 }) {
   const { config, saveConfig } = useAppContext();
-  const [sectionIdx, setSectionIdx] = useState(0);
+  const [tabIdx, setTabIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
   const [localConfig, setLocalConfig] = useState<typeof CONFIG_DEFAULT>(
@@ -355,17 +471,17 @@ export default function SettingDialog({
             aria-description="Settings sections"
             tabIndex={0}
           >
-            {SETTING_SECTIONS.map((section, idx) => (
+            {SETTING_TABS.map((tab, idx) => (
               <button
                 key={idx}
                 className={classNames({
                   'btn btn-ghost justify-start font-normal w-44 mb-1': true,
-                  'btn-active': sectionIdx === idx,
+                  'btn-active': tabIdx === idx,
                 })}
-                onClick={() => setSectionIdx(idx)}
+                onClick={() => setTabIdx(idx)}
                 dir="auto"
               >
-                {section.title}
+                {tab.title}
               </button>
             ))}
           </div>
@@ -378,20 +494,20 @@ export default function SettingDialog({
           >
             <details className="dropdown">
               <summary className="btn bt-sm w-full m-1">
-                {SETTING_SECTIONS[sectionIdx].title}
+                {SETTING_TABS[tabIdx].title}
               </summary>
               <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-                {SETTING_SECTIONS.map((section, idx) => (
+                {SETTING_TABS.map((tab, idx) => (
                   <div
                     key={idx}
                     className={classNames({
                       'btn btn-ghost justify-start font-normal': true,
-                      'btn-active': sectionIdx === idx,
+                      'btn-active': tabIdx === idx,
                     })}
-                    onClick={() => setSectionIdx(idx)}
+                    onClick={() => setTabIdx(idx)}
                     dir="auto"
                   >
-                    {section.title}
+                    {tab.title}
                   </div>
                 ))}
               </ul>
@@ -400,8 +516,8 @@ export default function SettingDialog({
 
           {/* Right panel, showing setting fields */}
           <div className="grow overflow-y-auto px-4">
-            {SETTING_SECTIONS[sectionIdx].fields.map((field, idx) => {
-              const key = `${sectionIdx}-${idx}`;
+            {SETTING_TABS[tabIdx].fields.map((field, idx) => {
+              const key = `${tabIdx}-${idx}`;
               if (field.type === SettingInputType.SHORT_INPUT) {
                 return (
                   <SettingsModalShortInput
@@ -443,6 +559,14 @@ export default function SettingDialog({
                         })}
                   </div>
                 );
+              } else if (field.type === SettingInputType.SECTION) {
+                return (
+                  <div key={key} className="pb-2">
+                    <h4>{field.label}</h4>
+                  </div>
+                );
+              } else if (field.type === SettingInputType.SPACE) {
+                return <div className="pb-3" />;
               }
             })}
 
@@ -543,15 +667,24 @@ function SettingsModalCheckbox({
   onChange: (value: boolean) => void;
   label: string;
 }) {
+  const helpMsg = CONFIG_INFO[configKey];
   return (
-    <div className="flex flex-row items-center mb-2">
-      <input
-        type="checkbox"
-        className="toggle"
-        checked={value}
-        onChange={(e) => onChange(e.target.checked)}
-      />
-      <span className="ml-4">{label || configKey}</span>
-    </div>
+    <>
+      {helpMsg && (
+        <div className="block mb-1 opacity-75">
+          <p className="text-xs">{helpMsg}</p>
+        </div>
+      )}
+
+      <div className="flex flex-row items-center mb-2">
+        <input
+          type="checkbox"
+          className="toggle"
+          checked={value}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+        <span className="ml-4">{label || configKey}</span>
+      </div>
+    </>
   );
 }

From 72013b593733c203414b4c757d501d8a0a8a0ed2 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 13:38:15 +0300
Subject: [PATCH 02/10] feat: add missed configuration descriptions

---
 src/components/SettingDialog.tsx | 7 +++----
 src/config.ts                    | 9 ++++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index 191b77b..6a08d03 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -149,7 +149,7 @@ const SETTING_TABS: SettingTab[] = [
       },
       {
         type: SettingInputType.CHECKBOX,
-        label: 'Parse PDF as image instead of text',
+        label: 'Use PDF as image instead of text',
         key: 'pdfAsImage',
       },
 
@@ -187,13 +187,12 @@ const SETTING_TABS: SettingTab[] = [
       },
       {
         type: SettingInputType.CHECKBOX,
-        label: 'Expand thought process by default when generating messages',
+        label: 'Expand thinking section',
         key: 'showThoughtInProgress',
       },
       {
         type: SettingInputType.CHECKBOX,
-        label:
-          'Exclude thought process when sending requests to API (Recommended for DeepSeek-R1)',
+        label: 'Exclude thinking messages on submit',
         key: 'excludeThoughtOnReq',
       },
     ],
diff --git a/src/config.ts b/src/config.ts
index a47b513..9e863cf 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -40,6 +40,7 @@ export const CONFIG_DEFAULT = {
   dry_penalty_last_n: -1,
   max_tokens: -1,
   custom: '', // custom json-stringified object
+
   // experimental features
   pyIntepreterEnabled: false,
 };
@@ -47,8 +48,14 @@ export const CONFIG_INFO: Record<string, string> = {
   baseUrl: 'Set the Base URL if you are using standalone server.',
   apiKey: 'Set the API Key if you are using --api-key option for the server.',
   systemMessage: 'The starting message that defines how model should behave.',
+  showTokensPerSecond: 'Enable to see processing speed, timings, etc.',
+  showThoughtInProgress: 'Expand thinking message when generating messages',
+  excludeThoughtOnReq:
+    'Exclude thinking messages when sending requests to API (recommended)',
   pasteLongTextToFileLen:
-    'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Value 0 means disable.',
+    'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Set to 0 to disable.',
+  pdfAsImage:
+    'Attach PDF as image instead of text. Supported only with multimodal models with vision support/',
   samplers:
     'The order at which samplers are applied, in simplified way. Default is "dkypmxt": dry->top_k->typ_p->top_p->min_p->xtc->temperature',
   temperature:

From a40c904318d0e9cc1df321a96c47be0517374a85 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 13:41:48 +0300
Subject: [PATCH 03/10] style: increase pasteLongTextToFileLen default

---
 src/components/SettingDialog.tsx | 2 +-
 src/config.ts                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index 6a08d03..70f9614 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -144,7 +144,7 @@ const SETTING_TABS: SettingTab[] = [
       },
       {
         type: SettingInputType.SHORT_INPUT,
-        label: 'Paste length to file',
+        label: 'On Paste: convert to file if length >',
         key: 'pasteLongTextToFileLen',
       },
       {
diff --git a/src/config.ts b/src/config.ts
index 9e863cf..ee5728e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -17,7 +17,7 @@ export const CONFIG_DEFAULT = {
   showTokensPerSecond: false,
   showThoughtInProgress: false,
   excludeThoughtOnReq: true,
-  pasteLongTextToFileLen: 2500,
+  pasteLongTextToFileLen: 10000,
   pdfAsImage: false,
   // make sure these default values are in sync with `common.h`
   samplers: 'edkypmxt',

From eb004b60bde4257f3bafff5bc3c7079292c765d9 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 14:00:40 +0300
Subject: [PATCH 04/10] style: introduce configuration type

---
 src/config.ts      |  6 ++++--
 src/utils/types.ts | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index ee5728e..32f2cae 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,6 @@
 import daisyuiThemes from 'daisyui/theme/object';
 import { isNumeric } from './utils/misc';
+import { Configuration, ConfigurationDetails } from './utils/types';
 
 export const isDev = import.meta.env.MODE === 'development';
 
@@ -8,7 +9,7 @@ const baseUrl = new URL('.', document.baseURI).href
   .toString()
   .replace(/\/$/, '');
 
-export const CONFIG_DEFAULT = {
+export const CONFIG_DEFAULT: Configuration = {
   // Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
   // Do not use nested objects, keep it single level. Prefix the key if you need to group them.
   baseUrl: baseUrl,
@@ -44,7 +45,7 @@ export const CONFIG_DEFAULT = {
   // experimental features
   pyIntepreterEnabled: false,
 };
-export const CONFIG_INFO: Record<string, string> = {
+export const CONFIG_INFO: ConfigurationDetails = {
   baseUrl: 'Set the Base URL if you are using standalone server.',
   apiKey: 'Set the API Key if you are using --api-key option for the server.',
   systemMessage: 'The starting message that defines how model should behave.',
@@ -92,6 +93,7 @@ export const CONFIG_INFO: Record<string, string> = {
     'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens.',
   max_tokens: 'The maximum number of token per output.',
   custom: '', // custom json-stringified object
+  pyIntepreterEnabled: '',
 };
 // config keys having numeric value (i.e. temperature, top_k, top_p, etc)
 export const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT)
diff --git a/src/utils/types.ts b/src/utils/types.ts
index ecc9b6a..2f66245 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -5,6 +5,40 @@ export interface TimingReport {
   predicted_ms: number;
 }
 
+export interface Configuration {
+  baseUrl: string;
+  apiKey: string;
+  systemMessage: string;
+  showTokensPerSecond: boolean;
+  showThoughtInProgress: boolean;
+  excludeThoughtOnReq: boolean;
+  pasteLongTextToFileLen: number;
+  pdfAsImage: boolean;
+  samplers: string;
+  temperature: number;
+  dynatemp_range: number;
+  dynatemp_exponent: number;
+  top_k: number;
+  top_p: number;
+  min_p: number;
+  xtc_probability: number;
+  xtc_threshold: number;
+  typical_p: number;
+  repeat_last_n: number;
+  repeat_penalty: number;
+  presence_penalty: number;
+  frequency_penalty: number;
+  dry_multiplier: number;
+  dry_base: number;
+  dry_allowed_length: number;
+  dry_penalty_last_n: number;
+  max_tokens: number;
+  custom: string;
+  pyIntepreterEnabled: boolean;
+}
+
+export type ConfigurationDetails = Record<keyof Configuration, string>;
+
 /**
  * What is conversation "branching"? It is a feature that allows the user to edit an old message in the history, while still keeping the conversation flow.
  * Inspired by ChatGPT / Claude / Hugging Chat where you edit a message, a new branch of the conversation is created, and the old message is still visible.

From bbc1809340fe2ddd454f1e113ceac74cbbbfa024 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 16:16:40 +0300
Subject: [PATCH 05/10] refactor: extract configuration details

---
 src/components/SettingDialog.tsx | 173 ++++++++++++-------------------
 src/config.ts                    |  58 +----------
 src/lang/en.json                 | 122 ++++++++++++++++++++++
 src/utils/types.ts               |   2 -
 4 files changed, 191 insertions(+), 164 deletions(-)
 create mode 100644 src/lang/en.json

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index 70f9614..3f3c6ce 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -13,15 +13,18 @@ import {
   SquaresPlusIcon,
 } from '@heroicons/react/24/outline';
 import { useState } from 'react';
-import { CONFIG_DEFAULT, CONFIG_INFO, isDev } from '../config';
+import { CONFIG_DEFAULT, isDev } from '../config';
+import * as messages from '../lang/en.json';
 import { useAppContext } from '../utils/app.context';
 import { OpenInNewTab } from '../utils/common';
 import { classNames, isBoolean, isNumeric, isString } from '../utils/misc';
 import StorageUtils from '../utils/storage';
+import { Configuration } from '../utils/types';
 import { useModals } from './ModalProvider';
 
 type SettKey = keyof typeof CONFIG_DEFAULT;
 
+const GENERAL_KEYS: SettKey[] = ['baseUrl', 'apiKey'];
 const GENERATION_KEYS: SettKey[] = [
   'temperature',
   'top_k',
@@ -30,6 +33,7 @@ const GENERATION_KEYS: SettKey[] = [
   'max_tokens',
 ];
 const SAMPLER_KEYS: SettKey[] = [
+  'samplers',
   'dynatemp_range',
   'dynatemp_exponent',
   'typical_p',
@@ -53,13 +57,18 @@ enum SettingInputType {
   CHECKBOX,
   CUSTOM,
   SECTION,
-  SPACE,
+  DELIMETER,
 }
-
+type SettingFieldInputType = Exclude<
+  SettingInputType,
+  | SettingInputType.CUSTOM
+  | SettingInputType.SECTION
+  | SettingInputType.DELIMETER
+>;
 interface SettingFieldInput {
-  type: Exclude<SettingInputType, SettingInputType.CUSTOM>;
+  type: SettingFieldInputType;
   label: string | React.ReactElement;
-  help?: string | React.ReactElement;
+  note?: string | React.ReactElement;
   key: SettKey;
 }
 
@@ -79,23 +88,35 @@ interface SettingSection {
   label: string | React.ReactElement;
 }
 
-interface SettingSpace {
-  type: SettingInputType.SPACE;
+interface SettingDelimeter {
+  type: SettingInputType.DELIMETER;
 }
 
+type SettingField =
+  | SettingFieldInput
+  | SettingFieldCustom
+  | SettingSection
+  | SettingDelimeter;
+
 interface SettingTab {
   title: React.ReactElement;
-  fields: (
-    | SettingFieldInput
-    | SettingFieldCustom
-    | SettingSection
-    | SettingSpace
-  )[];
+  fields: SettingField[];
 }
 
 const ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 const TITLE_ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 
+const toInput = (
+  type: SettingFieldInputType,
+  key: keyof Configuration
+): SettingFieldInput => {
+  return {
+    type,
+    ...messages.settings.parameters[key],
+    key,
+  };
+};
+
 const SETTING_TABS: SettingTab[] = [
   /* General */
   {
@@ -106,21 +127,8 @@ const SETTING_TABS: SettingTab[] = [
       </>
     ),
     fields: [
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Base URL',
-        key: 'baseUrl',
-      },
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'API Key',
-        key: 'apiKey',
-      },
-      {
-        type: SettingInputType.LONG_INPUT,
-        label: 'System Message (will be disabled if left empty)',
-        key: 'systemMessage',
-      },
+      ...GENERAL_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
+      toInput(SettingInputType.LONG_INPUT, 'systemMessage'),
     ],
   },
 
@@ -142,20 +150,12 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'On Paste: convert to file if length >',
-        key: 'pasteLongTextToFileLen',
-      },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: 'Use PDF as image instead of text',
-        key: 'pdfAsImage',
-      },
+      toInput(SettingInputType.SHORT_INPUT, 'pasteLongTextToFileLen'),
+      toInput(SettingInputType.CHECKBOX, 'pdfAsImage'),
 
       /* Performance */
       {
-        type: SettingInputType.SPACE,
+        type: SettingInputType.DELIMETER,
       },
       {
         type: SettingInputType.SECTION,
@@ -166,15 +166,11 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: 'Show performance metrics',
-        key: 'showTokensPerSecond',
-      },
+      toInput(SettingInputType.CHECKBOX, 'showTokensPerSecond'),
 
       /* Reasoning */
       {
-        type: SettingInputType.SPACE,
+        type: SettingInputType.DELIMETER,
       },
       {
         type: SettingInputType.SECTION,
@@ -185,16 +181,8 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: 'Expand thinking section',
-        key: 'showThoughtInProgress',
-      },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: 'Exclude thinking messages on submit',
-        key: 'excludeThoughtOnReq',
-      },
+      toInput(SettingInputType.CHECKBOX, 'showThoughtInProgress'),
+      toInput(SettingInputType.CHECKBOX, 'excludeThoughtOnReq'),
     ],
   },
 
@@ -248,18 +236,13 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      ...GENERATION_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
+      ...GENERATION_KEYS.map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key)
       ),
 
       /* Samplers */
       {
-        type: SettingInputType.SPACE,
+        type: SettingInputType.DELIMETER,
       },
       {
         type: SettingInputType.SECTION,
@@ -270,23 +253,11 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      {
-        type: SettingInputType.SHORT_INPUT,
-        label: 'Samplers queue',
-        key: 'samplers',
-      },
-      ...SAMPLER_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
-      ),
+      ...SAMPLER_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
 
       /* Penalties */
       {
-        type: SettingInputType.SPACE,
+        type: SettingInputType.DELIMETER,
       },
       {
         type: SettingInputType.SECTION,
@@ -297,18 +268,11 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      ...PENALTY_KEYS.map(
-        (key) =>
-          ({
-            type: SettingInputType.SHORT_INPUT,
-            label: key,
-            key,
-          }) as SettingFieldInput
-      ),
+      ...PENALTY_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
 
       /* Custom */
       {
-        type: SettingInputType.SPACE,
+        type: SettingInputType.DELIMETER,
       },
       {
         type: SettingInputType.SECTION,
@@ -522,9 +486,9 @@ export default function SettingDialog({
                   <SettingsModalShortInput
                     key={key}
                     configKey={field.key}
+                    field={field}
                     value={localConfig[field.key]}
                     onChange={onChange(field.key)}
-                    label={field.label as string}
                   />
                 );
               } else if (field.type === SettingInputType.LONG_INPUT) {
@@ -532,9 +496,9 @@ export default function SettingDialog({
                   <SettingsModalLongInput
                     key={key}
                     configKey={field.key}
+                    field={field}
                     value={localConfig[field.key].toString()}
                     onChange={onChange(field.key)}
-                    label={field.label as string}
                   />
                 );
               } else if (field.type === SettingInputType.CHECKBOX) {
@@ -542,9 +506,9 @@ export default function SettingDialog({
                   <SettingsModalCheckbox
                     key={key}
                     configKey={field.key}
+                    field={field}
                     value={!!localConfig[field.key]}
                     onChange={onChange(field.key)}
-                    label={field.label as string}
                   />
                 );
               } else if (field.type === SettingInputType.CUSTOM) {
@@ -564,7 +528,7 @@ export default function SettingDialog({
                     <h4>{field.label}</h4>
                   </div>
                 );
-              } else if (field.type === SettingInputType.SPACE) {
+              } else if (field.type === SettingInputType.DELIMETER) {
                 return <div className="pb-3" />;
               }
             })}
@@ -593,18 +557,18 @@ export default function SettingDialog({
 
 function SettingsModalLongInput({
   configKey,
+  field,
   value,
   onChange,
-  label,
 }: {
   configKey: SettKey;
+  field: SettingFieldInput;
   value: string;
   onChange: (value: string) => void;
-  label?: string;
 }) {
   return (
     <label className="form-control">
-      <div className="label inline text-sm">{label || configKey}</div>
+      <div className="label inline text-sm">{field.label || configKey}</div>
       <textarea
         className="textarea textarea-bordered h-24 mb-2"
         placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
@@ -617,30 +581,28 @@ function SettingsModalLongInput({
 
 function SettingsModalShortInput({
   configKey,
+  field,
   value,
   onChange,
-  label,
 }: {
   configKey: SettKey;
+  field: SettingFieldInput;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
   onChange: (value: string) => void;
-  label?: string;
 }) {
-  const helpMsg = CONFIG_INFO[configKey];
-
   return (
     <>
       {/* on mobile, we simply show the help message here */}
-      {helpMsg && (
+      {field.note && (
         <div className="block mb-1 opacity-75">
-          <p className="text-xs">{helpMsg}</p>
+          <p className="text-xs">{field.note}</p>
         </div>
       )}
       <label className="input input-bordered join-item grow flex items-center gap-2 mb-2">
         <div className="dropdown dropdown-hover">
           <div tabIndex={0} role="button" className="font-bold hidden md:block">
-            {label || configKey}
+            {field.label || configKey}
           </div>
         </div>
         <input
@@ -657,21 +619,20 @@ function SettingsModalShortInput({
 
 function SettingsModalCheckbox({
   configKey,
+  field,
   value,
   onChange,
-  label,
 }: {
   configKey: SettKey;
+  field: SettingFieldInput;
   value: boolean;
   onChange: (value: boolean) => void;
-  label: string;
 }) {
-  const helpMsg = CONFIG_INFO[configKey];
   return (
     <>
-      {helpMsg && (
+      {field.note && (
         <div className="block mb-1 opacity-75">
-          <p className="text-xs">{helpMsg}</p>
+          <p className="text-xs">{field.note}</p>
         </div>
       )}
 
@@ -682,7 +643,7 @@ function SettingsModalCheckbox({
           checked={value}
           onChange={(e) => onChange(e.target.checked)}
         />
-        <span className="ml-4">{label || configKey}</span>
+        <span className="ml-4">{field.label || configKey}</span>
       </div>
     </>
   );
diff --git a/src/config.ts b/src/config.ts
index 32f2cae..9b83908 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,5 @@
 import daisyuiThemes from 'daisyui/theme/object';
-import { isNumeric } from './utils/misc';
-import { Configuration, ConfigurationDetails } from './utils/types';
+import { Configuration } from './utils/types';
 
 export const isDev = import.meta.env.MODE === 'development';
 
@@ -45,60 +44,7 @@ export const CONFIG_DEFAULT: Configuration = {
   // experimental features
   pyIntepreterEnabled: false,
 };
-export const CONFIG_INFO: ConfigurationDetails = {
-  baseUrl: 'Set the Base URL if you are using standalone server.',
-  apiKey: 'Set the API Key if you are using --api-key option for the server.',
-  systemMessage: 'The starting message that defines how model should behave.',
-  showTokensPerSecond: 'Enable to see processing speed, timings, etc.',
-  showThoughtInProgress: 'Expand thinking message when generating messages',
-  excludeThoughtOnReq:
-    'Exclude thinking messages when sending requests to API (recommended)',
-  pasteLongTextToFileLen:
-    'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Set to 0 to disable.',
-  pdfAsImage:
-    'Attach PDF as image instead of text. Supported only with multimodal models with vision support/',
-  samplers:
-    'The order at which samplers are applied, in simplified way. Default is "dkypmxt": dry->top_k->typ_p->top_p->min_p->xtc->temperature',
-  temperature:
-    'Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused.',
-  dynatemp_range:
-    'Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens.',
-  dynatemp_exponent:
-    'Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token.',
-  top_k: 'Keeps only k top tokens.',
-  top_p:
-    'Limits tokens to those that together have a cumulative probability of at least p',
-  min_p:
-    'Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token.',
-  xtc_probability:
-    'XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC.',
-  xtc_threshold:
-    'XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token.',
-  typical_p:
-    'Sorts and limits tokens based on the difference between log-probability and entropy.',
-  repeat_last_n: 'Last n tokens to consider for penalizing repetition',
-  repeat_penalty:
-    'Controls the repetition of token sequences in the generated text',
-  presence_penalty:
-    'Limits tokens based on whether they appear in the output or not.',
-  frequency_penalty:
-    'Limits tokens based on how often they appear in the output.',
-  dry_multiplier:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier.',
-  dry_base:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value.',
-  dry_allowed_length:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling.',
-  dry_penalty_last_n:
-    'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens.',
-  max_tokens: 'The maximum number of token per output.',
-  custom: '', // custom json-stringified object
-  pyIntepreterEnabled: '',
-};
-// config keys having numeric value (i.e. temperature, top_k, top_p, etc)
-export const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT)
-  .filter((e) => isNumeric(e[1]))
-  .map((e) => e[0]);
+
 // list of themes supported by daisyui
 export const THEMES = ['light', 'dark']
   // make sure light & dark are always at the beginning
diff --git a/src/lang/en.json b/src/lang/en.json
new file mode 100644
index 0000000..a0b57b5
--- /dev/null
+++ b/src/lang/en.json
@@ -0,0 +1,122 @@
+{
+  "settings": {
+    "parameters": {
+      "baseUrl": {
+        "label": "Base URL",
+        "note": "Set the Base URL if you are using standalone server."
+      },
+      "apiKey": {
+        "label": "API Key",
+        "note": "Set the API Key if you are using --api-key option for the server."
+      },
+      "systemMessage": {
+        "label": "System Message (will be disabled if left empty)",
+        "note": "The starting message that defines how model should behave."
+      },
+      "pasteLongTextToFileLen": {
+        "label": "On Paste: convert to file if length >",
+        "note": "On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Set to 0 to disable."
+      },
+      "pdfAsImage": {
+        "label": "Use PDF as image instead of text",
+        "note": "Attach PDF as image instead of text. Supported only with multimodal models with vision support/"
+      },
+      "showTokensPerSecond": {
+        "label": "Show performance metrics",
+        "note": "Enable to see processing speed, timings, etc."
+      },
+      "showThoughtInProgress": {
+        "label": "Expand thinking section",
+        "note": "Expand thinking message when generating messages"
+      },
+      "excludeThoughtOnReq": {
+        "label": "Exclude thinking messages on submit",
+        "note": "Exclude thinking messages when sending requests to API (recommended)"
+      },
+      "temperature": {
+        "label": "",
+        "note": "Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused."
+      },
+      "top_k": {
+        "label": "",
+        "note": "Keeps only k top tokens."
+      },
+      "top_p": {
+        "label": "",
+        "note": "Limits tokens to those that together have a cumulative probability of at least p"
+      },
+      "min_p": {
+        "label": "",
+        "note": "Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token."
+      },
+      "max_tokens": {
+        "label": "",
+        "note": "The maximum number of token per output."
+      },
+      "samplers": {
+        "label": "Samplers queue",
+        "note": "The order at which samplers are applied, in simplified way. Default is \"dkypmxt\": dry->top_k->typ_p->top_p->min_p->xtc->temperature"
+      },
+      "dynatemp_range": {
+        "label": "",
+        "note": "Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens."
+      },
+      "dynatemp_exponent": {
+        "label": "",
+        "note": "Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token."
+      },
+      "typical_p": {
+        "label": "",
+        "note": "Sorts and limits tokens based on the difference between log-probability and entropy."
+      },
+      "xtc_probability": {
+        "label": "",
+        "note": "XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC."
+      },
+      "xtc_threshold": {
+        "label": "",
+        "note": "XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token."
+      },
+      "repeat_last_n": {
+        "label": "",
+        "note": "Last n tokens to consider for penalizing repetition"
+      },
+      "repeat_penalty": {
+        "label": "",
+        "note": "Controls the repetition of token sequences in the generated text"
+      },
+      "presence_penalty": {
+        "label": "",
+        "note": "Limits tokens based on whether they appear in the output or not."
+      },
+      "frequency_penalty": {
+        "label": "",
+        "note": "Limits tokens based on how often they appear in the output."
+      },
+      "dry_multiplier": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier."
+      },
+      "dry_base": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value."
+      },
+      "dry_allowed_length": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling."
+      },
+      "dry_penalty_last_n": {
+        "label": "",
+        "note": "DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens."
+      },
+      "custom": {
+        "label": "",
+        "note": ""
+      },
+      "pyIntepreterEnabled": {
+        "label": "",
+        "note": ""
+      }
+    }
+  }
+}
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 2f66245..1479223 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -37,8 +37,6 @@ export interface Configuration {
   pyIntepreterEnabled: boolean;
 }
 
-export type ConfigurationDetails = Record<keyof Configuration, string>;
-
 /**
  * What is conversation "branching"? It is a feature that allows the user to edit an old message in the history, while still keeping the conversation flow.
  * Inspired by ChatGPT / Claude / Hugging Chat where you edit a message, a new branch of the conversation is created, and the old message is still visible.

From abb895eae024d98328931bce8a1da860af747b91 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 17:25:37 +0300
Subject: [PATCH 06/10] refactor: SettingDialog

---
 src/components/SettingDialog.tsx | 310 ++++++++++++++++---------------
 1 file changed, 160 insertions(+), 150 deletions(-)

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index 3f3c6ce..a247066 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -12,7 +12,7 @@ import {
   RocketLaunchIcon,
   SquaresPlusIcon,
 } from '@heroicons/react/24/outline';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { CONFIG_DEFAULT, isDev } from '../config';
 import * as messages from '../lang/en.json';
 import { useAppContext } from '../utils/app.context';
@@ -22,34 +22,9 @@ import StorageUtils from '../utils/storage';
 import { Configuration } from '../utils/types';
 import { useModals } from './ModalProvider';
 
-type SettKey = keyof typeof CONFIG_DEFAULT;
+// --- Type Definitions ---
 
-const GENERAL_KEYS: SettKey[] = ['baseUrl', 'apiKey'];
-const GENERATION_KEYS: SettKey[] = [
-  'temperature',
-  'top_k',
-  'top_p',
-  'min_p',
-  'max_tokens',
-];
-const SAMPLER_KEYS: SettKey[] = [
-  'samplers',
-  'dynatemp_range',
-  'dynatemp_exponent',
-  'typical_p',
-  'xtc_probability',
-  'xtc_threshold',
-];
-const PENALTY_KEYS: SettKey[] = [
-  'repeat_last_n',
-  'repeat_penalty',
-  'presence_penalty',
-  'frequency_penalty',
-  'dry_multiplier',
-  'dry_base',
-  'dry_allowed_length',
-  'dry_penalty_last_n',
-];
+type ConfigurationKey = keyof Configuration;
 
 enum SettingInputType {
   SHORT_INPUT,
@@ -59,27 +34,29 @@ enum SettingInputType {
   SECTION,
   DELIMETER,
 }
+
 type SettingFieldInputType = Exclude<
   SettingInputType,
   | SettingInputType.CUSTOM
   | SettingInputType.SECTION
   | SettingInputType.DELIMETER
 >;
+
 interface SettingFieldInput {
   type: SettingFieldInputType;
   label: string | React.ReactElement;
   note?: string | React.ReactElement;
-  key: SettKey;
+  key: ConfigurationKey;
 }
 
 interface SettingFieldCustom {
   type: SettingInputType.CUSTOM;
-  key: SettKey;
+  key: ConfigurationKey | 'custom';
   component:
     | string
     | React.FC<{
         value: string | boolean | number;
-        onChange: (value: string) => void;
+        onChange: (value: string | boolean) => void;
       }>;
 }
 
@@ -103,20 +80,27 @@ interface SettingTab {
   fields: SettingField[];
 }
 
+// --- Helper Functions ---
+
 const ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 const TITLE_ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 
 const toInput = (
   type: SettingFieldInputType,
-  key: keyof Configuration
+  key: ConfigurationKey
 ): SettingFieldInput => {
   return {
     type,
-    ...messages.settings.parameters[key],
+    ...(messages.settings.parameters[key] as Omit<
+      Omit<SettingFieldInput, 'type'>,
+      'key'
+    >),
     key,
   };
 };
 
+// --- Setting Tabs Configuration ---
+
 const SETTING_TABS: SettingTab[] = [
   /* General */
   {
@@ -127,7 +111,9 @@ const SETTING_TABS: SettingTab[] = [
       </>
     ),
     fields: [
-      ...GENERAL_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
+      ...['baseUrl', 'apiKey'].map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+      ),
       toInput(SettingInputType.LONG_INPUT, 'systemMessage'),
     ],
   },
@@ -200,11 +186,16 @@ const SETTING_TABS: SettingTab[] = [
         key: 'custom', // dummy key, won't be used
         component: () => {
           const debugImportDemoConv = async () => {
-            const res = await fetch('/demo-conversation.json');
-            const demoConv = await res.json();
-            StorageUtils.remove(demoConv.id);
-            for (const msg of demoConv.messages) {
-              StorageUtils.appendMsg(demoConv.id, msg);
+            try {
+              const res = await fetch('/demo-conversation.json');
+              if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+              const demoConv = await res.json();
+              StorageUtils.remove(demoConv.id);
+              for (const msg of demoConv.messages) {
+                StorageUtils.appendMsg(demoConv.id, msg);
+              }
+            } catch (error) {
+              console.error('Failed to import demo conversation:', error);
             }
           };
           return (
@@ -236,8 +227,8 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      ...GENERATION_KEYS.map((key) =>
-        toInput(SettingInputType.SHORT_INPUT, key)
+      ...['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens'].map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
       ),
 
       /* Samplers */
@@ -253,7 +244,16 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      ...SAMPLER_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
+      ...[
+        'samplers',
+        'dynatemp_range',
+        'dynatemp_exponent',
+        'typical_p',
+        'xtc_probability',
+        'xtc_threshold',
+      ].map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+      ),
 
       /* Penalties */
       {
@@ -268,7 +268,18 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
-      ...PENALTY_KEYS.map((key) => toInput(SettingInputType.SHORT_INPUT, key)),
+      ...[
+        'repeat_last_n',
+        'repeat_penalty',
+        'presence_penalty',
+        'frequency_penalty',
+        'dry_multiplier',
+        'dry_base',
+        'dry_allowed_length',
+        'dry_penalty_last_n',
+      ].map((key) =>
+        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+      ),
 
       /* Custom */
       {
@@ -363,44 +374,43 @@ export default function SettingDialog({
   const [tabIdx, setTabIdx] = useState(0);
 
   // clone the config object to prevent direct mutation
-  const [localConfig, setLocalConfig] = useState<typeof CONFIG_DEFAULT>(
+  const [localConfig, setLocalConfig] = useState<Configuration>(
     JSON.parse(JSON.stringify(config))
   );
   const { showConfirm, showAlert } = useModals();
 
   const resetConfig = async () => {
     if (await showConfirm('Are you sure you want to reset all settings?')) {
-      setLocalConfig(CONFIG_DEFAULT);
+      setLocalConfig({ ...CONFIG_DEFAULT } as Configuration);
     }
   };
 
   const handleSave = async () => {
     // copy the local config to prevent direct mutation
-    const newConfig: typeof CONFIG_DEFAULT = JSON.parse(
-      JSON.stringify(localConfig)
-    );
+    const newConfig: Configuration = JSON.parse(JSON.stringify(localConfig));
     // validate the config
     for (const key in newConfig) {
-      const value = newConfig[key as SettKey];
-      const mustBeBoolean = isBoolean(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeString = isString(CONFIG_DEFAULT[key as SettKey]);
-      const mustBeNumeric = isNumeric(CONFIG_DEFAULT[key as SettKey]);
-      if (mustBeString) {
+      if (!(key in CONFIG_DEFAULT)) continue;
+
+      const typedKey = key as ConfigurationKey;
+      const value = newConfig[typedKey];
+      const defaultValue = CONFIG_DEFAULT[typedKey];
+      if (isString(defaultValue)) {
         if (!isString(value)) {
-          await showAlert(`Value for ${key} must be string`);
+          await showAlert(`Value for ${key} must be a string`);
           return;
         }
-      } else if (mustBeNumeric) {
-        const trimmedValue = value.toString().trim();
+      } else if (isNumeric(defaultValue)) {
+        const trimmedValue = String(value).trim();
         const numVal = Number(trimmedValue);
-        if (isNaN(numVal) || !isNumeric(numVal) || trimmedValue.length === 0) {
+        if (isNaN(numVal) || !isNumeric(numVal) || trimmedValue === '') {
           await showAlert(`Value for ${key} must be numeric`);
           return;
         }
         // force conversion to number
         // @ts-expect-error this is safe
-        newConfig[key] = numVal;
-      } else if (mustBeBoolean) {
+        newConfig[typedKey] = numVal as Configuration[ConfigurationKey];
+      } else if (isBoolean(defaultValue)) {
         if (!isBoolean(value)) {
           await showAlert(`Value for ${key} must be boolean`);
           return;
@@ -414,9 +424,12 @@ export default function SettingDialog({
     onClose();
   };
 
-  const onChange = (key: SettKey) => (value: string | boolean) => {
+  const onChange = (key: ConfigurationKey) => (value: string | boolean) => {
     // note: we do not perform validation here, because we may get incomplete value as user is still typing it
-    setLocalConfig({ ...localConfig, [key]: value });
+    setLocalConfig((prevConfig) => ({
+      ...prevConfig,
+      [key]: value,
+    }));
   };
 
   return (
@@ -461,17 +474,18 @@ export default function SettingDialog({
               </summary>
               <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
                 {SETTING_TABS.map((tab, idx) => (
-                  <div
-                    key={idx}
-                    className={classNames({
-                      'btn btn-ghost justify-start font-normal': true,
-                      'btn-active': tabIdx === idx,
-                    })}
-                    onClick={() => setTabIdx(idx)}
-                    dir="auto"
-                  >
-                    {tab.title}
-                  </div>
+                  <li key={idx}>
+                    <button
+                      className={classNames({
+                        'btn btn-ghost justify-start font-normal': true,
+                        'btn-active': tabIdx === idx,
+                      })}
+                      onClick={() => setTabIdx(idx)}
+                      dir="auto"
+                    >
+                      {tab.title}
+                    </button>
+                  </li>
                 ))}
               </ul>
             </details>
@@ -481,55 +495,59 @@ export default function SettingDialog({
           <div className="grow overflow-y-auto px-4">
             {SETTING_TABS[tabIdx].fields.map((field, idx) => {
               const key = `${tabIdx}-${idx}`;
-              if (field.type === SettingInputType.SHORT_INPUT) {
-                return (
-                  <SettingsModalShortInput
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={localConfig[field.key]}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              } else if (field.type === SettingInputType.LONG_INPUT) {
-                return (
-                  <SettingsModalLongInput
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={localConfig[field.key].toString()}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              } else if (field.type === SettingInputType.CHECKBOX) {
-                return (
-                  <SettingsModalCheckbox
-                    key={key}
-                    configKey={field.key}
-                    field={field}
-                    value={!!localConfig[field.key]}
-                    onChange={onChange(field.key)}
-                  />
-                );
-              } else if (field.type === SettingInputType.CUSTOM) {
-                return (
-                  <div key={key} className="mb-2">
-                    {typeof field.component === 'string'
-                      ? field.component
-                      : field.component({
-                          value: localConfig[field.key],
-                          onChange: onChange(field.key),
-                        })}
-                  </div>
-                );
-              } else if (field.type === SettingInputType.SECTION) {
-                return (
-                  <div key={key} className="pb-2">
-                    <h4>{field.label}</h4>
-                  </div>
-                );
-              } else if (field.type === SettingInputType.DELIMETER) {
-                return <div className="pb-3" />;
+              switch (field.type) {
+                case SettingInputType.SHORT_INPUT:
+                  return (
+                    <SettingsModalShortInput
+                      key={key}
+                      configKey={field.key}
+                      field={field}
+                      value={localConfig[field.key] as string | number}
+                      onChange={onChange(field.key)}
+                    />
+                  );
+                case SettingInputType.LONG_INPUT:
+                  return (
+                    <SettingsModalLongInput
+                      key={key}
+                      configKey={field.key}
+                      field={field}
+                      value={String(localConfig[field.key])}
+                      onChange={(value) => onChange(field.key)(value)}
+                    />
+                  );
+                case SettingInputType.CHECKBOX:
+                  return (
+                    <SettingsModalCheckbox
+                      key={key}
+                      configKey={field.key}
+                      field={field}
+                      value={!!localConfig[field.key]}
+                      onChange={(value) => onChange(field.key)(value)}
+                    />
+                  );
+                case SettingInputType.CUSTOM:
+                  return (
+                    <div key={key} className="mb-2">
+                      {typeof field.component === 'string'
+                        ? field.component
+                        : React.createElement(field.component, {
+                            value: localConfig[field.key],
+                            onChange: (value: string | boolean) =>
+                              onChange(field.key)(value),
+                          })}
+                    </div>
+                  );
+                case SettingInputType.SECTION:
+                  return (
+                    <div key={key} className="pb-2">
+                      <h4>{field.label}</h4>
+                    </div>
+                  );
+                case SettingInputType.DELIMETER:
+                  return <div key={key} className="pb-3" />;
+                default:
+                  return null;
               }
             })}
 
@@ -555,17 +573,20 @@ export default function SettingDialog({
   );
 }
 
-function SettingsModalLongInput({
+// --- Helper Input Components ---
+
+interface BaseInputProps {
+  configKey: ConfigurationKey | 'custom';
+  field: SettingFieldInput;
+  onChange: (value: string | boolean) => void;
+}
+
+const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
   configKey,
   field,
   value,
   onChange,
-}: {
-  configKey: SettKey;
-  field: SettingFieldInput;
-  value: string;
-  onChange: (value: string) => void;
-}) {
+}) => {
   return (
     <label className="form-control">
       <div className="label inline text-sm">{field.label || configKey}</div>
@@ -575,22 +596,16 @@ function SettingsModalLongInput({
         value={value}
         onChange={(e) => onChange(e.target.value)}
       />
+      {field.note && (
+        <div className="text-xs opacity-75 mt-1">{field.note}</div>
+      )}
     </label>
   );
-}
+};
 
-function SettingsModalShortInput({
-  configKey,
-  field,
-  value,
-  onChange,
-}: {
-  configKey: SettKey;
-  field: SettingFieldInput;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-  onChange: (value: string) => void;
-}) {
+const SettingsModalShortInput: React.FC<
+  BaseInputProps & { value: string | number }
+> = ({ configKey, field, value, onChange }) => {
   return (
     <>
       {/* on mobile, we simply show the help message here */}
@@ -615,19 +630,14 @@ function SettingsModalShortInput({
       </label>
     </>
   );
-}
+};
 
-function SettingsModalCheckbox({
+const SettingsModalCheckbox: React.FC<BaseInputProps & { value: boolean }> = ({
   configKey,
   field,
   value,
   onChange,
-}: {
-  configKey: SettKey;
-  field: SettingFieldInput;
-  value: boolean;
-  onChange: (value: boolean) => void;
-}) {
+}) => {
   return (
     <>
       {field.note && (
@@ -647,4 +657,4 @@ function SettingsModalCheckbox({
       </div>
     </>
   );
-}
+};

From 07f46d1715c00c0207e5793e0848825467dd8e17 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 17:25:54 +0300
Subject: [PATCH 07/10] style: small fixes

---
 src/lang/en.json          | 2 +-
 src/utils/app.context.tsx | 9 +++++----
 src/utils/storage.ts      | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index a0b57b5..0fa3075 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -19,7 +19,7 @@
       },
       "pdfAsImage": {
         "label": "Use PDF as image instead of text",
-        "note": "Attach PDF as image instead of text. Supported only with multimodal models with vision support/"
+        "note": "Attach PDF as image instead of text. Supported only with multimodal models with vision support."
       },
       "showTokensPerSecond": {
         "label": "Show performance metrics",
diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
index 16c6abc..f8269f7 100644
--- a/src/utils/app.context.tsx
+++ b/src/utils/app.context.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { matchPath, useLocation, useNavigate } from 'react-router';
-import { CONFIG_DEFAULT, isDev } from '../config';
+import { isDev } from '../config';
 import {
   filterThoughtFromMsgs,
   getSSEStreamAsync,
@@ -12,6 +12,7 @@ import StorageUtils from './storage';
 import {
   APIMessage,
   CanvasData,
+  Configuration,
   Conversation,
   LlamaCppServerProps,
   Message,
@@ -52,8 +53,8 @@ interface AppContextValue {
   setCanvasData: (data: CanvasData | null) => void;
 
   // config
-  config: typeof CONFIG_DEFAULT;
-  saveConfig: (config: typeof CONFIG_DEFAULT) => void;
+  config: Configuration;
+  saveConfig: (config: Configuration) => void;
   showSettings: boolean;
   setShowSettings: (show: boolean) => void;
 
@@ -425,7 +426,7 @@ export const AppContextProvider = ({
     await generateMessage(convId, parentNodeId, onChunk);
   };
 
-  const saveConfig = (config: typeof CONFIG_DEFAULT) => {
+  const saveConfig = (config: Configuration) => {
     StorageUtils.setConfig(config);
     setConfig(config);
   };
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index c461703..6a7a53b 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -3,7 +3,7 @@
 
 import Dexie, { Table } from 'dexie';
 import { CONFIG_DEFAULT } from '../config';
-import { Conversation, Message, TimingReport } from './types';
+import { Configuration, Conversation, Message, TimingReport } from './types';
 
 const event = new EventTarget();
 
@@ -192,7 +192,7 @@ const StorageUtils = {
   },
 
   // manage config
-  getConfig(): typeof CONFIG_DEFAULT {
+  getConfig(): Configuration {
     const savedVal = JSON.parse(localStorage.getItem('config') || '{}');
     // to prevent breaking changes in the future, we always provide default value for missing keys
     return {
@@ -200,7 +200,7 @@ const StorageUtils = {
       ...savedVal,
     };
   },
-  setConfig(config: typeof CONFIG_DEFAULT) {
+  setConfig(config: Configuration) {
     localStorage.setItem('config', JSON.stringify(config));
   },
   getTheme(): string {

From 31b84ba661e7a89446b045bc51755d7a82857c87 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 17:27:57 +0300
Subject: [PATCH 08/10] style: save timings if exist

---
 src/utils/app.context.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
index f8269f7..0880dc6 100644
--- a/src/utils/app.context.tsx
+++ b/src/utils/app.context.tsx
@@ -276,7 +276,7 @@ export const AppContextProvider = ({
           pendingMsg.model = chunk.model;
         }
         const timings = chunk.timings;
-        if (timings && config.showTokensPerSecond) {
+        if (timings) {
           // only extract what's really needed, to save some space
           pendingMsg.timings = {
             prompt_n: timings.prompt_n,

From 9d35de4ff6b66e45e583b817caa42227fa978110 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 17:59:32 +0300
Subject: [PATCH 09/10] style: code review app context

---
 src/utils/app.context.tsx | 42 ++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
index 0880dc6..68af6fa 100644
--- a/src/utils/app.context.tsx
+++ b/src/utils/app.context.tsx
@@ -65,8 +65,22 @@ interface AppContextValue {
 // this callback is used for scrolling to the bottom of the chat and switching to the last node
 export type CallbackGeneratedChunk = (currLeafNodeId?: Message['id']) => void;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AppContext = createContext<AppContextValue>({} as any);
+const AppContext = createContext<AppContextValue>({
+  viewingChat: null,
+  pendingMessages: {},
+  isGenerating: () => false,
+  sendMessage: async () => false,
+  stopGenerating: () => {},
+  replaceMessage: async () => {},
+  replaceMessageAndGenerate: async () => {},
+  canvasData: null,
+  setCanvasData: () => {},
+  config: {} as Configuration,
+  saveConfig: () => {},
+  showSettings: false,
+  setShowSettings: () => {},
+  serverProps: null,
+});
 
 const getViewingChat = async (convId: string): Promise<ViewingChat | null> => {
   const conv = await StorageUtils.getOneConversation(convId);
@@ -265,8 +279,8 @@ export const AppContextProvider = ({
           throw new Error(chunk.error?.message || 'Unknown error');
         }
         const addedContent = chunk.choices[0].delta.content;
-        const lastContent = pendingMsg.content || '';
         if (addedContent) {
+          const lastContent = pendingMsg.content || '';
           pendingMsg = {
             ...pendingMsg,
             content: lastContent + addedContent,
@@ -293,10 +307,12 @@ export const AppContextProvider = ({
       if ((err as Error).name === 'AbortError') {
         // user stopped the generation via stopGeneration() function
         // we can safely ignore this error
+        if (isDev) console.debug('Generation aborted by user.');
       } else {
-        console.error(err);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        toast.error((err as any)?.message ?? 'Unknown error');
+        console.error('Error during message generation:', err);
+        toast.error(
+          (err as Error)?.message ?? 'Unknown error during generation'
+        );
         throw err; // rethrow
       }
     }
@@ -348,7 +364,9 @@ export const AppContextProvider = ({
     try {
       await generateMessage(convId, currMsgId, onChunk);
       return true;
-    } catch (_) {
+    } catch (error) {
+      console.error('Message sending failed, consider rollback:', error);
+      toast.error('Failed to get response from AI.');
       // TODO: rollback
     }
     return false;
@@ -391,7 +409,7 @@ export const AppContextProvider = ({
     onChunk(currMsgId);
   };
 
-  // if content is undefined, we remove last assistant message
+  // if content is null, we remove last assistant message
   const replaceMessageAndGenerate = async (
     convId: string,
     msg: Message,
@@ -455,4 +473,10 @@ export const AppContextProvider = ({
   );
 };
 
-export const useAppContext = () => useContext(AppContext);
+export const useAppContext = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useAppContext must be used within an AppContextProvider');
+  }
+  return context;
+};

From 1c6dbb7bc70e857ac2c4355dc0addccd4f7dc776 Mon Sep 17 00:00:00 2001
From: Oleg Shulyakov <olegshulyakov@users.noreply.github.com>
Date: Sat, 16 Aug 2025 18:44:05 +0300
Subject: [PATCH 10/10] feat: add ability to disable advanced options

---
 src/components/SettingDialog.tsx | 48 +++++++++++++++++++++------
 src/config.ts                    | 31 ++++++++++++-----
 src/lang/en.json                 | 12 +++++++
 src/utils/app.context.tsx        | 57 ++++++++++++++++++++------------
 src/utils/types.ts               | 29 ++++++++++++----
 5 files changed, 129 insertions(+), 48 deletions(-)

diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
index a247066..88be876 100644
--- a/src/components/SettingDialog.tsx
+++ b/src/components/SettingDialog.tsx
@@ -12,7 +12,7 @@ import {
   RocketLaunchIcon,
   SquaresPlusIcon,
 } from '@heroicons/react/24/outline';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { CONFIG_DEFAULT, isDev } from '../config';
 import * as messages from '../lang/en.json';
 import { useAppContext } from '../utils/app.context';
@@ -47,6 +47,7 @@ interface SettingFieldInput {
   label: string | React.ReactElement;
   note?: string | React.ReactElement;
   key: ConfigurationKey;
+  disabled?: boolean;
 }
 
 interface SettingFieldCustom {
@@ -87,7 +88,8 @@ const TITLE_ICON_CLASSNAME = 'w-4 h-4 mr-1 inline';
 
 const toInput = (
   type: SettingFieldInputType,
-  key: ConfigurationKey
+  key: ConfigurationKey,
+  disabled?: boolean
 ): SettingFieldInput => {
   return {
     type,
@@ -95,13 +97,14 @@ const toInput = (
       Omit<SettingFieldInput, 'type'>,
       'key'
     >),
+    disabled,
     key,
   };
 };
 
 // --- Setting Tabs Configuration ---
 
-const SETTING_TABS: SettingTab[] = [
+const getSettingTabsConfiguration = (config: Configuration): SettingTab[] => [
   /* General */
   {
     title: (
@@ -227,8 +230,13 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
+      toInput(SettingInputType.CHECKBOX, 'overrideGenerationOptions'),
       ...['temperature', 'top_k', 'top_p', 'min_p', 'max_tokens'].map((key) =>
-        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overrideGenerationOptions']
+        )
       ),
 
       /* Samplers */
@@ -244,6 +252,7 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
+      toInput(SettingInputType.CHECKBOX, 'overrideSamplersOptions'),
       ...[
         'samplers',
         'dynatemp_range',
@@ -252,7 +261,11 @@ const SETTING_TABS: SettingTab[] = [
         'xtc_probability',
         'xtc_threshold',
       ].map((key) =>
-        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overrideSamplersOptions']
+        )
       ),
 
       /* Penalties */
@@ -268,6 +281,7 @@ const SETTING_TABS: SettingTab[] = [
           </>
         ),
       },
+      toInput(SettingInputType.CHECKBOX, 'overridePenaltyOptions'),
       ...[
         'repeat_last_n',
         'repeat_penalty',
@@ -278,7 +292,11 @@ const SETTING_TABS: SettingTab[] = [
         'dry_allowed_length',
         'dry_penalty_last_n',
       ].map((key) =>
-        toInput(SettingInputType.SHORT_INPUT, key as ConfigurationKey)
+        toInput(
+          SettingInputType.SHORT_INPUT,
+          key as ConfigurationKey,
+          !config['overridePenaltyOptions']
+        )
       ),
 
       /* Custom */
@@ -377,6 +395,11 @@ export default function SettingDialog({
   const [localConfig, setLocalConfig] = useState<Configuration>(
     JSON.parse(JSON.stringify(config))
   );
+  const settingTabs = useMemo<SettingTab[]>(
+    () => getSettingTabsConfiguration(localConfig),
+    [localConfig]
+  );
+
   const { showConfirm, showAlert } = useModals();
 
   const resetConfig = async () => {
@@ -447,7 +470,7 @@ export default function SettingDialog({
             aria-description="Settings sections"
             tabIndex={0}
           >
-            {SETTING_TABS.map((tab, idx) => (
+            {settingTabs.map((tab, idx) => (
               <button
                 key={idx}
                 className={classNames({
@@ -470,10 +493,10 @@ export default function SettingDialog({
           >
             <details className="dropdown">
               <summary className="btn bt-sm w-full m-1">
-                {SETTING_TABS[tabIdx].title}
+                {settingTabs[tabIdx].title}
               </summary>
               <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-                {SETTING_TABS.map((tab, idx) => (
+                {settingTabs.map((tab, idx) => (
                   <li key={idx}>
                     <button
                       className={classNames({
@@ -493,7 +516,7 @@ export default function SettingDialog({
 
           {/* Right panel, showing setting fields */}
           <div className="grow overflow-y-auto px-4">
-            {SETTING_TABS[tabIdx].fields.map((field, idx) => {
+            {settingTabs[tabIdx].fields.map((field, idx) => {
               const key = `${tabIdx}-${idx}`;
               switch (field.type) {
                 case SettingInputType.SHORT_INPUT:
@@ -595,6 +618,7 @@ const SettingsModalLongInput: React.FC<BaseInputProps & { value: string }> = ({
         placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        disabled={field.disabled}
       />
       {field.note && (
         <div className="text-xs opacity-75 mt-1">{field.note}</div>
@@ -626,6 +650,7 @@ const SettingsModalShortInput: React.FC<
           placeholder={`Default: ${CONFIG_DEFAULT[configKey] || 'none'}`}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          disabled={field.disabled}
         />
       </label>
     </>
@@ -652,8 +677,9 @@ const SettingsModalCheckbox: React.FC<BaseInputProps & { value: boolean }> = ({
           className="toggle"
           checked={value}
           onChange={(e) => onChange(e.target.checked)}
+          disabled={field.disabled}
         />
-        <span className="ml-4">{field.label || configKey}</span>
+        <span className="ml-2">{field.label || configKey}</span>
       </div>
     </>
   );
diff --git a/src/config.ts b/src/config.ts
index 9b83908..00d7ab4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -14,22 +14,35 @@ export const CONFIG_DEFAULT: Configuration = {
   baseUrl: baseUrl,
   apiKey: '',
   systemMessage: '',
+
+  /* conversations */
+  pasteLongTextToFileLen: 10000,
+  pdfAsImage: false,
   showTokensPerSecond: false,
   showThoughtInProgress: false,
   excludeThoughtOnReq: true,
-  pasteLongTextToFileLen: 10000,
-  pdfAsImage: false,
-  // make sure these default values are in sync with `common.h`
-  samplers: 'edkypmxt',
+
+  /* advanced */
+  /* generation */
+  overrideGenerationOptions: false,
   temperature: 0.8,
-  dynatemp_range: 0.0,
-  dynatemp_exponent: 1.0,
   top_k: 40,
   top_p: 0.95,
   min_p: 0.05,
+  max_tokens: -1,
+
+  /* samplers */
+  overrideSamplersOptions: false,
+  // make sure these default values are in sync with `common.h`
+  samplers: 'edkypmxt',
+  dynatemp_range: 0.0,
+  dynatemp_exponent: 1.0,
+  typical_p: 1.0,
   xtc_probability: 0.0,
   xtc_threshold: 0.1,
-  typical_p: 1.0,
+
+  /* penalty */
+  overridePenaltyOptions: false,
   repeat_last_n: 64,
   repeat_penalty: 1.0,
   presence_penalty: 0.0,
@@ -38,10 +51,10 @@ export const CONFIG_DEFAULT: Configuration = {
   dry_base: 1.75,
   dry_allowed_length: 2,
   dry_penalty_last_n: -1,
-  max_tokens: -1,
+
   custom: '', // custom json-stringified object
 
-  // experimental features
+  /* experimental */
   pyIntepreterEnabled: false,
 };
 
diff --git a/src/lang/en.json b/src/lang/en.json
index 0fa3075..b8761b6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -33,6 +33,10 @@
         "label": "Exclude thinking messages on submit",
         "note": "Exclude thinking messages when sending requests to API (recommended)"
       },
+      "overrideGenerationOptions": {
+        "label": "Override Generation Options",
+        "note": ""
+      },
       "temperature": {
         "label": "",
         "note": "Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused."
@@ -53,6 +57,10 @@
         "label": "",
         "note": "The maximum number of token per output."
       },
+      "overrideSamplersOptions": {
+        "label": "Override Samplers Options",
+        "note": ""
+      },
       "samplers": {
         "label": "Samplers queue",
         "note": "The order at which samplers are applied, in simplified way. Default is \"dkypmxt\": dry->top_k->typ_p->top_p->min_p->xtc->temperature"
@@ -77,6 +85,10 @@
         "label": "",
         "note": "XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token."
       },
+      "overridePenaltyOptions": {
+        "label": "Override Penalty Options",
+        "note": ""
+      },
       "repeat_last_n": {
         "label": "",
         "note": "Last n tokens to consider for penalizing repetition"
diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
index 68af6fa..55d506f 100644
--- a/src/utils/app.context.tsx
+++ b/src/utils/app.context.tsx
@@ -226,33 +226,48 @@ export const AppContextProvider = ({
       if (isDev) console.debug({ messages });
 
       // prepare params
-      const params = {
+      let params = {
         messages,
         stream: true,
         cache_prompt: true,
-        samplers: config.samplers,
-        temperature: config.temperature,
-        dynatemp_range: config.dynatemp_range,
-        dynatemp_exponent: config.dynatemp_exponent,
-        top_k: config.top_k,
-        top_p: config.top_p,
-        min_p: config.min_p,
-        typical_p: config.typical_p,
-        xtc_probability: config.xtc_probability,
-        xtc_threshold: config.xtc_threshold,
-        repeat_last_n: config.repeat_last_n,
-        repeat_penalty: config.repeat_penalty,
-        presence_penalty: config.presence_penalty,
-        frequency_penalty: config.frequency_penalty,
-        dry_multiplier: config.dry_multiplier,
-        dry_base: config.dry_base,
-        dry_allowed_length: config.dry_allowed_length,
-        dry_penalty_last_n: config.dry_penalty_last_n,
-        max_tokens: config.max_tokens,
         timings_per_token: !!config.showTokensPerSecond,
-        ...(config.custom.length ? JSON.parse(config.custom) : {}),
       };
 
+      // advanced options
+      if (config.overrideGenerationOptions)
+        params = Object.assign(params, {
+          temperature: config.temperature,
+          top_k: config.top_k,
+          top_p: config.top_p,
+          min_p: config.min_p,
+          max_tokens: config.max_tokens,
+        });
+
+      if (config.overrideSamplersOptions)
+        params = Object.assign(params, {
+          samplers: config.samplers,
+          dynatemp_range: config.dynatemp_range,
+          dynatemp_exponent: config.dynatemp_exponent,
+          typical_p: config.typical_p,
+          xtc_probability: config.xtc_probability,
+          xtc_threshold: config.xtc_threshold,
+        });
+
+      if (config.overridePenaltyOptions)
+        params = Object.assign(params, {
+          repeat_last_n: config.repeat_last_n,
+          repeat_penalty: config.repeat_penalty,
+          presence_penalty: config.presence_penalty,
+          frequency_penalty: config.frequency_penalty,
+          dry_multiplier: config.dry_multiplier,
+          dry_base: config.dry_base,
+          dry_allowed_length: config.dry_allowed_length,
+          dry_penalty_last_n: config.dry_penalty_last_n,
+        });
+
+      if (config.custom.trim().length)
+        params = Object.assign(params, JSON.parse(config.custom));
+
       // send request
       const fetchResponse = await fetch(
         `${config.baseUrl}/v1/chat/completions`,
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 1479223..87a9f64 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -9,21 +9,34 @@ export interface Configuration {
   baseUrl: string;
   apiKey: string;
   systemMessage: string;
+
+  /* conversations */
+  pasteLongTextToFileLen: number;
+  pdfAsImage: boolean;
   showTokensPerSecond: boolean;
   showThoughtInProgress: boolean;
   excludeThoughtOnReq: boolean;
-  pasteLongTextToFileLen: number;
-  pdfAsImage: boolean;
-  samplers: string;
+
+  /* advanced */
+  /* generation */
+  overrideGenerationOptions: boolean;
   temperature: number;
-  dynatemp_range: number;
-  dynatemp_exponent: number;
   top_k: number;
   top_p: number;
   min_p: number;
+  max_tokens: number;
+
+  /* samplers */
+  overrideSamplersOptions: boolean;
+  samplers: string;
+  dynatemp_range: number;
+  dynatemp_exponent: number;
+  typical_p: number;
   xtc_probability: number;
   xtc_threshold: number;
-  typical_p: number;
+
+  /* penalty */
+  overridePenaltyOptions: boolean;
   repeat_last_n: number;
   repeat_penalty: number;
   presence_penalty: number;
@@ -32,8 +45,10 @@ export interface Configuration {
   dry_base: number;
   dry_allowed_length: number;
   dry_penalty_last_n: number;
-  max_tokens: number;
+
   custom: string;
+
+  /* experimental */
   pyIntepreterEnabled: boolean;
 }