@mereb/app-messaging 0.0.2 → 0.0.4

package/dist/gql.d.ts

@@ -0,0 +1,3 @@
+export declare const CONVERSATIONS: import("@apollo/client").DocumentNode;
+export declare const MESSAGES: import("@apollo/client").DocumentNode;
+export declare const SEND_MESSAGE: import("@apollo/client").DocumentNode;

package/dist/gql.js

@@ -0,0 +1,50 @@
+import { gql } from '@apollo/client';
+export const CONVERSATIONS = gql `
+    query Conversations {
+        conversations {
+            id
+            title
+            participantIds
+            unreadCount
+            updatedAt
+            lastMessage {
+                id
+                senderName
+                body
+                sentAt
+                conversationId
+            }
+        }
+    }
+`;
+export const MESSAGES = gql `
+    query ConversationMessages($conversationId: ID!, $after: String) {
+        messages(conversationId: $conversationId, after: $after, limit: 50) {
+            edges {
+                cursor
+                node {
+                    id
+                    conversationId
+                    senderName
+                    body
+                    sentAt
+                }
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+            }
+        }
+    }
+`;
+export const SEND_MESSAGE = gql `
+    mutation SendMessage($conversationId: ID, $toUserId: ID, $body: String!) {
+        sendMessage(conversationId: $conversationId, toUserId: $toUserId, body: $body) {
+            id
+            conversationId
+            senderName
+            body
+            sentAt
+        }
+    }
+`;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './store';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './store';

package/dist/native.js

@@ -0,0 +1,35 @@
+import { useMemo, useState } from 'react';
+import { Text, View } from 'react-native';
+import { createInMemoryMessagingStore } from './store';
+export function MessagesScreen() {
+    const store = useMemo(() => createInMemoryMessagingStore(), []);
+    const [version, setVersion] = useState(0);
+    const conversations = store.getConversations();
+    return (<View style={{ flex: 1, padding: 24, gap: 16 }}>
+      <Text style={{ fontWeight: '700', fontSize: 18, marginBottom: 8 }}>Messaging</Text>
+      {conversations.map((conversation) => (<View key={conversation.id} style={{
+                padding: 12,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: '#E2E8F0',
+                backgroundColor: '#FFFFFF',
+                gap: 4
+            }}>
+          <Text style={{ fontWeight: '600', fontSize: 16 }}>{conversation.title}</Text>
+          <Text style={{ color: '#475569' }}>{conversation.lastMessage?.body ?? 'No messages yet'}</Text>
+          <Text style={{ color: '#94A3B8', fontSize: 12 }}>Unread: {conversation.unreadCount}</Text>
+        </View>))}
+      <Text onPress={() => {
+            store.sendMessage(conversations[0]?.id ?? 'conv-1', 'Sent from mobile preview', {
+                id: 'mobile-user',
+                name: 'You'
+            });
+            setVersion((v) => v + 1);
+        }} style={{ color: '#2563EB', fontWeight: '600' }}>
+        Send a quick test message
+      </Text>
+      <Text style={{ color: '#94A3B8', fontSize: 12 }}>
+        Version {version} • This view uses the shared in-memory store so it stays in sync with the web shell preview.
+      </Text>
+    </View>);
+}

package/dist/store.d.ts

@@ -0,0 +1,26 @@
+export type MessagingMessage = {
+    id: string;
+    conversationId: string;
+    senderId: string;
+    senderName?: string;
+    body: string;
+    sentAt: string;
+};
+export type MessagingConversation = {
+    id: string;
+    title: string;
+    participantIds: string[];
+    lastMessage?: MessagingMessage;
+    unreadCount: number;
+    updatedAt: string;
+};
+export type MessagingStore = {
+    getConversations: () => MessagingConversation[];
+    getConversation: (id: string) => MessagingConversation | undefined;
+    getMessages: (conversationId: string) => MessagingMessage[];
+    sendMessage: (conversationId: string, body: string, sender?: {
+        id: string;
+        name?: string;
+    }) => MessagingMessage;
+};
+export declare function createInMemoryMessagingStore(seed?: MessagingConversation[]): MessagingStore;

package/dist/store.js

@@ -0,0 +1,77 @@
+const seedConversations = [
+    {
+        id: 'conv-1',
+        title: 'Platform Ops',
+        participantIds: ['u-platform', 'u-release', 'u-ops'],
+        unreadCount: 2,
+        updatedAt: new Date().toISOString(),
+        lastMessage: {
+            id: 'msg-1',
+            conversationId: 'conv-1',
+            senderId: 'u-release',
+            senderName: 'Release Manager',
+            body: 'Copy that. Will queue prod promotion after smoke.',
+            sentAt: new Date().toISOString()
+        }
+    },
+    {
+        id: 'conv-2',
+        title: 'Support triage',
+        participantIds: ['u-support', 'u-oncall', 'u-platform'],
+        unreadCount: 0,
+        updatedAt: new Date().toISOString(),
+        lastMessage: {
+            id: 'msg-2',
+            conversationId: 'conv-2',
+            senderId: 'u-oncall',
+            senderName: 'On-call',
+            body: 'Acknowledged. Looking at the router dashboards now.',
+            sentAt: new Date().toISOString()
+        }
+    }
+];
+export function createInMemoryMessagingStore(seed = seedConversations) {
+    let conversations = seed.map((conversation) => ({
+        ...conversation,
+        lastMessage: conversation.lastMessage
+            ? { ...conversation.lastMessage, sentAt: conversation.lastMessage.sentAt ?? new Date().toISOString() }
+            : undefined
+    }));
+    const messageLookup = {};
+    conversations.forEach((conversation) => {
+        messageLookup[conversation.id] = conversation.lastMessage ? [conversation.lastMessage] : [];
+    });
+    const refreshConversation = (conversationId, message) => {
+        const idx = conversations.findIndex((c) => c.id === conversationId);
+        if (idx >= 0) {
+            conversations[idx] = {
+                ...conversations[idx],
+                lastMessage: message,
+                updatedAt: message.sentAt,
+                unreadCount: Math.max(0, conversations[idx].unreadCount - 1)
+            };
+        }
+    };
+    return {
+        getConversations: () => [...conversations].sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)),
+        getConversation: (id) => conversations.find((conversation) => conversation.id === id),
+        getMessages: (conversationId) => [...(messageLookup[conversationId] ?? [])],
+        sendMessage: (conversationId, body, sender) => {
+            const conversationExists = conversations.some((conversation) => conversation.id === conversationId);
+            if (!conversationExists) {
+                throw new Error('Conversation not found');
+            }
+            const message = {
+                id: `msg-${Math.random().toString(36).slice(2, 8)}`,
+                conversationId,
+                senderId: sender?.id ?? 'anonymous',
+                senderName: sender?.name ?? 'You',
+                body,
+                sentAt: new Date().toISOString()
+            };
+            messageLookup[conversationId] = [...(messageLookup[conversationId] ?? []), message];
+            refreshConversation(conversationId, message);
+            return message;
+        }
+    };
+}

package/package.json

@@ -1,10 +1,32 @@
 {
   "name": "@mereb/app-messaging",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Messaging experience primitives for Mereb applications",
   "type": "module",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "import": "./dist/store.js",
+      "default": "./dist/store.js"
+    },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "default": "./dist/native.js"
+    },
+    "./gql": {
+      "types": "./dist/gql.d.ts",
+      "import": "./dist/gql.js",
+      "default": "./dist/gql.js"
+    }
+  },
   "files": [
     "src",
     "dist",
@@ -13,10 +35,14 @@
   "peerDependencies": {
     "expo-router": ">=3.0.0",
     "react": ">=18.2.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "@apollo/client": ">=3.0.0",
+    "graphql": ">=16.0.0"
   },
   "devDependencies": {
+    "@apollo/client": "^3.12.5",
     "@types/react": "~18.2.79",
+    "graphql": "^16.11.0",
     "typescript": ">=5.3.3"
   },
   "scripts": {

package/src/gql.ts

@@ -0,0 +1,53 @@
+import {gql} from '@apollo/client'
+
+export const CONVERSATIONS = gql`
+    query Conversations {
+        conversations {
+            id
+            title
+            participantIds
+            unreadCount
+            updatedAt
+            lastMessage {
+                id
+                senderName
+                body
+                sentAt
+                conversationId
+            }
+        }
+    }
+`
+
+export const MESSAGES = gql`
+    query ConversationMessages($conversationId: ID!, $after: String) {
+        messages(conversationId: $conversationId, after: $after, limit: 50) {
+            edges {
+                cursor
+                node {
+                    id
+                    conversationId
+                    senderName
+                    body
+                    sentAt
+                }
+            }
+            pageInfo {
+                endCursor
+                hasNextPage
+            }
+        }
+    }
+`
+
+export const SEND_MESSAGE = gql`
+    mutation SendMessage($conversationId: ID, $toUserId: ID, $body: String!) {
+        sendMessage(conversationId: $conversationId, toUserId: $toUserId, body: $body) {
+            id
+            conversationId
+            senderName
+            body
+            sentAt
+        }
+    }
+`

package/src/index.tsx

@@ -1,9 +1 @@
-import { Text, View } from 'react-native';
-
-export function MessagesScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Messages coming soon</Text>
-    </View>
-  );
-}
+export * from './store'

package/src/native.tsx

@@ -0,0 +1,47 @@
+import { useMemo, useState } from 'react'
+import { Text, View } from 'react-native'
+import { createInMemoryMessagingStore } from './store'
+
+export function MessagesScreen() {
+  const store = useMemo(() => createInMemoryMessagingStore(), [])
+  const [version, setVersion] = useState(0)
+  const conversations = store.getConversations()
+
+  return (
+    <View style={{ flex: 1, padding: 24, gap: 16 }}>
+      <Text style={{ fontWeight: '700', fontSize: 18, marginBottom: 8 }}>Messaging</Text>
+      {conversations.map((conversation) => (
+        <View
+          key={conversation.id}
+          style={{
+            padding: 12,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: '#E2E8F0',
+            backgroundColor: '#FFFFFF',
+            gap: 4
+          }}
+        >
+          <Text style={{ fontWeight: '600', fontSize: 16 }}>{conversation.title}</Text>
+          <Text style={{ color: '#475569' }}>{conversation.lastMessage?.body ?? 'No messages yet'}</Text>
+          <Text style={{ color: '#94A3B8', fontSize: 12 }}>Unread: {conversation.unreadCount}</Text>
+        </View>
+      ))}
+      <Text
+        onPress={() => {
+          store.sendMessage(conversations[0]?.id ?? 'conv-1', 'Sent from mobile preview', {
+            id: 'mobile-user',
+            name: 'You'
+          })
+          setVersion((v) => v + 1)
+        }}
+        style={{ color: '#2563EB', fontWeight: '600' }}
+      >
+        Send a quick test message
+      </Text>
+      <Text style={{ color: '#94A3B8', fontSize: 12 }}>
+        Version {version} • This view uses the shared in-memory store so it stays in sync with the web shell preview.
+      </Text>
+    </View>
+  )
+}

package/src/store.ts

@@ -0,0 +1,111 @@
+export type MessagingMessage = {
+  id: string
+  conversationId: string
+  senderId: string
+  senderName?: string
+  body: string
+  sentAt: string
+}
+
+export type MessagingConversation = {
+  id: string
+  title: string
+  participantIds: string[]
+  lastMessage?: MessagingMessage
+  unreadCount: number
+  updatedAt: string
+}
+
+export type MessagingStore = {
+  getConversations: () => MessagingConversation[]
+  getConversation: (id: string) => MessagingConversation | undefined
+  getMessages: (conversationId: string) => MessagingMessage[]
+  sendMessage: (
+    conversationId: string,
+    body: string,
+    sender?: { id: string; name?: string }
+  ) => MessagingMessage
+}
+
+const seedConversations: MessagingConversation[] = [
+  {
+    id: 'conv-1',
+    title: 'Platform Ops',
+    participantIds: ['u-platform', 'u-release', 'u-ops'],
+    unreadCount: 2,
+    updatedAt: new Date().toISOString(),
+    lastMessage: {
+      id: 'msg-1',
+      conversationId: 'conv-1',
+      senderId: 'u-release',
+      senderName: 'Release Manager',
+      body: 'Copy that. Will queue prod promotion after smoke.',
+      sentAt: new Date().toISOString()
+    }
+  },
+  {
+    id: 'conv-2',
+    title: 'Support triage',
+    participantIds: ['u-support', 'u-oncall', 'u-platform'],
+    unreadCount: 0,
+    updatedAt: new Date().toISOString(),
+    lastMessage: {
+      id: 'msg-2',
+      conversationId: 'conv-2',
+      senderId: 'u-oncall',
+      senderName: 'On-call',
+      body: 'Acknowledged. Looking at the router dashboards now.',
+      sentAt: new Date().toISOString()
+    }
+  }
+]
+
+export function createInMemoryMessagingStore(seed: MessagingConversation[] = seedConversations): MessagingStore {
+  let conversations: MessagingConversation[] = seed.map((conversation) => ({
+    ...conversation,
+    lastMessage: conversation.lastMessage
+      ? { ...conversation.lastMessage, sentAt: conversation.lastMessage.sentAt ?? new Date().toISOString() }
+      : undefined
+  }))
+  const messageLookup: Record<string, MessagingMessage[]> = {}
+
+  conversations.forEach((conversation) => {
+      messageLookup[conversation.id] = conversation.lastMessage ? [conversation.lastMessage] : []
+  })
+
+  const refreshConversation = (conversationId: string, message: MessagingMessage) => {
+    const idx = conversations.findIndex((c) => c.id === conversationId)
+    if (idx >= 0) {
+      conversations[idx] = {
+        ...conversations[idx],
+        lastMessage: message,
+        updatedAt: message.sentAt,
+        unreadCount: Math.max(0, conversations[idx].unreadCount - 1)
+      }
+    }
+  }
+
+  return {
+    getConversations: () => [...conversations].sort((a, b) => (a.updatedAt > b.updatedAt ? -1 : 1)),
+    getConversation: (id: string) => conversations.find((conversation) => conversation.id === id),
+    getMessages: (conversationId: string) => [...(messageLookup[conversationId] ?? [])],
+    sendMessage: (conversationId: string, body: string, sender?: { id: string; name?: string }) => {
+      const conversationExists = conversations.some((conversation) => conversation.id === conversationId)
+      if (!conversationExists) {
+        throw new Error('Conversation not found')
+      }
+      const message: MessagingMessage = {
+        id: `msg-${Math.random().toString(36).slice(2, 8)}`,
+        conversationId,
+        senderId: sender?.id ?? 'anonymous',
+        senderName: sender?.name ?? 'You',
+        body,
+        sentAt: new Date().toISOString()
+      }
+
+      messageLookup[conversationId] = [...(messageLookup[conversationId] ?? []), message]
+      refreshConversation(conversationId, message)
+      return message
+    }
+  }
+}