Merge branch 'main' into feat-1346

docs/.env.example

@@ -1,3 +1,5 @@
 GTM_ID=xxxx
 POSTHOG_PROJECT_API_KEY=xxxx
 POSTHOG_APP_URL=xxxx
+ALGOLIA_API_KEY=xxxx
+ALGOLIA_APP_ID=xxxx

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: [

docs/src/css/custom.css

@@ -1,3 +1,8 @@
 .DocCardList--no-description .card p {
   display: none;
 }
+
+/* For dark theme */
+[data-theme="dark"] .DocSearch {
+  --docsearch-hit-active-color: #090a11; /* Keep the color unchanged */
+}

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',

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;
   }

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 {

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,

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,

web/containers/SliderRightPanel/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import {
   Slider,
@@ -14,10 +14,12 @@ 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 { toSettingParams } from '@/utils/modelParam'
 
 import {
   engineParamsUpdateAtom,
@@ -57,6 +59,10 @@ const SliderRightPanel: React.FC<Props> = ({
 
   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))) {
@@ -97,25 +103,43 @@ const SliderRightPanel: React.FC<Props> = ({
           />
           <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>
           </div>
         </div>
+        <Tooltip open={showTooltip.max || showTooltip.min}>
+          <TooltipTrigger asChild>
             <Input
-          className="-mt-4 h-8 w-16"
+              type="number"
+              className="-mt-4 h-8 w-20"
               min={min}
               max={max}
               value={String(value)}
               onChange={(e) => {
-            if (Number(e.target.value) >= max) {
+                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)])
+                  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>
   )

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'
 

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 {

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))
 

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)
+  const componentData = getConfigurationsData(
-
+    modelRuntimeParams,
-  componentData.sort((a, b) => a.title.localeCompare(b.title))
+    selectedModel
+  ).toSorted((a, b) => a.title.localeCompare(b.title))
 
   return (
     <div className="flex flex-col">

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,
+      step: 10,
-      value: 2048,
+      value: 4096,
     },
   },
   ngl: {

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}

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'

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>
       )

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;
+  }
 }

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