diff --git a/src/app/chat/components/message-content.tsx b/src/app/chat/components/message-content.tsx index ea0e007b..54deabef 100644 --- a/src/app/chat/components/message-content.tsx +++ b/src/app/chat/components/message-content.tsx @@ -47,6 +47,7 @@ export function MessageContent({ lockedPrivate === true || (locked === true && lockReason === "private_message"); const isLockedVoiceMessage = locked === true && lockReason === "voice_message"; + const shouldRenderVoiceMessage = hasAudio || isLockedVoiceMessage; const handleUnlockPrivateMessage = messageId && onUnlockPrivateMessage ? () => onUnlockPrivateMessage(messageId) @@ -79,7 +80,7 @@ export function MessageContent({ onOpenImage={onOpenImage} /> )} - {hasAudio && audioUrl ? ( + {shouldRenderVoiceMessage ? ( ) : null} - {hasText && !hasAudio ? ( + {hasText && !shouldRenderVoiceMessage ? ( ) : null} diff --git a/src/app/chat/components/voice-bubble.tsx b/src/app/chat/components/voice-bubble.tsx index fb0792a7..b126e9cc 100644 --- a/src/app/chat/components/voice-bubble.tsx +++ b/src/app/chat/components/voice-bubble.tsx @@ -8,7 +8,7 @@ import styles from "./voice-bubble.module.css"; export interface VoiceBubbleProps { messageId?: string; - audioUrl: string; + audioUrl?: string | null; isFromAI: boolean; locked?: boolean; hint?: string | null; @@ -28,6 +28,7 @@ export function VoiceBubble({ const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [errorMediaUrl, setErrorMediaUrl] = useState(null); + const hasAudio = audioUrl != null && audioUrl.length > 0; const { mediaUrl, isUsingCachedMedia, reportMediaError } = useCachedChatMediaUrl({ messageId, @@ -66,7 +67,7 @@ export function VoiceBubble({ const hasError = errorMediaUrl === mediaUrl; const handleToggle = () => { - if (locked) return; + if (locked || !hasAudio) return; const audio = audioRef.current; if (!audio || hasError) return; @@ -92,7 +93,7 @@ export function VoiceBubble({ type="button" className={styles.playButton} onClick={handleToggle} - disabled={locked || hasError} + disabled={locked || hasError || !hasAudio} aria-label={isPlaying ? "Pause voice message" : "Play voice message"} > {locked ? ( @@ -132,7 +133,7 @@ export function VoiceBubble({ ) : null} - {!locked ? ( + {!locked && hasAudio ? (