@livelayer/react 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# @livelayer/react
+
+React component wrapper for the LiveLayer agent widget.
+
+## Installation
+
+```bash
+npm install @livelayer/react
+```
+
+## Usage
+
+```tsx
+import { LiveLayerWidget } from "@livelayer/react";
+
+function App() {
+  return (
+    <LiveLayerWidget
+      agentId="your_agent_id"
+      onAgentEvent={(e) => console.log(e.eventName, e.data)}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop            | Type                                    | Required | Description                                         |
+| --------------- | --------------------------------------- | -------- | --------------------------------------------------- |
+| `agentId`       | `string`                                | Yes      | The published agent ID to connect to                |
+| `mode`          | `"WIDGET" \| "EMBEDDED"`                | No       | Override the experience mode from the agent config  |
+| `onAgentEvent`  | `(event: AgentEventDetail) => void`     | No       | Callback fired when the agent emits a data channel event |
+| `className`     | `string`                                | No       | CSS class name on the wrapper div                   |
+| `style`         | `React.CSSProperties`                   | No       | Inline styles on the wrapper div                    |
+
+### AgentEventDetail
+
+```ts
+interface AgentEventDetail {
+  eventName: string;
+  data: Record<string, unknown>;
+}
+```
+
+## Peer Dependencies
+
+This package requires React 18 or later:
+
+```json
+{
+  "react": ">=18.0.0",
+  "react-dom": ">=18.0.0"
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+
+export declare interface AgentEventDetail {
+    eventName: string;
+    data: Record<string, unknown>;
+}
+
+/**
+ * React component that renders a `<livelayer-widget>` custom element.
+ *
+ * @example
+ * ```tsx
+ * <LiveLayerWidget
+ *   agentId="agent_xxx"
+ *   onAgentEvent={(e) => console.log(e.eventName, e.data)}
+ * />
+ * ```
+ */
+export declare const LiveLayerWidget: FC<LiveLayerWidgetProps>;
+
+export declare interface LiveLayerWidgetProps {
+    /** The agent ID to connect to */
+    agentId: string;
+    /** Base URL of the Live Layer API (e.g. "https://app.livelayer.studio") */
+    baseUrl?: string;
+    /** API key for cross-origin authentication */
+    apiKey?: string;
+    /**
+     * Override the experience mode from the published config.
+     * If not set, the mode from the agent's published config is used.
+     */
+    mode?: "WIDGET" | "EMBEDDED";
+    /** Callback fired when the agent emits an event via the data channel */
+    onAgentEvent?: (event: AgentEventDetail) => void;
+    /** Additional CSS class name on the wrapper div */
+    className?: string;
+    /** Inline styles on the wrapper div */
+    style?: React.CSSProperties;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),t=require("react");require("@livelayer/sdk");const m=({agentId:s,baseUrl:c,apiKey:l,mode:r,onAgentEvent:o,className:v,style:g})=>{const a=t.useRef(null),n=t.useRef(null),u=t.useRef(o);u.current=o;const d=t.useCallback(i=>{var f;const e=i.detail;(f=u.current)==null||f.call(u,e)},[]);return t.useEffect(()=>{const i=a.current;if(!i)return;const e=document.createElement("livelayer-widget");return e.setAttribute("agent-id",s),c&&e.setAttribute("base-url",c),l&&e.setAttribute("api-key",l),r&&e.setAttribute("mode",r),e.addEventListener("agent-event",d),i.appendChild(e),n.current=e,()=>{e.removeEventListener("agent-event",d),i.removeChild(e),n.current=null}},[s]),t.useEffect(()=>{n.current&&(r?n.current.setAttribute("mode",r):n.current.removeAttribute("mode"))},[r]),b.jsx("div",{ref:a,className:v,style:g})};exports.LiveLayerWidget=m;

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useRef as u, useCallback as p, useEffect as v } from "react";
+import "@livelayer/sdk";
+const h = ({
+  agentId: c,
+  baseUrl: s,
+  apiKey: o,
+  mode: t,
+  onAgentEvent: l,
+  className: m,
+  style: b
+}) => {
+  const d = u(null), r = u(null), i = u(l);
+  i.current = l;
+  const f = p((n) => {
+    var a;
+    const e = n.detail;
+    (a = i.current) == null || a.call(i, e);
+  }, []);
+  return v(() => {
+    const n = d.current;
+    if (!n) return;
+    const e = document.createElement("livelayer-widget");
+    return e.setAttribute("agent-id", c), s && e.setAttribute("base-url", s), o && e.setAttribute("api-key", o), t && e.setAttribute("mode", t), e.addEventListener("agent-event", f), n.appendChild(e), r.current = e, () => {
+      e.removeEventListener("agent-event", f), n.removeChild(e), r.current = null;
+    };
+  }, [c]), v(() => {
+    r.current && (t ? r.current.setAttribute("mode", t) : r.current.removeAttribute("mode"));
+  }, [t]), /* @__PURE__ */ g("div", { ref: d, className: m, style: b });
+};
+export {
+  h as LiveLayerWidget
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@livelayer/react",
+  "version": "0.1.0",
+  "description": "React component wrapper for the LiveLayer agent widget",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@livelayer/sdk": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.0.0",
+    "vite": "^6.3.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Fusion-Studios-Code/live-layer.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}