feat(chat): add voice message bubbles

src/app/chat/components/message-content.tsx

@@ -10,12 +10,14 @@
 import { ImageBubble } from "./image-bubble";
 import { PrivateMessageCard } from "./private-message-card";
 import { TextBubble } from "./text-bubble";
+import { VoiceBubble } from "./voice-bubble";
 
 export interface MessageContentProps {
   messageId?: string;
   content: string;
   imageUrl?: string | null;
   imagePaywalled?: boolean;
+  audioUrl?: string | null;
   isFromAI: boolean;
   lockedPrivate?: boolean | null;
   privateMessageHint?: string | null;
@@ -31,6 +33,7 @@ export function MessageContent({
   content,
   imageUrl,
   imagePaywalled,
+  audioUrl,
   isFromAI,
   lockedPrivate,
   privateMessageHint,
@@ -39,6 +42,7 @@ export function MessageContent({
   onUnlockImagePaywall,
 }: MessageContentProps) {
   const hasImage = imageUrl != null && imageUrl.length > 0;
+  const hasAudio = audioUrl != null && audioUrl.length > 0;
   const hasText = content.length > 0 && content !== IMAGE_PLACEHOLDER;
   const isLockedPrivateMessage = lockedPrivate === true;
 
@@ -74,7 +78,16 @@ export function MessageContent({
               onUnlockImagePaywall={onUnlockImagePaywall}
             />
           )}
-          {hasText && <TextBubble content={content} isFromAI={isFromAI} />}
+          {hasAudio && audioUrl ? (
+            <VoiceBubble
+              audioUrl={audioUrl}
+              content={content}
+              isFromAI={isFromAI}
+            />
+          ) : null}
+          {hasText && !hasAudio ? (
+            <TextBubble content={content} isFromAI={isFromAI} />
+          ) : null}
         </>
       )}
     </div>