@samirify/messenger 0.1.0

package/dist/web/index.js

@@ -0,0 +1,1272 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { createContext, useState, useRef, useEffect, useContext, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+
+// src/web/ChatDock.tsx
+var MessengerContext = createContext(null);
+function useMessengerConfig() {
+  const ctx = useContext(MessengerContext);
+  if (!ctx) {
+    throw new Error(
+      "@gymlium/messenger: useMessengerConfig must be used within MessengerProvider"
+    );
+  }
+  return ctx;
+}
+function useOptionalMessengerConfig() {
+  return useContext(MessengerContext);
+}
+var MessengerUiContext = createContext(null);
+function useMessengerUi() {
+  const ctx = useContext(MessengerUiContext);
+  if (!ctx) {
+    throw new Error(
+      "@gymlium/messenger: useMessengerUi must be used within MessengerUiProvider"
+    );
+  }
+  return ctx;
+}
+
+// src/api.ts
+async function listThreads(http) {
+  const res = await http.getJson(
+    "/api/messages/threads"
+  );
+  return { ...res, data: res.data?.threads ?? [] };
+}
+async function openThread(http, clientUserId) {
+  return http.postJson("/api/messages/threads", {
+    ...clientUserId ? { client_user_id: clientUserId } : {}
+  });
+}
+async function getThread(http, threadId, limit = 50, beforeId) {
+  const params = new URLSearchParams({ limit: String(limit) });
+  return http.getJson(`/api/messages/threads/${threadId}?${params.toString()}`);
+}
+async function sendMessage(http, threadId, body, image) {
+  const path = `/api/messages/threads/${threadId}/messages`;
+  if (image?.uri || image?.file) {
+    const form = new FormData();
+    if (body.trim()) form.append("body", body.trim());
+    const filename = image.name ?? image.uri?.split("/").pop() ?? "photo.jpg";
+    const match = /\.(\w+)$/.exec(filename);
+    const type = image.type ?? (match ? `image/${match[1]}` : "image/jpeg");
+    if (image.file) {
+      form.append("image", image.file, filename);
+    } else if (image.uri.startsWith("blob:") || image.uri.startsWith("data:")) {
+      const blob = await fetch(image.uri).then((r) => r.blob());
+      form.append("image", blob, filename);
+    } else {
+      form.append("image", {
+        uri: image.uri,
+        name: filename,
+        type
+      });
+    }
+    return http.postForm(path, form);
+  }
+  return http.postJson(path, { body });
+}
+function sumUnread(threads) {
+  return threads.reduce((sum, th) => sum + Number(th.unread_count ?? 0), 0);
+}
+
+// src/queryKeys.ts
+var messengerKeys = {
+  all: ["messenger"],
+  threads: () => [...messengerKeys.all, "threads"],
+  thread: (id) => [...messengerKeys.all, "thread", id]
+};
+
+// src/hooks/useUnreadTotal.ts
+function useUnreadTotal(options) {
+  const cfg = useOptionalMessengerConfig();
+  const featureOn = cfg?.enabled === true;
+  const http = cfg?.http;
+  const enabled = (options?.enabled ?? true) && featureOn && !!http;
+  const query = useQuery({
+    queryKey: messengerKeys.threads(),
+    queryFn: async () => {
+      const res = await listThreads(http);
+      if (!res.success) {
+        throw new Error(res.message ?? "Failed to load threads");
+      }
+      return res.data;
+    },
+    enabled
+  });
+  const total = useMemo(
+    () => query.data ? sumUnread(query.data) : 0,
+    [query.data]
+  );
+  return {
+    total,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    refetch: query.refetch,
+    enabled: featureOn
+  };
+}
+
+// src/i18nKeys.ts
+var MessengerI18n = {
+  off: {
+    key: "mobile.messenger.off",
+    fallback: "Messaging is not enabled for this account."
+  },
+  chat: { key: "mobile.messenger.chat", fallback: "Chat" },
+  /** Dock / list title — prefer over inbox for web UI copy. */
+  messages: { key: "mobile.messenger.messages", fallback: "Chat" },
+  messagesHint: {
+    key: "mobile.messenger.messagesHint",
+    fallback: "Message your coach anytime"
+  },
+  messageCoach: {
+    key: "mobile.messenger.messageCoach",
+    fallback: "Message your coach"
+  },
+  empty: {
+    key: "mobile.messenger.empty",
+    fallback: "No conversations yet"
+  },
+  yourCoach: {
+    key: "mobile.messenger.yourCoach",
+    fallback: "Your coach"
+  },
+  photo: { key: "mobile.messenger.photo", fallback: "Photo" },
+  noMessages: {
+    key: "mobile.messenger.noMessages",
+    fallback: "No messages yet"
+  },
+  startConversation: {
+    key: "mobile.messenger.startConversation",
+    fallback: "Say hello \u2014 send the first message."
+  },
+  typeMessage: {
+    key: "mobile.messenger.typeMessage",
+    fallback: "Type a message\u2026"
+  },
+  client: { key: "mobile.trainer.client", fallback: "Client" },
+  back: { key: "common.back", fallback: "Back" }
+};
+function useThreads(options) {
+  const { http, enabled: featureOn } = useMessengerConfig();
+  const enabled = featureOn;
+  return useQuery({
+    queryKey: messengerKeys.threads(),
+    queryFn: async () => {
+      const res = await listThreads(http);
+      if (!res.success) {
+        throw new Error(res.message ?? "Failed to load threads");
+      }
+      return res.data;
+    },
+    enabled
+  });
+}
+function useOpenThread() {
+  const { http, navigation } = useMessengerConfig();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (clientUserId) => {
+      const res = await openThread(http, clientUserId);
+      if (!res.success || !res.data?.thread?.id) {
+        throw new Error(res.message ?? "Could not open thread");
+      }
+      return res.data.thread;
+    },
+    onSuccess: (thread) => {
+      void qc.invalidateQueries({ queryKey: messengerKeys.threads() });
+      navigation.openThread(thread.id);
+    }
+  });
+}
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function ThreadRow({
+  thread,
+  onSelect
+}) {
+  const { user, t, isRtl, theme } = useMessengerConfig();
+  const unread = Number(thread.unread_count ?? 0);
+  const title = user?.role === "admin" ? thread.client_name ?? t(MessengerI18n.client.key, MessengerI18n.client.fallback) : t(MessengerI18n.yourCoach.key, MessengerI18n.yourCoach.fallback);
+  const preview = thread.last_body || (thread.last_image_url ? t(MessengerI18n.photo.key, MessengerI18n.photo.fallback) : t(MessengerI18n.noMessages.key, MessengerI18n.noMessages.fallback));
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect(thread.id),
+      style: {
+        display: "flex",
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 12,
+        width: "calc(100% - 16px)",
+        textAlign: isRtl ? "right" : "left",
+        padding: "12px 14px",
+        margin: "0 8px",
+        border: "none",
+        borderRadius: 16,
+        background: unread > 0 ? `color-mix(in srgb, ${theme.accentColor} 8%, transparent)` : "transparent",
+        cursor: "pointer",
+        color: theme.colors.text,
+        transition: "background 160ms ease"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = `color-mix(in srgb, ${theme.accentColor} 12%, ${theme.colors.surfaceSecondary})`;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = unread > 0 ? `color-mix(in srgb, ${theme.accentColor} 8%, transparent)` : "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              width: 44,
+              height: 44,
+              borderRadius: 14,
+              flexShrink: 0,
+              display: "grid",
+              placeItems: "center",
+              fontFamily: theme.fonts.displaySemiBold,
+              fontWeight: 700,
+              fontSize: 13,
+              letterSpacing: "0.02em",
+              color: theme.accentColor,
+              background: `
+            linear-gradient(145deg,
+              color-mix(in srgb, ${theme.accentColor} 22%, ${theme.colors.surface}),
+              color-mix(in srgb, ${theme.accentColor} 8%, ${theme.colors.surfaceSecondary})
+            )
+          `,
+              border: `1px solid color-mix(in srgb, ${theme.accentColor} 22%, transparent)`
+            },
+            children: initials(title)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: isRtl ? "row-reverse" : "row",
+                alignItems: "baseline",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      fontFamily: theme.fonts.displaySemiBold,
+                      fontWeight: unread > 0 ? 700 : 600,
+                      fontSize: 14.5,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: title
+                  }
+                ),
+                unread > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      minWidth: 20,
+                      height: 20,
+                      borderRadius: 10,
+                      padding: "0 6px",
+                      background: theme.accentColor,
+                      color: "var(--color-text-inverse, #fff)",
+                      fontSize: 11,
+                      fontFamily: theme.fonts.bodySemiBold,
+                      fontWeight: 700,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    children: unread
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontFamily: theme.fonts.body,
+                fontSize: 12.5,
+                color: unread > 0 ? theme.colors.textSecondary : theme.colors.textMuted,
+                marginTop: 3,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontWeight: unread > 0 ? 500 : 400
+              },
+              children: preview
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ThreadList({
+  onSelectThread
+}) {
+  const { user, t, theme } = useMessengerConfig();
+  const threadsQuery = useThreads();
+  const openThread2 = useOpenThread();
+  const threads = threadsQuery.data ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        paddingTop: 6,
+        paddingBottom: 10
+      },
+      children: [
+        user?.role === "client" && threads.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px 4px" }, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => openThread2.mutate(void 0),
+            disabled: openThread2.isPending,
+            style: {
+              width: "100%",
+              padding: "13px 16px",
+              borderRadius: 14,
+              border: "none",
+              background: `
+                linear-gradient(135deg,
+                  color-mix(in srgb, ${theme.accentColor} 92%, #fff),
+                  ${theme.accentColor}
+                )
+              `,
+              color: "var(--color-text-inverse, #fff)",
+              fontFamily: theme.fonts.bodySemiBold,
+              fontWeight: 600,
+              fontSize: 14,
+              cursor: openThread2.isPending ? "default" : "pointer",
+              boxShadow: `0 10px 24px color-mix(in srgb, ${theme.accentColor} 32%, transparent)`
+            },
+            children: openThread2.isPending ? "\u2026" : t(
+              MessengerI18n.messageCoach.key,
+              MessengerI18n.messageCoach.fallback
+            )
+          }
+        ) }),
+        threadsQuery.isLoading && threads.length === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: 48,
+              textAlign: "center",
+              color: theme.colors.textMuted,
+              fontFamily: theme.fonts.body
+            },
+            children: "\u2026"
+          }
+        ) : threads.length === 0 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 32,
+              textAlign: "center",
+              gap: 10
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  style: {
+                    width: 56,
+                    height: 56,
+                    borderRadius: 18,
+                    display: "grid",
+                    placeItems: "center",
+                    background: `color-mix(in srgb, ${theme.accentColor} 12%, ${theme.colors.surfaceSecondary})`,
+                    color: theme.accentColor,
+                    fontSize: 22,
+                    marginBottom: 4
+                  },
+                  children: "\u2726"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme.fonts.displaySemiBold,
+                    fontWeight: 600,
+                    fontSize: 15,
+                    color: theme.colors.text
+                  },
+                  children: t(MessengerI18n.empty.key, MessengerI18n.empty.fallback)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontFamily: theme.fonts.body,
+                    fontSize: 13,
+                    color: theme.colors.textMuted,
+                    maxWidth: 220,
+                    lineHeight: 1.45
+                  },
+                  children: t(
+                    MessengerI18n.startConversation.key,
+                    MessengerI18n.startConversation.fallback
+                  )
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              overflowY: "auto",
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              paddingBottom: 8
+            },
+            children: threads.map((th) => /* @__PURE__ */ jsx(ThreadRow, { thread: th, onSelect: onSelectThread }, th.id))
+          }
+        )
+      ]
+    }
+  );
+}
+var POLL_MS = 18e3;
+function useThread(threadId, options) {
+  const { http, enabled: featureOn } = useMessengerConfig();
+  const enabled = featureOn && Number.isFinite(threadId) && threadId > 0;
+  const poll = true;
+  return useQuery({
+    queryKey: messengerKeys.thread(threadId),
+    queryFn: async () => {
+      const res = await getThread(http, threadId);
+      if (!res.success) {
+        throw new Error(res.message ?? "Failed to load thread");
+      }
+      return res.data;
+    },
+    enabled,
+    refetchInterval: enabled && poll ? POLL_MS : false
+  });
+}
+function useSendMessage(threadId) {
+  const { http } = useMessengerConfig();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (input) => {
+      const res = await sendMessage(http, threadId, input.body, input.image);
+      if (!res.success || !res.data?.message) {
+        throw new Error(res.message ?? "Send failed");
+      }
+      return res.data.message;
+    },
+    onSuccess: (message) => {
+      qc.setQueryData(
+        messengerKeys.thread(threadId),
+        (prev) => {
+          if (!prev) return prev;
+          if (prev.messages.some((m) => m.id === message.id)) return prev;
+          return { ...prev, messages: [...prev.messages, message] };
+        }
+      );
+      void qc.invalidateQueries({ queryKey: messengerKeys.threads() });
+    }
+  });
+}
+function ChatBubbleIcon({ size = 26 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5 7.2A3.2 3.2 0 0 1 8.2 4h7.6A3.2 3.2 0 0 1 19 7.2v5.6A3.2 3.2 0 0 1 15.8 16H12.1l-3.55 2.75a.75.75 0 0 1-1.2-.6V16H8.2A3.2 3.2 0 0 1 5 12.8V7.2Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "9.1", cy: "10", r: "1.05", fill: "rgba(0,0,0,0.28)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "1.05", fill: "rgba(0,0,0,0.28)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "14.9", cy: "10", r: "1.05", fill: "rgba(0,0,0,0.28)" })
+      ]
+    }
+  );
+}
+function CloseIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, style: { display: "block" }, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.4 6.4a1 1 0 0 1 1.4 0L12 10.6l4.2-4.2a1 1 0 1 1 1.4 1.4L13.4 12l4.2 4.2a1 1 0 0 1-1.4 1.4L12 13.4l-4.2 4.2a1 1 0 0 1-1.4-1.4L10.6 12 6.4 7.8a1 1 0 0 1 0-1.4Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function BackIcon({ size = 18, flip }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      style: { display: "block", transform: flip ? "scaleX(-1)" : void 0 },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M14.7 5.3a1 1 0 0 1 0 1.4L9.4 12l5.3 5.3a1 1 0 0 1-1.4 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.4 0Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+function ImageIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6.5 4h11A2.5 2.5 0 0 1 20 6.5v11A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-11A2.5 2.5 0 0 1 6.5 4Z",
+        stroke: "currentColor",
+        strokeWidth: "1.7"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { cx: "9.2", cy: "9", r: "1.4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.5 16.2 9.8 12l2.4 2.3 2.6-3.2 4.2 5.1",
+        stroke: "currentColor",
+        strokeWidth: "1.7",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function SendIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, style: { display: "block" }, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.2 11.2 19.1 4.4a.8.8 0 0 1 1.1.9l-3.4 14.2a.8.8 0 0 1-1.3.45l-4.2-3.5-2.5 2.4a.7.7 0 0 1-1.2-.45v-4.05l-3.1-1.6a.8.8 0 0 1 .5-1.55Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function WebComposer({
+  sending,
+  onSend
+}) {
+  const { t, isRtl, theme, pickImage } = useMessengerConfig();
+  const [body, setBody] = useState("");
+  const [focused, setFocused] = useState(false);
+  const fileRef = useRef(null);
+  const canSend = Boolean(body.trim()) && !sending;
+  async function handleSend() {
+    if (!body.trim() || sending) return;
+    const text = body;
+    setBody("");
+    await onSend(text, null);
+  }
+  async function handlePick() {
+    const fromHost = await pickImage();
+    if (fromHost) {
+      await onSend(body, fromHost);
+      setBody("");
+      return;
+    }
+    fileRef.current?.click();
+  }
+  async function onFileChange(e) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    const uri = URL.createObjectURL(file);
+    await onSend(body, {
+      uri,
+      name: file.name,
+      type: file.type,
+      file
+    });
+    setBody("");
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        padding: "10px 12px 14px",
+        borderTop: `1px solid color-mix(in srgb, ${theme.colors.border} 75%, transparent)`,
+        background: `linear-gradient(0deg, ${theme.colors.surface}, color-mix(in srgb, ${theme.colors.surface} 88%, transparent))`
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: isRtl ? "row-reverse" : "row",
+            alignItems: "flex-end",
+            gap: 8,
+            padding: "6px 6px 6px 8px",
+            borderRadius: 18,
+            border: `1px solid ${focused ? `color-mix(in srgb, ${theme.accentColor} 45%, ${theme.colors.border})` : `color-mix(in srgb, ${theme.colors.border} 85%, transparent)`}`,
+            background: theme.colors.background,
+            boxShadow: focused ? `0 0 0 3px color-mix(in srgb, ${theme.accentColor} 16%, transparent)` : "none",
+            transition: "border-color 160ms ease, box-shadow 160ms ease"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileRef,
+                type: "file",
+                accept: "image/*",
+                hidden: true,
+                onChange: onFileChange
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handlePick(),
+                disabled: sending,
+                "aria-label": "Attach image",
+                style: {
+                  width: 36,
+                  height: 36,
+                  borderRadius: 12,
+                  border: "none",
+                  background: "transparent",
+                  color: theme.colors.textMuted,
+                  cursor: sending ? "default" : "pointer",
+                  display: "grid",
+                  placeItems: "center",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsx(ImageIcon, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value: body,
+                onChange: (e) => setBody(e.target.value),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void handleSend();
+                  }
+                },
+                placeholder: t(
+                  MessengerI18n.typeMessage.key,
+                  MessengerI18n.typeMessage.fallback
+                ),
+                rows: 1,
+                style: {
+                  flex: 1,
+                  resize: "none",
+                  maxHeight: 96,
+                  minHeight: 36,
+                  border: "none",
+                  padding: "8px 4px",
+                  fontFamily: theme.fonts.body,
+                  fontSize: 14,
+                  color: theme.colors.text,
+                  background: "transparent",
+                  textAlign: isRtl ? "right" : "left",
+                  outline: "none",
+                  lineHeight: 1.4
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleSend(),
+                disabled: !canSend,
+                "aria-label": "Send",
+                style: {
+                  width: 36,
+                  height: 36,
+                  borderRadius: 12,
+                  border: "none",
+                  background: canSend ? `linear-gradient(145deg, color-mix(in srgb, ${theme.accentColor} 90%, #fff), ${theme.accentColor})` : `color-mix(in srgb, ${theme.colors.surfaceSecondary} 90%, transparent)`,
+                  color: canSend ? "var(--color-text-inverse, #fff)" : theme.colors.textMuted,
+                  cursor: canSend ? "pointer" : "default",
+                  display: "grid",
+                  placeItems: "center",
+                  flexShrink: 0,
+                  boxShadow: canSend ? `0 6px 16px color-mix(in srgb, ${theme.accentColor} 35%, transparent)` : "none",
+                  transition: "background 160ms ease, box-shadow 160ms ease"
+                },
+                children: sending ? /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1 }, children: "\u2026" }) : /* @__PURE__ */ jsx(SendIcon, { size: 15 })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function initials2(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Bubble({ message }) {
+  const { user, isRtl, theme } = useMessengerConfig();
+  const mine = message.sender_user_id === user?.id;
+  const alignEnd = mine !== isRtl;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        alignSelf: alignEnd ? "flex-end" : "flex-start",
+        maxWidth: "78%",
+        marginBottom: 8,
+        padding: "10px 13px",
+        borderRadius: mine ? alignEnd ? "18px 18px 6px 18px" : "18px 18px 18px 6px" : alignEnd ? "18px 18px 6px 18px" : "18px 18px 18px 6px",
+        background: mine ? `linear-gradient(145deg, color-mix(in srgb, ${theme.accentColor} 88%, #fff), ${theme.accentColor})` : `color-mix(in srgb, ${theme.colors.surfaceSecondary} 92%, ${theme.colors.surface})`,
+        color: mine ? "var(--color-text-inverse, #fff)" : theme.colors.text,
+        fontFamily: theme.fonts.body,
+        fontSize: 14,
+        lineHeight: 1.45,
+        boxShadow: mine ? `0 8px 20px color-mix(in srgb, ${theme.accentColor} 28%, transparent)` : `0 1px 0 color-mix(in srgb, ${theme.colors.border} 80%, transparent)`,
+        border: mine ? "none" : `1px solid color-mix(in srgb, ${theme.colors.border} 70%, transparent)`
+      },
+      children: [
+        message.image_url ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: message.image_url,
+              alt: "",
+              style: {
+                width: "100%",
+                maxWidth: 220,
+                borderRadius: 12,
+                display: "block",
+                marginBottom: message.body ? 8 : 0
+              }
+            }
+          )
+        ) : null,
+        message.body ? /* @__PURE__ */ jsx("div", { style: { whiteSpace: "pre-wrap" }, children: message.body }) : null
+      ]
+    }
+  );
+}
+function Conversation({
+  threadId,
+  onBack,
+  onClose
+}) {
+  const { user, t, isRtl, theme } = useMessengerConfig();
+  const listRef = useRef(null);
+  const threadQuery = useThread(threadId);
+  const threadsQuery = useThreads();
+  const sendMutation = useSendMessage(threadId);
+  const messages = threadQuery.data?.messages ?? [];
+  const threadMeta = threadsQuery.data?.find((th) => th.id === threadId);
+  const title = user?.role === "admin" ? threadMeta?.client_name ?? t(MessengerI18n.client.key, MessengerI18n.client.fallback) : t(MessengerI18n.yourCoach.key, MessengerI18n.yourCoach.fallback);
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages.length, threadId]);
+  async function handleSend(body, image) {
+    if (!body.trim() && !image || sendMutation.isPending) return;
+    await sendMutation.mutateAsync({ body, image });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        style: {
+          display: "flex",
+          flexDirection: isRtl ? "row-reverse" : "row",
+          alignItems: "center",
+          gap: 10,
+          padding: "12px 14px",
+          borderBottom: `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)`,
+          background: `linear-gradient(180deg, color-mix(in srgb, ${theme.colors.surface} 94%, transparent), color-mix(in srgb, ${theme.colors.surface} 72%, transparent))`,
+          backdropFilter: "blur(12px)"
+        },
+        children: [
+          onBack ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              "aria-label": t(MessengerI18n.back.key, MessengerI18n.back.fallback),
+              style: {
+                border: `1px solid color-mix(in srgb, ${theme.colors.border} 90%, transparent)`,
+                background: `color-mix(in srgb, ${theme.colors.surfaceSecondary} 75%, transparent)`,
+                color: theme.colors.text,
+                cursor: "pointer",
+                width: 36,
+                height: 36,
+                borderRadius: 12,
+                display: "grid",
+                placeItems: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(BackIcon, { flip: isRtl })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                width: 36,
+                height: 36,
+                borderRadius: 12,
+                flexShrink: 0,
+                display: "grid",
+                placeItems: "center",
+                fontFamily: theme.fonts.displaySemiBold,
+                fontWeight: 700,
+                fontSize: 12,
+                color: theme.accentColor,
+                background: `color-mix(in srgb, ${theme.accentColor} 14%, ${theme.colors.surfaceSecondary})`,
+                border: `1px solid color-mix(in srgb, ${theme.accentColor} 20%, transparent)`
+              },
+              children: initials2(title)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: isRtl ? "right" : "left" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: theme.fonts.displayBold,
+                  fontWeight: 700,
+                  fontSize: 15,
+                  color: theme.colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: theme.fonts.body,
+                  fontSize: 11.5,
+                  color: theme.colors.textMuted,
+                  marginTop: 1
+                },
+                children: t(MessengerI18n.chat.key, MessengerI18n.chat.fallback)
+              }
+            )
+          ] }),
+          onClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close",
+              style: {
+                border: `1px solid color-mix(in srgb, ${theme.colors.border} 90%, transparent)`,
+                background: `color-mix(in srgb, ${theme.colors.surfaceSecondary} 75%, transparent)`,
+                color: theme.colors.textSecondary,
+                width: 36,
+                height: 36,
+                borderRadius: 12,
+                cursor: "pointer",
+                display: "grid",
+                placeItems: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        style: {
+          flex: 1,
+          overflowY: "auto",
+          padding: "16px 14px 12px",
+          display: "flex",
+          flexDirection: "column",
+          background: `
+            radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, ${theme.accentColor} 6%, transparent), transparent 70%),
+            ${theme.colors.background}
+          `
+        },
+        children: threadQuery.isLoading && messages.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textMuted, textAlign: "center", marginTop: 40 }, children: "\u2026" }) : messages.length === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: theme.colors.textMuted,
+              textAlign: "center",
+              marginTop: 48,
+              fontFamily: theme.fonts.body,
+              fontSize: 13.5,
+              lineHeight: 1.5,
+              padding: "0 24px"
+            },
+            children: t(
+              MessengerI18n.startConversation.key,
+              MessengerI18n.startConversation.fallback
+            )
+          }
+        ) : messages.map((m) => /* @__PURE__ */ jsx(Bubble, { message: m }, m.id))
+      }
+    ),
+    /* @__PURE__ */ jsx(WebComposer, { sending: sendMutation.isPending, onSend: handleSend })
+  ] });
+}
+function ChatPanel({
+  threadId,
+  onSelectThread,
+  onBackToList,
+  onClose,
+  variant = "dock"
+}) {
+  const { enabled, t, isRtl, theme, onFeatureOff } = useMessengerConfig();
+  if (!enabled) {
+    if (onFeatureOff) return /* @__PURE__ */ jsx(Fragment, { children: onFeatureOff() });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: 32,
+          textAlign: "center",
+          color: theme.colors.textMuted,
+          fontFamily: theme.fonts.body
+        },
+        children: t(MessengerI18n.off.key, MessengerI18n.off.fallback)
+      }
+    );
+  }
+  const shell = variant === "page" ? {
+    display: "flex",
+    flexDirection: "column",
+    height: "min(70vh, 640px)",
+    maxWidth: 720,
+    margin: "0 auto",
+    borderRadius: 24,
+    overflow: "hidden",
+    border: `1px solid ${theme.colors.border}`,
+    background: theme.colors.surface,
+    boxShadow: `0 24px 64px color-mix(in srgb, ${theme.colors.text} 14%, transparent)`
+  } : {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    background: `
+            radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, ${theme.accentColor} 14%, transparent), transparent 55%),
+            radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, ${theme.accentColor} 8%, transparent), transparent 50%),
+            ${theme.colors.surface}
+          `
+  };
+  const inThread = threadId != null;
+  return /* @__PURE__ */ jsxs("div", { style: shell, children: [
+    !inThread ? /* @__PURE__ */ jsxs(
+      "header",
+      {
+        style: {
+          display: "flex",
+          flexDirection: isRtl ? "row-reverse" : "row",
+          alignItems: "center",
+          gap: 12,
+          padding: "16px 16px 14px",
+          borderBottom: `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)`,
+          background: `linear-gradient(180deg, color-mix(in srgb, ${theme.colors.surface} 92%, transparent), color-mix(in srgb, ${theme.colors.surface} 70%, transparent))`,
+          backdropFilter: "blur(12px)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: isRtl ? "right" : "left" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: theme.fonts.displayBold,
+                  fontWeight: 700,
+                  fontSize: 20,
+                  letterSpacing: "-0.02em",
+                  color: theme.colors.text,
+                  lineHeight: 1.15
+                },
+                children: t(MessengerI18n.messages.key, MessengerI18n.messages.fallback)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginTop: 3,
+                  fontFamily: theme.fonts.body,
+                  fontSize: 12.5,
+                  color: theme.colors.textMuted
+                },
+                children: t(MessengerI18n.messagesHint.key, MessengerI18n.messagesHint.fallback)
+              }
+            )
+          ] }),
+          onClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close",
+              style: {
+                border: `1px solid color-mix(in srgb, ${theme.colors.border} 90%, transparent)`,
+                background: `color-mix(in srgb, ${theme.colors.surfaceSecondary} 80%, transparent)`,
+                color: theme.colors.textSecondary,
+                width: 36,
+                height: 36,
+                borderRadius: 12,
+                cursor: "pointer",
+                display: "grid",
+                placeItems: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: inThread ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: isRtl ? -16 : 16 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: isRtl ? 12 : -12 },
+        transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+        style: { height: "100%" },
+        children: /* @__PURE__ */ jsx(
+          Conversation,
+          {
+            threadId,
+            onBack: onBackToList,
+            onClose
+          }
+        )
+      },
+      `thread-${threadId}`
+    ) : /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: isRtl ? 16 : -16 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: isRtl ? -12 : 12 },
+        transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+        style: { height: "100%" },
+        children: /* @__PURE__ */ jsx(ThreadList, { onSelectThread })
+      },
+      "list"
+    ) }) })
+  ] });
+}
+function ChatDock() {
+  const { enabled, isRtl, theme, t } = useMessengerConfig();
+  const ui = useMessengerUi();
+  const unread = useUnreadTotal({ enabled });
+  if (!enabled) return null;
+  const side = isRtl ? "left" : "right";
+  const open = ui.open;
+  const label = open ? "Close chat" : t(MessengerI18n.messages.key, MessengerI18n.messages.fallback);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: "max(20px, env(safe-area-inset-bottom))",
+        [side]: "max(20px, env(safe-area-inset-right, env(safe-area-inset-left)))",
+        zIndex: 1e4,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: isRtl ? "flex-start" : "flex-end",
+        gap: 14,
+        pointerEvents: "none",
+        // Lets SVG dots / text on accent pick up inverse ink
+        ["--gymlium-on-accent"]: "var(--color-text-inverse, #fff)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 28, scale: 0.94, filter: "blur(6px)" },
+            animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+            exit: { opacity: 0, y: 18, scale: 0.96, filter: "blur(4px)" },
+            transition: { duration: 0.32, ease: [0.22, 1, 0.36, 1] },
+            style: {
+              width: "min(380px, calc(100vw - 28px))",
+              height: "min(440px, calc(100vh - 160px))",
+              maxHeight: 440,
+              borderRadius: 24,
+              overflow: "hidden",
+              border: `1px solid color-mix(in srgb, ${theme.colors.border} 85%, transparent)`,
+              background: theme.colors.surface,
+              boxShadow: `
+                0 0 0 1px color-mix(in srgb, ${theme.accentColor} 12%, transparent),
+                0 28px 80px color-mix(in srgb, ${theme.colors.text} 22%, transparent),
+                0 8px 24px color-mix(in srgb, ${theme.accentColor} 18%, transparent)
+              `,
+              pointerEvents: "auto",
+              backdropFilter: "blur(20px)"
+            },
+            children: /* @__PURE__ */ jsx(
+              ChatPanel,
+              {
+                threadId: ui.threadId,
+                onSelectThread: ui.openThread,
+                onBackToList: ui.openInbox,
+                onClose: ui.close,
+                variant: "dock"
+              }
+            )
+          },
+          "panel"
+        ) : null }),
+        /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            type: "button",
+            onClick: () => open ? ui.close() : ui.openInbox(),
+            "aria-label": label,
+            "aria-expanded": open,
+            whileHover: { scale: 1.05 },
+            whileTap: { scale: 0.94 },
+            transition: { type: "spring", stiffness: 420, damping: 24 },
+            style: {
+              pointerEvents: "auto",
+              width: 58,
+              height: 58,
+              borderRadius: 20,
+              border: "none",
+              padding: 0,
+              background: `
+            radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, #fff 28%, transparent), transparent 55%),
+            linear-gradient(145deg, color-mix(in srgb, ${theme.accentColor} 88%, #fff) 0%, ${theme.accentColor} 55%, color-mix(in srgb, ${theme.accentColor} 78%, #000) 100%)
+          `,
+              color: "var(--color-text-inverse, #fff)",
+              cursor: "pointer",
+              boxShadow: `
+            0 14px 36px color-mix(in srgb, ${theme.accentColor} 42%, transparent),
+            0 2px 0 color-mix(in srgb, #fff 22%, transparent) inset
+          `,
+              position: "relative",
+              display: "grid",
+              placeItems: "center",
+              overflow: "visible"
+            },
+            children: [
+              !open && unread.total > 0 ? /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  initial: { opacity: 0.55, scale: 1 },
+                  animate: { opacity: [0.45, 0.15, 0.45], scale: [1, 1.28, 1] },
+                  transition: { duration: 2.4, repeat: Infinity, ease: "easeInOut" },
+                  style: {
+                    position: "absolute",
+                    inset: -6,
+                    borderRadius: 24,
+                    background: `color-mix(in srgb, ${theme.accentColor} 35%, transparent)`,
+                    zIndex: -1
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: { opacity: 0, rotate: open ? -40 : 40, scale: 0.7 },
+                  animate: { opacity: 1, rotate: 0, scale: 1 },
+                  exit: { opacity: 0, rotate: open ? 40 : -40, scale: 0.7 },
+                  transition: { duration: 0.18 },
+                  style: { display: "grid", placeItems: "center", lineHeight: 0 },
+                  children: open ? /* @__PURE__ */ jsx(CloseIcon, { size: 20 }) : /* @__PURE__ */ jsx(ChatBubbleIcon, { size: 26 })
+                },
+                open ? "close" : "chat"
+              ) }),
+              !open && unread.total > 0 ? /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: { scale: 0 },
+                  animate: { scale: 1 },
+                  style: {
+                    position: "absolute",
+                    top: -3,
+                    [isRtl ? "left" : "right"]: -3,
+                    minWidth: 22,
+                    height: 22,
+                    borderRadius: 11,
+                    padding: "0 6px",
+                    background: theme.colors.surface,
+                    color: theme.colors.text,
+                    fontSize: 11,
+                    fontWeight: 700,
+                    fontFamily: theme.fonts.bodySemiBold,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: `2px solid ${theme.accentColor}`,
+                    boxShadow: `0 4px 12px color-mix(in srgb, ${theme.colors.text} 25%, transparent)`
+                  },
+                  children: unread.total > 99 ? "99+" : unread.total
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ChatDock, ChatPanel, Conversation, ThreadList, WebComposer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map