@qafka/react-native 2.0.0

package/dist/components/Qafka.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+/**
+ * Build action buttons from chat response (navigation only).
+ *
+ * @param response - The chat response with optional `navigationSuggestion`.
+ * @param navigationLabelFormat - Optional formatter for the button label given a screen name.
+ */
+export declare const buildActionButtons: (response: any, navigationLabelFormat?: (screenName: string) => string) => any[];

package/dist/components/Qafka.utils.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildActionButtons = void 0;
+/**
+ * Build action buttons from chat response (navigation only).
+ *
+ * @param response - The chat response with optional `navigationSuggestion`.
+ * @param navigationLabelFormat - Optional formatter for the button label given a screen name.
+ */
+const buildActionButtons = (response, navigationLabelFormat) => {
+    const actionButtons = [];
+    if (response.navigationSuggestion) {
+        const screenName = response.navigationSuggestion.screenName;
+        let label;
+        if (navigationLabelFormat && screenName) {
+            label = navigationLabelFormat(screenName);
+        }
+        else if (response.navigationSuggestion.message) {
+            label = response.navigationSuggestion.message;
+        }
+        else {
+            label = `Navigate to ${screenName || 'screen'}`;
+        }
+        actionButtons.push({
+            id: `nav-${Date.now()}`,
+            type: 'navigation',
+            label,
+            data: response.navigationSuggestion,
+            style: 'primary',
+        });
+    }
+    return actionButtons;
+};
+exports.buildActionButtons = buildActionButtons;

package/dist/components/QafkaProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { QafkaProps } from './Qafka.types';
+type QafkaProviderProps = Pick<QafkaProps, 'style' | 'apiUrl' | 'theme' | 'themeOverride' | 'customTheme' | 'enableStreaming' | 'isAuthenticated' | 'endUserId' | 'endUserData' | 'context' | 'contextDescription' | 'components' | 'showTimestamps' | 'placeholder' | 'maxMessageLength' | 'greetingMessage' | 'title' | 'showHeader' | 'onReady' | 'onMessageSent' | 'onResponseReceived' | 'onError' | 'onNavigationSuggest' | 'onNavigationAction' | 'onToolSuggested' | 'onActionResult' | 'onStepCompleted' | 'onClose' | 'onBack' | 'CloseComponent' | 'BackComponent' | 'navigationLabelFormat' | 'NavigationButtonComponent'> & {
+    mode?: 'floating' | 'fullscreen' | 'inline';
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+};
+/**
+ * QafkaProvider - Main component that connects UI with SDK
+ * This is what users will import and use in their app
+ */
+export declare function QafkaProvider({ mode, position, theme: themeProp, ...qafkaProps }: QafkaProviderProps): React.JSX.Element;
+export {};

package/dist/components/QafkaProvider.js

@@ -0,0 +1,87 @@
+"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.QafkaProvider = QafkaProvider;
+const react_1 = __importStar(require("react"));
+const Qafka_1 = require("./Qafka");
+const FloatingButton_1 = require("./FloatingButton");
+const themes_1 = require("../themes");
+const react_native_1 = require("react-native");
+/**
+ * QafkaProvider - Main component that connects UI with SDK
+ * This is what users will import and use in their app
+ */
+function QafkaProvider({ mode = 'floating', position = 'bottom-right', theme: themeProp = 'light', ...qafkaProps }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(mode !== 'floating');
+    // Get theme
+    const theme = typeof themeProp === 'string'
+        ? themeProp === 'dark'
+            ? themes_1.darkTheme
+            : themes_1.lightTheme
+        : themeProp;
+    const handleToggle = () => {
+        setIsOpen((prev) => !prev);
+    };
+    // Floating mode with button
+    if (mode === 'floating') {
+        return (<react_native_1.View style={styles.container} pointerEvents="box-none">
+ {isOpen && (<react_native_1.View style={styles.widgetContainer}>
+ <Qafka_1.Qafka {...qafkaProps} theme={theme}/>
+ </react_native_1.View>)}
+ <FloatingButton_1.FloatingButton isOpen={isOpen} onPress={handleToggle} theme={theme} position={position}/>
+ </react_native_1.View>);
+    }
+    // Fullscreen or inline mode
+    return (<Qafka_1.Qafka {...qafkaProps} theme={theme} mode={mode}/>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        ...react_native_1.StyleSheet.absoluteFill,
+        zIndex: 9999,
+    },
+    widgetContainer: {
+        position: 'absolute',
+        bottom: 100,
+        right: 24,
+        width: 360,
+        height: 600,
+        maxHeight: '80%',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 8,
+    },
+});

package/dist/components/QuickReplies.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Theme } from '../themes';
+interface QuickReply {
+    id: string;
+    text: string;
+    payload?: string;
+}
+interface QuickRepliesProps {
+    replies: QuickReply[];
+    onSelect: (reply: QuickReply) => void;
+    theme: Theme;
+}
+export declare function QuickReplies({ replies, onSelect, theme }: QuickRepliesProps): React.JSX.Element | null;
+export {};

package/dist/components/QuickReplies.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickReplies = QuickReplies;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function QuickReplies({ replies, onSelect, theme }) {
+    if (!replies || replies.length === 0) {
+        return null;
+    }
+    return (<react_native_1.View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+ <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+ {replies.map((reply) => (<react_native_1.TouchableOpacity key={reply.id} style={[
+                styles.button,
+                {
+                    backgroundColor: theme.colors.surface,
+                    borderColor: theme.colors.primary,
+                },
+            ]} onPress={() => onSelect(reply)} activeOpacity={0.7}>
+ <react_native_1.Text style={[styles.text, { color: theme.colors.primary }]} numberOfLines={1}>
+ {reply.text}
+ </react_native_1.Text>
+ </react_native_1.TouchableOpacity>))}
+ </react_native_1.ScrollView>
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        paddingVertical: 8,
+    },
+    scrollContent: {
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    button: {
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderRadius: 20,
+        borderWidth: 1,
+        maxWidth: 200,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+});

package/dist/components/StepProgressIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+interface StepProgressIndicatorProps {
+    steps: Array<{
+        tool: string;
+        step: string;
+        data: Record<string, any>;
+    }>;
+    theme: Theme;
+}
+export declare function StepProgressIndicator({ steps, theme }: StepProgressIndicatorProps): React.JSX.Element | null;
+export {};

package/dist/components/StepProgressIndicator.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepProgressIndicator = StepProgressIndicator;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function StepProgressIndicator({ steps, theme }) {
+    if (!steps || steps.length === 0)
+        return null;
+    return (<react_native_1.View style={styles.container}>
+ {steps.map((step, index) => (<react_native_1.View key={index} style={styles.stepRow}>
+ <react_native_1.View style={[
+                styles.dot,
+                { backgroundColor: theme.colors.success || '#22c55e' },
+            ]}/>
+ <react_native_1.Text style={[
+                styles.stepText,
+                {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.typography.fontSize.xs,
+                },
+            ]} numberOfLines={1}>
+ {step.step}
+ </react_native_1.Text>
+ </react_native_1.View>))}
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        marginTop: 6,
+        gap: 3,
+    },
+    stepRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    stepText: {
+        fontWeight: '400',
+    },
+});

package/dist/components/SuggestionButton.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+import { NavigationSuggestion } from '../types/navigation';
+import { ExternalSuggestion } from '../types/external-navigation';
+/**
+ * Discriminated union representing any suggestion the SDK can render
+ * as a single tappable button under an assistant message.
+ *
+ * - `navigation` — internal route suggestion (Expo Router / React Nav)
+ * - `external` — outbound link (WhatsApp, phone, map, app store, …)
+ * - `tool` — generic tool-triggered action button
+ */
+export type AnySuggestion = {
+    kind: 'navigation';
+    data: NavigationSuggestion;
+    label?: string;
+} | {
+    kind: 'external';
+    data: ExternalSuggestion;
+} | {
+    kind: 'tool';
+    data: {
+        id?: string;
+        toolId?: string;
+        label?: string;
+        icon?: string;
+    };
+};
+export interface SuggestionButtonProps {
+    suggestion: AnySuggestion;
+    onPress: () => void;
+    theme?: Theme;
+}
+/**
+ * Generic suggestion button used for navigation / external / tool suggestions.
+ *
+ * Host apps may override rendering by supplying their own component through
+ * the `QafkaProps.NavigationButtonComponent` prop (for navigation suggestions)
+ * or by providing a custom `onExternalSuggestion` callback that renders its
+ * own UI before calling the handler.
+ */
+export declare function SuggestionButton({ suggestion, onPress, theme, }: SuggestionButtonProps): React.JSX.Element;

package/dist/components/SuggestionButton.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestionButton = SuggestionButton;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const fontUtils_1 = require("../utils/fontUtils");
+/**
+ * Generic suggestion button used for navigation / external / tool suggestions.
+ *
+ * Host apps may override rendering by supplying their own component through
+ * the `QafkaProps.NavigationButtonComponent` prop (for navigation suggestions)
+ * or by providing a custom `onExternalSuggestion` callback that renders its
+ * own UI before calling the handler.
+ */
+function SuggestionButton({ suggestion, onPress, theme, }) {
+    const { label, icon } = resolveDisplay(suggestion);
+    // Pick colors from theme when available, fall back to SDK defaults so this
+    // component is usable standalone (e.g. in tests or previews).
+    const bg = theme?.colors?.primary ?? '#0066CC';
+    const fg = '#ffffff';
+    const buttonStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: bg,
+        paddingHorizontal: theme?.spacing?.md ?? 16,
+        paddingVertical: theme?.spacing?.sm ?? 8,
+        borderRadius: theme?.borderRadius?.md ?? 8,
+        marginTop: theme?.spacing?.xs ?? 4,
+        ...(theme?.shadows?.small ?? {}),
+    };
+    const labelStyle = {
+        color: fg,
+        fontSize: theme?.typography?.fontSize?.sm ?? 14,
+        fontWeight: theme?.typography?.fontWeight?.medium ?? '500',
+        marginLeft: icon ? (theme?.spacing?.xs ?? 4) : 0,
+        fontFamily: theme ? (0, fontUtils_1.getFontFamily)(theme, 'medium') : undefined,
+    };
+    return (<react_native_1.TouchableOpacity onPress={onPress} style={buttonStyle} activeOpacity={0.7} accessibilityRole="button" accessibilityLabel={label}>
+ {icon ? (<react_native_1.Text style={[styles.icon, { color: fg }]}>{formatIcon(icon)}</react_native_1.Text>) : null}
+ <react_native_1.Text style={labelStyle}>{label}</react_native_1.Text>
+ </react_native_1.TouchableOpacity>);
+}
+function resolveDisplay(s) {
+    if (s.kind === 'navigation') {
+        return { label: s.label ?? s.data.screenName };
+    }
+    if (s.kind === 'external') {
+        return { label: s.data.label, icon: s.data.icon };
+    }
+    return { label: s.data.label ?? 'Action', icon: s.data.icon };
+}
+/**
+ * SDK icons come through as string names (e.g. `logo-whatsapp`, `phone`) to
+ * stay renderer-agnostic. Without a concrete icon library we cannot draw the
+ * glyph here, so we return an empty string. Host apps that want rich icons
+ * can wrap/replace this component and use e.g. `react-native-vector-icons`.
+ */
+function formatIcon(_iconName) {
+    return '';
+}
+const styles = react_native_1.StyleSheet.create({
+    icon: { marginRight: 8, fontSize: 16 },
+});

package/dist/components/ToolStatusPill.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface ToolStatusPillProps {
+    message: string;
+    theme?: {
+        colors?: {
+            aiBubble?: string;
+            textSecondary?: string;
+            primary?: string;
+        };
+        borderRadius?: {
+            lg?: number;
+        };
+    };
+}
+/**
+ * ToolStatusPill — shown while a server-side tool fetch or an AI follow-up
+ * round-trip is running (server-managed execution modes).
+ * Displays the loadingMessage next to a spinner.
+ */
+export declare const ToolStatusPill: React.FC<ToolStatusPillProps>;

package/dist/components/ToolStatusPill.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolStatusPill = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * ToolStatusPill — shown while a server-side tool fetch or an AI follow-up
+ * round-trip is running (server-managed execution modes).
+ * Displays the loadingMessage next to a spinner.
+ */
+const ToolStatusPill = ({ message, theme, }) => {
+    const pillStyle = {
+        backgroundColor: theme?.colors?.aiBubble || '#f3f4f6',
+        borderRadius: theme?.borderRadius?.lg || 16,
+    };
+    const textStyle = {
+        color: theme?.colors?.textSecondary || '#6b7280',
+    };
+    const spinnerColor = theme?.colors?.primary || '#6b7280';
+    return (<react_native_1.View style={[styles.pill, pillStyle]}>
+ <react_native_1.ActivityIndicator size="small" color={spinnerColor}/>
+ <react_native_1.Text style={[styles.text, textStyle]}>{message}</react_native_1.Text>
+ </react_native_1.View>);
+};
+exports.ToolStatusPill = ToolStatusPill;
+const styles = react_native_1.StyleSheet.create({
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        alignSelf: 'flex-start',
+        marginVertical: 4,
+        marginLeft: 8,
+    },
+    text: {
+        marginLeft: 8,
+        fontSize: 13,
+    },
+});

package/dist/components/TypingIndicator.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Theme } from '../themes/types';
+export interface TypingIndicatorProps {
+    /**
+    * Theme configuration
+    */
+    theme: Theme;
+    /**
+    * Size of the dots
+    */
+    dotSize?: number;
+    /**
+    * Color of the dots (overrides theme)
+    */
+    dotColor?: string;
+}
+/**
+ * TypingIndicator Component
+ *
+ * Animated three-dot indicator showing AI is typing.
+ * Each dot bounces with a slight delay creating a wave effect.
+ *
+ * @example
+ * ```tsx
+ * {isTyping && <TypingIndicator theme={lightTheme} />}
+ * ```
+ */
+export declare function TypingIndicator({ theme, dotSize, dotColor, }: TypingIndicatorProps): React.JSX.Element;

package/dist/components/TypingIndicator.js

@@ -0,0 +1,109 @@
+"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.TypingIndicator = TypingIndicator;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * TypingIndicator Component
+ *
+ * Animated three-dot indicator showing AI is typing.
+ * Each dot bounces with a slight delay creating a wave effect.
+ *
+ * @example
+ * ```tsx
+ * {isTyping && <TypingIndicator theme={lightTheme} />}
+ * ```
+ */
+function TypingIndicator({ theme, dotSize = 8, dotColor, }) {
+    // Animation values for each dot
+    const dot1Anim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const dot2Anim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const dot3Anim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        // Create bounce animation for a single dot
+        const createBounceAnimation = (animValue, delay) => {
+            return react_native_1.Animated.sequence([
+                react_native_1.Animated.delay(delay),
+                react_native_1.Animated.loop(react_native_1.Animated.sequence([
+                    react_native_1.Animated.timing(animValue, {
+                        toValue: -8,
+                        duration: theme.animation.duration.normal,
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.timing(animValue, {
+                        toValue: 0,
+                        duration: theme.animation.duration.normal,
+                        useNativeDriver: true,
+                    }),
+                ])),
+            ]);
+        };
+        // Start animations with staggered delays
+        const animation = react_native_1.Animated.parallel([
+            createBounceAnimation(dot1Anim, 0),
+            createBounceAnimation(dot2Anim, 150),
+            createBounceAnimation(dot3Anim, 300),
+        ]);
+        animation.start();
+        return () => {
+            animation.stop();
+        };
+    }, [dot1Anim, dot2Anim, dot3Anim, theme.animation.duration.normal]);
+    const containerStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        backgroundColor: theme.colors.aiBubble,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm + 2,
+        marginBottom: theme.spacing.sm,
+        ...theme.shadows.small,
+    };
+    const dotStyle = (animValue) => ({
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        backgroundColor: dotColor || theme.colors.textSecondary,
+        marginHorizontal: theme.spacing.xs / 2,
+        transform: [{ translateY: animValue }],
+    });
+    return (<react_native_1.View style={containerStyle}>
+ <react_native_1.Animated.View style={dotStyle(dot1Anim)}/>
+ <react_native_1.Animated.View style={dotStyle(dot2Anim)}/>
+ <react_native_1.Animated.View style={dotStyle(dot3Anim)}/>
+ </react_native_1.View>);
+}

package/dist/components/VoicePage.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+import type { VoiceComponents, VoiceTranscriptMode, VoiceTranscriptTurn } from './Qafka.types';
+export type VoiceChatState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking';
+interface VoiceToolStatusShape {
+    toolCallId: string;
+    toolKey: string;
+    loadingMessage: string;
+}
+type VoiceRenderedToolShape = {
+    kind?: 'tool';
+    toolCallId: string;
+    toolKey: string;
+    data: any;
+    tool: any;
+} | {
+    kind: 'display';
+    toolCallId: string;
+    items: Array<{
+        label: string;
+        value: string;
+        copyable?: boolean;
+    }>;
+};
+interface VoicePageProps {
+    state: VoiceChatState;
+    transcript: string;
+    userTranscript: string;
+    transcriptHistory?: VoiceTranscriptTurn[];
+    transcriptMode?: VoiceTranscriptMode;
+    amplitude: number;
+    theme: any;
+    voiceComponents?: VoiceComponents;
+    toolStatus?: VoiceToolStatusShape | null;
+    renderedTools?: VoiceRenderedToolShape[];
+    registeredComponents?: Record<string, ComponentType<{
+        data: any;
+    }>>;
+    transcriptOverrideForTurn?: boolean;
+    DataChipListComponent?: ComponentType<{
+        items: any[];
+        theme?: any;
+    }>;
+    isMuted?: boolean;
+    onToggleMute?: () => void;
+}
+export declare function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode, amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn, DataChipListComponent, isMuted, onToggleMute, }: VoicePageProps): React.JSX.Element;
+export {};