@college-africa/chat-ui-native 1.1.2 → 1.2.0

package/dist/cache/actions/summaries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"summaries.d.ts","sourceRoot":"","sources":["../../../src/cache/actions/summaries.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,KAAK,EAAE,wBAAwB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKlF,eAAO,MAAM,qBAAqB,GAAI,WAAW,MAAM,GAAG,IAAI,SAE7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAU,SAAQ,wBAA6B,sEAqBzE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,SAAS,OAAO,EAChB,eAAe,MAAM,SAoCtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,MAAM,SAuBtD,CAAC"}
+{"version":3,"file":"summaries.d.ts","sourceRoot":"","sources":["../../../src/cache/actions/summaries.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,KAAK,EACV,wBAAwB,EACxB,OAAO,EACR,MAAM,0BAA0B,CAAC;AAKlC,eAAO,MAAM,qBAAqB,GAAI,WAAW,MAAM,GAAG,IAAI,SAE7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAU,SAAQ,wBAA6B,sEAqBzE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAClC,SAAS,OAAO,EAChB,eAAe,MAAM,SAoCtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,MAAM,SAuBtD,CAAC"}

package/dist/cache/actions/summaries.js

@@ -50,15 +50,14 @@ const updateSummaryForMessage = (message, currentUserId) => {
         group: message.group,
         user: otherUserId ?? undefined
     });
-    // Do not update unread_message count if conversation is opened
-    if (summaryId === activeConversationId)
-        return;
     const existingSummary = realm.objectForPrimaryKey("Summary", summaryId);
+    // Do not update unread_message count if conversation is opened
+    const increment = summaryId === activeConversationId ? 0 : 1;
     if (existingSummary) {
         // Update existing summary
-        existingSummary.message_count += 1;
+        existingSummary.message_count += increment;
         existingSummary.last_message_at = message.created_at;
-        existingSummary.unread_count += 1;
+        existingSummary.unread_count += increment;
     }
     else {
         // Create new summary if it doesn't exist
@@ -67,8 +66,8 @@ const updateSummaryForMessage = (message, currentUserId) => {
             group: message.group ?? undefined,
             user: otherUserId ?? undefined,
             last_message_at: message.created_at,
-            message_count: 1,
-            unread_count: 1
+            message_count: increment,
+            unread_count: increment
         });
     }
 };

package/dist/components/ChatApp.d.ts

@@ -5,30 +5,16 @@ import React from "react";
 import type { ChatClientConfig } from "@college-africa/chat-sdk";
 import type { StackNavigationOptions } from "@react-navigation/stack";
 export interface ChatAppProps {
-    /**
-     * SDK configuration
-     */
+    /** SDK configuration  */
     config: ChatClientConfig;
-    /**
-     * Auth token (optional, can be set later)
-     */
-    token?: string;
-    /**
-     * Loading component
-     */
     loadingComponent?: React.ReactNode;
-    /**
-     * Error handler
-     */
     onError?: (error: Error) => void;
-    /**
-     * Navigation screen options to pass to the stack navigator
-     */
+    /** Navigation screen options to pass to the stack navigator */
     screenOptions?: StackNavigationOptions;
 }
 /**
  * Main chat application component
  * Initializes SDK and provides the chat interface
  */
-export declare function ChatApp({ config, token, loadingComponent, onError, screenOptions }: ChatAppProps): React.JSX.Element;
+export declare function ChatApp({ config, loadingComponent, onError, screenOptions }: ChatAppProps): React.JSX.Element;
 //# sourceMappingURL=ChatApp.d.ts.map

package/dist/components/ChatApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatApp.d.ts","sourceRoot":"","sources":["../../src/components/ChatApp.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,aAAa,EACd,EAAE,YAAY,qBA2Dd"}
+{"version":3,"file":"ChatApp.d.ts","sourceRoot":"","sources":["../../src/components/ChatApp.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,MAAM,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,sBAAsB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,aAAa,EACd,EAAE,YAAY,qBA2Dd"}

package/dist/components/ChatApp.js

@@ -47,7 +47,7 @@ const ChatStack_1 = require("./ChatStack");
  * Main chat application component
  * Initializes SDK and provides the chat interface
  */
-function ChatApp({ config, token, loadingComponent, onError, screenOptions }) {
+function ChatApp({ config, loadingComponent, onError, screenOptions }) {
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
@@ -55,7 +55,7 @@ function ChatApp({ config, token, loadingComponent, onError, screenOptions }) {
         async function initializeChat() {
             try {
                 if (!(0, sdk_1.isSDKInitialized)()) {
-                    await (0, sdk_1.initSDK)(config, token);
+                    await (0, sdk_1.initSDK)(config);
                 }
                 if (mounted) {
                     setIsReady(true);
@@ -73,7 +73,7 @@ function ChatApp({ config, token, loadingComponent, onError, screenOptions }) {
         return () => {
             mounted = false;
         };
-    }, [config, token, onError]);
+    }, [config, onError]);
     if (error) {
         return (<react_native_1.View style={styles.centered}>
         <react_native_paper_1.Text variant="bodyLarge" style={styles.errorText}>

package/dist/components/ConversationItem.d.ts

@@ -1,7 +1,8 @@
 /**
  * ConversationItem - Single conversation list item with unread badge
+ * Phase 7: Added React.memo for performance optimization
  */
 import React from "react";
 import type { ConversationItemProps } from "../types";
-export declare function ConversationItem({ conversation, onPress }: ConversationItemProps): React.JSX.Element;
+export declare const ConversationItem: React.NamedExoticComponent<ConversationItemProps>;
 //# sourceMappingURL=ConversationItem.d.ts.map

package/dist/components/ConversationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationItem.d.ts","sourceRoot":"","sources":["../../src/components/ConversationItem.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,OAAO,EACR,EAAE,qBAAqB,qBA4CvB"}
+{"version":3,"file":"ConversationItem.d.ts","sourceRoot":"","sources":["../../src/components/ConversationItem.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,eAAO,MAAM,gBAAgB,mDA+C3B,CAAC"}

package/dist/components/ConversationItem.js

@@ -1,19 +1,50 @@
 "use strict";
 /**
  * ConversationItem - Single conversation list item with unread badge
+ * Phase 7: Added React.memo for performance optimization
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConversationItem = ConversationItem;
-const react_1 = __importDefault(require("react"));
+exports.ConversationItem = void 0;
+const react_1 = __importStar(require("react"));
 // @ts-ignore - react-native-paper is a peer dependency
 const react_native_paper_1 = require("react-native-paper");
 const date_1 = require("../utils/date");
 const messages_1 = require("../utils/messages");
 const styles_1 = require("../styles");
-function ConversationItem({ conversation, onPress }) {
+exports.ConversationItem = (0, react_1.memo)(function ConversationItem({ conversation, onPress }) {
     const theme = (0, react_native_paper_1.useTheme)();
     const styles = useStyles(theme);
     const initials = (0, messages_1.getInitials)(conversation.name);
@@ -27,7 +58,7 @@ function ConversationItem({ conversation, onPress }) {
     return (<react_native_paper_1.List.Item title={conversation.name} description={description} onPress={onPress} left={props => (<react_native_paper_1.Avatar.Icon {...props} color={undefined} size={40} icon={conversation.isGroup ? "account-group" : "account-circle"}/>)} right={props => conversation.unread_count > 0 ? (<react_native_paper_1.Badge size={20} style={[styles.badge, { backgroundColor: theme.colors.primary }]}>
             {conversation.unread_count > 99 ? "99+" : conversation.unread_count}
           </react_native_paper_1.Badge>) : null} style={styles.item} titleStyle={styles.title} descriptionStyle={styles.description}/>);
-}
+});
 const useStyles = (theme) => {
     return (0, styles_1.useStyleSheet)({
         item: {

package/dist/components/ConversationList.d.ts

@@ -1,7 +1,8 @@
 /**
  * ConversationList - List of all conversations
+ * Phase 7: Added skeleton loader, pull-to-refresh, error handling with retry, and React.memo
  */
 import React from "react";
 import type { ConversationListProps } from "../types";
-export declare function ConversationList({ onSelectConversation }: ConversationListProps): React.JSX.Element;
+export declare const ConversationList: React.NamedExoticComponent<ConversationListProps>;
 //# sourceMappingURL=ConversationList.d.ts.map

package/dist/components/ConversationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/components/ConversationList.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGtD,wBAAgB,gBAAgB,CAAC,EAC/B,oBAAoB,EACrB,EAAE,qBAAqB,qBAwDvB"}
+{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../src/components/ConversationList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAe,MAAM,OAAO,CAAC;AAapC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGtD,eAAO,MAAM,gBAAgB,mDAkG3B,CAAC"}

package/dist/components/ConversationList.js

@@ -1,31 +1,88 @@
 "use strict";
 /**
  * ConversationList - List of all conversations
+ * Phase 7: Added skeleton loader, pull-to-refresh, error handling with retry, and React.memo
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConversationList = ConversationList;
-const react_1 = __importDefault(require("react"));
+exports.ConversationList = void 0;
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // @ts-ignore - react-native-paper is a peer dependency
 const react_native_paper_1 = require("react-native-paper");
 const ConversationItem_1 = require("./ConversationItem");
+const SkeletonLoader_1 = require("./SkeletonLoader");
 const useConversationList_1 = require("../hooks/useConversationList");
 const styles_1 = require("../styles");
-function ConversationList({ onSelectConversation }) {
+exports.ConversationList = (0, react_1.memo)(function ConversationList({ onSelectConversation }) {
     const theme = (0, react_native_paper_1.useTheme)();
     const styles = useStyles(theme);
-    const { conversations, loading, error } = (0, useConversationList_1.useConversationList)();
+    const { conversations, loading, error, refetch } = (0, useConversationList_1.useConversationList)();
+    const [refreshing, setRefreshing] = react_1.default.useState(false);
     const renderItem = ({ item }) => (<ConversationItem_1.ConversationItem conversation={item} onPress={() => onSelectConversation(item)}/>);
     const keyExtractor = (item) => item.id;
-    if (loading) {
-        return (<react_native_1.View style={styles.centered}>
-        <react_native_paper_1.ActivityIndicator size="large"/>
-      </react_native_1.View>);
+    const handleRefresh = react_1.default.useCallback(async () => {
+        setRefreshing(true);
+        try {
+            refetch();
+        }
+        finally {
+            setRefreshing(false);
+        }
+    }, [refetch]);
+    const handleRetry = react_1.default.useCallback(async () => {
+        try {
+            // Try to reconnect the SDK if it's disconnected
+            const { getSDK } = await Promise.resolve().then(() => __importStar(require("../utils/sdk")));
+            const sdk = getSDK();
+            if (!sdk.ws.isConnected()) {
+                await sdk.connect();
+            }
+        }
+        catch (err) {
+            console.error("Failed to reconnect SDK:", err);
+        }
+        // Refetch conversations after reconnection attempt
+        refetch();
+    }, [refetch]);
+    // Initial loading state - show skeleton
+    if (loading && conversations.length === 0) {
+        return <SkeletonLoader_1.SkeletonLoader count={5} height={72}/>;
     }
-    if (error) {
+    // Error state - show error message with retry button
+    if (error && conversations.length === 0) {
         return (<react_native_1.View style={styles.centered}>
         <react_native_paper_1.Text variant="bodyMedium" style={styles.errorText}>
           Failed to load conversations
@@ -33,8 +90,12 @@ function ConversationList({ onSelectConversation }) {
         <react_native_paper_1.Text variant="bodySmall" style={styles.errorMessage}>
           {error.message}
         </react_native_paper_1.Text>
+        <react_native_paper_1.Button mode="contained" onPress={handleRetry} style={styles.retryButton} icon="refresh">
+          Retry
+        </react_native_paper_1.Button>
       </react_native_1.View>);
     }
+    // Empty state
     if (conversations.length === 0) {
         return (<react_native_1.View style={styles.centered}>
         <react_native_paper_1.Text variant="bodyMedium" style={styles.emptyText}>
@@ -45,8 +106,8 @@ function ConversationList({ onSelectConversation }) {
         </react_native_paper_1.Text>
       </react_native_1.View>);
     }
-    return (<react_native_1.FlatList data={conversations} renderItem={renderItem} keyExtractor={keyExtractor} style={styles.list}/>);
-}
+    return (<react_native_1.FlatList data={conversations} renderItem={renderItem} keyExtractor={keyExtractor} style={styles.list} refreshControl={<react_native_1.RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={theme.colors.primary} colors={[theme.colors.primary]}/>}/>);
+});
 const useStyles = (theme) => {
     return (0, styles_1.useStyleSheet)({
         list: {
@@ -66,9 +127,13 @@ const useStyles = (theme) => {
             color: theme.colors.error
         },
         errorMessage: {
+            marginBottom: 16,
             color: theme.colors.errorContainer,
             textAlign: "center"
         },
+        retryButton: {
+            marginTop: 8
+        },
         emptyText: {
             marginBottom: 8,
             color: theme.colors.errorContainer

package/dist/components/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAa,EACb,WAAW,EACX,gBAAgB,EAChB,SAAS,EACV,EAAE,aAAa,qBAiDf"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAa,EACb,WAAW,EACX,gBAAgB,EAChB,SAAS,EACV,EAAE,aAAa,qBAgDf"}

package/dist/components/Dropdown.js

@@ -55,7 +55,7 @@ function Dropdown({ label, children, disabled = false, mode = "text", buttonStyl
         setVisible(false);
         onDismiss?.();
     };
-    return (<react_native_paper_1.Menu visible={visible} onDismiss={handleDismiss} anchorPosition="top" style={{ marginTop: -16 }} anchor={<react_native_paper_1.Button mode={mode} onPress={handleToggle} disabled={disabled} icon="menu-down" contentStyle={styles.buttonContent} style={[styles.button, buttonStyle]}>
+    return (<react_native_paper_1.Menu visible={visible} onDismiss={handleDismiss} anchorPosition="top" anchor={<react_native_paper_1.Button mode={mode} onPress={handleToggle} disabled={disabled} icon="menu-down" contentStyle={styles.buttonContent} style={[styles.button, buttonStyle]}>
           {label}
         </react_native_paper_1.Button>} contentStyle={[styles.menuContent, menuContentStyle]}>
       {react_1.default.Children.map(children, child => {

package/dist/components/MessageBubble.d.ts

@@ -1,5 +1,6 @@
 /**
  * MessageBubble - Individual message display component
+ * Phase 7: Added React.memo for performance optimization
  */
 import React from "react";
 import type { MessageBubbleProps } from "../types";
@@ -14,5 +15,5 @@ export interface EnhancedMessageBubbleProps extends MessageBubbleProps {
     /** Is last message in group */
     isLastInGroup?: boolean;
 }
-export declare function MessageBubble({ message, isOwn, showSender, status, showAvatar, isFirstInGroup, isLastInGroup }: EnhancedMessageBubbleProps): React.JSX.Element;
+export declare const MessageBubble: React.NamedExoticComponent<EnhancedMessageBubbleProps>;
 //# sourceMappingURL=MessageBubble.d.ts.map

package/dist/components/MessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAG9D,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE,6CAA6C;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,cAAsB,EACtB,aAAqB,EACtB,EAAE,0BAA0B,qBA8E5B"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/components/MessageBubble.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAe,MAAM,OAAO,CAAC;AAQpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAG9D,MAAM,WAAW,0BAA2B,SAAQ,kBAAkB;IACpE,6CAA6C;IAC7C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,wDAsFxB,CAAC"}

package/dist/components/MessageBubble.js

@@ -1,13 +1,44 @@
 "use strict";
 /**
  * MessageBubble - Individual message display component
+ * Phase 7: Added React.memo for performance optimization
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBubble = MessageBubble;
-const react_1 = __importDefault(require("react"));
+exports.MessageBubble = void 0;
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // @ts-ignore - react-native-paper is a peer dependency
 const react_native_paper_1 = require("react-native-paper");
@@ -16,7 +47,7 @@ const messages_1 = require("../utils/messages");
 const styles_1 = require("../styles");
 const MessageStatus_1 = require("./MessageStatus");
 const misc_1 = require("../utils/misc");
-function MessageBubble({ message, isOwn, showSender, status, showAvatar, isFirstInGroup = false, isLastInGroup = false }) {
+exports.MessageBubble = (0, react_1.memo)(function MessageBubble({ message, isOwn, showSender, status, showAvatar, isFirstInGroup = false, isLastInGroup = false }) {
     const theme = (0, react_native_paper_1.useTheme)();
     const styles = useStyles(theme);
     return (<react_native_1.View style={[
@@ -71,7 +102,7 @@ function MessageBubble({ message, isOwn, showSender, status, showAvatar, isFirst
         </react_native_1.View>
       </react_native_1.View>
     </react_native_1.View>);
-}
+});
 const useStyles = (theme) => {
     return (0, styles_1.useStyleSheet)({
         container: {

package/dist/components/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/components/MessageInput.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,YAAY,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBA2C1E"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/components/MessageInput.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,YAAY,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAyC1E"}

package/dist/components/MessageInput.js

@@ -54,7 +54,9 @@ function MessageInput({ onSendMessage, disabled }) {
         }
     };
     return (<react_native_1.View style={[styles.container, { backgroundColor: theme.colors.surface }]}>
-      <react_native_paper_1.TextInput value={text} onChangeText={setText} placeholder="Type a message..." mode="outlined" multiline maxLength={1000} disabled={disabled} outlineColor={theme.colors.surfaceVariant} style={styles.input} outlineStyle={styles.inputOutline} contentStyle={styles.inputContent} onSubmitEditing={handleSend} blurOnSubmit={false}/>
+      <react_native_1.View style={styles.inputWrapper}>
+        <react_native_1.TextInput value={text} onChangeText={setText} placeholder="Type a message..." multiline maxLength={1000} readOnly={disabled} style={styles.input} onSubmitEditing={handleSend} cursorColor={theme.colors.primary}/>
+      </react_native_1.View>
       <react_native_paper_1.IconButton icon="send" mode="contained" onPress={handleSend} disabled={disabled || !text.trim()} style={styles.sendButton} iconColor={theme.colors.onPrimary} containerColor={text.trim() ? theme.colors.primary : theme.colors.surfaceDisabled}/>
     </react_native_1.View>);
 }
@@ -63,23 +65,26 @@ const useStyles = (theme) => {
         container: {
             flexDirection: "row",
             alignItems: "flex-end",
-            paddingHorizontal: 8,
-            paddingVertical: 8
+            padding: 8,
+            gap: 8
         },
-        input: {
+        inputWrapper: {
             flex: 1,
-            maxHeight: 100,
-            marginRight: 8
-        },
-        inputOutline: {
-            borderRadius: 28
+            minHeight: 40,
+            overflow: "scroll",
+            padding: 10,
+            borderWidth: 1,
+            borderRadius: 20,
+            borderColor: theme.colors.onSurfaceDisabled,
+            justifyContent: "center"
         },
-        inputContent: {
-            paddingHorizontal: 16,
-            height: 10
+        input: {
+            overflow: "scroll",
+            padding: 0,
+            maxHeight: 100
         },
         sendButton: {
-            marginBottom: 4
+            margin: 0
         }
     });
 };

package/dist/components/MessageList.d.ts

@@ -1,8 +1,8 @@
 /**
- * MessageList - Scrollable list of messages using inverted FlatList
- * Phase 7: Inverted list with pagination for older messages
+ * MessageList - Scrollable list of messages using FlashList
+ * Phase 7: Added React.memo for performance optimization and improved FlashList usage
  */
 import React from "react";
 import type { MessageListProps } from "../types";
-export declare function MessageList({ messages, isLoading, isLoadingMore, hasOlderMessages, currentUserId, onLoadMore }: MessageListProps): React.JSX.Element;
+export declare const MessageList: React.NamedExoticComponent<MessageListProps>;
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/components/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIjD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,UAAU,EACX,EAAE,gBAAgB,qBA6GlB"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAYpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAIjD,eAAO,MAAM,WAAW,8CAsHtB,CAAC"}

package/dist/components/MessageList.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
- * MessageList - Scrollable list of messages using inverted FlatList
- * Phase 7: Inverted list with pagination for older messages
+ * MessageList - Scrollable list of messages using FlashList
+ * Phase 7: Added React.memo for performance optimization and improved FlashList usage
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -37,7 +37,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageList = MessageList;
+exports.MessageList = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // @ts-ignore - react-native-paper is a peer dependency
@@ -46,7 +46,7 @@ const MessageBubble_1 = require("./MessageBubble");
 const messages_1 = require("../utils/messages");
 const styles_1 = require("../styles");
 const flash_list_1 = require("@shopify/flash-list");
-function MessageList({ messages, isLoading, isLoadingMore, hasOlderMessages, currentUserId, onLoadMore }) {
+exports.MessageList = (0, react_1.memo)(function MessageList({ messages, isLoading, isLoadingMore, hasOlderMessages, currentUserId, onLoadMore }) {
     const styles = useStyles();
     const flatListRef = (0, react_1.useRef)(null);
     const isUserAtBottomRef = (0, react_1.useRef)(true);
@@ -103,8 +103,10 @@ function MessageList({ messages, isLoading, isLoadingMore, hasOlderMessages, cur
         </react_native_paper_1.Text>
       </react_native_1.View>);
     }
-    return (<flash_list_1.FlashList ref={flatListRef} data={messages} renderItem={renderMessage} keyExtractor={keyExtractor} contentContainerStyle={styles.contentContainer} onStartReached={hasOlderMessages ? handleLoadMore : undefined} onStartReachedThreshold={0.5} onScroll={onScroll} scrollEventThrottle={16} ListHeaderComponent={renderLoadingMore}/>);
-}
+    return (<flash_list_1.FlashList ref={flatListRef} data={messages} renderItem={renderMessage} keyExtractor={keyExtractor} contentContainerStyle={styles.contentContainer} onStartReached={hasOlderMessages ? handleLoadMore : undefined} onStartReachedThreshold={0.5} onScroll={onScroll} scrollEventThrottle={16} ListHeaderComponent={renderLoadingMore} 
+    // Performance optimizations
+    removeClippedSubviews={true}/>);
+});
 const useStyles = () => {
     const theme = (0, react_native_paper_1.useTheme)();
     return (0, styles_1.useStyleSheet)({

package/dist/components/ResponsiveChatLayout.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ResponsiveChatLayout - Tablet split-view layout for conversation list and chat
+ * Phase 7: Responsive layouts with side-by-side view on tablets
+ */
+import React from "react";
+import type { ConversationItem } from "../types";
+interface ResponsiveChatLayoutProps {
+    /** Callback when a conversation is selected (for mobile) */
+    onSelectConversation?: (conversation: ConversationItem) => void;
+}
+/**
+ * Responsive layout that shows:
+ * - Mobile: Only conversation list (chat navigates to new screen)
+ * - Tablet (md+): Split view with conversation list (1/3) and chat (2/3)
+ */
+export declare function ResponsiveChatLayout({ onSelectConversation }: ResponsiveChatLayoutProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ResponsiveChatLayout.d.ts.map

package/dist/components/ResponsiveChatLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveChatLayout.d.ts","sourceRoot":"","sources":["../../src/components/ResponsiveChatLayout.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAUrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAKjD,UAAU,yBAAyB;IACjC,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACjE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,oBAAoB,EACrB,EAAE,yBAAyB,qBAgF3B"}

package/dist/components/ResponsiveChatLayout.js

@@ -0,0 +1,161 @@
+"use strict";
+/**
+ * ResponsiveChatLayout - Tablet split-view layout for conversation list and chat
+ * Phase 7: Responsive layouts with side-by-side view on tablets
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveChatLayout = ResponsiveChatLayout;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// @ts-ignore - react-navigation is a peer dependency
+const native_1 = require("@react-navigation/native");
+const ConversationList_1 = require("./ConversationList");
+const ChatView_1 = require("./ChatView");
+const styles_1 = require("../styles");
+const users_1 = require("../cache/actions/users");
+// @ts-ignore - react-native-paper is a peer dependency
+const react_native_paper_1 = require("react-native-paper");
+/**
+ * Responsive layout that shows:
+ * - Mobile: Only conversation list (chat navigates to new screen)
+ * - Tablet (md+): Split view with conversation list (1/3) and chat (2/3)
+ */
+function ResponsiveChatLayout({ onSelectConversation }) {
+    const isTablet = (0, styles_1.useIsMinWidth)("md");
+    const styles = useStyles();
+    // @ts-ignore - navigation type inference
+    const navigation = (0, native_1.useNavigation)();
+    const [selectedConversationId, setSelectedConversationId] = (0, react_1.useState)(null);
+    const [selectedConversationName, setSelectedConversationName] = (0, react_1.useState)(undefined);
+    const currentUser = (0, users_1.getCurrentUser)();
+    const isAdmin = ["admin", "system"].includes(currentUser?.role) || undefined;
+    const handleSelectConversation = (0, react_1.useCallback)((conversation) => {
+        setSelectedConversationId(conversation.id);
+        setSelectedConversationName(conversation.name);
+        // On mobile, navigate to the Chat screen
+        if (!isTablet && onSelectConversation) {
+            onSelectConversation(conversation);
+        }
+    }, [isTablet, onSelectConversation]);
+    // Tablet layout: side-by-side
+    if (isTablet) {
+        return (<react_native_1.View style={styles.container}>
+        {/* Conversation List - Left Side (1/3) */}
+        <react_native_1.View style={styles.conversationListContainer}>
+          <react_native_1.View style={styles.conversationListHeader}>
+            {/* @ts-ignore - navigation type inference */}
+            <react_native_paper_1.IconButton icon="account-multiple-plus" size={20} onPress={() => navigation.navigate("CreateGroup")} disabled={!isAdmin}/>
+          </react_native_1.View>
+          <ConversationList_1.ConversationList onSelectConversation={handleSelectConversation}/>
+        </react_native_1.View>
+
+        {/* Divider */}
+        <react_native_paper_1.Divider style={styles.divider}/>
+
+        {/* Chat View - Right Side (2/3) */}
+        <react_native_1.View style={styles.chatContainer}>
+          {selectedConversationId ? (<>
+              <react_native_1.View style={styles.chatHeader}>
+                <react_native_paper_1.IconButton icon="close" size={20} onPress={() => setSelectedConversationId(null)}/>
+              </react_native_1.View>
+              <ChatView_1.ChatView conversationId={selectedConversationId}/>
+            </>) : (<react_native_1.View style={styles.emptyChat}>
+              {/* @ts-ignore - react-native-paper is a peer dependency */}
+              {/* eslint-disable-next-line react-native/no-inline-styles */}
+              <react_native_paper_1.IconButton icon="message-outline" size={64} style={{ opacity: 0.3 }}/>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>);
+    }
+    // Mobile layout: only conversation list (chat navigates via stack)
+    return (<react_native_1.View style={styles.container}>
+      <ConversationList_1.ConversationList onSelectConversation={handleSelectConversation}/>
+    </react_native_1.View>);
+}
+const useStyles = () => {
+    return (0, styles_1.useStyleSheet)({
+        container: {
+            flex: 1,
+            flexDirection: "row",
+            backgroundColor: "transparent"
+        },
+        conversationListContainer: {
+            width: "33%",
+            borderRightWidth: 1
+        },
+        conversationListHeader: {
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            padding: 8,
+            borderBottomWidth: 1
+        },
+        divider: {
+            width: 1
+        },
+        chatContainer: {
+            flex: 1,
+            backgroundColor: "transparent"
+        },
+        chatHeader: {
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            padding: 8,
+            borderBottomWidth: 1
+        },
+        emptyChat: {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center"
+        }
+    }, {
+        // Mobile styles
+        [styles_1.breakpoints.down("md")]: {
+            container: {
+                flexDirection: "column"
+            },
+            conversationListContainer: {
+                width: "100%",
+                borderRightWidth: 0
+            },
+            conversationListHeader: {
+                display: "none" // Hide on mobile, use screen header instead
+            },
+            divider: {
+                display: "none"
+            }
+        }
+    });
+};

package/dist/components/SkeletonLoader.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SkeletonLoader - Loading skeleton component for lists
+ * Phase 7: Skeleton loaders for better loading states
+ */
+import React from "react";
+export interface SkeletonLoaderProps {
+    /** Number of items to render */
+    count?: number;
+    /** Height of each skeleton item */
+    height?: number;
+    /** Width of skeleton (default: 100%) */
+    width?: number | "100%";
+}
+/**
+ * Skeleton loader for displaying placeholders while content loads
+ */
+export declare function SkeletonLoader({ count, height, width }: SkeletonLoaderProps): React.JSX.Element;
+//# sourceMappingURL=SkeletonLoader.d.ts.map

package/dist/components/SkeletonLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.d.ts","sourceRoot":"","sources":["../../src/components/SkeletonLoader.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,mBAAmB;IAClC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAS,EACT,MAAW,EACX,KAAc,EACf,EAAE,mBAAmB,qBAqBrB"}

package/dist/components/SkeletonLoader.js

@@ -0,0 +1,41 @@
+"use strict";
+/**
+ * SkeletonLoader - Loading skeleton component for lists
+ * Phase 7: Skeleton loaders for better loading states
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoader = SkeletonLoader;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// @ts-ignore - react-native-paper is a peer dependency
+const react_native_paper_1 = require("react-native-paper");
+const styles_1 = require("../styles");
+/**
+ * Skeleton loader for displaying placeholders while content loads
+ */
+function SkeletonLoader({ count = 5, height = 72, width = "100%" }) {
+    const styles = useStyles();
+    const theme = (0, react_native_paper_1.useTheme)();
+    return (<>
+      {Array.from({ length: count }).map((_, index) => (<react_native_1.View key={index} style={[
+                styles.skeleton,
+                {
+                    height,
+                    width,
+                    backgroundColor: theme.colors.surfaceVariant
+                }
+            ]}/>))}
+    </>);
+}
+const useStyles = () => {
+    return (0, styles_1.useStyleSheet)({
+        skeleton: {
+            marginHorizontal: 16,
+            marginVertical: 8,
+            borderRadius: 8
+        }
+    });
+};

package/dist/utils/sdk.d.ts

@@ -5,12 +5,11 @@ import { ChatSDK } from "@college-africa/chat-sdk";
 import type { ChatClientConfig } from "@college-africa/chat-sdk";
 /**
  * Initialize the SDK singleton
- * @param config - Chat client configuration
- * @param token - Authentication token (optional, can be set later)
+ * @param config - Chat client configuration (contains authToken and/or getAuthToken)
  * @returns Promise that resolves with the initialized SDK instance
  * @throws Error if SDK is already initialized
  */
-export declare function initSDK(config: ChatClientConfig, token?: string): Promise<ChatSDK>;
+export declare function initSDK(config: ChatClientConfig): Promise<ChatSDK>;
 /**
  * Get the current SDK instance
  * @returns The SDK instance

package/dist/utils/sdk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/utils/sdk.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMjE;;;;;;GAMG;AACH,wBAAsB,OAAO,CAC3B,MAAM,EAAE,gBAAgB,EACxB,KAAK,CAAC,EAAE,MAAM,GACb,OAAO,CAAC,OAAO,CAAC,CAmClB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,OAAO,CAKhC;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CAKpC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C"}
+{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/utils/sdk.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAMjE;;;;;GAKG;AACH,wBAAsB,OAAO,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,OAAO,CAAC,CA+BxE;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,OAAO,CAKhC;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CAKpC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C"}

package/dist/utils/sdk.js

@@ -13,12 +13,11 @@ const users_1 = require("../cache/actions/users");
 let sdkInstance = null;
 /**
  * Initialize the SDK singleton
- * @param config - Chat client configuration
- * @param token - Authentication token (optional, can be set later)
+ * @param config - Chat client configuration (contains authToken and/or getAuthToken)
  * @returns Promise that resolves with the initialized SDK instance
  * @throws Error if SDK is already initialized
  */
-async function initSDK(config, token) {
+async function initSDK(config) {
     if (sdkInstance)
         return sdkInstance;
     // Create SDK instance with React Native's WebSocket
@@ -26,13 +25,10 @@ async function initSDK(config, token) {
         ...config,
         wsImplementation: WebSocket
     });
-    // Set auth token if provided
-    if (token) {
-        await sdkInstance.setAuthToken(token);
-    }
     // Connect WebSocket
     await sdkInstance.connect();
     // Fetch and cache current user data
+    // requireAuthToken will be called by getMe(), which handles token fetch/renewal
     const me = await sdkInstance.getMe();
     (0, users_1.setCurrentUser)({
         id: me.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@college-africa/chat-ui-native",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React Native chat UI library for College Africa",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,7 +36,7 @@
     "event-target-polyfill": "^0.0.4",
     "formik": "^2.4.5",
     "realm": "^12.0.0",
-    "@college-africa/chat-sdk": "1.1.2",
+    "@college-africa/chat-sdk": "1.2.0",
     "yup": "^1.3.3"
   },
   "devDependencies": {