@channlize/react 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/context/ChannlizeContext.tsx
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { ChannlizeClient } from "@channlize/core";
 import { jsx } from "react/jsx-runtime";
 var ChannlizeContext = createContext(null);
@@ -7,8 +7,19 @@ function ChannlizeProvider({
   config,
   children
 }) {
-  const client = new ChannlizeClient(config);
-  return /* @__PURE__ */ jsx(ChannlizeContext.Provider, { value: { client, config }, children });
+  const { apiKey, baseUrl, projectId, timeout, serverApiKey } = config;
+  const client = useMemo(
+    () => new ChannlizeClient({
+      apiKey,
+      baseUrl,
+      projectId,
+      timeout,
+      serverApiKey
+    }),
+    [apiKey, baseUrl, projectId, timeout, serverApiKey]
+  );
+  const value = useMemo(() => ({ client, config }), [client, config]);
+  return /* @__PURE__ */ jsx(ChannlizeContext.Provider, { value, children });
 }
 function useChannlize() {
   const context = useContext(ChannlizeContext);
@@ -60,6 +71,7 @@ function useContactForm(options = {}) {
 
 // src/hooks/useChatSession.ts
 import { useState as useState2, useEffect, useCallback as useCallback2, useRef } from "react";
+import { DEFAULT_BASE_URL } from "@channlize/core";
 function useChatSession(options = {}) {
   const { client, config } = useChannlize();
   const [session, setSession] = useState2(null);
@@ -70,9 +82,27 @@ function useChatSession(options = {}) {
   const eventSourceRef = useRef(null);
   const sessionRef = useRef(null);
   const isInitializedRef = useRef(false);
-  const baseUrl = config.baseUrl || "https://api.channlize.com";
+  const baseUrl = config.baseUrl || DEFAULT_BASE_URL;
   const storageKey = options.storageKey || `channlize_session_${config.apiKey}`;
   const persistSession = options.persistSession ?? true;
+  const latest = useRef({
+    onMessage: options.onMessage,
+    onError: options.onError,
+    debug: options.debug
+  });
+  useEffect(() => {
+    latest.current = {
+      onMessage: options.onMessage,
+      onError: options.onError,
+      debug: options.debug
+    };
+  });
+  const log = useCallback2(
+    (level, ...args) => {
+      if (latest.current.debug) console[level]("[channlize]", ...args);
+    },
+    []
+  );
   useEffect(() => {
     sessionRef.current = session;
   }, [session]);
@@ -82,51 +112,50 @@ function useChatSession(options = {}) {
         try {
           localStorage.setItem(storageKey, sessionId);
         } catch (err) {
-          console.warn("Failed to save session to localStorage:", err);
+          log("warn", "Failed to save session to localStorage:", err);
         }
       }
     },
-    [persistSession, storageKey]
+    [persistSession, storageKey, log]
   );
   const getSessionFromStorage = useCallback2(() => {
     if (persistSession && typeof window !== "undefined") {
       try {
         return localStorage.getItem(storageKey);
       } catch (err) {
-        console.warn("Failed to get session from localStorage:", err);
+        log("warn", "Failed to get session from localStorage:", err);
       }
     }
     return null;
-  }, [persistSession, storageKey]);
+  }, [persistSession, storageKey, log]);
   const clearSessionFromStorage = useCallback2(() => {
     if (persistSession && typeof window !== "undefined") {
       try {
         localStorage.removeItem(storageKey);
       } catch (err) {
-        console.warn("Failed to clear session from localStorage:", err);
+        log("warn", "Failed to clear session from localStorage:", err);
       }
     }
-  }, [persistSession, storageKey]);
+  }, [persistSession, storageKey, log]);
   const connectToSSE = useCallback2(
     (sseEndpoint) => {
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
       }
       const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
-      console.log("[Channlize SSE] Connecting to:", fullUrl);
+      log("log", "SSE connecting to", fullUrl);
       const eventSource = new EventSource(fullUrl);
       eventSourceRef.current = eventSource;
       eventSource.onopen = () => {
-        console.log("[Channlize SSE] Connection opened");
+        log("log", "SSE connection opened");
         setIsConnected(true);
         setError(null);
       };
       eventSource.addEventListener("connected", (event) => {
-        console.log("SSE connected:", event.data);
+        log("log", "SSE connected:", event.data);
       });
       eventSource.addEventListener("message", (event) => {
         try {
-          console.log("SSE message:", event.data);
           const message = JSON.parse(event.data);
           const chatMessage = {
             ...message,
@@ -136,9 +165,9 @@ function useChatSession(options = {}) {
             const exists = prev.some((m) => m.id === chatMessage.id);
             return exists ? prev : [...prev, chatMessage];
           });
-          options.onMessage?.(chatMessage);
+          latest.current.onMessage?.(chatMessage);
         } catch (err) {
-          console.warn("Failed to parse SSE message:", err, event.data);
+          log("warn", "Failed to parse SSE message:", err, event.data);
         }
       });
       eventSource.onmessage = (event) => {
@@ -153,10 +182,10 @@ function useChatSession(options = {}) {
               const exists = prev.some((m) => m.id === message.id);
               return exists ? prev : [...prev, message];
             });
-            options.onMessage?.(message);
+            latest.current.onMessage?.(message);
           }
         } catch (err) {
-          console.warn("Failed to parse default SSE message:", err);
+          log("warn", "Failed to parse default SSE message:", err);
         }
       };
       eventSource.onerror = (event) => {
@@ -164,7 +193,7 @@ function useChatSession(options = {}) {
           setIsConnected(false);
           return;
         }
-        console.error("[Channlize SSE] Connection error", {
+        log("error", "SSE connection error", {
           readyState: eventSource.readyState,
           url: fullUrl,
           event
@@ -176,10 +205,10 @@ function useChatSession(options = {}) {
         const error2 = new Error(`SSE ${stateMessage}`);
         error2.code = "SSE_ERROR";
         setError(error2);
-        options.onError?.(error2);
+        latest.current.onError?.(error2);
       };
     },
-    [baseUrl, options.onError, options.onMessage]
+    [baseUrl, log]
   );
   const startSession = useCallback2(async () => {
     if (isConnecting || session) return;
@@ -189,7 +218,7 @@ function useChatSession(options = {}) {
       const existingSessionId = options.sessionId || getSessionFromStorage();
       if (existingSessionId) {
         try {
-          console.log("\u{1F4E6} Resuming session from storage:", existingSessionId);
+          log("log", "Resuming session", existingSessionId);
           const existingSession = await client.getChatSession(existingSessionId);
           const existingMessages = await client.getChatMessages(existingSessionId);
           sessionRef.current = existingSession;
@@ -203,14 +232,14 @@ function useChatSession(options = {}) {
           setMessages(normalizedMessages2);
           const sseEndpoint = `/v1/chat/sessions/${existingSessionId}/events`;
           connectToSSE(sseEndpoint);
-          console.log("\u2705 Session resumed successfully");
+          log("log", "Session resumed");
           return;
         } catch (err) {
-          console.warn("\u26A0\uFE0F Failed to resume session, creating new one:", err);
+          log("warn", "Could not resume the session, starting a new one:", err);
           clearSessionFromStorage();
         }
       }
-      console.log("\u{1F195} Creating new chat session");
+      log("log", "Creating a chat session");
       const response = await client.createChatSession(options.metadata);
       sessionRef.current = response.session;
       setSession(response.session);
@@ -225,19 +254,19 @@ function useChatSession(options = {}) {
       if (response.sseEndpoint) {
         connectToSSE(response.sseEndpoint);
       }
-      console.log("\u2705 New session created:", response.session.id);
+      log("log", "Session created", response.session.id);
     } catch (err) {
       const error2 = err;
       setError(error2);
-      options.onError?.(error2);
+      latest.current.onError?.(error2);
     } finally {
       setIsConnecting(false);
     }
   }, [
     client,
     connectToSSE,
+    log,
     options.metadata,
-    options.onError,
     options.sessionId,
     getSessionFromStorage,
     saveSessionToStorage,
@@ -268,11 +297,11 @@ function useChatSession(options = {}) {
       } catch (err) {
         const error2 = err;
         setError(error2);
-        options.onError?.(error2);
+        latest.current.onError?.(error2);
         throw error2;
       }
     },
-    [client, options.onError]
+    [client]
   );
   const endSession = useCallback2(async () => {
     if (!sessionRef.current) return;
@@ -287,13 +316,13 @@ function useChatSession(options = {}) {
       setSession(null);
       setMessages([]);
       setIsConnected(false);
-      console.log("\u2705 Session ended and cleared from storage");
+      log("log", "Session ended");
     } catch (err) {
       const error2 = err;
       setError(error2);
-      options.onError?.(error2);
+      latest.current.onError?.(error2);
     }
-  }, [client, options.onError, clearSessionFromStorage]);
+  }, [client, log, clearSessionFromStorage]);
   const reconnect = useCallback2(() => {
     const current = sessionRef.current;
     if (!current) return;
@@ -344,7 +373,7 @@ function useChannlizeAnalytics() {
 // src/components/Form.tsx
 import {
   useEffect as useEffect2,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState as useState3
 } from "react";
@@ -787,7 +816,7 @@ function Form({
     ...submitText !== void 0 && { submit: submitText },
     ...successMessage !== void 0 && { successMessage }
   };
-  const topicOptions = useMemo(() => normalizeTopics(topics), [topics]);
+  const topicOptions = useMemo2(() => normalizeTopics(topics), [topics]);
   const modes = {
     name: fields.name ?? "required",
     company: fields.company ?? "hidden",
@@ -1284,10 +1313,11 @@ import {
   useCallback as useCallback4,
   useEffect as useEffect4,
   useId,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef as useRef3,
   useState as useState5
 } from "react";
+import { DEFAULT_BASE_URL as DEFAULT_BASE_URL2 } from "@channlize/core";
 
 // src/components/chat/internal.tsx
 import {
@@ -1650,6 +1680,7 @@ function SupportChat({
   sessionId,
   persistSession,
   storageKey,
+  debug,
   className = "",
   styles = {},
   placeholder = "Write a message\u2026",
@@ -1672,12 +1703,12 @@ function SupportChat({
   onMinimize,
   labels: labelOverrides
 }) {
-  const labels = useMemo2(
+  const labels = useMemo3(
     () => ({ ...defaultSupportChatLabels, ...labelOverrides }),
     [labelOverrides]
   );
   const { config } = useChannlize();
-  const baseUrl = config.baseUrl || "https://api.channlize.com";
+  const baseUrl = config.baseUrl || DEFAULT_BASE_URL2;
   const [text, setText] = useState5("");
   const [files, setFiles] = useState5([]);
   const [pending, setPending] = useState5([]);
@@ -1715,7 +1746,8 @@ function SupportChat({
     onError,
     sessionId,
     persistSession,
-    storageKey
+    storageKey,
+    debug
   });
   const sseFailed = error?.code === "SSE_ERROR";
   const ownSendError = !!error && error === sendError;
@@ -1731,7 +1763,7 @@ function SupportChat({
   );
   const status = sseFailed || startFailed ? "offline" : showConnecting ? "connecting" : "online";
   const statusLabel = status === "offline" ? labels.offline : status === "connecting" ? session ? labels.reconnecting : labels.connecting : statusText ? `${labels.online} \xB7 ${statusText}` : labels.online;
-  const displayMessages = useMemo2(() => {
+  const displayMessages = useMemo3(() => {
     const fromServer = messages.map(
       (m, i) => ({
         key: m.id || `m-${i}`,
@@ -1761,7 +1793,7 @@ function SupportChat({
     }));
     return [...fromServer, ...local];
   }, [messages, pending, title, baseUrl]);
-  const sections = useMemo2(
+  const sections = useMemo3(
     () => groupMessages(displayMessages),
     [displayMessages]
   );
@@ -2303,7 +2335,7 @@ function MessageBubble({
   onRemove
 }) {
   const isUser = msg.author === "user";
-  const parts = useMemo2(() => linkify(msg.content), [msg.content]);
+  const parts = useMemo3(() => linkify(msg.content), [msg.content]);
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsxs4(
       "div",
@@ -2600,11 +2632,23 @@ function ChannlizeChat({
   ) }) });
   return typeof document !== "undefined" ? createPortal(widget, document.body) : widget;
 }
+
+// src/index.ts
+import {
+  ChannlizeError,
+  ValidationError,
+  AuthenticationError,
+  RateLimitError
+} from "@channlize/core";
 export {
+  AuthenticationError,
   ChannlizeChat,
+  ChannlizeError,
   ChannlizeProvider,
   ContactForm,
+  RateLimitError,
   SupportChat,
+  ValidationError,
   defaultContactFormLabels,
   defaultSupportChatLabels,
   useChannlize,