refactor: improve layout responsiveness and styling for chat components

web/components/chat/shared-message-editor.tsx

@@ -389,7 +389,7 @@ export function SharedMessageEditor({
           ) : null}
         </div>
         <div className="flex items-center gap-2">
-          <p className={isCustomer ? "text-[10px] text-muted-foreground" : "text-xs text-muted-foreground"}>
+          <p className={isCustomer ? "hidden text-[10px] text-muted-foreground sm:block" : "text-xs text-muted-foreground"}>
             Enter 发送
           </p>
           {isCustomer ? (
@@ -422,7 +422,7 @@ export function SharedMessageEditor({
 
   if (isCustomer) {
     return (
-      <div className="p-3">
+      <div className="px-3 pt-2 pb-3">
         <div className="rounded-xl border border-border bg-background p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)] dark:shadow-none">
           {editorContent}
         </div>

web/components/kefu/chat-shell.tsx

@@ -255,19 +255,19 @@ export function KefuChatShell() {
 
   return (
     <main
-      className="relative flex h-screen overflow-hidden bg-muted text-foreground"
+      className="relative flex h-[100dvh] min-h-[100dvh] overflow-hidden bg-muted text-foreground supports-not-[height:100dvh]:h-screen supports-not-[height:100dvh]:min-h-screen"
       style={{ "--primary": themeColor } as CSSProperties}
     >
       <section className="flex h-full w-full flex-col overflow-hidden bg-card text-card-foreground">
-        <header className="shrink-0 border-b border-border bg-card/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none">
-          <div className="flex items-center justify-between gap-3">
+        <header className="shrink-0 border-b border-border bg-card/95 px-3 py-2.5 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none sm:px-4 sm:py-3">
+          <div className="flex min-w-0 items-center justify-between gap-2 sm:gap-3">
             <div className="min-w-0">
               <div className="truncate text-base font-semibold text-foreground">
                 {title}
               </div>
-              <div className="mt-1 truncate text-xs text-muted-foreground">{subtitle}</div>
+              <div className="mt-0.5 truncate text-xs text-muted-foreground sm:mt-1">{subtitle}</div>
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex shrink-0 items-center gap-1 sm:gap-2">
               {status !== "connected" ? (
                 <KefuConnectionStatus status={status} />
               ) : null}
@@ -338,12 +338,14 @@ export function KefuChatShell() {
             loadingOlder={messagesLoadingMore}
             onLoadOlder={loadOlderMessages}
           />
-          <CustomerMessageEditor
-            disabled={!conversation}
-            onSend={handleSend}
-            onUploadImage={uploadMessageImage}
-            onSendAttachment={sendAttachment}
-          />
+          <div className="shrink-0 pb-[env(safe-area-inset-bottom)]">
+            <CustomerMessageEditor
+              disabled={!conversation}
+              onSend={handleSend}
+              onUploadImage={uploadMessageImage}
+              onSendAttachment={sendAttachment}
+            />
+          </div>
         </div>
 
         {error ? (

web/lib/sdk/cs-ai-agent-sdk.test.mjs

@@ -142,3 +142,25 @@ test("launcher click creates chat iframe with a freshly resolved userToken", asy
   assert.ok(frame)
   assert.equal(new URL(frame.src).searchParams.get("userToken"), "click_token")
 })
+
+test("chat iframe layout uses dynamic viewport height for iOS browser chrome", async () => {
+  const sandbox = await loadSdk({
+    channelId: "ch_1",
+    baseUrl: "https://api.example",
+  })
+  await flushPromises()
+  const launcher = sandbox.document.body.children.find(
+    (child) => child.dataset.csAgentWidget === "launcher"
+  )
+
+  launcher.click()
+  await flushPromises()
+
+  const frame = sandbox.document.body.children.find(
+    (child) => child.dataset.csAgentWidget === "frame"
+  )
+
+  assert.ok(frame)
+  assert.match(frame.style.height, /100dvh/)
+  assert.match(frame.style.maxWidth, /100vw/)
+})

web/lib/sdk/cs-ai-agent-sdk.ts

@@ -222,25 +222,29 @@ type FrameMessage =
       config.position === "left" ? "left bottom" : "right bottom"
 
     if (state.isMaximized) {
-      frame.style.top = "20px"
-      frame.style.right = "20px"
-      frame.style.bottom = "20px"
-      frame.style.left = "20px"
-      frame.style.width = "calc(100vw - 40px)"
+      frame.style.top = "max(12px, env(safe-area-inset-top))"
+      frame.style.right = "max(12px, env(safe-area-inset-right))"
+      frame.style.bottom = "max(12px, env(safe-area-inset-bottom))"
+      frame.style.left = "max(12px, env(safe-area-inset-left))"
+      frame.style.width =
+        "calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))"
       frame.style.maxWidth = "none"
-      frame.style.height = "calc(100vh - 40px)"
-      frame.style.borderRadius = "24px"
+      frame.style.height =
+        "calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))"
+      frame.style.borderRadius = "20px"
       return
     }
 
     frame.style.top = ""
-    frame.style.bottom = "112px"
-    frame.style.right = config.position === "left" ? "" : "24px"
-    frame.style.left = config.position === "left" ? "24px" : ""
+    frame.style.bottom = "max(88px, calc(72px + env(safe-area-inset-bottom)))"
+    frame.style.right = config.position === "left" ? "" : "max(12px, env(safe-area-inset-right))"
+    frame.style.left = config.position === "left" ? "max(12px, env(safe-area-inset-left))" : ""
     frame.style.width = config.width || "380px"
-    frame.style.maxWidth = "calc(100vw - 24px)"
-    frame.style.height = "min(760px, calc(100vh - 136px))"
-    frame.style.borderRadius = "28px"
+    frame.style.maxWidth =
+      "calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))"
+    frame.style.height =
+      "min(760px, calc(100dvh - max(104px, calc(88px + env(safe-area-inset-bottom))) - max(12px, env(safe-area-inset-top))))"
+    frame.style.borderRadius = "24px"
   }
 
   function postToFrame(message: FrameMessage) {