feat: try app layout

web/app/(commonLayout)/try/app/[appId]/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Main from '@/app/components/try/app/index'
+import Main from '@/app/components/explore/try-app/app/index'
 
 export type IInstalledAppProps = {
   params: {

web/app/(commonLayout)/try/right/page.tsx

@@ -1,9 +0,0 @@
-import Meta from '../../../components/try/app/meta'
-
-const Page = () => {
-  return (
-    <Meta />
-  )
-}
-
-export default Page

web/app/components/explore/try-app/app-info/index.tsx

@@ -0,0 +1,18 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  className?: string
+}
+
+const AppInfo: FC<Props> = ({
+  className,
+}) => {
+  return (
+    <div className={className}>
+      AppInfo Info
+    </div>
+  )
+}
+export default React.memo(AppInfo)

web/app/components/explore/try-app/app/chat.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
-import { useThemeContext } from '../../base/chat/embedded-chatbot/theme/theme-context'
+import { useThemeContext } from '../../../base/chat/embedded-chatbot/theme/theme-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import {
   EmbeddedChatbotContext,

web/app/components/explore/try-app/app/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Chat from './chat'
 import TextGeneration from './text-generation'
-import Loading from '../../base/loading'
+import Loading from '../../../base/loading'
 import { useGetTryAppInfo } from '@/service/use-try-app'
 import type { AppData } from '@/models/share'
 import useDocumentTitle from '@/hooks/use-document-title'
@@ -30,7 +30,7 @@ const TryApp: FC<Props> = ({
     )
   }
   return (
-    <div className='flex h-full'>
+    <div className='flex h-full w-full'>
       {isChat && (
         <Chat appId={appId} className='h-full grow' />
       )}
@@ -46,9 +46,6 @@ const TryApp: FC<Props> = ({
           } as AppData}
         />
       )}
-      <div className='w-[360px]'>
-        Right panel
-      </div>
     </div>
   )
 }

web/app/components/explore/try-app/app/text-generation.tsx

@@ -6,7 +6,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import AppIcon from '@/app/components/base/app-icon'
 import Loading from '@/app/components/base/loading'
 import { appDefaultIconBackground } from '@/config'
-import RunOnce from '../../share/text-generation/run-once'
+import RunOnce from '../../../share/text-generation/run-once'
 import { useWebAppStore } from '@/context/web-app-context'
 import type { AppData, SiteInfo } from '@/models/share'
 import { useGetTryAppParams } from '@/service/use-try-app'
@@ -16,7 +16,7 @@ import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useBoolean } from 'ahooks'
 import { noop } from 'lodash'
-import type { Task } from '../../share/text-generation/types'
+import type { Task } from '../../../share/text-generation/types'
 import Res from '@/app/components/share/text-generation/result'
 import { AppSourceType } from '@/service/share'
 import { TaskStatus } from '@/app/components/share/text-generation/types'
@@ -97,10 +97,10 @@ const TextGeneration: FC<Props> = ({
 
       const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
       setVisionConfig({
-          // legacy of image upload compatible
+        // legacy of image upload compatible
         ...file_upload,
         transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
-          // legacy of image upload compatible
+        // legacy of image upload compatible
         image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
         fileUploadConfig: appParams?.system_parameters,
       } as any)
@@ -162,7 +162,7 @@ const TextGeneration: FC<Props> = ({
     </div>
   )
 
-  if(!siteInfo || !promptConfig) {
+  if (!siteInfo || !promptConfig) {
     return (
       <div className={cn('flex h-screen items-center', className)}>
         <Loading type='app' />

web/app/components/explore/try-app/index.tsx

@@ -5,6 +5,8 @@ import Modal from '@/app/components/base/modal/index'
 import Tab, { TypeEnum } from './tab'
 import Button from '../../base/button'
 import { RiCloseLine } from '@remixicon/react'
+import AppInfo from './app-info'
+import App from './app'
 
 type Props = {
   appId: string
@@ -23,22 +25,27 @@ const TryApp: FC<Props> = ({
       onClose={onClose}
       className='h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] p-2'
     >
-      <div className='flex items-center justify-between pl-4'>
-        <Tab
-          value={type}
-          onChange={setType}
-        />
-        <Button
-          size='large'
-          variant='tertiary'
-          className='flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text'
-          onClick={onClose}
-        >
-          <RiCloseLine className='size-5' onClick={onClose} />
-        </Button>
+      <div className='flex h-full flex-col'>
+        <div className='flex shrink-0 justify-between pl-4'>
+          <Tab
+            value={type}
+            onChange={setType}
+          />
+          <Button
+            size='large'
+            variant='tertiary'
+            className='flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text'
+            onClick={onClose}
+          >
+            <RiCloseLine className='size-5' onClick={onClose} />
+          </Button>
+        </div>
+        {/* Main content */}
+        <div className='mt-2 flex grow justify-between space-x-2'>
+          <App appId={appId} />
+          <AppInfo className='w-[360px]' />
+        </div>
       </div>
-
-      {appId}
     </Modal>
   )
 }

web/app/components/try/app/meta.tsx

@@ -1,17 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-
-type Props = {
-
-}
-
-const Meta: FC<Props> = ({
-}) => {
-  return (
-    <div>
-      Meta Info
-    </div>
-  )
-}
-export default React.memo(Meta)