Merge branch 'main' into docs/add-guides

2023-12-28 15:28:32 +07:00 · 2023-12-28 15:28:32 +07:00 · 4f9482263b
commit 4f9482263b
parent cb0975931a 7feaf9694d
47 changed files with 878 additions and 471 deletions
--- a/.github/ISSUE_TEMPLATE/epic-request.md
+++ b/.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**
- 
-
-**Tasklist**
-> Note: All issues need to share the same `milestone` as this epic
- 
-
-**Related Milestones**
- Past
- Future
+## Appendix
--- a/README.md
+++ b/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/7324039788'>
+      <a href='https://github.com/janhq/jan/actions/runs/7341513351'>
        <b>Github action artifactory</b>
      </a>
    </td>
--- a/core/src/api/index.ts
+++ b/core/src/api/index.ts
@ -10,6 +10,7 @@ export enum AppRoute {
  openAppDirectory = 'openAppDirectory',
  openFileExplore = 'openFileExplorer',
  relaunch = 'relaunch',
+  joinPath = 'joinPath'
 }

 export enum AppEvent {
--- a/core/src/core.ts
+++ b/core/src/core.ts
@ -44,6 +44,13 @@ const getUserSpace = (): Promise<string> => global.core.api?.getUserSpace()
 const openFileExplorer: (path: string) => Promise<any> = (path) =>
  global.core.api?.openFileExplorer(path)

+/**
+ * Joins multiple paths together.
+ * @param paths - The paths to join.
+ * @returns {Promise<string>} A promise that resolves with the joined path.
+ */
+const joinPath: (paths: string[]) => Promise<string> = (paths) => global.core.api?.joinPath(paths)
+
 const getResourcePath: () => Promise<string> = () => global.core.api?.getResourcePath()

 /**
@ -66,4 +73,5 @@ export {
  getUserSpace,
  openFileExplorer,
  getResourcePath,
+  joinPath,
 }
--- a/core/src/types/model/modelEntity.ts
+++ b/core/src/types/model/modelEntity.ts
@ -67,13 +67,6 @@ export type Model = {
   */
  description: string

-  /**
-   * The model state.
-   * Default: "to_download"
-   * Enum: "to_download" "downloading" "ready" "running"
-   */
-  state?: ModelState
-
  /**
   * The model settings.
   */
@ -101,15 +94,6 @@ export type ModelMetadata = {
  cover?: string
 }

-/**
- * The Model transition states.
- */
-export enum ModelState {
-  Downloading = 'downloading',
-  Ready = 'ready',
-  Running = 'running',
-}
-
 /**
 * The available model settings.
 */
--- a/docs/docs/guides/04-using-models/02-import-manually.mdx
+++ b/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,45 +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.
-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.
-3. Ensure you are using the correct `prompt_template`. This is usually provided in the HuggingFace model's description page.
+- Ensure the filename must be `model.json`.
+- Ensure the `id` property matches the folder name you created.
+- 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.
+- 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,
-      "prompt_template": "<|im_start|>system\n{system_message}<|im_end|>\n<|im_start|>user\n{prompt}<|im_end|>\n<|im_start|>assistant"
+      "ctx_len": 4096,
+      // 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.
--- a/docs/docs/guides/04-using-models/assets/download-model.png
+++ b/docs/docs/guides/04-using-models/assets/download-model.png
--- a/electron/handlers/app.ts
+++ b/electron/handlers/app.ts
@ -48,6 +48,13 @@ export function handleAppIPCs() {
    shell.openPath(url)
  })

+  /**
+   * Joins multiple paths together, respect to the current OS.
+   */
+  ipcMain.handle(AppRoute.joinPath, async (_event, paths: string[]) =>
+    join(...paths)
+  )
+
  /**
   * Relaunches the app in production - reload window in development.
   * @param _event - The IPC event object.
--- a/electron/handlers/download.ts
+++ b/electron/handlers/download.ts
@ -3,7 +3,7 @@ import { DownloadManager } from './../managers/download'
 import { resolve, join } from 'path'
 import { WindowManager } from './../managers/window'
 import request from 'request'
-import { createWriteStream } from 'fs'
+import { createWriteStream, renameSync } from 'fs'
 import { DownloadEvent, DownloadRoute } from '@janhq/core'
 const progress = require('request-progress')

@ -48,6 +48,8 @@ export function handleDownloaderIPCs() {
    const userDataPath = join(app.getPath('home'), 'jan')
    const destination = resolve(userDataPath, fileName)
    const rq = request(url)
+    // downloading file to a temp file first
+    const downloadingTempFile = `${destination}.download`

    progress(rq, {})
      .on('progress', function (state: any) {
@ -70,6 +72,9 @@ export function handleDownloaderIPCs() {
      })
      .on('end', function () {
        if (DownloadManager.instance.networkRequests[fileName]) {
+          // Finished downloading, rename temp file to actual file
+          renameSync(downloadingTempFile, destination)
+
          WindowManager?.instance.currentWindow?.webContents.send(
            DownloadEvent.onFileDownloadSuccess,
            {
@ -87,7 +92,7 @@ export function handleDownloaderIPCs() {
          )
        }
      })
-      .pipe(createWriteStream(destination))
+      .pipe(createWriteStream(downloadingTempFile))

    DownloadManager.instance.setRequest(fileName, rq)
  })
--- a/extensions/conversational-extension/src/index.ts
+++ b/extensions/conversational-extension/src/index.ts
@ -1,7 +1,6 @@
-import { ExtensionType, fs } from '@janhq/core'
+import { ExtensionType, fs, joinPath } from '@janhq/core'
 import { ConversationalExtension } from '@janhq/core'
 import { Thread, ThreadMessage } from '@janhq/core'
-import { join } from 'path'

 /**
 * JSONConversationalExtension is a ConversationalExtension implementation that provides
@ -69,14 +68,14 @@ export default class JSONConversationalExtension
   */
  async saveThread(thread: Thread): Promise<void> {
    try {
-      const threadDirPath = join(
+      const threadDirPath = await joinPath([
        JSONConversationalExtension._homeDir,
-        thread.id
-      )
-      const threadJsonPath = join(
+        thread.id,
+      ])
+      const threadJsonPath = await joinPath([
        threadDirPath,
-        JSONConversationalExtension._threadInfoFileName
-      )
+        JSONConversationalExtension._threadInfoFileName,
+      ])
      await fs.mkdir(threadDirPath)
      await fs.writeFile(threadJsonPath, JSON.stringify(thread, null, 2))
      Promise.resolve()
@ -89,20 +88,22 @@ export default class JSONConversationalExtension
   * Delete a thread with the specified ID.
   * @param threadId The ID of the thread to delete.
   */
-  deleteThread(threadId: string): Promise<void> {
-    return fs.rmdir(join(JSONConversationalExtension._homeDir, `${threadId}`))
+  async deleteThread(threadId: string): Promise<void> {
+    return fs.rmdir(
+      await joinPath([JSONConversationalExtension._homeDir, `${threadId}`])
+    )
  }

  async addNewMessage(message: ThreadMessage): Promise<void> {
    try {
-      const threadDirPath = join(
+      const threadDirPath = await joinPath([
        JSONConversationalExtension._homeDir,
-        message.thread_id
-      )
-      const threadMessagePath = join(
+        message.thread_id,
+      ])
+      const threadMessagePath = await joinPath([
        threadDirPath,
-        JSONConversationalExtension._threadMessagesFileName
-      )
+        JSONConversationalExtension._threadMessagesFileName,
+      ])
      await fs.mkdir(threadDirPath)
      await fs.appendFile(threadMessagePath, JSON.stringify(message) + '\n')
      Promise.resolve()
@ -116,11 +117,14 @@ export default class JSONConversationalExtension
    messages: ThreadMessage[]
  ): Promise<void> {
    try {
-      const threadDirPath = join(JSONConversationalExtension._homeDir, threadId)
-      const threadMessagePath = join(
+      const threadDirPath = await joinPath([
+        JSONConversationalExtension._homeDir,
+        threadId,
+      ])
+      const threadMessagePath = await joinPath([
        threadDirPath,
-        JSONConversationalExtension._threadMessagesFileName
-      )
+        JSONConversationalExtension._threadMessagesFileName,
+      ])
      await fs.mkdir(threadDirPath)
      await fs.writeFile(
        threadMessagePath,
@ -140,11 +144,11 @@ export default class JSONConversationalExtension
   */
  private async readThread(threadDirName: string): Promise<any> {
    return fs.readFile(
-      join(
+      await joinPath([
        JSONConversationalExtension._homeDir,
        threadDirName,
-        JSONConversationalExtension._threadInfoFileName
-      )
+        JSONConversationalExtension._threadInfoFileName,
+      ])
    )
  }

@ -159,10 +163,10 @@ export default class JSONConversationalExtension

    const threadDirs: string[] = []
    for (let i = 0; i < fileInsideThread.length; i++) {
-      const path = join(
+      const path = await joinPath([
        JSONConversationalExtension._homeDir,
-        fileInsideThread[i]
-      )
+        fileInsideThread[i],
+      ])
      const isDirectory = await fs.isDirectory(path)
      if (!isDirectory) {
        console.debug(`Ignore ${path} because it is not a directory`)
@ -184,7 +188,10 @@ export default class JSONConversationalExtension

  async getAllMessages(threadId: string): Promise<ThreadMessage[]> {
    try {
-      const threadDirPath = join(JSONConversationalExtension._homeDir, threadId)
+      const threadDirPath = await joinPath([
+        JSONConversationalExtension._homeDir,
+        threadId,
+      ])
      const isDir = await fs.isDirectory(threadDirPath)
      if (!isDir) {
        throw Error(`${threadDirPath} is not directory`)
@ -197,10 +204,10 @@ export default class JSONConversationalExtension
        throw Error(`${threadDirPath} not contains message file`)
      }

-      const messageFilePath = join(
+      const messageFilePath = await joinPath([
        threadDirPath,
-        JSONConversationalExtension._threadMessagesFileName
-      )
+        JSONConversationalExtension._threadMessagesFileName,
+      ])

      const result = await fs.readLineByLine(messageFilePath)

--- a/extensions/inference-nitro-extension/bin/linux-start.sh
+++ b/extensions/inference-nitro-extension/bin/linux-start.sh
@ -28,11 +28,12 @@ export CUDA_VISIBLE_DEVICES=$selectedGpuId

 # Attempt to run nitro_linux_amd64_cuda
 cd linux-cuda
-if ./nitro "$@"; then
+./nitro "$@" > output.log 2>&1 || (
+    echo "Check output log" && 
+    if grep -q "CUDA error" output.log; then
+        echo "CUDA error detected, attempting to run nitro_linux_amd64..."
+        cd ../linux-cpu && ./nitro "$@"
+        exit $?
+    fi
    exit $?
-else
-    echo "nitro_linux_amd64_cuda encountered an error, attempting to run nitro_linux_amd64..."
-    cd ../linux-cpu
-    ./nitro "$@"
-    exit $?
-fi
+)
--- a/extensions/inference-nitro-extension/bin/win-start.bat
+++ b/extensions/inference-nitro-extension/bin/win-start.bat
@ -31,9 +31,10 @@ set CUDA_VISIBLE_DEVICES=!gpuId!

 rem Attempt to run nitro_windows_amd64_cuda.exe
 cd win-cuda
-nitro.exe %*
-if %errorlevel% neq 0 goto RunCpuVersion
-goto End
+
+nitro.exe %* > output.log
+type output.log | findstr /C:"CUDA error" >nul
+if %errorlevel% equ 0 ( goto :RunCpuVersion ) else ( goto :End )

 :RunCpuVersion
 rem Run nitro_windows_amd64.exe...
--- a/extensions/inference-nitro-extension/src/index.ts
+++ b/extensions/inference-nitro-extension/src/index.ts
@ -111,7 +111,7 @@ export default class JanInferenceNitroExtension implements InferenceExtension {
      return;
    }
    const userSpacePath = await getUserSpace();
-    const modelFullPath = join(userSpacePath, "models", model.id, model.id);
+    const modelFullPath = join(userSpacePath, "models", model.id);

    const nitroInitResult = await executeOnMain(MODULE, "initModel", {
      modelFullPath: modelFullPath,
--- a/extensions/inference-nitro-extension/src/module.ts
+++ b/extensions/inference-nitro-extension/src/module.ts
@ -13,10 +13,11 @@ const NITRO_HTTP_LOAD_MODEL_URL = `${NITRO_HTTP_SERVER_URL}/inferences/llamacpp/
 const NITRO_HTTP_UNLOAD_MODEL_URL = `${NITRO_HTTP_SERVER_URL}/inferences/llamacpp/unloadModel`;
 const NITRO_HTTP_VALIDATE_MODEL_URL = `${NITRO_HTTP_SERVER_URL}/inferences/llamacpp/modelstatus`;
 const NITRO_HTTP_KILL_URL = `${NITRO_HTTP_SERVER_URL}/processmanager/destroy`;
+const SUPPORTED_MODEL_FORMAT = ".gguf";

 // The subprocess instance for Nitro
 let subprocess = undefined;
-let currentModelFile = undefined;
+let currentModelFile: string = undefined;
 let currentSettings = undefined;

 /**
@ -37,6 +38,17 @@ function stopModel(): Promise<void> {
 */
 async function initModel(wrapper: any): Promise<ModelOperationResponse> {
  currentModelFile = wrapper.modelFullPath;
+  const files: string[] = fs.readdirSync(currentModelFile);
+
+  // Look for GGUF model file
+  const ggufBinFile = files.find(
+    (file) =>
+      file === path.basename(currentModelFile) ||
+      file.toLowerCase().includes(SUPPORTED_MODEL_FORMAT)
+  );
+
+  currentModelFile = path.join(currentModelFile, ggufBinFile);
+
  if (wrapper.model.engine !== "nitro") {
    return Promise.resolve({ error: "Not a nitro model" });
  } else {
@ -66,15 +78,31 @@ async function initModel(wrapper: any): Promise<ModelOperationResponse> {
 async function loadModel(nitroResourceProbe: any | undefined) {
  // Gather system information for CPU physical cores and memory
  if (!nitroResourceProbe) nitroResourceProbe = await getResourcesInfo();
-  return killSubprocess()
-    .then(() => spawnNitroProcess(nitroResourceProbe))
-    .then(() => loadLLMModel(currentSettings))
-    .then(validateModelStatus)
-    .catch((err) => {
-      console.error("error: ", err);
-      // TODO: Broadcast error so app could display proper error message
-      return { error: err, currentModelFile };
-    });
+  return (
+    killSubprocess()
+      .then(() => tcpPortUsed.waitUntilFree(PORT, 300, 5000))
+      // wait for 500ms to make sure the port is free for windows platform
+      .then(() => {
+        if (process.platform === "win32") {
+          return sleep(500);
+        } else {
+          return sleep(0);
+        }
+      })
+      .then(() => spawnNitroProcess(nitroResourceProbe))
+      .then(() => loadLLMModel(currentSettings))
+      .then(validateModelStatus)
+      .catch((err) => {
+        console.error("error: ", err);
+        // TODO: Broadcast error so app could display proper error message
+        return { error: err, currentModelFile };
+      })
+  );
+}
+
+// Add function sleep
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }

 function promptTemplateConverter(promptTemplate) {
--- a/extensions/model-extension/src/index.ts
+++ b/extensions/model-extension/src/index.ts
@ -5,9 +5,11 @@ import {
  abortDownload,
  getResourcePath,
  getUserSpace,
+  InferenceEngine,
+  joinPath,
 } from '@janhq/core'
-import { ModelExtension, Model, ModelState } from '@janhq/core'
-import { join } from 'path'
+import { basename } from 'path'
+import { ModelExtension, Model } from '@janhq/core'

 /**
 * A extension for models
@ -15,6 +17,9 @@ import { join } from 'path'
 export default class JanModelExtension implements ModelExtension {
  private static readonly _homeDir = 'models'
  private static readonly _modelMetadataFileName = 'model.json'
+  private static readonly _supportedModelFormat = '.gguf'
+  private static readonly _incompletedModelFileName = '.download'
+  private static readonly _offlineInferenceEngine = InferenceEngine.nitro

  /**
   * Implements type from JanExtension.
@ -54,10 +59,10 @@ export default class JanModelExtension implements ModelExtension {

      // copy models folder from resources to home directory
      const resourePath = await getResourcePath()
-      const srcPath = join(resourePath, 'models')
+      const srcPath = await joinPath([resourePath, 'models'])

      const userSpace = await getUserSpace()
-      const destPath = join(userSpace, JanModelExtension._homeDir)
+      const destPath = await joinPath([userSpace, JanModelExtension._homeDir])

      await fs.syncFile(srcPath, destPath)

@ -88,11 +93,18 @@ export default class JanModelExtension implements ModelExtension {
   */
  async downloadModel(model: Model): Promise<void> {
    // create corresponding directory
-    const directoryPath = join(JanModelExtension._homeDir, model.id)
-    await fs.mkdir(directoryPath)
+    const modelDirPath = await joinPath([JanModelExtension._homeDir, model.id])
+    await fs.mkdir(modelDirPath)

-    // path to model binary
-    const path = join(directoryPath, model.id)
+    // try to retrieve the download file name from the source url
+    // if it fails, use the model ID as the file name
+    const extractedFileName = basename(model.source_url)
+    const fileName = extractedFileName
+      .toLowerCase()
+      .endsWith(JanModelExtension._supportedModelFormat)
+      ? extractedFileName
+      : model.id
+    const path = await joinPath([modelDirPath, fileName])
    downloadFile(model.source_url, path)
  }

@ -103,10 +115,12 @@ export default class JanModelExtension implements ModelExtension {
   */
  async cancelModelDownload(modelId: string): Promise<void> {
    return abortDownload(
-      join(JanModelExtension._homeDir, modelId, modelId)
-    ).then(() => {
-      fs.deleteFile(join(JanModelExtension._homeDir, modelId, modelId))
-    })
+      await joinPath([JanModelExtension._homeDir, modelId, modelId])
+    ).then(async () =>
+      fs.deleteFile(
+        await joinPath([JanModelExtension._homeDir, modelId, modelId])
+      )
+    )
  }

  /**
@ -116,27 +130,16 @@ export default class JanModelExtension implements ModelExtension {
   */
  async deleteModel(modelId: string): Promise<void> {
    try {
-      const dirPath = join(JanModelExtension._homeDir, modelId)
+      const dirPath = await joinPath([JanModelExtension._homeDir, modelId])

      // remove all files under dirPath except model.json
      const files = await fs.listFiles(dirPath)
-      const deletePromises = files.map((fileName: string) => {
+      const deletePromises = files.map(async (fileName: string) => {
        if (fileName !== JanModelExtension._modelMetadataFileName) {
-          return fs.deleteFile(join(dirPath, fileName))
+          return fs.deleteFile(await joinPath([dirPath, fileName]))
        }
      })
      await Promise.allSettled(deletePromises)
-
-      // update the state as default
-      const jsonFilePath = join(
-        dirPath,
-        JanModelExtension._modelMetadataFileName
-      )
-      const json = await fs.readFile(jsonFilePath)
-      const model = JSON.parse(json) as Model
-      delete model.state
-
-      await fs.writeFile(jsonFilePath, JSON.stringify(model, null, 2))
    } catch (err) {
      console.error(err)
    }
@ -148,24 +151,14 @@ export default class JanModelExtension implements ModelExtension {
   * @returns A Promise that resolves when the model is saved.
   */
  async saveModel(model: Model): Promise<void> {
-    const jsonFilePath = join(
+    const jsonFilePath = await joinPath([
      JanModelExtension._homeDir,
      model.id,
-      JanModelExtension._modelMetadataFileName
-    )
+      JanModelExtension._modelMetadataFileName,
+    ])

    try {
-      await fs.writeFile(
-        jsonFilePath,
-        JSON.stringify(
-          {
-            ...model,
-            state: ModelState.Ready,
-          },
-          null,
-          2
-        )
-      )
+      await fs.writeFile(jsonFilePath, JSON.stringify(model, null, 2))
    } catch (err) {
      console.error(err)
    }
@ -176,11 +169,34 @@ export default class JanModelExtension implements ModelExtension {
   * @returns A Promise that resolves with an array of all models.
   */
  async getDownloadedModels(): Promise<Model[]> {
-    const models = await this.getModelsMetadata()
-    return models.filter((model) => model.state === ModelState.Ready)
+    return await this.getModelsMetadata(
+      async (modelDir: string, model: Model) => {
+        if (model.engine !== JanModelExtension._offlineInferenceEngine) {
+          return true
+        }
+        return await fs
+          .listFiles(await joinPath([JanModelExtension._homeDir, modelDir]))
+          .then((files: string[]) => {
+            // or model binary exists in the directory
+            // model binary name can match model ID or be a .gguf file and not be an incompleted model file
+            return (
+              files.includes(modelDir) ||
+              files.some(
+                (file) =>
+                  file
+                    .toLowerCase()
+                    .includes(JanModelExtension._supportedModelFormat) &&
+                  !file.endsWith(JanModelExtension._incompletedModelFileName)
+              )
+            )
+          })
+      }
+    )
  }

-  private async getModelsMetadata(): Promise<Model[]> {
+  private async getModelsMetadata(
+    selector?: (path: string, model: Model) => Promise<boolean>
+  ): Promise<Model[]> {
    try {
      const filesUnderJanRoot = await fs.listFiles('')
      if (!filesUnderJanRoot.includes(JanModelExtension._homeDir)) {
@ -193,26 +209,35 @@ export default class JanModelExtension implements ModelExtension {
      const allDirectories: string[] = []
      for (const file of files) {
        const isDirectory = await fs.isDirectory(
-          join(JanModelExtension._homeDir, file)
+          await joinPath([JanModelExtension._homeDir, file])
        )
        if (isDirectory) {
          allDirectories.push(file)
        }
      }

-      const readJsonPromises = allDirectories.map((dirName) => {
-        const jsonPath = join(
+      const readJsonPromises = allDirectories.map(async (dirName) => {
+        // filter out directories that don't match the selector
+
+        // read model.json
+        const jsonPath = await joinPath([
          JanModelExtension._homeDir,
          dirName,
-          JanModelExtension._modelMetadataFileName
-        )
-        return this.readModelMetadata(jsonPath)
+          JanModelExtension._modelMetadataFileName,
+        ])
+        let model = await this.readModelMetadata(jsonPath)
+        model = typeof model === 'object' ? model : JSON.parse(model)
+
+        if (selector && !(await selector?.(dirName, model))) {
+          return
+        }
+        return model
      })
      const results = await Promise.allSettled(readJsonPromises)
      const modelData = results.map((result) => {
        if (result.status === 'fulfilled') {
          try {
-            return JSON.parse(result.value) as Model
+            return result.value as Model
          } catch {
            console.debug(`Unable to parse model metadata: ${result.value}`)
            return undefined
@ -230,7 +255,7 @@ export default class JanModelExtension implements ModelExtension {
  }

  private readModelMetadata(path: string) {
-    return fs.readFile(join(path))
+    return fs.readFile(path)
  }

  /**
--- a/web/containers/CardSidebar/index.tsx
+++ b/web/containers/CardSidebar/index.tsx
@ -29,6 +29,13 @@ export default function CardSidebar({

  useClickOutside(() => setMore(false), null, [menu, toggle])

+  let openFolderTitle: string = 'Open Containing Folder'
+  if (isMac) {
+    openFolderTitle = 'Reveal in Finder'
+  } else if (isWindows) {
+    openFolderTitle = 'Reveal in File Explorer'
+  }
+
  return (
    <div
      className={twMerge(
@ -74,7 +81,7 @@ export default function CardSidebar({
            >
              <FolderOpenIcon size={16} className="text-muted-foreground" />
              <span className="text-bold text-black dark:text-muted-foreground">
-                Reveal in Finder
+                {openFolderTitle}
              </span>
            </div>
            <div
--- a/web/containers/Checkbox/index.tsx
+++ b/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 {
-  getActiveThreadIdAtom,
-  getActiveThreadModelRuntimeParamsAtom,
-} from '@/helpers/atoms/Thread.atom'
+import { getActiveThreadIdAtom } 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 = {
-      ...activeModelParams,
-      [name]: checked,
-    }
-
-    updateModelParameter(threadId, updatedModelParams)
+    updateModelParameter(threadId, name, checked)
  }

  return (
    <div className="flex justify-between">
-      <label>{title}</label>
-      <Switch
-        checked={checked}
-        {...register(name)}
-        onCheckedChange={onCheckedChange}
-      />
+      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  )
 }
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/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 threadStates = useAtomValue(threadStatesAtom)
+  const activeThreadId = useAtomValue(getActiveThreadIdAtom)
  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
-          disabled={finishInit}
-          value={selected?.id}
-          onValueChange={finishInit ? undefined : onValueSelected}
-        >
-          <SelectTrigger className="w-full">
-            <SelectValue placeholder="Choose model to start">
-              {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
-            <div className="flex w-full items-center space-x-2 px-4 py-2">
-              <MonitorIcon size={20} className="text-muted-foreground" />
-              <span>Local</span>
+    <>
+      <Select value={selected?.id} onValueChange={onValueSelected}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Choose model to start">
+            {downloadedModels.filter((x) => x.id === selected?.id)[0]?.name}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent className="right-5 block w-full min-w-[300px] pr-0">
+          <div className="flex w-full items-center space-x-2 px-4 py-2">
+            <MonitorIcon size={20} className="text-muted-foreground" />
+            <span>Local</span>
+          </div>
+          <div className="border-b border-border" />
+          {downloadedModels.length === 0 ? (
+            <div className="px-4 py-2">
+              <p>{`Oops, you don't have a model yet.`}</p>
            </div>
-            <div className="border-b border-border" />
-            {downloadedModels.length === 0 ? (
-              <div className="px-4 py-2">
-                <p>{`Oops, you don't have a model yet.`}</p>
-              </div>
-            ) : (
-              <SelectGroup>
-                {downloadedModels.map((x, i) => (
-                  <SelectItem
-                    key={i}
-                    value={x.id}
-                    className={twMerge(x.id === selected?.id && 'bg-secondary')}
-                  >
-                    <div className="flex w-full justify-between">
-                      <span className="line-clamp-1 block">{x.name}</span>
-                      <span className="font-bold text-muted-foreground">
-                        {toGigabytes(x.metadata.size)}
-                      </span>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            )}
-            <div className="border-b border-border" />
-            <div className="w-full px-4 py-2">
-              <Button
-                block
-                className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
-                onClick={() => setMainViewState(MainViewState.Hub)}
-              >
-                Explore The Hub
-              </Button>
-            </div>
-          </SelectContent>
-        </Select>
-      </TooltipTrigger>
-
-      {finishInit && (
-        <TooltipContent sideOffset={10}>
-          <span>Start a new thread to change the model</span>
-          <TooltipArrow />
-        </TooltipContent>
-      )}
+          ) : (
+            <SelectGroup>
+              {downloadedModels.map((x, i) => (
+                <SelectItem
+                  key={i}
+                  value={x.id}
+                  className={twMerge(x.id === selected?.id && 'bg-secondary')}
+                >
+                  <div className="flex w-full justify-between">
+                    <span className="line-clamp-1 block">{x.name}</span>
+                    <span className="font-bold text-muted-foreground">
+                      {toGigabytes(x.metadata.size)}
+                    </span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+          <div className="border-b border-border" />
+          <div className="w-full px-4 py-2">
+            <Button
+              block
+              className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
+              onClick={() => setMainViewState(MainViewState.Hub)}
+            >
+              Explore The Hub
+            </Button>
+          </div>
+        </SelectContent>
+      </Select>

      {selected?.engine === InferenceEngine.openai && (
        <div className="mt-4">
@ -154,6 +168,6 @@ export default function DropdownListSidebar() {
          />
        </div>
      )}
-    </Tooltip>
+    </>
  )
 }
--- a/web/containers/Layout/BottomBar/DownloadingState/index.tsx
+++ b/web/containers/Layout/BottomBar/DownloadingState/index.tsx
@ -1,7 +1,5 @@
 import { Fragment } from 'react'

-import { ExtensionType } from '@janhq/core'
-import { ModelExtension } from '@janhq/core'
 import {
  Progress,
  Modal,
@ -12,14 +10,19 @@ import {
  ModalTrigger,
 } from '@janhq/uikit'

+import { useAtomValue } from 'jotai'
+
+import useDownloadModel from '@/hooks/useDownloadModel'
 import { useDownloadState } from '@/hooks/useDownloadState'

 import { formatDownloadPercentage } from '@/utils/converter'

-import { extensionManager } from '@/extension'
+import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'

 export default function DownloadingState() {
  const { downloadStates } = useDownloadState()
+  const downloadingModels = useAtomValue(downloadingModelsAtom)
+  const { abortModelDownload } = useDownloadModel()

  const totalCurrentProgress = downloadStates
    .map((a) => a.size.transferred + a.size.transferred)
@ -73,9 +76,10 @@ export default function DownloadingState() {
                      size="sm"
                      onClick={() => {
                        if (item?.modelId) {
-                          extensionManager
-                            .get<ModelExtension>(ExtensionType.Model)
-                            ?.cancelModelDownload(item.modelId)
+                          const model = downloadingModels.find(
+                            (model) => model.id === item.modelId
+                          )
+                          if (model) abortModelDownload(model)
                        }
                      }}
                    >
--- a/web/containers/ModalCancelDownload/index.tsx
+++ b/web/containers/ModalCancelDownload/index.tsx
@ -1,6 +1,5 @@
 import { useMemo } from 'react'

-import { ModelExtension, ExtensionType } from '@janhq/core'
 import { Model } from '@janhq/core'

 import {
@ -17,11 +16,12 @@ import {

 import { atom, useAtomValue } from 'jotai'

+import useDownloadModel from '@/hooks/useDownloadModel'
 import { useDownloadState } from '@/hooks/useDownloadState'

 import { formatDownloadPercentage } from '@/utils/converter'

-import { extensionManager } from '@/extension'
+import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'

 type Props = {
  model: Model
@ -30,6 +30,7 @@ type Props = {

 export default function ModalCancelDownload({ model, isFromList }: Props) {
  const { modelDownloadStateAtom } = useDownloadState()
+  const downloadingModels = useAtomValue(downloadingModelsAtom)
  const downloadAtom = useMemo(
    () => atom((get) => get(modelDownloadStateAtom)[model.id]),
    // eslint-disable-next-line react-hooks/exhaustive-deps
@ -37,6 +38,7 @@ export default function ModalCancelDownload({ model, isFromList }: Props) {
  )
  const downloadState = useAtomValue(downloadAtom)
  const cancelText = `Cancel ${formatDownloadPercentage(downloadState.percent)}`
+  const { abortModelDownload } = useDownloadModel()

  return (
    <Modal>
@ -80,9 +82,10 @@ export default function ModalCancelDownload({ model, isFromList }: Props) {
                themes="danger"
                onClick={() => {
                  if (downloadState?.modelId) {
-                    extensionManager
-                      .get<ModelExtension>(ExtensionType.Model)
-                      ?.cancelModelDownload(downloadState.modelId)
+                    const model = downloadingModels.find(
+                      (model) => model.id === downloadState.modelId
+                    )
+                    if (model) abortModelDownload(model)
                  }
                }}
              >
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/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
--- a/web/containers/Providers/EventListener.tsx
+++ b/web/containers/Providers/EventListener.tsx
@ -1,34 +1,35 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */

-import { PropsWithChildren, useEffect, useRef } from 'react'
+import { basename } from 'path'

-import { ExtensionType } from '@janhq/core'
-import { ModelExtension } from '@janhq/core'
+import { PropsWithChildren, useEffect, useRef } from 'react'

 import { useAtomValue, useSetAtom } from 'jotai'

 import { useDownloadState } from '@/hooks/useDownloadState'
 import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'

+import { modelBinFileName } from '@/utils/model'
+
 import EventHandler from './EventHandler'

 import { appDownloadProgress } from './Jotai'

-import { extensionManager } from '@/extension/ExtensionManager'
 import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'

 export default function EventListenerWrapper({ children }: PropsWithChildren) {
  const setProgress = useSetAtom(appDownloadProgress)
  const models = useAtomValue(downloadingModelsAtom)
  const modelsRef = useRef(models)
-  useEffect(() => {
-    modelsRef.current = models
-  }, [models])
+
  const { setDownloadedModels, downloadedModels } = useGetDownloadedModels()
  const { setDownloadState, setDownloadStateSuccess, setDownloadStateFailed } =
    useDownloadState()
  const downloadedModelRef = useRef(downloadedModels)

+  useEffect(() => {
+    modelsRef.current = models
+  }, [models])
  useEffect(() => {
    downloadedModelRef.current = downloadedModels
  }, [downloadedModels])
@ -38,40 +39,36 @@ export default function EventListenerWrapper({ children }: PropsWithChildren) {
      window.electronAPI.onFileDownloadUpdate(
        (_event: string, state: any | undefined) => {
          if (!state) return
-          setDownloadState({
-            ...state,
-            modelId: state.fileName.split('/').pop() ?? '',
-          })
+          const model = modelsRef.current.find(
+            (model) => modelBinFileName(model) === basename(state.fileName)
+          )
+          if (model)
+            setDownloadState({
+              ...state,
+              modelId: model.id,
+            })
        }
      )

-      window.electronAPI.onFileDownloadError(
-        (_event: string, callback: any) => {
-          console.error('Download error', callback)
-          const modelId = callback.fileName.split('/').pop() ?? ''
-          setDownloadStateFailed(modelId)
-        }
-      )
+      window.electronAPI.onFileDownloadError((_event: string, state: any) => {
+        console.error('Download error', state)
+        const model = modelsRef.current.find(
+          (model) => modelBinFileName(model) === basename(state.fileName)
+        )
+        if (model) setDownloadStateFailed(model.id)
+      })

-      window.electronAPI.onFileDownloadSuccess(
-        (_event: string, callback: any) => {
-          if (callback && callback.fileName) {
-            const modelId = callback.fileName.split('/').pop() ?? ''
-
-            const model = modelsRef.current.find((e) => e.id === modelId)
-
-            setDownloadStateSuccess(modelId)
-
-            if (model)
-              extensionManager
-                .get<ModelExtension>(ExtensionType.Model)
-                ?.saveModel(model)
-                .then(() => {
-                  setDownloadedModels([...downloadedModelRef.current, model])
-                })
+      window.electronAPI.onFileDownloadSuccess((_event: string, state: any) => {
+        if (state && state.fileName) {
+          const model = modelsRef.current.find(
+            (model) => modelBinFileName(model) === basename(state.fileName)
+          )
+          if (model) {
+            setDownloadStateSuccess(model.id)
+            setDownloadedModels([...downloadedModelRef.current, model])
          }
        }
-      )
+      })

      window.electronAPI.onAppUpdateDownloadUpdate(
        (_event: string, progress: any) => {
--- a/web/containers/Providers/index.tsx
+++ b/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>
--- a/web/containers/Slider/index.tsx
+++ b/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 {
-  getActiveThreadIdAtom,
-  getActiveThreadModelRuntimeParamsAtom,
-} from '@/helpers/atoms/Thread.atom'
+import { getActiveThreadIdAtom } 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 = {
-      ...activeModelParams,
-      [name]: Number(e[0]),
-    }
-
-    updateModelParameter(threadId, updatedModelParams)
+    updateModelParameter(threadId, name, e[0])
  }

  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}
--- a/web/helpers/atoms/Thread.atom.ts
+++ b/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<
-  Record<string, ModelRuntimeParams>
->({})
+export const threadModelParamsAtom = atom<Record<string, ModelParams>>({})

-export const getActiveThreadModelRuntimeParamsAtom = atom<
-  ModelRuntimeParams | undefined
->((get) => {
-  const threadId = get(activeThreadIdAtom)
-  if (!threadId) {
-    console.debug('Active thread id is undefined')
-    return undefined
+export type ModelParams = ModelRuntimeParams | ModelSettingParams
+
+export const getActiveThreadModelParamsAtom = atom<ModelParams | undefined>(
+  (get) => {
+    const threadId = get(activeThreadIdAtom)
+    if (!threadId) {
+      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) => {
-    const currentState = { ...get(threadModelRuntimeParamsAtom) }
+  (get, set, threadId: string, params: ModelParams) => {
+    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)
  }
 )
--- a/web/hooks/useCreateNewThread.ts
+++ b/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: {
-          stream: true,
-          max_tokens: 1024,
-        },
+        parameters: {},
        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)
--- a/web/hooks/useDeleteThread.ts
+++ b/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)
+      }
    }
  }

--- a/web/hooks/useDownloadModel.ts
+++ b/web/hooks/useDownloadModel.ts
@ -1,7 +1,15 @@
-import { Model, ExtensionType, ModelExtension } from '@janhq/core'
+import {
+  Model,
+  ExtensionType,
+  ModelExtension,
+  abortDownload,
+  joinPath,
+} from '@janhq/core'

 import { useSetAtom } from 'jotai'

+import { modelBinFileName } from '@/utils/model'
+
 import { useDownloadState } from './useDownloadState'

 import { extensionManager } from '@/extension/ExtensionManager'
@ -33,8 +41,14 @@ export default function useDownloadModel() {
      .get<ModelExtension>(ExtensionType.Model)
      ?.downloadModel(model)
  }
+  const abortModelDownload = async (model: Model) => {
+    await abortDownload(
+      await joinPath(['models', model.id, modelBinFileName(model)])
+    )
+  }

  return {
    downloadModel,
+    abortModelDownload,
  }
 }
--- a/web/hooks/useEngineSettings.ts
+++ b/web/hooks/useEngineSettings.ts
@ -1,10 +1,10 @@
-import { join } from 'path'
-
-import { fs } from '@janhq/core'
+import { fs, joinPath } from '@janhq/core'

 export const useEngineSettings = () => {
  const readOpenAISettings = async () => {
-    const settings = await fs.readFile(join('engines', 'openai.json'))
+    const settings = await fs.readFile(
+      await joinPath(['engines', 'openai.json'])
+    )
    if (settings) {
      return JSON.parse(settings)
    }
@ -17,7 +17,10 @@ export const useEngineSettings = () => {
  }) => {
    const settings = await readOpenAISettings()
    settings.api_key = apiKey
-    await fs.writeFile(join('engines', 'openai.json'), JSON.stringify(settings))
+    await fs.writeFile(
+      await joinPath(['engines', 'openai.json']),
+      JSON.stringify(settings)
+    )
  }
  return { readOpenAISettings, saveOpenAISettings }
 }
--- a/web/hooks/useRecommendedModel.ts
+++ b/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")
--- a/web/hooks/useSendChatMessage.ts
+++ b/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) {
-      return
-    }
+    if (!currentPrompt || currentPrompt.trim().length === 0) 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,
-              parameters: modelParams,
+              settings: settingParams,
+              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()
--- a/web/hooks/useThreads.ts
+++ b/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,
+          }
        }
      })

--- a/web/hooks/useUpdateModelParameters.ts
+++ b/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 setThreadModelRuntimeParams = useSetAtom(
-    setThreadModelRuntimeParamsAtom
-  )
+  const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
  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) => {
-      assistant.model.parameters = params
-      return assistant
-    })
+    const assistants = thread.assistants.map(
+      (assistant: ThreadAssistantInfo) => {
+        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)
  }
--- a/web/next.config.js
+++ b/web/next.config.js
@ -32,6 +32,9 @@ const nextConfig = {
          JSON.stringify(process.env.ANALYTICS_ID) ?? JSON.stringify('xxx'),
        ANALYTICS_HOST:
          JSON.stringify(process.env.ANALYTICS_HOST) ?? JSON.stringify('xxx'),
+        isMac: process.platform === 'darwin',
+        isWindows: process.platform === 'win32',
+        isLinux: process.platform === 'linux',
      }),
    ]
    return config
--- a/web/screens/Chat/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@ -116,7 +116,7 @@ const ChatBody: React.FC = () => {
      ) : (
        <ScrollToBottom className="flex h-full w-full flex-col">
          {messages.map((message, index) => (
-            <>
+            <div key={message.id}>
              <ChatItem {...message} key={message.id} />

              {message.status === MessageStatus.Error &&
@ -126,8 +126,8 @@ const ChatBody: React.FC = () => {
                    className="mt-10 flex flex-col items-center"
                  >
                    <span className="mb-3 text-center text-sm font-medium text-gray-500">
-                      Oops! The generation was interrupted. Let&apos;s
-                      give it another go!
+                      Oops! The generation was interrupted. Let&apos;s give it
+                      another go!
                    </span>
                    <Button
                      className="w-min"
@ -140,7 +140,7 @@ const ChatBody: React.FC = () => {
                    </Button>
                  </div>
                )}
-            </>
+            </div>
          ))}
        </ScrollToBottom>
      )}
--- a/web/screens/Chat/EngineSetting/index.tsx
+++ b/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
--- a/web/screens/Chat/ModelSetting/index.tsx
+++ b/web/screens/Chat/ModelSetting/index.tsx
@ -1,47 +1,33 @@
-import { useForm } from 'react-hook-form'
-
-import { ModelRuntimeParams } from '@janhq/core'
+import React from 'react'

 import { useAtomValue } from 'jotai'

-import { presetConfiguration } from './predefinedComponent'
-import settingComponentBuilder, {
-  SettingComponentData,
-} from './settingComponentBuilder'
+import { selectedModelAtom } from '@/containers/DropdownListSidebar'

-import { getActiveThreadModelRuntimeParamsAtom } from '@/helpers/atoms/Thread.atom'
+import { getConfigurationsData } from '@/utils/componentSettings'
+import { toRuntimeParams } from '@/utils/model_param'

-export default function ModelSetting() {
-  const { register } = useForm()
-  const activeModelParams = useAtomValue(getActiveThreadModelRuntimeParamsAtom)
+import settingComponentBuilder from './settingComponentBuilder'

-  if (!activeModelParams) {
-    return null
-  }
+import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'

-  const componentData: SettingComponentData[] = []
-  Object.keys(activeModelParams).forEach((key) => {
-    const componentSetting = presetConfiguration[key]
+const ModelSetting: React.FC = () => {
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+  const selectedModel = useAtomValue(selectedModelAtom)

-    if (componentSetting) {
-      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
+  if (!selectedModel || !activeModelParams) return null

-        componentSetting.controllerData.checked = checked
-      }
-      componentData.push(componentSetting)
-    }
-  })
+  const modelRuntimeParams = toRuntimeParams(activeModelParams)
+
+  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)
--- a/web/screens/Chat/ModelSetting/predefinedComponent.ts
+++ b/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,
+    },
+  },
 }
--- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
+++ b/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 = (
-  componentData: SettingComponentData[],
-  register: UseFormRegister<FieldValues>
-) => {
+const settingComponentBuilder = (componentData: SettingComponentData[]) => {
  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}
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@ -1,6 +1,6 @@
-import { join } from 'path'
+import React from 'react'

-import { getUserSpace, openFileExplorer } from '@janhq/core'
+import { getUserSpace, openFileExplorer, joinPath } from '@janhq/core'

 import { Input, Textarea } from '@janhq/uikit'

@ -16,19 +16,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]
@ -42,23 +52,22 @@ export default function Sidebar() {
    const assistantId = activeThread.assistants[0]?.assistant_id
    switch (type) {
      case 'Thread':
-        filePath = join('threads', activeThread.id)
+        filePath = await joinPath(['threads', activeThread.id])
        break
      case 'Model':
        if (!selectedModel) return
-        filePath = join('models', selectedModel.id)
+        filePath = await joinPath(['models', selectedModel.id])
        break
      case 'Assistant':
        if (!assistantId) return
-        filePath = join('assistants', assistantId)
+        filePath = await joinPath(['assistants', assistantId])
        break
      default:
        break
    }

    if (!filePath) return
-
-    const fullPath = join(userSpace, filePath)
+    const fullPath = await joinPath([userSpace, filePath])
    openFileExplorer(fullPath)
  }

@ -75,23 +84,22 @@ export default function Sidebar() {
    const assistantId = activeThread.assistants[0]?.assistant_id
    switch (type) {
      case 'Thread':
-        filePath = join('threads', activeThread.id, 'thread.json')
+        filePath = await joinPath(['threads', activeThread.id, 'thread.json'])
        break
      case 'Model':
        if (!selectedModel) return
-        filePath = join('models', selectedModel.id, 'model.json')
+        filePath = await joinPath(['models', selectedModel.id, 'model.json'])
        break
      case 'Assistant':
        if (!assistantId) return
-        filePath = join('assistants', assistantId, 'assistant.json')
+        filePath = await joinPath(['assistants', assistantId, 'assistant.json'])
        break
      default:
        break
    }

    if (!filePath) return
-
-    const fullPath = join(userSpace, filePath)
+    const fullPath = await joinPath([userSpace, filePath])
    openFileExplorer(fullPath)
  }

@ -187,6 +195,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 +222,5 @@ export default function Sidebar() {
    </div>
  )
 }
+
+export default React.memo(Sidebar)
--- a/web/screens/Chat/ThreadList/index.tsx
+++ b/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)}
                            >
--- a/web/screens/ExploreModels/index.tsx
+++ b/web/screens/ExploreModels/index.tsx
@ -58,17 +58,28 @@ const ExploreModelsScreen = () => {
                className="w-full object-cover"
              />
              <div className="absolute left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2">
-                <SearchIcon
-                  size={20}
-                  className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
-                />
-                <Input
-                  placeholder="Search models"
-                  className="bg-white pl-9 dark:bg-background"
-                  onChange={(e) => {
-                    setsearchValue(e.target.value)
-                  }}
-                />
+                <div className="relative">
+                  <SearchIcon
+                    size={20}
+                    className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  />
+                  <Input
+                    placeholder="Search models"
+                    className="bg-white pl-9 dark:bg-background"
+                    onChange={(e) => {
+                      setsearchValue(e.target.value)
+                    }}
+                  />
+                </div>
+                <div className="mt-2 text-center">
+                  <a
+                    href="https://jan.ai/guides/using-models/import-manually/"
+                    target="_blank"
+                    className="font-semibold text-white underline"
+                  >
+                    How to manually import models
+                  </a>
+                </div>
              </div>
            </div>
            <div className="mx-auto w-4/5 py-6">
--- a/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx
+++ b/web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx
@ -5,8 +5,6 @@ import React, { useState, useEffect, useRef, useContext } from 'react'

 import { Button } from '@janhq/uikit'

-import Loader from '@/containers/Loader'
-
 import { FeatureToggleContext } from '@/context/FeatureToggle'

 import { useGetAppVersion } from '@/hooks/useGetAppVersion'
@ -18,7 +16,6 @@ import { extensionManager } from '@/extension'
 const ExtensionCatalog = () => {
  const [activeExtensions, setActiveExtensions] = useState<any[]>([])
  const [extensionCatalog, setExtensionCatalog] = useState<any[]>([])
-  const [isLoading, setIsLoading] = useState<boolean>(false)
  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const { version } = useGetAppVersion()
  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
@ -95,8 +92,6 @@ const ExtensionCatalog = () => {
    }
  }

-  if (isLoading) return <Loader description="Installing ..." />
-
  return (
    <div className="block w-full">
      {extensionCatalog
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@ -8,6 +8,9 @@ declare global {
  declare const VERSION: string
  declare const ANALYTICS_ID: string
  declare const ANALYTICS_HOST: string
+  declare const isMac: boolean
+  declare const isWindows: boolean
+  declare const isLinux: boolean
  interface Core {
    api: APIFunctions
    events: EventEmitter
--- a/web/utils/componentSettings.ts
+++ b/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
+}
--- a/web/utils/model.ts
+++ b/web/utils/model.ts
@ -0,0 +1,12 @@
+import { basename } from 'path'
+
+import { Model } from '@janhq/core'
+
+export const modelBinFileName = (model: Model) => {
+  const modelFormatExt = '.gguf'
+  const extractedFileName = basename(model.source_url) ?? model.id
+  const fileName = extractedFileName.toLowerCase().endsWith(modelFormatExt)
+    ? extractedFileName
+    : model.id
+  return fileName
+}
--- a/web/utils/model_param.ts
+++ b/web/utils/model_param.ts
@ -0,0 +1,53 @@
+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) {
+      runtimeParams[key as keyof ModelRuntimeParams] = 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) {
+      settingParams[key as keyof ModelSettingParams] = value
+    }
+  }
+
+  return settingParams
+}