@samirify/messenger 0.1.0

package/dist/native/index.js

@@ -0,0 +1,644 @@
+import { View, TouchableOpacity, Text, ScrollView, ActivityIndicator, RefreshControl, Image, TextInput, Platform, KeyboardAvoidingView, FlatList } from 'react-native';
+import { createContext, useState, useRef, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+
+// src/native/InboxScreen.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;
+}
+
+// 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 });
+}
+
+// src/queryKeys.ts
+var messengerKeys = {
+  all: ["messenger"],
+  threads: () => [...messengerKeys.all, "threads"],
+  thread: (id) => [...messengerKeys.all, "thread", id]
+};
+
+// src/hooks/useThreads.ts
+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);
+    }
+  });
+}
+
+// src/i18nKeys.ts
+var MessengerI18n = {
+  off: {
+    key: "mobile.messenger.off",
+    fallback: "Messaging is not enabled for this account."
+  },
+  inbox: { key: "mobile.messenger.inbox", fallback: "Chat" },
+  chat: { key: "mobile.messenger.chat", fallback: "Chat" },
+  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 FeatureOff() {
+  const { t, theme, navigation, onFeatureOff } = useMessengerConfig();
+  if (onFeatureOff) return /* @__PURE__ */ jsx(Fragment, { children: onFeatureOff() });
+  const { colors, accentColor } = theme;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flex: 1,
+        backgroundColor: colors.background,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: { color: colors.textMuted, textAlign: "center" }, children: t(MessengerI18n.off.key, MessengerI18n.off.fallback) }),
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: navigation.goBack, style: { marginTop: 16 }, children: /* @__PURE__ */ jsx(Text, { style: { color: accentColor }, children: t(MessengerI18n.back.key, MessengerI18n.back.fallback) }) })
+      ]
+    }
+  );
+}
+function ThreadRow({ thread }) {
+  const { user, t, isRtl, theme, navigation } = useMessengerConfig();
+  const { colors, accentColor, fonts } = theme;
+  const unread = Number(thread.unread_count ?? 0);
+  return /* @__PURE__ */ jsx(
+    TouchableOpacity,
+    {
+      onPress: () => navigation.openThread(thread.id),
+      activeOpacity: 0.8,
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            marginBottom: 10,
+            padding: 14,
+            borderRadius: 14,
+            backgroundColor: colors.surface,
+            borderWidth: 1,
+            borderColor: colors.border
+          },
+          children: /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: {
+                flexDirection: isRtl ? "row-reverse" : "row",
+                alignItems: "center",
+                gap: 12
+              },
+              children: [
+                /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: {
+                        color: colors.text,
+                        fontFamily: fonts.displaySemiBold,
+                        fontWeight: "600",
+                        fontSize: 16
+                      },
+                      children: user?.role === "admin" ? thread.client_name ?? t(MessengerI18n.client.key, MessengerI18n.client.fallback) : t(
+                        MessengerI18n.yourCoach.key,
+                        MessengerI18n.yourCoach.fallback
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: {
+                        color: colors.textSecondary,
+                        fontFamily: fonts.body,
+                        fontSize: 13,
+                        marginTop: 4
+                      },
+                      numberOfLines: 1,
+                      children: thread.last_body || (thread.last_image_url ? t(MessengerI18n.photo.key, MessengerI18n.photo.fallback) : t(
+                        MessengerI18n.noMessages.key,
+                        MessengerI18n.noMessages.fallback
+                      ))
+                    }
+                  )
+                ] }),
+                unread > 0 && /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: {
+                      minWidth: 22,
+                      height: 22,
+                      borderRadius: 11,
+                      backgroundColor: accentColor,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      paddingHorizontal: 6
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: {
+                          color: "#FFF",
+                          fontSize: 11,
+                          fontFamily: fonts.bodySemiBold,
+                          fontWeight: "600"
+                        },
+                        children: unread
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function InboxScreen() {
+  const { enabled, user, t, isRtl, theme, navigation } = useMessengerConfig();
+  const { colors, accentColor, fonts } = theme;
+  const threadsQuery = useThreads();
+  const openThread2 = useOpenThread();
+  if (!enabled) return /* @__PURE__ */ jsx(FeatureOff, {});
+  const threads = threadsQuery.data ?? [];
+  const loading = threadsQuery.isLoading && threads.length === 0;
+  return /* @__PURE__ */ jsxs(View, { style: { flex: 1, backgroundColor: colors.background }, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: {
+          paddingTop: 56,
+          paddingHorizontal: 16,
+          paddingBottom: 12,
+          flexDirection: isRtl ? "row-reverse" : "row",
+          alignItems: "center",
+          gap: 12
+        },
+        children: [
+          /* @__PURE__ */ jsx(TouchableOpacity, { onPress: navigation.goBack, hitSlop: 12, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 22, color: colors.text }, children: isRtl ? "\u2192" : "\u2190" }) }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: {
+                color: colors.text,
+                fontSize: 22,
+                fontFamily: fonts.displayBold,
+                fontWeight: "700",
+                flex: 1
+              },
+              children: t(MessengerI18n.inbox.key, MessengerI18n.inbox.fallback)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        contentContainerStyle: { paddingHorizontal: 16, paddingBottom: 32 },
+        refreshControl: /* @__PURE__ */ jsx(
+          RefreshControl,
+          {
+            refreshing: threadsQuery.isRefetching,
+            onRefresh: () => void threadsQuery.refetch(),
+            tintColor: accentColor
+          }
+        ),
+        children: [
+          user?.role === "client" && threads.length === 0 && /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => openThread2.mutate(void 0),
+              disabled: openThread2.isPending,
+              style: {
+                marginBottom: 14,
+                paddingVertical: 14,
+                borderRadius: 12,
+                backgroundColor: accentColor,
+                alignItems: "center"
+              },
+              children: openThread2.isPending ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#FFF" }) : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    color: "#FFF",
+                    fontFamily: fonts.bodySemiBold,
+                    fontWeight: "600"
+                  },
+                  children: t(
+                    MessengerI18n.messageCoach.key,
+                    MessengerI18n.messageCoach.fallback
+                  )
+                }
+              )
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: accentColor, style: { marginTop: 40 } }) : threads.length === 0 ? /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: {
+                alignItems: "center",
+                paddingVertical: 40,
+                borderRadius: 14,
+                backgroundColor: colors.surface,
+                borderWidth: 1,
+                borderColor: colors.border
+              },
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 28, color: colors.textMuted }, children: "\xB7\xB7\xB7" }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: {
+                      color: colors.textMuted,
+                      marginTop: 12,
+                      fontFamily: fonts.body,
+                      textAlign: "center"
+                    },
+                    children: t(MessengerI18n.empty.key, MessengerI18n.empty.fallback)
+                  }
+                )
+              ]
+            }
+          ) : threads.map((th) => /* @__PURE__ */ jsx(ThreadRow, { thread: th }, 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 MessageBubble({ message }) {
+  const { user, isRtl, theme } = useMessengerConfig();
+  const { colors, accentColor, fonts } = theme;
+  const mine = message.sender_user_id === user?.id;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        alignSelf: mine ? isRtl ? "flex-start" : "flex-end" : isRtl ? "flex-end" : "flex-start",
+        maxWidth: "80%",
+        marginBottom: 10,
+        backgroundColor: mine ? accentColor : colors.surfaceSecondary,
+        borderRadius: 16,
+        paddingHorizontal: 12,
+        paddingVertical: 10
+      },
+      children: [
+        message.image_url ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            source: { uri: message.image_url },
+            style: {
+              width: 180,
+              height: 180,
+              borderRadius: 10,
+              marginBottom: message.body ? 8 : 0
+            }
+          }
+        ) : null,
+        message.body ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: mine ? "#FFF" : colors.text,
+              fontFamily: fonts.body,
+              fontSize: 15
+            },
+            children: message.body
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Composer({
+  sending,
+  onSend
+}) {
+  const { t, isRtl, theme, pickImage } = useMessengerConfig();
+  const { colors, accentColor, fonts } = theme;
+  const [body, setBody] = useState("");
+  async function onPick() {
+    const image = await pickImage();
+    if (image) {
+      await onSend(body, image);
+      setBody("");
+    }
+  }
+  async function onPressSend() {
+    if (!body.trim() || sending) return;
+    const text = body;
+    await onSend(text, null);
+    setBody("");
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: {
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "flex-end",
+        gap: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderTopWidth: 1,
+        borderTopColor: colors.border,
+        paddingBottom: Platform.OS === "ios" ? 28 : 12
+      },
+      children: [
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onPick, hitSlop: 8, disabled: sending, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 22, color: accentColor }, children: "\u25A3" }) }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: body,
+            onChangeText: setBody,
+            placeholder: t(
+              MessengerI18n.typeMessage.key,
+              MessengerI18n.typeMessage.fallback
+            ),
+            placeholderTextColor: colors.textMuted,
+            multiline: true,
+            style: {
+              flex: 1,
+              maxHeight: 100,
+              borderWidth: 1,
+              borderColor: colors.border,
+              borderRadius: 16,
+              paddingHorizontal: 14,
+              paddingVertical: 10,
+              color: colors.text,
+              fontFamily: fonts.body,
+              textAlign: isRtl ? "right" : "left",
+              backgroundColor: colors.surface
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            onPress: onPressSend,
+            disabled: sending || !body.trim(),
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              backgroundColor: body.trim() ? accentColor : colors.surfaceSecondary,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: sending ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#FFF", size: "small" }) : /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: body.trim() ? "#FFF" : colors.textMuted,
+                  fontSize: 16,
+                  fontWeight: "700"
+                },
+                children: "\u27A4"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FeatureOff2() {
+  const { t, theme, onFeatureOff } = useMessengerConfig();
+  if (onFeatureOff) return /* @__PURE__ */ jsx(Fragment, { children: onFeatureOff() });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.textMuted }, children: t(MessengerI18n.off.key, MessengerI18n.off.fallback) })
+    }
+  );
+}
+function ThreadScreen({ threadId }) {
+  const { enabled, t, isRtl, theme, navigation } = useMessengerConfig();
+  const { colors, accentColor, fonts } = theme;
+  const listRef = useRef(null);
+  const threadQuery = useThread(threadId);
+  const sendMutation = useSendMessage(threadId);
+  if (!enabled) return /* @__PURE__ */ jsx(FeatureOff2, {});
+  const messages = threadQuery.data?.messages ?? [];
+  const loading = threadQuery.isLoading && messages.length === 0;
+  async function handleSend(body, image) {
+    if (!body.trim() && !image || sendMutation.isPending) return;
+    await sendMutation.mutateAsync({ body, image });
+    setTimeout(() => listRef.current?.scrollToEnd({ animated: true }), 100);
+  }
+  return /* @__PURE__ */ jsxs(
+    KeyboardAvoidingView,
+    {
+      style: { flex: 1, backgroundColor: colors.background },
+      behavior: Platform.OS === "ios" ? "padding" : void 0,
+      keyboardVerticalOffset: 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: {
+              paddingTop: 56,
+              paddingHorizontal: 16,
+              paddingBottom: 12,
+              flexDirection: isRtl ? "row-reverse" : "row",
+              alignItems: "center",
+              gap: 12,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.border
+            },
+            children: [
+              /* @__PURE__ */ jsx(TouchableOpacity, { onPress: navigation.goBack, hitSlop: 12, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 22, color: colors.text }, children: isRtl ? "\u2192" : "\u2190" }) }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    color: colors.text,
+                    fontSize: 18,
+                    fontFamily: fonts.displayBold,
+                    fontWeight: "700",
+                    flex: 1
+                  },
+                  children: t(MessengerI18n.chat.key, MessengerI18n.chat.fallback)
+                }
+              )
+            ]
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: accentColor, style: { marginTop: 40 } }) : /* @__PURE__ */ jsx(
+          FlatList,
+          {
+            ref: listRef,
+            data: messages,
+            keyExtractor: (m) => String(m.id),
+            contentContainerStyle: { padding: 16, paddingBottom: 8 },
+            onContentSizeChange: () => listRef.current?.scrollToEnd({ animated: false }),
+            ListEmptyComponent: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: colors.textMuted,
+                  textAlign: "center",
+                  marginTop: 40,
+                  fontFamily: fonts.body
+                },
+                children: t(
+                  MessengerI18n.startConversation.key,
+                  MessengerI18n.startConversation.fallback
+                )
+              }
+            ),
+            renderItem: ({ item }) => /* @__PURE__ */ jsx(MessageBubble, { message: item })
+          }
+        ),
+        /* @__PURE__ */ jsx(Composer, { sending: sendMutation.isPending, onSend: handleSend })
+      ]
+    }
+  );
+}
+
+export { Composer, InboxScreen, MessageBubble, ThreadScreen };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map