@scalemule/chat 0.0.1

package/dist/element.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var chunkNFOVLPF2_cjs = require('./chunk-NFOVLPF2.cjs');
+
+// src/element.ts
+var ScaleMuleChatElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this.client = null;
+    this.unsub = null;
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["api-key", "conversation-id", "api-base-url", "embed-token"];
+  }
+  connectedCallback() {
+    this.initialize();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  attributeChangedCallback() {
+    this.cleanup();
+    this.initialize();
+  }
+  initialize() {
+    const apiKey = this.getAttribute("api-key") ?? void 0;
+    const conversationId = this.getAttribute("conversation-id");
+    const apiBaseUrl = this.getAttribute("api-base-url") ?? void 0;
+    const embedToken = this.getAttribute("embed-token") ?? void 0;
+    if (!apiKey && !embedToken) return;
+    const config = {
+      apiKey,
+      embedToken,
+      apiBaseUrl
+    };
+    this.client = new chunkNFOVLPF2_cjs.ChatClient(config);
+    this.shadow.innerHTML = `
+      <style>
+        :host { display: block; width: 100%; height: 100%; }
+        .chat-container { width: 100%; height: 100%; display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
+        .messages { flex: 1; overflow-y: auto; padding: 8px; }
+        .message { margin: 4px 0; padding: 6px 10px; background: #f0f0f0; border-radius: 8px; max-width: 80%; }
+        .input-area { display: flex; padding: 8px; border-top: 1px solid #e0e0e0; }
+        .input-area input { flex: 1; padding: 8px; border: 1px solid #d0d0d0; border-radius: 6px; outline: none; }
+        .input-area button { margin-left: 8px; padding: 8px 16px; background: #0066ff; color: white; border: none; border-radius: 6px; cursor: pointer; }
+      </style>
+      <div class="chat-container">
+        <div class="messages" id="messages"></div>
+        <div class="input-area">
+          <input type="text" placeholder="Type a message..." id="input" />
+          <button id="send">Send</button>
+        </div>
+      </div>
+    `;
+    const messagesEl = this.shadow.getElementById("messages");
+    const inputEl = this.shadow.getElementById("input");
+    const sendBtn = this.shadow.getElementById("send");
+    this.client.on("message", ({ message }) => {
+      this.appendMessage(messagesEl, message);
+      this.dispatchEvent(
+        new CustomEvent("chat-message", { detail: message, composed: true, bubbles: true })
+      );
+    });
+    const doSend = () => {
+      const content = inputEl.value.trim();
+      if (!content || !conversationId || !this.client) return;
+      this.client.sendMessage(conversationId, { content });
+      inputEl.value = "";
+    };
+    sendBtn.addEventListener("click", doSend);
+    inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") doSend();
+    });
+    const clientAtInit = this.client;
+    if (conversationId) {
+      this.client.getConversation(conversationId).then(() => {
+        if (this.client !== clientAtInit) return;
+        this.unsub = this.client.subscribeToConversation(conversationId);
+        this.client.connect();
+      });
+      this.client.getMessages(conversationId).then((result) => {
+        if (result.data?.messages) {
+          for (const msg of result.data.messages) {
+            this.appendMessage(messagesEl, msg);
+          }
+        }
+      });
+    }
+  }
+  appendMessage(container, message) {
+    const el = document.createElement("div");
+    el.className = "message";
+    el.textContent = message.content;
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+  }
+  cleanup() {
+    this.unsub?.();
+    this.unsub = null;
+    this.client?.destroy();
+    this.client = null;
+    this.shadow.innerHTML = "";
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("scalemule-chat")) {
+  customElements.define("scalemule-chat", ScaleMuleChatElement);
+}

package/dist/element.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/element.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/element.js

@@ -0,0 +1,106 @@
+import { ChatClient } from './chunk-6QRI4CJZ.js';
+
+// src/element.ts
+var ScaleMuleChatElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this.client = null;
+    this.unsub = null;
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["api-key", "conversation-id", "api-base-url", "embed-token"];
+  }
+  connectedCallback() {
+    this.initialize();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  attributeChangedCallback() {
+    this.cleanup();
+    this.initialize();
+  }
+  initialize() {
+    const apiKey = this.getAttribute("api-key") ?? void 0;
+    const conversationId = this.getAttribute("conversation-id");
+    const apiBaseUrl = this.getAttribute("api-base-url") ?? void 0;
+    const embedToken = this.getAttribute("embed-token") ?? void 0;
+    if (!apiKey && !embedToken) return;
+    const config = {
+      apiKey,
+      embedToken,
+      apiBaseUrl
+    };
+    this.client = new ChatClient(config);
+    this.shadow.innerHTML = `
+      <style>
+        :host { display: block; width: 100%; height: 100%; }
+        .chat-container { width: 100%; height: 100%; display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
+        .messages { flex: 1; overflow-y: auto; padding: 8px; }
+        .message { margin: 4px 0; padding: 6px 10px; background: #f0f0f0; border-radius: 8px; max-width: 80%; }
+        .input-area { display: flex; padding: 8px; border-top: 1px solid #e0e0e0; }
+        .input-area input { flex: 1; padding: 8px; border: 1px solid #d0d0d0; border-radius: 6px; outline: none; }
+        .input-area button { margin-left: 8px; padding: 8px 16px; background: #0066ff; color: white; border: none; border-radius: 6px; cursor: pointer; }
+      </style>
+      <div class="chat-container">
+        <div class="messages" id="messages"></div>
+        <div class="input-area">
+          <input type="text" placeholder="Type a message..." id="input" />
+          <button id="send">Send</button>
+        </div>
+      </div>
+    `;
+    const messagesEl = this.shadow.getElementById("messages");
+    const inputEl = this.shadow.getElementById("input");
+    const sendBtn = this.shadow.getElementById("send");
+    this.client.on("message", ({ message }) => {
+      this.appendMessage(messagesEl, message);
+      this.dispatchEvent(
+        new CustomEvent("chat-message", { detail: message, composed: true, bubbles: true })
+      );
+    });
+    const doSend = () => {
+      const content = inputEl.value.trim();
+      if (!content || !conversationId || !this.client) return;
+      this.client.sendMessage(conversationId, { content });
+      inputEl.value = "";
+    };
+    sendBtn.addEventListener("click", doSend);
+    inputEl.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") doSend();
+    });
+    const clientAtInit = this.client;
+    if (conversationId) {
+      this.client.getConversation(conversationId).then(() => {
+        if (this.client !== clientAtInit) return;
+        this.unsub = this.client.subscribeToConversation(conversationId);
+        this.client.connect();
+      });
+      this.client.getMessages(conversationId).then((result) => {
+        if (result.data?.messages) {
+          for (const msg of result.data.messages) {
+            this.appendMessage(messagesEl, msg);
+          }
+        }
+      });
+    }
+  }
+  appendMessage(container, message) {
+    const el = document.createElement("div");
+    el.className = "message";
+    el.textContent = message.content;
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+  }
+  cleanup() {
+    this.unsub?.();
+    this.unsub = null;
+    this.client?.destroy();
+    this.client = null;
+    this.shadow.innerHTML = "";
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("scalemule-chat")) {
+  customElements.define("scalemule-chat", ScaleMuleChatElement);
+}

package/dist/iframe.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+// src/iframe.ts
+var ChatIframeController = class {
+  constructor(container, config) {
+    this.listeners = /* @__PURE__ */ new Map();
+    this.handleMessage = (event) => {
+      if (event.source !== this.iframe.contentWindow) return;
+      const { type, payload } = event.data ?? {};
+      if (type && this.listeners.has(type)) {
+        for (const cb of this.listeners.get(type)) {
+          cb(payload);
+        }
+      }
+    };
+    this.iframe = document.createElement("iframe");
+    this.iframe.style.width = "100%";
+    this.iframe.style.height = "100%";
+    this.iframe.style.border = "none";
+    const baseUrl = config.apiBaseUrl ?? "https://api.scalemule.com";
+    const src = config.iframeSrc ?? `${baseUrl}/v1/chat/embed/${config.conversationId ?? ""}?token=${encodeURIComponent(config.embedToken ?? "")}`;
+    this.iframe.src = src;
+    container.appendChild(this.iframe);
+    window.addEventListener("message", this.handleMessage);
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(callback);
+    return () => this.listeners.get(event)?.delete(callback);
+  }
+  sendMessage(content) {
+    this.postToIframe("sendMessage", { content });
+  }
+  destroy() {
+    window.removeEventListener("message", this.handleMessage);
+    this.iframe.remove();
+    this.listeners.clear();
+  }
+  postToIframe(method, args) {
+    this.iframe.contentWindow?.postMessage({ method, args }, "*");
+  }
+};
+
+exports.ChatIframeController = ChatIframeController;

package/dist/iframe.d.cts

@@ -0,0 +1,17 @@
+import { c as ChatConfig } from './types-BwgD_Etd.cjs';
+
+declare class ChatIframeController {
+    private iframe;
+    private listeners;
+    constructor(container: HTMLElement, config: ChatConfig & {
+        conversationId?: string;
+        iframeSrc?: string;
+    });
+    on(event: string, callback: (data: unknown) => void): () => void;
+    sendMessage(content: string): void;
+    destroy(): void;
+    private handleMessage;
+    private postToIframe;
+}
+
+export { ChatIframeController };

package/dist/iframe.d.ts

@@ -0,0 +1,17 @@
+import { c as ChatConfig } from './types-BwgD_Etd.js';
+
+declare class ChatIframeController {
+    private iframe;
+    private listeners;
+    constructor(container: HTMLElement, config: ChatConfig & {
+        conversationId?: string;
+        iframeSrc?: string;
+    });
+    on(event: string, callback: (data: unknown) => void): () => void;
+    sendMessage(content: string): void;
+    destroy(): void;
+    private handleMessage;
+    private postToIframe;
+}
+
+export { ChatIframeController };

package/dist/iframe.js

@@ -0,0 +1,44 @@
+// src/iframe.ts
+var ChatIframeController = class {
+  constructor(container, config) {
+    this.listeners = /* @__PURE__ */ new Map();
+    this.handleMessage = (event) => {
+      if (event.source !== this.iframe.contentWindow) return;
+      const { type, payload } = event.data ?? {};
+      if (type && this.listeners.has(type)) {
+        for (const cb of this.listeners.get(type)) {
+          cb(payload);
+        }
+      }
+    };
+    this.iframe = document.createElement("iframe");
+    this.iframe.style.width = "100%";
+    this.iframe.style.height = "100%";
+    this.iframe.style.border = "none";
+    const baseUrl = config.apiBaseUrl ?? "https://api.scalemule.com";
+    const src = config.iframeSrc ?? `${baseUrl}/v1/chat/embed/${config.conversationId ?? ""}?token=${encodeURIComponent(config.embedToken ?? "")}`;
+    this.iframe.src = src;
+    container.appendChild(this.iframe);
+    window.addEventListener("message", this.handleMessage);
+  }
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(callback);
+    return () => this.listeners.get(event)?.delete(callback);
+  }
+  sendMessage(content) {
+    this.postToIframe("sendMessage", { content });
+  }
+  destroy() {
+    window.removeEventListener("message", this.handleMessage);
+    this.iframe.remove();
+    this.listeners.clear();
+  }
+  postToIframe(method, args) {
+    this.iframe.contentWindow?.postMessage({ method, args }, "*");
+  }
+};
+
+export { ChatIframeController };

package/dist/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkNFOVLPF2_cjs = require('./chunk-NFOVLPF2.cjs');
+
+// src/version.ts
+var CHAT_VERSION = "0.0.1";
+
+Object.defineProperty(exports, "ChatClient", {
+  enumerable: true,
+  get: function () { return chunkNFOVLPF2_cjs.ChatClient; }
+});
+exports.CHAT_VERSION = CHAT_VERSION;

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+export { C as ChatClient } from './ChatClient-CXPywp1w.cjs';
+export { A as ApiError, a as ApiResponse, b as Attachment, C as ChannelSettings, c as ChatConfig, d as ChatEventMap, e as ChatMessage, f as ChatReaction, g as ConnectionStatus, h as Conversation, i as CreateConversationOptions, G as GetMessagesOptions, L as ListConversationsOptions, M as MessagesResponse, P as Participant, j as PresenceMember, R as ReadStatus, S as SendMessageOptions } from './types-BwgD_Etd.cjs';
+
+declare const CHAT_VERSION = "0.0.1";
+
+export { CHAT_VERSION };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { C as ChatClient } from './ChatClient-DCid_mmU.js';
+export { A as ApiError, a as ApiResponse, b as Attachment, C as ChannelSettings, c as ChatConfig, d as ChatEventMap, e as ChatMessage, f as ChatReaction, g as ConnectionStatus, h as Conversation, i as CreateConversationOptions, G as GetMessagesOptions, L as ListConversationsOptions, M as MessagesResponse, P as Participant, j as PresenceMember, R as ReadStatus, S as SendMessageOptions } from './types-BwgD_Etd.js';
+
+declare const CHAT_VERSION = "0.0.1";
+
+export { CHAT_VERSION };

package/dist/index.js

@@ -0,0 +1,6 @@
+export { ChatClient } from './chunk-6QRI4CJZ.js';
+
+// src/version.ts
+var CHAT_VERSION = "0.0.1";
+
+export { CHAT_VERSION };

package/dist/react.cjs

@@ -0,0 +1,242 @@
+'use strict';
+
+var chunkNFOVLPF2_cjs = require('./chunk-NFOVLPF2.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ChatContext = react.createContext(null);
+function useChatContext() {
+  const ctx = react.useContext(ChatContext);
+  if (!ctx) throw new Error("useChatContext must be used within a ChatProvider");
+  return ctx;
+}
+function ChatProvider({ config, children }) {
+  const [client] = react.useState(() => new chunkNFOVLPF2_cjs.ChatClient(config));
+  react.useEffect(() => {
+    return () => {
+      client.destroy();
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: { client }, children });
+}
+function useConnection() {
+  const { client } = useChatContext();
+  const [status, setStatus] = react.useState(client.status);
+  react.useEffect(() => {
+    return client.on("connected", () => setStatus("connected"));
+  }, [client]);
+  react.useEffect(() => {
+    return client.on("disconnected", () => setStatus("disconnected"));
+  }, [client]);
+  react.useEffect(() => {
+    return client.on("reconnecting", () => setStatus("reconnecting"));
+  }, [client]);
+  return {
+    status,
+    connect: () => client.connect(),
+    disconnect: () => client.disconnect()
+  };
+}
+function useChat(conversationId) {
+  const { client } = useChatContext();
+  const [messages, setMessages] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [hasMore, setHasMore] = react.useState(false);
+  react.useEffect(() => {
+    if (!conversationId) return;
+    setIsLoading(true);
+    setError(null);
+    let cancelled = false;
+    let unsub;
+    (async () => {
+      await client.getConversation(conversationId);
+      if (cancelled) return;
+      const result = await client.getMessages(conversationId);
+      if (cancelled) return;
+      if (result.data?.messages) {
+        setMessages(result.data.messages);
+        setHasMore(result.data.has_more ?? false);
+      } else if (result.error) {
+        setError(result.error.message);
+      }
+      setIsLoading(false);
+      unsub = client.subscribeToConversation(conversationId);
+      client.connect();
+    })();
+    return () => {
+      cancelled = true;
+      unsub?.();
+    };
+  }, [client, conversationId]);
+  react.useEffect(() => {
+    if (!conversationId) return;
+    return client.on("message", ({ message, conversationId: convId }) => {
+      if (convId === conversationId) {
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === message.id)) return prev;
+          return [...prev, message];
+        });
+      }
+    });
+  }, [client, conversationId]);
+  react.useEffect(() => {
+    if (!conversationId) return;
+    return client.on("message:updated", ({ message, conversationId: convId }) => {
+      if (convId === conversationId) {
+        setMessages((prev) => prev.map((m) => m.id === message.id ? message : m));
+      }
+    });
+  }, [client, conversationId]);
+  react.useEffect(() => {
+    if (!conversationId) return;
+    return client.on("message:deleted", ({ messageId, conversationId: convId }) => {
+      if (convId === conversationId) {
+        setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      }
+    });
+  }, [client, conversationId]);
+  const sendMessage = react.useCallback(
+    async (content, options) => {
+      if (!conversationId) return;
+      return client.sendMessage(conversationId, { content, ...options });
+    },
+    [client, conversationId]
+  );
+  const loadMore = react.useCallback(async () => {
+    if (!conversationId || !messages.length) return;
+    const oldestId = messages[0]?.id;
+    const result = await client.getMessages(conversationId, { before: oldestId });
+    if (result.data?.messages) {
+      setMessages((prev) => [...result.data.messages, ...prev]);
+      setHasMore(result.data.has_more ?? false);
+    }
+  }, [client, conversationId, messages]);
+  const markRead = react.useCallback(async () => {
+    if (!conversationId) return;
+    await client.markRead(conversationId);
+  }, [client, conversationId]);
+  return {
+    messages,
+    isLoading,
+    error,
+    hasMore,
+    sendMessage,
+    loadMore,
+    markRead
+  };
+}
+function usePresence(conversationId) {
+  const { client } = useChatContext();
+  const [members, setMembers] = react.useState([]);
+  react.useEffect(() => {
+    if (!conversationId) return;
+    let cancelled = false;
+    (async () => {
+      await client.getConversation(conversationId);
+      if (cancelled) return;
+      client.joinPresence(conversationId);
+    })();
+    const unsubState = client.on("presence:state", ({ conversationId: convId, members: m }) => {
+      if (convId === conversationId) {
+        setMembers(
+          m.map((p) => ({
+            userId: p.user_id,
+            status: p.status ?? "online",
+            userData: p.user_data
+          }))
+        );
+      }
+    });
+    const unsubJoin = client.on("presence:join", ({ conversationId: convId, userId, userData }) => {
+      if (convId === conversationId) {
+        setMembers((prev) => {
+          if (prev.some((m) => m.userId === userId)) return prev;
+          return [...prev, { userId, status: "online", userData }];
+        });
+      }
+    });
+    const unsubLeave = client.on("presence:leave", ({ conversationId: convId, userId }) => {
+      if (convId === conversationId) {
+        setMembers((prev) => prev.filter((m) => m.userId !== userId));
+      }
+    });
+    const unsubUpdate = client.on(
+      "presence:update",
+      ({ conversationId: convId, userId, status, userData }) => {
+        if (convId === conversationId) {
+          setMembers(
+            (prev) => prev.map(
+              (m) => m.userId === userId ? { ...m, status, userData: userData ?? m.userData } : m
+            )
+          );
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+      client.leavePresence(conversationId);
+      unsubState();
+      unsubJoin();
+      unsubLeave();
+      unsubUpdate();
+    };
+  }, [client, conversationId]);
+  return { members };
+}
+function useTyping(conversationId) {
+  const { client } = useChatContext();
+  const [typingUsers, setTypingUsers] = react.useState([]);
+  const typingTimers = react.useRef(/* @__PURE__ */ new Map());
+  react.useEffect(() => {
+    if (!conversationId) return;
+    const unsubTyping = client.on("typing", ({ conversationId: convId, userId }) => {
+      if (convId !== conversationId) return;
+      setTypingUsers((prev) => prev.includes(userId) ? prev : [...prev, userId]);
+      const existing = typingTimers.current.get(userId);
+      if (existing) clearTimeout(existing);
+      typingTimers.current.set(
+        userId,
+        setTimeout(() => {
+          setTypingUsers((prev) => prev.filter((id) => id !== userId));
+          typingTimers.current.delete(userId);
+        }, 3e3)
+      );
+    });
+    const unsubStop = client.on("typing:stop", ({ conversationId: convId, userId }) => {
+      if (convId !== conversationId) return;
+      setTypingUsers((prev) => prev.filter((id) => id !== userId));
+      const timer = typingTimers.current.get(userId);
+      if (timer) {
+        clearTimeout(timer);
+        typingTimers.current.delete(userId);
+      }
+    });
+    return () => {
+      unsubTyping();
+      unsubStop();
+      for (const timer of typingTimers.current.values()) {
+        clearTimeout(timer);
+      }
+      typingTimers.current.clear();
+    };
+  }, [client, conversationId]);
+  const sendTyping = react.useCallback(
+    (isTyping = true) => {
+      if (!conversationId) return;
+      client.sendTyping(conversationId, isTyping);
+    },
+    [client, conversationId]
+  );
+  return { typingUsers, sendTyping };
+}
+
+Object.defineProperty(exports, "ChatClient", {
+  enumerable: true,
+  get: function () { return chunkNFOVLPF2_cjs.ChatClient; }
+});
+exports.ChatProvider = ChatProvider;
+exports.useChat = useChat;
+exports.useConnection = useConnection;
+exports.usePresence = usePresence;
+exports.useTyping = useTyping;

package/dist/react.d.cts

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { c as ChatConfig, e as ChatMessage, S as SendMessageOptions, a as ApiResponse, g as ConnectionStatus } from './types-BwgD_Etd.cjs';
+export { h as Conversation, G as GetMessagesOptions, M as MessagesResponse } from './types-BwgD_Etd.cjs';
+export { C as ChatClient } from './ChatClient-CXPywp1w.cjs';
+
+interface ChatProviderProps {
+    config: ChatConfig;
+    children: ReactNode;
+}
+declare function ChatProvider({ config, children }: ChatProviderProps): React.JSX.Element;
+declare function useConnection(): {
+    status: ConnectionStatus;
+    connect: () => void;
+    disconnect: () => void;
+};
+declare function useChat(conversationId?: string): {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: string | null;
+    hasMore: boolean;
+    sendMessage: (content: string, options?: Partial<SendMessageOptions>) => Promise<ApiResponse<ChatMessage> | undefined>;
+    loadMore: () => Promise<void>;
+    markRead: () => Promise<void>;
+};
+declare function usePresence(conversationId?: string): {
+    members: {
+        userId: string;
+        status: string;
+        userData?: unknown;
+    }[];
+};
+declare function useTyping(conversationId?: string): {
+    typingUsers: string[];
+    sendTyping: (isTyping?: boolean) => void;
+};
+
+export { ApiResponse, ChatConfig, ChatMessage, ChatProvider, ConnectionStatus, SendMessageOptions, useChat, useConnection, usePresence, useTyping };