app sidebar auto collapse

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<IAppDetailLayoutProps> = (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<Array<{
     name: string
     href: string
@@ -72,9 +75,15 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (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()

web/app/components/app-sidebar/app-info.tsx

@@ -156,7 +156,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
         >
           <div className={cn('flex cursor-pointer p-1 rounded-lg hover:bg-gray-100', open && 'bg-gray-100')}>
             <div className='shrink-0 mr-2'>
-              <AppIcon size="large" icon={appDetail.icon} background={appDetail.icon_background} />
+              <AppIcon size={expand ? 'large' : 'medium'} icon={appDetail.icon} background={appDetail.icon_background} />
             </div>
             {expand && (
               <div className="grow w-0">
@@ -244,7 +244,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
               }}>
                 <span className='text-gray-700 text-sm leading-5'>{t('app.editApp')}</span>
               </div>
-              {appDetail.mode !== 'completion' && appDetail.model_config.prompt_type !== 'advanced' && (
+              {appDetail.mode !== 'completion' && appDetail.model_config?.prompt_type !== 'advanced' && (
                 <>
                   <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={() => {
                     setOpen(false)
@@ -257,7 +257,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                   </div>
                 </>
               )}
-              {(appDetail.mode === 'completion' || appDetail.model_config.prompt_type === 'advanced') && (
+              {(appDetail.mode === 'completion' || appDetail.model_config?.prompt_type === 'advanced') && (
                 <>
                   <Divider className="!my-1" />
                   <div

web/app/components/app-sidebar/index.tsx

-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
 import AppBasic from './basic'
@@ -8,8 +8,7 @@ import {
   AlignLeft01,
   AlignRight01,
 } from '@/app/components/base/icons/src/vender/line/layout'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { APP_SIDEBAR_SHOULD_COLLAPSE } from '@/app/components/app/configuration/debug/types'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
@@ -27,28 +26,26 @@ export type IAppDetailNavProps = {
 }
 
 const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
-  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 (
     <div

web/app/components/app/configuration/debug/types.ts

@@ -15,5 +15,4 @@ export type DebugWithSingleOrMultipleModelConfigs = {
 }
 export const APP_CHAT_WITH_MULTIPLE_MODEL = 'APP_CHAT_WITH_MULTIPLE_MODEL'
 export const APP_CHAT_WITH_MULTIPLE_MODEL_RESTART = 'APP_CHAT_WITH_MULTIPLE_MODEL_RESTART'
-export const APP_SIDEBAR_SHOULD_COLLAPSE = 'APP_SIDEBAR_SHOULD_COLLAPSE'
 export const ORCHESTRATE_CHANGED = 'ORCHESTRATE_CHANGED'

web/app/components/app/configuration/index.tsx

@@ -19,7 +19,6 @@ import {
   useFormattingChangedDispatcher,
 } from './debug/hooks'
 import type { ModelAndParameter } from './debug/types'
-import { APP_SIDEBAR_SHOULD_COLLAPSE } from './debug/types'
 import PublishWithMultipleModel from './debug/debug-with-multiple-model/publish-with-multiple-model'
 import type {
   AnnotationReplyConfig,
@@ -57,7 +56,7 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { fetchCollectionList } from '@/service/tools'
 import { type Collection } from '@/app/components/tools/types'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 type PublichConfig = {
   modelConfig: ModelConfig
@@ -67,6 +66,7 @@ type PublichConfig = {
 const Configuration: FC = () => {
   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) {

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<State & Action>(set => ({
   appDetail: undefined,
   setAppDetail: appDetail => set(() => ({ appDetail })),
+  appSidebarExpand: '',
+  setAppSiderbarExpand: appSidebarExpand => set(() => ({ appSidebarExpand })),
 }))