Component Reference

Components a node’s frontend widget can import and trigger from @/components.

---

AudioTrimmerModal

A visual audio trimmer. Use this in any node that accepts an audio file input where the user might need to select a time range.

Props:

Prop	Type	Description
isOpen	boolean	Controls visibility
audioSrc	string | null	URL of the audio file to trim
onClose	() => void	Called when the modal is dismissed
onConfirm	(start: number, end: number) => void	Called with trim timestamps in seconds

Usage:

import { AudioTrimmerModal } from "@/components/AudioTrimmerModal";

<AudioTrimmerModal
  isOpen={showTrimmer}
  audioSrc={uploadedAudioUrl}
  onClose={() => setShowTrimmer(false)}
  onConfirm={async (start, end) => {
    const res = await fetch("/api/audio/trim", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ filePath: uploadedAudioUrl, start, end, sessionId }),
    });
    const data = await res.json();
    setTrimmedAudioUrl(data.filePath);
    setShowTrimmer(false);
  }}
/>

What it does:

• Decodes the audio buffer and renders a waveform canvas
• Provides draggable handles for selecting the start/end range
• Supports playback scoped to the selected region

---