universal-chatbot-saas 1.0.0

package/react-wrapper/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "universal_ai_chatbot",
+  "version": "1.0.0",
+  "description": "React wrapper for universal chatbot.js embed",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "react": "^18.3.1",
+    "tsup": "^8.2.4",
+    "typescript": "^5.6.3"
+  }
+}

package/react-wrapper/src/index.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useMemo } from "react";
+
+export type ChatbotProvider = "claude" | "openai" | "groq" | "mistral";
+export type ChatbotPosition = "right" | "left" | "bottom-right" | "bottom-left";
+
+export interface ChatbotEmbedProps {
+  src: string;
+  enabled?: boolean;
+  scriptId?: string;
+  removeExistingOnMount?: boolean;
+  removeWidgetOnUnmount?: boolean;
+  onLoad?: () => void;
+  onError?: (event: Event | string) => void;
+  botId?: string;
+  botApiKey?: string;
+  aiApikey?: string;
+  authToken?: string;
+  botName?: string;
+  color?: string;
+  welcome?: string;
+  placeholder?: string;
+  apiBase?: string;
+  provider?: ChatbotProvider;
+  model?: string;
+  aimodel?: string;
+  systemPrompt?: string;
+  position?: ChatbotPosition;
+  userId?: string;
+  visitorId?: string;
+  sessionId?: string;
+  chatSessionId?: string;
+  userHandle?: string;
+  user?: string;
+  siteId?: string;
+  siteKey?: string;
+  siteName?: string;
+  siteUrl?: string;
+  storageKey?: string;
+  knowledge?: unknown;
+  knowledgeJson?: string;
+  knowledgeUrl?: string;
+  knowledgeQuery?: Record<string, unknown>;
+  knowledgeQueryJson?: string;
+  knowledgeSyncMs?: number;
+  knowledgeSyncOnLoad?: boolean;
+  knowledgeClientFetch?: boolean;
+  knowledgeUrlIncludeContext?: boolean;
+  customCss?: string;
+  dataAttributes?: Record<string, string | number | boolean | null | undefined>;
+}
+
+function toKebabDataKey(key: string): string {
+  return `data-${key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+}
+
+function toDataAttributes(props: Omit<ChatbotEmbedProps, "src" | "onLoad" | "onError">): Record<string, string> {
+  const attrs: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(props || {})) {
+    if (key === "enabled" || key === "scriptId" || key === "removeExistingOnMount" || key === "removeWidgetOnUnmount" || key === "dataAttributes") {
+      continue;
+    }
+    if (value === undefined || value === null) {
+      continue;
+    }
+    const dataKey = toKebabDataKey(key);
+    attrs[dataKey] = typeof value === "object" ? JSON.stringify(value) : String(value);
+  }
+
+  return attrs;
+}
+
+function removeExistingWidgetNodes(): void {
+  document.querySelectorAll(".ucb-root").forEach((node) => node.remove());
+  document.querySelectorAll("style[data-ucb-custom-css='inline']").forEach((node) => node.remove());
+}
+
+export function ChatbotEmbed({
+  src,
+  enabled = true,
+  scriptId = "universal-chatbot-embed",
+  removeExistingOnMount = true,
+  removeWidgetOnUnmount = true,
+  onLoad,
+  onError,
+  ...dataProps
+}: ChatbotEmbedProps): null {
+  const attrsSignature = useMemo(() => JSON.stringify(dataProps), [dataProps]);
+
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") {
+      return;
+    }
+
+    if (removeExistingOnMount) {
+      document.getElementById(scriptId)?.remove();
+      removeExistingWidgetNodes();
+    }
+
+    const script = document.createElement("script");
+    script.id = scriptId;
+    script.src = src;
+    script.async = true;
+
+    const attrs = toDataAttributes(dataProps);
+    for (const [name, value] of Object.entries(attrs)) {
+      script.setAttribute(name, value);
+    }
+
+    if (dataProps.dataAttributes) {
+      for (const [name, value] of Object.entries(dataProps.dataAttributes)) {
+        if (value === undefined || value === null) continue;
+        script.setAttribute(toKebabDataKey(name), String(value));
+      }
+    }
+
+    const handleLoad = () => onLoad?.();
+    const handleError = (event: Event) => onError?.(event);
+
+    script.addEventListener("load", handleLoad);
+    script.addEventListener("error", handleError);
+    document.body.appendChild(script);
+
+    return () => {
+      script.removeEventListener("load", handleLoad);
+      script.removeEventListener("error", handleError);
+      script.remove();
+      if (removeWidgetOnUnmount) {
+        removeExistingWidgetNodes();
+      }
+    };
+  }, [src, enabled, scriptId, removeExistingOnMount, removeWidgetOnUnmount, attrsSignature, onLoad, onError]);
+
+  return null;
+}
+
+export default ChatbotEmbed;

package/react-wrapper/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}