selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 12:19:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Transcriptions filtering and search

Browse Source
This commit is contained in:
Sergey Mankovsky
2024-10-03 18:25:53 +02:00
parent 895ba36cb9
commit ebb32ee613
7 changed files with 410 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
server/reflector/db/transcripts.py
View File

@@ -291,6 +291,8 @@ class TranscriptController:
order_by: str | None = None,
filter_empty: bool | None = False,
filter_recording: bool | None = False,
room_id: str | None = None,
search_term: str | None = None,
return_query: bool = False,
) -> list[Transcript]:
"""
@@ -303,8 +305,36 @@ class TranscriptController:
- `order_by`: field to order by, e.g. "-created_at"
- `filter_empty`: filter out empty transcripts
- `filter_recording`: filter out transcripts that are currently recording
- `room_id`: filter transcripts by room ID
- `search_term`: filter transcripts by search term
"""
query = transcripts.select().where(transcripts.c.user_id == user_id)
from reflector.db.meetings import meetings
from reflector.db.rooms import rooms
query = (
transcripts.select()
.join(meetings, transcripts.c.meeting_id == meetings.c.id, isouter=True)
.join(rooms, meetings.c.room_id == rooms.c.id, isouter=True)
)
if user_id:
query = query.where(transcripts.c.user_id == user_id)
if room_id:
query = query.where(rooms.c.id == room_id)
if search_term:
query = query.where(
transcripts.c.title.ilike(f"%{search_term}%")
) # Assuming there's a 'title' column
query = query.with_only_columns(
[
transcripts,
rooms.c.id.label("room_id"),
rooms.c.name.label("room_name"),
]
)
if order_by is not None:
field = getattr(transcripts.c, order_by[1:])

6
server/reflector/views/transcripts.py
View File

@@ -59,6 +59,8 @@ class GetTranscript(BaseModel):
participants: list[TranscriptParticipant] | None
reviewed: bool
meeting_id: str | None
room_id: str | None
room_name: str | None
class CreateTranscript(BaseModel):
@@ -84,6 +86,8 @@ class DeletionStatus(BaseModel):
@router.get("/transcripts", response_model=Page[GetTranscript])
async def transcripts_list(
room_id: str | None,
search_term: str | None,
user: Annotated[Optional[auth.UserInfo], Depends(auth.current_user_optional)],
):
from reflector.db import database
@@ -101,6 +105,8 @@ async def transcripts_list(
database,
await transcripts_controller.get_all(
user_id=user_id,
room_id=room_id,
search_term=search_term,
order_by="-created_at",
return_query=True,
),

528
www/app/(app)/browse/page.tsx
View File

@@ -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>
);
}

10
www/app/(app)/transcripts/useTranscriptList.ts
View File

@@ -10,7 +10,11 @@ type TranscriptList = {
refetch: () => void;
};
const useTranscriptList = (page: number): TranscriptList => {
const useTranscriptList = (
page: number,
roomId: string | null,
searchTerm: string | null,
): TranscriptList => {
const [response, setResponse] = useState<Page_GetTranscript_ | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setErrorState] = useState<Error | null>(null);
@@ -27,7 +31,7 @@ const useTranscriptList = (page: number): TranscriptList => {
if (!api) return;
setLoading(true);
api
.v1TranscriptsList({ page })
.v1TranscriptsList({ page, roomId, searchTerm })
.then((response) => {
setResponse(response);
setLoading(false);
@@ -38,7 +42,7 @@ const useTranscriptList = (page: number): TranscriptList => {
setError(err);
setErrorState(err);
});
}, [!api, page, refetchCount]);
}, [!api, page, refetchCount, roomId, searchTerm]);
return { response, loading, error, refetch };
};

24
www/app/api/schemas.gen.ts
View File

@@ -263,6 +263,28 @@ export const $GetTranscript = {
],
title: "Meeting Id",
},
room_id: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Room Id",
},
room_name: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Room Name",
},
},
type: "object",
required: [
@@ -281,6 +303,8 @@ export const $GetTranscript = {
"participants",
"reviewed",
"meeting_id",
"room_id",
"room_name",
],
title: "GetTranscript",
} as const;

6
www/app/api/services.gen.ts
View File

@@ -199,18 +199,22 @@ export class DefaultService {
/**
* Transcripts List
* @param data The data for the request.
* @param data.roomId
* @param data.searchTerm
* @param data.page Page number
* @param data.size Page size
* @returns Page_GetTranscript_ Successful Response
* @throws ApiError
*/
public v1TranscriptsList(
data: V1TranscriptsListData = {},
data: V1TranscriptsListData,
): CancelablePromise<V1TranscriptsListResponse> {
return this.httpRequest.request({
method: "GET",
url: "/v1/transcripts",
query: {
room_id: data.roomId,
search_term: data.searchTerm,
page: data.page,
size: data.size,
},

4
www/app/api/types.gen.ts
View File

@@ -52,6 +52,8 @@ export type GetTranscript = {
participants: Array<TranscriptParticipant> | null;
reviewed: boolean;
meeting_id: string | null;
room_id: string | null;
room_name: string | null;
};
export type GetTranscriptSegmentTopic = {
@@ -274,6 +276,8 @@ export type V1TranscriptsListData = {
* Page number
*/
page?: number;
roomId: string | null;
searchTerm: string | null;
/**
* Page size
*/