site-operator-react 0.1.14 → 0.2.4

package/README.md

@@ -8,6 +8,8 @@ npm install site-operator-react
 
 ```tsx
 import { AgentChat, type AppContext, type AppState } from 'site-operator-react';
+import type { AgentChat as AgentChatElement } from 'site-operator';
+import { useRef } from 'react';
 
 const context: AppContext = {
   v: "1.1",
@@ -67,9 +69,12 @@ const state: AppState = {
 };
 
 function App() {
+  const chatRef = useRef<AgentChatElement>(null);
+
   return (
     <div className="App">
       <AgentChat
+        ref={chatRef}
         backendUrl="http://localhost:8001/ag_ui"
         appName="My React App"
         context={{ appContext: context, appState: state }}
@@ -82,10 +87,12 @@ function App() {
 
 ### useChatPortal Hook
 
-The `useChatPortal` hook allows you to register the "Copilot" capabilities (`AppContext`) for your application. This lets the agent understand the app structure and available targets.
+The `useChatPortal` hook allows you to register the "Copilot" capabilities (`AppContext`) for your application. This lets the agent understand the app structure and available targets. It can also return the live `ChatController` from `AgentChat` when you pass a `chatRef`.
 
 ```tsx
 import { useChatPortal, type AppContext } from 'site-operator-react';
+import type { AgentChat as AgentChatElement } from 'site-operator';
+import { useRef } from 'react';
 
 const context: AppContext = {
   v: "1.1",
@@ -98,11 +105,57 @@ const context: AppContext = {
 };
 
 function App() {
-  useChatPortal(context);
+  const chatRef = useRef<AgentChatElement>(null);
+  const controller = useChatPortal(context, { chatRef });
 
   return (
-    // ...
+    <AgentChat ref={chatRef} context={{ appContext: context }} />
   );
 }
+
+// How chatRef works:
+// - pass it to <AgentChat /> so React forwards it to the web component
+// - useChatPortal listens for the "controller-ready" event
+// - once ready, it returns the live ChatController instance
+// controller?.sendMessage('Hola');
 ```
 
+### AgentChatProvider + AgentChatMount + useAgentChatController
+
+If you prefer a React Context approach, wrap your app (or a subtree) with `AgentChatProvider`. It manages the `ref` and exposes the `ChatController` via `useAgentChatController`. Place `<AgentChatMount />` where you want the chat UI to render.
+
+```tsx
+import { AgentChatProvider, AgentChatMount, useAgentChatController, type AppContext } from 'site-operator-react';
+
+const context: AppContext = {
+  v: "1.1",
+  site: { name: "Mi Portal" },
+  user: { id: "u-123" },
+  nav: { routes: [] }
+};
+
+function ChatActions() {
+  const controller = useAgentChatController();
+  return (
+    <button onClick={() => controller?.startNewThread()}>
+      Nuevo chat
+    </button>
+  );
+}
+
+function App() {
+  return (
+    <AgentChatProvider
+      backendUrl="http://localhost:8001/ag_ui"
+      appName="My React App"
+      context={{ appContext: context }}
+    >
+      <header>Mi App</header>
+      <main>
+        <AgentChatMount className="chat-root" />
+      </main>
+      <ChatActions />
+    </AgentChatProvider>
+  );
+}
+```

package/dist/index.d.ts

@@ -1,10 +1,19 @@
+import { Action } from 'site-operator';
+import { AgentChat as AgentChat_2 } from 'site-operator';
 import { AgentState } from 'site-operator';
 import { AppContext } from 'site-operator';
 import { AppState } from 'site-operator';
+import { ChatController } from 'site-operator';
 import { ClickTarget } from 'site-operator';
 import { default as default_2 } from 'react';
+import { ExecutePlanResult } from 'site-operator';
+import { RefObject } from 'react';
 
-export declare const AgentChat: default_2.FC<AgentChatProps>;
+export declare const AgentChat: default_2.ForwardRefExoticComponent<AgentChatProps & default_2.RefAttributes<AgentChat_2>>;
+
+export declare const AgentChatMount: default_2.FC<AgentChatMountProps>;
+
+export declare type AgentChatMountProps = default_2.HTMLAttributes<HTMLDivElement>;
 
 export declare interface AgentChatProps {
     backendUrl?: string;
@@ -20,6 +29,15 @@ export declare interface AgentChatProps {
     context?: ContextProps;
 }
 
+export declare const AgentChatProvider: default_2.FC<AgentChatProviderProps>;
+
+export declare type AgentChatProviderProps = AgentChatProps & {
+    children?: default_2.ReactNode;
+    handlers?: {
+        executePlan?: (plan: Action) => Promise<ExecutePlanResult>;
+    };
+};
+
 export { AgentState }
 
 export { AppContext }
@@ -47,11 +65,24 @@ export declare interface ThreadViewProps {
     emptyText?: string;
 }
 
+export declare function useAgentChatController(): ChatController | null;
+
 /**
  * A hook to register a Chat Portal specification for the agent.
  * This allows the agent to navigate and control the host application.
  * @param context The AppContext defining site, user and navigation.
+ *                If null/undefined, registration is skipped.
+ * @param options Optional refs for accessing the AgentChat controller and custom handlers.
+ * @returns ChatController instance if an AgentChat ref is provided.
  */
-export declare function useChatPortal(context: AppContext): void;
+export declare function useChatPortal(context: AppContext | null | undefined, options?: UseChatPortalOptions & {
+    handlers?: {
+        executePlan?: (plan: Action) => Promise<ExecutePlanResult>;
+    };
+}): ChatController | null;
+
+export declare type UseChatPortalOptions = {
+    chatRef?: RefObject<AgentChat_2 | null>;
+};
 
 export { }

package/dist/site-operator-react.es.js

@@ -1,6 +1,7 @@
-import ee, { useRef as re, useEffect as j } from "react";
-import { chatPortalService as te } from "site-operator";
-var S = { exports: {} }, v = {};
+import q, { useRef as N, useImperativeHandle as ce, useEffect as A, useState as J, createContext as V, useContext as z } from "react";
+import { chatPortalService as ie } from "site-operator";
+import { createPortal as fe } from "react-dom";
+var C = { exports: {} }, b = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +11,29 @@ var S = { exports: {} }, v = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var D;
-function ae() {
-  if (D) return v;
-  D = 1;
-  var u = Symbol.for("react.transitional.element"), _ = Symbol.for("react.fragment");
-  function d(m, l, s) {
-    var E = null;
-    if (s !== void 0 && (E = "" + s), l.key !== void 0 && (E = "" + l.key), "key" in l) {
+var L;
+function de() {
+  if (L) return b;
+  L = 1;
+  var o = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function i(d, n, s) {
+    var m = null;
+    if (s !== void 0 && (m = "" + s), n.key !== void 0 && (m = "" + n.key), "key" in n) {
       s = {};
-      for (var i in l)
-        i !== "key" && (s[i] = l[i]);
-    } else s = l;
-    return l = s.ref, {
-      $$typeof: u,
-      type: m,
-      key: E,
-      ref: l !== void 0 ? l : null,
+      for (var f in n)
+        f !== "key" && (s[f] = n[f]);
+    } else s = n;
+    return n = s.ref, {
+      $$typeof: o,
+      type: d,
+      key: m,
+      ref: n !== void 0 ? n : null,
       props: s
     };
   }
-  return v.Fragment = _, v.jsx = d, v.jsxs = d, v;
+  return b.Fragment = t, b.jsx = i, b.jsxs = i, b;
 }
-var b = {};
+var T = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,124 +43,124 @@ var b = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var L;
-function ne() {
-  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
-    function u(e) {
+var W;
+function me() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
+    function o(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+        return e.$$typeof === ue ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case A:
+        case g:
           return "Fragment";
-        case q:
+        case Q:
           return "Profiler";
-        case U:
+        case Z:
           return "StrictMode";
-        case G:
+        case te:
           return "Suspense";
-        case X:
+        case ne:
           return "SuspenseList";
-        case B:
+        case le:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case B:
             return "Portal";
-          case V:
+          case ee:
             return e.displayName || "Context";
-          case J:
+          case K:
             return (e._context.displayName || "Context") + ".Consumer";
-          case z:
+          case re:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case H:
-            return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
-          case O:
+          case ae:
+            return r = e.displayName || null, r !== null ? r : o(e.type) || "Memo";
+          case h:
             r = e._payload, e = e._init;
             try {
-              return u(e(r));
+              return o(e(r));
             } catch {
             }
         }
       return null;
     }
-    function _(e) {
+    function t(e) {
       return "" + e;
     }
-    function d(e) {
+    function i(e) {
       try {
-        _(e);
+        t(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
+        var a = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          a
-        ), _(e);
+          l
+        ), t(e);
       }
     }
-    function m(e) {
-      if (e === A) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
+    function d(e) {
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === h)
         return "<...>";
       try {
-        var r = u(e);
+        var r = o(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function l() {
-      var e = P.A;
+    function n() {
+      var e = y.A;
       return e === null ? null : e.getOwner();
     }
     function s() {
       return Error("react-stack-top-frame");
     }
-    function E(e) {
-      if (h.call(e, "key")) {
+    function m(e) {
+      if (Y.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function i(e, r) {
-      function t() {
-        x || (x = !0, console.error(
+    function f(e, r) {
+      function a() {
+        $ || ($ = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
         configurable: !0
       });
     }
     function R() {
-      var e = u(this.type);
-      return Y[e] || (Y[e] = !0, console.error(
+      var e = o(this.type);
+      return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function c(e, r, t, a, k, g) {
-      var n = t.ref;
+    function v(e, r, a, l, S, j) {
+      var u = a.ref;
       return e = {
-        $$typeof: N,
+        $$typeof: x,
         type: e,
         key: r,
-        props: t,
-        _owner: a
-      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        props: a,
+        _owner: l
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: R
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -176,151 +177,194 @@ function ne() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: k
+        value: S
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: g
+        value: j
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function o(e, r, t, a, k, g) {
-      var n = r.children;
-      if (n !== void 0)
-        if (a)
-          if (Q(n)) {
-            for (a = 0; a < n.length; a++)
-              f(n[a]);
-            Object.freeze && Object.freeze(n);
+    function c(e, r, a, l, S, j) {
+      var u = r.children;
+      if (u !== void 0)
+        if (l)
+          if (oe(u)) {
+            for (l = 0; l < u.length; l++)
+              k(u[l]);
+            Object.freeze && Object.freeze(u);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else f(n);
-      if (h.call(r, "key")) {
-        n = u(e);
-        var p = Object.keys(r).filter(function(K) {
-          return K !== "key";
+        else k(u);
+      if (Y.call(r, "key")) {
+        u = o(e);
+        var _ = Object.keys(r).filter(function(se) {
+          return se !== "key";
         });
-        a = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", F[n + a] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+        l = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", D[u + l] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          a,
-          n,
-          p,
-          n
-        ), F[n + a] = !0);
+          l,
+          u,
+          _,
+          u
+        ), D[u + l] = !0);
       }
-      if (n = null, t !== void 0 && (d(t), n = "" + t), E(r) && (d(r.key), n = "" + r.key), "key" in r) {
-        t = {};
+      if (u = null, a !== void 0 && (i(a), u = "" + a), m(r) && (i(r.key), u = "" + r.key), "key" in r) {
+        a = {};
         for (var w in r)
-          w !== "key" && (t[w] = r[w]);
-      } else t = r;
-      return n && i(
-        t,
+          w !== "key" && (a[w] = r[w]);
+      } else a = r;
+      return u && f(
+        a,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), c(
+      ), v(
         e,
-        n,
-        t,
-        l(),
-        k,
-        g
+        u,
+        a,
+        n(),
+        S,
+        j
       );
     }
-    function f(e) {
-      C(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? C(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function k(e) {
+      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === h && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function C(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === N;
+    function E(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === x;
     }
-    var T = ee, N = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), V = Symbol.for("react.context"), z = Symbol.for("react.forward_ref"), G = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), P = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, h = Object.prototype.hasOwnProperty, Q = Array.isArray, y = console.createTask ? console.createTask : function() {
+    var P = q, x = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), Z = Symbol.for("react.strict_mode"), Q = Symbol.for("react.profiler"), K = Symbol.for("react.consumer"), ee = Symbol.for("react.context"), re = Symbol.for("react.forward_ref"), te = Symbol.for("react.suspense"), ne = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), h = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), ue = Symbol.for("react.client.reference"), y = P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, oe = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
-    T = {
+    P = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var x, Y = {}, $ = T.react_stack_bottom_frame.bind(
-      T,
+    var $, I = {}, M = P.react_stack_bottom_frame.bind(
+      P,
       s
-    )(), I = y(m(s)), F = {};
-    b.Fragment = A, b.jsx = function(e, r, t) {
-      var a = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return o(
+    )(), F = O(d(s)), D = {};
+    T.Fragment = g, T.jsx = function(e, r, a) {
+      var l = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return c(
         e,
         r,
-        t,
+        a,
         !1,
-        a ? Error("react-stack-top-frame") : $,
-        a ? y(m(e)) : I
+        l ? Error("react-stack-top-frame") : M,
+        l ? O(d(e)) : F
       );
-    }, b.jsxs = function(e, r, t) {
-      var a = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return o(
+    }, T.jsxs = function(e, r, a) {
+      var l = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return c(
         e,
         r,
-        t,
+        a,
         !0,
-        a ? Error("react-stack-top-frame") : $,
-        a ? y(m(e)) : I
+        l ? Error("react-stack-top-frame") : M,
+        l ? O(d(e)) : F
       );
     };
-  })()), b;
+  })()), T;
 }
-var M;
-function oe() {
-  return M || (M = 1, process.env.NODE_ENV === "production" ? S.exports = ae() : S.exports = ne()), S.exports;
+var U;
+function Ee() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? C.exports = de() : C.exports = me()), C.exports;
 }
-var le = oe();
-const ie = ({
-  backendUrl: u,
-  conversationUrl: _,
-  appName: d,
-  agentAvatar: m,
-  inspector: l,
+var p = Ee();
+const G = q.forwardRef(({
+  backendUrl: o,
+  conversationUrl: t,
+  appName: i,
+  agentAvatar: d,
+  inspector: n,
   interceptor: s,
-  className: E,
-  composer: i,
+  className: m,
+  composer: f,
   thread: R,
-  header: c,
-  context: o
-}) => {
-  const f = re(null);
-  return j(() => {
-    f.current && (o != null && o.appContext) && f.current.setAppContext(o.appContext);
-  }, [o == null ? void 0 : o.appContext]), j(() => {
-    f.current && (o != null && o.appState) && f.current.setAppState(o.appState);
-  }, [o == null ? void 0 : o.appState]), /* @__PURE__ */ le.jsx(
+  header: v,
+  context: c
+}, k) => {
+  const E = N(null);
+  return ce(k, () => E.current), A(() => {
+    E.current && (c != null && c.appContext) && E.current.setAppContext(c.appContext);
+  }, [c == null ? void 0 : c.appContext]), A(() => {
+    E.current && (c != null && c.appState) && E.current.setAppState(c.appState);
+  }, [c == null ? void 0 : c.appState]), /* @__PURE__ */ p.jsx(
     "agent-chat",
     {
-      ref: f,
-      backendUrl: u,
-      conversationUrl: _,
-      appName: d,
-      agentAvatar: m,
-      disclaimer: i == null ? void 0 : i.disclaimer,
-      placeholder: i == null ? void 0 : i.placeholder,
+      ref: E,
+      backendUrl: o,
+      conversationUrl: t,
+      appName: i,
+      agentAvatar: d,
+      disclaimer: f == null ? void 0 : f.disclaimer,
+      placeholder: f == null ? void 0 : f.placeholder,
       emptyText: R == null ? void 0 : R.emptyText,
-      headerTitle: c == null ? void 0 : c.title,
-      hideHeader: c == null ? void 0 : c.hide,
-      inspector: l ? "true" : void 0,
+      headerTitle: v == null ? void 0 : v.title,
+      hideHeader: v == null ? void 0 : v.hide,
+      inspector: n ? "true" : void 0,
       interceptor: s ? !0 : void 0,
-      class: E
+      class: m
     }
   );
-};
-function ce(u) {
-  j(() => {
-    te.registerPortal(u);
-  }, [u]);
+});
+G.displayName = "AgentChat";
+function ve(o, t) {
+  const [i, d] = J(null);
+  return A(() => {
+    o && ie.registerPortal(o, t == null ? void 0 : t.handlers);
+  }, [o, t == null ? void 0 : t.handlers]), A(() => {
+    var m;
+    const n = (m = t == null ? void 0 : t.chatRef) == null ? void 0 : m.current;
+    if (!n) return;
+    if (n.controller) {
+      d(n.controller);
+      return;
+    }
+    const s = (f) => {
+      d(f.detail ?? null);
+    };
+    return n.addEventListener("controller-ready", s), () => {
+      n.removeEventListener("controller-ready", s);
+    };
+  }, [t == null ? void 0 : t.chatRef]), i;
+}
+const X = V(null), H = V(null);
+function Te() {
+  return z(X);
 }
+const pe = ({ children: o, ...t }) => {
+  const i = z(H), d = N(null);
+  return A(() => {
+    if (i)
+      return i(d.current), () => {
+        i(null);
+      };
+  }, [i]), /* @__PURE__ */ p.jsx("div", { ref: d, ...t, children: o });
+}, Ae = ({
+  children: o,
+  context: t,
+  handlers: i,
+  ...d
+}) => {
+  const n = N(null), s = ve(t == null ? void 0 : t.appContext, { chatRef: n, handlers: i }), [m, f] = J(null);
+  return /* @__PURE__ */ p.jsx(X.Provider, { value: s, children: /* @__PURE__ */ p.jsxs(H.Provider, { value: f, children: [
+    o,
+    m ? fe(/* @__PURE__ */ p.jsx(G, { ref: n, context: t, ...d }), m) : null
+  ] }) });
+};
 export {
-  ie as AgentChat,
-  ce as useChatPortal
+  G as AgentChat,
+  pe as AgentChatMount,
+  Ae as AgentChatProvider,
+  Te as useAgentChatController,
+  ve as useChatPortal
 };

package/dist/site-operator-react.umd.js

@@ -1,4 +1,4 @@
-(function(c,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("site-operator")):typeof define=="function"&&define.amd?define(["exports","react","site-operator"],f):(c=typeof globalThis<"u"?globalThis:c||self,f(c.SiteOperatorReact={},c.React,c.SiteOperator))})(this,(function(c,f,J){"use strict";var k={exports:{}},b={};/**
+(function(E,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react"),require("site-operator"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","site-operator","react-dom"],l):(E=typeof globalThis<"u"?globalThis:E||self,l(E.SiteOperatorReact={},E.React,E.SiteOperator,E.ReactDOM))})(this,(function(E,l,H,B){"use strict";var h={exports:{}},b={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var C;function V(){if(C)return b;C=1;var u=Symbol.for("react.transitional.element"),R=Symbol.for("react.fragment");function E(_,s,l){var m=null;if(l!==void 0&&(m=""+l),s.key!==void 0&&(m=""+s.key),"key"in s){l={};for(var i in s)i!=="key"&&(l[i]=s[i])}else l=s;return s=l.ref,{$$typeof:u,type:_,key:m,ref:s!==void 0?s:null,props:l}}return b.Fragment=R,b.jsx=E,b.jsxs=E,b}var T={};/**
+ */var Y;function Z(){if(Y)return b;Y=1;var s=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function i(m,n,c){var v=null;if(c!==void 0&&(v=""+c),n.key!==void 0&&(v=""+n.key),"key"in n){c={};for(var d in n)d!=="key"&&(c[d]=n[d])}else c=n;return n=c.ref,{$$typeof:s,type:m,key:v,ref:n!==void 0?n:null,props:c}}return b.Fragment=t,b.jsx=i,b.jsxs=i,b}var p={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var N;function z(){return N||(N=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case Z:return"Profiler";case B:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ne:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function R(e){return""+e}function E(e){try{R(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),R(e)}}function _(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=g.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(F.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function i(e,r){function t(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function S(){var e=u(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function d(e,r,t,a,A,w){var n=t.ref;return e={$$typeof:I,type:e,key:r,props:t,_owner:a},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:S}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function o(e,r,t,a,A,w){var n=r.children;if(n!==void 0)if(a)if(se(n)){for(a=0;a<n.length;a++)p(n[a]);Object.freeze&&Object.freeze(n)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(n);if(F.call(r,"key")){n=u(e);var v=Object.keys(r).filter(function(ue){return ue!=="key"});a=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",U[n+a]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var M;function Q(){return M||(M=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case ne:return"Profiler";case te:return"StrictMode";case ue:return"Suspense";case se:return"SuspenseList";case fe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case re:return"Portal";case le:return e.displayName||"Context";case ae:return(e._context.displayName||"Context")+".Consumer";case oe:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ce:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function t(e){return""+e}function i(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function m(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=j.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function v(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function d(e,r){function a(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function C(){var e=s(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,r,a,o,k,N){var u=a.ref;return e={$$typeof:W,type:e,key:r,props:a,_owner:o},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:C}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,r,a,o,k,N){var u=r.children;if(u!==void 0)if(o)if(de(u)){for(o=0;o<u.length;o++)S(u[o]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(u);if(U.call(r,"key")){u=s(e);var T=Object.keys(r).filter(function(me){return me!=="key"});o=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",X[u+o]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,a,n,v,n),U[n+a]=!0)}if(n=null,t!==void 0&&(E(t),n=""+t),m(r)&&(E(r.key),n=""+r.key),"key"in r){t={};for(var h in r)h!=="key"&&(t[h]=r[h])}else t=r;return n&&i(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),d(e,n,t,s(),A,w)}function p(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var O=f,I=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),g=O.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,se=Array.isArray,j=console.createTask?console.createTask:function(){return null};O={react_stack_bottom_frame:function(e){return e()}};var D,M={},L=O.react_stack_bottom_frame.bind(O,l)(),W=j(_(l)),U={};T.Fragment=P,T.jsx=function(e,r,t){var a=1e4>g.recentlyCreatedOwnerStacks++;return o(e,r,t,!1,a?Error("react-stack-top-frame"):L,a?j(_(e)):W)},T.jsxs=function(e,r,t){var a=1e4>g.recentlyCreatedOwnerStacks++;return o(e,r,t,!0,a?Error("react-stack-top-frame"):L,a?j(_(e)):W)}})()),T}var x;function $(){return x||(x=1,process.env.NODE_ENV==="production"?k.exports=V():k.exports=z()),k.exports}var G=$();const q=({backendUrl:u,conversationUrl:R,appName:E,agentAvatar:_,inspector:s,interceptor:l,className:m,composer:i,thread:S,header:d,context:o})=>{const p=f.useRef(null);return f.useEffect(()=>{p.current&&(o!=null&&o.appContext)&&p.current.setAppContext(o.appContext)},[o==null?void 0:o.appContext]),f.useEffect(()=>{p.current&&(o!=null&&o.appState)&&p.current.setAppState(o.appState)},[o==null?void 0:o.appState]),G.jsx("agent-chat",{ref:p,backendUrl:u,conversationUrl:R,appName:E,agentAvatar:_,disclaimer:i==null?void 0:i.disclaimer,placeholder:i==null?void 0:i.placeholder,emptyText:S==null?void 0:S.emptyText,headerTitle:d==null?void 0:d.title,hideHeader:d==null?void 0:d.hide,inspector:s?"true":void 0,interceptor:l?!0:void 0,class:m})};function X(u){f.useEffect(()=>{J.chatPortalService.registerPortal(u)},[u])}c.AgentChat=q,c.useChatPortal=X,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,o,u,T,u),X[u+o]=!0)}if(u=null,a!==void 0&&(i(a),u=""+a),v(r)&&(i(r.key),u=""+r.key),"key"in r){a={};for(var x in r)x!=="key"&&(a[x]=r[x])}else a=r;return u&&d(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,u,a,n(),k,N)}function S(e){R(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?R(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function R(e){return typeof e=="object"&&e!==null&&e.$$typeof===W}var P=l,W=Symbol.for("react.transitional.element"),re=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),te=Symbol.for("react.strict_mode"),ne=Symbol.for("react.profiler"),ae=Symbol.for("react.consumer"),le=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),ue=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ce=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),j=P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,de=Array.isArray,w=console.createTask?console.createTask:function(){return null};P={react_stack_bottom_frame:function(e){return e()}};var J,V={},z=P.react_stack_bottom_frame.bind(P,c)(),G=w(m(c)),X={};p.Fragment=O,p.jsx=function(e,r,a){var o=1e4>j.recentlyCreatedOwnerStacks++;return f(e,r,a,!1,o?Error("react-stack-top-frame"):z,o?w(m(e)):G)},p.jsxs=function(e,r,a){var o=1e4>j.recentlyCreatedOwnerStacks++;return f(e,r,a,!0,o?Error("react-stack-top-frame"):z,o?w(m(e)):G)}})()),p}var I;function K(){return I||(I=1,process.env.NODE_ENV==="production"?h.exports=Z():h.exports=Q()),h.exports}var A=K();const y=l.forwardRef(({backendUrl:s,conversationUrl:t,appName:i,agentAvatar:m,inspector:n,interceptor:c,className:v,composer:d,thread:C,header:_,context:f},S)=>{const R=l.useRef(null);return l.useImperativeHandle(S,()=>R.current),l.useEffect(()=>{R.current&&(f!=null&&f.appContext)&&R.current.setAppContext(f.appContext)},[f==null?void 0:f.appContext]),l.useEffect(()=>{R.current&&(f!=null&&f.appState)&&R.current.setAppState(f.appState)},[f==null?void 0:f.appState]),A.jsx("agent-chat",{ref:R,backendUrl:s,conversationUrl:t,appName:i,agentAvatar:m,disclaimer:d==null?void 0:d.disclaimer,placeholder:d==null?void 0:d.placeholder,emptyText:C==null?void 0:C.emptyText,headerTitle:_==null?void 0:_.title,hideHeader:_==null?void 0:_.hide,inspector:n?"true":void 0,interceptor:c?!0:void 0,class:v})});y.displayName="AgentChat";function D(s,t){const[i,m]=l.useState(null);return l.useEffect(()=>{s&&H.chatPortalService.registerPortal(s,t==null?void 0:t.handlers)},[s,t==null?void 0:t.handlers]),l.useEffect(()=>{var v;const n=(v=t==null?void 0:t.chatRef)==null?void 0:v.current;if(!n)return;if(n.controller){m(n.controller);return}const c=d=>{m(d.detail??null)};return n.addEventListener("controller-ready",c),()=>{n.removeEventListener("controller-ready",c)}},[t==null?void 0:t.chatRef]),i}const F=l.createContext(null),L=l.createContext(null);function q(){return l.useContext(F)}const $=({children:s,...t})=>{const i=l.useContext(L),m=l.useRef(null);return l.useEffect(()=>{if(i)return i(m.current),()=>{i(null)}},[i]),A.jsx("div",{ref:m,...t,children:s})},ee=({children:s,context:t,handlers:i,...m})=>{const n=l.useRef(null),c=D(t==null?void 0:t.appContext,{chatRef:n,handlers:i}),[v,d]=l.useState(null);return A.jsx(F.Provider,{value:c,children:A.jsxs(L.Provider,{value:d,children:[s,v?B.createPortal(A.jsx(y,{ref:n,context:t,...m}),v):null]})})};E.AgentChat=y,E.AgentChatMount=$,E.AgentChatProvider=ee,E.useAgentChatController=q,E.useChatPortal=D,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-operator-react",
-  "version": "0.1.14",
+  "version": "0.2.4",
   "description": "React wrapper for site-operator, providing AgentChat component and hooks.",
   "type": "module",
   "author": "jostvian",
@@ -32,7 +32,7 @@
     "dev": "vite build --watch"
   },
   "dependencies": {
-    "site-operator": "^0.1.14"
+    "site-operator": "^0.2.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -47,4 +47,4 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.5.0"
   }
-}
+}