feat: add waveform voice messages end-to-end

2026-03-08 12:40:49 +03:00
parent 3b82b5e558
commit 30169a3a27
13 changed files with 361 additions and 19 deletions
--- a/web/src/api/chats.ts
+++ b/web/src/api/chats.ts
@@ -147,12 +147,19 @@ export async function uploadToPresignedUrl(
  }
 }

-export async function attachFile(messageId: number, fileUrl: string, fileType: string, fileSize: number): Promise<void> {
+export async function attachFile(
+  messageId: number,
+  fileUrl: string,
+  fileType: string,
+  fileSize: number,
+  waveformPoints?: number[] | null
+): Promise<void> {
  await http.post("/media/attachments", {
    message_id: messageId,
    file_url: fileUrl,
    file_type: fileType,
-    file_size: fileSize
+    file_size: fileSize,
+    waveform_points: waveformPoints ?? undefined
  });
 }

--- a/web/src/chat/types.ts
+++ b/web/src/chat/types.ts
@@ -62,6 +62,7 @@ export interface Message {
  client_message_id?: string;
  delivery_status?: DeliveryStatus;
  is_pending?: boolean;
+  attachment_waveform?: number[] | null;
 }

 export interface MessageReaction {
@@ -123,4 +124,5 @@ export interface ChatAttachment {
  file_url: string;
  file_type: string;
  file_size: number;
+  waveform_points?: number[] | null;
 }
--- a/web/src/components/MessageComposer.tsx
+++ b/web/src/components/MessageComposer.tsx
@@ -41,9 +41,11 @@ export function MessageComposer() {
  const [selectedType, setSelectedType] = useState<"file" | "image" | "video" | "audio">("file");
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [showAttachMenu, setShowAttachMenu] = useState(false);
+  const [showFormatMenu, setShowFormatMenu] = useState(false);
  const [captionDraft, setCaptionDraft] = useState("");
  const mediaInputRef = useRef<HTMLInputElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);

  const [recordingState, setRecordingState] = useState<RecordingState>("idle");
  const [recordSeconds, setRecordSeconds] = useState(0);
@@ -169,7 +171,11 @@ export function MessageComposer() {
    }
  }

-  async function handleUpload(file: File, messageType: "file" | "image" | "video" | "audio" | "voice" = "file") {
+  async function handleUpload(
+    file: File,
+    messageType: "file" | "image" | "video" | "audio" | "voice" = "file",
+    waveformPoints?: number[] | null
+  ) {
    if (!activeChatId || !me) {
      return;
    }
@@ -186,12 +192,19 @@ export function MessageComposer() {
        senderId: me.id,
        type: messageType,
        text: upload.file_url,
-        clientMessageId
+        clientMessageId,
      });
      const message = await sendMessageWithClientId(activeChatId, upload.file_url, messageType, clientMessageId, replyToMessageId);
-      confirmMessageByClientId(activeChatId, clientMessageId, message);
+      const messageWithWaveform = waveformPoints?.length ? { ...message, attachment_waveform: waveformPoints } : message;
+      confirmMessageByClientId(activeChatId, clientMessageId, messageWithWaveform);
      try {
-        await attachFile(message.id, upload.file_url, file.type || "application/octet-stream", file.size);
+        await attachFile(
+          message.id,
+          upload.file_url,
+          file.type || "application/octet-stream",
+          file.size,
+          waveformPoints ?? null
+        );
      } catch {
        setUploadError("File sent, but metadata save failed. Please refresh chat.");
      }
@@ -297,7 +310,8 @@ export function MessageComposer() {
        }
        const blob = new Blob(data, { type: "audio/webm" });
        const file = new File([blob], `voice-${Date.now()}.webm`, { type: "audio/webm" });
-        await handleUpload(file, "voice");
+        const waveform = await buildWaveformPoints(blob, 64);
+        await handleUpload(file, "voice", waveform);
      };
      recorderRef.current = recorder;
      recorder.start();
@@ -453,6 +467,58 @@ export function MessageComposer() {
    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
  }

+  function insertFormatting(startTag: string, endTag = startTag, placeholder = "text") {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+    const start = textarea.selectionStart ?? text.length;
+    const end = textarea.selectionEnd ?? text.length;
+    const selected = text.slice(start, end);
+    const middle = selected || placeholder;
+    const nextValue = `${text.slice(0, start)}${startTag}${middle}${endTag}${text.slice(end)}`;
+    setText(nextValue);
+    if (activeChatId) {
+      setDraft(activeChatId, nextValue);
+    }
+    requestAnimationFrame(() => {
+      textarea.focus();
+      if (selected) {
+        const pos = start + startTag.length + middle.length + endTag.length;
+        textarea.setSelectionRange(pos, pos);
+      } else {
+        const selStart = start + startTag.length;
+        const selEnd = selStart + middle.length;
+        textarea.setSelectionRange(selStart, selEnd);
+      }
+    });
+  }
+
+  function insertLink() {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+    const start = textarea.selectionStart ?? text.length;
+    const end = textarea.selectionEnd ?? text.length;
+    const selected = text.slice(start, end).trim() || "text";
+    const href = window.prompt("Enter URL (https://...)");
+    if (!href) {
+      return;
+    }
+    const link = `[${selected}](${href.trim()})`;
+    const nextValue = `${text.slice(0, start)}${link}${text.slice(end)}`;
+    setText(nextValue);
+    if (activeChatId) {
+      setDraft(activeChatId, nextValue);
+    }
+    requestAnimationFrame(() => {
+      textarea.focus();
+      const pos = start + link.length;
+      textarea.setSelectionRange(pos, pos);
+    });
+  }
+
  return (
    <div className="border-t border-slate-700/50 bg-slate-900/55 p-3">
      {activeChatId && replyToByChat[activeChatId] ? (
@@ -492,6 +558,32 @@ export function MessageComposer() {
        </div>
      ) : null}

+      {showFormatMenu ? (
+        <div className="mb-2 flex items-center gap-1 rounded-2xl border border-slate-700/80 bg-slate-900/95 px-2 py-1.5">
+          <button className="rounded px-2 py-1 text-xs hover:bg-slate-800" onClick={() => insertFormatting("||", "||")} type="button" title="Spoiler">
+            👁
+          </button>
+          <button className="rounded px-2 py-1 text-xs font-semibold hover:bg-slate-800" onClick={() => insertFormatting("**", "**")} type="button" title="Bold">
+            B
+          </button>
+          <button className="rounded px-2 py-1 text-xs italic hover:bg-slate-800" onClick={() => insertFormatting("*", "*")} type="button" title="Italic">
+            I
+          </button>
+          <button className="rounded px-2 py-1 text-xs underline hover:bg-slate-800" onClick={() => insertFormatting("__", "__")} type="button" title="Underline">
+            U
+          </button>
+          <button className="rounded px-2 py-1 text-xs line-through hover:bg-slate-800" onClick={() => insertFormatting("~~", "~~")} type="button" title="Strikethrough">
+            S
+          </button>
+          <button className="rounded px-2 py-1 text-xs hover:bg-slate-800" onClick={() => insertFormatting("`", "`")} type="button" title="Monospace">
+            M
+          </button>
+          <button className="rounded px-2 py-1 text-xs hover:bg-slate-800" onClick={insertLink} type="button" title="Link">
+            🔗
+          </button>
+        </div>
+      ) : null}
+
      <div className="mb-2 flex items-end gap-2">
        <div className="relative">
          <button
@@ -549,7 +641,17 @@ export function MessageComposer() {
          />
        </div>

+        <button
+          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700"
+          onClick={() => setShowFormatMenu((v) => !v)}
+          type="button"
+          title="Text formatting"
+        >
+          Aa
+        </button>
+
        <textarea
+          ref={textareaRef}
          className="min-h-[42px] max-h-40 flex-1 resize-y rounded-2xl border border-slate-700/80 bg-slate-800/80 px-4 py-2.5 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
          placeholder="Write a message..."
          rows={1}
@@ -657,6 +759,38 @@ export function MessageComposer() {
  );
 }

+async function buildWaveformPoints(blob: Blob, bars = 64): Promise<number[] | null> {
+  try {
+    const buffer = await blob.arrayBuffer();
+    const audioContext = new AudioContext();
+    try {
+      const audioBuffer = await audioContext.decodeAudioData(buffer.slice(0));
+      const channel = audioBuffer.getChannelData(0);
+      if (!channel.length || bars < 8) {
+        return null;
+      }
+      const blockSize = Math.max(1, Math.floor(channel.length / bars));
+      const points: number[] = [];
+      for (let i = 0; i < bars; i += 1) {
+        const start = i * blockSize;
+        const end = Math.min(channel.length, start + blockSize);
+        let sum = 0;
+        for (let j = start; j < end; j += 1) {
+          const sample = channel[j];
+          sum += sample * sample;
+        }
+        const rms = Math.sqrt(sum / Math.max(1, end - start));
+        points.push(Math.max(1, Math.min(31, Math.round(rms * 42))));
+      }
+      return points;
+    } finally {
+      await audioContext.close();
+    }
+  } catch {
+    return null;
+  }
+}
+
 function formatDuration(totalSeconds: number): string {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
--- a/web/src/components/MessageList.tsx
+++ b/web/src/components/MessageList.tsx
@@ -444,7 +444,7 @@ export function MessageList() {
                    </div>
                  ) : null}

-                  {renderMessageContent(message.type, message.text, {
+                  {renderMessageContent(message, {
                    onAttachmentContextMenu: (event, url) => {
                      event.preventDefault();
                      void ensureReactionsLoaded(message.id);
@@ -784,13 +784,14 @@ export function MessageList() {
 }

 function renderMessageContent(
-  messageType: string,
-  text: string | null,
+  message: Message,
  opts: {
    onAttachmentContextMenu: (event: MouseEvent<HTMLElement>, url: string) => void;
    onOpenMedia: (url: string, type: "image" | "video") => void;
  }
 ) {
+  const messageType = message.type;
+  const text = message.text;
  if (!text) return <p className="opacity-80">[empty]</p>;

  if (messageType === "image") {
@@ -832,11 +833,7 @@ function renderMessageContent(
        event.stopPropagation();
        opts.onAttachmentContextMenu(event, text);
      }}>
-        <div className="mb-1 flex items-center gap-2 text-xs text-slate-300">
-          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-700/80">🎤</span>
-          <span className="font-semibold">Voice message</span>
-        </div>
-        <AudioInlinePlayer src={text} title="Voice message" />
+        <VoiceInlinePlayer src={text} title="Voice message" waveform={message.attachment_waveform ?? null} />
      </div>
    );
  }
@@ -1031,6 +1028,92 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
  );
 }

+function VoiceInlinePlayer({
+  src,
+  title,
+  waveform,
+}: {
+  src: string;
+  title: string;
+  waveform: number[] | null;
+}) {
+  const track = useAudioPlayerStore((s) => s.track);
+  const isPlayingGlobal = useAudioPlayerStore((s) => s.isPlaying);
+  const durationGlobal = useAudioPlayerStore((s) => s.duration);
+  const positionGlobal = useAudioPlayerStore((s) => s.position);
+  const playTrack = useAudioPlayerStore((s) => s.playTrack);
+  const togglePlayGlobal = useAudioPlayerStore((s) => s.togglePlay);
+  const seekToGlobal = useAudioPlayerStore((s) => s.seekTo);
+
+  const isActiveTrack = track?.src === src;
+  const isPlaying = isActiveTrack && isPlayingGlobal;
+  const duration = isActiveTrack ? durationGlobal : 0;
+  const position = isActiveTrack ? positionGlobal : 0;
+  const bars = waveform && waveform.length >= 8 ? waveform : buildFallbackWaveform(src);
+
+  async function togglePlay() {
+    if (isActiveTrack) {
+      await togglePlayGlobal();
+      return;
+    }
+    await playTrack({ src, title });
+  }
+
+  function handleWaveClick(index: number) {
+    if (!isActiveTrack || duration <= 0) {
+      return;
+    }
+    const ratio = index / Math.max(1, bars.length - 1);
+    seekToGlobal(duration * ratio);
+  }
+
+  const progressRatio = duration > 0 ? Math.min(1, Math.max(0, position / duration)) : 0;
+  const activeBars = Math.floor(progressRatio * bars.length);
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg bg-slate-900/40 px-2 py-1.5">
+      <button
+        className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-sky-500/80 text-xs text-slate-950 hover:bg-sky-400"
+        onClick={() => void togglePlay()}
+        type="button"
+      >
+        {isPlaying ? "❚❚" : "▶"}
+      </button>
+      <div className="flex min-w-0 flex-1 items-end gap-[2px]">
+        {bars.map((value, index) => (
+          <button
+            className={`w-[3px] rounded-full p-0 ${index <= activeBars ? "bg-sky-300" : "bg-slate-500/60"}`}
+            key={`${src}-${index}`}
+            onClick={() => handleWaveClick(index)}
+            style={{ height: `${Math.max(6, value)}px` }}
+            type="button"
+          />
+        ))}
+      </div>
+      <span className="w-10 text-right text-[11px] tabular-nums text-slate-200">
+        {formatAudioTime(duration > 0 ? duration : position)}
+      </span>
+    </div>
+  );
+}
+
+function buildFallbackWaveform(seed: string, bars = 48): number[] {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+  }
+  const result: number[] = [];
+  let value = hash || 1;
+  for (let i = 0; i < bars; i += 1) {
+    value ^= value << 13;
+    value ^= value >> 17;
+    value ^= value << 5;
+    const normalized = Math.abs(value % 20) + 6;
+    result.push(normalized);
+  }
+  return result;
+}
+
 function formatAudioTime(seconds: number): string {
  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
  const total = Math.floor(seconds);
--- a/web/src/utils/formatMessage.tsx
+++ b/web/src/utils/formatMessage.tsx
@@ -25,6 +25,7 @@ export function formatMessageHtml(text: string): string {
  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
  html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
  html = html.replace(/__([^_]+)__/g, "<u>$1</u>");
+  html = html.replace(/~~([^~]+)~~/g, "<s>$1</s>");
  html = html.replace(/`([^`]+)`/g, "<code class=\"rounded bg-slate-700/60 px-1 py-0.5 text-[12px]\">$1</code>");
  html = html.replace(/\|\|([^|]+)\|\|/g, "<span class=\"rounded bg-slate-700/80 px-1 text-transparent hover:text-inherit\">$1</span>");
  html = html.replace(/\n/g, "<br/>");