@mereb/app-messaging 0.0.7 → 0.0.8

package/dist/native.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery } from '@apollo/client/react';
 import { useMemo, useState } from 'react';
-import { ActivityIndicator, FlatList, Pressable, RefreshControl, StyleSheet, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, FlatList, KeyboardAvoidingView, Platform, 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') {
+    let message = '';
+    if (error instanceof Error) {
+        message = error.message.trim();
+    }
+    else if (typeof error === 'string') {
+        message = error.trim();
+    }
+    const hasUsableMessage = message !== '' && message !== 'Subgraph errors redacted';
+    if (!hasUsableMessage) {
         return fallback;
     }
     return __DEV__ ? `${fallback} (${message})` : fallback;
@@ -123,10 +130,10 @@ export function ConversationScreen({ auth, conversationId }) {
     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 }) => {
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: styles.screen, children: [_jsx(Text, { style: styles.screenTitle, children: title }), _jsx(FlatList, { data: messages, keyExtractor: (item) => item.id, style: styles.flex, contentContainerStyle: styles.listContent, keyboardShouldPersistTaps: "handled", 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] }));
+                }, 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() ? undefined : styles.disabledCard], 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('');
@@ -143,9 +150,24 @@ export function ComposeMessageScreen({ auth, onCreatedConversation, initialUser
         skip: !token || query.trim().length < 2
     });
     const viewerId = viewerQuery.data?.me?.id;
+    const hasSearchQuery = query.trim().length >= 2;
+    const canStartConversation = selectedUser !== null && draft.trim().length > 0 && !sendState.loading;
     const results = useMemo(() => (searchQuery.data?.searchUsersConnection.edges ?? [])
         .map((edge) => edge.node)
         .filter((user) => user.id !== viewerId), [searchQuery.data?.searchUsersConnection.edges, viewerId]);
+    let searchEmptyState;
+    if (!hasSearchQuery) {
+        searchEmptyState = (_jsx(EmptyState, { title: "Search for someone", body: "Enter at least two characters to find a user." }));
+    }
+    else if (searchQuery.error) {
+        searchEmptyState = (_jsx(Text, { style: styles.errorText, children: describeClientError(searchQuery.error, 'We could not search for teammates right now.') }));
+    }
+    else if (searchQuery.loading) {
+        searchEmptyState = (_jsx(View, { style: styles.inlineState, children: _jsx(ActivityIndicator, {}) }));
+    }
+    else {
+        searchEmptyState = (_jsx(EmptyState, { title: "No users found", body: "Try a different handle or display name." }));
+    }
     const handleCreateConversation = async () => {
         if (!token) {
             await auth?.login?.();
@@ -175,20 +197,26 @@ export function ComposeMessageScreen({ auth, onCreatedConversation, initialUser
     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 }) => {
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, 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, style: styles.composeResultsList, contentContainerStyle: [
+                    styles.compactList,
+                    results.length === 0 ? styles.compactListEmpty : undefined
+                ], keyboardShouldPersistTaps: "handled", 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: [
+                }, ListEmptyComponent: searchEmptyState }), 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: !canStartConversation, onPress: () => void handleCreateConversation(), style: [
                             styles.inlineButton,
-                            !selectedUser || !draft.trim() ? styles.disabledCard : undefined
+                            canStartConversation ? undefined : styles.disabledCard
                         ], 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({
+    flex: {
+        flex: 1
+    },
     screen: {
         flex: 1,
         backgroundColor: color.surfaceAlt,
@@ -231,6 +259,14 @@ const styles = StyleSheet.create({
         gap: spacing.sm,
         paddingBottom: spacing.md
     },
+    compactListEmpty: {
+        paddingBottom: 0
+    },
+    composeResultsList: {
+        flexGrow: 0,
+        flexShrink: 1,
+        maxHeight: 280
+    },
     card: {
         borderRadius: radius.lg,
         borderWidth: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-messaging",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Messaging experience primitives for Mereb applications",
   "type": "module",
   "main": "dist/index.js",