4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52: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 && (

Voice Message Bubble

Installation

Files

components

Styles