ape-im-sdk-react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,668 @@
+// src/context.tsx
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var ApeIMContext = createContext(null);
+function ApeIMProvider({
+  children,
+  apiUrl = "https://www.apeinstantmessenger.com",
+  theme = "system",
+  onConnect,
+  onDisconnect
+}) {
+  const [user, setUser] = useState(null);
+  const [sessionToken, setSessionToken] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isWidgetOpen, setIsWidgetOpen] = useState(false);
+  const normalizedApiUrl = apiUrl.endsWith("/") ? apiUrl.slice(0, -1) : apiUrl;
+  useEffect(() => {
+    const storedToken = localStorage.getItem("ape_im_sdk_session");
+    if (storedToken) {
+      validateSession(storedToken);
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+  const validateSession = async (token) => {
+    try {
+      const res = await fetch(`${normalizedApiUrl}/api/users/me`, {
+        headers: { "X-Session-Token": token }
+      });
+      if (res.ok) {
+        const userData = await res.json();
+        setUser(userData);
+        setSessionToken(token);
+        onConnect?.(userData);
+      } else {
+        localStorage.removeItem("ape_im_sdk_session");
+      }
+    } catch (err) {
+      console.error("Session validation failed:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const connect = useCallback(async () => {
+    if (typeof window === "undefined") {
+      console.warn("Ape IM SDK: Cannot connect in SSR environment");
+      return;
+    }
+    if (!window.ethereum) {
+      console.warn("Ape IM SDK: No wallet detected");
+      alert("Please install MetaMask or another Web3 wallet to use chat.");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const accounts = await window.ethereum.request({
+        method: "eth_requestAccounts"
+      });
+      if (!accounts || accounts.length === 0) {
+        throw new Error("No accounts returned from wallet");
+      }
+      const walletAddress = accounts[0];
+      const res = await fetch(`${normalizedApiUrl}/api/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ walletAddress })
+      });
+      if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Login failed: ${errorText}`);
+      }
+      const data = await res.json();
+      setUser(data.user);
+      setSessionToken(data.sessionToken);
+      localStorage.setItem("ape_im_sdk_session", data.sessionToken);
+      onConnect?.(data.user);
+    } catch (err) {
+      console.error("Ape IM SDK: Connection failed:", err);
+      setIsLoading(false);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [normalizedApiUrl, onConnect]);
+  const disconnect = useCallback(() => {
+    if (sessionToken) {
+      fetch(`${normalizedApiUrl}/api/auth/logout`, {
+        method: "POST",
+        headers: { "X-Session-Token": sessionToken }
+      }).catch(console.error);
+    }
+    setUser(null);
+    setSessionToken(null);
+    localStorage.removeItem("ape_im_sdk_session");
+    onDisconnect?.();
+  }, [normalizedApiUrl, sessionToken, onDisconnect]);
+  const openWidget = useCallback(() => setIsWidgetOpen(true), []);
+  const closeWidget = useCallback(() => setIsWidgetOpen(false), []);
+  const value = {
+    user,
+    isConnected: !!user,
+    isLoading,
+    sessionToken,
+    apiUrl: normalizedApiUrl,
+    theme,
+    connect,
+    disconnect,
+    openWidget,
+    closeWidget,
+    isWidgetOpen
+  };
+  return /* @__PURE__ */ jsx(ApeIMContext.Provider, { value, children });
+}
+function useApeIM() {
+  const context = useContext(ApeIMContext);
+  if (!context) {
+    throw new Error("useApeIM must be used within an ApeIMProvider");
+  }
+  return context;
+}
+
+// src/ChatWidget.tsx
+import { useState as useState4, useEffect as useEffect4 } from "react";
+
+// src/hooks/useConversations.ts
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+function useConversations() {
+  const { apiUrl, sessionToken, isConnected } = useApeIM();
+  const [conversations, setConversations] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const fetchConversations = useCallback2(async () => {
+    if (!sessionToken) return;
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${apiUrl}/api/conversations`, {
+        headers: { "X-Session-Token": sessionToken }
+      });
+      if (!res.ok) throw new Error("Failed to fetch conversations");
+      const data = await res.json();
+      setConversations(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiUrl, sessionToken]);
+  useEffect2(() => {
+    if (isConnected) {
+      fetchConversations();
+    } else {
+      setConversations([]);
+      setIsLoading(false);
+    }
+  }, [isConnected, fetchConversations]);
+  const startConversation = useCallback2(async (userId) => {
+    if (!sessionToken) throw new Error("Not authenticated");
+    const res = await fetch(`${apiUrl}/api/conversations`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": sessionToken
+      },
+      body: JSON.stringify({ participantId: userId })
+    });
+    if (!res.ok) throw new Error("Failed to create conversation");
+    const conversation = await res.json();
+    await fetchConversations();
+    return conversation;
+  }, [apiUrl, sessionToken, fetchConversations]);
+  const createGroup = useCallback2(async (name, participantIds) => {
+    if (!sessionToken) throw new Error("Not authenticated");
+    const res = await fetch(`${apiUrl}/api/conversations/group`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": sessionToken
+      },
+      body: JSON.stringify({ name, participantIds })
+    });
+    if (!res.ok) throw new Error("Failed to create group");
+    const conversation = await res.json();
+    await fetchConversations();
+    return conversation;
+  }, [apiUrl, sessionToken, fetchConversations]);
+  return {
+    conversations,
+    isLoading,
+    error,
+    startConversation,
+    createGroup,
+    refetch: fetchConversations
+  };
+}
+
+// src/hooks/useChat.ts
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3, useRef } from "react";
+function useChat(conversationId) {
+  const { apiUrl, sessionToken, user } = useApeIM();
+  const [messages, setMessages] = useState3([]);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [isTyping, setIsTyping] = useState3([]);
+  const [participants, setParticipants] = useState3([]);
+  const wsRef = useRef(null);
+  const typingTimeoutsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect3(() => {
+    if (!conversationId || !sessionToken) return;
+    const fetchMessages = async () => {
+      setIsLoading(true);
+      try {
+        const res = await fetch(`${apiUrl}/api/conversations/${conversationId}/messages`, {
+          headers: { "X-Session-Token": sessionToken }
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setMessages(data.messages || data);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const fetchParticipants = async () => {
+      try {
+        const res = await fetch(`${apiUrl}/api/conversations/${conversationId}`, {
+          headers: { "X-Session-Token": sessionToken }
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setParticipants(data.participants?.map((p) => p.user) || []);
+        }
+      } catch (err) {
+        console.error("Failed to fetch participants:", err);
+      }
+    };
+    fetchMessages();
+    fetchParticipants();
+  }, [conversationId, apiUrl, sessionToken]);
+  useEffect3(() => {
+    if (!sessionToken) return;
+    const wsUrl = apiUrl.replace(/^http/, "ws") + "/ws";
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+    ws.onopen = () => {
+      ws.send(JSON.stringify({ type: "auth", sessionToken }));
+    };
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "message" && data.data?.conversationId === conversationId) {
+          setMessages((prev) => [...prev, data.data]);
+        }
+        if (data.type === "typing" && data.data?.conversationId === conversationId) {
+          const typingUser = data.data.user;
+          if (typingUser && typingUser.id !== user?.id) {
+            setIsTyping((prev) => {
+              if (prev.find((u) => u.id === typingUser.id)) return prev;
+              return [...prev, typingUser];
+            });
+            const existingTimeout = typingTimeoutsRef.current.get(typingUser.id);
+            if (existingTimeout) clearTimeout(existingTimeout);
+            const timeout = setTimeout(() => {
+              setIsTyping((prev) => prev.filter((u) => u.id !== typingUser.id));
+              typingTimeoutsRef.current.delete(typingUser.id);
+            }, 3e3);
+            typingTimeoutsRef.current.set(typingUser.id, timeout);
+          }
+        }
+      } catch (err) {
+        console.error("WebSocket message parse error:", err);
+      }
+    };
+    return () => {
+      ws.close();
+      typingTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      typingTimeoutsRef.current.clear();
+    };
+  }, [apiUrl, sessionToken, conversationId, user?.id]);
+  const sendMessage = useCallback3(async (content, formatting) => {
+    if (!conversationId || !sessionToken) throw new Error("Not ready to send");
+    const res = await fetch(`${apiUrl}/api/conversations/${conversationId}/messages`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": sessionToken
+      },
+      body: JSON.stringify({ content, formatting })
+    });
+    if (!res.ok) throw new Error("Failed to send message");
+    const data = await res.json();
+    setMessages((prev) => [...prev, data.message]);
+  }, [apiUrl, sessionToken, conversationId]);
+  const sendReaction = useCallback3(async (messageId, emoji) => {
+    if (!sessionToken) throw new Error("Not authenticated");
+    await fetch(`${apiUrl}/api/messages/${messageId}/reactions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": sessionToken
+      },
+      body: JSON.stringify({ emoji })
+    });
+  }, [apiUrl, sessionToken]);
+  const markAsRead = useCallback3(async () => {
+    if (!conversationId || !sessionToken) return;
+    await fetch(`${apiUrl}/api/conversations/${conversationId}/read`, {
+      method: "POST",
+      headers: { "X-Session-Token": sessionToken }
+    });
+  }, [apiUrl, sessionToken, conversationId]);
+  const sendTypingIndicator = useCallback3(() => {
+    if (wsRef.current?.readyState === WebSocket.OPEN && conversationId) {
+      wsRef.current.send(JSON.stringify({
+        type: "typing",
+        conversationId
+      }));
+    }
+  }, [conversationId]);
+  return {
+    messages,
+    isLoading,
+    sendMessage,
+    sendReaction,
+    isTyping,
+    participants,
+    markAsRead
+  };
+}
+
+// src/ChatWidget.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ApeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", width: "32", height: "32", fill: "none", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "20", cy: "20", r: "18", fill: "#1D3FE7" }),
+  /* @__PURE__ */ jsx2("path", { d: "M12 22c0-4.4 3.6-8 8-8s8 3.6 8 8", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "15", cy: "18", r: "2", fill: "white" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "25", cy: "18", r: "2", fill: "white" }),
+  /* @__PURE__ */ jsx2("path", { d: "M17 26c1.5 1.5 4.5 1.5 6 0", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
+] });
+function ChatWidget({
+  position = "bottom-right",
+  offset = { x: 20, y: 20 },
+  defaultOpen = false,
+  bubbleSize = 60,
+  zIndex = 9999
+}) {
+  const { user, isConnected, connect, isLoading, isWidgetOpen, openWidget, closeWidget, theme } = useApeIM();
+  const { conversations } = useConversations();
+  const [selectedConversation, setSelectedConversation] = useState4(null);
+  const { messages, sendMessage, isTyping } = useChat(selectedConversation?.id || null);
+  const [messageInput, setMessageInput] = useState4("");
+  const [isOpen, setIsOpen] = useState4(defaultOpen);
+  useEffect4(() => {
+    if (isWidgetOpen) setIsOpen(true);
+  }, [isWidgetOpen]);
+  const handleClose = () => {
+    setIsOpen(false);
+    closeWidget();
+  };
+  const handleSend = async () => {
+    if (!messageInput.trim() || !selectedConversation) return;
+    await sendMessage(messageInput);
+    setMessageInput("");
+  };
+  const isDark = theme === "dark" || theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const positionStyles = {
+    "bottom-right": { bottom: offset.y, right: offset.x },
+    "bottom-left": { bottom: offset.y, left: offset.x }
+  };
+  const containerStyle = {
+    position: "fixed",
+    zIndex,
+    fontFamily: '"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif',
+    ...positionStyles[position]
+  };
+  const bubbleStyle = {
+    width: bubbleSize,
+    height: bubbleSize,
+    borderRadius: "50%",
+    background: "linear-gradient(135deg, #1D3FE7 0%, #142B99 100%)",
+    border: "3px solid #E8EDFF",
+    boxShadow: "0 4px 20px rgba(29, 63, 231, 0.4)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "transform 0.2s, box-shadow 0.2s"
+  };
+  const windowStyle = {
+    width: 360,
+    height: 500,
+    background: isDark ? "#1a1a1a" : "#c0c0c0",
+    border: `2px solid ${isDark ? "#404040" : "#808080"}`,
+    boxShadow: isDark ? "4px 4px 0 #000, inset 1px 1px 0 #404040" : "4px 4px 0 #404040, inset 1px 1px 0 #fff",
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: 0
+  };
+  const titleBarStyle = {
+    background: "linear-gradient(90deg, #1D3FE7 0%, #142B99 100%)",
+    padding: "6px 8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    color: "white",
+    fontWeight: "bold",
+    fontSize: "12px"
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        style: bubbleStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.transform = "scale(1.1)";
+          e.currentTarget.style.boxShadow = "0 6px 24px rgba(29, 63, 231, 0.5)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = "scale(1)";
+          e.currentTarget.style.boxShadow = "0 4px 20px rgba(29, 63, 231, 0.4)";
+        },
+        "aria-label": "Open Ape IM",
+        "data-testid": "button-open-chat-widget",
+        children: /* @__PURE__ */ jsx2(ApeIcon, {})
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { style: windowStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: titleBarStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx2(ApeIcon, {}),
+        /* @__PURE__ */ jsx2("span", { children: "Ape Instant Messenger" })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: handleClose,
+          style: {
+            background: "#c0c0c0",
+            border: "2px outset #fff",
+            width: 18,
+            height: 18,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: "monospace",
+            fontSize: 10,
+            fontWeight: "bold"
+          },
+          "data-testid": "button-close-chat-widget",
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: !isConnected ? /* @__PURE__ */ jsxs("div", { style: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 24,
+      gap: 16,
+      background: isDark ? "#2a2a2a" : "#e0e0e0"
+    }, children: [
+      /* @__PURE__ */ jsx2(ApeIcon, {}),
+      /* @__PURE__ */ jsx2("p", { style: {
+        textAlign: "center",
+        fontSize: 13,
+        color: isDark ? "#ccc" : "#333",
+        margin: 0
+      }, children: "Connect your wallet to start chatting" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: connect,
+          disabled: isLoading,
+          style: {
+            background: "linear-gradient(135deg, #1D3FE7 0%, #142B99 100%)",
+            color: "white",
+            border: "2px outset #5577ff",
+            padding: "10px 24px",
+            fontSize: 12,
+            fontWeight: "bold",
+            cursor: isLoading ? "wait" : "pointer",
+            opacity: isLoading ? 0.7 : 1
+          },
+          "data-testid": "button-connect-wallet",
+          children: isLoading ? "Connecting..." : "Connect Wallet"
+        }
+      )
+    ] }) : !selectedConversation ? /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", background: isDark ? "#2a2a2a" : "#e0e0e0" }, children: [
+      /* @__PURE__ */ jsx2("div", { style: {
+        padding: "8px 12px",
+        fontSize: 11,
+        fontWeight: "bold",
+        color: isDark ? "#888" : "#666",
+        textTransform: "uppercase"
+      }, children: "Conversations" }),
+      conversations.length === 0 ? /* @__PURE__ */ jsx2("div", { style: {
+        padding: 24,
+        textAlign: "center",
+        color: isDark ? "#666" : "#888",
+        fontSize: 12
+      }, children: "No conversations yet" }) : conversations.map((conv) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setSelectedConversation(conv),
+          style: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "10px 12px",
+            background: "transparent",
+            border: "none",
+            borderBottom: `1px solid ${isDark ? "#404040" : "#c0c0c0"}`,
+            cursor: "pointer",
+            textAlign: "left"
+          },
+          "data-testid": `conversation-${conv.id}`,
+          children: [
+            /* @__PURE__ */ jsx2("div", { style: {
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              background: "#1D3FE7",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "white",
+              fontSize: 14,
+              fontWeight: "bold"
+            }, children: (conv.name || conv.participants?.[0]?.user?.username || "?")[0].toUpperCase() }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx2("div", { style: {
+                fontSize: 13,
+                fontWeight: 500,
+                color: isDark ? "#fff" : "#000",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }, children: conv.name || conv.participants?.map((p) => p.user?.username).join(", ") || "Chat" }),
+              conv.lastMessage && /* @__PURE__ */ jsx2("div", { style: {
+                fontSize: 11,
+                color: isDark ? "#888" : "#666",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }, children: conv.lastMessage.content })
+            ] })
+          ]
+        },
+        conv.id
+      ))
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => setSelectedConversation(null),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "8px 12px",
+            background: isDark ? "#1a1a1a" : "#d0d0d0",
+            border: "none",
+            borderBottom: `1px solid ${isDark ? "#404040" : "#a0a0a0"}`,
+            cursor: "pointer",
+            fontSize: 12,
+            color: isDark ? "#ccc" : "#333"
+          },
+          "data-testid": "button-back-to-conversations",
+          children: "\u2190 Back"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: {
+        flex: 1,
+        overflow: "auto",
+        padding: 12,
+        background: isDark ? "#2a2a2a" : "#e8e8e8",
+        display: "flex",
+        flexDirection: "column",
+        gap: 8
+      }, children: [
+        messages.map((msg) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: msg.senderId === user?.id ? "flex-end" : "flex-start"
+            },
+            children: /* @__PURE__ */ jsx2("div", { style: {
+              maxWidth: "80%",
+              padding: "8px 12px",
+              borderRadius: 4,
+              background: msg.senderId === user?.id ? "#1D3FE7" : isDark ? "#404040" : "#fff",
+              color: msg.senderId === user?.id ? "#fff" : isDark ? "#fff" : "#000",
+              fontSize: 13,
+              boxShadow: "1px 1px 2px rgba(0,0,0,0.1)"
+            }, children: msg.content })
+          },
+          msg.id
+        )),
+        isTyping.length > 0 && /* @__PURE__ */ jsxs("div", { style: {
+          fontSize: 11,
+          color: isDark ? "#888" : "#666",
+          fontStyle: "italic"
+        }, children: [
+          isTyping.map((u) => u.username).join(", "),
+          " typing..."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        gap: 8,
+        padding: 8,
+        background: isDark ? "#1a1a1a" : "#c0c0c0",
+        borderTop: `1px solid ${isDark ? "#404040" : "#a0a0a0"}`
+      }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "text",
+            value: messageInput,
+            onChange: (e) => setMessageInput(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleSend(),
+            placeholder: "Type a message...",
+            style: {
+              flex: 1,
+              padding: "8px 12px",
+              border: `2px inset ${isDark ? "#000" : "#808080"}`,
+              background: isDark ? "#0a0a0a" : "#fff",
+              color: isDark ? "#fff" : "#000",
+              fontSize: 13,
+              outline: "none"
+            },
+            "data-testid": "input-message"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: handleSend,
+            style: {
+              background: "linear-gradient(135deg, #1D3FE7 0%, #142B99 100%)",
+              color: "white",
+              border: "2px outset #5577ff",
+              padding: "8px 16px",
+              fontSize: 12,
+              fontWeight: "bold",
+              cursor: "pointer"
+            },
+            "data-testid": "button-send-message",
+            children: "Send"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
+export {
+  ApeIMProvider,
+  ChatWidget,
+  useApeIM,
+  useChat,
+  useConversations
+};