[]) {
return items.map((item) => (
{getFileType(item)}
{item.sizeLabel}
{item.source?.updatedLabel}
));
}
function TranscriptUploadControl({ disabled }: { disabled?: boolean }) {
return (
{
toast.info("Upload selected", {
description: formatPlural(entries.length, "file"),
});
}}
/>
);
}
export function GenerateTranscriptPicker() {
const [open, setOpen] = useState(false);
const [provider, setProvider] = useState("deepgram");
const [query, setQuery] = useState("");
const [selectedIds, setSelectedIds] = useState([]);
const [selectedMatters, setSelectedMatters] = useState(
[],
);
const [view, setView] = useState("list");
const [pending, setPending] = useState(false);
const visibleFiles = useMemo(
() => filterFiles({ items: transcriptFiles, query, selectedMatters }),
[query, selectedMatters],
);
function closePicker() {
setOpen(false);
setQuery("");
setSelectedIds([]);
setSelectedMatters([]);
setView("list");
setPending(false);
}
async function handleCreate() {
if (selectedIds.length === 0 || pending) return;
setPending(true);
await sleep(1000);
toast.success("Transcript generation started", {
description: `${formatPlural(selectedIds.length, "file")}, ${provider}`,
});
closePicker();
}
return (
);
}
```
```tsx title="components/generate-transcript-picker/matter-filter.tsx"
import { BarsFilter } from "@tilt-legal/cubitt-icons/ui/outline";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
} from "@tilt-legal/cubitt-components/combobox";
import {
transcriptMatters,
type TranscriptMatter,
} from "@/lib/transcript-picker-data";
export function TranscriptMatterFilter({
disabled,
onValueChange,
value,
}: {
disabled?: boolean;
onValueChange: (matters: TranscriptMatter[]) => void;
value: TranscriptMatter[];
}) {
return (
{
onValueChange(Array.isArray(nextValue) ? nextValue : []);
}}
value={value}
>
}
>
No matters found.
{(matter: TranscriptMatter) => (
{matter.value}
)}
);
}
```
```tsx title="components/generate-transcript-picker/view-toggle.tsx"
import { Grid, Menu as MenuIcon } from "@tilt-legal/cubitt-icons/ui/outline";
import type { FilesViewMode } from "@tilt-legal/cubitt-components/files";
import {
ToggleGroup,
ToggleGroupItem,
} from "@tilt-legal/cubitt-components/toggle-group";
export function TranscriptViewToggle({
disabled,
onValueChange,
value,
}: {
disabled?: boolean;
onValueChange: (value: FilesViewMode) => void;
value: FilesViewMode;
}) {
return (
{
if (nextValue === "grid" || nextValue === "list") {
onValueChange(nextValue);
}
}}
value={value}
>
);
}
```
```typescript title="components/generate-transcript-picker/data.ts"
import type { FilesItem } from "@tilt-legal/cubitt-components/files";
import { formatBytes } from "@tilt-legal/cubitt-components/utilities/formatters";
export type TranscriptMatter = { id: string; value: string };
export type TranscriptFileSource = {
matters: TranscriptMatter[];
owner: string;
size: number;
updatedLabel: string;
};
export const transcriptMatters = [
{ id: "m1", value: "Smith v. Anderson" },
{ id: "m3", value: "Tech Corp Acquisition" },
] satisfies TranscriptMatter[];
export const transcriptProviders = [
{ id: "deepgram", label: "Deepgram" },
{ id: "elevenlabs", label: "ElevenLabs" },
{ id: "azure", label: "Azure Speech" },
] as const;
export const providerItems = transcriptProviders.map((provider) => ({
label: provider.label,
value: provider.id,
}));
export const transcriptFiles: FilesItem[] = [
{
id: "deposition-recording",
kind: "file",
name: "Deposition Recording.mp4",
mediaType: "video/mp4",
sizeLabel: formatBytes(145_000_000),
description: "Sarah Chen",
source: {
owner: "Sarah Chen",
size: 145_000_000,
updatedLabel: "Jan 10",
matters: [transcriptMatters[0]!],
},
},
{
id: "client-call",
kind: "file",
name: "Client Call - Jan 8.mp3",
mediaType: "audio/mpeg",
sizeLabel: formatBytes(12_400_000),
description: "Michael Torres",
source: {
owner: "Michael Torres",
size: 12_400_000,
updatedLabel: "Jan 8",
matters: [transcriptMatters[0]!],
},
},
];
```