site-operator-react 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# Site Operator React
+
+The React 19 wrapper for Site Operator. It provides a seamless integration of the Site Operator agent widget into React applications.
+
+## Installation
+
+```bash
+npm install site-operator-react
+```
+
+*Note: You must also have `react` and `react-dom` installed.*
+
+## Usage
+
+### AgentChat Component
+
+The `<AgentChat />` component renders the chat widget. It wraps the underlying Web Component and handles prop syncing.
+
+```tsx
+import { AgentChat } from 'site-operator-react';
+
+function App() {
+  return (
+    <div className="App">
+      <AgentChat
+        backendUrl="http://localhost:8001/ag_ui"
+        appName="My React App"
+        agentAvatar="/avatar.png"
+      />
+    </div>
+  );
+}
+```
+
+### useChatPortal Hook
+
+The `useChatPortal` hook allows you to register the "Copilot" capabilities (Portal Spec) for your application. This lets the agent control the app (e.g., navigate, perform actions).
+
+```tsx
+import { useChatPortal } from 'site-operator-react';
+
+function App() {
+  useChatPortal({
+    actions: {
+      openSettings: () => {
+        // Your logic to open settings
+      },
+      navigate: ({ path }) => {
+        // Your router logic
+      }
+    }
+  });
+
+  return (
+    // ...
+  );
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import { AgentState } from 'site-operator';
+import { default as default_2 } from 'react';
+import { NavGraph } from 'site-operator';
+import { NavNode } from 'site-operator';
+import { PortalSpec } from 'site-operator';
+
+export declare const AgentChat: default_2.FC<AgentChatProps>;
+
+export declare interface AgentChatProps {
+    backendUrl?: string;
+    appName?: string;
+    agentAvatar?: string;
+    inspector?: boolean;
+    appContext?: AgentState;
+    className?: string;
+}
+
+export { AgentState }
+
+export { NavGraph }
+
+export { NavNode }
+
+export { PortalSpec }
+
+/**
+ * A hook to register a Chat Portal specification for the agent.
+ * This allows the agent to navigate and control the host application.
+ * @param spec The PortalSpec defining navigation graph and actions.
+ */
+export declare function useChatPortal(spec: PortalSpec): void;
+
+export { }

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

@@ -0,0 +1,312 @@
+import ee, { useRef as re, useEffect as D } from "react";
+import { chatPortalService as te } from "site-operator";
+var b = { exports: {} }, E = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var $;
+function ne() {
+  if ($) return E;
+  $ = 1;
+  var s = Symbol.for("react.transitional.element"), f = Symbol.for("react.fragment");
+  function c(i, o, u) {
+    var l = null;
+    if (u !== void 0 && (l = "" + u), o.key !== void 0 && (l = "" + o.key), "key" in o) {
+      u = {};
+      for (var d in o)
+        d !== "key" && (u[d] = o[d]);
+    } else u = o;
+    return o = u.ref, {
+      $$typeof: s,
+      type: i,
+      key: l,
+      ref: o !== void 0 ? o : null,
+      props: u
+    };
+  }
+  return E.Fragment = f, E.jsx = c, E.jsxs = c, E;
+}
+var _ = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var I;
+function ae() {
+  return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case p:
+          return "Fragment";
+        case q:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case H:
+          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:
+            return "Portal";
+          case V:
+            return e.displayName || "Context";
+          case J:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case B:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case T:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function f(e) {
+      return "" + e;
+    }
+    function c(e) {
+      try {
+        f(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = 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.",
+          n
+        ), f(e);
+      }
+    }
+    function i(e) {
+      if (e === p) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = k.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function l(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 d(e, r) {
+      function t() {
+        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
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function L() {
+      var e = s(this.type);
+      return x[e] || (x[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 M(e, r, t, n, v, O) {
+      var a = t.ref;
+      return e = {
+        $$typeof: w,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: L
+      }) : 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: v
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: O
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function S(e, r, t, n, v, O) {
+      var a = r.children;
+      if (a !== void 0)
+        if (n)
+          if (Q(a)) {
+            for (n = 0; n < a.length; n++)
+              g(a[n]);
+            Object.freeze && Object.freeze(a);
+          } 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 g(a);
+      if (y.call(r, "key")) {
+        a = s(e);
+        var m = Object.keys(r).filter(function(K) {
+          return K !== "key";
+        });
+        n = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", Y[a + n] || (m = 0 < m.length ? "{" + m.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} />`,
+          n,
+          a,
+          m,
+          a
+        ), Y[a + n] = !0);
+      }
+      if (a = null, t !== void 0 && (c(t), a = "" + t), l(r) && (c(r.key), a = "" + r.key), "key" in r) {
+        t = {};
+        for (var P in r)
+          P !== "key" && (t[P] = r[P]);
+      } else t = r;
+      return a && d(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        a,
+        t,
+        o(),
+        v,
+        O
+      );
+    }
+    function g(e) {
+      h(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? h(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function h(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === w;
+    }
+    var R = ee, w = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), p = 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"), B = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), k = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, y = Object.prototype.hasOwnProperty, Q = Array.isArray, A = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var j, x = {}, N = R.react_stack_bottom_frame.bind(
+      R,
+      u
+    )(), C = A(i(u)), Y = {};
+    _.Fragment = p, _.jsx = function(e, r, t) {
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : N,
+        n ? A(i(e)) : C
+      );
+    }, _.jsxs = function(e, r, t) {
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : N,
+        n ? A(i(e)) : C
+      );
+    };
+  })()), _;
+}
+var F;
+function oe() {
+  return F || (F = 1, process.env.NODE_ENV === "production" ? b.exports = ne() : b.exports = ae()), b.exports;
+}
+var se = oe();
+const ce = ({
+  backendUrl: s,
+  appName: f,
+  agentAvatar: c,
+  inspector: i,
+  appContext: o,
+  className: u
+}) => {
+  const l = re(null);
+  return D(() => {
+    l.current && o && l.current.setAppContext(o);
+  }, [o]), /* @__PURE__ */ se.jsx(
+    "agent-chat",
+    {
+      ref: l,
+      "backend-url": s,
+      "app-name": f,
+      "agent-avatar": c,
+      inspector: i ? "true" : void 0,
+      class: u
+    }
+  );
+};
+function ie(s) {
+  D(() => {
+    te.registerPortal(s);
+  }, [s]);
+}
+export {
+  ce as AgentChat,
+  ie as useChatPortal
+};

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

@@ -0,0 +1,22 @@
+(function(l,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("site-operator")):typeof define=="function"&&define.amd?define(["exports","react","site-operator"],i):(l=typeof globalThis<"u"?globalThis:l||self,i(l.SiteOperatorReact={},l.React,l.SiteOperator))})(this,(function(l,i,W){"use strict";var v={exports:{}},_={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var y;function U(){if(y)return _;y=1;var s=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function f(d,o,u){var c=null;if(u!==void 0&&(c=""+u),o.key!==void 0&&(c=""+o.key),"key"in o){u={};for(var p in o)p!=="key"&&(u[p]=o[p])}else u=o;return o=u.ref,{$$typeof:s,type:d,key:c,ref:o!==void 0?o:null,props:u}}return _.Fragment=m,_.jsx=f,_.jsxs=f,_}var R={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var g;function $(){return g||(g=1,process.env.NODE_ENV!=="production"&&(function(){function s(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 k:return"Fragment";case Z:return"Profiler";case H:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ae: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 B: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 ne:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function m(e){return""+e}function f(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=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.",n),m(e)}}function d(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=S.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function c(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 p(e,r){function t(){I||(I=!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 G(){var e=s(this.type);return F[e]||(F[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 X(e,r,t,n,T,P){var a=t.ref;return e={$$typeof:C,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:G}):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:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,t,n,T,P){var a=r.children;if(a!==void 0)if(n)if(se(a)){for(n=0;n<a.length;n++)x(a[n]);Object.freeze&&Object.freeze(a)}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 x(a);if(Y.call(r,"key")){a=s(e);var E=Object.keys(r).filter(function(ue){return ue!=="key"});n=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",L[a+n]||(E=0<E.length?"{"+E.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} />`,n,a,E,a),L[a+n]=!0)}if(a=null,t!==void 0&&(f(t),a=""+t),c(r)&&(f(r.key),a=""+r.key),"key"in r){t={};for(var h in r)h!=="key"&&(t[h]=r[h])}else t=r;return a&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,a,t,o(),T,P)}function x(e){N(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?N(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function N(e){return typeof e=="object"&&e!==null&&e.$$typeof===C}var b=i,C=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),H=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"),ne=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),S=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,se=Array.isArray,A=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var I,F={},D=b.react_stack_bottom_frame.bind(b,u)(),M=A(d(u)),L={};R.Fragment=k,R.jsx=function(e,r,t){var n=1e4>S.recentlyCreatedOwnerStacks++;return w(e,r,t,!1,n?Error("react-stack-top-frame"):D,n?A(d(e)):M)},R.jsxs=function(e,r,t){var n=1e4>S.recentlyCreatedOwnerStacks++;return w(e,r,t,!0,n?Error("react-stack-top-frame"):D,n?A(d(e)):M)}})()),R}var j;function J(){return j||(j=1,process.env.NODE_ENV==="production"?v.exports=U():v.exports=$()),v.exports}var V=J();const z=({backendUrl:s,appName:m,agentAvatar:f,inspector:d,appContext:o,className:u})=>{const c=i.useRef(null);return i.useEffect(()=>{c.current&&o&&c.current.setAppContext(o)},[o]),V.jsx("agent-chat",{ref:c,"backend-url":s,"app-name":m,"agent-avatar":f,inspector:d?"true":void 0,class:u})};function q(s){i.useEffect(()=>{W.chatPortalService.registerPortal(s)},[s])}l.AgentChat=z,l.useChatPortal=q,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "site-operator-react",
+  "version": "0.1.0",
+  "description": "React wrapper for site-operator, providing AgentChat component and hooks.",
+  "type": "module",
+  "author": "jostvian-agent",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jostvian-agent/site-operator.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/jostvian-agent/site-operator/issues"
+  },
+  "homepage": "https://github.com/jostvian-agent/site-operator#readme",
+  "main": "./dist/site-operator-react.umd.js",
+  "module": "./dist/site-operator-react.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/site-operator-react.es.js",
+      "require": "./dist/site-operator-react.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "site-operator": "*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}