@invergent/agent-chat-react 2.0.1 → 2.0.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-QSC4UIVT.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, lazy, useContext, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, GlobeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, ChevronRightIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, GitBranchIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Separator as Separator$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1, Progress as Progress$1, Tabs as Tabs$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -5698,7 +5698,13 @@ function ChatComposerInner({
   disabled = false,
   disabledReason,
   tokenUsage,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const { adapter } = useAgentChatAdapterContext();
   const { textInput, attachments } = usePromptInputController();
@@ -6005,6 +6011,28 @@ function ChatComposerInner({
                       }
                     )
                   ] }),
+                  canShowBrowser && onToggleBrowser && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showBrowser ? "Hide browser pane" : "Show browser pane",
+                      "aria-pressed": showBrowser,
+                      onClick: onToggleBrowser,
+                      tooltip: showBrowser ? "Hide browser pane" : "Show browser pane",
+                      className: showBrowser ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(GlobeIcon, { className: "size-4" })
+                    }
+                  ),
+                  canShowWorkspace && onToggleWorkspace && /* @__PURE__ */ jsx(
+                    PromptInputButton,
+                    {
+                      "aria-label": showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      "aria-pressed": showWorkspace,
+                      onClick: onToggleWorkspace,
+                      tooltip: showWorkspace ? "Hide workspace pane" : "Show workspace pane",
+                      className: showWorkspace ? "bg-accent text-foreground" : void 0,
+                      children: /* @__PURE__ */ jsx(FolderIcon, { className: "size-4" })
+                    }
+                  ),
                   tokenUsage && tokenUsage.contextWindow > 0 && /* @__PURE__ */ jsxs(
                     Context,
                     {
@@ -7223,7 +7251,13 @@ function ChatThread({
   tokenUsage,
   retryIndicator,
   onRetry,
-  onComposerError
+  onComposerError,
+  showBrowser = false,
+  onToggleBrowser,
+  showWorkspace = false,
+  onToggleWorkspace,
+  canShowBrowser = false,
+  canShowWorkspace = false
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
   const artifactFallbacks = useMemo(() => {
@@ -7340,7 +7374,13 @@ function ChatThread({
           disabled,
           disabledReason,
           tokenUsage,
-          onComposerError
+          onComposerError,
+          showBrowser,
+          onToggleBrowser,
+          showWorkspace,
+          onToggleWorkspace,
+          canShowBrowser,
+          canShowWorkspace
         }
       )
     ] })
@@ -9274,6 +9314,16 @@ function useAgentChatRuntime({
         }));
       }
     }).catch(() => void 0);
+    void adapter.getBrowserState(sessionId).then((browserState) => {
+      if (sessionIdRef.current !== sessionId) return;
+      setState((prev) => ({
+        ...prev,
+        browser: browserState ? {
+          status: browserState.status,
+          controlOwner: browserState.controlOwner ?? null
+        } : null
+      }));
+    }).catch(() => void 0);
     return () => {
       clearReconnectTimer();
       closeStream();
@@ -9518,6 +9568,8 @@ function AgentChat({
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
   const [mobileView, setMobileView] = useState("chat");
+  const [showBrowser, setShowBrowser] = useState(true);
+  const [showWorkspace, setShowWorkspace] = useState(true);
   const runtime = useAgentChatRuntime({
     adapter,
     agentId,
@@ -9528,7 +9580,12 @@ function AgentChat({
   const effectiveDisabled = disabled || isReadOnlySession;
   const disabledReason = isReadOnlySession ? "Scheduled run is read-only" : void 0;
   const browserState = runtime.state.browser;
-  const hasBrowserPanel = browserState !== null && sessionId;
+  const browserAvailable = browserState !== null && browserState.status !== "closed" && !!sessionId;
+  const browserVisible = browserAvailable && showBrowser;
+  const workspaceAvailable = !!sessionId;
+  const workspaceVisible = workspaceAvailable && showWorkspace;
+  const rightStackVisible = browserVisible || workspaceVisible;
+  const bothPanesVisible = browserVisible && workspaceVisible;
   useEffect(() => {
     onMessagesChange?.(runtime.messages);
   }, [onMessagesChange, runtime.messages]);
@@ -9536,11 +9593,18 @@ function AgentChat({
     (path) => {
       setWorkspacePath(path);
       setMobileView("workspace");
+      setShowWorkspace(true);
       onFileSelect?.(path);
     },
     [onFileSelect]
   );
-  const showMobileToggle = Boolean(sessionId);
+  const handleToggleBrowser = useCallback(() => {
+    setShowBrowser((prev) => !prev);
+  }, []);
+  const handleToggleWorkspace = useCallback(() => {
+    setShowWorkspace((prev) => !prev);
+  }, []);
+  const showMobileToggle = rightStackVisible;
   return /* @__PURE__ */ jsx(
     AgentChatAdapterProvider,
     {
@@ -9558,8 +9622,11 @@ function AgentChat({
             // Phone: flex column, tab toggle on top, then either chat or
             // right stack visible based on `data-mobile-view`.
             "flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-sm text-foreground",
-            // md+: restore desktop two-pane layout.
-            hasBrowserPanel ? "md:relative md:flex-row" : "md:flex-row"
+            // md+: restore desktop two-pane layout when the right stack
+            // is visible. With both panes, absolute positioning lets the
+            // browser/workspace split occupy a fixed width. Without the
+            // right stack, the chat takes the full width.
+            browserVisible ? "md:relative md:flex-row" : "md:flex-row"
           ),
           style: { direction: "ltr", ...RIGHT_STACK_STYLE },
           children: [
@@ -9600,8 +9667,13 @@ function AgentChat({
                   // Phone: full width column, hidden when workspace tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=workspace]:hidden md:flex!",
-                  // md+: restore desktop positioning.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
+                  // md+: positioning depends on whether the browser/workspace
+                  // right stack is laid out. When the browser pane is shown
+                  // we pin a fixed-width column on the right and absolutely
+                  // position the chat panel beside it. Otherwise the chat
+                  // panel just flexes alongside the workspace (or fills the
+                  // space when nothing else is visible).
+                  browserVisible ? "md:absolute md:inset-y-0 md:left-0 md:right-(--right-stack-w,440px) md:flex" : "md:relative md:flex-1"
                 ),
                 children: /* @__PURE__ */ jsx(
                   ChatThread,
@@ -9618,12 +9690,18 @@ function AgentChat({
                     disabledReason,
                     tokenUsage: runtime.tokenUsage,
                     retryIndicator: runtime.retryIndicator,
-                    onComposerError
+                    onComposerError,
+                    showBrowser,
+                    onToggleBrowser: handleToggleBrowser,
+                    showWorkspace,
+                    onToggleWorkspace: handleToggleWorkspace,
+                    canShowBrowser: browserAvailable,
+                    canShowWorkspace: workspaceAvailable
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsxs(
+            rightStackVisible && /* @__PURE__ */ jsxs(
               "div",
               {
                 "data-testid": "right-stack",
@@ -9632,17 +9710,23 @@ function AgentChat({
                   // Phone: full width column, hidden when chat tab active.
                   "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
                   showMobileToggle && "data-[mobile-view=chat]:hidden md:flex!",
-                  // md+: restore desktop positioning. With browser panel the
-                  // right stack is absolutely positioned at the configured
-                  // width; without it the stack flows in the row.
-                  hasBrowserPanel ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-(--right-stack-w,440px)"
+                  // md+: positioning differs depending on what is inside.
+                  // - browser visible (with or without workspace): absolute
+                  //   right column at the configured width.
+                  // - workspace only: relative shrink-0 column letting
+                  //   WorkspacePanel manage its own width via the resize
+                  //   handle.
+                  browserVisible ? "md:absolute md:inset-y-0 md:right-0 md:w-(--right-stack-w,440px) md:flex-none" : "md:relative md:shrink-0 md:flex-none md:w-auto"
                 ),
                 children: [
-                  hasBrowserPanel && /* @__PURE__ */ jsx(
+                  browserVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "browser-panel",
-                      className: "h-1/2 min-h-0 w-full overflow-hidden border-b border-line",
+                      className: cn(
+                        "min-h-0 w-full overflow-hidden",
+                        bothPanesVisible ? "h-1/2 border-b border-line" : "h-full"
+                      ),
                       children: /* @__PURE__ */ jsx(
                         BrowserPane,
                         {
@@ -9653,11 +9737,11 @@ function AgentChat({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  workspaceVisible && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-testid": "workspace-panel-frame",
-                      className: hasBrowserPanel ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
+                      className: bothPanesVisible ? "h-1/2 min-h-0 w-full overflow-hidden" : "min-h-0 h-full",
                       children: /* @__PURE__ */ jsx(
                         WorkspacePanel,
                         {
@@ -9667,7 +9751,7 @@ function AgentChat({
                           onSelectedPathChange: setWorkspacePath,
                           refreshSignal: runtime.workspaceRefreshKey,
                           disabled: effectiveDisabled,
-                          fillParent: Boolean(hasBrowserPanel)
+                          fillParent: bothPanesVisible
                         }
                       )
                     }