chore: ui

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

@@ -15,12 +15,7 @@ const InstalledApp: FC<IInstalledAppProps> = ({
 }) => {
   const { installedApps } = useContext(ExploreContext)
   const installedApp  = installedApps.find(item => item.id === id)
-  const app = installedApp ? {
-    id: installedApp.id,
-    name
-  } : null
   
-
   if(!installedApp) {
     return (
       <div className='flex h-full items-center'>
@@ -30,7 +25,7 @@ const InstalledApp: FC<IInstalledAppProps> = ({
   }
   
   return (
-    <div className='h-full'>
+    <div className='h-full p-2'>
       {installedApp?.app.mode === 'chat' ? (
         <ChatApp isInstalledApp installedAppInfo={installedApp}/>
       ): (

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

@@ -70,7 +70,7 @@ const SideBar: FC<{
   }, [controlUpdateInstalledApps])
 
   return (
-    <div className='w-[216px] shrink-0 pt-6 px-4 border-r border-gray-200 cursor-pointer'>
+    <div className='w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
       <div>
         <Link
           href='/explore/apps'

web/app/components/share/chat/index.tsx

@@ -471,7 +471,15 @@ const Main: FC<IMainProps> = ({
       {/* {isNewConversation ? 'new' : 'exist'}
         {JSON.stringify(newConversationInputs ? newConversationInputs : {})}
         {JSON.stringify(existConversationInputs ? existConversationInputs : {})} */}
-      <div className="flex rounded-t-2xl bg-white overflow-hidden">
+      <div 
+        className={cn(
+          "flex rounded-t-2xl bg-white overflow-hidden",
+          isInstalledApp && 'rounded-b-2xl',
+        )}
+        style={isInstalledApp ? {
+          boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)'
+        } : {}}
+      >
         {/* sidebar */}
         {!isMobile && renderSidebar()}
         {isMobile && isShowSidebar && (

web/app/components/share/chat/sidebar/index.tsx

@@ -39,7 +39,7 @@ const Sidebar: FC<ISidebarProps> = ({
     <div
       className={
         classNames(
-          isInstalledApp ? 'tablet:h-[calc(100vh_-_58px)]' : 'tablet:h-[calc(100vh_-_3rem)]',
+          isInstalledApp ? 'tablet:h-[calc(100vh_-_74px)]' : 'tablet:h-[calc(100vh_-_3rem)]',
           "shrink-0 flex flex-col overflow-y-auto bg-white pc:w-[244px] tablet:w-[192px] mobile:w-[240px]  border-r border-gray-200 mobile:h-screen"
         )
       }

web/app/components/share/chat/style.module.css

@@ -1,3 +1,3 @@
 .installedApp {
-  height: calc(100vh - 58px);
+  height: calc(100vh - 74px);
 }

web/app/components/share/text-generation/index.tsx

@@ -275,7 +275,11 @@ const TextGeneration: FC<IMainProps> = ({
         'bg-gray-50'
       )}>
         {/* Left */}
-        <div className={cn(isPC ? 'w-[600px] max-w-[50%] p-8' : 'p-4', "shrink-0 relative flex flex-col pb-10 h-full border-r border-gray-100 bg-white")}>
+        <div className={cn(
+          isPC ? 'w-[600px] max-w-[50%] p-8' : 'p-4',
+          isInstalledApp && 'rounded-l-2xl',
+          "shrink-0 relative flex flex-col pb-10 h-full border-r border-gray-100 bg-white"
+        )}>
           <div className='mb-6'>
             <div className='flex justify-between items-center'>
               <div className='flex items-center space-x-3'>

web/app/components/share/text-generation/style.module.css

@@ -1,5 +1,7 @@
 .installedApp {
-  height: calc(100vh - 72px);
+  height: calc(100vh - 74px);
+  border-radius: 16px;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 
 .appIcon {