Transcriptions filtering and search

server/reflector/db/transcripts.py

@@ -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:])

server/reflector/views/transcripts.py

@@ -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,
         ),

www/app/(app)/browse/page.tsx

@@ -1,50 +1,66 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } 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 {
   Flex,
   Spinner,
   Heading,
-  Button,
+  Box,
-  Card,
-  Link,
-  CardBody,
-  Stack,
   Text,
+  Link,
+  Stack,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Button,
+  Divider,
+  Input,
   Icon,
-  Grid,
+  Tooltip,
-  IconButton,
-  Spacer,
   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 {
-import { ExpandableText } from "../../lib/expandableText";
+  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 [selectedRoomId, setSelectedRoomId] = useState("");
-  const { loading, response, refetch } = useTranscriptList(page);
+  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"
+      w={{ base: "full", md: "container.xl" }}
-      gap={2}
+      mx="auto"
-      overflowY="auto"
+      p={4}
-      minH="100%"
     >
-      <Flex
+      <Flex flexDir="row" justify="space-between" align="center" mb={4}>
-        flexDir="row"
+        <Heading size="md">
-        justify="flex-end"
+          {userName ? `${userName}'s Transcriptions` : "Your Transcriptions"}{" "}
-        align="center"
+          {loading || (deletionLoading && <Spinner size="sm" />)}
-        flexWrap={"wrap-reverse"}
+        </Heading>
-        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>
-      <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 />
+      <Flex flexDir={{ base: "column", md: "row" }}>
-                  <Menu closeOnSelect={true}>
+        <Box w={{ base: "full", md: "300px" }} p={4} bg="gray.100">
-                    <MenuButton
+          <Stack spacing={3}>
-                      as={IconButton}
+            <Link
-                      icon={<FaEllipsisVertical />}
+              as={NextLink}
-                      aria-label="actions"
+              href="#"
-                    />
+              onClick={() => handleFilterTranscripts("")}
-                    <MenuList>
+              color={selectedRoomId === "" ? "blue.500" : "gray.600"}
-                      <MenuItem
+              _hover={{ color: "blue.300" }}
-                        isDisabled={deletionLoading}
+              fontWeight={selectedRoomId === "" ? "bold" : "normal"}
-                        onClick={() => setTranscriptToDeleteId(item.id)}
+            >
-                        icon={<FaTrash color={"red.500"} />}
+              All Transcripts
-                      >
+            </Link>
-                        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>
 
-                            <AlertDialogBody>
+            <Divider />
-                              Are you sure? You can't undo this action
-                              afterwards.
-                            </AlertDialogBody>
 
-                            <AlertDialogFooter>
+            {rooms.length > 0 && (
-                              <Button ref={cancelRef} onClick={onCloseDeletion}>
+              <>
-                                Cancel
+                <Heading size="sm" mb={2}>
-                              </Button>
+                  My Rooms
-                              <Button
+                </Heading>
-                                colorScheme="red"
+
-                                onClick={handleDeleteTranscript(item.id)}
+                {rooms.map((room) => (
-                                ml={3}
+                  <Link
-                              >
+                    key={room.id}
-                                Delete
+                    as={NextLink}
-                              </Button>
+                    href="#"
-                            </AlertDialogFooter>
+                    onClick={() => handleFilterTranscripts(room.id)}
-                          </AlertDialogContent>
+                    color={selectedRoomId === room.id ? "blue.500" : "gray.600"}
-                        </AlertDialogOverlay>
+                    _hover={{ color: "blue.300" }}
-                      </AlertDialog>
+                    fontWeight={selectedRoomId === room.id ? "bold" : "normal"}
-                    </MenuList>
+                    ml={4}
-                  </Menu>
+                  >
-                </Flex>
+                    {room.name}
-                <Stack mt="4" spacing="2">
+                  </Link>
-                  <Flex align={"center"} gap={2}>
+                ))}
-                    {item.status == "ended" && (
+              </>
-                      <Tooltip label="Processing done">
+            )}
-                        <span>
+          </Stack>
-                          <Icon color="green" as={FaCheck} />
+        </Box>
-                        </span>
+
-                      </Tooltip>
+        <Flex flexDir="column" flex="1" p={4} gap={4}>
-                    )}
+          <Flex mb={4} alignItems="center">
-                    {item.status == "error" && (
+            <Input
-                      <Tooltip label="Processing error">
+              placeholder="Search transcriptions..."
-                        <span>
+              value={searchInputValue}
-                          <Icon color="red.primary" as={MdError} />
+              onChange={(e) => setSearchInputValue(e.target.value)}
-                        </span>
+              onKeyDown={handleKeyDown}
-                      </Tooltip>
+            />
-                    )}
+            <Button ml={2} onClick={handleSearch}>
-                    {item.status == "idle" && (
+              Search
-                      <Tooltip label="New meeting, no recording">
+            </Button>
-                        <span>
+          </Flex>
-                          <Icon color="yellow.500" as={FaStar} />
+          <Box display={{ base: "none", md: "block" }}>
-                        </span>
+            <Table colorScheme="gray">
-                      </Tooltip>
+              <Thead>
-                    )}
+                <Tr>
-                    {item.status == "processing" && (
+                  <Th pl={12} width="400px">
-                      <Tooltip label="Processing in progress">
+                    Transcription Title
-                        <span>
+                  </Th>
-                          <Icon
+                  <Th width="150px">Room</Th>
-                            color="grey.primary"
+                  <Th width="200px">Date</Th>
-                            as={FaGear}
+                  <Th width="100px">Duration</Th>
-                            transition={"all 2s ease"}
+                  <Th width="50px"></Th>
-                            transform={"rotate(0deg)"}
+                </Tr>
-                            _hover={{ transform: "rotate(360deg)" }}
+              </Thead>
-                          />
+              <Tbody>
-                        </span>
+                {response?.items?.map((item: GetTranscript) => (
-                      </Tooltip>
+                  <Tr key={item.id}>
-                    )}
+                    <Td>
-                    {item.status == "recording" && (
+                      <Flex alignItems="start">
-                      <Tooltip label="Recording in progress">
+                        {item.status === "ended" && (
-                        <span>
+                          <Tooltip label="Processing done">
-                          <Icon color="blue.primary" as={FaMicrophone} />
+                            <span>
-                        </span>
+                              <Icon color="green" as={FaCheck} />
-                      </Tooltip>
+                            </span>
-                    )}
+                          </Tooltip>
-                    <Text fontSize="small">
+                        )}
+                        {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"}
+                    </Td>
-                      {formatTimeMs(item.duration)}
+                    <Td>{formatTimeMs(item.duration)}</Td>
-                    </Text>
+                    <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}>
+                </Box>
-                    {item.short_summary}
+              ))}
-                  </ExpandableText>
+            </Stack>
-                </Stack>
+          </Box>
-              </CardBody>
+          <Pagination
-            </Card>
+            page={page}
-          ))}
+            setPage={setPage}
-      </Grid>
+            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>
   );
 }

www/app/(app)/transcripts/useTranscriptList.ts

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

www/app/api/schemas.gen.ts

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

www/app/api/services.gen.ts

@@ -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,
       },

www/app/api/types.gen.ts

@@ -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
    */