增加AI页面在其它页面的展示

client/src/pages/AIPage.tsx

@@ -43,7 +43,10 @@ import {
   RotateCcw,
   Loader2,
   Trash2,
+  Maximize2,
+  ChevronsRight,
 } from "lucide-react";
+import { useLocation } from "wouter";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
 import { toast } from "sonner";
@@ -134,7 +137,17 @@ function makeId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
 
-export default function AIPage() {
+export type AIPageVariant = "page" | "split";
+
+export interface AIPageProps {
+  variant?: AIPageVariant;
+  /** Hide side panel (desktop split) */
+  onClose?: () => void;
+}
+
+export default function AIPage({ variant = "page", onClose }: AIPageProps = {}) {
+  const isEmbedded = variant === "split";
+  const [, setLocation] = useLocation();
   const { isConnected, deviceState, api } = useDevice();
   const mac = deviceState?.mac ?? "";
   const language = deviceState?.language ?? 2;
@@ -610,11 +623,41 @@ export default function AIPage() {
 
   return (
     <div
-      className="h-[100dvh] bg-black flex flex-col overflow-hidden pb-[calc(env(safe-area-inset-bottom,0px)+56px)]"
+      className={cn(
+        "flex flex-col overflow-hidden bg-black",
+        /* Same clearance as Layout/main above fixed BottomNav */
+        "pb-[calc(4rem+env(safe-area-inset-bottom,0px))]",
+        isEmbedded ? "h-full min-h-0" : "h-[100dvh]",
+      )}
     >
       {/* ── Header ── */}
       <div className="page-header flex-shrink-0">
         <div className="flex items-center gap-2 mr-auto">
+          {isEmbedded && onClose && (
+            <>
+              <button
+                type="button"
+                onClick={onClose}
+                className="mr-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
+                style={{ background: "rgba(44,44,46,0.6)" }}
+                aria-label={aiText.ariaHidePanel}
+              >
+                <ChevronsRight size={18} />
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setLocation("/ai");
+                  onClose();
+                }}
+                className="mr-1 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-white/70 transition-colors active:text-white"
+                style={{ background: "rgba(44,44,46,0.6)" }}
+                aria-label={aiText.ariaFullPage}
+              >
+                <Maximize2 size={16} />
+              </button>
+            </>
+          )}
           <div
             className="w-7 h-7 rounded-full flex items-center justify-center"
             style={{
@@ -790,7 +833,7 @@ export default function AIPage() {
         />
       )}
 
-      <BottomNav />
+      {!isEmbedded && <BottomNav />}
     </div>
   );
 }