feat(site): add client filter to AI Bridge Session table (#23733)

site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.stories.tsx

@@ -19,6 +19,7 @@ const defaultFilterProps = getDefaultFilterProps<
 	menus: {
 		user: MockMenu,
 		provider: MockMenu,
+		client: MockMenu,
 	},
 });
 
@@ -47,6 +48,7 @@ export const WithQuery: Story = {
 			menus: {
 				user: MockMenu,
 				provider: MockMenu,
+				client: MockMenu,
 			},
 			used: true,
 		}),
@@ -59,6 +61,7 @@ export const Loading: Story = {
 		menus: {
 			user: { ...MockMenu, isInitializing: true },
 			provider: MockMenu,
+			client: MockMenu,
 		},
 	},
 };

site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.tsx

@@ -5,10 +5,14 @@ import {
 	type useFilter,
 } from "#/components/Filter/Filter";
 import { type UserFilterMenu, UserMenu } from "#/components/Filter/UserFilter";
+import {
+	ClientFilter,
+	type ClientFilterMenu,
+} from "../RequestLogsPage/RequestLogsFilter/ClientFilter";
 import {
 	ProviderFilter,
 	type ProviderFilterMenu,
-} from "#/pages/AIBridgePage/RequestLogsPage/RequestLogsFilter/ProviderFilter";
+} from "../RequestLogsPage/RequestLogsFilter/ProviderFilter";
 
 interface ListSessionsFilterProps {
 	filter: ReturnType<typeof useFilter>;
@@ -16,6 +20,7 @@ interface ListSessionsFilterProps {
 	menus: {
 		user: UserFilterMenu;
 		provider: ProviderFilterMenu;
+		client: ClientFilterMenu;
 	};
 }
 
@@ -44,8 +49,7 @@ export const ListSessionsFilter: FC<ListSessionsFilterProps> = ({
 				<>
 					<UserMenu menu={menus.user} placeholder="All users" />
 					<ProviderFilter menu={menus.provider} />
-					{/* TODO: add client filter */}
-					{/* <ClientFilter menu={menus.client} /> */}
+					<ClientFilter menu={menus.client} />
 				</>
 			}
 		/>

site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx

@@ -8,6 +8,7 @@ import { usePaginatedQuery } from "#/hooks/usePaginatedQuery";
 import { useDashboard } from "#/modules/dashboard/useDashboard";
 import { RequirePermission } from "#/modules/permissions/RequirePermission";
 import { pageTitle } from "#/utils/page";
+import { useClientFilterMenu } from "../RequestLogsPage/RequestLogsFilter/ClientFilter";
 import { useProviderFilterMenu } from "../RequestLogsPage/RequestLogsFilter/ProviderFilter";
 import { ListSessionsPageView } from "./ListSessionsPageView";
 
@@ -56,6 +57,15 @@ const AISessionListPage: FC = () => {
 			}),
 	});
 
+	const clientMenu = useClientFilterMenu({
+		value: filter.values.client,
+		onChange: (option) =>
+			filter.update({
+				...filter.values,
+				client: option?.value,
+			}),
+	});
+
 	return (
 		<RequirePermission isFeatureVisible={hasPermission}>
 			<title>{pageTitle("Sessions", "AI Bridge")}</title>
@@ -76,6 +86,7 @@ const AISessionListPage: FC = () => {
 					menus: {
 						user: userMenu,
 						provider: providerMenu,
+						client: clientMenu,
 					},
 				}}
 			/>