@qafka/react-native 2.0.0

package/dist/components/Qafka.js

@@ -0,0 +1,493 @@
+"use strict";
+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.Qafka = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const defaults_1 = require("./defaults");
+const useSDK_1 = require("../hooks/useSDK");
+const useContextManager_1 = require("../hooks/useContextManager");
+const useChatMessages_1 = require("../hooks/useChatMessages");
+const useProjectTheme_1 = require("../hooks/useProjectTheme");
+const Qafka_styles_1 = require("./Qafka.styles");
+const Qafka_handlers_1 = require("./Qafka.handlers");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const QafkaSDK_1 = require("../QafkaSDK");
+const validate_end_user_1 = require("../validate-end-user");
+const ChatPage_1 = require("./ChatPage");
+const VoicePage_1 = require("./VoicePage");
+const useVoiceChat_1 = require("../hooks/useVoiceChat");
+const { width: SCREEN_WIDTH } = react_native_1.Dimensions.get('window');
+/**
+ * Qafka Component
+ *
+ * Main chat widget component with full UI and functionality.
+ *
+ * Features:
+ * - Three display modes: fullscreen, inline, floating
+ * - Complete chat UI with message list and input
+ * - Integration with QafkaSDK for backend communication
+ * - Auto-loading theme from API
+ * - Theme support (light/dark) with overrides
+ * - Typing indicators and streaming responses
+ * - Tool Registry integration
+ * - Message metadata display
+ * - Voice chat mode (swipe to access)
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Qafka
+ * mode="fullscreen"
+ * theme="light"
+ * />
+ * ```
+ *
+ * @example With theme override
+ * ```tsx
+ * <Qafka
+ * themeOverride={{
+ * colors: {
+ * userBubble: '#FF0000',
+ * userBubbleText: '#FFFFFF'
+ * }
+ * }}
+ * />
+ * ```
+ */
+exports.Qafka = (0, react_1.forwardRef)(function Qafka({ style, apiUrl: apiUrlProp, subProjectId, projectId, locale, mode = 'fullscreen', theme: themeName = 'light', customTheme, themeOverride, isAuthenticated, endUserId, endUserData, enableStreaming = true, voiceEnabled: voiceEnabledProp = true, context: userContext, contextDescription, components: customComponents, showTimestamps = true, placeholder = 'Type a message...', maxMessageLength = 500, greetingMessage, onReady, onMessageSent, onResponseReceived, onError, onNavigationSuggest, onNavigationAction, onExternalSuggestion, onCardDeepLink, onCardSuggestMessage, onCardExternalNavigation, onCardShare, onCardCopy, onCardToolTrigger, onCardCTAClick, onToolSuggested, onToolDataRequested, onActionResult, onStepCompleted, onFileUploadRequest, onExtractionResult, onClose, onBack, CloseComponent, BackComponent, navigationLabelFormat, NavigationButtonComponent, voiceComponents, voiceTranscript = 'centered', toolRenderMode, }, ref) {
+    // === ALL HOOKS FIRST (Rules of Hooks compliance) ===
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const { sdkReady, error: sdkError, resolvedApiKey, resolvedApiUrl } = (0, useSDK_1.useSDK)({
+        apiUrl: apiUrlProp,
+        subProjectId,
+        projectId,
+        locale,
+        onReady,
+        onError,
+    });
+    const { theme, isLoadingTheme, greeting: apiGreeting, initialMessage: initialMessageText, isInitialMessageEnabled, voiceEnabled, } = (0, useProjectTheme_1.useProjectTheme)({
+        sdkReady,
+        themeName,
+        customTheme,
+        themeOverride,
+        subProjectId,
+    });
+    const isVoiceAvailable = voiceEnabled && voiceEnabledProp !== false;
+    const componentRegistry = {
+        ...defaults_1.defaultComponentRegistry,
+        ...customComponents,
+    };
+    const enrichedContext = (0, react_1.useMemo)(() => {
+        if (isAuthenticated === undefined)
+            return userContext;
+        return { ...userContext, isAuthenticated };
+    }, [userContext, isAuthenticated]);
+    // Validate at mount and on every prop change. Throwing here bubbles
+    // into the host app's error boundary the same way useSDK throws for
+    // missing project config; the message is actionable enough for the
+    // developer to fix the placeholder without inspecting our internals.
+    const validatedEndUserId = (0, react_1.useMemo)(() => (0, validate_end_user_1.validateEndUserId)(endUserId), [endUserId]);
+    const validatedEndUserData = (0, react_1.useMemo)(() => (0, validate_end_user_1.validateEndUserData)(endUserData), [endUserData]);
+    const { currentContext } = (0, useContextManager_1.useContextManager)({
+        initialContext: enrichedContext,
+        debounceMs: 500,
+    });
+    const voiceChat = (0, useVoiceChat_1.useVoiceChat)({
+        // Voice WebSocket still uses apiKey-based auth. In dev, the resolved
+        // developmentKey from qafka.config.js flows through. In production, this
+        // is null and voice will fail at WS handshake.
+        apiUrl: resolvedApiUrl || apiUrlProp || '',
+        apiKey: resolvedApiKey || '',
+        userContext: currentContext,
+        contextDescription,
+        onToolSuggested,
+        toolRenderMode,
+        // Forward the device-attestation session token so the realtime WS
+        // matches the auth posture of HTTP requests. Without this, the server
+        // rejects voice connections in production with `SESSION_TOKEN_REQUIRED`.
+        getSessionToken: () => QafkaSDK_1.QafkaSDK.getInstance().getSessionToken(),
+        // Text/voice parity: the realtime gateway expects the same end-user
+        // identity the HTTP chat path sends, so the row it creates can be
+        // grouped with text-mode rows for the same user.
+        endUserId: validatedEndUserId,
+        endUserData: validatedEndUserData,
+    });
+    const { toolStatus: voiceToolStatus, renderedTools: voiceRenderedTools, transcriptOverrideForTurn, setToolStatusManually, clearRenderedTools, connect: voiceConnect, disconnect: voiceDisconnect, pauseMic: voicePauseMic, resumeMic: voiceResumeMic, isMuted: voiceIsMuted, mute: voiceMute, unmute: voiceUnmute, toggleMute: voiceToggleMute, } = voiceChat;
+    const { messages, isTyping, isSending, streamingMessage, toolStatus, flatListRef, handleSend, setMessages, setIsTyping, setStreamingMessage, } = (0, useChatMessages_1.useChatMessages)({
+        enableStreaming,
+        context: currentContext,
+        contextDescription,
+        onMessageSent,
+        onResponseReceived,
+        onError,
+        onNavigationSuggest,
+        onToolSuggested,
+        onActionResult,
+        onStepCompleted,
+        onFileUploadRequest,
+        onExtractionResult,
+        navigationLabelFormat,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setLoading(visible, message) {
+            setToolStatusManually(visible
+                ? { toolKey: 'manual', loadingMessage: message ?? 'Processing…' }
+                : null);
+        },
+        clearRenderedTools() {
+            clearRenderedTools();
+        },
+        sendMessage(text) {
+            // Fire-and-forget; consumer doesn't need to await the streaming reply.
+            void handleSend(text);
+        },
+        async connectVoice() {
+            await voiceConnect();
+        },
+        async disconnectVoice() {
+            await voiceDisconnect();
+        },
+        async pauseMic() {
+            await voicePauseMic();
+        },
+        async resumeMic() {
+            await voiceResumeMic();
+        },
+        mute() {
+            voiceMute();
+        },
+        unmute() {
+            voiceUnmute();
+        },
+        toggleMute() {
+            voiceToggleMute();
+        },
+        get isMuted() {
+            return voiceIsMuted;
+        },
+    }), [
+        setToolStatusManually,
+        clearRenderedTools,
+        handleSend,
+        voiceConnect,
+        voiceDisconnect,
+        voicePauseMic,
+        voiceResumeMic,
+        voiceMute,
+        voiceUnmute,
+        voiceToggleMute,
+        voiceIsMuted,
+    ]);
+    const [isInitialMessageLoading, setIsInitialMessageLoading] = (0, react_1.useState)(false);
+    const [keyboardHeight, setKeyboardHeight] = (0, react_1.useState)(0);
+    const scrollViewRef = (0, react_1.useRef)(null);
+    // Combine messages with streaming message for FlatList
+    const displayMessages = react_1.default.useMemo(() => {
+        if (streamingMessage) {
+            // Add streaming message as the last item
+            const streamingMsg = {
+                id: 'streaming-temp',
+                role: 'assistant',
+                text: streamingMessage,
+                content: streamingMessage,
+                timestamp: new Date(),
+                isStreaming: true, // Flag to identify streaming message
+            };
+            return [...messages, streamingMsg];
+        }
+        return messages;
+    }, [messages, streamingMessage]);
+    // Start a fresh conversation when the widget mounts.
+    (0, react_1.useEffect)(() => {
+        if (sdkReady) {
+            const startNewSession = async () => {
+                try {
+                    const sdk = QafkaSDK_1.QafkaSDK.getInstance();
+                    await sdk.startNewConversation();
+                }
+                catch (error) {
+                    // Silent error handling
+                }
+            };
+            startNewSession();
+        }
+    }, [sdkReady]);
+    // Tool Data Channel: register the partner resolver on the
+    // singleton-bound BackendService. Re-registers when the prop identity
+    // changes (e.g. when host swaps the closure on auth state change).
+    (0, react_1.useEffect)(() => {
+        if (!sdkReady)
+            return;
+        QafkaSDK_1.QafkaSDK.getInstance().setOnToolDataRequested(onToolDataRequested ?? null);
+        return () => {
+            // Clear on unmount/prop change so a stale closure can't be invoked
+            // against the next page's user state.
+            QafkaSDK_1.QafkaSDK.getInstance().setOnToolDataRequested(null);
+        };
+    }, [sdkReady, onToolDataRequested]);
+    // Push the validated end-user identity into the SDK singleton whenever
+    // the props (or their validated coercions) change. This is distinct
+    // from `userContext`: endUserId/endUserData live on a separate lane
+    // that never enters the AI prompt.
+    (0, react_1.useEffect)(() => {
+        if (!sdkReady)
+            return;
+        QafkaSDK_1.QafkaSDK.getInstance().setEndUser(validatedEndUserId, validatedEndUserData);
+    }, [sdkReady, validatedEndUserId, validatedEndUserData]);
+    // Trigger initial message when config is loaded and SDK is ready
+    (0, react_1.useEffect)(() => {
+        if (!sdkReady ||
+            !isInitialMessageEnabled ||
+            !initialMessageText ||
+            isInitialMessageLoading ||
+            isLoadingTheme) {
+            return;
+        }
+        const triggerInitialMessage = async () => {
+            setIsInitialMessageLoading(true);
+            setIsTyping(true);
+            try {
+                const sdk = QafkaSDK_1.QafkaSDK.getInstance();
+                if (enableStreaming) {
+                    let firstChunkReceived = false;
+                    await sdk.sendMessageStream(initialMessageText, (chunk) => {
+                        if (!firstChunkReceived) {
+                            firstChunkReceived = true;
+                        }
+                        setStreamingMessage((prev) => prev + chunk);
+                    }, (response) => {
+                        setIsTyping(false);
+                        setStreamingMessage('');
+                        const finalMessage = (response.text || '').trim();
+                        const aiMessage = {
+                            id: response.id || `initial-${Date.now()}`,
+                            role: 'assistant',
+                            text: finalMessage,
+                            content: finalMessage,
+                            timestamp: new Date(),
+                            metadata: {
+                                isInitialMessage: true,
+                            },
+                        };
+                        setMessages((prev) => [...prev, aiMessage]);
+                        setIsInitialMessageLoading(false);
+                    }, (err) => {
+                        setIsTyping(false);
+                        setStreamingMessage('');
+                        setIsInitialMessageLoading(false);
+                        if (__DEV__) {
+                            console.warn('[Qafka] Initial message error:', err.message);
+                        }
+                    }, currentContext, contextDescription, undefined, // onToolSuggestions
+                    true);
+                }
+                else {
+                    const response = await sdk.sendMessage(initialMessageText, currentContext, contextDescription, true);
+                    const aiMessage = {
+                        id: response.id || `initial-${Date.now()}`,
+                        role: 'assistant',
+                        text: response.text || '',
+                        content: response.text || '',
+                        timestamp: new Date(),
+                        metadata: {
+                            isInitialMessage: true,
+                        },
+                    };
+                    setMessages((prev) => [...prev, aiMessage]);
+                    setIsTyping(false);
+                    setIsInitialMessageLoading(false);
+                }
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.warn('[Qafka] Initial message failed:', error);
+                }
+                setIsTyping(false);
+                setIsInitialMessageLoading(false);
+            }
+        };
+        triggerInitialMessage();
+    }, [sdkReady, isInitialMessageEnabled, initialMessageText, isLoadingTheme]);
+    // Action handler
+    const handleActionClick = (0, Qafka_handlers_1.createActionHandler)({
+        onNavigationAction,
+        setMessages,
+    });
+    // External suggestion handler: prefer app-supplied callback, otherwise
+    // fall back to Linking.openURL (with fallbackUrl) via the default handler.
+    const handleExternalSuggestionPress = (0, react_1.useCallback)((suggestion) => {
+        if (onExternalSuggestion) {
+            onExternalSuggestion(suggestion);
+            return;
+        }
+        // fire-and-forget — default handler swallows errors internally
+        (0, Qafka_handlers_1.handleExternalSuggestionDefault)(suggestion);
+    }, [onExternalSuggestion]);
+    // Keyboard handling for Android
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS === 'android') {
+            const showSubscription = react_native_1.Keyboard.addListener('keyboardDidShow', (e) => {
+                setKeyboardHeight(e.endCoordinates.height);
+            });
+            const hideSubscription = react_native_1.Keyboard.addListener('keyboardDidHide', () => {
+                setKeyboardHeight(0);
+            });
+            return () => {
+                showSubscription.remove();
+                hideSubscription.remove();
+            };
+        }
+    }, []);
+    // Handle horizontal scroll between chat and voice pages
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        const pageIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+        if (pageIndex === 1) {
+            voiceChat.connect();
+        }
+        else {
+            voiceChat.pauseMic();
+        }
+    }, [voiceChat]);
+    // Card CTA host callbacks bundle. Stable reference via useMemo
+    // so MessageBubble's CardRuntimeProvider doesn't re-mount on every render.
+    // MUST be declared before the conditional returns below — Rules of Hooks.
+    const cardHostCallbacks = (0, react_1.useMemo)(() => ({
+        onDeepLink: onCardDeepLink,
+        onSuggestMessage: onCardSuggestMessage,
+        onExternalNavigation: onCardExternalNavigation,
+        onShare: onCardShare,
+        onCopy: onCardCopy,
+        onToolTrigger: onCardToolTrigger,
+    }), [
+        onCardDeepLink,
+        onCardSuggestMessage,
+        onCardExternalNavigation,
+        onCardShare,
+        onCardCopy,
+        onCardToolTrigger,
+    ]);
+    const cardLifecycle = (0, react_1.useMemo)(() => ({ onCTAClick: onCardCTAClick }), [onCardCTAClick]);
+    // Styles
+    const styles = (0, Qafka_styles_1.getWidgetStyles)(theme);
+    // === CONDITIONAL RETURNS (after all hooks) ===
+    // No blank-canvas gate here: ChatPage renders even before theme/sdkReady,
+    // showing the cached greeting (if any) with a TypingIndicator gate and a
+    // hidden input until the SDK is ready to accept messages.
+    // Shared ChatPage props
+    const chatPageProps = {
+        messages,
+        displayMessages,
+        isTyping,
+        isSending,
+        streamingMessage,
+        toolStatus,
+        sdkReady,
+        sdkError,
+        theme,
+        handleSend,
+        handleActionClick,
+        handleExternalSuggestionPress,
+        flatListRef,
+        placeholder,
+        maxMessageLength,
+        showTimestamps,
+        greetingMessage,
+        apiGreeting,
+        isInitialMessageEnabled,
+        initialMessageText,
+        componentRegistry,
+        onBack,
+        onClose,
+        BackComponent,
+        CloseComponent,
+        NavigationButtonComponent,
+        cardHostCallbacks,
+        cardLifecycle,
+    };
+    // The outer container applies safe-area padding (paddingTop:insets.top etc).
+    // The horizontal pager ScrollView clips its children, so any negative-margin
+    // trick applied INSIDE a page (e.g. VoicePage's Background) can't escape the
+    // ScrollView viewport to paint into the notch/home-indicator bands. Fix:
+    // wrap the ScrollView itself with negative margins so the ScrollView spans
+    // the full screen, then re-apply safe-area padding to the ChatPage slot
+    // (which expects to render under nav buttons / above home indicator).
+    // VoicePage paints its Background edge-to-edge across its full-screen slot
+    // and applies safe-area padding to its inner content directly.
+    const outerPaddingTop = insets.top + (react_native_1.Platform.OS === 'android' ? 20 : 0);
+    const outerPaddingBottom = react_native_1.Platform.OS === 'android' ? 0 : insets.bottom;
+    const chatContent = isVoiceAvailable ? (<react_native_1.View style={{
+            flex: 1,
+            marginTop: -outerPaddingTop,
+            marginBottom: -outerPaddingBottom,
+        }}>
+ <react_native_1.ScrollView ref={scrollViewRef} horizontal pagingEnabled showsHorizontalScrollIndicator={false} onMomentumScrollEnd={handleScroll} scrollEventThrottle={16} keyboardShouldPersistTaps="handled" style={{ flex: 1 }}>
+ {/* Page 0: Chat — re-apply safe-area padding inside this slot. */}
+ <react_native_1.View style={{
+            width: SCREEN_WIDTH,
+            flex: 1,
+            paddingTop: outerPaddingTop,
+            paddingBottom: outerPaddingBottom,
+        }}>
+ <ChatPage_1.ChatPage {...chatPageProps}/>
+ </react_native_1.View>
+
+ {/* Page 1: Voice — VoicePage paints Background edge-to-edge and
+        handles its own internal safe-area padding for orb/transcript. */}
+ <VoicePage_1.VoicePage state={voiceChat.state} transcript={voiceChat.transcript} userTranscript={voiceChat.userTranscript} transcriptHistory={voiceChat.transcriptHistory} transcriptMode={voiceTranscript} amplitude={voiceChat.amplitude} theme={theme} voiceComponents={voiceComponents} toolStatus={voiceToolStatus} renderedTools={voiceRenderedTools} registeredComponents={customComponents} transcriptOverrideForTurn={transcriptOverrideForTurn} DataChipListComponent={voiceComponents?.dataChipList} isMuted={voiceIsMuted} onToggleMute={voiceToggleMute}/>
+ </react_native_1.ScrollView>
+ </react_native_1.View>) : (<ChatPage_1.ChatPage {...chatPageProps}/>);
+    return (<react_native_1.View style={[
+            {
+                flex: 1,
+                paddingTop: outerPaddingTop,
+                paddingBottom: outerPaddingBottom,
+                backgroundColor: theme.colors.background,
+            },
+            style,
+        ]}>
+ {react_native_1.Platform.OS === 'ios' ? (<react_native_1.KeyboardAvoidingView style={styles.containerStyle} behavior="padding" keyboardVerticalOffset={0}>
+ {chatContent}
+ </react_native_1.KeyboardAvoidingView>) : (<react_native_1.View style={[
+                styles.containerStyle,
+                {
+                    paddingBottom: keyboardHeight > 0
+                        ? keyboardHeight + insets.bottom
+                        : insets.bottom,
+                },
+            ]}>
+ {chatContent}
+ </react_native_1.View>)}
+ </react_native_1.View>);
+});

package/dist/components/Qafka.styles.d.ts

@@ -0,0 +1,19 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { Theme } from '../themes';
+/**
+ * Styles for Qafka component
+ */
+export declare const getWidgetStyles: (theme: Theme) => {
+    containerStyle: ViewStyle;
+    headerStyle: ViewStyle;
+    headerTextStyle: TextStyle;
+    messageListStyle: ViewStyle;
+    emptyStateStyle: ViewStyle;
+    emptyStateTextStyle: TextStyle;
+    errorStyle: ViewStyle;
+    errorTextStyle: TextStyle;
+    typingIndicatorContainer: ViewStyle;
+    navigationContainer: ViewStyle;
+    navButton: ViewStyle;
+    navButtonText: TextStyle;
+};

package/dist/components/Qafka.styles.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWidgetStyles = void 0;
+const fontUtils_1 = require("../utils/fontUtils");
+/**
+ * Styles for Qafka component
+ */
+const getWidgetStyles = (theme) => {
+    const containerStyle = {
+        flex: 1,
+        backgroundColor: theme.colors.background,
+    };
+    const headerStyle = {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.md,
+        backgroundColor: theme.colors.surface,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.border,
+        ...theme.shadows.small,
+    };
+    const headerTextStyle = {
+        fontSize: theme.typography.fontSize.lg,
+        fontWeight: theme.typography.fontWeight.semibold,
+        color: theme.colors.text,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'semibold'),
+    };
+    const messageListStyle = {
+        paddingHorizontal: theme.spacing.md,
+        paddingTop: theme.spacing.md,
+        paddingBottom: theme.spacing.md,
+    };
+    const emptyStateStyle = {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing.xl,
+    };
+    const emptyStateTextStyle = {
+        fontSize: theme.typography.fontSize.md,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    const errorStyle = {
+        backgroundColor: theme.colors.error,
+        padding: theme.spacing.sm,
+        margin: theme.spacing.md,
+        borderRadius: theme.borderRadius.md,
+    };
+    const errorTextStyle = {
+        color: theme.colors.textInverse,
+        fontSize: theme.typography.fontSize.sm,
+        textAlign: 'center',
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    const typingIndicatorContainer = {
+        paddingHorizontal: theme.spacing.md,
+    };
+    const navigationContainer = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacing.md,
+        // Add some top padding to avoid status bar overlap if not handled by safe area
+        // but typically the parent container handles this. We'll use safe area value in component.
+    };
+    const navButton = {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: theme.colors.surface,
+        ...theme.shadows.small,
+    };
+    const navButtonText = {
+        fontSize: 24,
+        color: theme.colors.text,
+        lineHeight: 28,
+        fontWeight: 'bold',
+    };
+    return {
+        containerStyle,
+        headerStyle,
+        headerTextStyle,
+        messageListStyle,
+        emptyStateStyle,
+        emptyStateTextStyle,
+        errorStyle,
+        errorTextStyle,
+        typingIndicatorContainer,
+        navigationContainer,
+        navButton,
+        navButtonText,
+    };
+};
+exports.getWidgetStyles = getWidgetStyles;