fix(chat): render locked voice messages correctly

src/app/chat/components/voice-bubble.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Pause, Play } from "lucide-react";
+import { LockKeyhole, Pause, Play } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 import styles from "./voice-bubble.module.css";
@@ -8,11 +8,19 @@ import styles from "./voice-bubble.module.css";
 export interface VoiceBubbleProps {
   audioUrl: string;
   isFromAI: boolean;
+  locked?: boolean;
+  hint?: string | null;
+  isUnlocking?: boolean;
+  onUnlock?: () => void;
 }
 
 export function VoiceBubble({
   audioUrl,
   isFromAI,
+  locked = false,
+  hint,
+  isUnlocking = false,
+  onUnlock,
 }: VoiceBubbleProps) {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -43,6 +51,8 @@ export function VoiceBubble({
   }, []);
 
   const handleToggle = () => {
+    if (locked) return;
+
     const audio = audioRef.current;
     if (!audio || hasError) return;
 
@@ -61,16 +71,22 @@ export function VoiceBubble({
     <div
       className={`${styles.bubble} ${
         isFromAI ? styles.bubbleAi : styles.bubbleUser
-      }`}
+      } ${locked ? styles.locked : ""}`}
     >
       <button
         type="button"
         className={styles.playButton}
         onClick={handleToggle}
-        disabled={hasError}
+        disabled={locked || hasError}
         aria-label={isPlaying ? "Pause voice message" : "Play voice message"}
       >
-        {isPlaying ? <Pause size={18} /> : <Play size={18} />}
+        {locked ? (
+          <LockKeyhole size={18} />
+        ) : isPlaying ? (
+          <Pause size={18} />
+        ) : (
+          <Play size={18} />
+        )}
       </button>
       <div className={styles.body}>
         <div className={styles.wave} aria-hidden="true">
@@ -83,8 +99,25 @@ export function VoiceBubble({
         {hasError ? (
           <p className={styles.error}>Voice message failed to load.</p>
         ) : null}
+        {locked ? (
+          <>
+            <p className={styles.hint}>
+              {hint && hint.length > 0
+                ? hint
+                : "Elio has a locked voice message for you."}
+            </p>
+            <button
+              type="button"
+              className={styles.unlockButton}
+              disabled={isUnlocking || !onUnlock}
+              onClick={onUnlock}
+            >
+              {isUnlocking ? "Unlocking..." : "Unlock voice message"}
+            </button>
+          </>
+        ) : null}
       </div>
-      <audio ref={audioRef} src={audioUrl} preload="metadata" />
+      {!locked ? <audio ref={audioRef} src={audioUrl} preload="metadata" /> : null}
     </div>
   );
 }