@invergent/agent-chat-react 2.8.2 → 2.8.5

package/dist/index.cjs

@@ -553,20 +553,69 @@ function BrowserControlBar({
     )
   ] });
 }
+function toWsUrl(src) {
+  const url = new URL(src, window.location.href);
+  if (url.protocol === "http:") {
+    url.protocol = "ws:";
+  } else if (url.protocol === "https:") {
+    url.protocol = "wss:";
+  }
+  return url.toString();
+}
 function BrowserLiveView({
   src,
-  testId = "browser-iframe"
+  testId = "browser-rfb",
+  onDisconnect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "iframe",
-    {
-      "data-testid": testId,
-      title: "Browser live view",
-      src,
-      className: "h-full w-full border-0 bg-black",
-      allow: "clipboard-read; clipboard-write"
-    }
-  );
+  const containerRef = react.useRef(null);
+  const onDisconnectRef = react.useRef(onDisconnect);
+  onDisconnectRef.current = onDisconnect;
+  const [state, setState] = react.useState("connecting");
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    setState("connecting");
+    let rfb;
+    let disposed = false;
+    const handleConnect = () => setState("connected");
+    const handleDisconnect = (event) => {
+      const detail = event.detail;
+      setState("disconnected");
+      onDisconnectRef.current?.(detail?.clean ?? false);
+    };
+    void import('@novnc/novnc').then((mod) => {
+      if (disposed || !containerRef.current) return;
+      const instance = new mod.default(containerRef.current, toWsUrl(src), {
+        wsProtocols: ["binary"]
+      });
+      instance.viewOnly = false;
+      instance.scaleViewport = true;
+      instance.addEventListener("connect", handleConnect);
+      instance.addEventListener("disconnect", handleDisconnect);
+      rfb = instance;
+    }).catch(() => {
+      if (!disposed) setState("disconnected");
+    });
+    return () => {
+      disposed = true;
+      if (rfb) {
+        rfb.removeEventListener("connect", handleConnect);
+        rfb.removeEventListener("disconnect", handleDisconnect);
+        rfb.disconnect();
+      }
+    };
+  }, [src]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full bg-black", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, "data-testid": testId, className: "h-full w-full" }),
+    state !== "connected" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": "browser-rfb-overlay",
+        className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/70 text-sm text-muted-foreground",
+        children: state === "connecting" ? "Connecting to browser\u2026" : "Live view disconnected \u2014 take control again to reconnect."
+      }
+    )
+  ] });
 }
 
 // src/components/browser/browser-status-dot.tsx
@@ -767,7 +816,13 @@ function BrowserPane({
               /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: "Full screen" })
             ] }) }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : canUseLiveView ? /* @__PURE__ */ jsxRuntime.jsx(BrowserLiveView, { src: liveViewUrl }) : previewSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 bg-black", children: state.status === "provisioning" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Starting browser..." }) : state.status === "closed" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center bg-background text-sm text-muted-foreground", children: "Browser closed." }) : canUseLiveView ? /* @__PURE__ */ jsxRuntime.jsx(
+            BrowserLiveView,
+            {
+              src: liveViewUrl,
+              onDisconnect: () => setLocalControlActive(false)
+            }
+          ) : previewSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
             BrowserPreviewImage,
             {
               src: previewSnapshot.src,
@@ -811,7 +866,8 @@ function BrowserPane({
             BrowserLiveView,
             {
               src: liveViewUrl,
-              testId: "browser-fullscreen-iframe"
+              testId: "browser-fullscreen-rfb",
+              onDisconnect: () => setLocalControlActive(false)
             }
           ) : previewSnapshot ? /* @__PURE__ */ jsxRuntime.jsx(
             BrowserPreviewImage,
@@ -914,6 +970,39 @@ var ConversationScrollButton = ({
   );
 };
 
+// src/components/ui/button-group.tsx
+init_utils();
+var buttonGroupVariants = classVarianceAuthority.cva(
+  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+
 // src/components/ai-elements/message.tsx
 init_utils();
 
@@ -978,8 +1067,8 @@ var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     className: cn(
-      "group flex w-full flex-col gap-2",
-      from === "user" ? "is-user max-w-[85%]" : "is-assistant max-w-full",
+      "group flex flex-col gap-2",
+      from === "user" ? "is-user ml-auto max-w-[85%]" : "is-assistant max-w-full",
       className
     ),
     ...props
@@ -5648,7 +5737,7 @@ var PromptInput = ({
         onSubmit: handleSubmit,
         ref: formRef,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-3 py-1 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "overflow-hidden rounded-3xl border border-input bg-white px-4 py-2 shadow-sm dark:bg-card dark:shadow-none dark:ring-1 dark:ring-white/5 has-[textarea]:rounded-3xl has-[>[data-align=block-end]]:rounded-3xl has-[>[data-align=block-start]]:rounded-3xl", children })
       }
     )
   ] });
@@ -5783,7 +5872,7 @@ var PromptInputButton = ({
     InputGroupButton,
     {
       className: cn(
-        "rounded-sm border border-input/70 text-foreground hover:bg-accent",
+        "rounded-sm border border-input/70 text-foreground bg-accent",
         newSize === "icon-sm" && "size-9",
         className
       ),
@@ -5841,7 +5930,7 @@ var PromptInputSubmit = ({
     InputGroupButton,
     {
       "aria-label": isGenerating ? "Stop" : "Submit",
-      className: cn("rounded-full", className),
+      className: cn("rounded-full bg-amber-400 hover:bg-amber-500 text-black", className),
       onClick: handleClick,
       size,
       type: isGenerating && onStop ? "button" : "submit",
@@ -7026,29 +7115,32 @@ function ChatComposerInner({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   onViewModeChange && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
+                    ButtonGroup,
                     {
-                      role: "group",
                       "aria-label": "Chat view mode",
-                      className: "inline-flex overflow-hidden rounded-md border border-border",
+                      className: "overflow-hidden rounded-md border border-border",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
+                          Button,
                           {
                             type: "button",
+                            size: "xs",
+                            className: "capitalize font-normal",
+                            variant: viewMode === "simple" ? "secondary" : "ghost",
                             "aria-pressed": viewMode === "simple",
                             onClick: () => onViewModeChange("simple"),
-                            className: viewMode === "simple" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
                             children: "Simple"
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
+                          Button,
                           {
                             type: "button",
+                            size: "xs",
+                            className: "capitalize font-normal",
+                            variant: viewMode === "expert" ? "secondary" : "ghost",
                             "aria-pressed": viewMode === "expert",
                             onClick: () => onViewModeChange("expert"),
-                            className: viewMode === "expert" ? "bg-accent px-2 py-1 text-xs text-foreground" : "px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
                             children: "Advanced"
                           }
                         )
@@ -7060,7 +7152,7 @@ function ChatComposerInner({
                     {
                       status,
                       onStop,
-                      className: "md:size-8"
+                      className: "size-10"
                     }
                   )
                 ] })