@ozwell/react 1.0.0

package/dist/index.js

@@ -0,0 +1,366 @@
+// src/OzwellChat.tsx
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function OzwellChat(props) {
+  const {
+    // Layout
+    width = 360,
+    height = 420,
+    containerId,
+    defaultUI = true,
+    // Configuration
+    endpoint,
+    model,
+    system,
+    welcomeMessage,
+    placeholder,
+    title,
+    tools,
+    debug,
+    openaiApiKey,
+    headers,
+    widgetUrl,
+    autoOpenOnReply,
+    apiKey,
+    // Future props (not yet implemented in vanilla widget)
+    // These are accepted but ignored until backend support is added
+    agentId,
+    theme: _theme,
+    // Prefix with _ to indicate intentionally unused
+    position: _position,
+    primaryColor: _primaryColor,
+    autoOpen: _autoOpen,
+    // Callbacks
+    onReady,
+    onOpen,
+    onClose,
+    onToolCall,
+    onUserShare,
+    onError,
+    // React-specific
+    children
+  } = props;
+  const [scriptStatus, setScriptStatus] = useState("idle");
+  const [isWidgetReady, setIsWidgetReady] = useState(false);
+  const instanceContainerId = useRef(
+    containerId || `ozwell-container-${Math.random().toString(36).slice(2, 11)}`
+  );
+  useEffect(() => {
+    if (window.OzwellChat) {
+      setScriptStatus("ready");
+      return;
+    }
+    const handleLoad = () => setScriptStatus("ready");
+    const handleError = () => {
+      setScriptStatus("error");
+      console.error("[OzwellChat] Failed to load ozwell-loader.js");
+      onError?.({
+        code: "SCRIPT_LOAD_ERROR",
+        message: "Failed to load Ozwell widget. Check the widget host URL and network access."
+      });
+    };
+    const existingScript = document.querySelector(
+      'script[data-ozwell-loader], script[src*="ozwell-loader.js"]'
+    );
+    if (existingScript) {
+      setScriptStatus("loading");
+      existingScript.addEventListener("load", handleLoad);
+      existingScript.addEventListener("error", handleError);
+      return () => {
+        existingScript.removeEventListener("load", handleLoad);
+        existingScript.removeEventListener("error", handleError);
+      };
+    }
+    window.OzwellChatConfig = {
+      ...window.OzwellChatConfig,
+      autoMount: false
+    };
+    setScriptStatus("loading");
+    const scriptSrc = new URL(
+      "/widget",
+      widgetUrl ? new URL(widgetUrl, window.location.href) : "https://ozwellapi.os.mieweb.org"
+    ).href;
+    const script = document.createElement("script");
+    script.dataset.ozwellLoader = "true";
+    script.src = scriptSrc;
+    script.async = true;
+    script.addEventListener("load", handleLoad);
+    script.addEventListener("error", handleError);
+    document.head.appendChild(script);
+    return () => {
+      script.removeEventListener("load", handleLoad);
+      script.removeEventListener("error", handleError);
+    };
+  }, [widgetUrl]);
+  useEffect(() => {
+    if (scriptStatus !== "ready" || !window.OzwellChat) {
+      return;
+    }
+    const config = {
+      // Core config
+      endpoint,
+      model,
+      system,
+      welcomeMessage,
+      placeholder,
+      title,
+      tools,
+      debug,
+      openaiApiKey,
+      headers,
+      widgetUrl,
+      apiKey,
+      // Layout config
+      defaultUI,
+      autoMount: false,
+      // Prevent auto-mount, we'll mount manually
+      autoOpenOnReply,
+      agentId
+    };
+    if (!defaultUI) {
+      config.containerId = instanceContainerId.current;
+    }
+    const cleanConfig = Object.fromEntries(
+      Object.entries(config).filter(([, value]) => value !== void 0)
+    );
+    window.OzwellChatConfig = cleanConfig;
+    try {
+      const mountOptions = {};
+      if (!defaultUI) {
+        mountOptions.containerId = instanceContainerId.current;
+      }
+      if (width) {
+        mountOptions.width = typeof width === "string" ? parseInt(width) : width;
+      }
+      if (height) {
+        mountOptions.height = typeof height === "string" ? parseInt(height) : height;
+      }
+      if (window.OzwellChat.iframe) {
+        window.OzwellChat.configure(cleanConfig);
+      } else {
+        window.OzwellChat.mount(mountOptions);
+      }
+      window.OzwellChat.ready().then(() => {
+        setIsWidgetReady(true);
+        onReady?.();
+      });
+    } catch (error) {
+      console.error("[OzwellChat] Failed to mount widget:", error);
+      onError?.({
+        code: "MOUNT_ERROR",
+        message: "Failed to mount Ozwell widget",
+        details: error
+      });
+    }
+  }, [
+    scriptStatus,
+    endpoint,
+    model,
+    system,
+    welcomeMessage,
+    placeholder,
+    title,
+    tools,
+    debug,
+    openaiApiKey,
+    headers,
+    widgetUrl,
+    defaultUI,
+    autoOpenOnReply,
+    width,
+    height,
+    apiKey,
+    agentId,
+    onReady,
+    onError
+  ]);
+  useEffect(() => {
+    if (!isWidgetReady) {
+      return;
+    }
+    const handleMessage = (event) => {
+      const iframe = window.OzwellChat?.iframe;
+      if (!iframe || event.source !== iframe.contentWindow || event.origin !== new URL(iframe.src, window.location.href).origin) {
+        return;
+      }
+      const data = event.data;
+      if (!data || typeof data !== "object" || data.source !== "ozwell-chat-widget") {
+        return;
+      }
+      switch (data.type) {
+        case "closed":
+          onClose?.();
+          break;
+        case "opened":
+          onOpen?.();
+          break;
+        case "user-share":
+          onUserShare?.(data.payload);
+          break;
+        case "error":
+          onError?.(data.payload);
+          break;
+        case "tool_call":
+          if (onToolCall) {
+            const { tool, tool_call_id, payload: args } = data;
+            const sendResult = (result) => {
+              const iframe2 = window.OzwellChat?.iframe;
+              if (iframe2?.contentWindow) {
+                const targetOrigin = iframe2.src ? new URL(iframe2.src).origin : "*";
+                iframe2.contentWindow.postMessage(
+                  {
+                    source: "ozwell-chat-parent",
+                    type: "tool_result",
+                    tool_call_id,
+                    result
+                  },
+                  targetOrigin
+                );
+              } else {
+                console.error("[OzwellChat] Could not find widget iframe to send tool result");
+              }
+            };
+            onToolCall(tool, args || {}, sendResult);
+          }
+          break;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [isWidgetReady, onClose, onOpen, onUserShare, onError, onToolCall]);
+  useEffect(() => {
+    const handleToolCall = (event) => {
+      const { name, arguments: args, respond, error } = event.detail;
+      if (!onToolCall) {
+        error(`No handler configured for tool "${name}".`);
+        return;
+      }
+      try {
+        const outcome = onToolCall(name, args || {}, respond);
+        Promise.resolve(outcome).catch(() => error(`Tool "${name}" failed.`));
+      } catch {
+        error(`Tool "${name}" failed.`);
+      }
+    };
+    document.addEventListener("ozwell-tool-call", handleToolCall);
+    return () => document.removeEventListener("ozwell-tool-call", handleToolCall);
+  }, [onToolCall]);
+  if (defaultUI) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: instanceContainerId.current,
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height
+      },
+      children
+    }
+  );
+}
+var OzwellChat_default = OzwellChat;
+
+// src/useOzwell.ts
+import { useEffect as useEffect2, useState as useState2, useCallback } from "react";
+function useOzwell() {
+  const [isReady, setIsReady] = useState2(false);
+  const [isOpen, setIsOpen] = useState2(false);
+  const [hasUnread, setHasUnread] = useState2(false);
+  const [iframe, setIframe] = useState2(null);
+  useEffect2(() => {
+    if (window.OzwellChat) {
+      setIsReady(true);
+      setIframe(window.OzwellChat.iframe);
+      return;
+    }
+    const handleReady = () => {
+      setIsReady(true);
+      setIframe(window.OzwellChat?.iframe || null);
+    };
+    document.addEventListener("ozwell-chat-ready", handleReady);
+    return () => {
+      document.removeEventListener("ozwell-chat-ready", handleReady);
+    };
+  }, []);
+  useEffect2(() => {
+    if (!isReady) {
+      return;
+    }
+    const handleMessage = (event) => {
+      const widgetIframe = window.OzwellChat?.iframe;
+      if (widgetIframe && event.source !== widgetIframe.contentWindow) {
+        return;
+      }
+      const data = event.data;
+      if (!data || typeof data !== "object" || data.source !== "ozwell-chat-widget") {
+        return;
+      }
+      if (data.type === "opened") {
+        setIsOpen(true);
+        setHasUnread(false);
+      } else if (data.type === "closed") {
+        setIsOpen(false);
+      }
+    };
+    const handleUnread = () => {
+      setHasUnread(true);
+    };
+    window.addEventListener("message", handleMessage);
+    document.addEventListener("ozwell-chat-unread", handleUnread);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      document.removeEventListener("ozwell-chat-unread", handleUnread);
+    };
+  }, [isReady]);
+  const open = useCallback(() => {
+    if (!isReady) {
+      console.warn("[useOzwell] Widget not ready yet");
+      return;
+    }
+    window.OzwellChat?.open?.();
+  }, [isReady]);
+  const close = useCallback(() => {
+    if (!isReady) {
+      console.warn("[useOzwell] Widget not ready yet");
+      return;
+    }
+    window.OzwellChat?.close?.();
+  }, [isReady]);
+  const toggle = useCallback(() => {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  }, [isOpen, open, close]);
+  const sendMessage = useCallback((content) => {
+    if (!isReady) {
+      console.warn("[useOzwell] Widget not ready yet");
+      return;
+    }
+    if (!content || typeof content !== "string") {
+      console.warn("[useOzwell] sendMessage requires a non-empty string");
+      return;
+    }
+    console.warn("[useOzwell] sendMessage() not yet implemented in vanilla widget");
+  }, [isReady]);
+  return {
+    isReady,
+    isOpen,
+    hasUnread,
+    open,
+    close,
+    toggle,
+    sendMessage,
+    iframe
+  };
+}
+export {
+  OzwellChat,
+  OzwellChat_default as default,
+  useOzwell
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@ozwell/react",
+  "version": "1.0.0",
+  "description": "React components for Ozwell chat widget",
+  "type": "module",
+  "publishConfig": {"access": "public"},
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "test": "echo \"Tests coming soon\"",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "ozwell",
+    "react",
+    "chat",
+    "widget",
+    "chatbot",
+    "ai",
+    "assistant"
+  ],
+  "author": "mieweb",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mieweb/ozwellai-api.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/mieweb/ozwellai-api/tree/main/packages/react",
+  "bugs": {
+    "url": "https://github.com/mieweb/ozwellai-api/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}