50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1eef,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import "@/components/ui/whatsapp/styles/whatsapp.css"; import { type MessageStatus, MessageStatusIcon } from "./message-status"; interface VoiceMessageBubbleProps extends React.HTMLAttributes { variant?: "incoming" | "outgoing"; duration: string; timestamp?: string; status?: MessageStatus; showTail?: boolean; /** When provided, the component manages playback internally */ audioSrc?: string; /** Avatar image shown on the left when playing (incoming) */ avatarSrc?: string; /** Controlled mode — ignored when audioSrc is set */ isPlaying?: boolean; progress?: number; onPlayPause?: () => void; } // Deterministic fake waveform bars const WAVEFORM_BARS = [3, 5, 8, 6, 10, 7, 4, 9, 6, 5, 8, 10, 7, 4, 6, 9, 5, 8, 3, 6, 10, 7, 5, 8, 4, 9, 6, 7, 5, 8]; function PlayIcon({ className }: { className?: string }) { return ( ); } function PauseIcon({ className }: { className?: string }) { return ( ); } const VoiceMessageBubble = React.forwardRef( ( { className, variant = "incoming", duration, timestamp, status, showTail = false, audioSrc, avatarSrc, isPlaying: isPlayingProp = false, progress: progressProp = 0, onPlayPause, ...props }, ref ) => { const isOutgoing = variant === "outgoing"; const audioRef = React.useRef(null); const [internalPlaying, setInternalPlaying] = React.useState(false); const [internalProgress, setInternalProgress] = React.useState(0); const [internalDuration, setInternalDuration] = React.useState(duration); // Use internal state when audioSrc provided, otherwise use props const isPlaying = audioSrc ? internalPlaying : isPlayingProp; const progress = audioSrc ? internalProgress : progressProp; const handlePlayPause = () => { if (!audioSrc) { onPlayPause?.(); return; } const audio = audioRef.current; if (!audio) return; if (internalPlaying) { audio.pause(); } else { audio.play(); } }; const playedBars = Math.floor((progress / 100) * WAVEFORM_BARS.length); const activeColor = isOutgoing ? "var(--wa-emerald-600)" : "var(--wa-emerald-500)"; const inactiveColor = isOutgoing ? "rgba(0,128,105,0.35)" : "rgba(134,150,160,0.5)"; return (

{audioSrc && (