@qafka/react-native 2.0.0

package/dist/components/MessageBubble.js

@@ -0,0 +1,384 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBubble = MessageBubble;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const MarkdownText_1 = require("./MarkdownText");
+const fontUtils_1 = require("../utils/fontUtils");
+const ActionResultBadge_1 = require("./ActionResultBadge");
+const StepProgressIndicator_1 = require("./StepProgressIndicator");
+const SuggestionButton_1 = require("./SuggestionButton");
+const CardRenderer_1 = require("../cards/renderer/CardRenderer");
+/**
+ * MessageBubble Component
+ *
+ * Displays a chat message bubble with support for:
+ * - User and AI messages with different styles
+ * - Timestamps
+ * - Theming support
+ *
+ * @example
+ * ```tsx
+ * <MessageBubble
+ * message="Hello, how can I help?"
+ * role="assistant"
+ * timestamp={new Date()}
+ * theme={lightTheme}
+ * showTimestamp
+ * />
+ * ```
+ */
+function MessageBubble({ message, role, timestamp, theme, showTimestamp = true, actions, onActionPress, componentRegistry, toolDefinition, toolResultData, NavigationButtonComponent, actionResults, completedSteps, externalSuggestions, onExternalPress, card, cardHostCallbacks, cardLifecycle, }) {
+    const isUser = role === 'user';
+    // Render a tool result using a partner-provided custom component
+    // (component registry path).
+    const renderToolResult = () => {
+        const uiConfig = toolDefinition?.uiConfig;
+        const response = toolDefinition?.response ?? (uiConfig ? {
+            type: uiConfig.responseType,
+            dataPath: uiConfig.dataPath,
+            itemComponent: uiConfig.itemComponent,
+            maxItems: uiConfig.maxItems,
+            layout: uiConfig.layout,
+            position: uiConfig.position,
+        } : undefined);
+        const position = response?.position || 'after';
+        if (!toolDefinition || !componentRegistry) {
+            return null;
+        }
+        if (!response) {
+            return null;
+        }
+        // uiConfig-only tools may have no data — render component with empty object
+        const toolResultDataResolved = toolResultData ?? {};
+        const componentName = response.itemComponent;
+        if (!componentName || !componentRegistry[componentName]) {
+            return null;
+        }
+        const CustomComponent = componentRegistry[componentName];
+        // Extract data from response using dataPath
+        let dataToRender = toolResultDataResolved;
+        if (response.dataPath) {
+            const pathParts = response.dataPath.split('.');
+            for (const part of pathParts) {
+                dataToRender = dataToRender?.[part];
+            }
+        }
+        // Handle different response types
+        if (response.type === 'list' && Array.isArray(dataToRender)) {
+            // Limit items if maxItems is set
+            const items = response.maxItems
+                ? dataToRender.slice(0, response.maxItems)
+                : dataToRender;
+            // Check layout preference (default: vertical)
+            const layout = response.layout || 'vertical';
+            // If custom layout, pass entire array to component
+            if (layout === 'custom') {
+                return (<react_native_1.View style={{ marginTop: theme.spacing.md }}>
+ <CustomComponent data={items} // Full array
+                 tool={toolDefinition} theme={theme}/>
+ {response.maxItems && dataToRender.length > response.maxItems && (<react_native_1.Text style={{
+                            fontSize: theme.typography.fontSize.xs,
+                            color: theme.colors.textSecondary,
+                            marginTop: theme.spacing.xs,
+                        }}>
+ ...and {dataToRender.length - response.maxItems} more
+ </react_native_1.Text>)}
+ </react_native_1.View>);
+            }
+            // Horizontal scroll layout
+            if (layout === 'horizontal') {
+                return (<react_native_1.View style={{
+                        marginTop: theme.spacing.md,
+                        marginBottom: theme.spacing.md,
+                    }}>
+ <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{
+                        flexGrow: 0,
+                        width: react_native_1.Dimensions.get('screen').width,
+                        marginLeft: -theme.spacing.md,
+                    }} contentContainerStyle={{
+                        paddingRight: theme.spacing.md,
+                        paddingLeft: theme.spacing.md,
+                        gap: theme.spacing.md,
+                    }}>
+ {items.map((item, index) => (<react_native_1.View key={index} style={{}}>
+ <CustomComponent data={item} tool={toolDefinition} theme={theme}/>
+ </react_native_1.View>))}
+ </react_native_1.ScrollView>
+ {response.maxItems && dataToRender.length > response.maxItems && (<react_native_1.Text style={{
+                            fontSize: theme.typography.fontSize.xs,
+                            color: theme.colors.textSecondary,
+                            marginTop: theme.spacing.xs,
+                        }}>
+ ...and {dataToRender.length - response.maxItems} more
+ </react_native_1.Text>)}
+ </react_native_1.View>);
+            }
+            // Default vertical layout
+            return (<react_native_1.View style={{ marginTop: theme.spacing.md }}>
+ {items.map((item, index) => {
+                    return (<react_native_1.View key={index} style={{ marginBottom: theme.spacing.sm }}>
+ <CustomComponent data={item} tool={toolDefinition} theme={theme}/>
+ </react_native_1.View>);
+                })}
+ {response.maxItems && dataToRender.length > response.maxItems && (<react_native_1.Text style={{
+                        fontSize: theme.typography.fontSize.xs,
+                        color: theme.colors.textSecondary,
+                        marginTop: theme.spacing.xs,
+                    }}>
+ ...and {dataToRender.length - response.maxItems} more
+ </react_native_1.Text>)}
+ </react_native_1.View>);
+        }
+        else if (response.type === 'card' || response.type === 'detail') {
+            // Single item rendering
+            return (<react_native_1.View style={{ marginTop: theme.spacing.md }}>
+ <CustomComponent data={dataToRender} tool={toolDefinition} theme={theme}/>
+ </react_native_1.View>);
+        }
+        else if (response.type === 'table' && Array.isArray(dataToRender)) {
+            // Table rendering (simplified for now)
+            return (<react_native_1.View style={{ marginTop: theme.spacing.md }}>
+ <CustomComponent data={dataToRender} tool={toolDefinition} theme={theme}/>
+ </react_native_1.View>);
+        }
+        return null;
+    };
+    // Format timestamp
+    const formatTime = (date) => {
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    };
+    const containerStyle = {
+        alignSelf: isUser ? 'flex-end' : 'flex-start',
+        maxWidth: isUser
+            ? `${theme.messages?.user.maxWidth || 85}%`
+            : `${theme.messages?.ai.maxWidth || 85}%`,
+        marginBottom: theme.spacing.sm,
+    };
+    const bubbleStyle = {
+        backgroundColor: isUser ? theme.colors.userBubble : theme.colors.aiBubble,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: isUser
+            ? theme.messages?.user.padding || theme.spacing.md
+            : theme.messages?.ai.padding || theme.spacing.md,
+        paddingVertical: theme.spacing.sm + 2,
+    };
+    const messageTextStyle = {
+        color: isUser ? theme.colors.userBubbleText : theme.colors.aiBubbleText,
+        fontSize: theme.typography.fontSize.md,
+        lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+        fontWeight: theme.typography.fontWeight.regular,
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    const timestampStyle = {
+        fontSize: theme.typography.fontSize.xs,
+        color: theme.colors.textSecondary,
+        marginTop: theme.spacing.xs,
+        alignSelf: isUser ? 'flex-end' : 'flex-start',
+        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+    };
+    // Check if this is a tool response message (no text, only tool data)
+    const isToolResponseOnly = toolDefinition && !message.trim();
+    // Check position preference for tool result (default: after).
+    // Cards honor the same position preference as the tool's existing uiConfig
+    // so partners control placement from one place.
+    const uiConfigForPosition = toolDefinition?.uiConfig;
+    const toolPosition = toolDefinition?.response?.position || uiConfigForPosition?.position || 'after';
+    // Card render block (full-width, breaks out of bubble maxWidth).
+    // Honors uiConfig.responseType / dataPath / maxItems / layout the same way the
+    // app-component renderer path does — same outer shape, only the leaf renderer differs.
+    const renderCard = () => {
+        if (isUser || !card) {
+            return null;
+        }
+        const uiConfigForCard = toolDefinition?.uiConfig;
+        const responseType = uiConfigForCard?.responseType ?? toolDefinition?.response?.type ?? 'detail';
+        const dataPath = uiConfigForCard?.dataPath ?? toolDefinition?.response?.dataPath;
+        const maxItems = uiConfigForCard?.maxItems ?? toolDefinition?.response?.maxItems ?? 10;
+        const layout = uiConfigForCard?.layout ?? toolDefinition?.response?.layout ?? 'vertical';
+        // Resolve dataPath against the full envelope payload.
+        let scoped = card.data;
+        if (dataPath && typeof dataPath === 'string') {
+            for (const part of dataPath.split('.')) {
+                scoped = scoped?.[part];
+                if (scoped == null)
+                    break;
+            }
+        }
+        // Determine items: list mode iterates the resolved array; everything else
+        // renders a single card with the scoped (or full) data.
+        const isListMode = responseType === 'list' && Array.isArray(scoped);
+        const items = isListMode
+            ? scoped.slice(0, maxItems)
+            : [scoped ?? card.data];
+        const overflowCount = isListMode
+            ? Math.max(0, scoped.length - items.length)
+            : 0;
+        if (items.length === 0) {
+            if (__DEV__) {
+                console.warn('[Qafka.cards] renderCard returning null — no items to render', {
+                    isListMode,
+                    scopedKind: Array.isArray(scoped) ? 'array' : typeof scoped,
+                    scopedLength: Array.isArray(scoped) ? scoped.length : 'n/a',
+                });
+            }
+            return null;
+        }
+        // Pass iterationIndex only when list-mode; CardRenderer threads it down
+        // to QButton so CTA telemetry events know which row was clicked. In
+        // detail/single mode, iterationIndex stays undefined so partners don't
+        // see a misleading `0` in their analytics.
+        const renderOne = (data, key) => (<CardRenderer_1.CardRenderer key={key} definition={card.definition} data={data} cardTemplateId={card.templateId} cardSlug={card.templateSlug} hostCallbacks={cardHostCallbacks} lifecycle={cardLifecycle} iterationIndex={isListMode ? key : undefined}/>);
+        const overflowLabel = overflowCount > 0 && (<react_native_1.Text style={{
+                fontSize: theme.typography.fontSize.xs,
+                color: theme.colors.textSecondary,
+                fontStyle: 'italic',
+                marginTop: theme.spacing.xs,
+                fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'regular'),
+            }}>
+ …and {overflowCount} more
+ </react_native_1.Text>);
+        if (items.length === 1) {
+            return (<react_native_1.View style={{ marginTop: theme.spacing.sm, alignSelf: 'stretch' }}>
+ {renderOne(items[0], 0)}
+ {overflowLabel}
+ </react_native_1.View>);
+        }
+        if (layout === 'horizontal') {
+            // Width policy: respect an explicit width on the card definition's root
+            // QView style (partner control). Fall back to 280 so default horizontal
+            // lists keep a sensible card width.
+            const rootStyle = card.definition?.root?.style;
+            const explicitWidth = rootStyle && typeof rootStyle.width === 'number'
+                ? rootStyle.width
+                : undefined;
+            return (<react_native_1.View style={{ marginTop: theme.spacing.sm, alignSelf: 'stretch' }}>
+ <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: theme.spacing.md }}>
+ {items.map((it, i) => (<react_native_1.View key={i} style={{
+                        marginRight: theme.spacing.sm,
+                        width: explicitWidth ?? 280,
+                    }}>
+ {renderOne(it, i)}
+ </react_native_1.View>))}
+ </react_native_1.ScrollView>
+ {overflowLabel}
+ </react_native_1.View>);
+        }
+        return (<react_native_1.View style={{
+                marginTop: theme.spacing.sm,
+                alignSelf: 'stretch',
+                gap: theme.spacing.sm,
+            }}>
+ {items.map(renderOne)}
+ {overflowLabel}
+ </react_native_1.View>);
+    };
+    return (<react_native_1.View>
+ <react_native_1.View style={containerStyle}>
+ {/* Card / Tool Result BEFORE Message - if position is "before" */}
+ {!isUser && toolPosition === 'before' && !isToolResponseOnly && (card ? renderCard() : renderToolResult())}
+
+ {/* Only show bubble if there's actual message text OR actions OR external suggestions */}
+ {(!isToolResponseOnly ||
+            (actions && actions.length > 0) ||
+            (externalSuggestions && externalSuggestions.length > 0)) && (<react_native_1.View style={bubbleStyle}>
+ {message.trim() && (<MarkdownText_1.MarkdownText style={messageTextStyle} theme={theme} isUserMessage={isUser}>
+ {message}
+ </MarkdownText_1.MarkdownText>)}
+
+ {/* Action Result Badges */}
+ {!isUser && actionResults && actionResults.length > 0 && (<ActionResultBadge_1.ActionResultBadge results={actionResults} theme={theme}/>)}
+
+ {/* Step Progress Indicator */}
+ {!isUser && completedSteps && completedSteps.length > 0 && (<StepProgressIndicator_1.StepProgressIndicator steps={completedSteps} theme={theme}/>)}
+
+ {/* Action Buttons - Inside bubble, after metadata */}
+ {!isUser && actions && actions.length > 0 && (<react_native_1.View style={{ marginTop: theme.spacing.md, gap: theme.spacing.xs }}>
+ {actions.map((action) => {
+                    // Use custom NavigationButtonComponent for navigation actions
+                    if (action.type === 'navigation' && NavigationButtonComponent) {
+                        return (<NavigationButtonComponent key={action.id} screenName={action.data?.screenName || ''} suggestion={action.data} onPress={() => onActionPress?.(action)} theme={theme} style={action.style} label={action.label} icon={action.icon}/>);
+                    }
+                    // Default button rendering for other action types or when no custom component
+                    const getButtonColor = () => {
+                        switch (action.style) {
+                            case 'primary':
+                                return theme.colors.primary;
+                            case 'success':
+                                return '#10b981'; // green
+                            case 'danger':
+                                return '#ef4444'; // red
+                            case 'warning':
+                                return '#f59e0b'; // orange
+                            case 'secondary':
+                            default:
+                                return theme.colors.textSecondary;
+                        }
+                    };
+                    const actionButtonStyle = {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: getButtonColor(),
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: theme.spacing.sm,
+                        borderRadius: theme.borderRadius.md,
+                        marginTop: theme.spacing.xs,
+                        ...theme.shadows.small,
+                    };
+                    const actionButtonTextStyle = {
+                        color: '#ffffff',
+                        fontSize: theme.typography.fontSize.sm,
+                        fontWeight: theme.typography.fontWeight.medium,
+                        marginLeft: action.icon ? theme.spacing.xs : 0,
+                        fontFamily: (0, fontUtils_1.getFontFamily)(theme, 'medium'),
+                    };
+                    return (<react_native_1.TouchableOpacity key={action.id} style={actionButtonStyle} onPress={() => {
+                            if (onActionPress) {
+                                onActionPress(action);
+                            }
+                            else if (action.type === 'navigation') {
+                                try {
+                                    const { router } = require('expo-router');
+                                    const raw = action.data?.route || action.data?.screenName || '';
+                                    const route = raw.startsWith('/') ? raw : `/${raw}`;
+                                    router.push(route);
+                                }
+                                catch { /* no-op */ }
+                            }
+                        }} activeOpacity={0.7}>
+ {action.icon && (<react_native_1.Text style={{ fontSize: 16 }}>{action.icon}</react_native_1.Text>)}
+ <react_native_1.Text style={actionButtonTextStyle}>{action.label}</react_native_1.Text>
+ </react_native_1.TouchableOpacity>);
+                })}
+ </react_native_1.View>)}
+
+ {/* External Suggestion Buttons (WhatsApp, phone, map, …) */}
+ {!isUser &&
+                externalSuggestions &&
+                externalSuggestions.length > 0 && (<react_native_1.View style={{
+                    marginTop: theme.spacing.md,
+                    gap: theme.spacing.xs,
+                }}>
+ {externalSuggestions.map((ext) => (<SuggestionButton_1.SuggestionButton key={ext.id} suggestion={{ kind: 'external', data: ext }} onPress={() => onExternalPress?.(ext)} theme={theme}/>))}
+ </react_native_1.View>)}
+ </react_native_1.View>)}
+
+ {/* Tool Result Rendering:
+        * - If tool response only (no message text): always show the tool
+        * - If there's a message: show tool AFTER message if position is "after" (default)
+        */}
+ </react_native_1.View>
+
+ {/* AFTER position (default): card replaces tool result if both apply */}
+ {!isUser && (isToolResponseOnly || toolPosition === 'after') && (card ? renderCard() : renderToolResult())}
+
+ {/* Timestamp */}
+ {showTimestamp && (<react_native_1.Text style={timestampStyle}>{formatTime(timestamp)}</react_native_1.Text>)}
+ </react_native_1.View>);
+}

package/dist/components/NavigationSuggestion.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Theme } from '../themes';
+interface NavigationSuggestionCardProps {
+    screenName: string;
+    message?: string;
+    onAccept: () => void;
+    onDismiss: () => void;
+    theme: Theme;
+}
+export declare function NavigationSuggestionCard({ screenName, message, onAccept, onDismiss, theme, }: NavigationSuggestionCardProps): React.JSX.Element;
+export {};

package/dist/components/NavigationSuggestion.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationSuggestionCard = NavigationSuggestionCard;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function NavigationSuggestionCard({ screenName, message, onAccept, onDismiss, theme, }) {
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                backgroundColor: theme.colors.surface,
+                borderColor: theme.colors.primary,
+            },
+        ]}>
+ {/* Icon */}
+ <react_native_1.View style={styles.iconContainer}>
+ <react_native_1.Text style={styles.icon}>🧭</react_native_1.Text>
+ </react_native_1.View>
+
+ {/* Content */}
+ <react_native_1.View style={styles.content}>
+ <react_native_1.Text style={[styles.title, { color: theme.colors.text }]}>
+ Navigate to {screenName}
+ </react_native_1.Text>
+ {message && (<react_native_1.Text style={[styles.message, { color: theme.colors.textSecondary }]} numberOfLines={2}>
+ {message}
+ </react_native_1.Text>)}
+ </react_native_1.View>
+
+ {/* Actions */}
+ <react_native_1.View style={styles.actions}>
+ <react_native_1.TouchableOpacity style={[
+            styles.button,
+            styles.dismissButton,
+            { borderColor: theme.colors.border || '#E0E0E0' },
+        ]} onPress={onDismiss} activeOpacity={0.7}>
+ <react_native_1.Text style={[styles.buttonText, { color: theme.colors.textSecondary }]}>
+ Dismiss
+ </react_native_1.Text>
+ </react_native_1.TouchableOpacity>
+
+ <react_native_1.TouchableOpacity style={[
+            styles.button,
+            styles.acceptButton,
+            { backgroundColor: theme.colors.primary },
+        ]} onPress={onAccept} activeOpacity={0.8}>
+ <react_native_1.Text style={[styles.buttonText, { color: '#FFFFFF' }]}>Go</react_native_1.Text>
+ </react_native_1.TouchableOpacity>
+ </react_native_1.View>
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        padding: 12,
+        borderRadius: 12,
+        borderWidth: 1,
+        marginHorizontal: 16,
+        marginVertical: 8,
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        fontSize: 24,
+    },
+    content: {
+        flex: 1,
+        marginRight: 8,
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    message: {
+        fontSize: 13,
+        marginBottom: 2,
+    },
+    actions: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    button: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 16,
+        minWidth: 60,
+        alignItems: 'center',
+    },
+    dismissButton: {
+        borderWidth: 1,
+    },
+    acceptButton: {
+    // backgroundColor set from theme
+    },
+    buttonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});

package/dist/components/Qafka.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { QafkaProps, QafkaHandle } from './Qafka.types';
+/**
+ * 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'
+ * }
+ * }}
+ * />
+ * ```
+ */
+export declare const Qafka: React.ForwardRefExoticComponent<QafkaProps & React.RefAttributes<QafkaHandle>>;

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

@@ -0,0 +1,21 @@
+import { ChatMessage } from '../types/chat';
+import { ExternalSuggestion } from '../types/external-navigation';
+import { NavigationSuggestion } from '../types/navigation';
+/**
+ * Default external suggestion handler.
+ *
+ * Tries to open the primary URL via `Linking.openURL`. Falls back to
+ * `fallbackUrl` when `canOpenURL` reports the URL is not handleable by the
+ * device (e.g. the target app isn't installed). Errors are swallowed — the
+ * host app can observe failures by providing its own `onExternalSuggestion`
+ * callback.
+ */
+export declare function handleExternalSuggestionDefault(s: ExternalSuggestion): Promise<void>;
+export interface ActionHandlerOptions {
+    onNavigationAction?: (suggestion: NavigationSuggestion) => void;
+    setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+}
+/**
+ * Handle action button clicks (navigation only).
+ */
+export declare const createActionHandler: (options: ActionHandlerOptions) => (action: any) => void;

package/dist/components/Qafka.handlers.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createActionHandler = void 0;
+exports.handleExternalSuggestionDefault = handleExternalSuggestionDefault;
+const react_native_1 = require("react-native");
+/**
+ * Default external suggestion handler.
+ *
+ * Tries to open the primary URL via `Linking.openURL`. Falls back to
+ * `fallbackUrl` when `canOpenURL` reports the URL is not handleable by the
+ * device (e.g. the target app isn't installed). Errors are swallowed — the
+ * host app can observe failures by providing its own `onExternalSuggestion`
+ * callback.
+ */
+async function handleExternalSuggestionDefault(s) {
+    try {
+        const canOpen = await react_native_1.Linking.canOpenURL(s.url);
+        if (canOpen) {
+            await react_native_1.Linking.openURL(s.url);
+            return;
+        }
+        if (s.fallbackUrl) {
+            await react_native_1.Linking.openURL(s.fallbackUrl);
+        }
+    }
+    catch {
+        // silently swallow — consumer may log via callback
+    }
+}
+const normalizeRoute = (route) => route.startsWith('/') ? route : `/${route}`;
+/**
+ * Handle action button clicks (navigation only).
+ */
+const createActionHandler = (options) => {
+    const { onNavigationAction } = options;
+    return (action) => {
+        if (action.type === 'navigation') {
+            const suggestion = action.data;
+            if (onNavigationAction) {
+                onNavigationAction(suggestion);
+                return;
+            }
+            try {
+                const { router } = require('expo-router');
+                const route = normalizeRoute(suggestion.route || suggestion.screenName);
+                router.push(route);
+            }
+            catch {
+                // expo-router not available, no-op
+            }
+        }
+    };
+};
+exports.createActionHandler = createActionHandler;