From 49d5703ac3817a27e994131f40b37f95d247bcc7 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 4 Jan 2024 01:10:01 +0700
Subject: [PATCH] bring back tooltip each params setting

---
 web/containers/Checkbox/index.tsx             | 30 +++++++++-
 web/containers/ModelConfigInput/index.tsx     | 30 +++++++++-
 web/containers/Slider/index.tsx               | 55 +++++++++++++++++--
 web/helpers/atoms/Thread.atom.ts              |  2 +
 web/hooks/useSendChatMessage.ts               |  8 ++-
 .../ModelSetting/settingComponentBuilder.tsx  |  4 ++
 web/screens/Chat/Sidebar/index.tsx            |  6 +-
 web/screens/Chat/index.tsx                    | 29 ++++++++--
 8 files changed, 146 insertions(+), 18 deletions(-)

diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
index 4c124021e..12eed7199 100644
--- a/web/containers/Checkbox/index.tsx
+++ b/web/containers/Checkbox/index.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
 
-import { Switch } from '@janhq/uikit'
+import {
+  Switch,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
+import { InfoIcon } from 'lucide-react'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
@@ -11,10 +19,11 @@ import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 type Props = {
   name: string
   title: string
+  description: string
   checked: boolean
 }
 
-const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
+const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
 
@@ -25,7 +34,22 @@ const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
 
   return (
     <div className="flex justify-between">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-1 flex items-center gap-x-2">
+        <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 dark:text-gray-500" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
       <Switch checked={checked} onCheckedChange={onCheckedChange} />
     </div>
   )
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
index caa4f7fa3..ac66011bc 100644
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/web/containers/ModelConfigInput/index.tsx
@@ -1,7 +1,16 @@
-import { Textarea } from '@janhq/uikit'
+import {
+  Textarea,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
 
+import { InfoIcon } from 'lucide-react'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
@@ -9,6 +18,7 @@ import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 type Props = {
   title: string
   name: string
+  description: string
   placeholder: string
   value: string
 }
@@ -17,6 +27,7 @@ const ModelConfigInput: React.FC<Props> = ({
   title,
   name,
   value,
+  description,
   placeholder,
 }) => {
   const { updateModelParameter } = useUpdateModelParameters()
@@ -30,7 +41,22 @@ const ModelConfigInput: React.FC<Props> = ({
 
   return (
     <div className="flex flex-col">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-2 flex items-center gap-x-2">
+        <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 dark:text-gray-500" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
       <Textarea
         placeholder={placeholder}
         onChange={onValueChanged}
diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
index 8d6cedbc9..621a22559 100644
--- a/web/containers/Slider/index.tsx
+++ b/web/containers/Slider/index.tsx
@@ -1,15 +1,33 @@
 import React from 'react'
 
-import { Slider, Input } from '@janhq/uikit'
-import { useAtomValue } from 'jotai'
+import {
+  Slider,
+  Input,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from '@janhq/uikit'
+import { useAtomValue, useSetAtom } from 'jotai'
+
+import { InfoIcon } from 'lucide-react'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+import { getConfigurationsData } from '@/utils/componentSettings'
+import { toSettingParams } from '@/utils/model_param'
+
+import {
+  engineParamsUpdateAtom,
+  getActiveThreadIdAtom,
+  getActiveThreadModelParamsAtom,
+} from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
   title: string
+  description: string
   min: number
   max: number
   step: number
@@ -22,19 +40,48 @@ const SliderRightPanel: React.FC<Props> = ({
   min,
   max,
   step,
+  description,
   value,
 }) => {
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
 
+  const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+
+  const modelSettingParams = toSettingParams(activeModelParams)
+
+  const engineParams = getConfigurationsData(modelSettingParams)
+
+  const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
+
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
+    if (engineParams.some((x) => x.name.includes(name))) {
+      setEngineParamsUpdate(true)
+    } else {
+      setEngineParamsUpdate(false)
+    }
     updateModelParameter(threadId, name, e[0])
   }
 
   return (
     <div className="flex flex-col">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-3 flex items-center gap-x-2">
+        <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 dark:text-gray-500" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
       <div className="flex items-center gap-x-4">
         <div className="relative w-full">
           <Slider
diff --git a/web/helpers/atoms/Thread.atom.ts b/web/helpers/atoms/Thread.atom.ts
index c91ec30ef..26b1e9c59 100644
--- a/web/helpers/atoms/Thread.atom.ts
+++ b/web/helpers/atoms/Thread.atom.ts
@@ -7,6 +7,8 @@ import {
 } from '@janhq/core'
 import { atom } from 'jotai'
 
+export const engineParamsUpdateAtom = atom<boolean>(false)
+
 /**
  * Stores the current active thread id.
  */
diff --git a/web/hooks/useSendChatMessage.ts b/web/hooks/useSendChatMessage.ts
index f7643dfea..cbfcadf3a 100644
--- a/web/hooks/useSendChatMessage.ts
+++ b/web/hooks/useSendChatMessage.ts
@@ -34,6 +34,7 @@ import {
 } from '@/helpers/atoms/ChatMessage.atom'
 import {
   activeThreadAtom,
+  engineParamsUpdateAtom,
   getActiveThreadModelParamsAtom,
   threadStatesAtom,
   updateThreadAtom,
@@ -59,6 +60,8 @@ export default function useSendChatMessage() {
   const updateThreadInitSuccess = useSetAtom(updateThreadInitSuccessAtom)
   const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
 
+  const engineParamsUpdate = useAtomValue(engineParamsUpdateAtom)
+
   useEffect(() => {
     modelRef.current = activeModel
   }, [activeModel])
@@ -135,8 +138,10 @@ export default function useSendChatMessage() {
       console.error('No active thread')
       return
     }
-    const activeThreadState = threadStates[activeThread.id]
 
+    console.log(engineParamsUpdate)
+
+    const activeThreadState = threadStates[activeThread.id]
     const runtimeParams = toRuntimeParams(activeModelParams)
     const settingParams = toSettingParams(activeModelParams)
 
@@ -256,6 +261,7 @@ export default function useSendChatMessage() {
       await WaitForModelStarting(modelId)
       setQueuedMessage(false)
     }
+
     events.emit(EventName.OnMessageSent, messageRequest)
   }
 
diff --git a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
index a78d13c31..d2e937040 100644
--- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
+++ b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx
@@ -21,6 +21,7 @@ export type InputData = {
 export type SliderData = {
   min: number
   max: number
+
   step: number
   value: number
 }
@@ -45,6 +46,7 @@ const settingComponentBuilder = (
             <Slider
               key={data.name}
               title={data.title}
+              description={data.description}
               min={min}
               max={max}
               step={step}
@@ -60,6 +62,7 @@ const settingComponentBuilder = (
               title={data.title}
               key={data.name}
               name={data.name}
+              description={data.description}
               placeholder={placeholder}
               value={textValue}
             />
@@ -70,6 +73,7 @@ const settingComponentBuilder = (
             <Checkbox
               key={data.name}
               name={data.name}
+              description={data.description}
               title={data.title}
               checked={checked}
             />
diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx
index 8fae7cc2e..dce4fdf07 100644
--- a/web/screens/Chat/Sidebar/index.tsx
+++ b/web/screens/Chat/Sidebar/index.tsx
@@ -226,7 +226,7 @@ const Sidebar: React.FC = () => {
 
             <div className="mt-6">
               <CardSidebar title="Inference Parameters" asChild>
-                <div className="p-2">
+                <div className="px-2 py-4">
                   <ModelSetting />
                 </div>
               </CardSidebar>
@@ -234,7 +234,7 @@ const Sidebar: React.FC = () => {
 
             <div className="mt-4">
               <CardSidebar title="Model Parameters" asChild>
-                <div className="p-2">
+                <div className="px-2 py-4">
                   {settingComponentBuilder(componentDataEngineSetting, true)}
                 </div>
               </CardSidebar>
@@ -247,7 +247,7 @@ const Sidebar: React.FC = () => {
                 onViewJsonClick={onViewJsonClick}
                 asChild
               >
-                <div className="p-2">
+                <div className="px-2 py-4">
                   <EngineSetting />
                 </div>
               </CardSidebar>
diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 08f626623..ced51073d 100644
--- a/web/screens/Chat/index.tsx
+++ b/web/screens/Chat/index.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, Fragment, KeyboardEvent, useEffect, useRef } from 'react'
+import {
+  ChangeEvent,
+  Fragment,
+  KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import { EventName, MessageStatus, events } from '@janhq/core'
 import { Button, Textarea } from '@janhq/uikit'
@@ -51,7 +58,8 @@ const ChatScreen = () => {
   const activeThreadState = useAtomValue(activeThreadStateAtom)
   const { sendChatMessage, queuedMessage } = useSendChatMessage()
   const isWaitingForResponse = activeThreadState?.waitingForResponse ?? false
-  const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse
+  const isDisabledChatbox =
+    currentPrompt.trim().length === 0 || isWaitingForResponse
 
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
   const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
@@ -147,13 +155,22 @@ const ChatScreen = () => {
 
           <ModelStart />
 
+          {/* {reloadModel && (
+            <div className="mb-2 text-center">
+              <span className="text-muted-foreground">
+                Model is reloading to apply new changes.
+              </span>
+            </div>
+          )} */}
+
           {queuedMessage && (
-            <div className="my-2 py-2 text-center">
-              <span className="rounded-lg border border-border px-4 py-2 shadow-lg">
+            <div className="mb-2 text-center">
+              <span className="text-muted-foreground">
                 Message queued. It can be sent once the model has started
               </span>
             </div>
           )}
+
           <div className="mx-auto flex w-full flex-shrink-0 items-end justify-center space-x-4 px-8 py-4">
             <Textarea
               className="max-h-[400px] resize-none overflow-y-auto pr-20"
@@ -172,7 +189,9 @@ const ChatScreen = () => {
             {messages[messages.length - 1]?.status !== MessageStatus.Pending ? (
               <Button
                 size="lg"
-                disabled={disabled || stateModel.loading || !activeThread}
+                disabled={
+                  isDisabledChatbox || stateModel.loading || !activeThread
+                }
                 themes="primary"
                 className="min-w-[100px]"
                 onClick={sendChatMessage}