@qafka/react-native 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.ht
 
 ## [Unreleased]
 
+## [2.8.1] — 2026-10-06
+
+### Added
+
+- Close button on the voice page, in its top left corner. It only leaves voice: the voice session is ended and the widget returns to the chat page, so users no longer have to swipe back. The chat stays open and `onClose` is not called — closing the assistant is still done from the chat page.
+- New optional `onVoiceClose` prop on `<Qafka />`, called when that button is pressed.
+- New optional `voiceComponents.VoiceCloseButton` slot (`VoiceCloseButtonProps`) to replace the default button.
+
 ## [2.8.0] — 2026-10-06
 
 ### Added

package/dist/components/Qafka.js

@@ -87,7 +87,7 @@ const { width: SCREEN_WIDTH } = react_native_1.Dimensions.get('window');
  * />
  * ```
  */
-exports.Qafka = (0, react_1.forwardRef)(function Qafka({ style, apiUrl: apiUrlProp, devConfig, 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, onUnavailable, 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) {
+exports.Qafka = (0, react_1.forwardRef)(function Qafka({ style, apiUrl: apiUrlProp, devConfig, 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, onUnavailable, onNavigationSuggest, onNavigationAction, onExternalSuggestion, onCardDeepLink, onCardSuggestMessage, onCardExternalNavigation, onCardShare, onCardCopy, onCardToolTrigger, onCardCTAClick, onToolSuggested, onToolDataRequested, onActionResult, onStepCompleted, onFileUploadRequest, onExtractionResult, onClose, onVoiceClose, 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, unavailable, error: sdkError, resolvedApiKey, resolvedApiUrl } = (0, useSDK_1.useSDK)({
@@ -514,7 +514,14 @@ exports.Qafka = (0, react_1.forwardRef)(function Qafka({ style, apiUrl: apiUrlPr
 
  {/* 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} canResume={voiceCanResume} onResume={voiceResume} resumeLabel={voiceResumeLabel} navigationSuggestion={voiceNavigationSuggestion} onNavigationAccept={voiceAcceptNavigation} onNavigationDismiss={voiceDismissNavigation} NavigationButtonComponent={NavigationButtonComponent}/>
+ <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} canResume={voiceCanResume} onResume={voiceResume} resumeLabel={voiceResumeLabel} navigationSuggestion={voiceNavigationSuggestion} onNavigationAccept={voiceAcceptNavigation} onNavigationDismiss={voiceDismissNavigation} NavigationButtonComponent={NavigationButtonComponent} 
+    // The voice page's close button only leaves voice: end the session
+    // and slide back to the chat page, which stays open.
+    onClose={() => {
+            void voiceDisconnect();
+            scrollViewRef.current?.scrollTo({ x: 0, animated: true });
+            onVoiceClose?.();
+        }}/>
  </react_native_1.ScrollView>
  </react_native_1.View>) : (<ChatPage_1.ChatPage {...chatPageProps}/>);
     return (<react_native_1.View style={[

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

@@ -64,6 +64,14 @@ export interface VoiceMuteButtonProps {
     theme: Theme;
     state: VoiceChatState;
 }
+/**
+ * Props passed to custom voice close button component
+ */
+export interface VoiceCloseButtonProps {
+    onClose: () => void;
+    theme: Theme;
+    state: VoiceChatState;
+}
 /**
  * Props passed to custom voice background component
  */
@@ -125,6 +133,11 @@ export interface VoiceComponents {
      * row in every voice layout. Defaults to a circular icon button.
      */
     VoiceMuteButton?: React.ComponentType<VoiceMuteButtonProps>;
+    /**
+     * Slot for the button that leaves the voice page and returns to the chat
+     * page, rendered in the top left corner. Defaults to a circular icon button.
+     */
+    VoiceCloseButton?: React.ComponentType<VoiceCloseButtonProps>;
     /**
      * Slot for the multi-chip list rendered when the AI calls the built-in
      * `qafka_display` tool with mode="chip".
@@ -689,6 +702,12 @@ export interface QafkaProps {
     */
     onClose?: () => void;
     /**
+    * Optional. Called when the close button on the voice page is pressed. That
+    * button only leaves voice: the voice session is ended and the widget
+    * returns to the chat page, which stays open — `onClose` is not called.
+    */
+    onVoiceClose?: () => void;
+    /**
     * Callback when back button is pressed
     * If provided, a back button will be shown in the top left corner
     */

package/dist/components/QafkaProvider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QafkaProps } from './Qafka.types';
-type QafkaProviderProps = Pick<QafkaProps, 'style' | 'projectId' | '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'> & {
+type QafkaProviderProps = Pick<QafkaProps, 'style' | 'projectId' | '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' | 'onVoiceClose' | 'onBack' | 'CloseComponent' | 'BackComponent' | 'navigationLabelFormat' | 'NavigationButtonComponent'> & {
     mode?: 'floating' | 'fullscreen' | 'inline';
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 };

package/dist/components/VoicePage.d.ts

@@ -51,6 +51,7 @@ interface VoicePageProps {
     onNavigationAccept?: () => void;
     onNavigationDismiss?: () => void;
     NavigationButtonComponent?: ComponentType<NavigationButtonProps>;
+    onClose?: () => void;
 }
-export declare function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode, amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn, DataChipListComponent, isMuted, onToggleMute, canResume, onResume, resumeLabel, navigationSuggestion, onNavigationAccept, onNavigationDismiss, NavigationButtonComponent, }: VoicePageProps): React.JSX.Element;
+export declare function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode, amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn, DataChipListComponent, isMuted, onToggleMute, canResume, onResume, resumeLabel, navigationSuggestion, onNavigationAccept, onNavigationDismiss, NavigationButtonComponent, onClose, }: VoicePageProps): React.JSX.Element;
 export {};

package/dist/components/VoicePage.js

@@ -306,6 +306,19 @@ function DefaultVoiceMuteButton({ isMuted, onToggle, theme, }) {
  {isMuted ? <react_native_1.View style={[muteStyles.slash, { backgroundColor: fg }]}/> : null}
  </react_native_1.Pressable>);
 }
+function DefaultVoiceCloseButton({ onClose, theme }) {
+    return (<react_native_1.Pressable onPress={onClose} hitSlop={8} accessibilityRole="button" accessibilityLabel="End voice chat" style={({ pressed }) => [
+            muteStyles.button,
+            {
+                backgroundColor: theme?.colors?.surface ?? 'rgba(0,0,0,0.06)',
+                opacity: pressed ? 0.75 : 1,
+            },
+        ]}>
+ <react_native_1.Text style={{ fontSize: 24, lineHeight: 26, color: theme?.colors?.text ?? '#111' }}>
+ {'×'}
+ </react_native_1.Text>
+ </react_native_1.Pressable>);
+}
 /**
  * Minimal microphone glyph built with stock Views — capsule body, stand
  * post, and base bar. No external icon font, no SVG, no Skia.
@@ -408,7 +421,7 @@ function ChatTranscript({ history, liveAiText, state, primaryTextColor, secondar
  </react_native_1.View>);
 }
 // --- Main component ---
-function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode = 'centered', amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn = false, DataChipListComponent, isMuted = false, onToggleMute, canResume = false, onResume, resumeLabel, navigationSuggestion, onNavigationAccept, onNavigationDismiss, NavigationButtonComponent, }) {
+function VoicePage({ state, transcript, userTranscript, transcriptHistory, transcriptMode = 'centered', amplitude, theme, voiceComponents, toolStatus, renderedTools, registeredComponents, transcriptOverrideForTurn = false, DataChipListComponent, isMuted = false, onToggleMute, canResume = false, onResume, resumeLabel, navigationSuggestion, onNavigationAccept, onNavigationDismiss, NavigationButtonComponent, onClose, }) {
     const Indicator = voiceComponents?.VoiceIndicator || DefaultVoiceIndicator;
     const Background = voiceComponents?.VoiceBackground || DefaultVoiceBackground;
     const Transcript = voiceComponents?.VoiceTranscript || DefaultVoiceTranscript;
@@ -424,6 +437,11 @@ function VoicePage({ state, transcript, userTranscript, transcriptHistory, trans
     const resumeHint = resumable && resumeLabel ? (<react_native_1.Text style={{ marginTop: 12, fontSize: 14, color: STATE_COLORS.idle }}>
  {resumeLabel}
  </react_native_1.Text>) : null;
+    // Leaves voice and returns to the chat page, so that does not require
+    // swiping back. Top left: the mic button owns the top right corner.
+    const CloseButton = voiceComponents?.VoiceCloseButton || DefaultVoiceCloseButton;
+    const showClose = typeof onClose === 'function';
+    const closeButton = showClose ? (<CloseButton onClose={onClose} theme={theme} state={state}/>) : null;
     const hasToolUI = !transcriptOverrideForTurn && (renderedTools?.length ?? 0) > 0;
     // When tool UI is rendered, the compact status bar takes over regardless of
     // chosen mode — preserves the single-screen / hands-free experience.
@@ -463,6 +481,7 @@ function VoicePage({ state, transcript, userTranscript, transcriptHistory, trans
                 borderBottomColor: 'rgba(0,0,0,0.08)',
                 backgroundColor: theme?.colors?.background ?? '#fff',
             }}>
+ {closeButton}
  <react_native_1.View style={{
                 width: 44,
                 height: 44,
@@ -605,6 +624,14 @@ function VoicePage({ state, transcript, userTranscript, transcriptHistory, trans
  </react_native_1.ScrollView>) : null}
  </react_native_1.View>
 
+ {showClose && !hasToolUI ? (<react_native_1.View style={{
+                position: 'absolute',
+                top: insets.top + 12,
+                left: 16,
+            }}>
+ {closeButton}
+ </react_native_1.View>) : null}
+
  {showMute && !hasToolUI ? (<react_native_1.View style={{
                 position: 'absolute',
                 // Absolute children aren't pushed by the parent's safe-area paddingTop,

package/dist/components/index.d.ts

@@ -3,7 +3,7 @@
  */
 export { QafkaProvider } from './QafkaProvider';
 export { Qafka } from './Qafka';
-export type { VoiceComponents, VoiceIndicatorProps, VoiceBackgroundProps, VoiceTranscriptProps, VoiceMuteButtonProps, QafkaHandle } from './Qafka.types';
+export type { VoiceComponents, VoiceIndicatorProps, VoiceBackgroundProps, VoiceTranscriptProps, VoiceMuteButtonProps, VoiceCloseButtonProps, QafkaHandle } from './Qafka.types';
 export type { ToolResponseMode } from './Qafka.types';
 export type { QafkaProps, QafkaProjectIds, ProjectIdOf } from './Qafka.types';
 export { MessageBubble } from './MessageBubble';

package/docs/qafka-tool-authoring-guide.md

@@ -299,6 +299,10 @@ You may optionally restyle the chips via `voiceComponents.dataChipList` / `voice
   <Qafka onUnavailable={() => setChatAvailable(false)} />
   {chatAvailable && <LauncherButton onPress={openChat} />}
   ```
+- **`onVoiceClose`** — optional; fires when the close button on the voice page is pressed.
+  That button only leaves voice: the voice session ends and the widget returns to the chat
+  page, which stays open. `onClose` is not called — it still belongs to the chat page's own
+  close button. Restyle the button via `voiceComponents.VoiceCloseButton`.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qafka/react-native",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "Drop-in AI assistant for React Native: chat, voice, and tool execution with screen-aware navigation.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",