Merge branch 'main' into add/model-list

.github/ISSUE_TEMPLATE/epic-request.md

@@ -7,22 +7,19 @@ assignees: ''
 
 ---
 
-**Motivation**
+## Motivation
 - 
 
-**Specs & Designs**
+## Specs
 - 
 
-**In Scope**
+## Designs
+[Figma](link)
+
+## Tasklist
+- [ ] 
+
+## Not in Scope
 - 
 
-**Not in Scope**
+## Appendix
-- 
-
-**Tasklist**
-> Note: All issues need to share the same `milestone` as this epic
-- 
-
-**Related Milestones**
-- Past
-- Future

README.md

@@ -70,7 +70,7 @@ Jan is an open-source ChatGPT alternative that runs 100% offline on your compute
   <tr style="text-align: center">
     <td style="text-align:center"><b>Experimental (Nighlty Build)</b></td>
     <td style="text-align:center" colspan="4">
-      <a href='https://github.com/janhq/jan/actions/runs/7329755769'>
+      <a href='https://github.com/janhq/jan/actions/runs/7341513351'>
         <b>Github action artifactory</b>
       </a>
     </td>

docs/docs/guides/04-using-models/02-import-manually.mdx

@@ -1,24 +1,42 @@
 ---
 title: Import Models Manually
+slug: /guides/using-models/import-manually
+description: Jan is a ChatGPT-alternative that runs on your own computer, with a local API server.
+keywords:
+  [
+    Jan AI,
+    Jan,
+    ChatGPT alternative,
+    local AI,
+    private AI,
+    conversational AI,
+    no-subscription fee,
+    large language model,
+    import-models-manually,
+  ]
 ---
 
+:::caution
+This is currently under development.
+:::
+
 {/* Imports */}
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 Jan is compatible with all GGUF models.
 
-If you don't see the model you want in the Hub, or if you have a custom model, you can add it to Jan.
+If you can not find the model you want in the Hub or have a custom model you want to use, you can import it manually.
 
-In this guide we will use our latest model, [Trinity](https://huggingface.co/janhq/trinity-v1-GGUF), as an example.
+In this guide, we will show you how to import a GGUF model from [HuggingFace](https://huggingface.co/), using our lastest model, [Trinity](https://huggingface.co/janhq/trinity-v1-GGUF), as an example.
 
 > We are fast shipping a UI to make this easier, but it's a bit manual for now. Apologies.
 
-## 1. Create a model folder
+## Steps to Manually Import a Model
 
-Navigate to the `~/jan/models` folder on your computer.
+### 1. Create a Model Folder
 
-In `App Settings`, go to `Advanced`, then `Open App Directory`.
+Navigate to the `~/jan/models` folder. You can find this folder by going to `App Settings` > `Advanced` > `Open App Directory`.
 
 <Tabs groupId="operating-systems">
   <TabItem value="mac" label="macOS">
@@ -70,11 +88,11 @@ In the `models` folder, create a folder with the name of the model.
   </TabItem>
 </Tabs>
 
-## 2. Create a model JSON
+### 2. Create a Model JSON
 
-Jan follows a folder-based, [standard model template](/specs/models) called a `model.json` to persist the model configurations on your local filesystem.
+Jan follows a folder-based, [standard model template](/docs/engineering/models) called a `model.json` to persist the model configurations on your local filesystem.
 
-This means you can easily & transparently reconfigure your models and export and share your preferences.
+This means that you can easily reconfigure your models, export them, and share your preferences transparently.
 
 <Tabs groupId="operating-systems">
   <TabItem value="mac" label="macOS">
@@ -89,7 +107,7 @@ This means you can easily & transparently reconfigure your models and export and
     
     ```sh
     cd trinity-v1-7b
-    touch model.json
+    echo {} > model.json
     ```
 
   </TabItem>
@@ -103,48 +121,53 @@ This means you can easily & transparently reconfigure your models and export and
   </TabItem>
 </Tabs>
 
-Copy the following configurations into the `model.json`.
+Edit `model.json` and include the following configurations:
 
-1. Make sure the `id` property is the same as the folder name you created.
+- Ensure the filename must be `model.json`.
-2. Make sure the `source_url` property is the direct binary download link ending in `.gguf`. In HuggingFace, you can find the directl links in `Files and versions` tab.
+- Ensure the `id` property matches the folder name you created.
-3. Ensure you are using the correct `prompt_template`. This is usually provided in the HuggingFace model's description page.
+- Ensure the GGUF filename should match the `id` property exactly.
-
+- Ensure the `source_url` property is the direct binary download link ending in `.gguf`. In HuggingFace, you can find the direct links in `Files and versions` tab.
-> Note: Currently, the filename must be `model.json` and the ID has to be equal to the foldername. In the `model.json`, you have to include the `state` property and set it to `ready` for Jan to recognize the model.
+- Ensure you are using the correct `prompt_template`. This is usually provided in the HuggingFace model's description page.
+- Ensure the `state` property is set to `ready`.
 
 ```js
 {
+    // highlight-start
     "source_url": "https://huggingface.co/janhq/trinity-v1-GGUF/resolve/main/trinity-v1.Q4_K_M.gguf",
     "id": "trinity-v1-7b",
+    // highlight-end
     "object": "model",
-    "name": "Trinity 7B Q4",
+    "name": "Trinity-v1 7B Q4",
     "version": "1.0",
     "description": "Trinity is an experimental model merge of GreenNodeLM & LeoScorpius using the Slerp method. Recommended for daily assistance purposes.",
     "format": "gguf",
     "settings": {
-      "ctx_len": 2048,
+      "ctx_len": 4096,
-      "prompt_template": "<|im_start|>system\n{system_message}<|im_end|>\n<|im_start|>user\n{prompt}<|im_end|>\n<|im_start|>assistant"
+      // highlight-next-line
+      "prompt_template": "{system_message}\n### Instruction:\n{prompt}\n### Response:"
     },
     "parameters": {
-      "max_tokens": 2048
+      "max_tokens": 4096
     },
     "metadata": {
       "author": "Jan",
-      "tags": ["7B", "Merged", "Featured"],
+      "tags": ["7B", "Merged"],
       "size": 4370000000
     },
+    // highlight-next-line
     "state": "ready",
     "engine": "nitro"
   }
 ```
 
-## 3. Download your model
+### 3. Download the Model
 
-Restart the Jan application and look for your model in the Hub.
+Restart Jan and navigate to the Hub. Locate your model and click the `Download` button to download the model binary.
 
-Click the green `download` button to download your actual model binary. This pulls from the `source_url` you provided above.
+![image](assets/download-model.png)
 
-![image](https://hackmd.io/_uploads/HJLAqvwI6.png)
+Your model is now ready to use in Jan.
 
-There you go! You are ready to use your model.
+## Assistance and Support
 
-If you have any questions or want to request for more preconfigured GGUF models, please message us in [Discord](https://discord.gg/Dt7MxDyNNZ).
+If you have questions or are looking for more preconfigured GGUF models, please feel free to join our [Discord community](https://discord.gg/Dt7MxDyNNZ) for support, updates, and discussions.

web/containers/Checkbox/index.tsx

@@ -1,48 +1,33 @@
-import { FieldValues, UseFormRegister } from 'react-hook-form'
+import React from 'react'
 
-import { ModelRuntimeParams } from '@janhq/core'
 import { Switch } from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import {
+import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
-  getActiveThreadIdAtom,
-  getActiveThreadModelRuntimeParamsAtom,
-} from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
   title: string
   checked: boolean
-  register: UseFormRegister<FieldValues>
 }
 
-const Checkbox: React.FC<Props> = ({ name, title, checked, register }) => {
+const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
   const onCheckedChange = (checked: boolean) => {
-    if (!threadId || !activeModelParams) return
+    if (!threadId) return
 
-    const updatedModelParams: ModelRuntimeParams = {
+    updateModelParameter(threadId, name, checked)
-      ...activeModelParams,
-      [name]: checked,
-    }
-
-    updateModelParameter(threadId, updatedModelParams)
   }
 
   return (
     <div className="flex justify-between">
-      <label>{title}</label>
+      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
-      <Switch
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
-        checked={checked}
-        {...register(name)}
-        onCheckedChange={onCheckedChange}
-      />
     </div>
   )
 }

web/containers/DropdownListSidebar/index.tsx

@@ -9,10 +9,6 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipArrow,
   Input,
 } from '@janhq/uikit'
 
@@ -32,14 +28,22 @@ import useRecommendedModel from '@/hooks/useRecommendedModel'
 
 import { toGigabytes } from '@/utils/converter'
 
-import { activeThreadAtom, threadStatesAtom } from '@/helpers/atoms/Thread.atom'
+import {
+  activeThreadAtom,
+  getActiveThreadIdAtom,
+  setThreadModelParamsAtom,
+  threadStatesAtom,
+} from '@/helpers/atoms/Thread.atom'
 
 export const selectedModelAtom = atom<Model | undefined>(undefined)
 
 export default function DropdownListSidebar() {
-  const setSelectedModel = useSetAtom(selectedModelAtom)
+  const activeThreadId = useAtomValue(getActiveThreadIdAtom)
-  const threadStates = useAtomValue(threadStatesAtom)
   const activeThread = useAtomValue(activeThreadAtom)
+  const threadStates = useAtomValue(threadStatesAtom)
+  const setSelectedModel = useSetAtom(selectedModelAtom)
+  const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
+
   const [selected, setSelected] = useState<Model | undefined>()
   const { setMainViewState } = useMainViewState()
   const [openAISettings, setOpenAISettings] = useState<
@@ -58,83 +62,93 @@ export default function DropdownListSidebar() {
   useEffect(() => {
     setSelected(recommendedModel)
     setSelectedModel(recommendedModel)
-  }, [recommendedModel, setSelectedModel])
+
+    if (activeThread) {
+      const finishInit = threadStates[activeThread.id].isFinishInit ?? true
+      if (finishInit) return
+      const modelParams = {
+        ...recommendedModel?.parameters,
+        ...recommendedModel?.settings,
+      }
+      setThreadModelParams(activeThread.id, modelParams)
+    }
+  }, [
+    recommendedModel,
+    activeThread,
+    setSelectedModel,
+    setThreadModelParams,
+    threadStates,
+  ])
 
   const onValueSelected = useCallback(
     (modelId: string) => {
       const model = downloadedModels.find((m) => m.id === modelId)
       setSelected(model)
       setSelectedModel(model)
+
+      if (activeThreadId) {
+        const modelParams = {
+          ...model?.parameters,
+          ...model?.settings,
+        }
+        setThreadModelParams(activeThreadId, modelParams)
+      }
     },
-    [downloadedModels, setSelectedModel]
+    [downloadedModels, activeThreadId, setSelectedModel, setThreadModelParams]
   )
 
   if (!activeThread) {
     return null
   }
-  const finishInit = threadStates[activeThread.id].isFinishInit ?? true
 
   return (
-    <Tooltip>
+    <>
-      <TooltipTrigger className="w-full">
+      <Select value={selected?.id} onValueChange={onValueSelected}>
-        <Select
+        <SelectTrigger className="w-full">
-          disabled={finishInit}
+          <SelectValue placeholder="Choose model to start">
-          value={selected?.id}
+            {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
-          onValueChange={finishInit ? undefined : onValueSelected}
+          </SelectValue>
-        >
+        </SelectTrigger>
-          <SelectTrigger className="w-full">
+        <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
-            <SelectValue placeholder="Choose model to start">
+          <div className="flex w-full items-center space-x-2 px-4 py-2">
-              {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
+            <MonitorIcon size={20} className="text-muted-foreground" />
-            </SelectValue>
+            <span>Local</span>
-          </SelectTrigger>
+          </div>
-          <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
+          <div className="border-b border-border" />
-            <div className="flex w-full items-center space-x-2 px-4 py-2">
+          {downloadedModels.length === 0 ? (
-              <MonitorIcon size={20} className="text-muted-foreground" />
+            <div className="px-4 py-2">
-              <span>Local</span>
+              <p>{`Oops, you don't have a model yet.`}</p>
             </div>
-            <div className="border-b border-border" />
+          ) : (
-            {downloadedModels.length === 0 ? (
+            <SelectGroup>
-              <div className="px-4 py-2">
+              {downloadedModels.map((x, i) => (
-                <p>{`Oops, you don't have a model yet.`}</p>
+                <SelectItem
-              </div>
+                  key={i}
-            ) : (
+                  value={x.id}
-              <SelectGroup>
+                  className={twMerge(x.id === selected?.id && 'bg-secondary')}
-                {downloadedModels.map((x, i) => (
+                >
-                  <SelectItem
+                  <div className="flex w-full justify-between">
-                    key={i}
+                    <span className="line-clamp-1 block">{x.name}</span>
-                    value={x.id}
+                    <span className="font-bold text-muted-foreground">
-                    className={twMerge(x.id === selected?.id && 'bg-secondary')}
+                      {toGigabytes(x.metadata.size)}
-                  >
+                    </span>
-                    <div className="flex w-full justify-between">
+                  </div>
-                      <span className="line-clamp-1 block">{x.name}</span>
+                </SelectItem>
-                      <span className="font-bold text-muted-foreground">
+              ))}
-                        {toGigabytes(x.metadata.size)}
+            </SelectGroup>
-                      </span>
+          )}
-                    </div>
+          <div className="border-b border-border" />
-                  </SelectItem>
+          <div className="w-full px-4 py-2">
-                ))}
+            <Button
-              </SelectGroup>
+              block
-            )}
+              className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
-            <div className="border-b border-border" />
+              onClick={() => setMainViewState(MainViewState.Hub)}
-            <div className="w-full px-4 py-2">
+            >
-              <Button
+              Explore The Hub
-                block
+            </Button>
-                className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
+          </div>
-                onClick={() => setMainViewState(MainViewState.Hub)}
+        </SelectContent>
-              >
+      </Select>
-                Explore The Hub
-              </Button>
-            </div>
-          </SelectContent>
-        </Select>
-      </TooltipTrigger>
-
-      {finishInit && (
-        <TooltipContent sideOffset={10}>
-          <span>Start a new thread to change the model</span>
-          <TooltipArrow />
-        </TooltipContent>
-      )}
 
       {selected?.engine === InferenceEngine.openai && (
         <div className="mt-4">
@@ -154,6 +168,6 @@ export default function DropdownListSidebar() {
           />
         </div>
       )}
-    </Tooltip>
+    </>
   )
 }

web/containers/ModelConfigInput/index.tsx

@@ -0,0 +1,43 @@
+import { Textarea } from '@janhq/uikit'
+
+import { useAtomValue } from 'jotai'
+
+import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+
+import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+
+type Props = {
+  title: string
+  name: string
+  placeholder: string
+  value: string
+}
+
+const ModelConfigInput: React.FC<Props> = ({
+  title,
+  name,
+  value,
+  placeholder,
+}) => {
+  const { updateModelParameter } = useUpdateModelParameters()
+  const threadId = useAtomValue(getActiveThreadIdAtom)
+
+  const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!threadId) return
+
+    updateModelParameter(threadId, name, e.target.value)
+  }
+
+  return (
+    <div className="flex flex-col">
+      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <Textarea
+        placeholder={placeholder}
+        onChange={onValueChanged}
+        value={value}
+      />
+    </div>
+  )
+}
+
+export default ModelConfigInput

web/containers/Providers/index.tsx

@@ -73,7 +73,7 @@ const Providers = (props: PropsWithChildren) => {
           {setupCore && activated && (
             <FeatureToggleWrapper>
               <EventListenerWrapper>
-                <TooltipProvider>{children}</TooltipProvider>
+                <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
               </EventListenerWrapper>
               <Toaster position="top-right" />
             </FeatureToggleWrapper>

web/containers/Slider/index.tsx

@@ -1,15 +1,11 @@
-import { FieldValues, UseFormRegister } from 'react-hook-form'
+import React from 'react'
 
-import { ModelRuntimeParams } from '@janhq/core'
 import { Slider, Input } from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import {
+import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
-  getActiveThreadIdAtom,
-  getActiveThreadModelRuntimeParamsAtom,
-} from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
@@ -18,7 +14,6 @@ type Props = {
   max: number
   step: number
   value: number
-  register: UseFormRegister<FieldValues>
 }
 
 const SliderRightPanel: React.FC<Props> = ({
@@ -28,21 +23,14 @@ const SliderRightPanel: React.FC<Props> = ({
   max,
   step,
   value,
-  register,
 }) => {
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
   const onValueChanged = (e: number[]) => {
-    if (!threadId || !activeModelParams) return
+    if (!threadId) return
 
-    const updatedModelParams: ModelRuntimeParams = {
+    updateModelParameter(threadId, name, e[0])
-      ...activeModelParams,
-      [name]: Number(e[0]),
-    }
-
-    updateModelParameter(threadId, updatedModelParams)
   }
 
   return (
@@ -51,9 +39,6 @@ const SliderRightPanel: React.FC<Props> = ({
       <div className="flex items-center gap-x-4">
         <div className="relative w-full">
           <Slider
-            {...register(name, {
-              setValueAs: (v: string) => parseInt(v),
-            })}
             value={[value]}
             onValueChange={onValueChanged}
             min={min}

web/helpers/atoms/Thread.atom.ts

@@ -1,5 +1,6 @@
 import {
   ModelRuntimeParams,
+  ModelSettingParams,
   Thread,
   ThreadContent,
   ThreadState,
@@ -110,30 +111,26 @@ export const activeThreadAtom = atom<Thread | undefined>((get) =>
 /**
  * Store model params at thread level settings
  */
-export const threadModelRuntimeParamsAtom = atom<
+export const threadModelParamsAtom = atom<Record<string, ModelParams>>({})
-  Record<string, ModelRuntimeParams>
->({})
 
-export const getActiveThreadModelRuntimeParamsAtom = atom<
+export type ModelParams = ModelRuntimeParams | ModelSettingParams
-  ModelRuntimeParams | undefined
+
->((get) => {
+export const getActiveThreadModelParamsAtom = atom<ModelParams | undefined>(
-  const threadId = get(activeThreadIdAtom)
+  (get) => {
-  if (!threadId) {
+    const threadId = get(activeThreadIdAtom)
-    console.debug('Active thread id is undefined')
+    if (!threadId) {
-    return undefined
+      console.debug('Active thread id is undefined')
+      return undefined
+    }
+
+    return get(threadModelParamsAtom)[threadId]
   }
-
-  return get(threadModelRuntimeParamsAtom)[threadId]
-})
-
-export const getThreadModelRuntimeParamsAtom = atom(
-  (get, threadId: string) => get(threadModelRuntimeParamsAtom)[threadId]
 )
 
-export const setThreadModelRuntimeParamsAtom = atom(
+export const setThreadModelParamsAtom = atom(
   null,
-  (get, set, threadId: string, params: ModelRuntimeParams) => {
+  (get, set, threadId: string, params: ModelParams) => {
-    const currentState = { ...get(threadModelRuntimeParamsAtom) }
+    const currentState = { ...get(threadModelParamsAtom) }
     currentState[threadId] = params
     console.debug(
       `Update model params for thread ${threadId}, ${JSON.stringify(
@@ -142,6 +139,6 @@ export const setThreadModelRuntimeParamsAtom = atom(
         2
       )}`
     )
-    set(threadModelRuntimeParamsAtom, currentState)
+    set(threadModelParamsAtom, currentState)
   }
 )

web/hooks/useCreateNewThread.ts

@@ -19,7 +19,6 @@ import {
   setActiveThreadIdAtom,
   threadStatesAtom,
   updateThreadAtom,
-  setThreadModelRuntimeParamsAtom,
 } from '@/helpers/atoms/Thread.atom'
 
 const createNewThreadAtom = atom(null, (get, set, newThread: Thread) => {
@@ -45,10 +44,6 @@ export const useCreateNewThread = () => {
   const createNewThread = useSetAtom(createNewThreadAtom)
   const setActiveThreadId = useSetAtom(setActiveThreadIdAtom)
   const updateThread = useSetAtom(updateThreadAtom)
-  const setThreadModelRuntimeParams = useSetAtom(
-    setThreadModelRuntimeParamsAtom
-  )
-
   const { deleteThread } = useDeleteThread()
 
   const requestCreateNewThread = async (
@@ -77,10 +72,7 @@ export const useCreateNewThread = () => {
       model: {
         id: modelId,
         settings: {},
-        parameters: {
+        parameters: {},
-          stream: true,
-          max_tokens: 1024,
-        },
         engine: undefined,
       },
       instructions: assistant.instructions,
@@ -94,7 +86,6 @@ export const useCreateNewThread = () => {
       created: createdAt,
       updated: createdAt,
     }
-    setThreadModelRuntimeParams(thread.id, assistantInfo.model.parameters)
 
     // add the new thread on top of the thread list to the state
     createNewThread(thread)

web/hooks/useDeleteThread.ts

@@ -22,6 +22,7 @@ import {
   setActiveThreadIdAtom,
   deleteThreadStateAtom,
   threadStatesAtom,
+  updateThreadStateLastMessageAtom,
 } from '@/helpers/atoms/Thread.atom'
 
 export default function useDeleteThread() {
@@ -33,21 +34,23 @@ export default function useDeleteThread() {
   const deleteMessages = useSetAtom(deleteChatMessagesAtom)
   const cleanMessages = useSetAtom(cleanChatMessagesAtom)
   const deleteThreadState = useSetAtom(deleteThreadStateAtom)
-
   const threadStates = useAtomValue(threadStatesAtom)
+  const updateThreadLastMessage = useSetAtom(updateThreadStateLastMessageAtom)
 
   const cleanThread = async (threadId: string) => {
     if (threadId) {
       const thread = threads.filter((c) => c.id === threadId)[0]
       cleanMessages(threadId)
 
-      if (thread)
+      if (thread) {
         await extensionManager
           .get<ConversationalExtension>(ExtensionType.Conversational)
           ?.writeMessages(
             threadId,
             messages.filter((msg) => msg.role === ChatCompletionRole.System)
           )
+        updateThreadLastMessage(threadId, undefined)
+      }
     }
   }
 

web/hooks/useRecommendedModel.ts

@@ -42,6 +42,7 @@ export default function useRecommendedModel() {
   const getRecommendedModel = useCallback(async (): Promise<
     Model | undefined
   > => {
+    const models = await getAndSortDownloadedModels()
     if (!activeThread) {
       return
     }
@@ -49,7 +50,6 @@ export default function useRecommendedModel() {
     const finishInit = threadStates[activeThread.id].isFinishInit ?? true
     if (finishInit) {
       const modelId = activeThread.assistants[0]?.model.id
-      const models = await getAndSortDownloadedModels()
       const model = models.find((model) => model.id === modelId)
 
       if (model) {
@@ -60,7 +60,6 @@ export default function useRecommendedModel() {
     } else {
       const modelId = activeThread.assistants[0]?.model.id
       if (modelId !== '*') {
-        const models = await getAndSortDownloadedModels()
         const model = models.find((model) => model.id === modelId)
 
         if (model) {
@@ -78,7 +77,7 @@ export default function useRecommendedModel() {
     }
 
     // sort the model, for display purpose
-    const models = await getAndSortDownloadedModels()
+
     if (models.length === 0) {
       // if we have no downloaded models, then can't recommend anything
       console.debug("No downloaded models, can't recommend anything")

web/hooks/useSendChatMessage.ts

@@ -24,6 +24,8 @@ import { currentPromptAtom } from '@/containers/Providers/Jotai'
 
 import { toaster } from '@/containers/Toast'
 
+import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+
 import { useActiveModel } from './useActiveModel'
 
 import { extensionManager } from '@/extension/ExtensionManager'
@@ -33,7 +35,7 @@ import {
 } from '@/helpers/atoms/ChatMessage.atom'
 import {
   activeThreadAtom,
-  getActiveThreadModelRuntimeParamsAtom,
+  getActiveThreadModelParamsAtom,
   threadStatesAtom,
   updateThreadAtom,
   updateThreadInitSuccessAtom,
@@ -56,7 +58,7 @@ export default function useSendChatMessage() {
   const modelRef = useRef<Model | undefined>()
   const threadStates = useAtomValue(threadStatesAtom)
   const updateThreadInitSuccess = useSetAtom(updateThreadInitSuccessAtom)
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
 
   useEffect(() => {
     modelRef.current = activeModel
@@ -128,17 +130,22 @@ export default function useSendChatMessage() {
   }
 
   const sendChatMessage = async () => {
-    if (!currentPrompt || currentPrompt.trim().length === 0) {
+    if (!currentPrompt || currentPrompt.trim().length === 0) return
-      return
+
-    }
     if (!activeThread) {
       console.error('No active thread')
       return
     }
     const activeThreadState = threadStates[activeThread.id]
 
+    const runtimeParams = toRuntimeParams(activeModelParams)
+    const settingParams = toSettingParams(activeModelParams)
+
     // if the thread is not initialized, we need to initialize it first
-    if (!activeThreadState.isFinishInit) {
+    if (
+      !activeThreadState.isFinishInit ||
+      activeThread.assistants[0].model.id !== selectedModel?.id
+    ) {
       if (!selectedModel) {
         toaster({ title: 'Please select a model' })
         return
@@ -147,11 +154,6 @@ export default function useSendChatMessage() {
       const assistantName = activeThread.assistants[0].assistant_name ?? ''
       const instructions = activeThread.assistants[0].instructions ?? ''
 
-      const modelParams: ModelRuntimeParams = {
-        ...selectedModel.parameters,
-        ...activeModelParams,
-      }
-
       const updatedThread: Thread = {
         ...activeThread,
         assistants: [
@@ -161,8 +163,8 @@ export default function useSendChatMessage() {
             instructions: instructions,
             model: {
               id: selectedModel.id,
-              settings: selectedModel.settings,
+              settings: settingParams,
-              parameters: modelParams,
+              parameters: runtimeParams,
               engine: selectedModel.engine,
             },
           },
@@ -208,13 +210,17 @@ export default function useSendChatMessage() {
     const msgId = ulid()
 
     const modelRequest = selectedModel ?? activeThread.assistants[0].model
+    if (runtimeParams.stream == null) {
+      runtimeParams.stream = true
+    }
     const messageRequest: MessageRequest = {
       id: msgId,
       threadId: activeThread.id,
       messages,
       model: {
         ...modelRequest,
-        ...(activeModelParams ? { parameters: activeModelParams } : {}),
+        settings: settingParams,
+        parameters: runtimeParams,
       },
     }
     const timestamp = Date.now()

web/hooks/useThreads.ts

@@ -1,6 +1,5 @@
 import {
   ExtensionType,
-  ModelRuntimeParams,
   Thread,
   ThreadState,
   ConversationalExtension,
@@ -12,7 +11,8 @@ import useSetActiveThread from './useSetActiveThread'
 
 import { extensionManager } from '@/extension/ExtensionManager'
 import {
-  threadModelRuntimeParamsAtom,
+  ModelParams,
+  threadModelParamsAtom,
   threadStatesAtom,
   threadsAtom,
 } from '@/helpers/atoms/Thread.atom'
@@ -21,7 +21,7 @@ const useThreads = () => {
   const [threadStates, setThreadStates] = useAtom(threadStatesAtom)
   const [threads, setThreads] = useAtom(threadsAtom)
   const [threadModelRuntimeParams, setThreadModelRuntimeParams] = useAtom(
-    threadModelRuntimeParamsAtom
+    threadModelParamsAtom
   )
   const { setActiveThread } = useSetActiveThread()
 
@@ -29,7 +29,7 @@ const useThreads = () => {
     try {
       const localThreads = await getLocalThreads()
       const localThreadStates: Record<string, ThreadState> = {}
-      const threadModelParams: Record<string, ModelRuntimeParams> = {}
+      const threadModelParams: Record<string, ModelParams> = {}
 
       localThreads.forEach((thread) => {
         if (thread.id != null) {
@@ -42,9 +42,12 @@ const useThreads = () => {
             isFinishInit: true,
           }
 
-          // model params
           const modelParams = thread.assistants?.[0]?.model?.parameters
-          threadModelParams[thread.id] = modelParams
+          const engineParams = thread.assistants?.[0]?.model?.settings
+          threadModelParams[thread.id] = {
+            ...modelParams,
+            ...engineParams,
+          }
         }
       })
 

web/hooks/useUpdateModelParameters.ts

@@ -1,31 +1,34 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   ConversationalExtension,
   ExtensionType,
-  ModelRuntimeParams,
   Thread,
+  ThreadAssistantInfo,
 } from '@janhq/core'
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { toRuntimeParams, toSettingParams } from '@/utils/model_param'
+
 import { extensionManager } from '@/extension'
 import {
+  ModelParams,
   activeThreadStateAtom,
-  setThreadModelRuntimeParamsAtom,
+  getActiveThreadModelParamsAtom,
+  setThreadModelParamsAtom,
   threadsAtom,
-  updateThreadAtom,
 } from '@/helpers/atoms/Thread.atom'
 
 export default function useUpdateModelParameters() {
   const threads = useAtomValue(threadsAtom)
-  const updateThread = useSetAtom(updateThreadAtom)
+  const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
-  const setThreadModelRuntimeParams = useSetAtom(
-    setThreadModelRuntimeParamsAtom
-  )
   const activeThreadState = useAtomValue(activeThreadStateAtom)
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
 
   const updateModelParameter = async (
     threadId: string,
-    params: ModelRuntimeParams
+    name: string,
+    value: number | boolean | string
   ) => {
     const thread = threads.find((thread) => thread.id === threadId)
     if (!thread) {
@@ -37,27 +40,37 @@ export default function useUpdateModelParameters() {
       console.error('No active thread')
       return
     }
+    const updatedModelParams: ModelParams = {
+      ...activeModelParams,
+      [name]: value,
+    }
 
     // update the state
-    setThreadModelRuntimeParams(thread.id, params)
+    setThreadModelParams(thread.id, updatedModelParams)
 
     if (!activeThreadState.isFinishInit) {
       // if thread is not initialized, we don't need to update thread.json
       return
     }
 
-    const assistants = thread.assistants.map((assistant) => {
+    const assistants = thread.assistants.map(
-      assistant.model.parameters = params
+      (assistant: ThreadAssistantInfo) => {
-      return assistant
+        const runtimeParams = toRuntimeParams(updatedModelParams)
-    })
+        const settingParams = toSettingParams(updatedModelParams)
+
+        assistant.model.parameters = runtimeParams
+        assistant.model.settings = settingParams
+        return assistant
+      }
+    )
 
     // update thread
     const updatedThread: Thread = {
       ...thread,
       assistants,
     }
-    updateThread(updatedThread)
+
-    extensionManager
+    await extensionManager
       .get<ConversationalExtension>(ExtensionType.Conversational)
       ?.saveThread(updatedThread)
   }

web/screens/Chat/EngineSetting/index.tsx

@@ -0,0 +1,31 @@
+import { useAtomValue } from 'jotai'
+
+import { selectedModelAtom } from '@/containers/DropdownListSidebar'
+
+import { getConfigurationsData } from '@/utils/componentSettings'
+import { toSettingParams } from '@/utils/model_param'
+
+import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
+
+import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
+
+const EngineSetting: React.FC = () => {
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+  const selectedModel = useAtomValue(selectedModelAtom)
+
+  if (!selectedModel || !activeModelParams) return null
+
+  const modelSettingParams = toSettingParams(activeModelParams)
+
+  const componentData = getConfigurationsData(modelSettingParams)
+
+  componentData.sort((a, b) => a.title.localeCompare(b.title))
+
+  return (
+    <form className="flex flex-col">
+      {settingComponentBuilder(componentData)}
+    </form>
+  )
+}
+
+export default EngineSetting

web/screens/Chat/ModelSetting/index.tsx

@@ -1,47 +1,33 @@
-import { useForm } from 'react-hook-form'
+import React from 'react'
-
-import { ModelRuntimeParams } from '@janhq/core'
 
 import { useAtomValue } from 'jotai'
 
-import { presetConfiguration } from './predefinedComponent'
+import { selectedModelAtom } from '@/containers/DropdownListSidebar'
-import settingComponentBuilder, {
-  SettingComponentData,
-} from './settingComponentBuilder'
 
-import { getActiveThreadModelRuntimeParamsAtom } from '@/helpers/atoms/Thread.atom'
+import { getConfigurationsData } from '@/utils/componentSettings'
+import { toRuntimeParams } from '@/utils/model_param'
 
-export default function ModelSetting() {
+import settingComponentBuilder from './settingComponentBuilder'
-  const { register } = useForm()
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
 
-  if (!activeModelParams) {
+import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
-    return null
-  }
 
-  const componentData: SettingComponentData[] = []
+const ModelSetting: React.FC = () => {
-  Object.keys(activeModelParams).forEach((key) => {
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
-    const componentSetting = presetConfiguration[key]
+  const selectedModel = useAtomValue(selectedModelAtom)
 
-    if (componentSetting) {
+  if (!selectedModel || !activeModelParams) return null
-      if ('value' in componentSetting.controllerData) {
-        componentSetting.controllerData.value = Number(
-          activeModelParams[key as keyof ModelRuntimeParams]
-        )
-      } else if ('checked' in componentSetting.controllerData) {
-        const checked = activeModelParams[
-          key as keyof ModelRuntimeParams
-        ] as boolean
 
-        componentSetting.controllerData.checked = checked
+  const modelRuntimeParams = toRuntimeParams(activeModelParams)
-      }
+
-      componentData.push(componentSetting)
+  const componentData = getConfigurationsData(modelRuntimeParams)
-    }
+
-  })
+  componentData.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
     <form className="flex flex-col">
-      {settingComponentBuilder(componentData, register)}
+      {settingComponentBuilder(componentData)}
     </form>
   )
 }
+
+export default React.memo(ModelSetting)

web/screens/Chat/ModelSetting/predefinedComponent.ts

@@ -1,10 +1,43 @@
 import { SettingComponentData } from './settingComponentBuilder'
 
 export const presetConfiguration: Record<string, SettingComponentData> = {
+  prompt_template: {
+    name: 'prompt_template',
+    title: 'Prompt template',
+    description: 'Prompt template',
+    controllerType: 'input',
+    controllerData: {
+      placeholder: 'Prompt template',
+      value: '',
+    },
+  },
+  stop: {
+    name: 'stop',
+    title: 'Stop',
+    description: 'Stop',
+    controllerType: 'input',
+    controllerData: {
+      placeholder: 'Stop',
+      value: '',
+    },
+  },
+  ctx_len: {
+    name: 'ctx_len',
+    title: 'Context Length',
+    description: 'Context Length',
+    controllerType: 'slider',
+    controllerData: {
+      min: 0,
+      max: 4096,
+      step: 128,
+      value: 1024,
+    },
+  },
   max_tokens: {
     name: 'max_tokens',
     title: 'Max Tokens',
-    description: 'Maximum context length the model can handle.',
+    description:
+      'The maximum number of tokens the model will generate in a single response.',
     controllerType: 'slider',
     controllerData: {
       min: 0,
@@ -56,4 +89,52 @@ export const presetConfiguration: Record<string, SettingComponentData> = {
       value: 0.7,
     },
   },
+  frequency_penalty: {
+    name: 'frequency_penalty',
+    title: 'Frequency Penalty',
+    description: 'Frequency Penalty',
+    controllerType: 'slider',
+    controllerData: {
+      min: 0,
+      max: 1,
+      step: 0.1,
+      value: 0.7,
+    },
+  },
+  presence_penalty: {
+    name: 'presence_penalty',
+    title: 'Presence Penalty',
+    description: 'Presence Penalty',
+    controllerType: 'slider',
+    controllerData: {
+      min: 0,
+      max: 1,
+      step: 0.1,
+      value: 0.7,
+    },
+  },
+  top_p: {
+    name: 'top_p',
+    title: 'Top P',
+    description: 'Top P',
+    controllerType: 'slider',
+    controllerData: {
+      min: 0,
+      max: 1,
+      step: 0.1,
+      value: 0.95,
+    },
+  },
+  n_parallel: {
+    name: 'n_parallel',
+    title: 'N Parallel',
+    description: 'N Parallel',
+    controllerType: 'slider',
+    controllerData: {
+      min: 1,
+      max: 4,
+      step: 1,
+      value: 1,
+    },
+  },
 }

web/screens/Chat/ModelSetting/settingComponentBuilder.tsx

@@ -1,17 +1,21 @@
 /* eslint-disable no-case-declarations */
-import { FieldValues, UseFormRegister } from 'react-hook-form'
-
 import Checkbox from '@/containers/Checkbox'
+import ModelConfigInput from '@/containers/ModelConfigInput'
 import Slider from '@/containers/Slider'
 
-export type ControllerType = 'slider' | 'checkbox'
+export type ControllerType = 'slider' | 'checkbox' | 'input'
 
 export type SettingComponentData = {
   name: string
   title: string
   description: string
   controllerType: ControllerType
-  controllerData: SliderData | CheckboxData
+  controllerData: SliderData | CheckboxData | InputData
+}
+
+export type InputData = {
+  placeholder: string
+  value: string
 }
 
 export type SliderData = {
@@ -25,10 +29,7 @@ type CheckboxData = {
   checked: boolean
 }
 
-const settingComponentBuilder = (
+const settingComponentBuilder = (componentData: SettingComponentData[]) => {
-  componentData: SettingComponentData[],
-  register: UseFormRegister<FieldValues>
-) => {
   const components = componentData.map((data) => {
     switch (data.controllerType) {
       case 'slider':
@@ -42,7 +43,18 @@ const settingComponentBuilder = (
             step={step}
             value={value}
             name={data.name}
-            register={register}
+          />
+        )
+      case 'input':
+        const { placeholder, value: textValue } =
+          data.controllerData as InputData
+        return (
+          <ModelConfigInput
+            title={data.title}
+            key={data.name}
+            name={data.name}
+            placeholder={placeholder}
+            value={textValue}
           />
         )
       case 'checkbox':
@@ -50,7 +62,6 @@ const settingComponentBuilder = (
         return (
           <Checkbox
             key={data.name}
-            register={register}
             name={data.name}
             title={data.title}
             checked={checked}

web/screens/Chat/Sidebar/index.tsx

@@ -1,5 +1,7 @@
 import { join } from 'path'
 
+import React from 'react'
+
 import { getUserSpace, openFileExplorer } from '@janhq/core'
 
 import { Input, Textarea } from '@janhq/uikit'
@@ -16,19 +18,29 @@ import DropdownListSidebar, {
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
+import { toSettingParams } from '@/utils/model_param'
+
+import EngineSetting from '../EngineSetting'
 import ModelSetting from '../ModelSetting'
 
-import { activeThreadAtom, threadStatesAtom } from '@/helpers/atoms/Thread.atom'
+import {
+  activeThreadAtom,
+  getActiveThreadModelParamsAtom,
+  threadStatesAtom,
+} from '@/helpers/atoms/Thread.atom'
 
 export const showRightSideBarAtom = atom<boolean>(true)
 
-export default function Sidebar() {
+const Sidebar: React.FC = () => {
   const showing = useAtomValue(showRightSideBarAtom)
   const activeThread = useAtomValue(activeThreadAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
   const { updateThreadMetadata } = useCreateNewThread()
   const threadStates = useAtomValue(threadStatesAtom)
 
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+  const modelSettingParams = toSettingParams(activeModelParams)
+
   const onReviewInFinderClick = async (type: string) => {
     if (!activeThread) return
     const activeThreadState = threadStates[activeThread.id]
@@ -187,6 +199,17 @@ export default function Sidebar() {
             </div>
           </div>
         </CardSidebar>
+        {Object.keys(modelSettingParams).length ? (
+          <CardSidebar
+            title="Engine"
+            onRevealInFinderClick={onReviewInFinderClick}
+            onViewJsonClick={onViewJsonClick}
+          >
+            <div className="p-2">
+              <EngineSetting />
+            </div>
+          </CardSidebar>
+        ) : null}
         <CardSidebar
           title="Model"
           onRevealInFinderClick={onReviewInFinderClick}
@@ -203,3 +226,5 @@ export default function Sidebar() {
     </div>
   )
 }
+
+export default React.memo(Sidebar)

web/screens/Chat/ThreadList/index.tsx

@@ -161,7 +161,10 @@ export default function ThreadList() {
                       <ModalHeader>
                         <ModalTitle>Delete Thread</ModalTitle>
                       </ModalHeader>
-                      <p>Are you sure you want to delete this thread?</p>
+                      <p>
+                        Are you sure you want to delete this thread? This action
+                        cannot be undone.
+                      </p>
                       <ModalFooter>
                         <div className="flex gap-x-2">
                           <ModalClose asChild>
@@ -169,6 +172,7 @@ export default function ThreadList() {
                           </ModalClose>
                           <ModalClose asChild>
                             <Button
+                              autoFocus
                               themes="danger"
                               onClick={() => deleteThread(thread.id)}
                             >

web/utils/componentSettings.ts

@@ -0,0 +1,39 @@
+import { ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
+
+import { presetConfiguration } from '@/screens/Chat/ModelSetting/predefinedComponent'
+
+import { SettingComponentData } from '@/screens/Chat/ModelSetting/settingComponentBuilder'
+
+import { ModelParams } from '@/helpers/atoms/Thread.atom'
+
+export const getConfigurationsData = (
+  settings: ModelSettingParams | ModelRuntimeParams
+) => {
+  const componentData: SettingComponentData[] = []
+  Object.keys(settings).forEach((key: string) => {
+    const componentSetting = presetConfiguration[key]
+
+    if (!componentSetting) {
+      return
+    }
+    if ('slider' === componentSetting.controllerType) {
+      const value = Number(settings[key as keyof ModelParams])
+      if ('value' in componentSetting.controllerData)
+        componentSetting.controllerData.value = value
+    } else if ('input' === componentSetting.controllerType) {
+      const value = settings[key as keyof ModelParams] as string
+      const placeholder = settings[key as keyof ModelParams] as string
+      if ('value' in componentSetting.controllerData)
+        componentSetting.controllerData.value = value
+      if ('placeholder' in componentSetting.controllerData)
+        componentSetting.controllerData.placeholder = placeholder
+    } else if ('checkbox' === componentSetting.controllerType) {
+      const checked = settings[key as keyof ModelParams] as boolean
+
+      if ('checked' in componentSetting.controllerData)
+        componentSetting.controllerData.checked = checked
+    }
+    componentData.push(componentSetting)
+  })
+  return componentData
+}

web/utils/model_param.ts

@@ -0,0 +1,55 @@
+import { ModelRuntimeParams, ModelSettingParams } from '@janhq/core'
+
+import { ModelParams } from '@/helpers/atoms/Thread.atom'
+
+export const toRuntimeParams = (
+  modelParams?: ModelParams
+): ModelRuntimeParams => {
+  if (!modelParams) return {}
+  const defaultModelParams: ModelRuntimeParams = {
+    temperature: undefined,
+    token_limit: undefined,
+    top_k: undefined,
+    top_p: undefined,
+    stream: undefined,
+    max_tokens: undefined,
+    stop: undefined,
+    frequency_penalty: undefined,
+    presence_penalty: undefined,
+  }
+
+  const runtimeParams: ModelRuntimeParams = {}
+
+  for (const [key, value] of Object.entries(modelParams)) {
+    if (key in defaultModelParams) {
+      // @ts-ignore
+      runtimeParams[key] = value
+    }
+  }
+
+  return runtimeParams
+}
+
+export const toSettingParams = (
+  modelParams?: ModelParams
+): ModelSettingParams => {
+  if (!modelParams) return {}
+  const defaultSettingParams: ModelSettingParams = {
+    ctx_len: undefined,
+    ngl: undefined,
+    embedding: undefined,
+    n_parallel: undefined,
+    cpu_threads: undefined,
+    prompt_template: undefined,
+  }
+  const settingParams: ModelSettingParams = {}
+
+  for (const [key, value] of Object.entries(modelParams)) {
+    if (key in defaultSettingParams) {
+      // @ts-ignore
+      settingParams[key] = value
+    }
+  }
+
+  return settingParams
+}