From 949bf38d3c162673d8d4e1985ccf9565139f669e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 24 Oct 2025 15:30:53 +0800
Subject: [PATCH] fix: chat setup ui

---
 web/app/components/base/chat/chat/index.tsx                 | 4 ++--
 .../base/chat/embedded-chatbot/inputs-form/index.tsx        | 6 +++++-
 web/app/components/explore/try-app/app/chat.tsx             | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index df94d61d3d..27df7e558a 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -240,10 +240,10 @@ const Chat: FC<ChatProps> = ({
       disableFeedback={disableFeedback}
       onFeedback={onFeedback}
     >
-      <div className='relative h-full'>
+      <div className={cn('relative h-full', isTryApp && 'flex flex-col')}>
         <div
           ref={chatContainerRef}
-          className={cn('relative h-full overflow-y-auto overflow-x-hidden', isTryApp && 'grow', chatContainerClassName)}
+          className={cn('relative h-full overflow-y-auto overflow-x-hidden', isTryApp && 'h-0 grow', chatContainerClassName)}
         >
           {chatNode}
           <div
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 88472b5d8f..bed37ec0cf 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -6,6 +6,7 @@ import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import { useEmbeddedChatbotContext } from '../context'
 import cn from '@/utils/classnames'
+import { AppSourceType } from '@/service/share'
 
 type Props = {
   collapsed: boolean
@@ -18,6 +19,7 @@ const InputsFormNode = ({
 }: Props) => {
   const { t } = useTranslation()
   const {
+    appSourceType,
     isMobile,
     currentConversationId,
     themeBuilder,
@@ -25,15 +27,17 @@ const InputsFormNode = ({
     allInputsHidden,
     inputsForms,
   } = useEmbeddedChatbotContext()
+  const isTryApp = appSourceType === AppSourceType.tryApp
 
   if (allInputsHidden || inputsForms.length === 0)
     return null
 
   return (
-    <div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4')}>
+    <div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4', isTryApp && 'px-0')}>
       <div className={cn(
         'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
         collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
+        isTryApp && 'max-w-[auto]',
       )}>
         <div className={cn(
           'flex items-center gap-3 rounded-t-2xl px-6 py-4',
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index 9d5cead2dc..54f167391d 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -57,7 +57,7 @@ const TryApp: FC<Props> = ({
             <div className='system-md-semibold grow truncate text-text-primary' title={appDetail.name}>{appDetail.name}</div>
           </div>
         </div>
-        <div className='mx-auto mt-4 flex w-[769px] grow flex-col'>
+        <div className='mx-auto mt-4 flex h-[0] w-[769px] grow flex-col'>
           {!isHideTryNotice && (
             <Alert className='mb-4 shrink-0' message={t('explore.tryApp.tryInfo')} onHide={hideTryNotice} />
           )}