@blade-hq/agent-react 2612.0.0-beta.76 → 2612.0.0-beta.78

package/dist/{chunk-WRIMPZPN.js → chunk-NRYLAO3X.js}

@@ -1,17 +1,19 @@
+import {
+  ConfigConnection,
+  ConnectorRulesPanel,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  clsx
+} from "./chunk-MWILWSPG.js";
 import {
   Check,
   ChevronDown,
   Circle,
   CircleDot,
   ListChecks,
-  LoaderCircle,
-  X,
-  clsx,
-  cn,
-  dist_exports3 as dist_exports,
-  loopTabInShadowRoot,
-  useOverlayRoot
-} from "./chunk-QIR73CES.js";
+  LoaderCircle
+} from "./chunk-KHJEIHMJ.js";
 
 // src/context.tsx
 import { createContext, useContext } from "react";
@@ -3435,7 +3437,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // src/lib/utils.ts
-function cn2(...inputs) {
+function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 async function copyToClipboard(text) {
@@ -3556,7 +3558,7 @@ function PlanUpdateBlock({
   const completed = data.plan.filter((item) => item.status === "completed").length;
   const currentStep = pickCurrentPlanStep(data.plan);
   const pausedAtCurrentStep = !running && currentStep?.status === "in_progress";
-  return /* @__PURE__ */ jsxs("section", { part: "plan-block", className: cn2("blade-chat-plan-block overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs("section", { part: "plan-block", className: cn("blade-chat-plan-block overflow-hidden", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -3569,7 +3571,7 @@ function PlanUpdateBlock({
           }
           setCollapsed((value) => !value);
         },
-        className: cn2(
+        className: cn(
           "flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-[hsl(var(--muted)/0.3)]",
           !collapsed && "border-b border-[hsl(var(--border))]"
         ),
@@ -3592,7 +3594,7 @@ function PlanUpdateBlock({
             ChevronDown,
             {
               size: 14,
-              className: cn2(
+              className: cn(
                 "shrink-0 text-[hsl(var(--muted-foreground))] transition-transform duration-300 ease-out motion-reduce:transition-none",
                 !collapsed && "rotate-180"
               )
@@ -3605,7 +3607,7 @@ function PlanUpdateBlock({
       "div",
       {
         "aria-hidden": collapsed,
-        className: cn2(
+        className: cn(
           "grid transition-[grid-template-rows,opacity] duration-300 ease-out motion-reduce:transition-none",
           collapsed ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100"
         ),
@@ -3614,7 +3616,7 @@ function PlanUpdateBlock({
           /* @__PURE__ */ jsx2(
             "span",
             {
-              className: cn2(
+              className: cn(
                 "min-w-0 flex-1 break-words text-[13px] leading-5",
                 item.status === "completed" ? "text-[hsl(var(--muted-foreground))]" : item.status === "in_progress" ? "font-medium text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"
               ),
@@ -3627,46 +3629,91 @@ function PlanUpdateBlock({
   ] });
 }
 
+// src/components/AccountConnectorRules.tsx
+import { useCallback } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AccountConnectorRules({ client, name, refresh = 0 }) {
+  const read = useCallback(() => client.connectors.rules(name), [client, name]);
+  const update = useCallback((set) => client.connectors.updateRules(name, set), [client, name]);
+  return /* @__PURE__ */ jsx3(ConnectorRulesPanel, { compact: true, read, update, refresh }, name);
+}
+
 // src/components/BrowserConnectionDialog.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function BrowserConnectionDialog({ client, name, label = "\u4E1A\u52A1\u8D26\u53F7", onClose }) {
-  const dialog = useRef2(null);
-  const frame = useRef2(null);
-  const url = new URL(client.connectors.browserAuthorizationUrl(name), window.location.href);
-  url.searchParams.set("embedded", "1");
-  const origin = url.origin;
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function BrowserConnectionDialog({ client, name, label = "\u4E1A\u52A1\u8D26\u53F7", connector, onClose }) {
+  const [connection, setConnection] = useState2(connector?.connection);
+  const [editing, setEditing] = useState2(false);
+  const [refresh, setRefresh] = useState2(0);
+  const [frame, setFrame] = useState2(null);
+  const alive = useRef2(false);
   useEffect2(() => {
-    const element = dialog.current;
-    element?.showModal();
-    return () => element?.close();
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
   }, []);
+  const status = connection?.status ?? "disconnected";
+  const showLogin = status !== "connected" || editing;
+  const url = new URL(client.connectors.browserAuthorizationUrl(name), window.location.href);
+  const origin = url.origin;
   useEffect2(() => {
-    if (!frame.current) return;
-    return client.connectors.bindBrowserAuthorizationFrame(frame.current, name);
-  }, [client, name]);
+    if (!showLogin || !frame) return;
+    return client.connectors.bindBrowserAuthorizationFrame(frame, name);
+  }, [client, name, showLogin, frame]);
   useEffect2(() => {
     const receive = (event) => {
-      if (event.origin === origin && event.source === frame.current?.contentWindow && event.data?.type === "blade:connector-auth-close") onClose();
+      if (event.origin === origin && event.source === frame?.contentWindow && event.data?.type === "blade:connector-auth-close") onClose();
     };
     window.addEventListener("message", receive);
     return () => window.removeEventListener("message", receive);
-  }, [origin, onClose]);
-  return /* @__PURE__ */ jsx3("dialog", { ref: dialog, "aria-label": `\u8FDE\u63A5 ${label}`, onCancel: (event) => {
-    event.preventDefault();
-    onClose();
-  }, className: "fixed inset-0 m-auto h-[min(820px,90dvh)] max-h-none w-[min(960px,calc(100%_-_32px))] max-w-none overflow-hidden rounded-2xl border border-[hsl(var(--border))] bg-[hsl(var(--background))] p-0 text-[hsl(var(--foreground))] shadow-xl backdrop:bg-black/45", children: /* @__PURE__ */ jsxs2("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs2("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-[hsl(var(--border))] px-4 py-3", children: [
-      /* @__PURE__ */ jsxs2("h2", { className: "text-sm font-medium", children: [
-        "\u8FDE\u63A5 ",
-        label
-      ] }),
-      /* @__PURE__ */ jsxs2("button", { type: "button", className: "inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-3 text-xs font-medium hover:bg-[hsl(var(--accent))]", onClick: onClose, children: [
-        /* @__PURE__ */ jsx3(X, { size: 14, "aria-hidden": "true" }),
-        "\u8FD4\u56DE\u8FDE\u63A5\u5668"
-      ] })
+  }, [origin, onClose, frame]);
+  const login = /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx4("p", { className: "text-xs opacity-70", children: "\u5728\u4E0B\u65B9\u9875\u9762\u5B8C\u6210\u767B\u5F55\u6216\u626B\u7801\uFF0C\u7136\u540E\u786E\u8BA4\u767B\u5F55\u3002\u9700\u8981\u9000\u51FA\u65F6\u53EF\u8FD4\u56DE\u8FDE\u63A5\u5668\u3002" }),
+    /* @__PURE__ */ jsx4("iframe", { ref: setFrame, title: `${label}\u767B\u5F55\u9875\u9762`, className: "h-[min(560px,60dvh)] w-full border-0" })
+  ] });
+  return /* @__PURE__ */ jsx4(Dialog, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs2(DialogContent, { "aria-describedby": void 0, className: "max-h-[90dvh] overflow-y-auto sm:max-w-[800px]", children: [
+    /* @__PURE__ */ jsxs2(DialogTitle, { className: "sr-only", children: [
+      "\u8FDE\u63A5 ",
+      label
     ] }),
-    /* @__PURE__ */ jsx3("iframe", { ref: frame, title: `${label}\u767B\u5F55\u9875\u9762`, className: "min-h-0 w-full flex-1 border-0" })
+    /* @__PURE__ */ jsx4(
+      ConfigConnection,
+      {
+        editDescription: "\u91CD\u65B0\u767B\u5F55\u4E1A\u52A1\u8D26\u53F7",
+        detail: { title: label, rules: /* @__PURE__ */ jsx4(AccountConnectorRules, { client, name, refresh }) },
+        status,
+        account: connection?.account_label,
+        verifiedAt: connection?.verified_at,
+        onEdit: () => setEditing(true),
+        connection: login,
+        onDisconnect: async () => {
+          const view = await client.connectors.disconnect(name);
+          if (alive.current) {
+            setConnection(view.connection);
+            setEditing(false);
+            setRefresh((value) => value + 1);
+          }
+        },
+        onVerify: async () => {
+          const view = await client.connectors.verify(name);
+          if (alive.current) {
+            setConnection(view.connection);
+            setRefresh((value) => value + 1);
+          }
+        }
+      }
+    ),
+    editing && status === "connected" && /* @__PURE__ */ jsx4(Dialog, { open: true, onOpenChange: (open) => {
+      if (!open) setEditing(false);
+    }, children: /* @__PURE__ */ jsxs2(DialogContent, { "aria-describedby": void 0, className: "max-h-[90dvh] overflow-y-auto sm:max-w-[800px]", children: [
+      /* @__PURE__ */ jsx4(DialogTitle, { children: "\u66F4\u6362\u8D26\u53F7" }),
+      /* @__PURE__ */ jsx4("p", { children: "\u5B8C\u6210\u767B\u5F55\u5E76\u9A8C\u8BC1\u540E\u66FF\u6362\u5F53\u524D\u8D26\u53F7\uFF0C\u4F7F\u7528\u89C4\u5219\u4FDD\u7559\u3002" }),
+      login
+    ] }) }),
+    /* @__PURE__ */ jsx4("button", { type: "button", className: "min-h-10 rounded-lg border px-4 text-sm", onClick: onClose, children: "\u8FD4\u56DE\u8FDE\u63A5\u5668" })
   ] }) });
 }
 
@@ -3679,10 +3726,10 @@ import {
   useLayoutEffect,
   useMemo,
   useRef as useRef3,
-  useState as useState2,
+  useState as useState3,
   useSyncExternalStore
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var EMPTY_SOURCE = {
   subscribe: () => () => {
   },
@@ -3692,7 +3739,7 @@ var EMPTY_SOURCE = {
 };
 var SessionSourceContext = createContext2(EMPTY_SOURCE);
 function SessionSourceProvider({ source, children }) {
-  return /* @__PURE__ */ jsx4(SessionSourceContext.Provider, { value: source, children });
+  return /* @__PURE__ */ jsx5(SessionSourceContext.Provider, { value: source, children });
 }
 function useSessionSource() {
   return useContext2(SessionSourceContext);
@@ -3737,7 +3784,7 @@ var SingleSessionSource = class {
   }
 };
 function useSingleSessionSource(session, loading) {
-  const [source] = useState2(() => new SingleSessionSource());
+  const [source] = useState3(() => new SingleSessionSource());
   useLayoutEffect(() => {
     source.update(session, loading);
   }, [source, session, loading]);
@@ -3799,7 +3846,7 @@ function usePlanRevealRevision(sessionId) {
 }
 var CurrentChatSessionContext = createContext2(null);
 function CurrentChatSessionProvider({ sessionId, children }) {
-  return /* @__PURE__ */ jsx4(CurrentChatSessionContext.Provider, { value: sessionId, children });
+  return /* @__PURE__ */ jsx5(CurrentChatSessionContext.Provider, { value: sessionId, children });
 }
 function useCurrentChatSessionId() {
   return useContext2(CurrentChatSessionContext);
@@ -3807,11 +3854,11 @@ function useCurrentChatSessionId() {
 
 // src/chat/runtime/environment.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var EMPTY_ENVIRONMENT = {};
 var ChatEnvironmentContext = createContext3(EMPTY_ENVIRONMENT);
 function ChatEnvironmentProvider({ value, children }) {
-  return /* @__PURE__ */ jsx5(ChatEnvironmentContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx6(ChatEnvironmentContext.Provider, { value, children });
 }
 function useChatEnvironment() {
   return useContext3(ChatEnvironmentContext);
@@ -3886,108 +3933,12 @@ function useChatVirtualizer(options) {
   return { virtualizer, enabled: Boolean(injected) };
 }
 
-// ../ui/src/components/dialog.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(dist_exports.Root, { "data-slot": "dialog", ...props });
-}
-function DialogClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(dist_exports.Close, { "data-slot": "dialog-close", ...props });
-}
-
-// ../ui/src/composites/dialog.tsx
-import { forwardRef } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var DialogOverlay = forwardRef(function DialogOverlay2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx7(
-    dist_exports.Overlay,
-    {
-      ref,
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-black/45 backdrop-blur-sm duration-(--motion-duration-fast) data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-        className
-      ),
-      ...props
-    }
-  );
-});
-function DialogContent({
-  className,
-  children,
-  onKeyDown,
-  showCloseButton = true,
-  overlayClassName,
-  ...props
-}) {
-  const overlayRoot = useOverlayRoot();
-  return /* @__PURE__ */ jsxs4(dist_exports.Portal, { "data-slot": "dialog-portal", container: overlayRoot, children: [
-    /* @__PURE__ */ jsx7(DialogOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxs4(
-      dist_exports.Content,
-      {
-        onKeyDown: (event) => {
-          onKeyDown?.(event);
-          loopTabInShadowRoot(event);
-        },
-        "data-slot": "dialog-content",
-        className: cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[12px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6 shadow-[var(--swf-shadow-overlay)] duration-(--motion-duration-fast) data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs4(
-            dist_exports.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "absolute top-4 right-4 rounded-[8px] p-2 text-[hsl(var(--muted-foreground))] opacity-90 transition-colors hover:bg-[hsl(var(--accent))] hover:opacity-100 focus:outline-none disabled:pointer-events-none",
-              children: [
-                /* @__PURE__ */ jsx7(X, { size: 16 }),
-                /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "\u5173\u95ED" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
-    dist_exports.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg font-semibold text-[hsl(var(--foreground))]", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx7(
-    dist_exports.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-sm text-[hsl(var(--muted-foreground))]", className),
-      ...props
-    }
-  );
-}
-
 export {
   BladeProvider,
   useBladeClient,
   useOptionalBladeClient,
   useBladeHost,
-  cn2 as cn,
+  cn,
   copyToClipboard,
   getToolDescription,
   formatToolFileName,
@@ -4021,11 +3972,7 @@ export {
   notifyChat,
   useComposerBridge,
   useChatVirtualizer,
-  BrowserConnectionDialog,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogTitle,
-  DialogDescription
+  AccountConnectorRules,
+  BrowserConnectionDialog
 };
-//# sourceMappingURL=chunk-WRIMPZPN.js.map
+//# sourceMappingURL=chunk-NRYLAO3X.js.map