feat: finalize UI form new right panel thread

TJX2014 · Jan 4, 2024 · 347e47f · 347e47f
1 parent 590fa67
commit 347e47f
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 225 deletions.
diff --git 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,15 +56,15 @@ 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" />
             </div>
           )}
           <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
@@ -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
@@ -7,20 +7,22 @@ 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
   name: string
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   )
 }