From 87318535b265ef706842a1d4082e99d65d1625ba Mon Sep 17 00:00:00 2001
From: Ho Duc Hieu <150573299+hieu-jan@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:48:34 +0700
Subject: [PATCH 1/6] docs: fix algolia configuration

---
 docs/docusaurus.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index f65074bbe..f443a4e48 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -151,13 +151,13 @@ const config = {
         autoCollapseCategories: false,
       },
     },
-    // Agolia DocSearch
+    // Algolia Search Configuration
     algolia: {
       appId: process.env.ALGOLIA_APP_ID || "XXX",
       apiKey: process.env.ALGOLIA_API_KEY || "XXX",
       indexName: "jan",
+      contextualSearch: false,
       insights: true,
-      debug: false,
     },
     // SEO Docusarus
     metadata: [

From c64d0038f30efde1249c598ef3c1f66b7c97b5ae Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 11 Jan 2024 11:36:17 +0700
Subject: [PATCH 2/6] fix: reduce hub header panel contrast color button and
 badge

---
 uikit/src/badge/index.tsx                                 | 1 +
 uikit/src/badge/styles.scss                               | 4 ++++
 uikit/src/button/styles.scss                              | 2 +-
 .../ExploreModels/ExploreModelItemHeader/index.tsx        | 8 ++++----
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
index 387932ff0..2b904432d 100644
--- a/uikit/src/badge/index.tsx
+++ b/uikit/src/badge/index.tsx
@@ -6,6 +6,7 @@ const badgeVariants = cva('badge', {
   variants: {
     themes: {
       primary: 'badge-primary',
+      warning: 'badge-warning',
       success: 'badge-success',
       secondary: 'badge-secondary',
       danger: 'badge-danger',
diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
index 77feb0769..b777892d7 100644
--- a/uikit/src/badge/styles.scss
+++ b/uikit/src/badge/styles.scss
@@ -21,6 +21,10 @@
     @apply border-transparent bg-red-100 text-red-700;
   }
 
+  &-warning {
+    @apply border-transparent bg-yellow-100 text-yellow-700;
+  }
+
   &-outline {
     @apply text-foreground border-border border;
   }
diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
index 2b1e239a5..9c634e67e 100644
--- a/uikit/src/button/styles.scss
+++ b/uikit/src/button/styles.scss
@@ -8,7 +8,7 @@
   }
 
   &-secondary-blue {
-    @apply bg-blue-200 text-blue-900 hover:bg-blue-500/80;
+    @apply bg-blue-200 text-blue-600 hover:bg-blue-500/80;
   }
 
   &-danger {
diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index c35e480f2..2ec57183f 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -71,7 +71,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
   if (isDownloaded) {
     downloadButton = (
       <Button
-        themes="success"
+        themes="secondaryBlue"
         className="min-w-[98px]"
         onClick={onUseModelClick}
       >
@@ -92,21 +92,21 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
 
     if (minimumRamModel > totalRam) {
       return (
-        <Badge className="rounded-md bg-red-500 text-white">
+        <Badge className="rounded-md" themes="danger">
           Not enough RAM
         </Badge>
       )
     }
     if (minimumRamModel < availableRam) {
       return (
-        <Badge className="rounded-md bg-green-500 text-white">
+        <Badge className="rounded-md" themes="success">
           Recommended
         </Badge>
       )
     }
     if (minimumRamModel < totalRam && minimumRamModel > availableRam) {
       return (
-        <Badge className="rounded-md bg-yellow-500 text-white">
+        <Badge className="rounded-md" themes="warning">
           Slow on your device
         </Badge>
       )

From d5271c6f2a175b2befe4b5ea088c0deefdb9777f Mon Sep 17 00:00:00 2001
From: Ho Duc Hieu <150573299+hieu-jan@users.noreply.github.com>
Date: Thu, 11 Jan 2024 14:13:22 +0700
Subject: [PATCH 3/6] docs: fix algolia configuration

---
 docs/.env.example | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/.env.example b/docs/.env.example
index 6caffa2ee..6755f2520 100644
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -1,3 +1,5 @@
 GTM_ID=xxxx
 POSTHOG_PROJECT_API_KEY=xxxx
-POSTHOG_APP_URL=xxxx
\ No newline at end of file
+POSTHOG_APP_URL=xxxx
+ALGOLIA_API_KEY=xxxx
+ALGOLIA_APP_ID=xxxx
\ No newline at end of file

From 5bd4637e34c07b43cea01c7641653f69698660fc Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 10 Jan 2024 13:29:10 +0700
Subject: [PATCH 4/6] Remove middle number slider component

---
 web/containers/Slider/index.tsx               | 78 ++++++++++++++-----
 .../Chat/ModelSetting/predefinedComponent.ts  |  8 +-
 web/styles/base/global.scss                   | 10 +++
 3 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
index 65a4e1ba1..af2336fdb 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/Slider/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import {
   Slider,
@@ -14,11 +14,15 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { InfoIcon } from 'lucide-react'
 
 import { useActiveModel } from '@/hooks/useActiveModel'
+import { useClickOutside } from '@/hooks/useClickOutside'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 import { toSettingParams } from '@/utils/model_param'
 
+import { selectedModelAtom } from '../DropdownListSidebar'
+
 import {
   engineParamsUpdateAtom,
   getActiveThreadIdAtom,
@@ -55,8 +59,13 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
 
+  const selectedModel = useAtomValue(selectedModelAtom)
   const { stopModel } = useActiveModel()
 
+  const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
+
+  useClickOutside(() => setShowTooltip({ max: false, min: false }), null, [])
+
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
     if (engineParams.some((x) => x.name.includes(name))) {
@@ -68,6 +77,19 @@ const SliderRightPanel: React.FC<Props> = ({
     updateModelParameter(threadId, name, e[0])
   }
 
+  const maxValue = (name: string) => {
+    switch (name) {
+      case 'max_tokens':
+        return selectedModel?.parameters.max_tokens || max
+
+      case 'ctx_len':
+        return selectedModel?.settings.ctx_len || max
+
+      default:
+        return max
+    }
+  }
+
   return (
     <div className="flex flex-col">
       <div className="mb-3 flex items-center gap-x-2">
@@ -92,30 +114,48 @@ const SliderRightPanel: React.FC<Props> = ({
             value={[value]}
             onValueChange={onValueChanged}
             min={min}
-            max={max}
+            max={maxValue(name)}
             step={step}
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
-            <p className="absolute left-1/2 -translate-x-1/2 text-sm">
-              {max / 2}
-            </p>
-            <p className="text-sm">{max}</p>
+            <p className="text-sm">{maxValue(name) as number}</p>
           </div>
         </div>
-        <Input
-          className="-mt-4 h-8 w-16"
-          min={min}
-          max={max}
-          value={String(value)}
-          onChange={(e) => {
-            if (Number(e.target.value) >= max) {
-              onValueChanged([Number(max)])
-            } else {
-              onValueChanged([Number(e.target.value)])
-            }
-          }}
-        />
+        <Tooltip open={showTooltip.max || showTooltip.min}>
+          <TooltipTrigger asChild>
+            <Input
+              type="number"
+              className="-mt-4 h-8 w-20"
+              min={min}
+              max={maxValue(name)}
+              value={String(value)}
+              onChange={(e) => {
+                if (Number(e.target.value) > Number(maxValue(name))) {
+                  onValueChanged([Number(maxValue(name))])
+                  setShowTooltip({ max: true, min: false })
+                } else if (Number(e.target.value) < Number(min)) {
+                  onValueChanged([Number(min)])
+                  setShowTooltip({ max: false, min: true })
+                } else {
+                  onValueChanged([Number(e.target.value)])
+                  setShowTooltip({ max: false, min: false })
+                }
+              }}
+            />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent className="max-w-[240px]" side="top">
+              {showTooltip.max && (
+                <span>Automatically set to the maximum allowed tokens</span>
+              )}
+              {showTooltip.min && (
+                <span>Automatically set to the minimum allowed tokens</span>
+              )}
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
       </div>
     </div>
   )
diff --git a/web/screens/Chat/ModelSetting/predefinedComponent.ts b/web/screens/Chat/ModelSetting/predefinedComponent.ts
index b8eafa2f1..abcec508e 100644
--- a/web/screens/Chat/ModelSetting/predefinedComponent.ts
+++ b/web/screens/Chat/ModelSetting/predefinedComponent.ts
@@ -32,7 +32,7 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       min: 0,
       max: 4096,
       step: 128,
-      value: 1024,
+      value: 4096,
     },
   },
   max_tokens: {
@@ -42,10 +42,10 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       'The maximum number of tokens the model will generate in a single response.',
     controllerType: 'slider',
     controllerData: {
-      min: 128,
+      min: 100,
       max: 4096,
-      step: 128,
-      value: 2048,
+      step: 10,
+      value: 4096,
     },
   },
   ngl: {
diff --git a/web/styles/base/global.scss b/web/styles/base/global.scss
index 178501296..05584c9e7 100644
--- a/web/styles/base/global.scss
+++ b/web/styles/base/global.scss
@@ -31,4 +31,14 @@
   [type='submit'] {
     background-color: inherit;
   }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 }

From 8b6f7e846ea28725e1b365eca9f95c270867417b Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 11 Jan 2024 13:03:07 +0700
Subject: [PATCH 5/6] refactor: default max_tokens and ctx_len

---
 web/containers/Checkbox/index.tsx             |  2 +-
 web/containers/ModelConfigInput/index.tsx     |  2 +-
 .../{Slider => SliderRightPanel}/index.tsx    | 28 ++++------------
 web/hooks/useSendChatMessage.ts               |  2 +-
 web/hooks/useUpdateModelParameters.ts         |  2 +-
 web/screens/Chat/EngineSetting/index.tsx      |  4 +--
 web/screens/Chat/ModelSetting/index.tsx       |  9 +++---
 .../ModelSetting/settingComponentBuilder.tsx  |  4 +--
 web/screens/Chat/Sidebar/index.tsx            |  2 +-
 web/utils/componentSettings.ts                | 32 +++++++++++++++++--
 web/utils/{model_param.ts => modelParam.ts}   |  0
 11 files changed, 49 insertions(+), 38 deletions(-)
 rename web/containers/{Slider => SliderRightPanel}/index.tsx (85%)
 rename web/utils/{model_param.ts => modelParam.ts} (100%)

diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
index db331e2f7..f7c39685e 100644
--- a/web/containers/Checkbox/index.tsx
+++ b/web/containers/Checkbox/index.tsx
@@ -16,7 +16,7 @@ import { useActiveModel } from '@/hooks/useActiveModel'
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
index b7f9e5904..7e6ffdc38 100644
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/web/containers/ModelConfigInput/index.tsx
@@ -16,7 +16,7 @@ import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
 
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
diff --git a/web/containers/Slider/index.tsx b/web/containers/SliderRightPanel/index.tsx
similarity index 85%
rename from web/containers/Slider/index.tsx
rename to web/containers/SliderRightPanel/index.tsx
index af2336fdb..1c46be8cf 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/SliderRightPanel/index.tsx
@@ -19,9 +19,7 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
-
-import { selectedModelAtom } from '../DropdownListSidebar'
+import { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
@@ -59,7 +57,6 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
 
-  const selectedModel = useAtomValue(selectedModelAtom)
   const { stopModel } = useActiveModel()
 
   const [showTooltip, setShowTooltip] = useState({ max: false, min: false })
@@ -77,19 +74,6 @@ const SliderRightPanel: React.FC<Props> = ({
     updateModelParameter(threadId, name, e[0])
   }
 
-  const maxValue = (name: string) => {
-    switch (name) {
-      case 'max_tokens':
-        return selectedModel?.parameters.max_tokens || max
-
-      case 'ctx_len':
-        return selectedModel?.settings.ctx_len || max
-
-      default:
-        return max
-    }
-  }
-
   return (
     <div className="flex flex-col">
       <div className="mb-3 flex items-center gap-x-2">
@@ -114,12 +98,12 @@ const SliderRightPanel: React.FC<Props> = ({
             value={[value]}
             onValueChange={onValueChanged}
             min={min}
-            max={maxValue(name)}
+            max={max}
             step={step}
           />
           <div className="relative mt-2 flex items-center justify-between text-gray-400">
             <p className="text-sm">{min}</p>
-            <p className="text-sm">{maxValue(name) as number}</p>
+            <p className="text-sm">{max}</p>
           </div>
         </div>
         <Tooltip open={showTooltip.max || showTooltip.min}>
@@ -128,11 +112,11 @@ const SliderRightPanel: React.FC<Props> = ({
               type="number"
               className="-mt-4 h-8 w-20"
               min={min}
-              max={maxValue(name)}
+              max={max}
               value={String(value)}
               onChange={(e) => {
-                if (Number(e.target.value) > Number(maxValue(name))) {
-                  onValueChanged([Number(maxValue(name))])
+                if (Number(e.target.value) > Number(max)) {
+                  onValueChanged([Number(max)])
                   setShowTooltip({ max: true, min: false })
                 } else if (Number(e.target.value) < Number(min)) {
                   onValueChanged([Number(min)])
diff --git a/web/hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
index 91b709a27..b4fdc9bd3 100644
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -23,7 +23,7 @@ import { currentPromptAtom } from '@/containers/Providers/Jotai'
 
 import { toaster } from '@/containers/Toast'
 
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import { useActiveModel } from './useActiveModel'
 
diff --git a/web/hooks/useUpdateModelParameters.ts b/web/hooks/useUpdateModelParameters.ts
index 632e9f631..0edca5136 100644
--- a/web/hooks/useUpdateModelParameters.ts
+++ b/web/hooks/useUpdateModelParameters.ts
@@ -8,7 +8,7 @@ import {
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import { extensionManager } from '@/extension'
 import {
diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx
index 14c43797f..4394f835b 100644
--- a/web/screens/Chat/EngineSetting/index.tsx
+++ b/web/screens/Chat/EngineSetting/index.tsx
@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai'
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/model_param'
+import { toSettingParams } from '@/utils/modelParam'
 
 import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
 
@@ -18,7 +18,7 @@ const EngineSetting = () => {
 
   const modelSettingParams = toSettingParams(activeModelParams)
 
-  const componentData = getConfigurationsData(modelSettingParams)
+  const componentData = getConfigurationsData(modelSettingParams, selectedModel)
 
   componentData.sort((a, b) => a.title.localeCompare(b.title))
 
diff --git a/web/screens/Chat/ModelSetting/index.tsx b/web/screens/Chat/ModelSetting/index.tsx
index c6fa1b9c4..ff5d3d40f 100644
--- a/web/screens/Chat/ModelSetting/index.tsx
+++ b/web/screens/Chat/ModelSetting/index.tsx
@@ -6,7 +6,7 @@ import { useAtomValue } from 'jotai'
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toRuntimeParams } from '@/utils/model_param'
+import { toRuntimeParams } from '@/utils/modelParam'
 
 import settingComponentBuilder from './settingComponentBuilder'
 
@@ -20,9 +20,10 @@ const ModelSetting = () => {
 
   const modelRuntimeParams = toRuntimeParams(activeModelParams)
 
-  const componentData = getConfigurationsData(modelRuntimeParams)
-
-  componentData.sort((a, b) => a.title.localeCompare(b.title))
+  const componentData = getConfigurationsData(
+    modelRuntimeParams,
+    selectedModel
+  ).toSorted((a, b) => a.title.localeCompare(b.title))
 
   return (
     <div className="flex flex-col">
diff --git a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
index d2e937040..8ff8e7c02 100644
--- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
+++ b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import Checkbox from '@/containers/Checkbox'
 import ModelConfigInput from '@/containers/ModelConfigInput'
-import Slider from '@/containers/Slider'
+import SliderRightPanel from '@/containers/SliderRightPanel'
 
 export type ControllerType = 'slider' | 'checkbox' | 'input'
 
@@ -43,7 +43,7 @@ const settingComponentBuilder = (
         case 'slider':
           const { min, max, step, value } = data.controllerData as SliderData
           return (
-            <Slider
+            <SliderRightPanel
               key={data.name}
               title={data.title}
               description={data.description}
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index b1af0a19e..1826b1700 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -19,7 +19,7 @@ import DropdownListSidebar, {
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import EngineSetting from '../EngineSetting'
 import ModelSetting from '../ModelSetting'
diff --git a/web/utils/componentSettings.ts b/web/utils/componentSettings.ts
index c5cc666b5..76b0a12c0 100644
--- a/web/utils/componentSettings.ts
+++ b/web/utils/componentSettings.ts
@@ -1,4 +1,4 @@
-import { ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
+import { Model, ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
 
 import { presetConfiguration } from '@/screens/Chat/ModelSetting/predefinedComponent'
 
@@ -7,9 +7,16 @@ import { SettingComponentData } from '@/screens/Chat/ModelSetting/settingCompone
 import { ModelParams } from '@/helpers/atoms/Thread.atom'
 
 export const getConfigurationsData = (
-  settings: ModelSettingParams | ModelRuntimeParams
+  settings: ModelSettingParams | ModelRuntimeParams,
+  selectedModel?: Model
 ) => {
   const componentData: SettingComponentData[] = []
+
+  const defaultValue = (value?: number) => {
+    if (value && value < 4096) return value
+    return 4096
+  }
+
   Object.keys(settings).forEach((key: string) => {
     const componentSetting = presetConfiguration[key]
 
@@ -18,8 +25,27 @@ export const getConfigurationsData = (
     }
     if ('slider' === componentSetting.controllerType) {
       const value = Number(settings[key as keyof ModelParams])
-      if ('value' in componentSetting.controllerData)
+      if ('value' in componentSetting.controllerData) {
         componentSetting.controllerData.value = value
+        if ('max' in componentSetting.controllerData) {
+          switch (key) {
+            case 'max_tokens':
+              componentSetting.controllerData.max =
+                selectedModel?.parameters.max_tokens || 4096
+              componentSetting.controllerData.value = defaultValue(
+                selectedModel?.parameters.max_tokens
+              )
+              break
+            case 'ctx_len':
+              componentSetting.controllerData.max =
+                selectedModel?.settings.ctx_len || 4096
+              componentSetting.controllerData.value = defaultValue(
+                selectedModel?.settings.ctx_len
+              )
+              break
+          }
+        }
+      }
     } else if ('input' === componentSetting.controllerType) {
       const value = settings[key as keyof ModelParams] as string
       const placeholder = settings[key as keyof ModelParams] as string
diff --git a/web/utils/model_param.ts b/web/utils/modelParam.ts
similarity index 100%
rename from web/utils/model_param.ts
rename to web/utils/modelParam.ts

From 5179a5076603b9ed64d2c20180a14f4a354c8ba5 Mon Sep 17 00:00:00 2001
From: Ho Duc Hieu <150573299+hieu-jan@users.noreply.github.com>
Date: Thu, 11 Jan 2024 15:20:59 +0700
Subject: [PATCH 6/6] chore: fix darmode ui

---
 docs/src/css/custom.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 115bc3f21..9ed8fd0d8 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,3 +1,8 @@
 .DocCardList--no-description .card p {
   display: none;
-}
\ No newline at end of file
+}
+
+/* For dark theme */
+[data-theme="dark"] .DocSearch {
+  --docsearch-hit-active-color: #090a11; /* Keep the color unchanged */
+}