@mereb/app-messaging 0.0.5 → 0.0.7

package/dist/gql.d.ts

@@ -1 +1 @@
-export { ConversationsDocument as CONVERSATIONS, MessagesDocument as MESSAGES, SendMessageDocument as SEND_MESSAGE } from './headless.js';
+export { ConversationsDocument as CONVERSATIONS, MessagesDocument as MESSAGES, SendMessageDocument as SEND_MESSAGE } from './headless';

package/dist/gql.js

@@ -1 +1 @@
-export { ConversationsDocument as CONVERSATIONS, MessagesDocument as MESSAGES, SendMessageDocument as SEND_MESSAGE } from './headless.js';
+export { ConversationsDocument as CONVERSATIONS, MessagesDocument as MESSAGES, SendMessageDocument as SEND_MESSAGE } from './headless';

package/dist/headless.d.ts

@@ -14,6 +14,18 @@ export type MessagingConversation = {
     unreadCount: number;
     updatedAt: string;
 };
+export type MessagingPerson = {
+    id: string;
+    handle: string;
+    displayName: string;
+    avatarUrl?: string | null;
+};
+export type MessagingViewer = Pick<MessagingPerson, 'id' | 'handle' | 'displayName'>;
+export type SharedPostMessage = {
+    path: string;
+    postId?: string;
+    url: string;
+};
 export type MessagingMessagesConnection = {
     edges: Array<{
         cursor: string;
@@ -33,6 +45,46 @@ export type ConversationMessagesQueryResult = {
 export type SendMessageMutationResult = {
     sendMessage: MessagingMessage;
 };
-export declare const ConversationsDocument: import("@apollo/client").DocumentNode;
-export declare const MessagesDocument: import("@apollo/client").DocumentNode;
-export declare const SendMessageDocument: import("@apollo/client").DocumentNode;
+export type MessagingViewerQueryResult = {
+    me?: MessagingViewer | null;
+};
+export type MessagingConversationParticipantsQueryResult = {
+    usersByIds?: MessagingPerson[] | null;
+};
+export type MessagingSearchUser = {
+    id: string;
+    handle: string;
+    displayName: string;
+    bio?: string | null;
+    avatarUrl?: string | null;
+    followersCount: number;
+    followingCount: number;
+};
+export type MessagingSearchUsersConnectionQueryResult = {
+    searchUsersConnection: {
+        edges: Array<{
+            cursor: string;
+            node: MessagingSearchUser;
+        }>;
+        pageInfo: {
+            endCursor?: string | null;
+            hasNextPage: boolean;
+        };
+    };
+};
+export declare const ConversationsDocument: import("graphql").DocumentNode;
+export declare const MessagesDocument: import("graphql").DocumentNode;
+export declare const SendMessageDocument: import("graphql").DocumentNode;
+export declare const MessagingViewerDocument: import("graphql").DocumentNode;
+export declare const MessagingConversationParticipantsDocument: import("graphql").DocumentNode;
+export declare const MessagingSearchUsersConnectionDocument: import("graphql").DocumentNode;
+export declare function parseMessagingTimestamp(value?: string | null): Date | null;
+export declare function formatMessagingTimestamp(value?: string | null, now?: number): string;
+export declare function parseSharedPostMessageBody(body?: string | null): SharedPostMessage | null;
+export declare function summarizeMessagingBody(body?: string | null): string;
+export declare function mergeMessagingPeople(...groups: Array<ReadonlyArray<MessagingPerson | MessagingViewer | null | undefined>>): MessagingPerson[];
+export declare function buildPeopleDirectory(people: ReadonlyArray<MessagingPerson>): Map<string, MessagingPerson>;
+export declare function resolveConversationParticipant(conversation: Pick<MessagingConversation, 'participantIds'>, viewerId?: string, peopleById?: ReadonlyMap<string, MessagingPerson>): MessagingPerson | null;
+export declare function deriveConversationTitle(conversation: Pick<MessagingConversation, 'title' | 'participantIds' | 'lastMessage'>, viewerId?: string, peopleById?: ReadonlyMap<string, MessagingPerson>): string;
+export declare function deriveMessageSenderName(message: Pick<MessagingMessage, 'senderId' | 'senderName'>, viewerId?: string, peopleById?: ReadonlyMap<string, MessagingPerson>): string;
+export declare function filterMessagingConversations(conversations: ReadonlyArray<MessagingConversation>, query: string, viewerId?: string, peopleById?: ReadonlyMap<string, MessagingPerson>): MessagingConversation[];

package/dist/headless.js

@@ -51,3 +51,237 @@ export const SendMessageDocument = gql `
     }
   }
 `;
+export const MessagingViewerDocument = gql `
+  query MessagingViewer {
+    me {
+      id
+      handle
+      displayName
+    }
+  }
+`;
+export const MessagingConversationParticipantsDocument = gql `
+  query MessagingConversationParticipants($ids: [ID!]!) {
+    usersByIds(ids: $ids) {
+      id
+      handle
+      displayName
+      avatarUrl
+    }
+  }
+`;
+export const MessagingSearchUsersConnectionDocument = gql `
+  query MessagingSearchUsersConnection($query: String!, $after: String, $limit: Int = 20) {
+    searchUsersConnection(query: $query, after: $after, limit: $limit) {
+      edges {
+        cursor
+        node {
+          id
+          handle
+          displayName
+          bio
+          avatarUrl
+          followersCount
+          followingCount
+        }
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+    }
+  }
+`;
+const MINUTE = 60 * 1000;
+const DAY = 24 * 60 * MINUTE;
+const SHARED_POST_PREFIX = 'shared a post:';
+function isGenericDirectMessageTitle(value) {
+    const normalized = value?.trim().toLowerCase() ?? '';
+    return !normalized || normalized === 'direct message' || normalized === 'conversation';
+}
+function inferMessagingPersonFromIdentifier(identifier) {
+    const value = identifier?.trim();
+    if (!value) {
+        return null;
+    }
+    return {
+        id: value,
+        handle: value.replace(/^@/, ''),
+        displayName: value.replace(/^@/, '')
+    };
+}
+function shouldReplacePerson(current, next) {
+    if (!current.displayName && next.displayName) {
+        return true;
+    }
+    if (!current.avatarUrl && next.avatarUrl) {
+        return true;
+    }
+    if (current.handle === current.id && next.handle !== next.id) {
+        return true;
+    }
+    return false;
+}
+export function parseMessagingTimestamp(value) {
+    if (!value) {
+        return null;
+    }
+    const numeric = Number(value);
+    if (!Number.isNaN(numeric) && numeric > 0) {
+        const numericDate = new Date(numeric);
+        return Number.isNaN(numericDate.getTime()) ? null : numericDate;
+    }
+    const parsed = new Date(value);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+export function formatMessagingTimestamp(value, now = Date.now()) {
+    const parsed = parseMessagingTimestamp(value);
+    if (!parsed) {
+        return 'Recently';
+    }
+    const diff = Math.abs(now - parsed.getTime());
+    if (diff < DAY) {
+        return parsed.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    }
+    return parsed.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+export function parseSharedPostMessageBody(body) {
+    const trimmed = body?.trim();
+    if (!trimmed || !trimmed.toLowerCase().startsWith(SHARED_POST_PREFIX)) {
+        return null;
+    }
+    const rawUrl = trimmed.slice(SHARED_POST_PREFIX.length).trim();
+    if (!rawUrl) {
+        return null;
+    }
+    try {
+        const parsedUrl = new URL(rawUrl, 'https://mereb.local');
+        const path = `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`;
+        const postMatches = Array.from(parsedUrl.pathname.matchAll(/\/post\/([^/?#]+)/g));
+        const postMatch = postMatches.length > 0 ? postMatches[postMatches.length - 1] : undefined;
+        return {
+            url: parsedUrl.origin === 'https://mereb.local' ? rawUrl : parsedUrl.toString(),
+            path,
+            postId: postMatch?.[1]
+        };
+    }
+    catch {
+        return null;
+    }
+}
+export function summarizeMessagingBody(body) {
+    if (!body?.trim()) {
+        return 'No messages yet';
+    }
+    return parseSharedPostMessageBody(body) ? 'Shared a post' : body;
+}
+export function mergeMessagingPeople(...groups) {
+    const byId = new Map();
+    const byHandle = new Map();
+    for (const group of groups) {
+        for (const person of group) {
+            if (!person?.id) {
+                continue;
+            }
+            const candidate = {
+                id: person.id,
+                handle: person.handle,
+                displayName: person.displayName,
+                avatarUrl: 'avatarUrl' in person ? (person.avatarUrl ?? null) : null
+            };
+            const currentById = byId.get(candidate.id);
+            if (!currentById || shouldReplacePerson(currentById, candidate)) {
+                byId.set(candidate.id, candidate);
+            }
+            const handleKey = candidate.handle.toLowerCase();
+            const currentByHandle = byHandle.get(handleKey);
+            if (!currentByHandle || shouldReplacePerson(currentByHandle, candidate)) {
+                byHandle.set(handleKey, candidate);
+            }
+        }
+    }
+    const merged = new Map();
+    for (const person of [...byHandle.values(), ...byId.values()]) {
+        merged.set(person.id, person);
+    }
+    return Array.from(merged.values());
+}
+export function buildPeopleDirectory(people) {
+    return new Map(people.map((person) => [person.id, person]));
+}
+export function resolveConversationParticipant(conversation, viewerId, peopleById = new Map()) {
+    const participantIds = Array.from(new Set(conversation.participantIds ?? []));
+    const otherParticipantIds = viewerId ? participantIds.filter((participantId) => participantId !== viewerId) : participantIds;
+    for (const participantId of otherParticipantIds) {
+        const resolved = peopleById.get(participantId) ?? inferMessagingPersonFromIdentifier(participantId);
+        if (resolved) {
+            return resolved;
+        }
+    }
+    return null;
+}
+export function deriveConversationTitle(conversation, viewerId, peopleById = new Map()) {
+    const title = conversation.title?.trim();
+    if (title && !isGenericDirectMessageTitle(title)) {
+        return title;
+    }
+    const participantIds = Array.from(new Set(conversation.participantIds ?? []));
+    const otherParticipantIds = viewerId ? participantIds.filter((participantId) => participantId !== viewerId) : participantIds;
+    const participants = otherParticipantIds
+        .map((participantId) => peopleById.get(participantId) ?? inferMessagingPersonFromIdentifier(participantId))
+        .filter((person) => Boolean(person));
+    if (participants.length === 1) {
+        return participants[0].displayName;
+    }
+    if (participants.length > 1) {
+        return participants.map((person) => person.displayName).join(', ');
+    }
+    const senderName = conversation.lastMessage?.senderName?.trim();
+    if (senderName && senderName.toLowerCase() !== 'you') {
+        return senderName;
+    }
+    if (otherParticipantIds.length === 1) {
+        return otherParticipantIds[0];
+    }
+    return 'Direct message';
+}
+export function deriveMessageSenderName(message, viewerId, peopleById = new Map()) {
+    if (viewerId && message.senderId === viewerId) {
+        return 'You';
+    }
+    const resolved = peopleById.get(message.senderId);
+    if (resolved?.displayName) {
+        return resolved.displayName;
+    }
+    const senderName = message.senderName?.trim();
+    if (senderName) {
+        return senderName;
+    }
+    return message.senderId || 'User';
+}
+export function filterMessagingConversations(conversations, query, viewerId, peopleById = new Map()) {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return Array.from(conversations);
+    }
+    return conversations.filter((conversation) => {
+        const title = deriveConversationTitle(conversation, viewerId, peopleById).toLowerCase();
+        if (title.includes(normalizedQuery)) {
+            return true;
+        }
+        const preview = summarizeMessagingBody(conversation.lastMessage?.body).toLowerCase();
+        if (preview.includes(normalizedQuery)) {
+            return true;
+        }
+        const participantIds = Array.from(new Set(conversation.participantIds ?? []));
+        const otherParticipantIds = viewerId ? participantIds.filter((participantId) => participantId !== viewerId) : participantIds;
+        return otherParticipantIds.some((participantId) => {
+            const participant = peopleById.get(participantId) ?? inferMessagingPersonFromIdentifier(participantId);
+            if (!participant) {
+                return false;
+            }
+            return (participant.displayName.toLowerCase().includes(normalizedQuery) ||
+                participant.handle.toLowerCase().includes(normalizedQuery));
+        });
+    });
+}

package/dist/native.d.ts

@@ -1 +1,31 @@
-export declare function MessagesScreen(): import("react/jsx-runtime.js").JSX.Element;
+type MessagesScreenProps = {
+    auth?: {
+        token?: string;
+        login?: () => Promise<void>;
+    };
+    onSelectConversation?: (conversationId: string) => void;
+    onCompose?: () => void;
+};
+type ConversationScreenProps = {
+    auth?: {
+        token?: string;
+        login?: () => Promise<void>;
+    };
+    conversationId: string;
+};
+type ComposeMessageScreenProps = {
+    auth?: {
+        token?: string;
+        login?: () => Promise<void>;
+    };
+    onCreatedConversation?: (conversationId: string) => void;
+    initialUser?: {
+        id: string;
+        handle: string;
+        displayName: string;
+    } | null;
+};
+export declare function MessagesScreen({ auth, onSelectConversation, onCompose }: Readonly<MessagesScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ConversationScreen({ auth, conversationId }: Readonly<ConversationScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ComposeMessageScreen({ auth, onCreatedConversation, initialUser }: Readonly<ComposeMessageScreenProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/native.js

@@ -1,23 +1,362 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from '@apollo/client/react';
 import { useMemo, useState } from 'react';
-import { Text, View } from 'react-native';
-import { createInMemoryMessagingStore } from './store.js';
-export function MessagesScreen() {
-    const store = useMemo(() => createInMemoryMessagingStore(), []);
-    const [version, setVersion] = useState(0);
-    const conversations = store.getConversations();
-    return (_jsxs(View, { style: { flex: 1, padding: 24, gap: 16 }, children: [_jsx(Text, { style: { fontWeight: '700', fontSize: 18, marginBottom: 8 }, children: "Messaging" }), conversations.map((conversation) => (_jsxs(View, { style: {
-                    padding: 12,
-                    borderRadius: 12,
-                    borderWidth: 1,
-                    borderColor: '#E2E8F0',
-                    backgroundColor: '#FFFFFF',
-                    gap: 4
-                }, children: [_jsx(Text, { style: { fontWeight: '600', fontSize: 16 }, children: conversation.title }), _jsx(Text, { style: { color: '#475569' }, children: conversation.lastMessage?.body ?? 'No messages yet' }), _jsxs(Text, { style: { color: '#94A3B8', fontSize: 12 }, children: ["Unread: ", conversation.unreadCount] })] }, conversation.id))), _jsx(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' }, children: "Send a quick test message" }), _jsxs(Text, { style: { color: '#94A3B8', fontSize: 12 }, children: ["Version ", version, " \u2022 This preview uses the package's local in-memory store. Web now uses the real messaging service."] })] }));
+import { ActivityIndicator, FlatList, Pressable, RefreshControl, StyleSheet, Text, TextInput, View } from 'react-native';
+import { tokens } from '@mereb/tokens/native';
+import { buildPeopleDirectory, ConversationsDocument, deriveConversationTitle, deriveMessageSenderName, filterMessagingConversations, formatMessagingTimestamp, MessagingConversationParticipantsDocument, MessagingSearchUsersConnectionDocument, MessagingViewerDocument, MessagesDocument, SendMessageDocument, summarizeMessagingBody } from './headless';
+function describeClientError(error, fallback) {
+    const message = error instanceof Error ? error.message.trim() : typeof error === 'string' ? error.trim() : '';
+    if (!message || message === 'Subgraph errors redacted') {
+        return fallback;
+    }
+    return __DEV__ ? `${fallback} (${message})` : fallback;
 }
+function collectParticipantIds(participantGroups) {
+    const ids = new Set();
+    for (const group of participantGroups) {
+        for (const participantId of group) {
+            if (participantId) {
+                ids.add(participantId);
+            }
+        }
+    }
+    return Array.from(ids);
+}
+function EmptyState({ title, body }) {
+    return (_jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: title }), _jsx(Text, { style: styles.emptyBody, children: body })] }));
+}
+export function MessagesScreen({ auth, onSelectConversation, onCompose }) {
+    const [query, setQuery] = useState('');
+    const [refreshError, setRefreshError] = useState();
+    const token = auth?.token;
+    const conversationsQuery = useQuery(ConversationsDocument, {
+        notifyOnNetworkStatusChange: true,
+        skip: !token
+    });
+    const viewerQuery = useQuery(MessagingViewerDocument, {
+        skip: !token
+    });
+    const participantIds = useMemo(() => collectParticipantIds((conversationsQuery.data?.conversations ?? []).map((conversation) => conversation.participantIds ?? [])), [conversationsQuery.data?.conversations]);
+    const participantsQuery = useQuery(MessagingConversationParticipantsDocument, {
+        variables: { ids: participantIds },
+        skip: !token || participantIds.length === 0
+    });
+    const peopleById = useMemo(() => buildPeopleDirectory(participantsQuery.data?.usersByIds ?? []), [participantsQuery.data?.usersByIds]);
+    const viewerId = viewerQuery.data?.me?.id;
+    const conversations = useMemo(() => filterMessagingConversations(conversationsQuery.data?.conversations ?? [], query, viewerId, peopleById), [conversationsQuery.data?.conversations, peopleById, query, viewerId]);
+    const handleRefresh = async () => {
+        if (!token) {
+            await auth?.login?.();
+            return;
+        }
+        try {
+            await conversationsQuery.refetch();
+            setRefreshError(undefined);
+        }
+        catch (error) {
+            setRefreshError(describeClientError(error, 'We could not refresh conversations right now.'));
+        }
+    };
+    if (!token) {
+        return _jsx(EmptyState, { title: "Sign in to continue", body: "Log in to load your conversations and start new chats." });
+    }
+    if (conversationsQuery.error) {
+        return (_jsx(EmptyState, { title: "Failed to load messages", body: describeClientError(conversationsQuery.error, 'The messaging service did not return conversations.') }));
+    }
+    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.headerRow, children: [_jsxs(View, { style: styles.headerCopy, children: [_jsx(Text, { style: styles.screenTitle, children: "Messages" }), _jsx(Text, { style: styles.screenSubtitle, children: "Conversations are now backed by the shared messaging service." })] }), _jsx(Pressable, { accessibilityRole: "button", onPress: onCompose, style: styles.inlineButton, children: _jsx(Text, { style: styles.inlineButtonText, children: "New chat" }) })] }), _jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search conversations", style: styles.searchInput }), refreshError ? _jsx(Text, { style: styles.errorText, children: refreshError }) : null, _jsx(FlatList, { data: conversations, keyExtractor: (item) => item.id, refreshControl: _jsx(RefreshControl, { refreshing: conversationsQuery.loading, onRefresh: () => void handleRefresh() }), contentContainerStyle: styles.listContent, renderItem: ({ item }) => {
+                    const title = deriveConversationTitle(item, viewerId, peopleById);
+                    return (_jsxs(Pressable, { accessibilityRole: "button", style: styles.card, onPress: () => onSelectConversation?.(item.id), children: [_jsxs(View, { style: styles.rowBetween, children: [_jsx(Text, { style: styles.cardTitle, children: title }), _jsx(Text, { style: styles.mutedText, children: formatMessagingTimestamp(item.updatedAt) })] }), _jsx(Text, { style: styles.cardBody, children: summarizeMessagingBody(item.lastMessage?.body) }), _jsx(Text, { style: styles.metaText, children: item.unreadCount > 0 ? `${item.unreadCount} unread` : 'Up to date' })] }));
+                }, ListEmptyComponent: conversationsQuery.loading ? (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) })) : (_jsx(EmptyState, { title: "No conversations yet", body: "Start a new chat to send the first message." })) })] }));
+}
+export function ConversationScreen({ auth, conversationId }) {
+    const [draft, setDraft] = useState('');
+    const [composerError, setComposerError] = useState();
+    const token = auth?.token;
+    const conversationsQuery = useQuery(ConversationsDocument, {
+        skip: !token
+    });
+    const viewerQuery = useQuery(MessagingViewerDocument, {
+        skip: !token
+    });
+    const messagesQuery = useQuery(MessagesDocument, {
+        variables: { conversationId },
+        skip: !token
+    });
+    const [sendMessage, sendState] = useMutation(SendMessageDocument);
+    const conversation = useMemo(() => conversationsQuery.data?.conversations.find((item) => item.id === conversationId) ?? null, [conversationId, conversationsQuery.data?.conversations]);
+    const participantIds = conversation?.participantIds ?? [];
+    const participantsQuery = useQuery(MessagingConversationParticipantsDocument, {
+        variables: { ids: participantIds },
+        skip: !token || participantIds.length === 0
+    });
+    const peopleById = useMemo(() => buildPeopleDirectory(participantsQuery.data?.usersByIds ?? []), [participantsQuery.data?.usersByIds]);
+    const viewerId = viewerQuery.data?.me?.id;
+    const title = conversation ? deriveConversationTitle(conversation, viewerId, peopleById) : 'Conversation';
+    const messages = messagesQuery.data?.messages.edges.map((edge) => edge.node) ?? [];
+    const handleSend = async () => {
+        if (!token) {
+            await auth?.login?.();
+            return;
+        }
+        const body = draft.trim();
+        if (!body) {
+            return;
+        }
+        try {
+            await sendMessage({
+                variables: {
+                    conversationId,
+                    body
+                }
+            });
+            setDraft('');
+            setComposerError(undefined);
+            await Promise.all([messagesQuery.refetch(), conversationsQuery.refetch()]);
+        }
+        catch (error) {
+            setComposerError(describeClientError(error, 'We could not send this message.'));
+        }
+    };
+    if (!token) {
+        return _jsx(EmptyState, { title: "Sign in to continue", body: "Log in to view this conversation and send messages." });
+    }
+    if (messagesQuery.error || conversationsQuery.error) {
+        return (_jsx(EmptyState, { title: "Conversation unavailable", body: describeClientError(messagesQuery.error ?? conversationsQuery.error, 'The message thread could not be loaded.') }));
+    }
+    return (_jsxs(View, { style: styles.screen, children: [_jsx(Text, { style: styles.screenTitle, children: title }), _jsx(FlatList, { data: messages, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContent, renderItem: ({ item }) => {
+                    const isOwn = viewerId && item.senderId === viewerId;
+                    return (_jsxs(View, { style: [styles.messageBubble, isOwn ? styles.ownBubble : styles.otherBubble], children: [_jsx(Text, { style: styles.messageSender, children: deriveMessageSenderName(item, viewerId, peopleById) }), _jsx(Text, { style: styles.messageBody, children: item.body }), _jsx(Text, { style: styles.messageMeta, children: formatMessagingTimestamp(item.sentAt) })] }));
+                }, ListEmptyComponent: messagesQuery.loading ? (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) })) : (_jsx(EmptyState, { title: "No messages yet", body: "Send the first message in this conversation." })) }), _jsxs(View, { style: styles.composerRow, children: [_jsx(TextInput, { value: draft, onChangeText: setDraft, placeholder: "Write a message", style: styles.composerInput, multiline: true }), _jsx(Pressable, { accessibilityRole: "button", disabled: sendState.loading || !draft.trim(), onPress: () => void handleSend(), style: [styles.inlineButton, !draft.trim() ? styles.disabledCard : undefined], children: _jsx(Text, { style: styles.inlineButtonText, children: sendState.loading ? 'Sending…' : 'Send' }) })] }), composerError ? _jsx(Text, { style: styles.errorText, children: composerError }) : null] }));
+}
+export function ComposeMessageScreen({ auth, onCreatedConversation, initialUser = null }) {
+    const [query, setQuery] = useState('');
+    const [draft, setDraft] = useState('');
+    const [composerError, setComposerError] = useState();
+    const [selectedUser, setSelectedUser] = useState(initialUser);
+    const token = auth?.token;
+    const viewerQuery = useQuery(MessagingViewerDocument, {
+        skip: !token
+    });
+    const [sendMessage, sendState] = useMutation(SendMessageDocument);
+    const searchQuery = useQuery(MessagingSearchUsersConnectionDocument, {
+        variables: { query, limit: 10 },
+        skip: !token || query.trim().length < 2
+    });
+    const viewerId = viewerQuery.data?.me?.id;
+    const results = useMemo(() => (searchQuery.data?.searchUsersConnection.edges ?? [])
+        .map((edge) => edge.node)
+        .filter((user) => user.id !== viewerId), [searchQuery.data?.searchUsersConnection.edges, viewerId]);
+    const handleCreateConversation = async () => {
+        if (!token) {
+            await auth?.login?.();
+            return;
+        }
+        if (!selectedUser || !draft.trim()) {
+            return;
+        }
+        try {
+            const result = await sendMessage({
+                variables: {
+                    toUserId: selectedUser.id,
+                    body: draft.trim()
+                }
+            });
+            const nextConversationId = result.data?.sendMessage.conversationId;
+            if (nextConversationId) {
+                setDraft('');
+                setComposerError(undefined);
+                onCreatedConversation?.(nextConversationId);
+            }
+        }
+        catch (error) {
+            setComposerError(describeClientError(error, 'We could not start this conversation.'));
+        }
+    };
+    if (!token) {
+        return _jsx(EmptyState, { title: "Sign in to continue", body: "Log in to search for teammates and start a conversation." });
+    }
+    return (_jsxs(View, { style: styles.screen, children: [_jsx(Text, { style: styles.screenTitle, children: "New conversation" }), _jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search for a teammate", style: styles.searchInput }), _jsx(FlatList, { data: results, keyExtractor: (item) => item.id, contentContainerStyle: styles.compactList, renderItem: ({ item }) => {
+                    const selected = selectedUser?.id === item.id;
+                    return (_jsxs(Pressable, { accessibilityRole: "button", style: [styles.card, selected ? styles.selectedCard : undefined], onPress: () => setSelectedUser({
+                            id: item.id,
+                            handle: item.handle,
+                            displayName: item.displayName
+                        }), children: [_jsx(Text, { style: styles.cardTitle, children: item.displayName }), _jsxs(Text, { style: styles.mutedText, children: ["@", item.handle] })] }));
+                }, ListEmptyComponent: query.trim().length < 2 ? (_jsx(EmptyState, { title: "Search for someone", body: "Enter at least two characters to find a user." })) : searchQuery.error ? (_jsx(Text, { style: styles.errorText, children: describeClientError(searchQuery.error, 'We could not search for teammates right now.') })) : searchQuery.loading ? (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) })) : (_jsx(EmptyState, { title: "No users found", body: "Try a different handle or display name." })) }), selectedUser ? (_jsxs(View, { style: styles.selectionCard, children: [_jsxs(Text, { style: styles.cardTitle, children: ["To: ", selectedUser.displayName] }), _jsxs(Text, { style: styles.mutedText, children: ["@", selectedUser.handle] })] })) : null, _jsxs(View, { style: styles.composerColumn, children: [_jsx(TextInput, { value: draft, onChangeText: setDraft, placeholder: "Write the first message", style: styles.composerInput, multiline: true }), _jsx(Pressable, { accessibilityRole: "button", disabled: sendState.loading || !selectedUser || !draft.trim(), onPress: () => void handleCreateConversation(), style: [
+                            styles.inlineButton,
+                            !selectedUser || !draft.trim() ? styles.disabledCard : undefined
+                        ], children: _jsx(Text, { style: styles.inlineButtonText, children: sendState.loading ? 'Starting…' : 'Start conversation' }) })] }), composerError ? _jsx(Text, { style: styles.errorText, children: composerError }) : null] }));
+}
+const { color, radius, shadow, spacing } = tokens;
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        backgroundColor: color.surfaceAlt,
+        padding: spacing.lg,
+        gap: spacing.md
+    },
+    headerRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: spacing.md
+    },
+    headerCopy: {
+        flex: 1,
+        gap: spacing.xs
+    },
+    screenTitle: {
+        fontSize: 22,
+        fontWeight: '700',
+        color: color.text
+    },
+    screenSubtitle: {
+        color: color.textMuted,
+        lineHeight: 20
+    },
+    searchInput: {
+        borderWidth: 1,
+        borderColor: color.borderStrong,
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        backgroundColor: color.surface,
+        color: color.text
+    },
+    listContent: {
+        gap: spacing.md,
+        paddingBottom: spacing.lg
+    },
+    compactList: {
+        gap: spacing.sm,
+        paddingBottom: spacing.md
+    },
+    card: {
+        borderRadius: radius.lg,
+        borderWidth: 1,
+        borderColor: color.border,
+        backgroundColor: color.surface,
+        padding: spacing.md,
+        gap: spacing.xs,
+        ...shadow.sm
+    },
+    selectedCard: {
+        borderColor: color.primary
+    },
+    selectionCard: {
+        borderRadius: radius.lg,
+        borderWidth: 1,
+        borderColor: color.primary,
+        backgroundColor: color.surface,
+        padding: spacing.md,
+        gap: spacing.xs
+    },
+    rowBetween: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: spacing.md
+    },
+    cardTitle: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: '600',
+        color: color.text
+    },
+    cardBody: {
+        color: color.text,
+        lineHeight: 20
+    },
+    metaText: {
+        color: color.textSubdued,
+        fontSize: 12
+    },
+    mutedText: {
+        color: color.textMuted
+    },
+    errorText: {
+        color: '#d22c2c'
+    },
+    emptyState: {
+        paddingVertical: spacing.xl,
+        alignItems: 'center',
+        gap: spacing.xs
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: color.text
+    },
+    emptyBody: {
+        color: color.textMuted,
+        textAlign: 'center',
+        lineHeight: 20
+    },
+    inlineState: {
+        paddingVertical: spacing.lg,
+        alignItems: 'center'
+    },
+    inlineButton: {
+        borderRadius: 999,
+        backgroundColor: color.primary,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    inlineButtonText: {
+        color: '#ffffff',
+        fontWeight: '600'
+    },
+    disabledCard: {
+        opacity: 0.5
+    },
+    messageBubble: {
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        gap: spacing.xs,
+        maxWidth: '88%'
+    },
+    ownBubble: {
+        alignSelf: 'flex-end',
+        backgroundColor: color.primary
+    },
+    otherBubble: {
+        alignSelf: 'flex-start',
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderColor: color.border
+    },
+    messageSender: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: color.text
+    },
+    messageBody: {
+        color: color.text,
+        lineHeight: 20
+    },
+    messageMeta: {
+        color: color.textMuted,
+        fontSize: 12
+    },
+    composerRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: spacing.sm
+    },
+    composerColumn: {
+        gap: spacing.sm
+    },
+    composerInput: {
+        flex: 1,
+        minHeight: 48,
+        maxHeight: 140,
+        borderWidth: 1,
+        borderColor: color.borderStrong,
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        backgroundColor: color.surface,
+        color: color.text
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-messaging",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Messaging experience primitives for Mereb applications",
   "type": "module",
   "main": "dist/index.js",
@@ -36,15 +36,18 @@
     "dist",
     "package.json"
   ],
+  "dependencies": {
+    "@mereb/tokens": "^0.0.9"
+  },
   "peerDependencies": {
     "expo-router": ">=3.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.72.0",
-    "@apollo/client": ">=3.0.0",
+    "@apollo/client": ">=4.0.0",
     "graphql": ">=16.0.0"
   },
   "devDependencies": {
-    "@apollo/client": "^3.12.5",
+    "@apollo/client": "^4.0.9",
     "@types/react": "~18.2.79",
     "graphql": "^16.11.0",
     "husky": "^9.1.7",