feat(dictation): add resilient rpc retries and status toasts
This commit is contained in:
Mohamed Boudra
@@ -24,6 +24,7 @@ import { useRealtime } from "@/contexts/realtime-context";
|
||||
import { useDictation } from "@/hooks/use-dictation";
|
||||
import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
|
||||
import { VoiceNoteRecordingOverlay } from "./voice-note-recording-overlay";
|
||||
import { DictationStatusNotice, type DictationToastVariant } from "./dictation-status-notice";
|
||||
import { generateMessageId } from "@/types/stream";
|
||||
import { AgentStatusBar } from "./agent-status-bar";
|
||||
import { RealtimeControls } from "./realtime-controls";
|
||||
@@ -72,6 +73,16 @@ type TextAreaHandle = {
|
||||
} & Record<string, unknown>;
|
||||
};
|
||||
|
||||
type DictationToastConfig = {
|
||||
variant: DictationToastVariant;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
meta?: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
onDismiss?: () => void;
|
||||
};
|
||||
|
||||
export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const session = useDaemonSession(serverId, { allowUnavailable: true, suppressUnavailableAlert: true });
|
||||
@@ -85,6 +96,8 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
on: () => () => {},
|
||||
sendPing: () => {},
|
||||
sendUserMessage: () => {},
|
||||
subscribeConnectionStatus: () => () => {},
|
||||
getConnectionState: () => ({ isConnected: false, isConnecting: false }),
|
||||
}),
|
||||
[]
|
||||
);
|
||||
@@ -111,6 +124,10 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
const [selectedImages, setSelectedImages] = useState<Array<{ uri: string; mimeType: string }>>([]);
|
||||
const [isCancellingAgent, setIsCancellingAgent] = useState(false);
|
||||
const [audioDebugInfo, setAudioDebugInfo] = useState<AudioDebugInfo | null>(null);
|
||||
const [connectionStatus, setConnectionStatus] = useState(() =>
|
||||
ws.getConnectionState ? ws.getConnectionState() : { isConnected: ws.isConnected, isConnecting: ws.isConnecting }
|
||||
);
|
||||
const [lastSuccessToastAt, setLastSuccessToastAt] = useState<number | null>(null);
|
||||
|
||||
const textInputRef = useRef<TextInput | (TextInput & { getNativeRef?: () => unknown }) | null>(null);
|
||||
const inputHeightRef = useRef(MIN_INPUT_HEIGHT);
|
||||
@@ -163,23 +180,25 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
}, []);
|
||||
|
||||
const canStartDictation = useCallback(() => {
|
||||
const allowed = !isRealtimeMode && ws.isConnected;
|
||||
const socketConnected = ws.getConnectionState ? ws.getConnectionState().isConnected : ws.isConnected;
|
||||
const allowed = !isRealtimeMode && socketConnected;
|
||||
console.log("[AgentInput] canStartDictation", {
|
||||
allowed,
|
||||
isRealtimeMode,
|
||||
wsConnected: ws.isConnected,
|
||||
wsConnected: socketConnected,
|
||||
});
|
||||
return allowed;
|
||||
}, [isRealtimeMode, ws.isConnected]);
|
||||
}, [isRealtimeMode, ws]);
|
||||
|
||||
const canConfirmDictation = useCallback(() => {
|
||||
const allowed = ws.isConnected;
|
||||
const socketConnected = ws.getConnectionState ? ws.getConnectionState().isConnected : ws.isConnected;
|
||||
const allowed = socketConnected;
|
||||
console.log("[AgentInput] canConfirmDictation", {
|
||||
allowed,
|
||||
wsConnected: ws.isConnected,
|
||||
wsConnected: socketConnected,
|
||||
});
|
||||
return allowed;
|
||||
}, [ws.isConnected]);
|
||||
}, [ws]);
|
||||
|
||||
const {
|
||||
isRecording: isDictating,
|
||||
@@ -187,9 +206,17 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
volume: dictationVolume,
|
||||
duration: dictationDuration,
|
||||
pendingRequestId: dictationPendingRequestId,
|
||||
error: dictationError,
|
||||
status: dictationStatus,
|
||||
retryAttempt: dictationRetryAttempt,
|
||||
maxRetryAttempts: dictationMaxRetryAttempts,
|
||||
retryInfo: dictationRetryInfo,
|
||||
lastOutcome: dictationLastOutcome,
|
||||
startDictation,
|
||||
cancelDictation,
|
||||
confirmDictation,
|
||||
retryFailedDictation,
|
||||
discardFailedDictation,
|
||||
} = useDictation({
|
||||
agentId,
|
||||
sendAgentAudio,
|
||||
@@ -208,9 +235,119 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
}, [dictationPendingRequestId]);
|
||||
|
||||
useEffect(() => {
|
||||
const shouldShowOverlay = isDictating || isDictationProcessing;
|
||||
if (!ws.subscribeConnectionStatus) {
|
||||
return;
|
||||
}
|
||||
return ws.subscribeConnectionStatus((status) => {
|
||||
setConnectionStatus(status);
|
||||
});
|
||||
}, [ws]);
|
||||
|
||||
useEffect(() => {
|
||||
if (dictationLastOutcome?.type === "success") {
|
||||
setLastSuccessToastAt(dictationLastOutcome.timestamp);
|
||||
}
|
||||
}, [dictationLastOutcome]);
|
||||
|
||||
useEffect(() => {
|
||||
if (lastSuccessToastAt === null) {
|
||||
return;
|
||||
}
|
||||
const timeout = setTimeout(() => {
|
||||
setLastSuccessToastAt(null);
|
||||
}, 4000);
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [lastSuccessToastAt]);
|
||||
|
||||
const successToastVisible = lastSuccessToastAt !== null;
|
||||
|
||||
const handleRetryFailedRecording = useCallback(() => {
|
||||
void retryFailedDictation();
|
||||
}, [retryFailedDictation]);
|
||||
|
||||
const handleDiscardFailedRecording = useCallback(() => {
|
||||
discardFailedDictation();
|
||||
}, [discardFailedDictation]);
|
||||
|
||||
const dictationToast = useMemo<DictationToastConfig | null>(() => {
|
||||
if (!connectionStatus.isConnected) {
|
||||
return {
|
||||
variant: "warning",
|
||||
title: "Offline",
|
||||
subtitle: "Waiting for connection…",
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "recording") {
|
||||
return {
|
||||
variant: "info",
|
||||
title: "Recording voice note…",
|
||||
subtitle: "Release to transcribe",
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "uploading") {
|
||||
const attemptLabel = `Attempt ${Math.max(1, dictationRetryAttempt || 1)}/${dictationMaxRetryAttempts}`;
|
||||
return {
|
||||
variant: "info",
|
||||
title: "Transcribing…",
|
||||
meta: attemptLabel,
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "retrying") {
|
||||
const attempt = dictationRetryInfo?.attempt ?? Math.max(1, dictationRetryAttempt || 1);
|
||||
const maxAttempts = dictationRetryInfo?.maxAttempts ?? dictationMaxRetryAttempts;
|
||||
const nextLabel =
|
||||
dictationRetryInfo?.nextRetryMs && dictationRetryInfo.nextRetryMs > 0
|
||||
? ` · Next in ${Math.ceil(dictationRetryInfo.nextRetryMs / 1000)}s`
|
||||
: "";
|
||||
return {
|
||||
variant: "warning",
|
||||
title: "Retrying dictation…",
|
||||
subtitle: dictationRetryInfo?.errorMessage ?? dictationError ?? "Network error",
|
||||
meta: `Attempt ${attempt}/${maxAttempts}${nextLabel}`,
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "failed") {
|
||||
return {
|
||||
variant: "error",
|
||||
title: "Dictation failed",
|
||||
subtitle: dictationRetryInfo?.errorMessage ?? dictationError ?? "Unknown error",
|
||||
actionLabel: "Retry",
|
||||
onAction: handleRetryFailedRecording,
|
||||
onDismiss: handleDiscardFailedRecording,
|
||||
};
|
||||
}
|
||||
|
||||
if (successToastVisible) {
|
||||
return {
|
||||
variant: "success",
|
||||
title: "Transcribed",
|
||||
subtitle: "Added to chat",
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [
|
||||
connectionStatus.isConnected,
|
||||
dictationError,
|
||||
dictationMaxRetryAttempts,
|
||||
dictationRetryAttempt,
|
||||
dictationRetryInfo,
|
||||
dictationStatus,
|
||||
handleDiscardFailedRecording,
|
||||
handleRetryFailedRecording,
|
||||
successToastVisible,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const shouldShowOverlay = isDictating || isDictationProcessing || dictationStatus === "failed";
|
||||
overlayTransition.value = withTiming(shouldShowOverlay ? 1 : 0, { duration: 250 });
|
||||
}, [isDictating, isDictationProcessing, overlayTransition]);
|
||||
}, [dictationStatus, isDictating, isDictationProcessing, overlayTransition]);
|
||||
|
||||
const debugInputHeight = (label: string, payload: Record<string, unknown>) => {
|
||||
if (!SHOULD_DEBUG_INPUT_HEIGHT) {
|
||||
@@ -231,7 +368,8 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
}, [sendAgentMessage]);
|
||||
|
||||
async function handleSendMessage() {
|
||||
if (!userInput.trim() || !ws.isConnected) return;
|
||||
const socketConnected = ws.getConnectionState ? ws.getConnectionState().isConnected : ws.isConnected;
|
||||
if (!userInput.trim() || !socketConnected) return;
|
||||
|
||||
const message = userInput.trim();
|
||||
const imageAttachments = selectedImages.length > 0 ? selectedImages : undefined;
|
||||
@@ -298,6 +436,10 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
isDictating,
|
||||
isDictationProcessing,
|
||||
});
|
||||
if (dictationStatus === "failed") {
|
||||
handleDiscardFailedRecording();
|
||||
return;
|
||||
}
|
||||
if (!isDictating && !isDictationProcessing) {
|
||||
return;
|
||||
}
|
||||
@@ -313,6 +455,10 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
isDictating,
|
||||
isDictationProcessing,
|
||||
});
|
||||
if (dictationStatus === "failed") {
|
||||
handleRetryFailedRecording();
|
||||
return;
|
||||
}
|
||||
if (!isDictating) {
|
||||
return;
|
||||
}
|
||||
@@ -927,10 +1073,20 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
onCancel={handleCancelRecording}
|
||||
onSend={handleSendRecording}
|
||||
isTranscribing={isDictationProcessing}
|
||||
status={dictationStatus}
|
||||
onRetry={dictationStatus === "failed" ? handleRetryFailedRecording : undefined}
|
||||
onDiscardFailed={dictationStatus === "failed" ? handleDiscardFailedRecording : undefined}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
{dictationToast ? (
|
||||
<View style={styles.dictationToastPortal} pointerEvents="box-none">
|
||||
<View pointerEvents="auto">
|
||||
<DictationStatusNotice {...dictationToast} />
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -938,6 +1094,8 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
|
||||
const styles = StyleSheet.create(((theme: any) => ({
|
||||
container: {
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
flex: 1,
|
||||
},
|
||||
borderSeparator: {
|
||||
height: theme.borderWidth[1],
|
||||
@@ -969,8 +1127,14 @@ const styles = StyleSheet.create(((theme: any) => ({
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: FOOTER_HEIGHT,
|
||||
alignItems: "center",
|
||||
paddingBottom: theme.spacing[4],
|
||||
},
|
||||
dictationToastPortal: {
|
||||
position: "absolute",
|
||||
left: theme.spacing[4],
|
||||
right: theme.spacing[4],
|
||||
bottom: theme.spacing[4],
|
||||
},
|
||||
imagePreviewContainer: {
|
||||
flexDirection: "row",
|
||||
|
||||
@@ -36,15 +36,17 @@ import Animated, {
|
||||
runOnJS,
|
||||
} from "react-native-reanimated";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { Mic, Check, X, ChevronDown } from "lucide-react-native";
|
||||
import { Mic, Check, X, ChevronDown, RefreshCcw } from "lucide-react-native";
|
||||
import { theme as defaultTheme } from "@/styles/theme";
|
||||
import { useRecentPaths } from "@/hooks/use-recent-paths";
|
||||
import { useRouter } from "expo-router";
|
||||
import { generateMessageId } from "@/types/stream";
|
||||
import { useDictation } from "@/hooks/use-dictation";
|
||||
import type { DictationStatus } from "@/hooks/use-dictation";
|
||||
import { VolumeMeter } from "@/components/volume-meter";
|
||||
import { AUDIO_DEBUG_ENABLED } from "@/config/audio-debug";
|
||||
import { AudioDebugNotice, type AudioDebugInfo } from "./audio-debug-notice";
|
||||
import { DictationStatusNotice, type DictationToastVariant } from "./dictation-status-notice";
|
||||
import {
|
||||
AGENT_PROVIDER_DEFINITIONS,
|
||||
type AgentProviderDefinition,
|
||||
@@ -81,6 +83,16 @@ interface AgentFlowModalProps {
|
||||
serverId?: string | null;
|
||||
}
|
||||
|
||||
type DictationToastConfig = {
|
||||
variant: DictationToastVariant;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
meta?: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
onDismiss?: () => void;
|
||||
};
|
||||
|
||||
interface ModalWrapperProps {
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
@@ -274,6 +286,8 @@ function AgentFlowModal({
|
||||
on: () => () => {},
|
||||
sendPing: () => {},
|
||||
sendUserMessage: () => {},
|
||||
subscribeConnectionStatus: () => () => {},
|
||||
getConnectionState: () => ({ isConnected: false, isConnecting: false }),
|
||||
}),
|
||||
[]
|
||||
);
|
||||
@@ -322,7 +336,9 @@ function AgentFlowModal({
|
||||
reset: resetRepoInfo,
|
||||
cancel: cancelRepoInfo,
|
||||
} = gitRepoInfoRequest;
|
||||
const isWsConnected = ws?.isConnected ?? false;
|
||||
const isWsConnected = effectiveWs.getConnectionState
|
||||
? effectiveWs.getConnectionState().isConnected
|
||||
: effectiveWs.isConnected;
|
||||
const router = useRouter();
|
||||
const sessionServerId = session?.serverId ?? null;
|
||||
const selectedDaemonId = selectedServerId ?? sessionServerId;
|
||||
@@ -392,6 +408,12 @@ function AgentFlowModal({
|
||||
const [openDropdown, setOpenDropdown] = useState<DropdownKey | null>(null);
|
||||
const pendingRequestIdRef = useRef<string | null>(null);
|
||||
const shouldSyncBaseBranchRef = useRef(true);
|
||||
const [connectionStatus, setConnectionStatus] = useState(() =>
|
||||
effectiveWs.getConnectionState
|
||||
? effectiveWs.getConnectionState()
|
||||
: { isConnected: effectiveWs.isConnected, isConnecting: effectiveWs.isConnecting }
|
||||
);
|
||||
const [dictationSuccessToastAt, setDictationSuccessToastAt] = useState<number | null>(null);
|
||||
const promptInputRef = useRef<
|
||||
TextInput | (TextInput & { getNativeRef?: () => unknown }) | null
|
||||
>(null);
|
||||
@@ -459,10 +481,19 @@ function AgentFlowModal({
|
||||
isProcessing: isDictationProcessing,
|
||||
volume: dictationVolume,
|
||||
pendingRequestId: dictationPendingRequestId,
|
||||
error: dictationError,
|
||||
status: dictationStatus,
|
||||
retryAttempt: dictationRetryAttempt,
|
||||
maxRetryAttempts: dictationMaxRetryAttempts,
|
||||
retryInfo: dictationRetryInfo,
|
||||
failedRecording: dictationFailedRecording,
|
||||
lastOutcome: dictationLastOutcome,
|
||||
startDictation,
|
||||
cancelDictation,
|
||||
confirmDictation,
|
||||
reset: resetDictation,
|
||||
retryFailedDictation,
|
||||
discardFailedDictation,
|
||||
} = useDictation({
|
||||
agentId: DICTATION_AGENT_ID,
|
||||
sendAgentAudio,
|
||||
@@ -480,6 +511,35 @@ function AgentFlowModal({
|
||||
dictationRequestIdRef.current = dictationPendingRequestId;
|
||||
}, [dictationPendingRequestId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!effectiveWs.subscribeConnectionStatus) {
|
||||
return;
|
||||
}
|
||||
return effectiveWs.subscribeConnectionStatus((status) => {
|
||||
setConnectionStatus(status);
|
||||
});
|
||||
}, [effectiveWs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (dictationLastOutcome?.type === "success") {
|
||||
setDictationSuccessToastAt(dictationLastOutcome.timestamp);
|
||||
}
|
||||
}, [dictationLastOutcome]);
|
||||
|
||||
useEffect(() => {
|
||||
if (dictationSuccessToastAt === null) {
|
||||
return;
|
||||
}
|
||||
const timeout = setTimeout(() => {
|
||||
setDictationSuccessToastAt(null);
|
||||
}, 4000);
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [dictationSuccessToastAt]);
|
||||
|
||||
const dictationSuccessToastVisible = dictationSuccessToastAt !== null;
|
||||
|
||||
const hasPendingCreateOrResume = pendingRequestIdRef.current !== null;
|
||||
const hasPendingDictation = dictationPendingRequestId !== null;
|
||||
const shouldListenForStatus = isVisible || hasPendingCreateOrResume;
|
||||
@@ -1038,6 +1098,10 @@ function AgentFlowModal({
|
||||
console.log("[CreateAgentModal] handleDictationCancel", {
|
||||
isDictating,
|
||||
});
|
||||
if (dictationStatus === "failed") {
|
||||
discardFailedDictation();
|
||||
return;
|
||||
}
|
||||
if (!isDictating) {
|
||||
return;
|
||||
}
|
||||
@@ -1046,7 +1110,7 @@ function AgentFlowModal({
|
||||
} catch (error) {
|
||||
console.error("[CreateAgentModal] Failed to cancel dictation:", error);
|
||||
}
|
||||
}, [cancelDictation, isDictating]);
|
||||
}, [cancelDictation, dictationStatus, discardFailedDictation, isDictating]);
|
||||
|
||||
const handleDictationConfirm = useCallback(async () => {
|
||||
console.log("[CreateAgentModal] handleDictationConfirm", {
|
||||
@@ -1055,6 +1119,10 @@ function AgentFlowModal({
|
||||
isTargetDaemonReady,
|
||||
hasSendAgentAudio,
|
||||
});
|
||||
if (dictationStatus === "failed") {
|
||||
void retryFailedDictation();
|
||||
return;
|
||||
}
|
||||
if (!isDictating || isDictationProcessing) {
|
||||
return;
|
||||
}
|
||||
@@ -1074,11 +1142,94 @@ function AgentFlowModal({
|
||||
}, [
|
||||
daemonAvailabilityError,
|
||||
confirmDictation,
|
||||
dictationStatus,
|
||||
hasSendAgentAudio,
|
||||
isDictating,
|
||||
isDictationProcessing,
|
||||
isTargetDaemonReady,
|
||||
logOfflineDaemonAction,
|
||||
retryFailedDictation,
|
||||
]);
|
||||
|
||||
const handlePromptDictationRetry = useCallback(() => {
|
||||
void retryFailedDictation();
|
||||
}, [retryFailedDictation]);
|
||||
|
||||
const handlePromptDictationDiscard = useCallback(() => {
|
||||
discardFailedDictation();
|
||||
}, [discardFailedDictation]);
|
||||
|
||||
const promptDictationToast = useMemo<DictationToastConfig | null>(() => {
|
||||
if (!connectionStatus.isConnected) {
|
||||
return {
|
||||
variant: "warning",
|
||||
title: "Offline",
|
||||
subtitle: "Waiting for connection…",
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "recording") {
|
||||
return {
|
||||
variant: "info",
|
||||
title: "Recording prompt…",
|
||||
subtitle: "Release to insert transcription",
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "uploading") {
|
||||
const attemptLabel = `Attempt ${Math.max(1, dictationRetryAttempt || 1)}/${dictationMaxRetryAttempts}`;
|
||||
return {
|
||||
variant: "info",
|
||||
title: "Transcribing prompt…",
|
||||
meta: attemptLabel,
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "retrying") {
|
||||
const attempt = dictationRetryInfo?.attempt ?? Math.max(1, dictationRetryAttempt || 1);
|
||||
const maxAttempts = dictationRetryInfo?.maxAttempts ?? dictationMaxRetryAttempts;
|
||||
const retryMeta =
|
||||
dictationRetryInfo?.nextRetryMs && dictationRetryInfo.nextRetryMs > 0
|
||||
? `Attempt ${attempt}/${maxAttempts} · Next in ${Math.ceil(dictationRetryInfo.nextRetryMs / 1000)}s`
|
||||
: `Attempt ${attempt}/${maxAttempts}`;
|
||||
return {
|
||||
variant: "warning",
|
||||
title: "Retrying dictation…",
|
||||
subtitle: dictationRetryInfo?.errorMessage ?? dictationError ?? "Network error",
|
||||
meta: retryMeta,
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationStatus === "failed") {
|
||||
return {
|
||||
variant: "error",
|
||||
title: "Dictation failed",
|
||||
subtitle: dictationRetryInfo?.errorMessage ?? dictationError ?? "Unknown error",
|
||||
actionLabel: "Retry",
|
||||
onAction: handlePromptDictationRetry,
|
||||
onDismiss: handlePromptDictationDiscard,
|
||||
};
|
||||
}
|
||||
|
||||
if (dictationSuccessToastVisible) {
|
||||
return {
|
||||
variant: "success",
|
||||
title: "Transcribed",
|
||||
subtitle: "Inserted into prompt",
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [
|
||||
connectionStatus.isConnected,
|
||||
dictationError,
|
||||
dictationMaxRetryAttempts,
|
||||
dictationRetryAttempt,
|
||||
dictationRetryInfo,
|
||||
dictationStatus,
|
||||
dictationSuccessToastVisible,
|
||||
handlePromptDictationDiscard,
|
||||
handlePromptDictationRetry,
|
||||
]);
|
||||
|
||||
const navigateToAgentIfNeeded = useCallback(() => {
|
||||
@@ -1727,6 +1878,13 @@ function AgentFlowModal({
|
||||
onStart={handleDictationStart}
|
||||
onCancel={handleDictationCancel}
|
||||
onConfirm={handleDictationConfirm}
|
||||
status={dictationStatus}
|
||||
retryAttempt={dictationRetryAttempt}
|
||||
maxRetryAttempts={dictationMaxRetryAttempts}
|
||||
retryCountdownMs={dictationRetryInfo?.nextRetryMs}
|
||||
errorMessage={dictationRetryInfo?.errorMessage ?? dictationError ?? undefined}
|
||||
onRetry={handlePromptDictationRetry}
|
||||
onDiscard={handlePromptDictationDiscard}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
@@ -2099,6 +2257,13 @@ function AgentFlowModal({
|
||||
)}
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
{promptDictationToast ? (
|
||||
<View style={styles.dictationToastPortal} pointerEvents="box-none">
|
||||
<View pointerEvents="auto">
|
||||
<DictationStatusNotice {...promptDictationToast} />
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<View
|
||||
@@ -2763,6 +2928,13 @@ interface PromptDictationControlsProps {
|
||||
onStart: () => void;
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
status: DictationStatus;
|
||||
retryAttempt: number;
|
||||
maxRetryAttempts: number;
|
||||
retryCountdownMs?: number | null;
|
||||
errorMessage?: string | null;
|
||||
onRetry?: () => void;
|
||||
onDiscard?: () => void;
|
||||
}
|
||||
|
||||
function PromptDictationControls({
|
||||
@@ -2773,10 +2945,23 @@ function PromptDictationControls({
|
||||
onStart,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
status,
|
||||
retryAttempt,
|
||||
maxRetryAttempts,
|
||||
retryCountdownMs,
|
||||
errorMessage,
|
||||
onRetry,
|
||||
onDiscard,
|
||||
}: PromptDictationControlsProps): ReactElement {
|
||||
const { theme } = useUnistyles();
|
||||
|
||||
if (!isRecording && !isProcessing) {
|
||||
const isRetrying = status === "retrying";
|
||||
const isFailed = status === "failed";
|
||||
const showActiveState = isRecording || isProcessing || isRetrying || isFailed;
|
||||
const cancelHandler = isFailed ? onDiscard ?? onCancel : onCancel;
|
||||
const confirmHandler = isFailed ? onRetry ?? onConfirm : onConfirm;
|
||||
|
||||
if (!showActiveState) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onStart}
|
||||
@@ -2803,34 +2988,47 @@ function PromptDictationControls({
|
||||
</View>
|
||||
<View style={styles.dictationActionGroup}>
|
||||
<Pressable
|
||||
onPress={onCancel}
|
||||
disabled={isProcessing}
|
||||
onPress={cancelHandler}
|
||||
disabled={isProcessing && !isFailed}
|
||||
accessibilityLabel="Cancel dictation"
|
||||
style={[
|
||||
styles.dictationActionButton,
|
||||
styles.dictationActionButtonCancel,
|
||||
isProcessing ? styles.dictationActionButtonDisabled : undefined,
|
||||
isProcessing && !isFailed ? styles.dictationActionButtonDisabled : undefined,
|
||||
]}
|
||||
>
|
||||
<X size={14} color={theme.colors.foreground} />
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={onConfirm}
|
||||
onPress={confirmHandler}
|
||||
disabled={isProcessing}
|
||||
accessibilityLabel="Insert transcription"
|
||||
accessibilityLabel={isFailed ? "Retry dictation" : "Insert transcription"}
|
||||
style={[
|
||||
styles.dictationActionButton,
|
||||
styles.dictationActionButtonConfirm,
|
||||
isProcessing ? styles.dictationActionButtonDisabled : undefined,
|
||||
]}
|
||||
>
|
||||
{isProcessing ? (
|
||||
{isProcessing || isRetrying ? (
|
||||
<ActivityIndicator size="small" color={theme.colors.background} />
|
||||
) : isFailed ? (
|
||||
<RefreshCcw size={14} color={theme.colors.background} />
|
||||
) : (
|
||||
<Check size={14} color={theme.colors.background} />
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
{(isRetrying || isFailed) && (
|
||||
<Text style={[styles.dictationStatusLabel, { color: theme.colors.mutedForeground }]}>
|
||||
{isRetrying
|
||||
? `Retrying ${Math.max(1, retryAttempt)} / ${Math.max(1, maxRetryAttempts)}${
|
||||
retryCountdownMs && retryCountdownMs > 0
|
||||
? ` in ${Math.ceil(retryCountdownMs / 1000)}s`
|
||||
: ""
|
||||
}`
|
||||
: errorMessage ?? "Dictation failed"}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -3092,6 +3290,7 @@ const styles = StyleSheet.create(((theme: any) => ({
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
},
|
||||
header: {
|
||||
paddingBottom: theme.spacing[4],
|
||||
@@ -3120,6 +3319,15 @@ const styles = StyleSheet.create(((theme: any) => ({
|
||||
paddingBottom: theme.spacing[8],
|
||||
gap: theme.spacing[6],
|
||||
},
|
||||
dictationToastPortal: {
|
||||
position: "absolute",
|
||||
left: theme.spacing[4],
|
||||
right: theme.spacing[4],
|
||||
bottom: theme.spacing[6],
|
||||
},
|
||||
dictationNoticeWrapper: {
|
||||
marginTop: theme.spacing[3],
|
||||
},
|
||||
formSection: {
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
@@ -3319,6 +3527,11 @@ const styles = StyleSheet.create(((theme: any) => ({
|
||||
dictationActionButtonDisabled: {
|
||||
opacity: theme.opacity[40],
|
||||
},
|
||||
dictationStatusLabel: {
|
||||
marginTop: theme.spacing[1],
|
||||
fontSize: theme.fontSize.xs,
|
||||
fontWeight: theme.fontWeight.medium,
|
||||
},
|
||||
selectorRow: {
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[4],
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { AlertTriangle, CheckCircle2, Info, RefreshCcw, RotateCcw, WifiOff, X } from "lucide-react-native";
|
||||
|
||||
export type DictationToastVariant = "info" | "success" | "warning" | "error";
|
||||
|
||||
interface DictationStatusNoticeProps {
|
||||
variant: DictationToastVariant;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
meta?: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
const variantIconMap: Record<DictationToastVariant, typeof Info> = {
|
||||
info: RefreshCcw,
|
||||
success: CheckCircle2,
|
||||
warning: AlertTriangle,
|
||||
error: AlertTriangle,
|
||||
};
|
||||
|
||||
export function DictationStatusNotice({
|
||||
variant,
|
||||
title,
|
||||
subtitle,
|
||||
meta,
|
||||
actionLabel,
|
||||
onAction,
|
||||
onDismiss,
|
||||
}: DictationStatusNoticeProps) {
|
||||
const { theme } = useUnistyles();
|
||||
|
||||
const VariantIcon = (() => {
|
||||
if (variant === "warning" && title.toLowerCase().includes("offline")) {
|
||||
return WifiOff;
|
||||
}
|
||||
return variantIconMap[variant] ?? Info;
|
||||
})();
|
||||
|
||||
const backgroundColor = (() => {
|
||||
switch (variant) {
|
||||
case "success":
|
||||
return theme.colors.palette.green[500];
|
||||
case "warning":
|
||||
return theme.colors.palette.amber[500];
|
||||
case "error":
|
||||
return theme.colors.palette.red[500];
|
||||
default:
|
||||
return theme.colors.background;
|
||||
}
|
||||
})();
|
||||
|
||||
const foregroundColor = variant === "info" ? theme.colors.foreground : theme.colors.palette.white;
|
||||
const secondaryColor = variant === "info" ? theme.colors.mutedForeground : theme.colors.palette.white;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.container,
|
||||
{
|
||||
backgroundColor,
|
||||
borderColor: variant === "info" ? theme.colors.border : "transparent",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.headerRow}>
|
||||
<View style={styles.titleRow}>
|
||||
<VariantIcon size={16} color={foregroundColor} />
|
||||
<Text style={[styles.title, { color: foregroundColor }]}>{title}</Text>
|
||||
</View>
|
||||
{onDismiss ? (
|
||||
<Pressable accessibilityLabel="Dismiss dictation status" hitSlop={8} onPress={onDismiss}>
|
||||
<X size={14} color={foregroundColor} />
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{subtitle ? (
|
||||
<Text style={[styles.subtitle, { color: secondaryColor }]}>{subtitle}</Text>
|
||||
) : null}
|
||||
|
||||
{(meta || (actionLabel && onAction)) && (
|
||||
<View style={styles.actionsRow}>
|
||||
{meta ? (
|
||||
<Text style={[styles.meta, { color: secondaryColor }]}>{meta}</Text>
|
||||
) : (
|
||||
<View />
|
||||
)}
|
||||
{actionLabel && onAction ? (
|
||||
<Pressable
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{
|
||||
backgroundColor: variant === "info" ? theme.colors.primary : "rgba(0,0,0,0.2)",
|
||||
},
|
||||
]}
|
||||
onPress={onAction}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={actionLabel}
|
||||
>
|
||||
<RotateCcw
|
||||
size={14}
|
||||
color={variant === "info" ? theme.colors.primaryForeground : foregroundColor}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.actionText,
|
||||
{ color: variant === "info" ? theme.colors.primaryForeground : foregroundColor },
|
||||
]}
|
||||
>
|
||||
{actionLabel}
|
||||
</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
container: {
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: theme.borderRadius.xl,
|
||||
paddingHorizontal: theme.spacing[4],
|
||||
paddingVertical: theme.spacing[3],
|
||||
gap: theme.spacing[2],
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
titleRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
},
|
||||
title: {
|
||||
fontSize: theme.fontSize.sm,
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
actionsRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
meta: {
|
||||
fontSize: theme.fontSize.xs,
|
||||
},
|
||||
actionButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[1],
|
||||
borderRadius: theme.borderRadius.full,
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[1],
|
||||
},
|
||||
actionText: {
|
||||
fontSize: theme.fontSize.xs,
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
},
|
||||
}));
|
||||
@@ -1,8 +1,9 @@
|
||||
import { View, Text, Pressable, ActivityIndicator } from "react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { X, ArrowUp } from "lucide-react-native";
|
||||
import { X, ArrowUp, RefreshCcw } from "lucide-react-native";
|
||||
import { VolumeMeter } from "./volume-meter";
|
||||
import { FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
|
||||
import type { DictationStatus } from "@/hooks/use-dictation";
|
||||
|
||||
interface VoiceNoteRecordingOverlayProps {
|
||||
volume: number;
|
||||
@@ -10,6 +11,9 @@ interface VoiceNoteRecordingOverlayProps {
|
||||
onCancel: () => void;
|
||||
onSend: () => void;
|
||||
isTranscribing?: boolean;
|
||||
status?: DictationStatus;
|
||||
onRetry?: () => void;
|
||||
onDiscardFailed?: () => void;
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
@@ -24,13 +28,25 @@ export function VoiceNoteRecordingOverlay({
|
||||
onCancel,
|
||||
onSend,
|
||||
isTranscribing = false,
|
||||
status = "idle",
|
||||
onRetry,
|
||||
onDiscardFailed,
|
||||
}: VoiceNoteRecordingOverlayProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const isRetrying = status === "retrying";
|
||||
const isFailed = status === "failed";
|
||||
const primaryDisabled = isTranscribing || isRetrying;
|
||||
const handlePrimary = isFailed ? onRetry ?? onSend : onSend;
|
||||
const handleCancel = isFailed && onDiscardFailed ? onDiscardFailed : onCancel;
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: theme.colors.palette.blue[600] }]}>
|
||||
{/* Cancel button */}
|
||||
<Pressable onPress={onCancel} disabled={isTranscribing} style={[styles.cancelButton, isTranscribing && styles.buttonDisabled]}>
|
||||
<Pressable
|
||||
onPress={handleCancel}
|
||||
disabled={isTranscribing}
|
||||
style={[styles.cancelButton, isTranscribing && styles.buttonDisabled]}
|
||||
>
|
||||
<X size={24} color={theme.colors.palette.white} strokeWidth={2.5} />
|
||||
</Pressable>
|
||||
|
||||
@@ -49,9 +65,17 @@ export function VoiceNoteRecordingOverlay({
|
||||
</View>
|
||||
|
||||
{/* Send button */}
|
||||
<Pressable onPress={onSend} disabled={isTranscribing} style={[styles.sendButton, { backgroundColor: theme.colors.palette.white }]}>
|
||||
{isTranscribing ? (
|
||||
<Pressable
|
||||
onPress={handlePrimary}
|
||||
disabled={primaryDisabled}
|
||||
style={[styles.sendButton, { backgroundColor: theme.colors.palette.white }, primaryDisabled && styles.buttonDisabled]}
|
||||
>
|
||||
{isRetrying ? (
|
||||
<ActivityIndicator size="small" color={theme.colors.palette.blue[600]} />
|
||||
) : isTranscribing ? (
|
||||
<ActivityIndicator size="small" color={theme.colors.palette.blue[600]} />
|
||||
) : isFailed ? (
|
||||
<RefreshCcw size={24} color={theme.colors.palette.blue[600]} strokeWidth={2.5} />
|
||||
) : (
|
||||
<ArrowUp size={24} color={theme.colors.palette.blue[600]} strokeWidth={2.5} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user