Skip to content

Commit 54f4408

Browse files
notmdolliestanley
notmd
and
olliestanley
authored
UI for message searching (#3244)
close #3151 - UI for message searching. - Some minor fix for the message not being invalidated when delete in the admin area bug. - Always scroll to highlight message --------- Co-authored-by: Oliver <olivergestanley@gmail.com>
1 parent 274e65d commit 54f4408

File tree

13 files changed

+58
-38
lines changed

13 files changed

+58
-38
lines changed

‎backend/oasst_backend/prompt_repository.py‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1020,10 +1020,13 @@ def query_messages_ordered_by_created_date(
10201020
if lang is not None:
10211021
qry = qry.filter(Message.lang == lang)
10221022

1023-
if search_query is not None:
1024-
ts_lang: str = db_lang_to_postgres_ts_lang(lang)
1025-
ts_query = func.to_tsquery(ts_lang, search_query)
1026-
qry = qry.filter(ts_query.match(Message.search_vector))
1023+
if search_query is not None:
1024+
qry = qry.filter(
1025+
Message.search_vector.match(
1026+
search_query,
1027+
postgresql_regconfig=db_lang_to_postgres_ts_lang(lang),
1028+
),
1029+
)
10271030

10281031
if desc:
10291032
qry = qry.order_by(Message.created_date.desc(), Message.id.desc())

‎website/src/components/AdminArea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const AdminArea = ({ children }: { children: ReactNode }) => {
2626

2727
return (
2828
<SWRConfig value={swrConfig}>
29-
<main>{status === "loading" ? "loading..." : children}</main>;
29+
<main>{status === "loading" ? "loading..." : children}</main>
3030
</SWRConfig>
3131
);
3232
};

‎website/src/components/DataTable/DataTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ declare module "@tanstack/table-core" {
4747
// eslint-disable-next-line @typescript-eslint/no-unused-vars
4848
interface ColumnMeta<TData extends RowData, TValue> {
4949
cellProps?: DataTableCellPropsCallback<TData>;
50+
filterable?: boolean;
5051
}
5152
}
5253

5354
// eslint-disable-next-line @typescript-eslint/no-explicit-any
5455
export type DataTableColumnDef<T> = ColumnDef<T, any> & {
55-
filterable?: boolean;
5656
span?: number | ((cell: Cell<T, unknown>) => number | undefined); // TODO: move to meta
5757
};
5858

@@ -149,7 +149,7 @@ export const DataTable = <T,>({
149149
<Th key={header.id}>
150150
<Box display="flex" alignItems="center">
151151
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
152-
{(header.column.columnDef as DataTableColumnDef<T>).filterable && (
152+
{header.column.columnDef.meta?.filterable && (
153153
<FilterModal
154154
value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
155155
onChange={(value) => handleFilterChange({ id: header.id, value })}

‎website/src/components/Messages/AdminMessageTable.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import NextLink from "next/link";
1919
import { useTranslation } from "next-i18next";
2020
import { useMemo, useState } from "react";
2121
import { useCallback } from "react";
22+
import { useCurrentLocale } from "src/hooks/locale/useCurrentLocale";
2223
import { useDeleteMessage } from "src/hooks/message/useDeleteMessage";
2324
import { get } from "src/lib/api";
2425
import { API_ROUTES, ROUTES } from "src/lib/routes";
@@ -27,7 +28,7 @@ import { isKnownEmoji } from "src/types/Emoji";
2728
import useSWRImmutable from "swr/immutable";
2829

2930
import { useUndeleteMessage } from "../../hooks/message/useUndeleteMessage";
30-
import { DataTable, DataTableRowPropsCallback } from "../DataTable/DataTable";
31+
import { DataTable, DataTableRowPropsCallback, FilterItem } from "../DataTable/DataTable";
3132
import { DataTableAction } from "../DataTable/DataTableAction";
3233
import { useCursorPagination } from "../DataTable/useCursorPagination";
3334
import { UserDisplayNameCell } from "../UserDisplayNameCell";
@@ -54,7 +55,17 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
5455
const [deleteMessageId, setDeleteMessageId] = useState<string | null>(null);
5556
const [undeleteMessageId, setUndeleteMessageId] = useState<string | null>(null);
5657
const [activeMessageId, setActiveMessageId] = useState<string>();
57-
const { pagination, toNextPage, toPreviousPage } = useCursorPagination();
58+
const { pagination, toNextPage, toPreviousPage, resetCursor } = useCursorPagination();
59+
const [filterValues, setFilterValues] = useState<FilterItem[]>([]);
60+
const handleFilterValuesChange = (values: FilterItem[]) => {
61+
setFilterValues(values);
62+
resetCursor();
63+
};
64+
65+
const currentLang = useCurrentLocale();
66+
const search_query = filterValues.find((f) => f.id === "text")?.value || undefined; // avoid empty search
67+
const lang = search_query ? currentLang : undefined;
68+
5869
const {
5970
data: res,
6071
isLoading,
@@ -65,6 +76,8 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
6576
direction: pagination.direction,
6677
user_id: userId,
6778
include_user: includeUser,
79+
search_query,
80+
lang,
6881
}),
6982
get,
7083
{
@@ -110,14 +123,17 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
110123
},
111124
}),
112125
columnHelper.accessor("text", {
126+
meta: {
127+
filterable: true,
128+
},
113129
cell: ({ getValue, row }) => {
114130
const limit = 95;
115131
const text = getValue();
116132
const isActive = row.original.isActive;
117133
const renderText = isActive ? text : text.length > limit ? `${text.slice(0, limit)}...` : text;
118134

119135
return (
120-
<Box display="-webkit-box" wordBreak="break-all" whiteSpace="pre-wrap" w="md">
136+
<Box wordBreak="break-all" whiteSpace="pre-wrap" w="md">
121137
<Avatar
122138
size="xs"
123139
mr="2"
@@ -139,7 +155,6 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
139155
);
140156
},
141157
}),
142-
143158
columnHelper.accessor("lang", {
144159
header: "Language",
145160
cell: ({ getValue }) => <Badge textTransform="uppercase">{getValue()}</Badge>,
@@ -238,6 +253,7 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
238253
[setActiveMessageId]
239254
);
240255
const columnVisibility = useMemo(() => ({ user: !!includeUser }), [includeUser]);
256+
241257
return (
242258
<>
243259
<Modal isOpen={isOpen} onClose={onClose} isCentered>
@@ -280,6 +296,8 @@ export const AdminMessageTable = ({ userId, includeUser }: { userId?: string; in
280296
onPreviousClick={() => toPreviousPage(res)}
281297
columnVisibility={columnVisibility}
282298
isLoading={isLoading}
299+
filterValues={filterValues}
300+
onFilterChange={handleFilterValuesChange}
283301
></DataTable>
284302
</>
285303
);

‎website/src/components/Messages/MessageTree.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,10 @@ const toPx = (val: number) => `${val}px`;
1515
interface MessageTreeProps {
1616
tree: MessageWithChildren;
1717
messageId?: string;
18-
scrollToHighlighted?: boolean;
1918
}
2019

2120
// eslint-disable-next-line react/display-name
22-
export const MessageTree = memo(({ tree, messageId, scrollToHighlighted }: MessageTreeProps) => {
21+
export const MessageTree = memo(({ tree, messageId }: MessageTreeProps) => {
2322
const highlightedElementRef = useRef<HTMLDivElement>(null);
2423
useScrollToElementOnMount(highlightedElementRef);
2524

@@ -37,7 +36,7 @@ export const MessageTree = memo(({ tree, messageId, scrollToHighlighted }: Messa
3736
<Box pt={`${messagePaddingTop}px`} position="relative" className="box4">
3837
{hasChildren && depth < maxDepth && <Connection className="connection1"></Connection>}
3938
<MessageTableEntry
40-
ref={scrollToHighlighted && child.id === messageId ? highlightedElementRef : undefined}
39+
ref={child.id === messageId ? highlightedElementRef : undefined}
4140
showAuthorBadge
4241
highlight={child.id === messageId}
4342
message={child}
@@ -83,7 +82,7 @@ export const MessageTree = memo(({ tree, messageId, scrollToHighlighted }: Messa
8382
</>
8483
)}
8584
<MessageTableEntry
86-
ref={scrollToHighlighted && tree.id === messageId ? highlightedElementRef : undefined}
85+
ref={tree.id === messageId ? highlightedElementRef : undefined}
8786
showAuthorBadge
8887
message={tree}
8988
highlight={tree.id === messageId}

‎website/src/components/UserTable.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Card, CardBody, IconButton } from "@chakra-ui/react";
2-
import { createColumnHelper, Cell } from "@tanstack/react-table";
2+
import { createColumnHelper } from "@tanstack/react-table";
33
import { Pencil } from "lucide-react";
44
import Link from "next/link";
55
import { memo, useState } from "react";
@@ -16,26 +16,24 @@ const columns: DataTableColumnDef<User>[] = [
1616
columnHelper.accessor("user_id", {
1717
header: "ID",
1818
}),
19-
{
20-
...columnHelper.accessor("id", {
21-
header: "Auth ID",
22-
}),
23-
filterable: true,
24-
},
19+
columnHelper.accessor("id", {
20+
header: "Auth ID",
21+
meta: {
22+
filterable: true,
23+
},
24+
}),
2525
columnHelper.accessor("auth_method", {
2626
header: "Auth Method",
2727
}),
28-
{
29-
...columnHelper.accessor("display_name", {
30-
header: "Name",
31-
}),
32-
filterable: true,
28+
columnHelper.accessor("display_name", {
29+
header: "Name",
3330
meta: {
31+
filterable: true,
3432
cellProps: (x) => {
3533
return { style: { overflow: "hidden" } };
3634
},
3735
},
38-
},
36+
}),
3937
columnHelper.accessor("role", {
4038
header: "Role",
4139
}),

‎website/src/hooks/message/useDeleteMessage.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ export const useDeleteMessage = (messageId: string, onSuccess?: () => void) => {
88
onSuccess: async () => {
99
onSuccess?.();
1010
await mutate(
11-
(key) =>
12-
typeof key === "string" && (key.startsWith("/api/messages") || key.startsWith("/api/admin/user_messages")),
11+
(key) => typeof key === "string" && (key.startsWith("/api/messages") || key.startsWith("/api/admin/messages")),
1312
undefined,
1413
{ revalidate: true }
1514
);

‎website/src/hooks/message/useUndeleteMessage.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ export const useUndeleteMessage = (messageId: string, onSuccess?: () => void) =>
88
onSuccess: async () => {
99
onSuccess?.();
1010
await mutate(
11-
(key) =>
12-
typeof key === "string" && (key.startsWith("/api/messages") || key.startsWith("/api/admin/user_messages")),
11+
(key) => typeof key === "string" && (key.startsWith("/api/messages") || key.startsWith("/api/admin/messages")),
1312
undefined,
1413
{ revalidate: true }
1514
);

‎website/src/lib/oasst_api_client.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,7 @@ export class OasstApiClient {
450450
desc?: boolean;
451451
lang?: string;
452452
include_user?: boolean;
453+
search_query?: string;
453454
}) {
454455
return this.get<FetchMessagesCursorResponse>("/api/v1/messages/cursor", {
455456
...rest,

‎website/src/lib/routes.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ export const API_ROUTES = {
4848
RECENT_MESSAGES: withLang("/api/messages"),
4949
ADMIN_DELETE_MESSAGE: (messageId: string) => createRoute(`/api/admin/delete_message/${messageId}`),
5050
ADMIN_UNDELETE_MESSAGE: (messageId: string) => createRoute(`/api/admin/undelete_message/${messageId}`),
51-
ADMIN_MESSAGE_LIST: (query: CursorPaginationState & { user_id?: string; include_user?: boolean }) =>
52-
createRoute("/api/admin/messages", query),
51+
ADMIN_MESSAGE_LIST: (
52+
query: CursorPaginationState & { user_id?: string; include_user?: boolean; search_query?: string; lang?: string }
53+
) => createRoute("/api/admin/messages", query),
5354
// chat:
5455
GET_CHAT: (chat_id: string) => createRoute(`/api/chat`, { chat_id }),
5556
LIST_CHAT: "/api/chat",

0 commit comments

Comments
 (0)