From 347e47f1ce79e65e050a37e2c67f995723392e3b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 2 Jan 2024 01:24:16 +0700
Subject: [PATCH] feat: finalize UI form new right panel thread

---
 web/containers/CardSidebar/index.tsx          |   6 +-
 web/containers/Checkbox/index.tsx             |  45 ++-
 web/containers/ModelConfigInput/index.tsx     |  33 +-
 web/containers/Slider/index.tsx               |  44 ++-
 web/hooks/useUpdateModelParameters.ts         |   9 +-
 web/screens/Chat/ChatBody/index.tsx           |   1 -
 web/screens/Chat/EngineSetting/index.tsx      |   9 +-
 web/screens/Chat/ModelSetting/index.tsx       |   9 +-
 .../ModelSetting/settingComponentBuilder.tsx  | 141 ++++---
 web/screens/Chat/Sidebar/index.tsx            | 349 ++++++++++++------
 web/utils/model_param.ts                      |   1 +
 11 files changed, 418 insertions(+), 229 deletions(-)

diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx
index 5de285569..8d0b42314 100644
--- a/web/containers/CardSidebar/index.tsx
+++ b/web/containers/CardSidebar/index.tsx
@@ -41,7 +41,7 @@ export default function CardSidebar({
   return (
     <div
       className={twMerge(
-        'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-600/10',
+        'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-900',
         asChild ? 'rounded-lg border' : 'border-t'
       )}
     >
@@ -56,7 +56,7 @@ export default function CardSidebar({
           {!asChild && (
             <div
               ref={setToggle}
-              className="cursor-pointer rounded-lg bg-zinc-100 p-2 pr-0 dark:bg-zinc-600/10"
+              className="cursor-pointer rounded-lg bg-zinc-100 p-2 pr-0 dark:bg-zinc-900"
               onClick={() => setMore(!more)}
             >
               <MoreVerticalIcon className="h-5 w-5" />
@@ -64,7 +64,7 @@ export default function CardSidebar({
           )}
           <button
             onClick={() => setShow(!show)}
-            className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-600/10"
+            className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900"
           >
             <ChevronDownIcon
               className={twMerge(
diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
index 074ed0e82..c2dbd7a79 100644
--- a/web/containers/Checkbox/index.tsx
+++ b/web/containers/Checkbox/index.tsx
@@ -9,38 +9,49 @@ import {
   TooltipTrigger,
 } from '@janhq/uikit'
 
-import { useAtomValue } from 'jotai'
+// import { useAtomValue } from 'jotai'
 
 import { InfoIcon } from 'lucide-react'
 
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+// import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+// import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
   title: string
   description: string
-  checked: boolean
+  value: boolean
+  onBlur: () => void
+  onChange: () => void
 }
 
-const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
-  const { updateModelParameter } = useUpdateModelParameters()
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+const Checkbox: React.FC<Props> = ({
+  name,
+  value,
+  title,
+  description,
+  onChange,
+  onBlur,
+}) => {
+  // const { updateModelParameter } = useUpdateModelParameters()
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onCheckedChange = (checked: boolean) => {
-    if (!threadId) return
+  // const onCheckedChange = (checked: boolean) => {
+  //   if (!threadId) return
 
-    updateModelParameter(threadId, name, checked)
-  }
+  //   updateModelParameter(threadId, name, checked)
+  // }
 
   return (
     <div className="flex justify-between">
       <div className="mb-1 flex items-center gap-x-2">
-        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
+          {title}
+        </p>
         <Tooltip>
           <TooltipTrigger asChild>
-            <InfoIcon size={16} className="flex-shrink-0" />
+            <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
           </TooltipTrigger>
           <TooltipPortal>
             <TooltipContent side="top" className="max-w-[240px]">
@@ -51,7 +62,13 @@ const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
         </Tooltip>
       </div>
 
-      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+      <Switch
+        name={name}
+        defaultChecked={value}
+        onCheckedChange={onChange}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
     </div>
   )
 }
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
index 52808569c..53f74685c 100644
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/web/containers/ModelConfigInput/index.tsx
@@ -7,13 +7,13 @@ import {
   TooltipTrigger,
 } from '@janhq/uikit'
 
-import { useAtomValue } from 'jotai'
+// import { useAtomValue } from 'jotai'
 
 import { InfoIcon } from 'lucide-react'
 
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+// import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+// import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   title: string
@@ -21,6 +21,8 @@ type Props = {
   description: string
   placeholder: string
   value: string
+  onBlur: () => void
+  onChange: () => void
 }
 
 const ModelConfigInput: React.FC<Props> = ({
@@ -29,23 +31,27 @@ const ModelConfigInput: React.FC<Props> = ({
   value,
   description,
   placeholder,
+  onChange,
+  onBlur,
 }) => {
-  const { updateModelParameter } = useUpdateModelParameters()
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+  // const { updateModelParameter } = useUpdateModelParameters()
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (!threadId) return
+  // const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  //   if (!threadId) return
 
-    updateModelParameter(threadId, name, e.target.value)
-  }
+  //   updateModelParameter(threadId, name, e.target.value)
+  // }
 
   return (
     <div className="flex flex-col">
       <div className="mb-4 flex items-center gap-x-2">
-        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
+          {title}
+        </p>
         <Tooltip>
           <TooltipTrigger asChild>
-            <InfoIcon size={16} className="flex-shrink-0" />
+            <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
           </TooltipTrigger>
           <TooltipPortal>
             <TooltipContent side="top" className="max-w-[240px]">
@@ -56,9 +62,10 @@ const ModelConfigInput: React.FC<Props> = ({
         </Tooltip>
       </div>
       <Textarea
+        name={name}
         placeholder={placeholder}
-        onChange={onValueChanged}
-        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
       />
     </div>
   )
diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
index 2811ac86d..9cc94dbf7 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/Slider/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
 import { Slider, Input, TooltipPortal } from '@janhq/uikit'
@@ -7,12 +8,12 @@ import {
   TooltipTrigger,
   TooltipArrow,
 } from '@janhq/uikit'
-import { useAtomValue } from 'jotai'
+// import { useAtomValue } from 'jotai'
 import { InfoIcon } from 'lucide-react'
 
-import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+// import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+// import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
@@ -21,7 +22,9 @@ type Props = {
   min: number
   max: number
   step: number
-  value: number
+  value: number[]
+  onChange: (e: any) => void
+  onBlur: (e: any) => void
 }
 
 const SliderRightPanel: React.FC<Props> = ({
@@ -30,24 +33,28 @@ const SliderRightPanel: React.FC<Props> = ({
   min,
   max,
   description,
+  onChange,
+  onBlur,
   step,
   value,
 }) => {
-  const { updateModelParameter } = useUpdateModelParameters()
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+  // const { updateModelParameter } = useUpdateModelParameters()
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onValueChanged = (e: number[]) => {
-    if (!threadId) return
-    updateModelParameter(threadId, name, e[0])
-  }
+  // const onValueChanged = (e: number[]) => {
+  //   if (!threadId) return
+  //   updateModelParameter(threadId, name, e[0])
+  // }
 
   return (
     <div className="flex flex-col">
       <div className="mb-4 flex items-center gap-x-2">
-        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
+          {title}
+        </p>
         <Tooltip>
           <TooltipTrigger asChild>
-            <InfoIcon size={16} className="flex-shrink-0" />
+            <InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
           </TooltipTrigger>
           <TooltipPortal>
             <TooltipContent side="top" className="max-w-[240px]">
@@ -60,8 +67,11 @@ const SliderRightPanel: React.FC<Props> = ({
       <div className="flex items-center gap-x-4">
         <div className="relative w-full">
           <Slider
-            value={[value]}
-            onValueChange={onValueChanged}
+            defaultValue={value}
+            onValueChange={(e) => onChange(e[0])}
+            onChange={(e) => onChange(e)}
+            onBlur={onBlur}
+            name={name}
             min={min}
             max={max}
             step={step}
@@ -78,8 +88,10 @@ const SliderRightPanel: React.FC<Props> = ({
           className="-mt-4 h-8 w-16"
           min={min}
           max={max}
-          value={String(value)}
-          onChange={(e) => onValueChanged([Number(e.target.value)])}
+          name={name}
+          value={value[0] || String(value[0])}
+          onChange={(e) => onChange([e.target.value])}
+          onBlur={onBlur}
         />
       </div>
     </div>
diff --git a/web/hooks/useUpdateModelParameters.ts b/web/hooks/useUpdateModelParameters.ts
index db7c759fc..a12b6cd29 100644
--- a/web/hooks/useUpdateModelParameters.ts
+++ b/web/hooks/useUpdateModelParameters.ts
@@ -25,11 +25,7 @@ export default function useUpdateModelParameters() {
   const activeThreadState = useAtomValue(activeThreadStateAtom)
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
 
-  const updateModelParameter = async (
-    threadId: string,
-    name: string,
-    value: number | boolean | string
-  ) => {
+  const updateModelParameter = async (threadId: string, values: any) => {
     const thread = threads.find((thread) => thread.id === threadId)
     if (!thread) {
       console.error(`Thread ${threadId} not found`)
@@ -40,9 +36,10 @@ export default function useUpdateModelParameters() {
       console.error('No active thread')
       return
     }
+
     const updatedModelParams: ModelParams = {
       ...activeModelParams,
-      [name]: value,
+      ...values,
     }
 
     // update the state
diff --git a/web/screens/Chat/ChatBody/index.tsx b/web/screens/Chat/ChatBody/index.tsx
index e1ae98b6e..d2a34388e 100644
--- a/web/screens/Chat/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@@ -118,7 +118,6 @@ const ChatBody: React.FC = () => {
           {messages.map((message, index) => (
             <div key={message.id}>
               <ChatItem {...message} key={message.id} />
-
               {message.status === MessageStatus.Error &&
                 index === messages.length - 1 && (
                   <div
diff --git a/web/screens/Chat/EngineSetting/index.tsx b/web/screens/Chat/EngineSetting/index.tsx
index ed3aa7953..d0c3e0ff5 100644
--- a/web/screens/Chat/EngineSetting/index.tsx
+++ b/web/screens/Chat/EngineSetting/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useAtomValue } from 'jotai'
 
 import { selectedModelAtom } from '@/containers/DropdownListSidebar'
@@ -9,7 +10,7 @@ import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
 
 import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
 
-const EngineSetting: React.FC = () => {
+const EngineSetting = (props: { form: any }) => {
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
 
@@ -22,9 +23,9 @@ const EngineSetting: React.FC = () => {
   componentData.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <form className="flex flex-col">
-      {settingComponentBuilder(componentData)}
-    </form>
+    <div className="flex flex-col">
+      {settingComponentBuilder(componentData, props.form)}
+    </div>
   )
 }
 
diff --git a/web/screens/Chat/ModelSetting/index.tsx b/web/screens/Chat/ModelSetting/index.tsx
index 97e0d4ecd..1f1be06bf 100644
--- a/web/screens/Chat/ModelSetting/index.tsx
+++ b/web/screens/Chat/ModelSetting/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 
 import { useAtomValue } from 'jotai'
@@ -11,7 +12,7 @@ import settingComponentBuilder from './settingComponentBuilder'
 
 import { getActiveThreadModelParamsAtom } from '@/helpers/atoms/Thread.atom'
 
-const ModelSetting: React.FC = () => {
+const ModelSetting = (props: { form: any }) => {
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
 
@@ -24,9 +25,9 @@ const ModelSetting: React.FC = () => {
   componentData.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <form className="flex flex-col">
-      {settingComponentBuilder(componentData)}
-    </form>
+    <div className="flex flex-col">
+      {settingComponentBuilder(componentData, props.form)}
+    </div>
   )
 }
 
diff --git a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
index a751bfb92..59ebb5af2 100644
--- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
+++ b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
@@ -1,4 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-case-declarations */
+import { FormControl, FormField, FormItem, FormMessage } from '@janhq/uikit'
+
 import Checkbox from '@/containers/Checkbox'
 import ModelConfigInput from '@/containers/ModelConfigInput'
 import Slider from '@/containers/Slider'
@@ -29,51 +32,99 @@ type CheckboxData = {
   checked: boolean
 }
 
-const settingComponentBuilder = (componentData: SettingComponentData[]) => {
-  const components = componentData.map((data) => {
-    switch (data.controllerType) {
-      case 'slider':
-        const { min, max, step, value } = data.controllerData as SliderData
-        return (
-          <Slider
-            key={data.name}
-            title={data.title}
-            description={data.description}
-            min={min}
-            max={max}
-            step={step}
-            value={value}
-            name={data.name}
-          />
-        )
-      case 'input':
-        const { placeholder, value: textValue } =
-          data.controllerData as InputData
-        return (
-          <ModelConfigInput
-            title={data.title}
-            key={data.name}
-            name={data.name}
-            description={data.description}
-            placeholder={placeholder}
-            value={textValue}
-          />
-        )
-      case 'checkbox':
-        const { checked } = data.controllerData as CheckboxData
-        return (
-          <Checkbox
-            key={data.name}
-            name={data.name}
-            description={data.description}
-            title={data.title}
-            checked={checked}
-          />
-        )
-      default:
-        return null
-    }
-  })
+const settingComponentBuilder = (
+  componentData: SettingComponentData[],
+  form?: any,
+  onlyPrompt?: boolean
+) => {
+  const components = componentData
+    .filter((x) =>
+      onlyPrompt ? x.name === 'prompt_template' : x.name !== 'prompt_template'
+    )
+    .map((data) => {
+      switch (data.controllerType) {
+        case 'slider':
+          const { min, max, step, value } = data.controllerData as SliderData
+          return (
+            <FormField
+              key={data.title}
+              control={form.control}
+              name={data.name}
+              render={({ field }) => (
+                <>
+                  <FormItem>
+                    <FormControl>
+                      <Slider
+                        key={data.name}
+                        title={data.title}
+                        description={data.description}
+                        min={min}
+                        max={max}
+                        step={step}
+                        {...field}
+                        value={[field.value || value]}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </>
+              )}
+            />
+          )
+        case 'input':
+          const { placeholder, value: textValue } =
+            data.controllerData as InputData
+          return (
+            <FormField
+              key={data.title}
+              control={form.control}
+              name={data.name}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <ModelConfigInput
+                      title={data.title}
+                      key={data.name}
+                      description={data.description}
+                      placeholder={placeholder}
+                      {...field}
+                      value={field.value || textValue}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )
+        case 'checkbox':
+          const { checked } = data.controllerData as CheckboxData
+          return (
+            <FormField
+              key={data.title}
+              control={form.control}
+              name={data.name}
+              render={({ field }) => (
+                <>
+                  <FormItem>
+                    <FormControl>
+                      <Checkbox
+                        key={data.name}
+                        description={data.description}
+                        title={data.title}
+                        {...field}
+                        value={field.value || checked}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </>
+              )}
+            />
+          )
+        default:
+          return null
+      }
+    })
 
   return <div className="flex flex-col gap-y-4">{components}</div>
 }
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index 181abe3b5..adb0e348d 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -1,8 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useContext } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
 
 import { getUserSpace, openFileExplorer, joinPath } from '@janhq/core'
 
-import { Input, Textarea } from '@janhq/uikit'
+import {
+  Input,
+  Textarea,
+  Form,
+  Button,
+  FormField,
+  FormItem,
+  FormControl,
+} from '@janhq/uikit'
 
 import { atom, useAtomValue } from 'jotai'
 
@@ -15,17 +25,21 @@ import DropdownListSidebar, {
   selectedModelAtom,
 } from '@/containers/DropdownListSidebar'
 
-import { FeatureToggleContext } from '@/context/FeatureToggle'
-
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
+import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
+
+import { getConfigurationsData } from '@/utils/componentSettings'
 import { toSettingParams } from '@/utils/model_param'
 
 import EngineSetting from '../EngineSetting'
 import ModelSetting from '../ModelSetting'
 
+import settingComponentBuilder from '../ModelSetting/settingComponentBuilder'
+
 import {
   activeThreadAtom,
+  getActiveThreadIdAtom,
   getActiveThreadModelParamsAtom,
   threadStatesAtom,
 } from '@/helpers/atoms/Thread.atom'
@@ -35,13 +49,15 @@ export const showRightSideBarAtom = atom<boolean>(true)
 const Sidebar: React.FC = () => {
   const showing = useAtomValue(showRightSideBarAtom)
   const activeThread = useAtomValue(activeThreadAtom)
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
   const selectedModel = useAtomValue(selectedModelAtom)
   const { updateThreadMetadata } = useCreateNewThread()
+  const { updateModelParameter } = useUpdateModelParameters()
   const threadStates = useAtomValue(threadStatesAtom)
-  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
+  const threadId = useAtomValue(getActiveThreadIdAtom)
+  const modelEngineParams = toSettingParams(activeModelParams)
 
-  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
-  const modelSettingParams = toSettingParams(activeModelParams)
+  const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
 
   const onReviewInFinderClick = async (type: string) => {
     if (!activeThread) return
@@ -109,6 +125,62 @@ const Sidebar: React.FC = () => {
     openFileExplorer(fullPath)
   }
 
+  const form = useForm()
+
+  const filterChangedFormFields = <T extends FieldValues>(
+    allFields: T,
+    dirtyFields: Partial<Record<keyof T, boolean | boolean[]>>
+  ): Partial<T> => {
+    const changedFieldValues = Object.keys(dirtyFields).reduce(
+      (acc, currentField) => {
+        const isDirty = Array.isArray(dirtyFields[currentField])
+          ? (dirtyFields[currentField] as boolean[]).some((value) => {
+              value === true
+            })
+          : dirtyFields[currentField] === true
+        if (isDirty) {
+          return {
+            ...acc,
+            [currentField]: allFields[currentField],
+          }
+        }
+        return acc
+      },
+      {} as Partial<T>
+    )
+
+    return changedFieldValues
+  }
+
+  const onSubmit = async (values: any) => {
+    if (!threadId) return
+    if (!activeThread) return
+
+    if (Object.keys(form.formState.dirtyFields).length) {
+      if (
+        Object.keys(form.formState.dirtyFields).includes('title') ||
+        Object.keys(form.formState.dirtyFields).includes('instructions')
+      ) {
+        updateThreadMetadata({
+          ...activeThread,
+          title: values.title || activeThread.title,
+          assistants: [
+            {
+              ...activeThread.assistants[0],
+              instructions:
+                values.instructions || activeThread?.assistants[0].instructions,
+            },
+          ],
+        })
+      }
+      updateModelParameter(
+        threadId,
+        filterChangedFormFields(values, form.formState.dirtyFields)
+      )
+      form.reset()
+    }
+  }
+
   return (
     <div
       className={twMerge(
@@ -118,83 +190,102 @@ const Sidebar: React.FC = () => {
           : 'w-0 translate-x-full opacity-0'
       )}
     >
-      <div
-        className={twMerge(
-          'flex flex-col gap-1 delay-200',
-          showing ? 'animate-enter opacity-100' : 'opacity-0'
-        )}
-      >
-        <div className="flex flex-col space-y-4 p-4">
-          <div>
-            <label
-              id="thread-title"
-              className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
-            >
-              Title
-            </label>
-            <Input
-              id="thread-title"
-              value={activeThread?.title}
-              onChange={(e) => {
-                if (activeThread)
-                  updateThreadMetadata({
-                    ...activeThread,
-                    title: e.target.value || '',
-                  })
-              }}
-            />
-          </div>
-          <div className="flex flex-col">
-            <label
-              id="thread-title"
-              className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
-            >
-              Threads ID
-            </label>
-            <span className="text-xs text-muted-foreground">
-              {activeThread?.id || '-'}
-            </span>
-          </div>
-        </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div
+            className={twMerge(
+              'flex flex-col gap-1 delay-200',
+              showing ? 'animate-enter opacity-100' : 'opacity-0'
+            )}
+          >
+            <div className="flex flex-col space-y-4 p-4">
+              <div>
+                <label
+                  id="thread-title"
+                  className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
+                >
+                  Title
+                </label>
+                <FormField
+                  key={activeThread?.title}
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <>
+                      <FormItem>
+                        <FormControl>
+                          <Input
+                            id="thread-title"
+                            {...field}
+                            defaultValue={activeThread?.title}
+                            name="title"
+                            onChange={(e) => field.onChange(e)}
+                            value={field.value}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    </>
+                  )}
+                />
+              </div>
+              <div className="flex flex-col">
+                <label
+                  id="thread-title"
+                  className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
+                >
+                  Threads ID
+                </label>
+                <span className="text-xs text-muted-foreground">
+                  {activeThread?.id || '-'}
+                </span>
+              </div>
+            </div>
 
-        <CardSidebar
-          title="Assistant"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
-          <div className="flex flex-col space-y-4 p-2">
-            <div className="flex items-center space-x-2">
-              <LogoMark width={24} height={24} />
-              <span className="font-bold capitalize">
-                {activeThread?.assistants[0].assistant_name ?? '-'}
-              </span>
-            </div>
-            <div>
-              <label
-                id="thread-title"
-                className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
-              >
-                Instructions
-              </label>
-              <Textarea
-                id="assistant-instructions"
-                placeholder="Eg. You are a helpful assistant."
-                value={activeThread?.assistants[0].instructions ?? ''}
-                onChange={(e) => {
-                  if (activeThread)
-                    updateThreadMetadata({
-                      ...activeThread,
-                      assistants: [
-                        {
-                          ...activeThread.assistants[0],
-                          instructions: e.target.value || '',
-                        },
-                      ],
-                    })
-                }}
-              />
-            </div>
-            {/* <div>
+            <CardSidebar
+              title="Assistant"
+              onRevealInFinderClick={onReviewInFinderClick}
+              onViewJsonClick={onViewJsonClick}
+            >
+              <div className="flex flex-col space-y-4 p-2">
+                <div className="flex items-center space-x-2">
+                  <LogoMark width={24} height={24} />
+                  <span className="font-bold capitalize">
+                    {activeThread?.assistants[0].assistant_name ?? '-'}
+                  </span>
+                </div>
+                <div>
+                  <label
+                    id="thread-title"
+                    className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
+                  >
+                    Instructions
+                  </label>
+                  <FormField
+                    key={activeThread?.title}
+                    control={form.control}
+                    name="instructions"
+                    render={({ field }) => (
+                      <>
+                        <FormItem>
+                          <FormControl>
+                            <Textarea
+                              id="assistant-instructions"
+                              placeholder="Eg. You are a helpful assistant."
+                              {...field}
+                              name="instructions"
+                              defaultValue={
+                                activeThread?.assistants[0].instructions
+                              }
+                              value={field.value}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      </>
+                    )}
+                  />
+                </div>
+                {/* Temporary disabled */}
+                {/* <div>
               <label
                 id="tool-title"
                 className="mb-2 inline-block font-bold text-zinc-500 dark:text-gray-300"
@@ -208,49 +299,61 @@ const Sidebar: React.FC = () => {
                 <Switch name="retrieval" />
               </div>
             </div> */}
-          </div>
-        </CardSidebar>
-
-        <CardSidebar
-          title="Model"
-          onRevealInFinderClick={onReviewInFinderClick}
-          onViewJsonClick={onViewJsonClick}
-        >
-          <div className="p-2">
-            <DropdownListSidebar />
-
-            <div className="mt-6">
-              <CardSidebar title="Inference Parameters" asChild>
-                <div className="p-2">
-                  <ModelSetting />
-                </div>
-              </CardSidebar>
-            </div>
-
-            <div className="mt-4">
-              <CardSidebar title="Model Parameters" asChild>
-                <div className="p-2">{/* <ModelSetting /> */}</div>
-              </CardSidebar>
-            </div>
-
-            {experimentalFeatureEnabed &&
-            Object.keys(modelSettingParams).length ? (
-              <div className="mt-4">
-                <CardSidebar
-                  title="Engine Parameters"
-                  onRevealInFinderClick={onReviewInFinderClick}
-                  onViewJsonClick={onViewJsonClick}
-                  asChild
-                >
-                  <div className="p-2">
-                    <EngineSetting />
-                  </div>
-                </CardSidebar>
               </div>
-            ) : null}
+            </CardSidebar>
+            <CardSidebar
+              title="Model"
+              onRevealInFinderClick={onReviewInFinderClick}
+              onViewJsonClick={onViewJsonClick}
+            >
+              <div className="p-2">
+                <DropdownListSidebar />
+
+                <div className="mt-6">
+                  <CardSidebar title="Inference Parameters" asChild>
+                    <div className="p-2">
+                      <ModelSetting form={form} />
+                    </div>
+                  </CardSidebar>
+                </div>
+
+                <div className="mt-4">
+                  <CardSidebar title="Model Parameters" asChild>
+                    <div className="p-2">
+                      {settingComponentBuilder(
+                        componentDataEngineSetting,
+                        form,
+                        true
+                      )}
+                    </div>
+                  </CardSidebar>
+                </div>
+
+                <div className="mt-4">
+                  <CardSidebar
+                    title="Engine Parameters"
+                    onRevealInFinderClick={onReviewInFinderClick}
+                    onViewJsonClick={onViewJsonClick}
+                    asChild
+                  >
+                    <div className="p-2">
+                      <EngineSetting form={form} />
+                    </div>
+                  </CardSidebar>
+                </div>
+
+                {Object.keys(form.formState.dirtyFields).length !== 0 && (
+                  <div className="pt-4">
+                    <Button type="submit" block>
+                      Submit
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </CardSidebar>
           </div>
-        </CardSidebar>
-      </div>
+        </form>
+      </Form>
     </div>
   )
 }
diff --git a/web/utils/model_param.ts b/web/utils/model_param.ts
index 8f659ed3e..7d559c313 100644
--- a/web/utils/model_param.ts
+++ b/web/utils/model_param.ts
@@ -39,6 +39,7 @@ export const toSettingParams = (
     embedding: undefined,
     n_parallel: undefined,
     cpu_threads: undefined,
+    prompt_template: undefined,
   }
   const settingParams: ModelSettingParams = {}