@release0/nextjs 0.2.0

package/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @release0/nextjs
+```
+
+## Standard
+
+```tsx
+import { Standard } from "@release0/nextjs";
+
+const App = () => {
+  return (
+    <Standard
+      agent="my-questions-agent"
+      style={{ width: "100%", height: "600px" }}
+    />
+  );
+};
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from "@release0/nextjs";
+
+const App = () => {
+  return <Popup agent="my-questions-agent" autoShowDelay={3000} />;
+};
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from "@release0/nextjs";
+
+open();
+```
+
+```js
+import { close } from "@release0/nextjs";
+
+close();
+```
+
+```js
+import { toggle } from "@release0/nextjs";
+
+toggle();
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from "@release0/nextjs";
+
+const App = () => {
+  return (
+    <Bubble
+      agent="my-questions-agent"
+      previewMessage={{
+        message: "I have a question for you!",
+        autoShowDelay: 5000,
+        avatarUrl: "https://release0.com/images/logo512.png",
+      }}
+      theme={{
+        button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
+        previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
+      }}
+    />
+  );
+};
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from "@release0/nextjs";
+
+Agent.showPreviewMessage();
+```
+
+```js
+import { hidePreviewMessage } from "@release0/nextjs";
+
+Agent.hidePreviewMessage();
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from "@release0/nextjs";
+
+open();
+```
+
+```js
+import { close } from "@release0/nextjs";
+
+close();
+```
+
+```js
+import { toggle } from "@release0/nextjs";
+
+toggle();
+```
+
+## Additional configuration
+
+You can prefill the agent variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from "@release0/nextjs";
+
+const App = () => {
+  return (
+    <Standard
+      agent="my-questions-agent"
+      style={{ width: "100%", height: "600px" }}
+      prefilledVariables={{
+        "Current URL": "https://my-site.com/account",
+        "User name": "John Doe",
+      }}
+    />
+  );
+};
+```
+
+It will prefill the `Current URL` variable with "https://my-site.com/account" and the `User name` variable with "John Doe".
+
+Note: If your site URL contains query params (i.e. https://release0?User%20name=John%20Doe), the variables will automatically be injected to the agent. So you don't need to manually transfer query params to the agent embed configuration.

package/dist/dist-7FPSDZKC.js

@@ -0,0 +1,80 @@
+"use client"
+
+// ../react/dist/index.js
+import { useEffect, useRef } from "react";
+import "@release0/js/web";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect as useEffect2, useRef as useRef2 } from "react";
+import "@release0/js/web";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3 } from "react";
+import "@release0/js/web";
+import { jsx as jsx2 } from "react/jsx-runtime";
+export * from "@release0/js";
+var Standard = ({ style, className, ...assignableProps }) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    Object.assign(ref.current, assignableProps);
+  }, [assignableProps]);
+  return /* @__PURE__ */ jsx("agent-standard", { ref, style, class: className });
+};
+var Bubble = (props) => {
+  const bubbleElement = useRef2(null);
+  const attachBubbleToDom = useCallback((props2) => {
+    const newBubbleElement = document.createElement(
+      "agent-bubble"
+    );
+    bubbleElement.current = newBubbleElement;
+    injectPropsToElement(bubbleElement.current, props2);
+    document.body.prepend(bubbleElement.current);
+  }, []);
+  useEffect2(() => {
+    if (!bubbleElement.current) attachBubbleToDom(props);
+    injectPropsToElement(bubbleElement.current, props);
+  }, [attachBubbleToDom, props]);
+  useEffect2(() => {
+    return () => {
+      bubbleElement.current?.remove();
+      bubbleElement.current = null;
+    };
+  }, []);
+  const injectPropsToElement = (element, props2) => {
+    Object.assign(element, props2);
+  };
+  return null;
+};
+var Popup = (props) => {
+  const containerRef = useRef3(null);
+  const popupRef = useRef3(null);
+  const attachPopupToContainer = useCallback2((props2) => {
+    const popupElement = document.createElement("agent-popup");
+    popupRef.current = popupElement;
+    injectPropsToElement(popupRef.current, props2);
+    if (!containerRef.current) {
+      console.warn(
+        "Could not attach popup to container because containerRef.current is null"
+      );
+      return;
+    }
+    containerRef.current?.append(popupRef.current);
+  }, []);
+  useEffect3(() => {
+    if (!popupRef.current) attachPopupToContainer(props);
+    injectPropsToElement(popupRef.current, props);
+  }, [attachPopupToContainer, props]);
+  useEffect3(() => {
+    return () => {
+      popupRef.current?.remove();
+      popupRef.current = null;
+    };
+  }, []);
+  const injectPropsToElement = (element, props2) => {
+    Object.assign(element, props2);
+  };
+  return /* @__PURE__ */ jsx2("div", { ref: containerRef });
+};
+export {
+  Bubble,
+  Popup,
+  Standard
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import * as _release0_js from '@release0/js';
+export { close, hidePreviewMessage, open, setInputValue, setPrefilledVariables, showPreviewMessage, toggle, unmount } from '@release0/js';
+
+declare const Standard: react.ComponentType<_release0_js.AgentProps & {
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+declare const Bubble: react.ComponentType<_release0_js.BubbleProps>;
+declare const Popup: react.ComponentType<_release0_js.PopupProps>;
+
+export { Bubble, Popup, Standard };

package/dist/index.js

@@ -0,0 +1,45 @@
+"use client"
+
+// src/index.ts
+import dynamic from "next/dynamic";
+import {
+  unmount,
+  toggle,
+  showPreviewMessage,
+  setInputValue,
+  setPrefilledVariables,
+  open,
+  hidePreviewMessage,
+  close
+} from "@release0/js";
+var Standard = dynamic(
+  () => import("./dist-7FPSDZKC.js").then((mod) => mod.Standard),
+  {
+    ssr: false
+  }
+);
+var Bubble = dynamic(
+  () => import("./dist-7FPSDZKC.js").then((mod) => mod.Bubble),
+  {
+    ssr: false
+  }
+);
+var Popup = dynamic(
+  () => import("./dist-7FPSDZKC.js").then((mod) => mod.Popup),
+  {
+    ssr: false
+  }
+);
+export {
+  Bubble,
+  Popup,
+  Standard,
+  close,
+  hidePreviewMessage,
+  open,
+  setInputValue,
+  setPrefilledVariables,
+  showPreviewMessage,
+  toggle,
+  unmount
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@release0/nextjs",
+  "version": "0.2.0",
+  "license": "FSL-1.1-ALv2",
+  "description": "Relese0 Lib: A convenient library for displaying chat agents on Next.js websites",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@release0/js": "1.1.2"
+  },
+  "devDependencies": {
+    "@release0/tsconfig": "0.0.1",
+    "@types/react": "18.2.15",
+    "tsup": "8.3.0",
+    "react": "18.2.0",
+    "@release0/react": "1.0.0",
+    "next": "14.2.13"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "next": "12.x || 13.x || 14.x",
+    "@release0/js": "^1.1.3 || workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}