@nocobase/portal-template-default 1.0.9 → 1.0.11

package/{registry → src/extensions}/nocobase-ai/components/chat/chat-messages.tsx

@@ -9,7 +9,13 @@ import {
 } from "../../providers";
 import { cn } from "@/lib/utils";
 import { ArrowDown } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { ChatEmptyState } from "./chat-empty-state";
 import { ChatMessage } from "./chat-message";
 
@@ -81,6 +87,7 @@ export function AIChatMessageList({
   focusComposer,
 }: AIChatMessageListProps) {
   const viewportRef = useRef<HTMLDivElement>(null);
+  const bottomOffsetRef = useRef(0);
   const [atBottom, setAtBottom] = useState(true);
 
   const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
@@ -89,6 +96,31 @@ export function AIChatMessageList({
     viewport.scrollTo({ top: viewport.scrollHeight, behavior });
   };
 
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTop = viewport.scrollHeight;
+    bottomOffsetRef.current = 0;
+  }, []);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(() => {
+      const maxScrollTop = Math.max(
+        0,
+        viewport.scrollHeight - viewport.clientHeight
+      );
+      viewport.scrollTop = Math.max(
+        0,
+        maxScrollTop - bottomOffsetRef.current
+      );
+    });
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     if (atBottom) scrollToBottom(status === "streaming" ? "auto" : "smooth");
   }, [atBottom, messages, status]);
@@ -107,9 +139,12 @@ export function AIChatMessageList({
         className="absolute inset-0 overflow-x-hidden overflow-y-auto overscroll-contain"
         onScroll={(event) => {
           const element = event.currentTarget;
-          setAtBottom(
-            element.scrollHeight - element.scrollTop - element.clientHeight < 48
+          const bottomOffset = Math.max(
+            0,
+            element.scrollHeight - element.scrollTop - element.clientHeight
           );
+          bottomOffsetRef.current = bottomOffset;
+          setAtBottom(bottomOffset < 48);
         }}
       >
         {loading ? (

package/{registry → src/extensions}/nocobase-ai/components/chat/tool-call-card.tsx

@@ -131,9 +131,7 @@ export function ToolCallCard({
   const [deciding, setDeciding] = useState(false);
   const renderer = useAIToolRenderer(getToolCallName(part));
   const Renderer = renderer?.component;
-  const [open, setOpen] = useState(
-    part.state === "output-error" || Boolean(Renderer)
-  );
+  const [open, setOpen] = useState(false);
   const toolStatus = getStatus(part);
   const approvalRequired =
     resolvedApproval?.required === true && approvalStatus === "pending";
@@ -152,12 +150,6 @@ export function ToolCallCard({
     setApprovalStatus(resolvedApproval?.status ?? "pending");
   }, [resolvedApproval?.status]);
 
-  useEffect(() => {
-    if (part.state === "output-error") {
-      setOpen(true);
-    }
-  }, [part.state]);
-
   const decide = async (
     decision: "approve" | "reject" | "edit",
     input?: unknown

package/{registry → src/extensions}/nocobase-ai/components/index.ts

@@ -13,6 +13,11 @@ export {
 } from "./chat/chat-messages";
 export { AIModelSelectOptions } from "./chat/model-select-options";
 export { ChatDialog } from "./surfaces/chat-dialog";
+export {
+  ChatSurface,
+  type ChatSurfaceProps,
+  type ChatSurfaceVariant,
+} from "./surfaces/chat-surface";
 export { ChatSurfaceActions } from "./surfaces/chat-surface-actions";
 export { ChatInline } from "./surfaces/chat-inline";
 export { ChatPage } from "./surfaces/chat-page";

package/src/extensions/nocobase-ai/components/surfaces/chat-dialog.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from "react";
+import { ChatSurface } from "./chat-surface";
+
+export function ChatDialog({
+  open,
+  onOpenChange,
+  children,
+}: PropsWithChildren<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}>) {
+  return (
+    <ChatSurface open={open} variant="dialog" onOpenChange={onOpenChange}>
+      {children}
+    </ChatSurface>
+  );
+}

package/src/extensions/nocobase-ai/components/surfaces/chat-side-panel.tsx

@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from "react";
+import { ChatSurface } from "./chat-surface";
+
+export type ChatSidePanelProps = PropsWithChildren<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side?: "left" | "right";
+  width?: number | string;
+  closeOnEscape?: boolean;
+  showCloseHandle?: boolean;
+}>;
+
+export function ChatSidePanel({
+  open,
+  onOpenChange,
+  side = "right",
+  width = 450,
+  closeOnEscape = true,
+  showCloseHandle = true,
+  children,
+}: ChatSidePanelProps) {
+  return (
+    <ChatSurface
+      open={open}
+      variant="side-panel"
+      onOpenChange={onOpenChange}
+      side={side}
+      width={width}
+      closeOnEscape={closeOnEscape}
+      showCloseHandle={showCloseHandle}
+    >
+      {children}
+    </ChatSurface>
+  );
+}

package/src/extensions/nocobase-ai/components/surfaces/chat-surface.tsx

@@ -0,0 +1,108 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { PanelLeftClose, PanelRightClose } from "lucide-react";
+import type { CSSProperties, PropsWithChildren } from "react";
+
+export type ChatSurfaceVariant = "side-panel" | "dialog";
+
+export type ChatSurfaceProps = PropsWithChildren<{
+  open: boolean;
+  variant: ChatSurfaceVariant;
+  onOpenChange: (open: boolean) => void;
+  side?: "left" | "right";
+  width?: number | string;
+  closeOnEscape?: boolean;
+  showCloseHandle?: boolean;
+}>;
+
+export function ChatSurface({
+  open,
+  variant,
+  onOpenChange,
+  side = "right",
+  width = 450,
+  closeOnEscape = true,
+  showCloseHandle = false,
+  children,
+}: ChatSurfaceProps) {
+  const expanded = variant === "dialog";
+  const panelWidth = typeof width === "number" ? `${width}px` : width;
+
+  return (
+    <DialogPrimitive.Root
+      open={open}
+      modal={expanded}
+      disablePointerDismissal={!expanded}
+      onOpenChange={(nextOpen, eventDetails) => {
+        if (
+          !nextOpen &&
+          eventDetails.reason === "escape-key" &&
+          !closeOnEscape
+        ) {
+          return;
+        }
+        onOpenChange(nextOpen);
+      }}
+    >
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Backdrop
+          className={cn(
+            "fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-closed:pointer-events-none",
+            !expanded && "pointer-events-none opacity-0"
+          )}
+        />
+        <DialogPrimitive.Popup
+          data-variant={variant}
+          data-side={side}
+          initialFocus={expanded}
+          className={cn(
+            "fixed z-50 flex max-w-full bg-background text-foreground shadow-2xl outline-none",
+            "data-closed:pointer-events-none data-closed:opacity-0",
+            expanded
+              ? "top-1/2 left-1/2 h-[95svh] w-[95vw] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border"
+              : cn(
+                  "inset-y-0 h-svh w-(--chat-surface-width) translate-x-0 translate-y-0 overflow-visible rounded-none",
+                  side === "right"
+                    ? "right-0 border-l"
+                    : "left-0 border-r"
+                )
+          )}
+          style={
+            {
+              "--chat-surface-width": panelWidth,
+            } as CSSProperties
+          }
+        >
+          <DialogPrimitive.Title className="sr-only">
+            NocoBase AI employee
+          </DialogPrimitive.Title>
+          <DialogPrimitive.Description className="sr-only">
+            {expanded
+              ? "Expanded AI conversation window."
+              : "AI conversation side panel."}
+          </DialogPrimitive.Description>
+          {showCloseHandle && !expanded ? (
+            <Button
+              variant="outline"
+              size="icon-sm"
+              className={cn(
+                "absolute top-1/2 z-40 size-9 -translate-y-1/2 rounded-full bg-background shadow-md before:absolute before:-inset-2",
+                side === "right"
+                  ? "left-0 -translate-x-1/2"
+                  : "right-0 translate-x-1/2"
+              )}
+              aria-label="Close side panel"
+              onClick={() => onOpenChange(false)}
+            >
+              {side === "right" ? <PanelRightClose /> : <PanelLeftClose />}
+            </Button>
+          ) : null}
+          <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+            {children}
+          </div>
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/{registry → src/extensions}/nocobase-ai/components/triggers/ai-chat-floating-trigger.tsx

@@ -1,5 +1,5 @@
 import nocobaseAIChatIcon from "../../assets/nocobase-ai-chat.svg";
-import { cn } from "@/lib/utils";
+import { assetUrl, cn } from "@/lib/utils";
 import {
   useAI,
   useAIChatControllerState,
@@ -57,7 +57,7 @@ export function AIChatFloatingTrigger({
       <span className="relative flex size-[42px] items-center justify-center">
         <span className="flex size-full overflow-hidden rounded-lg">
           <img
-            src={nocobaseAIChatIcon}
+            src={assetUrl(nocobaseAIChatIcon)}
             alt=""
             className="size-full object-contain"
           />

package/{registry → src/extensions}/nocobase-ai/demo/configuration-gate.tsx

@@ -65,7 +65,10 @@ const previewService: AIService = {
 
 export function AIConfigurationGate({ children }: { children: ReactNode }) {
   const { configurationStatus, hasEnabledModels, employees } = useAI();
-  const configured = configurationStatus === "ready" && hasEnabledModels;
+  const configured =
+    configurationStatus === "ready" &&
+    hasEnabledModels &&
+    employees.length > 0;
 
   if (configured) return children;
 

package/{registry → src/extensions}/nocobase-ai/demo/container-showcase.tsx

@@ -199,9 +199,9 @@ const containerComponent = (value: ChatContainer) => {
     case "page":
       return "<ChatPage />";
     case "side-panel":
-      return "<ChatSidePanelLayout />";
+      return '<ChatSurface variant="side-panel" />';
     case "dialog":
-      return "<ChatDialog />";
+      return '<ChatSurface variant="dialog" />';
     case "mobile":
       return "<ChatInline /> · 390px";
     default:

package/{registry → src/extensions}/nocobase-ai/demo/floating.tsx

@@ -1,7 +1,8 @@
 import {
   AIChatFloatingTrigger,
   AIChatWindow,
-  ChatSidePanelLayout,
+  ChatSurface,
+  ChatSurfaceActions,
 } from "../components";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
@@ -12,19 +13,22 @@ import {
 } from "../providers";
 import { PromptCard } from "./prompt-card";
 import { AIConfigurationGate } from "./configuration-gate";
+import { useState, type CSSProperties } from "react";
 
 const floatingPrompt = `Add the standard NocoBase AI floating chat entry to the application layout.
 
 Requirements:
 - Render AIChatFloatingTrigger at the lower-right edge of the application.
 - Bind it to the global AI chat controller.
-- Clicking the trigger opens a 450px ChatSidePanelLayout on the right.
+- Clicking the trigger opens ChatSurface with variant="side-panel" and a 450px width on the right.
 - The side panel must push the desktop page narrower instead of blocking page interaction.
 - Mobile may switch to an overlay presentation.
 - Hide the floating trigger while the side panel is open.
 - Support an unread-count badge.
 - Start a new conversation with the configured default AI employee when opened.
-- Keep the trigger and side-panel surface separate from AIChatWindow.
+- Put ChatSurfaceActions in the AIChatWindow header so expand/collapse and close stay in the upper-right corner.
+- Keep one AIChatWindow mounted and change ChatSurface.variant to "dialog" when expanded.
+- Keep the trigger and ChatSurface separate from AIChatWindow.
 - Use shadcn/Base UI components and the existing AIProvider/AIChatProvider runtime.`;
 
 export function FloatingChatPage() {
@@ -38,14 +42,24 @@ export function FloatingChatPage() {
 function FloatingChatPageContent() {
   const controller = useAIChatController();
   const { open } = useAIChatControllerState(controller);
+  const [expanded, setExpanded] = useState(false);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen) setExpanded(false);
+    controller.setOpen(nextOpen);
+  };
 
   return (
     <AIChatProvider id="floating-chat-demo" controller={controller}>
-      <ChatSidePanelLayout
-        open={open}
-        onOpenChange={controller.setOpen}
-        width={450}
-        panel={<AIChatWindow />}
+      <div
+        data-open={open && !expanded}
+        data-side="right"
+        className="chat-side-panel-layout @container min-w-0"
+        style={
+          {
+            "--chat-side-panel-width": "450px",
+          } as CSSProperties
+        }
       >
         <div className="space-y-12 pb-12">
           <section className="flex flex-wrap items-start justify-between gap-5 border-b pb-8">
@@ -58,9 +72,9 @@ function FloatingChatPageContent() {
                 Floating AI Chat
               </h1>
               <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
-                A global lower-right entry for the shared AI conversation. It is
-                intentionally coupled to the push side-panel surface rather than
-                treated as a generic chat container.
+                A global lower-right entry for the shared AI conversation. It
+                opens as a push side panel and can expand into a focused dialog
+                without remounting the chat window.
               </p>
             </div>
           </section>
@@ -71,7 +85,7 @@ function FloatingChatPageContent() {
                 Interactive preview
               </p>
               <h2 className="mt-2 text-xl font-semibold tracking-tight">
-                Global launcher and push side panel
+                Global launcher and adaptive chat surface
               </h2>
               <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
                 The trigger is constrained to this simulated application in the
@@ -83,7 +97,7 @@ function FloatingChatPageContent() {
               <div className="flex h-12 items-center justify-between border-b px-4">
                 <span className="text-sm font-medium">Application shell</span>
                 <code className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
-                  AIChatFloatingTrigger → ChatSidePanelLayout
+                  AIChatFloatingTrigger → ChatSurface · side-panel/dialog
                 </code>
               </div>
               <div className="relative grid min-h-[560px] grid-cols-[190px_minmax(0,1fr)] overflow-hidden bg-background">
@@ -123,12 +137,28 @@ function FloatingChatPageContent() {
             </div>
             <PromptCard
               title="Add a lower-right AI floating entry"
-              description="This prompt only configures the global trigger and its side panel."
+              description="This prompt configures the global trigger and its switchable side-panel/dialog surface."
               prompt={floatingPrompt}
             />
           </section>
         </div>
-      </ChatSidePanelLayout>
+        <ChatSurface
+          open={open}
+          variant={expanded ? "dialog" : "side-panel"}
+          onOpenChange={handleOpenChange}
+          width={450}
+        >
+          <AIChatWindow
+            headerActions={
+              <ChatSurfaceActions
+                expanded={expanded}
+                onExpandedChange={setExpanded}
+                onClose={() => handleOpenChange(false)}
+              />
+            }
+          />
+        </ChatSurface>
+      </div>
     </AIChatProvider>
   );
 }