mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
Transcriptions filtering and search
This commit is contained in:
@@ -1,50 +1,66 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { GetTranscript } from "../../api";
|
||||
import Pagination from "./pagination";
|
||||
import NextLink from "next/link";
|
||||
import { FaArrowRotateRight, FaGear } from "react-icons/fa6";
|
||||
import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa";
|
||||
import { MdError } from "react-icons/md";
|
||||
import useTranscriptList from "../transcripts/useTranscriptList";
|
||||
import { formatTimeMs } from "../../lib/time";
|
||||
import useApi from "../../lib/useApi";
|
||||
import { useError } from "../../(errors)/errorContext";
|
||||
import { FaEllipsisVertical } from "react-icons/fa6";
|
||||
import useSessionUser from "../../lib/useSessionUser";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Flex,
|
||||
Spinner,
|
||||
Heading,
|
||||
Button,
|
||||
Card,
|
||||
Link,
|
||||
CardBody,
|
||||
Stack,
|
||||
Box,
|
||||
Text,
|
||||
Link,
|
||||
Stack,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
Button,
|
||||
Divider,
|
||||
Input,
|
||||
Icon,
|
||||
Grid,
|
||||
IconButton,
|
||||
Spacer,
|
||||
Tooltip,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
AlertDialog,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogBody,
|
||||
AlertDialogFooter,
|
||||
Tooltip,
|
||||
Spacer,
|
||||
} from "@chakra-ui/react";
|
||||
import { PlusSquareIcon } from "@chakra-ui/icons";
|
||||
import { ExpandableText } from "../../lib/expandableText";
|
||||
import {
|
||||
FaCheck,
|
||||
FaTrash,
|
||||
FaStar,
|
||||
FaMicrophone,
|
||||
FaGear,
|
||||
FaEllipsisVertical,
|
||||
FaArrowRotateRight,
|
||||
} from "react-icons/fa6";
|
||||
import useTranscriptList from "../transcripts/useTranscriptList";
|
||||
import useSessionUser from "../../lib/useSessionUser";
|
||||
import NextLink from "next/link";
|
||||
import { Room, GetTranscript } from "../../api";
|
||||
import Pagination from "./pagination";
|
||||
import { formatTimeMs } from "../../lib/time";
|
||||
import useApi from "../../lib/useApi";
|
||||
import { useError } from "../../(errors)/errorContext";
|
||||
|
||||
export default function TranscriptBrowser() {
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const { loading, response, refetch } = useTranscriptList(page);
|
||||
const [selectedRoomId, setSelectedRoomId] = useState("");
|
||||
const [rooms, setRooms] = useState<Room[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [searchInputValue, setSearchInputValue] = useState("");
|
||||
const { loading, response, refetch } = useTranscriptList(
|
||||
page,
|
||||
selectedRoomId,
|
||||
searchTerm,
|
||||
);
|
||||
const userName = useSessionUser().name;
|
||||
const [deletionLoading, setDeletionLoading] = useState(false);
|
||||
const api = useApi();
|
||||
@@ -58,6 +74,36 @@ export default function TranscriptBrowser() {
|
||||
setDeletedItemIds([]);
|
||||
}, [page, response]);
|
||||
|
||||
useEffect(() => {
|
||||
refetch();
|
||||
}, [selectedRoomId, page, searchTerm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!api) return;
|
||||
api
|
||||
.v1RoomsList({ page: 1 })
|
||||
.then((rooms) => setRooms(rooms.items))
|
||||
.catch((err) => setError(err, "There was an error fetching the rooms"));
|
||||
}, [api]);
|
||||
|
||||
const handleFilterTranscripts = (roomId: string) => {
|
||||
setSelectedRoomId(roomId);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setPage(1);
|
||||
setSearchTerm(searchInputValue);
|
||||
setSelectedRoomId("");
|
||||
refetch();
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
if (loading && !response)
|
||||
return (
|
||||
<Flex flexDir="column" align="center" justify="center" h="100%">
|
||||
@@ -77,6 +123,7 @@ export default function TranscriptBrowser() {
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
const onCloseDeletion = () => setTranscriptToDeleteId(undefined);
|
||||
|
||||
const handleDeleteTranscript = (transcriptId) => (e) => {
|
||||
@@ -88,7 +135,6 @@ export default function TranscriptBrowser() {
|
||||
.then(() => {
|
||||
refetch();
|
||||
setDeletionLoading(false);
|
||||
refetch();
|
||||
onCloseDeletion();
|
||||
setDeletedItemIds((deletedItemIds) => [
|
||||
deletedItemIds,
|
||||
@@ -120,169 +166,138 @@ export default function TranscriptBrowser() {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
maxW="container.xl"
|
||||
flexDir="column"
|
||||
margin="auto"
|
||||
gap={2}
|
||||
overflowY="auto"
|
||||
minH="100%"
|
||||
w={{ base: "full", md: "container.xl" }}
|
||||
mx="auto"
|
||||
p={4}
|
||||
>
|
||||
<Flex
|
||||
flexDir="row"
|
||||
justify="flex-end"
|
||||
align="center"
|
||||
flexWrap={"wrap-reverse"}
|
||||
mt={4}
|
||||
>
|
||||
{userName ? (
|
||||
<Heading size="md">{userName}'s Meetings</Heading>
|
||||
) : (
|
||||
<Heading size="md">Your meetings</Heading>
|
||||
)}
|
||||
|
||||
{loading || (deletionLoading && <Spinner></Spinner>)}
|
||||
|
||||
<Spacer />
|
||||
<Pagination
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
total={response?.total || 0}
|
||||
size={response?.size || 0}
|
||||
/>
|
||||
<Flex flexDir="row" justify="space-between" align="center" mb={4}>
|
||||
<Heading size="md">
|
||||
{userName ? `${userName}'s Transcriptions` : "Your Transcriptions"}{" "}
|
||||
{loading || (deletionLoading && <Spinner size="sm" />)}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Grid
|
||||
templateColumns={{
|
||||
base: "repeat(1, 1fr)",
|
||||
md: "repeat(2, 1fr)",
|
||||
lg: "repeat(3, 1fr)",
|
||||
}}
|
||||
gap={{
|
||||
base: 2,
|
||||
lg: 4,
|
||||
}}
|
||||
maxH="100%"
|
||||
overflowY="auto"
|
||||
mb="4"
|
||||
>
|
||||
{response?.items
|
||||
.filter((i) => !deletedItemIds?.includes(i.id))
|
||||
.map((item: GetTranscript) => (
|
||||
<Card key={item.id} border="gray.light" variant="outline">
|
||||
<CardBody>
|
||||
<Flex align={"center"} gap={2}>
|
||||
<Heading size="md">
|
||||
<Link
|
||||
as={NextLink}
|
||||
href={`/transcripts/${item.id}`}
|
||||
noOfLines={2}
|
||||
>
|
||||
{item.title || item.name || "Unnamed Transcript"}
|
||||
</Link>
|
||||
</Heading>
|
||||
|
||||
<Spacer />
|
||||
<Menu closeOnSelect={true}>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
icon={<FaEllipsisVertical />}
|
||||
aria-label="actions"
|
||||
/>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
isDisabled={deletionLoading}
|
||||
onClick={() => setTranscriptToDeleteId(item.id)}
|
||||
icon={<FaTrash color={"red.500"} />}
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
isDisabled={item.status === "idle"}
|
||||
onClick={handleProcessTranscript(item.id)}
|
||||
icon={<FaArrowRotateRight />}
|
||||
>
|
||||
Process
|
||||
</MenuItem>
|
||||
<AlertDialog
|
||||
isOpen={transcriptToDeleteId === item.id}
|
||||
leastDestructiveRef={cancelRef}
|
||||
onClose={onCloseDeletion}
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
Delete{" "}
|
||||
{item.title || item.name || "Unnamed Transcript"}
|
||||
</AlertDialogHeader>
|
||||
<Flex flexDir={{ base: "column", md: "row" }}>
|
||||
<Box w={{ base: "full", md: "300px" }} p={4} bg="gray.100">
|
||||
<Stack spacing={3}>
|
||||
<Link
|
||||
as={NextLink}
|
||||
href="#"
|
||||
onClick={() => handleFilterTranscripts("")}
|
||||
color={selectedRoomId === "" ? "blue.500" : "gray.600"}
|
||||
_hover={{ color: "blue.300" }}
|
||||
fontWeight={selectedRoomId === "" ? "bold" : "normal"}
|
||||
>
|
||||
All Transcripts
|
||||
</Link>
|
||||
|
||||
<AlertDialogBody>
|
||||
Are you sure? You can't undo this action
|
||||
afterwards.
|
||||
</AlertDialogBody>
|
||||
<Divider />
|
||||
|
||||
<AlertDialogFooter>
|
||||
<Button ref={cancelRef} onClick={onCloseDeletion}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
onClick={handleDeleteTranscript(item.id)}
|
||||
ml={3}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Stack mt="4" spacing="2">
|
||||
<Flex align={"center"} gap={2}>
|
||||
{item.status == "ended" && (
|
||||
<Tooltip label="Processing done">
|
||||
<span>
|
||||
<Icon color="green" as={FaCheck} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status == "error" && (
|
||||
<Tooltip label="Processing error">
|
||||
<span>
|
||||
<Icon color="red.primary" as={MdError} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status == "idle" && (
|
||||
<Tooltip label="New meeting, no recording">
|
||||
<span>
|
||||
<Icon color="yellow.500" as={FaStar} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status == "processing" && (
|
||||
<Tooltip label="Processing in progress">
|
||||
<span>
|
||||
<Icon
|
||||
color="grey.primary"
|
||||
as={FaGear}
|
||||
transition={"all 2s ease"}
|
||||
transform={"rotate(0deg)"}
|
||||
_hover={{ transform: "rotate(360deg)" }}
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status == "recording" && (
|
||||
<Tooltip label="Recording in progress">
|
||||
<span>
|
||||
<Icon color="blue.primary" as={FaMicrophone} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Text fontSize="small">
|
||||
{rooms.length > 0 && (
|
||||
<>
|
||||
<Heading size="sm" mb={2}>
|
||||
My Rooms
|
||||
</Heading>
|
||||
|
||||
{rooms.map((room) => (
|
||||
<Link
|
||||
key={room.id}
|
||||
as={NextLink}
|
||||
href="#"
|
||||
onClick={() => handleFilterTranscripts(room.id)}
|
||||
color={selectedRoomId === room.id ? "blue.500" : "gray.600"}
|
||||
_hover={{ color: "blue.300" }}
|
||||
fontWeight={selectedRoomId === room.id ? "bold" : "normal"}
|
||||
ml={4}
|
||||
>
|
||||
{room.name}
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Flex flexDir="column" flex="1" p={4} gap={4}>
|
||||
<Flex mb={4} alignItems="center">
|
||||
<Input
|
||||
placeholder="Search transcriptions..."
|
||||
value={searchInputValue}
|
||||
onChange={(e) => setSearchInputValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<Button ml={2} onClick={handleSearch}>
|
||||
Search
|
||||
</Button>
|
||||
</Flex>
|
||||
<Box display={{ base: "none", md: "block" }}>
|
||||
<Table colorScheme="gray">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th pl={12} width="400px">
|
||||
Transcription Title
|
||||
</Th>
|
||||
<Th width="150px">Room</Th>
|
||||
<Th width="200px">Date</Th>
|
||||
<Th width="100px">Duration</Th>
|
||||
<Th width="50px"></Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{response?.items?.map((item: GetTranscript) => (
|
||||
<Tr key={item.id}>
|
||||
<Td>
|
||||
<Flex alignItems="start">
|
||||
{item.status === "ended" && (
|
||||
<Tooltip label="Processing done">
|
||||
<span>
|
||||
<Icon color="green" as={FaCheck} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "error" && (
|
||||
<Tooltip label="Processing error">
|
||||
<span>
|
||||
<Icon color="red.500" as={FaTrash} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "idle" && (
|
||||
<Tooltip label="New meeting, no recording">
|
||||
<span>
|
||||
<Icon color="yellow.500" as={FaStar} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "processing" && (
|
||||
<Tooltip label="Processing in progress">
|
||||
<span>
|
||||
<Icon color="gray.500" as={FaGear} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "recording" && (
|
||||
<Tooltip label="Recording in progress">
|
||||
<span>
|
||||
<Icon color="blue.500" as={FaMicrophone} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Link
|
||||
as={NextLink}
|
||||
href={`/transcripts/${item.id}`}
|
||||
ml={2}
|
||||
>
|
||||
{item.title || "Unnamed Transcript"}
|
||||
</Link>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>{item.room_name}</Td>
|
||||
<Td>
|
||||
{new Date(item.created_at).toLocaleString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
@@ -290,18 +305,141 @@ export default function TranscriptBrowser() {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})}
|
||||
{"\u00A0"}-{"\u00A0"}
|
||||
{formatTimeMs(item.duration)}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>{formatTimeMs(item.duration)}</Td>
|
||||
<Td>
|
||||
<Menu closeOnSelect={true}>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
icon={<Icon as={FaEllipsisVertical} />}
|
||||
variant="outline"
|
||||
aria-label="Options"
|
||||
/>
|
||||
<MenuList>
|
||||
<MenuItem onClick={handleDeleteTranscript(item.id)}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleProcessTranscript(item.id)}>
|
||||
Reprocess
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
<Box display={{ base: "block", md: "none" }}>
|
||||
<Stack spacing={2}>
|
||||
{response?.items?.map((item: GetTranscript) => (
|
||||
<Box key={item.id} borderWidth={1} p={4} borderRadius="md">
|
||||
<Flex justify="space-between" alignItems="flex-start" gap="2">
|
||||
<Box>
|
||||
{item.status === "ended" && (
|
||||
<Tooltip label="Processing done">
|
||||
<span>
|
||||
<Icon color="green" as={FaCheck} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "error" && (
|
||||
<Tooltip label="Processing error">
|
||||
<span>
|
||||
<Icon color="red.500" as={FaTrash} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "idle" && (
|
||||
<Tooltip label="New meeting, no recording">
|
||||
<span>
|
||||
<Icon color="yellow.500" as={FaStar} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "processing" && (
|
||||
<Tooltip label="Processing in progress">
|
||||
<span>
|
||||
<Icon color="gray.500" as={FaGear} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{item.status === "recording" && (
|
||||
<Tooltip label="Recording in progress">
|
||||
<span>
|
||||
<Icon color="blue.500" as={FaMicrophone} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
<Box flex="1">
|
||||
<Text fontWeight="bold">
|
||||
{item.title || "Unnamed Transcript"}
|
||||
</Text>
|
||||
<Text>Room: {item.room_name}</Text>
|
||||
<Text>
|
||||
Date: {new Date(item.created_at).toLocaleString()}
|
||||
</Text>
|
||||
<Text>Duration: {formatTimeMs(item.duration)}</Text>
|
||||
</Box>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
icon={<Icon as={FaEllipsisVertical} />}
|
||||
variant="outline"
|
||||
aria-label="Options"
|
||||
/>
|
||||
<MenuList>
|
||||
<MenuItem onClick={handleDeleteTranscript(item.id)}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleProcessTranscript(item.id)}>
|
||||
Reprocess
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<ExpandableText noOfLines={5}>
|
||||
{item.short_summary}
|
||||
</ExpandableText>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
<Pagination
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
total={response?.total || 0}
|
||||
size={response?.items.length || 0}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<AlertDialog
|
||||
isOpen={!!transcriptToDeleteId}
|
||||
leastDestructiveRef={cancelRef}
|
||||
onClose={onCloseDeletion}
|
||||
>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
Delete Transcript
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogBody>
|
||||
Are you sure? You can't undo this action afterwards.
|
||||
</AlertDialogBody>
|
||||
<AlertDialogFooter>
|
||||
<Button ref={cancelRef} onClick={onCloseDeletion}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
onClick={handleDeleteTranscript(transcriptToDeleteId)}
|
||||
ml={3}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user