diff --git a/react/src/components/SessionTemplateModal.tsx b/react/src/components/SessionTemplateModal.tsx index bacbe9b0db..9c78734ec3 100644 --- a/react/src/components/SessionTemplateModal.tsx +++ b/react/src/components/SessionTemplateModal.tsx @@ -1,5 +1,5 @@ import { useBackendAIImageMetaData } from '../hooks'; -import { useRecentSessionHistory } from '../hooks/backendai'; +import { useRecentSessionHistory } from '../hooks/useRecentSessionHistory'; import { ResourceNumbersOfSession, SessionLauncherFormValue, diff --git a/react/src/hooks/backendai.tsx b/react/src/hooks/backendai.tsx index 1b3479c365..f6209ad038 100644 --- a/react/src/hooks/backendai.tsx +++ b/react/src/hooks/backendai.tsx @@ -1,16 +1,10 @@ import { useSuspendedBackendaiClient, useUpdatableState } from '.'; -import { - generateRandomString, - maskString, - useBaiSignedRequestWithPromise, -} from '../helper'; +import { maskString, useBaiSignedRequestWithPromise } from '../helper'; import { useSuspenseTanQuery, useTanMutation, useTanQuery, } from './reactQueryAlias'; -import { SessionHistory, useBAISettingUserState } from './useBAISetting'; -import { useEventNotStable } from './useEventNotStable'; import _ from 'lodash'; import { useCallback, useEffect, useMemo, useState } from 'react'; @@ -310,43 +304,3 @@ export const useAllowedHostNames = () => { }); return allowedHosts?.allowed; }; - -export const useRecentSessionHistory = () => { - const [recentSessionHistory, setRecentSessionHistory] = - useBAISettingUserState('recentSessionHistory'); - - const push = useEventNotStable( - ({ - id, - params, - createdAt, - }: SelectivePartial) => { - const newHistory: SessionHistory = { - id: id ?? generateRandomString(8), - params, - createdAt: createdAt ?? new Date().toISOString(), - }; - // push new history to the top of recentSessionHistory and keep it up to 5 - const newRecentSessionHistory = [ - newHistory, - ...(recentSessionHistory || []), - ].slice(0, 5); - setRecentSessionHistory(newRecentSessionHistory); - }, - ); - const clear = useEventNotStable(() => setRecentSessionHistory([])); - const remove = useEventNotStable((id: string) => { - const newRecentSessionHistory = (recentSessionHistory || []).filter( - (item) => item.id !== id, - ); - setRecentSessionHistory(newRecentSessionHistory); - }); - return [ - recentSessionHistory, - { - push, - clear, - remove, - }, - ] as const; -}; diff --git a/react/src/hooks/useRecentSessionHistory.tsx b/react/src/hooks/useRecentSessionHistory.tsx new file mode 100644 index 0000000000..9ff0cd35e1 --- /dev/null +++ b/react/src/hooks/useRecentSessionHistory.tsx @@ -0,0 +1,43 @@ +import { generateRandomString } from '../helper'; +import { SessionHistory, useBAISettingUserState } from './useBAISetting'; +import { useEventNotStable } from './useEventNotStable'; + +export const useRecentSessionHistory = () => { + const [recentSessionHistory, setRecentSessionHistory] = + useBAISettingUserState('recentSessionHistory'); + + const push = useEventNotStable( + ({ + id, + params, + createdAt, + }: SelectivePartial) => { + const newHistory: SessionHistory = { + id: id ?? generateRandomString(8), + params, + createdAt: createdAt ?? new Date().toISOString(), + }; + // push new history to the top of recentSessionHistory and keep it up to 5 + const newRecentSessionHistory = [ + newHistory, + ...(recentSessionHistory || []), + ].slice(0, 5); + setRecentSessionHistory(newRecentSessionHistory); + }, + ); + const clear = useEventNotStable(() => setRecentSessionHistory([])); + const remove = useEventNotStable((id: string) => { + const newRecentSessionHistory = (recentSessionHistory || []).filter( + (item) => item.id !== id, + ); + setRecentSessionHistory(newRecentSessionHistory); + }); + return [ + recentSessionHistory, + { + push, + clear, + remove, + }, + ] as const; +}; diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx index 0f130c435e..81f98ff25d 100644 --- a/react/src/pages/SessionLauncherPage.tsx +++ b/react/src/pages/SessionLauncherPage.tsx @@ -46,12 +46,10 @@ import { useUpdatableState, useWebUINavigate, } from '../hooks'; -import { - useCurrentUserRole, - useRecentSessionHistory, -} from '../hooks/backendai'; +import { useCurrentUserRole } from '../hooks/backendai'; import { useSetBAINotification } from '../hooks/useBAINotification'; import { useCurrentProjectValue } from '../hooks/useCurrentProject'; +import { useRecentSessionHistory } from '../hooks/useRecentSessionHistory'; import { useThemeMode } from '../hooks/useThemeMode'; // @ts-ignore import customCSS from './SessionLauncherPage.css?raw'; @@ -296,11 +294,7 @@ const SessionLauncherPage = () => { }, []); const mergedInitialValues = useMemo(() => { - return _.merge( - {}, - INITIAL_FORM_VALUES, - formValuesFromQueryParams, - ); + return _.merge({}, INITIAL_FORM_VALUES, formValuesFromQueryParams); }, [INITIAL_FORM_VALUES, formValuesFromQueryParams]); // ScrollTo top when step is changed @@ -685,7 +679,7 @@ const SessionLauncherPage = () => { style={{ paddingRight: 0, paddingLeft: 0 }} onClick={() => toggleIsOpenTemplateModal()} > - {t('session.launcher.TemplateAndHistory')} + {t('session.launcher.RecentHistory')}