feat: finalize UI form new right panel thread

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(

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 Checkbox: React.FC<Props> = ({
-  const { updateModelParameter } = useUpdateModelParameters()
+  name,
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+  value,
+  title,
+  description,
+  onChange,
+  onBlur,
+}) => {
+  // const { updateModelParameter } = useUpdateModelParameters()
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onCheckedChange = (checked: boolean) => {
+  // const onCheckedChange = (checked: boolean) => {
-    if (!threadId) return
+  //   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>
   )
 }

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 { updateModelParameter } = useUpdateModelParameters()
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  // const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (!threadId) return
+  //   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}
+        onChange={onChange}
-        value={value}
+        onBlur={onBlur}
       />
     </div>
   )

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 { updateModelParameter } = useUpdateModelParameters()
-  const threadId = useAtomValue(getActiveThreadIdAtom)
+  // const threadId = useAtomValue(getActiveThreadIdAtom)
 
-  const onValueChanged = (e: number[]) => {
+  // const onValueChanged = (e: number[]) => {
-    if (!threadId) return
+  //   if (!threadId) return
-    updateModelParameter(threadId, name, e[0])
+  //   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]}
+            defaultValue={value}
-            onValueChange={onValueChanged}
+            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)}
+          name={name}
-          onChange={(e) => onValueChanged([Number(e.target.value)])}
+          value={value[0] || String(value[0])}
+          onChange={(e) => onChange([e.target.value])}
+          onBlur={onBlur}
         />
       </div>
     </div>

web/hooks/useUpdateModelParameters.ts

@@ -25,11 +25,7 @@ export default function useUpdateModelParameters() {
   const activeThreadState = useAtomValue(activeThreadStateAtom)
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
 
-  const updateModelParameter = async (
+  const updateModelParameter = async (threadId: string, values: any) => {
-    threadId: string,
-    name: string,
-    value: number | boolean | string
-  ) => {
     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

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

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">
+    <div className="flex flex-col">
-      {settingComponentBuilder(componentData)}
+      {settingComponentBuilder(componentData, props.form)}
-    </form>
+    </div>
   )
 }
 

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">
+    <div className="flex flex-col">
-      {settingComponentBuilder(componentData)}
+      {settingComponentBuilder(componentData, props.form)}
-    </form>
+    </div>
   )
 }
 

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,12 +32,28 @@ type CheckboxData = {
   checked: boolean
 }
 
-const settingComponentBuilder = (componentData: SettingComponentData[]) => {
+const settingComponentBuilder = (
-  const components = componentData.map((data) => {
+  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}
@@ -42,32 +61,64 @@ const settingComponentBuilder = (componentData: SettingComponentData[]) => {
                         min={min}
                         max={max}
                         step={step}
-            value={value}
+                        {...field}
-            name={data.name}
+                        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}
-            name={data.name}
                       description={data.description}
                       placeholder={placeholder}
-            value={textValue}
+                      {...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}
-            name={data.name}
                         description={data.description}
                         title={data.title}
-            checked={checked}
+                        {...field}
+                        value={field.value || checked}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </>
+              )}
             />
           )
         default:

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 componentDataEngineSetting = getConfigurationsData(modelEngineParams)
-  const modelSettingParams = toSettingParams(activeModelParams)
 
   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,6 +190,8 @@ const Sidebar: React.FC = () => {
           : 'w-0 translate-x-full opacity-0'
       )}
     >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
           <div
             className={twMerge(
               'flex flex-col gap-1 delay-200',
@@ -132,16 +206,26 @@ const Sidebar: React.FC = () => {
                 >
                   Title
                 </label>
+                <FormField
+                  key={activeThread?.title}
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <>
+                      <FormItem>
+                        <FormControl>
                           <Input
                             id="thread-title"
-              value={activeThread?.title}
+                            {...field}
-              onChange={(e) => {
+                            defaultValue={activeThread?.title}
-                if (activeThread)
+                            name="title"
-                  updateThreadMetadata({
+                            onChange={(e) => field.onChange(e)}
-                    ...activeThread,
+                            value={field.value}
-                    title: e.target.value || '',
+                          />
-                  })
+                        </FormControl>
-              }}
+                      </FormItem>
+                    </>
+                  )}
                 />
               </div>
               <div className="flex flex-col">
@@ -176,24 +260,31 @@ const Sidebar: React.FC = () => {
                   >
                     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."
-                value={activeThread?.assistants[0].instructions ?? ''}
+                              {...field}
-                onChange={(e) => {
+                              name="instructions"
-                  if (activeThread)
+                              defaultValue={
-                    updateThreadMetadata({
+                                activeThread?.assistants[0].instructions
-                      ...activeThread,
+                              }
-                      assistants: [
+                              value={field.value}
-                        {
+                            />
-                          ...activeThread.assistants[0],
+                          </FormControl>
-                          instructions: e.target.value || '',
+                        </FormItem>
-                        },
+                      </>
-                      ],
+                    )}
-                    })
-                }}
                   />
                 </div>
+                {/* Temporary disabled */}
                 {/* <div>
               <label
                 id="tool-title"
@@ -210,7 +301,6 @@ const Sidebar: React.FC = () => {
             </div> */}
               </div>
             </CardSidebar>
-
             <CardSidebar
               title="Model"
               onRevealInFinderClick={onReviewInFinderClick}
@@ -222,19 +312,23 @@ const Sidebar: React.FC = () => {
                 <div className="mt-6">
                   <CardSidebar title="Inference Parameters" asChild>
                     <div className="p-2">
-                  <ModelSetting />
+                      <ModelSetting form={form} />
                     </div>
                   </CardSidebar>
                 </div>
 
                 <div className="mt-4">
                   <CardSidebar title="Model Parameters" asChild>
-                <div className="p-2">{/* <ModelSetting /> */}</div>
+                    <div className="p-2">
+                      {settingComponentBuilder(
+                        componentDataEngineSetting,
+                        form,
+                        true
+                      )}
+                    </div>
                   </CardSidebar>
                 </div>
 
-            {experimentalFeatureEnabed &&
-            Object.keys(modelSettingParams).length ? (
                 <div className="mt-4">
                   <CardSidebar
                     title="Engine Parameters"
@@ -243,14 +337,23 @@ const Sidebar: React.FC = () => {
                     asChild
                   >
                     <div className="p-2">
-                    <EngineSetting />
+                      <EngineSetting form={form} />
                     </div>
                   </CardSidebar>
                 </div>
-            ) : null}
+
+                {Object.keys(form.formState.dirtyFields).length !== 0 && (
+                  <div className="pt-4">
+                    <Button type="submit" block>
+                      Submit
+                    </Button>
+                  </div>
+                )}
               </div>
             </CardSidebar>
           </div>
+        </form>
+      </Form>
     </div>
   )
 }

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