From ebe8411e7e00aa82dfd4365c62e3271bd0161849 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Sat, 13 Jun 2026 20:09:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20compact=20device=20guar?=
 =?UTF-8?q?d=20alert=20(#15776)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HeterogeneousChatInput/index.tsx          | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/routes/(main)/agent/features/Conversation/HeterogeneousChatInput/index.tsx b/src/routes/(main)/agent/features/Conversation/HeterogeneousChatInput/index.tsx
index 3eab8a7c70..ee3f90cd1e 100644
--- a/src/routes/(main)/agent/features/Conversation/HeterogeneousChatInput/index.tsx
+++ b/src/routes/(main)/agent/features/Conversation/HeterogeneousChatInput/index.tsx
@@ -92,13 +92,14 @@ const HeterogeneousChatInput = memo(() => {
     }
 
     return (
-      <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
-        <Alert
-          title={title}
-          type={'warning'}
-          description={
-            <Flexbox horizontal align={'center'} gap={8} justify={'space-between'}>
-              <span>{desc}</span>
+      <WideScreenContainer>
+        <Flexbox align={'center'} paddingBlock={'0 8px'} paddingInline={12}>
+          <Alert
+            description={desc}
+            style={{ maxWidth: 880, width: '100%' }}
+            title={title}
+            type={'warning'}
+            action={
               <Flexbox horizontal gap={6}>
                 <Button size={'small'} onClick={refresh}>
                   {t('platformAgent.deviceGuard.refresh')}
@@ -107,44 +108,50 @@ const HeterogeneousChatInput = memo(() => {
                   {t('platformAgent.deviceGuard.configure')}
                 </Button>
               </Flexbox>
-            </Flexbox>
-          }
-        />
-      </Flexbox>
+            }
+          />
+        </Flexbox>
+      </WideScreenContainer>
+    );
+  };
+
+  const renderCloudConfigGuard = () => {
+    if (isDeviceExecution || isConfigured) return null;
+
+    return (
+      <WideScreenContainer>
+        <Flexbox align={'center'} paddingBlock={'0 8px'} paddingInline={12}>
+          <Alert
+            description={t('heteroAgent.cloudNotConfigured.desc')}
+            style={{ maxWidth: 880, width: '100%' }}
+            title={t('heteroAgent.cloudNotConfigured.title')}
+            type={'warning'}
+            action={
+              <Button size={'small'} type={'primary'} onClick={goToConfig}>
+                {t('heteroAgent.cloudNotConfigured.action')}
+              </Button>
+            }
+          />
+        </Flexbox>
+      </WideScreenContainer>
     );
   };
 
   // Device execution doesn't use the cloud sandbox, so it doesn't need cloud
   // credentials — only the sandbox path gates on `isConfigured`.
   const inputDisabled = (!isConfigured && !isDeviceExecution) || deviceBlocked;
+  const hasGuard = deviceBlocked || (!isConfigured && !isDeviceExecution);
 
   return (
     <Flexbox>
-      {!isDeviceExecution && !isConfigured && (
-        <WideScreenContainer>
-          <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
-            <Alert
-              title={t('heteroAgent.cloudNotConfigured.title')}
-              type={'warning'}
-              description={
-                <Flexbox horizontal align={'center'} gap={8} justify={'space-between'}>
-                  <span>{t('heteroAgent.cloudNotConfigured.desc')}</span>
-                  <Button size={'small'} type={'primary'} onClick={goToConfig}>
-                    {t('heteroAgent.cloudNotConfigured.action')}
-                  </Button>
-                </Flexbox>
-              }
-            />
-          </Flexbox>
-        </WideScreenContainer>
-      )}
+      {renderCloudConfigGuard()}
       {renderDeviceGuard()}
       <ChatInput
-        skipScrollMarginWithList
         controlBarSlot={<HeteroControlBar />}
         leftActions={leftActions}
         rightActions={rightActions}
         sendButtonProps={{ disabled: inputDisabled, shape: 'round' }}
+        skipScrollMarginWithList={!hasGuard}
         onEditorReady={(instance) => {
           // Sync to global ChatStore for compatibility with other features
           useChatStore.setState({ mainInputEditor: instance });