From 29bef1e3ab7ea16d3b587b755346172ad348e694 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Fri, 8 Mar 2024 00:15:31 +0800 Subject: [PATCH] app sidebar auto collapse --- .../app/(appDetailLayout)/[appId]/layout.tsx | 15 ++++++++--- web/app/components/app-sidebar/app-info.tsx | 6 ++--- web/app/components/app-sidebar/index.tsx | 25 ++++++++----------- .../app/configuration/debug/types.ts | 1 - .../components/app/configuration/index.tsx | 9 +++---- web/app/components/app/store.ts | 4 +++ 6 files changed, 33 insertions(+), 27 deletions(-) diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx index 67cbfd8b12..d4df7e8bd3 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx @@ -13,6 +13,7 @@ import { useAppContext } from '@/context/app-context' import Loading from '@/app/components/base/loading' import { BarChartSquare02, FileHeart02, PromptEngineering, TerminalSquare } from '@/app/components/base/icons/src/vender/line/development' import { BarChartSquare02 as BarChartSquare02Solid, FileHeart02 as FileHeart02Solid, PromptEngineering as PromptEngineeringSolid, TerminalSquare as TerminalSquareSolid } from '@/app/components/base/icons/src/vender/solid/development' +import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' export type IAppDetailLayoutProps = { children: React.ReactNode @@ -27,8 +28,10 @@ const AppDetailLayout: FC = (props) => { const { t } = useTranslation() const router = useRouter() const pathname = usePathname() + const media = useBreakpoints() + const isMobile = media === MediaType.mobile const { isCurrentWorkspaceManager } = useAppContext() - const { appDetail, setAppDetail } = useStore() + const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore() const [navigation, setNavigation] = useState = (props) => { }, [t]) useEffect(() => { - if (appDetail) + if (appDetail) { document.title = `${(appDetail.name || 'App')} - Dify` - }, [appDetail]) + const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand' + const mode = isMobile ? 'collapse' : 'expand' + setAppSiderbarExpand(isMobile ? mode : localeMode) + if (appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') + setAppSiderbarExpand('collapse') + } + }, [appDetail, isMobile, setAppSiderbarExpand]) useEffect(() => { setAppDetail() diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx index 1b073a0f76..ef979bd9c3 100644 --- a/web/app/components/app-sidebar/app-info.tsx +++ b/web/app/components/app-sidebar/app-info.tsx @@ -156,7 +156,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => { >
- +
{expand && (
@@ -244,7 +244,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => { }}> {t('app.editApp')}
- {appDetail.mode !== 'completion' && appDetail.model_config.prompt_type !== 'advanced' && ( + {appDetail.mode !== 'completion' && appDetail.model_config?.prompt_type !== 'advanced' && ( <>
{ setOpen(false) @@ -257,7 +257,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
)} - {(appDetail.mode === 'completion' || appDetail.model_config.prompt_type === 'advanced') && ( + {(appDetail.mode === 'completion' || appDetail.model_config?.prompt_type === 'advanced') && ( <>
{ - const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand' + const { appSidebarExpand, setAppSiderbarExpand } = useAppStore() const media = useBreakpoints() const isMobile = media === MediaType.mobile - const mode = isMobile ? 'collapse' : 'expand' - const [modeState, setModeState] = useState(isMobile ? mode : localeMode) + const [modeState, setModeState] = useState(appSidebarExpand) const expand = modeState === 'expand' const handleToggle = useCallback(() => { setModeState((prev) => { const next = prev === 'expand' ? 'collapse' : 'expand' - localStorage.setItem('app-detail-collapse-or-expand', next) + setAppSiderbarExpand(next) return next }) - }, []) + }, [setAppSiderbarExpand]) - const { eventEmitter } = useEventEmitterContextContext() - eventEmitter?.useSubscription((v: any) => { - if (v.type === APP_SIDEBAR_SHOULD_COLLAPSE) { - setModeState('collapse') - localStorage.setItem('app-detail-collapse-or-expand', 'collapse') + useEffect(() => { + if (appSidebarExpand) { + localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand) + setModeState(appSidebarExpand) } - }) + }, [appSidebarExpand]) return (
{ const { t } = useTranslation() const { notify } = useContext(ToastContext) + const { setAppSiderbarExpand } = useAppStore() const [formattingChanged, setFormattingChanged] = useState(false) const { setShowAccountSettingModal } = useModalContext() const [hasFetchedDetail, setHasFetchedDetail] = useState(false) @@ -645,7 +645,6 @@ const Configuration: FC = () => { const [showUseGPT4Confirm, setShowUseGPT4Confirm] = useState(false) - const { eventEmitter } = useEventEmitterContextContext() const { debugWithMultipleModel, multipleModelConfigs, @@ -660,9 +659,7 @@ const Configuration: FC = () => { { id: `${Date.now()}-no-repeat`, model: '', provider: '', parameters: {} }, ], ) - eventEmitter?.emit({ - type: APP_SIDEBAR_SHOULD_COLLAPSE, - } as any) + setAppSiderbarExpand('collapse') } if (isLoading) { diff --git a/web/app/components/app/store.ts b/web/app/components/app/store.ts index 90c6cf716a..4d2a501bd3 100644 --- a/web/app/components/app/store.ts +++ b/web/app/components/app/store.ts @@ -3,13 +3,17 @@ import type { App } from '@/types/app' type State = { appDetail?: App + appSidebarExpand: string } type Action = { setAppDetail: (appDetail?: App) => void + setAppSiderbarExpand: (state: string) => void } export const useStore = create(set => ({ appDetail: undefined, setAppDetail: appDetail => set(() => ({ appDetail })), + appSidebarExpand: '', + setAppSiderbarExpand: appSidebarExpand => set(() => ({ appSidebarExpand })), }))