From 4e26e1a5981c3434493ea9caf0ddf42c367abc18 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Tue, 2 Jan 2024 23:32:33 +0700 Subject: [PATCH] update state case when user change value form and revert to old state --- web/containers/Checkbox/index.tsx | 10 ++-- web/containers/Layout/Ribbon/index.tsx | 19 +++++++- web/containers/ModelConfigInput/index.tsx | 1 + web/helpers/atoms/Thread.atom.ts | 2 + .../ModelSetting/settingComponentBuilder.tsx | 5 +- web/screens/Chat/Sidebar/index.tsx | 47 +++++++++++++++---- web/screens/Chat/index.tsx | 2 +- 7 files changed, 68 insertions(+), 18 deletions(-) diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx index c2dbd7a79..b6fcb32c6 100644 --- a/web/containers/Checkbox/index.tsx +++ b/web/containers/Checkbox/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react' import { @@ -22,14 +23,16 @@ type Props = { title: string description: string value: boolean + checked: boolean onBlur: () => void - onChange: () => void + onChange: (e: boolean) => void } const Checkbox: React.FC = ({ name, value, title, + checked, description, onChange, onBlur, @@ -64,9 +67,8 @@ const Checkbox: React.FC = ({ onChange(e)} onBlur={onBlur} /> diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx index 6a0146e64..2342ceaee 100644 --- a/web/containers/Layout/Ribbon/index.tsx +++ b/web/containers/Layout/Ribbon/index.tsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react' + import { Tooltip, TooltipContent, @@ -6,6 +8,7 @@ import { } from '@janhq/uikit' import { motion as m } from 'framer-motion' +import { useAtomValue } from 'jotai' import { MessageCircleIcon, SettingsIcon, @@ -23,8 +26,11 @@ import { MainViewState } from '@/constants/screens' import { useMainViewState } from '@/hooks/useMainViewState' +import { threadSettingFormUpdateAtom } from '@/helpers/atoms/Thread.atom' + export default function RibbonNav() { const { mainViewState, setMainViewState } = useMainViewState() + const threadSettingFormUpdate = useAtomValue(threadSettingFormUpdateAtom) const onMenuClick = (state: MainViewState) => { if (mainViewState === state) return @@ -93,6 +99,11 @@ export default function RibbonNav() { state: MainViewState.Settings, }, ] + + // useEffect(() => { + // console.log(threadSettingFormUpdate) + // }, [threadSettingFormUpdate]) + return (
@@ -115,7 +126,13 @@ export default function RibbonNav() { 'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center', isActive && 'z-10' )} - onClick={() => onMenuClick(primary.state)} + onClick={() => { + if (threadSettingFormUpdate) { + console.log('hahah') + } else { + onMenuClick(primary.state) + } + }} > {primary.icon}
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx index 53f74685c..56b8d8edd 100644 --- a/web/containers/ModelConfigInput/index.tsx +++ b/web/containers/ModelConfigInput/index.tsx @@ -66,6 +66,7 @@ const ModelConfigInput: React.FC = ({ placeholder={placeholder} onChange={onChange} onBlur={onBlur} + value={value} />
) diff --git a/web/helpers/atoms/Thread.atom.ts b/web/helpers/atoms/Thread.atom.ts index c91ec30ef..f6eac09c4 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 threadSettingFormUpdateAtom = atom(false) + /** * Stores the current active thread id. */ diff --git a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx index 59ebb5af2..94b1642f3 100644 --- a/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx +++ b/web/screens/Chat/ModelSetting/settingComponentBuilder.tsx @@ -88,7 +88,7 @@ const settingComponentBuilder = ( description={data.description} placeholder={placeholder} {...field} - value={field.value || textValue} + value={field.value} /> @@ -112,7 +112,8 @@ const settingComponentBuilder = ( description={data.description} title={data.title} {...field} - value={field.value || checked} + checked={field.value || checked} + value={field.value} /> diff --git a/web/screens/Chat/Sidebar/index.tsx b/web/screens/Chat/Sidebar/index.tsx index a410ccf26..b6f330216 100644 --- a/web/screens/Chat/Sidebar/index.tsx +++ b/web/screens/Chat/Sidebar/index.tsx @@ -14,7 +14,7 @@ import { FormControl, } from '@janhq/uikit' -import { atom, useAtomValue } from 'jotai' +import { atom, useAtomValue, useSetAtom } from 'jotai' import { twMerge } from 'tailwind-merge' @@ -30,7 +30,7 @@ import { useCreateNewThread } from '@/hooks/useCreateNewThread' import useUpdateModelParameters from '@/hooks/useUpdateModelParameters' import { getConfigurationsData } from '@/utils/componentSettings' -import { toSettingParams } from '@/utils/model_param' +import { toRuntimeParams, toSettingParams } from '@/utils/model_param' import EngineSetting from '../EngineSetting' import ModelSetting from '../ModelSetting' @@ -41,6 +41,7 @@ import { activeThreadAtom, getActiveThreadIdAtom, getActiveThreadModelParamsAtom, + threadSettingFormUpdateAtom, threadStatesAtom, } from '@/helpers/atoms/Thread.atom' @@ -55,8 +56,37 @@ const Sidebar: React.FC = () => { const { updateModelParameter } = useUpdateModelParameters() const threadStates = useAtomValue(threadStatesAtom) const threadId = useAtomValue(getActiveThreadIdAtom) + const modelEngineParams = toSettingParams(activeModelParams) const componentDataEngineSetting = getConfigurationsData(modelEngineParams) + const modelRuntimeParams = toRuntimeParams(activeModelParams) + + const componentDataRuntimeSetting = getConfigurationsData(modelRuntimeParams) + const setThreadSettingFormUpdate = useSetAtom(threadSettingFormUpdateAtom) + + // console.log(componentDataRuntimeSetting) + + const componentData = [ + ...[ + { name: 'title', controllerData: { value: activeThread?.title } }, + { + name: 'instructions', + controllerData: { value: activeThread?.assistants[0].instructions }, + }, + ], + ...componentDataRuntimeSetting, + ...componentDataEngineSetting, + ] + + const defaultValues = componentData.reduce( + (obj: any, item: { name: any; controllerData: any }) => + Object.assign(obj, { + [item.name]: item.controllerData.value + ? item.controllerData.value + : item.controllerData.checked, + }), + {} + ) const onReviewInFinderClick = async (type: string) => { if (!activeThread) return @@ -124,7 +154,7 @@ const Sidebar: React.FC = () => { openFileExplorer(fullPath) } - const form = useForm() + const form = useForm({ defaultValues }) const filterChangedFormFields = ( allFields: T, @@ -184,15 +214,12 @@ const Sidebar: React.FC = () => { form.reset() } - const handleEventClick = () => { - return console.log('click') - } - // Detect event click after changes value in form to showing tooltip on save button useEffect(() => { - if (Object.keys(form.formState.dirtyFields).length >= 1) { - window.addEventListener('click', handleEventClick) - return () => window.removeEventListener('click', handleEventClick) + if (Object.keys(form.formState.dirtyFields).length !== 0) { + setThreadSettingFormUpdate(true) + } else { + setThreadSettingFormUpdate(false) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [form.formState.dirtyFields]) diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx index 9d52c77dd..b7391e98b 100644 --- a/web/screens/Chat/index.tsx +++ b/web/screens/Chat/index.tsx @@ -155,7 +155,7 @@ const ChatScreen = () => { )}