@prodact.ai/sdk 0.0.2

package/dist/react.js

@@ -0,0 +1,1116 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  ProduckChat: () => ProduckChat,
+  ProduckContext: () => ProduckContext,
+  ProduckProvider: () => ProduckProvider,
+  ProduckTarget: () => ProduckTarget,
+  useProduck: () => useProduck,
+  useProduckAction: () => useProduckAction,
+  useProduckFlow: () => useProduckFlow,
+  useProduckMessages: () => useProduckMessages,
+  useProduckReady: () => useProduckReady
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/ProduckProvider.tsx
+var import_react2 = require("react");
+
+// src/core.ts
+var ProduckSDK = class {
+  constructor(config) {
+    this.actions = /* @__PURE__ */ new Map();
+    this.eventListeners = /* @__PURE__ */ new Map();
+    this.sessionToken = null;
+    this.isReady = false;
+    let apiUrl = config.apiUrl;
+    if (!apiUrl) {
+      if (typeof window !== "undefined") {
+        apiUrl = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" ? "http://localhost:4001/api/v1" : `${window.location.protocol}//${window.location.host}/api/v1`;
+      } else {
+        apiUrl = "http://localhost:4001/api/v1";
+      }
+    }
+    this.config = {
+      apiUrl,
+      ...config
+    };
+  }
+  /**
+   * Initialize the SDK and create a chat session
+   */
+  async init() {
+    await this.log("info", "SDK Initializing", {
+      apiUrl: this.config.apiUrl,
+      hasSDKKey: !!this.config.sdkKey,
+      hasGuiderId: !!this.config.guiderId
+    });
+    try {
+      let endpoint;
+      if (this.config.sdkKey) {
+        endpoint = `${this.config.apiUrl}/sdk/session`;
+        await this.log("info", "Using SDK key authentication");
+      } else if (this.config.guiderId) {
+        endpoint = `${this.config.apiUrl}/chat/${this.config.guiderId}/session`;
+        await this.log("info", "Using guider ID authentication");
+      } else {
+        throw new Error("Either sdkKey or guiderId must be provided");
+      }
+      await this.log("info", "Creating session", { endpoint });
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      }
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers
+      });
+      if (!response.ok) {
+        await this.log("error", "Failed to create session", { status: response.status });
+        throw new Error(`Failed to create session: ${response.status}`);
+      }
+      const session = await response.json();
+      this.sessionToken = session.session_token;
+      this.isReady = true;
+      await this.log("info", "SDK initialized successfully", { hasSessionToken: !!this.sessionToken });
+      this.emit("ready", { sessionToken: this.sessionToken });
+    } catch (error) {
+      await this.log("error", "SDK initialization failed", { error: error instanceof Error ? error.message : String(error) });
+      this.emit("error", error);
+      throw error;
+    }
+  }
+  /**
+   * Register an action handler
+   */
+  register(actionKey, handler) {
+    this.actions.set(actionKey, handler);
+    this.log("info", "Action handler registered", { actionKey, totalActions: this.actions.size });
+  }
+  /**
+   * Unregister an action handler
+   */
+  unregister(actionKey) {
+    this.actions.delete(actionKey);
+    this.log("info", "Action handler unregistered", { actionKey, remainingActions: this.actions.size });
+  }
+  /**
+   * Send a message and handle potential action or flow triggers
+   */
+  async sendMessage(message) {
+    if (!this.isReady || !this.sessionToken) {
+      throw new Error("SDK not initialized. Call init() first.");
+    }
+    const startTime = Date.now();
+    await this.log("info", "sendMessage called", { message });
+    try {
+      let intentEndpoint;
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        intentEndpoint = `${this.config.apiUrl}/sdk/match-intent`;
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      } else {
+        intentEndpoint = `${this.config.apiUrl}/sdk/public/${this.config.guiderId}/match-intent`;
+      }
+      const intentResponse = await fetch(intentEndpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ userMessage: message })
+      });
+      await this.log("info", "Match-intent response received", { status: intentResponse.status });
+      if (intentResponse.ok) {
+        const intentResult = await intentResponse.json();
+        if (intentResult.matched && intentResult.type === "flow" && intentResult.flow) {
+          await this.log("info", "Flow matched", {
+            flowId: intentResult.flow.flowId,
+            name: intentResult.flow.name,
+            stepCount: intentResult.flow.steps?.length
+          });
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: true,
+            actionKey: `flow:${intentResult.flow.flowId}`,
+            responseMessage: intentResult.responseMessage,
+            executionTimeMs: Date.now() - startTime
+          });
+          const flowResult = await this.executeFlow(intentResult.flow);
+          const flowMessage = {
+            role: "assistant",
+            content: intentResult.responseMessage || `I've completed the "${intentResult.flow.name}" flow for you.`,
+            flow: intentResult.flow,
+            flowResult
+          };
+          this.emit("message", flowMessage);
+          return flowMessage;
+        }
+        if (intentResult.matched && (intentResult.type === "operation" || intentResult.action)) {
+          const action = intentResult.action;
+          await this.log("info", "Action matched", {
+            actionKey: action.actionKey,
+            actionType: action.actionType,
+            responseMessage: action.responseMessage
+          });
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: true,
+            actionKey: action.actionKey,
+            responseMessage: action.responseMessage,
+            executionTimeMs: Date.now() - startTime
+          });
+          await this.executeAction(action);
+          const actionMessage = {
+            role: "assistant",
+            content: action.responseMessage || `I've triggered the "${action.name}" action for you.`,
+            action
+          };
+          this.emit("message", actionMessage);
+          return actionMessage;
+        } else {
+          await this.sendLogToBackend({
+            userMessage: message,
+            matched: false,
+            executionTimeMs: Date.now() - startTime
+          });
+        }
+      }
+      const sessionResponse = await fetch(
+        `${this.config.apiUrl}/chat/sessions/${this.sessionToken}/message`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message })
+        }
+      );
+      if (!sessionResponse.ok) {
+        throw new Error(`Failed to send message: ${sessionResponse.status}`);
+      }
+      const result = await sessionResponse.json();
+      const chatMessage = {
+        role: "assistant",
+        content: result.message?.content || result.response || ""
+      };
+      await this.log("info", "Chat response received");
+      this.emit("message", chatMessage);
+      return chatMessage;
+    } catch (error) {
+      await this.log("error", "Error in sendMessage", { error: error instanceof Error ? error.message : String(error) });
+      this.emit("error", error);
+      throw error;
+    }
+  }
+  /**
+   * Execute a flow by running each step's operation sequentially
+   */
+  async executeFlow(flow) {
+    await this.log("info", "executeFlow started", {
+      flowId: flow.flowId,
+      name: flow.name,
+      stepCount: flow.steps.length
+    });
+    this.emit("flowStart", flow);
+    if (this.config.onFlowStart) {
+      this.config.onFlowStart(flow);
+    }
+    const stepResults = [];
+    let context = {};
+    const sortedSteps = [...flow.steps].sort((a, b) => a.order - b.order);
+    for (const step of sortedSteps) {
+      await this.log("info", "Executing flow step", {
+        flowId: flow.flowId,
+        operationId: step.operationId,
+        order: step.order
+      });
+      const stepResult = {
+        operationId: step.operationId,
+        order: step.order,
+        success: false
+      };
+      try {
+        const handler = this.actions.get(step.operationId);
+        if (handler) {
+          const actionPayload = {
+            actionKey: step.operationId,
+            name: step.operationId,
+            actionType: "callback",
+            actionConfig: {
+              flowContext: context,
+              inputMapping: step.inputMapping
+            }
+          };
+          const result = await handler(actionPayload);
+          stepResult.success = true;
+          stepResult.data = result;
+          context = {
+            ...context,
+            [`step_${step.order}`]: result,
+            previousResult: result
+          };
+          await this.log("info", "Flow step completed successfully", {
+            flowId: flow.flowId,
+            operationId: step.operationId,
+            order: step.order
+          });
+        } else {
+          await this.log("warn", "No handler registered for flow step", {
+            flowId: flow.flowId,
+            operationId: step.operationId
+          });
+          stepResult.success = true;
+          stepResult.data = { skipped: true, reason: "No handler registered" };
+        }
+      } catch (error) {
+        stepResult.success = false;
+        stepResult.error = error instanceof Error ? error.message : String(error);
+        await this.log("error", "Flow step failed", {
+          flowId: flow.flowId,
+          operationId: step.operationId,
+          error: stepResult.error
+        });
+      }
+      stepResults.push(stepResult);
+      this.emit("flowStepComplete", { step: stepResult, flow });
+      if (this.config.onFlowStepComplete) {
+        this.config.onFlowStepComplete(stepResult, flow);
+      }
+    }
+    const flowResult = {
+      flowId: flow.flowId,
+      name: flow.name,
+      steps: stepResults,
+      completed: true,
+      totalSteps: flow.steps.length,
+      successfulSteps: stepResults.filter((s) => s.success).length
+    };
+    await this.log("info", "Flow execution completed", {
+      flowId: flow.flowId,
+      totalSteps: flowResult.totalSteps,
+      successfulSteps: flowResult.successfulSteps
+    });
+    this.emit("flowComplete", flowResult);
+    if (this.config.onFlowComplete) {
+      this.config.onFlowComplete(flowResult);
+    }
+    return flowResult;
+  }
+  /**
+   * Send log data to backend for analytics
+   */
+  async sendLogToBackend(logData) {
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      }
+      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
+      await fetch(logEndpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          ...logData,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          sessionToken: this.sessionToken
+        })
+      });
+    } catch (error) {
+    }
+  }
+  /**
+   * Send detailed log to backend
+   */
+  async log(level, message, data) {
+    try {
+      const headers = { "Content-Type": "application/json" };
+      if (this.config.sdkKey) {
+        headers["X-SDK-Key"] = this.config.sdkKey;
+      }
+      const logEndpoint = `${this.config.apiUrl}/sdk-logs/client`;
+      await fetch(logEndpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          level,
+          message,
+          data,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          sessionToken: this.sessionToken
+        })
+      });
+    } catch (error) {
+    }
+  }
+  /**
+   * Execute a registered action
+   */
+  async executeAction(action) {
+    const registeredKeys = Array.from(this.actions.keys());
+    if (typeof window !== "undefined") {
+      console.log("%c\u{1F3AF} SDK executeAction", "background: #ff0; color: #000; font-size: 20px; padding: 10px;", {
+        actionKey: action.actionKey,
+        totalRegistered: this.actions.size,
+        registeredKeys
+      });
+    }
+    await this.log("info", "executeAction called", {
+      actionKey: action.actionKey,
+      actionType: typeof action.actionKey,
+      totalRegistered: this.actions.size,
+      registeredKeys,
+      keyComparisons: registeredKeys.map((key) => ({
+        key,
+        matches: key === action.actionKey,
+        keyLength: key.length,
+        actionKeyLength: action.actionKey.length
+      }))
+    });
+    const handler = this.actions.get(action.actionKey);
+    if (typeof window !== "undefined") {
+      console.log("%c\u{1F50D} SDK Handler Lookup", "background: #0ff; color: #000; font-size: 16px; padding: 5px;", {
+        actionKey: action.actionKey,
+        found: !!handler,
+        hasConfigOnAction: !!this.config.onAction,
+        registeredKeys: Array.from(this.actions.keys())
+      });
+    }
+    if (handler) {
+      try {
+        const startTime = Date.now();
+        await handler(action);
+        const executionTime = Date.now() - startTime;
+        await this.log("info", "Handler executed successfully", {
+          actionKey: action.actionKey,
+          executionTime
+        });
+        await this.sendLogToBackend({
+          userMessage: `Action executed: ${action.actionKey}`,
+          matched: true,
+          actionKey: action.actionKey,
+          responseMessage: action.responseMessage || `Executed ${action.name}`,
+          executionTimeMs: executionTime
+        });
+        this.emit("action", action);
+        this.config.onAction?.(action.actionKey, action);
+      } catch (error) {
+        await this.log("error", "Handler execution failed", {
+          actionKey: action.actionKey,
+          error: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : void 0
+        });
+        await this.sendLogToBackend({
+          userMessage: `Action execution failed: ${action.actionKey}`,
+          matched: true,
+          actionKey: action.actionKey,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        this.emit("error", error);
+      }
+    } else {
+      if (this.config.onAction) {
+        await this.log("info", "No internal handler, trying config.onAction callback", {
+          actionKey: action.actionKey
+        });
+        try {
+          this.config.onAction(action.actionKey, action);
+          this.emit("action", action);
+          await this.log("info", "Action dispatched via config.onAction", {
+            actionKey: action.actionKey
+          });
+          await this.sendLogToBackend({
+            userMessage: `Action dispatched: ${action.actionKey}`,
+            matched: true,
+            actionKey: action.actionKey,
+            responseMessage: action.responseMessage || `Dispatched ${action.name}`
+          });
+          return;
+        } catch (error) {
+          await this.log("error", "config.onAction callback failed", {
+            actionKey: action.actionKey,
+            error: error instanceof Error ? error.message : String(error)
+          });
+        }
+      }
+      await this.log("warn", "No handler registered for action", {
+        actionKey: action.actionKey,
+        registeredActions: Array.from(this.actions.keys())
+      });
+      await this.sendLogToBackend({
+        userMessage: `No handler for action: ${action.actionKey}`,
+        matched: false,
+        actionKey: action.actionKey,
+        error: `Handler not registered. Available: ${Array.from(this.actions.keys()).join(", ")}`
+      });
+    }
+  }
+  /**
+   * Add event listener
+   */
+  on(event, callback) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(callback);
+  }
+  /**
+   * Remove event listener
+   */
+  off(event, callback) {
+    this.eventListeners.get(event)?.delete(callback);
+  }
+  /**
+   * Emit event
+   */
+  emit(event, data) {
+    this.eventListeners.get(event)?.forEach((callback) => callback(data));
+  }
+  /**
+   * Get session token
+   */
+  getSessionToken() {
+    return this.sessionToken;
+  }
+  /**
+   * Check if SDK is ready
+   */
+  getIsReady() {
+    return this.isReady;
+  }
+  /**
+   * Get registered action keys
+   */
+  getRegisteredActions() {
+    return Array.from(this.actions.keys());
+  }
+  /**
+   * Destroy the SDK instance
+   */
+  destroy() {
+    this.actions.clear();
+    this.eventListeners.clear();
+    this.sessionToken = null;
+    this.isReady = false;
+  }
+};
+
+// src/react/context.ts
+var import_react = require("react");
+var ProduckContext = (0, import_react.createContext)(null);
+function useProduckContext() {
+  const context = (0, import_react.useContext)(ProduckContext);
+  if (!context) {
+    throw new Error("useProduck must be used within a ProduckProvider");
+  }
+  return context;
+}
+
+// src/react/ProduckProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ProduckProvider({
+  config,
+  children,
+  onAction,
+  onError,
+  onFlowStart,
+  onFlowStepComplete,
+  onFlowComplete
+}) {
+  const [sdk, setSdk] = (0, import_react2.useState)(null);
+  const [isReady, setIsReady] = (0, import_react2.useState)(false);
+  const [sessionToken, setSessionToken] = (0, import_react2.useState)(null);
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [activeFlow, setActiveFlow] = (0, import_react2.useState)(null);
+  const [flowResult, setFlowResult] = (0, import_react2.useState)(null);
+  const [isExecutingFlow, setIsExecutingFlow] = (0, import_react2.useState)(false);
+  const actionsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const initAttempted = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (initAttempted.current) return;
+    initAttempted.current = true;
+    const produckSdk = new ProduckSDK({
+      ...config,
+      onAction: (key, payload) => {
+        const handler = actionsRef.current.get(key);
+        if (handler) {
+          handler(payload);
+        }
+        onAction?.(key, payload);
+      },
+      onError,
+      // Flow event handlers
+      onFlowStart: (flow) => {
+        setActiveFlow(flow);
+        setIsExecutingFlow(true);
+        setFlowResult(null);
+        onFlowStart?.(flow);
+      },
+      onFlowStepComplete: (step, flow) => {
+        onFlowStepComplete?.(step, flow);
+      },
+      onFlowComplete: (result) => {
+        setFlowResult(result);
+        setIsExecutingFlow(false);
+        onFlowComplete?.(result);
+      }
+    });
+    setSdk(produckSdk);
+    produckSdk.init().then(() => {
+      setIsReady(true);
+      setSessionToken(produckSdk.getSessionToken());
+    }).catch((err) => {
+      console.error("Failed to initialize Produck SDK:", err);
+      setIsReady(true);
+      onError?.(err);
+    });
+    return () => {
+      produckSdk.destroy();
+      initAttempted.current = false;
+    };
+  }, [config.guiderId, config.apiUrl, config.sdkKey]);
+  const sendMessage = (0, import_react2.useCallback)(async (message) => {
+    if (!sdk || !isReady) return;
+    setIsLoading(true);
+    setMessages((prev) => [...prev, { role: "user", content: message }]);
+    try {
+      const response = await sdk.sendMessage(message);
+      setMessages((prev) => [...prev, response]);
+    } catch (error) {
+      console.error("Failed to send message:", error);
+      onError?.(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sdk, isReady, onError]);
+  const register = (0, import_react2.useCallback)((actionKey, handler) => {
+    console.log("%c\u{1F4DD} [Provider] register called", "background: #0f0; color: #000;", {
+      actionKey,
+      sdkExists: !!sdk,
+      isReady
+    });
+    actionsRef.current.set(actionKey, handler);
+    if (sdk) {
+      sdk.register(actionKey, handler);
+      console.log("%c\u2705 [Provider] Registered with SDK", "background: #0f0; color: #000;", {
+        actionKey,
+        sdkRegisteredActions: sdk.getRegisteredActions()
+      });
+    } else {
+      console.log("%c\u23F3 [Provider] SDK not ready, stored in actionsRef only", "background: #ff0; color: #000;", { actionKey });
+    }
+  }, [sdk, isReady]);
+  (0, import_react2.useEffect)(() => {
+    if (sdk && actionsRef.current.size > 0) {
+      console.log("%c\u{1F504} [Provider] SDK ready, re-registering actions", "background: #0ff; color: #000;", {
+        actionsToRegister: Array.from(actionsRef.current.keys())
+      });
+      actionsRef.current.forEach((handler, key) => {
+        sdk.register(key, handler);
+      });
+      console.log("%c\u2705 [Provider] All actions re-registered", "background: #0f0; color: #000;", {
+        registeredActions: sdk.getRegisteredActions()
+      });
+    }
+  }, [sdk]);
+  const unregister = (0, import_react2.useCallback)((actionKey) => {
+    actionsRef.current.delete(actionKey);
+    sdk?.unregister(actionKey);
+  }, [sdk]);
+  const contextValue = {
+    sdk,
+    isReady,
+    sessionToken,
+    messages,
+    isLoading,
+    sendMessage,
+    register,
+    unregister,
+    // Flow-related state
+    activeFlow,
+    flowResult,
+    isExecutingFlow
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProduckContext.Provider, { value: contextValue, children });
+}
+
+// src/react/ProduckChat.tsx
+var import_react4 = require("react");
+
+// src/react/hooks.ts
+var import_react3 = require("react");
+function useProduck() {
+  const context = useProduckContext();
+  return context;
+}
+function useProduckAction(actionKey, handler, deps = []) {
+  const { register, unregister } = useProduckContext();
+  const memoizedHandler = (0, import_react3.useCallback)(handler, deps);
+  (0, import_react3.useEffect)(() => {
+    console.log("\u{1F3A3} [React Hook] useProduckAction - Registering action");
+    console.log("   Action Key:", actionKey);
+    register(actionKey, memoizedHandler);
+    return () => {
+      console.log("\u{1F3A3} [React Hook] useProduckAction - Cleanup, unregistering action");
+      console.log("   Action Key:", actionKey);
+      unregister(actionKey);
+    };
+  }, [actionKey, memoizedHandler, register, unregister]);
+}
+function useProduckReady() {
+  const { isReady } = useProduckContext();
+  return isReady;
+}
+function useProduckMessages() {
+  const { messages, isLoading, sendMessage } = useProduckContext();
+  return { messages, isLoading, sendMessage };
+}
+function useProduckFlow() {
+  const { activeFlow, flowResult, isExecutingFlow } = useProduckContext();
+  return { activeFlow, flowResult, isExecutingFlow };
+}
+
+// src/react/ProduckChat.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ProduckChat({
+  placeholder = "Ask a question...",
+  title = "Chat Assistant",
+  position = "bottom-right",
+  theme = "light",
+  primaryColor = "#f97316",
+  className = "",
+  style = {},
+  defaultOpen = false,
+  appearance = {}
+}) {
+  const { messages, isLoading, sendMessage } = useProduckMessages();
+  const isReady = useProduckReady();
+  const [input, setInput] = (0, import_react4.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(position === "inline" ? true : defaultOpen);
+  const [isHovering, setIsHovering] = (0, import_react4.useState)(false);
+  const messagesEndRef = (0, import_react4.useRef)(null);
+  const inputRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages]);
+  (0, import_react4.useEffect)(() => {
+    if (isOpen && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    const message = input;
+    setInput("");
+    await sendMessage(message);
+  };
+  const isDark = theme === "dark";
+  const {
+    width = position === "inline" ? "100%" : "380px",
+    height = position === "inline" ? "100%" : "520px",
+    borderRadius: containerBorderRadius = "16px",
+    backgroundColor = isDark ? "#1f2937" : "#ffffff",
+    headerBackgroundColor = primaryColor,
+    headerTextColor = "#ffffff",
+    inputBackgroundColor = isDark ? "#1f2937" : "#ffffff",
+    inputTextColor = isDark ? "#f3f4f6" : "#1f2937",
+    inputBorderColor = isDark ? "#374151" : "#e5e7eb",
+    userMessageBackgroundColor = primaryColor,
+    userMessageTextColor = "#ffffff",
+    assistantMessageBackgroundColor = isDark ? "#374151" : "#f3f4f6",
+    assistantMessageTextColor = isDark ? "#f3f4f6" : "#1f2937",
+    buttonBackgroundColor = primaryColor,
+    buttonTextColor = "#ffffff",
+    buttonBorderRadius = "12px",
+    floatingButtonSize = "60px",
+    fontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize = "14px",
+    headerFontSize = "16px",
+    border = `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+    boxShadow = "0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)",
+    floatingButtonIcon = "\u{1F4AC}",
+    floatingButtonLoadingIcon = "\u23F3",
+    showCloseButton = true,
+    headerIcon = "\u{1F4AC}",
+    sendButtonText = "Send",
+    sendButtonIcon,
+    emptyStateIcon = "\u{1F44B}",
+    emptyStateTitle = "Hi! How can I help you today?",
+    emptyStateSubtitle = "Type a message below to get started."
+  } = appearance;
+  const containerStyles = {
+    fontFamily,
+    ...position !== "inline" && {
+      position: "fixed",
+      bottom: "20px",
+      [position === "bottom-right" ? "right" : "left"]: "20px",
+      zIndex: 9999
+    },
+    ...style
+  };
+  const chatWindowStyles = {
+    width,
+    height,
+    maxHeight: position === "inline" ? "100%" : "80vh",
+    backgroundColor,
+    borderRadius: containerBorderRadius,
+    boxShadow,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    border
+  };
+  const headerStyles = {
+    padding: "16px 20px",
+    backgroundColor: headerBackgroundColor,
+    color: headerTextColor,
+    fontWeight: 600,
+    fontSize: headerFontSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexShrink: 0
+  };
+  const messagesContainerStyles = {
+    flex: 1,
+    overflowY: "auto",
+    padding: "16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    minHeight: 0
+  };
+  const inputContainerStyles = {
+    padding: "16px",
+    borderTop: `1px solid ${inputBorderColor}`,
+    backgroundColor: isDark ? "#111827" : "#f9fafb",
+    flexShrink: 0
+  };
+  const renderFloatingButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      onClick: () => setIsOpen(true),
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      disabled: !isReady,
+      "aria-label": "Open chat",
+      style: {
+        width: typeof floatingButtonSize === "number" ? `${floatingButtonSize}px` : floatingButtonSize,
+        height: typeof floatingButtonSize === "number" ? `${floatingButtonSize}px` : floatingButtonSize,
+        borderRadius: "50%",
+        backgroundColor: buttonBackgroundColor,
+        color: buttonTextColor,
+        border: "none",
+        cursor: isReady ? "pointer" : "wait",
+        boxShadow: isHovering ? "0 6px 24px rgba(0,0,0,0.3)" : "0 4px 20px rgba(0,0,0,0.2)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "26px",
+        transition: "all 0.2s ease",
+        transform: isHovering ? "scale(1.05)" : "scale(1)",
+        opacity: isReady ? 1 : 0.7
+      },
+      children: isReady ? floatingButtonIcon : floatingButtonLoadingIcon
+    }
+  ) });
+  if (position !== "inline" && !isOpen) {
+    return renderFloatingButton();
+  }
+  if (position === "inline" && !isReady) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
+        "Loading..."
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: isDark ? "#9ca3af" : "#6b7280"
+      }, children: "Connecting to chat..." })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: headerIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: title })
+        ] }),
+        position !== "inline" && showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => setIsOpen(false),
+            "aria-label": "Close chat",
+            style: {
+              background: "rgba(255,255,255,0.2)",
+              border: "none",
+              color: "#ffffff",
+              cursor: "pointer",
+              fontSize: "16px",
+              padding: "4px 8px",
+              borderRadius: "6px",
+              lineHeight: 1,
+              transition: "background 0.2s ease"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.3)",
+            onMouseLeave: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.2)",
+            children: "\u2715"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: messagesContainerStyles, children: [
+        messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              color: isDark ? "#9ca3af" : "#6b7280",
+              padding: "40px 20px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
+            ]
+          }
+        ),
+        messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                style: {
+                  maxWidth: "85%",
+                  padding: "12px 16px",
+                  borderRadius: msg.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                  backgroundColor: msg.role === "user" ? userMessageBackgroundColor : assistantMessageBackgroundColor,
+                  color: msg.role === "user" ? userMessageTextColor : assistantMessageTextColor,
+                  fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+                  lineHeight: "1.5",
+                  wordBreak: "break-word"
+                },
+                children: [
+                  msg.content,
+                  msg.action && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        marginTop: "8px",
+                        padding: "8px 12px",
+                        backgroundColor: "rgba(0,0,0,0.1)",
+                        borderRadius: "8px",
+                        fontSize: "12px",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "6px"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u26A1" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                          "Action triggered: ",
+                          msg.action.name
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          idx
+        )),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderRadius: "16px 16px 16px 4px",
+              backgroundColor: assistantMessageBackgroundColor,
+              color: isDark ? "#9ca3af" : "#6b7280",
+              fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
+              display: "inline-block",
+              animation: "pulse 1.5s ease-in-out infinite"
+            }, children: "Thinking..." })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            placeholder,
+            disabled: isLoading || !isReady,
+            style: {
+              flex: 1,
+              padding: "14px 18px",
+              borderRadius: typeof buttonBorderRadius === "number" ? `${buttonBorderRadius}px` : buttonBorderRadius,
+              border: `2px solid ${inputBorderColor}`,
+              backgroundColor: inputBackgroundColor,
+              color: inputTextColor,
+              fontSize: typeof fontSize === "number" ? `${fontSize + 1}px` : fontSize,
+              outline: "none",
+              transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+              boxSizing: "border-box"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = primaryColor;
+              e.currentTarget.style.boxShadow = `0 0 0 3px ${primaryColor}22`;
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = inputBorderColor;
+              e.currentTarget.style.boxShadow = "none";
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            type: "submit",
+            disabled: isLoading || !input.trim() || !isReady,
+            style: {
+              padding: "14px 24px",
+              borderRadius: typeof buttonBorderRadius === "number" ? `${buttonBorderRadius}px` : buttonBorderRadius,
+              backgroundColor: buttonBackgroundColor,
+              color: buttonTextColor,
+              border: "none",
+              cursor: isLoading || !input.trim() || !isReady ? "not-allowed" : "pointer",
+              opacity: isLoading || !input.trim() || !isReady ? 0.5 : 1,
+              fontWeight: 600,
+              fontSize: typeof fontSize === "number" ? `${fontSize + 1}px` : fontSize,
+              transition: "all 0.2s ease",
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: "6px"
+            },
+            onMouseEnter: (e) => {
+              if (!isLoading && input.trim() && isReady) {
+                e.currentTarget.style.transform = "scale(1.02)";
+                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.2)";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+              e.currentTarget.style.boxShadow = "none";
+            },
+            children: [
+              sendButtonIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: sendButtonIcon }),
+              sendButtonText
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+  ] });
+}
+
+// src/react/ProduckTarget.tsx
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ProduckTarget({
+  actionKey,
+  children,
+  onTrigger,
+  highlightStyle = {
+    outline: "3px solid #f97316",
+    outlineOffset: "2px",
+    borderRadius: "8px",
+    transition: "outline 0.3s ease"
+  },
+  highlightDuration = 3e3,
+  scrollIntoView = true
+}) {
+  const ref = (0, import_react5.useRef)(null);
+  const [isHighlighted, setIsHighlighted] = import_react5.default.useState(false);
+  useProduckAction(
+    actionKey,
+    (payload) => {
+      if (scrollIntoView && ref.current) {
+        ref.current.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }
+      setIsHighlighted(true);
+      setTimeout(() => setIsHighlighted(false), highlightDuration);
+      onTrigger?.(payload);
+    },
+    [scrollIntoView, highlightDuration, onTrigger]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref,
+      style: isHighlighted ? highlightStyle : void 0,
+      "data-produck-target": actionKey,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProduckChat,
+  ProduckContext,
+  ProduckProvider,
+  ProduckTarget,
+  useProduck,
+  useProduckAction,
+  useProduckFlow,
+  useProduckMessages,
+  useProduckReady
+});
+//# sourceMappingURL=react.js.map