app detail

web/app/components/workflow/header/index.tsx

@@ -10,9 +10,10 @@ import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
 import Button from '@/app/components/base/button'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 const Header: FC = () => {
-  const mode = useStore(state => state.mode)
+  const appDetail = useAppStore(state => state.appDetail)
   const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
   const runStaus = useStore(state => state.runStaus)
   const setRunStaus = useStore(state => state.setRunStaus)
@@ -29,7 +30,7 @@ const Header: FC = () => {
       }}
     >
       <div>
-        <div className='text-xs font-medium text-gray-700'>Fitness and Nutrition Expert</div>
+        <div className='text-xs font-medium text-gray-700'>{appDetail?.name}</div>
         <div className='flex items-center'>
           <div className='flex items-center text-xs text-gray-500'>
             <Edit03 className='mr-1 w-3 h-3 text-gray-400' />
@@ -55,7 +56,7 @@ const Header: FC = () => {
         <RunAndHistory />
         <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
         {
-          mode === 'workflow' && (
+          appDetail?.mode === 'advanced-chat' && (
             <Button
               className={`
                 mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700

web/app/components/workflow/panel/index.tsx

@@ -11,9 +11,10 @@ import WorkflowInfo from './workflow-info'
 import DebugAndPreview from './debug-and-preview'
 import RunHistory from './run-history'
 import Record from './record'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 const Panel: FC = () => {
-  const mode = useStore(state => state.mode)
+  const appDetail = useAppStore(state => state.appDetail)
   const runStaus = useStore(state => state.runStaus)
   const nodes = useNodes<CommonNodeType>()
   const selectedNode = nodes.find(node => node.data._selected)
@@ -24,11 +25,11 @@ const Panel: FC = () => {
     showDebugAndPreviewPanel,
   } = useMemo(() => {
     return {
-      showWorkflowInfoPanel: mode === 'workflow' && !selectedNode,
+      showWorkflowInfoPanel: appDetail?.mode === 'workflow' && !selectedNode,
       showNodePanel: !!selectedNode,
-      showDebugAndPreviewPanel: mode === 'chatbot' && !selectedNode,
+      showDebugAndPreviewPanel: appDetail?.mode === 'advanced-chat' && !selectedNode,
     }
-  }, [mode, selectedNode])
+  }, [selectedNode, appDetail])
 
   return (
     <div className='absolute top-14 right-0 bottom-2 flex z-10'>

web/app/components/workflow/panel/workflow-info.tsx

@@ -4,19 +4,31 @@ import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { FileCheck02 } from '@/app/components/base/icons/src/vender/line/files'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import AppIcon from '@/app/components/base/app-icon'
 
 const WorkflowInfo: FC = () => {
+  const appDetail = useAppStore(state => state.appDetail)
+
+  if (!appDetail)
+    return null
+
   return (
     <div className='mr-2 w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
       <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
         <div className='flex pt-4 px-4 pb-1'>
-          <div className='mr-3 w-10 h-10'></div>
+          <AppIcon
+            className='mr-3'
+            size='large'
+            icon={appDetail.icon}
+            background={appDetail.icon_background}
+          />
           <div className='mt-2 text-base font-semibold text-gray-900'>
-            Fitness and Nutrition Expert
+            {appDetail.name}
           </div>
         </div>
         <div className='px-4 py-[13px] text-xs leading-[18px] text-gray-500'>
-          A Fitness and Nutrition Expert specializes in guiding individuals towards healthier lifestyles through exercise and diet.
+          {appDetail.description}
         </div>
         <div className='flex items-center px-4 h-[42px] text-[13px] font-semibold text-gray-700'>
           <FileCheck02 className='mr-1 w-4 h-4' />