fix(chat): apply unlocked voice audio url

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 ? (
             <VoiceBubble
               messageId={messageId}
               audioUrl={audioUrl}
@@ -90,7 +91,7 @@ export function MessageContent({
               onUnlock={handleUnlockVoiceMessage}
             />
           ) : null}
-          {hasText && !hasAudio ? (
+          {hasText && !shouldRenderVoiceMessage ? (
             <TextBubble content={content} isFromAI={isFromAI} />
           ) : null}
         </>

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<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [errorMediaUrl, setErrorMediaUrl] = useState<string | null>(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}
       </div>
-      {!locked ? (
+      {!locked && hasAudio ? (
         <audio ref={audioRef} src={mediaUrl} preload="metadata" />
       ) : null}
     </div>