feat: disable send button and show tooltip when user have changes value on setting panel

web/screens/Chat/Sidebar/index.tsx

@@ -11,10 +11,15 @@ import {
   Button,
   FormField,
   FormItem,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
   FormControl,
 } from '@janhq/uikit'
 
-import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
 
@@ -25,6 +30,8 @@ import DropdownListSidebar, {
   selectedModelAtom,
 } from '@/containers/DropdownListSidebar'
 
+import { currentPromptAtom } from '@/containers/Providers/Jotai'
+
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
@@ -63,6 +70,7 @@ const Sidebar: React.FC = () => {
 
   const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams)
   const setThreadSettingFormUpdate = useSetAtom(threadSettingFormUpdateAtom)
+  const [currentPrompt] = useAtom(currentPromptAtom)
 
   const componentData = [
     ...[
@@ -390,9 +398,19 @@ const Sidebar: React.FC = () => {
                       <Button themes="secondaryBlue" block onClick={onCancel}>
                         Cancel
                       </Button>
+                      <Tooltip open={currentPrompt.length !== 0}>
+                        <TooltipTrigger asChild>
                           <Button type="submit" block>
                             Save
                           </Button>
+                        </TooltipTrigger>
+                        <TooltipPortal>
+                          <TooltipContent side="top" className="max-w-[240px]">
+                            <span>{`It seems changes haven't been saved yet`}</span>
+                            <TooltipArrow />
+                          </TooltipContent>
+                        </TooltipPortal>
+                      </Tooltip>
                     </div>
                   </div>
                 )}

web/screens/Chat/index.tsx

@@ -30,6 +30,7 @@ import ThreadList from '@/screens/Chat/ThreadList'
 import Sidebar, { showRightSideBarAtom } from './Sidebar'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
+import { threadSettingFormUpdateAtom } from '@/helpers/atoms/Thread.atom'
 import {
   activeThreadAtom,
   getActiveThreadIdAtom,
@@ -60,6 +61,8 @@ const ChatScreen = () => {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const modelRef = useRef(activeModel)
 
+  const threadSettingFormUpdate = useAtomValue(threadSettingFormUpdateAtom)
+
   useEffect(() => {
     modelRef.current = activeModel
   }, [activeModel])
@@ -171,7 +174,12 @@ const ChatScreen = () => {
             {messages[messages.length - 1]?.status !== MessageStatus.Pending ? (
               <Button
                 size="lg"
-                disabled={disabled || stateModel.loading || !activeThread}
+                disabled={
+                  disabled ||
+                  stateModel.loading ||
+                  !activeThread ||
+                  threadSettingFormUpdate
+                }
                 themes="primary"
                 className="min-w-[100px]"
                 onClick={sendChatMessage}