feat: finalize UI form new right panel thread

2024-01-02 01:24:16 +07:00 · 2024-01-02 01:24:16 +07:00 · 347e47f1ce
commit 347e47f1ce
parent 590fa67244
11 changed files with 418 additions and 229 deletions
--- 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(
--- 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>
  )
 }
--- 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>
  )
--- 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>
--- 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
--- 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
--- 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>
  )
 }

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

--- 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>
 }
--- 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>
  )
 }
--- 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 = {}