diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.stories.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.stories.tsx index 1761379a15..0d162008cf 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.stories.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.stories.tsx @@ -20,6 +20,7 @@ const defaultFilterProps = getDefaultFilterProps< user: MockMenu, provider: MockMenu, client: MockMenu, + model: MockMenu, }, }); @@ -49,6 +50,7 @@ export const WithQuery: Story = { user: MockMenu, provider: MockMenu, client: MockMenu, + model: MockMenu, }, used: true, }), @@ -62,6 +64,7 @@ export const Loading: Story = { user: { ...MockMenu, isInitializing: true }, provider: MockMenu, client: MockMenu, + model: MockMenu, }, }, }; diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.tsx index 937c43636b..516caae4bb 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsFilter.tsx @@ -9,6 +9,10 @@ import { ClientFilter, type ClientFilterMenu, } from "../RequestLogsPage/RequestLogsFilter/ClientFilter"; +import { + ModelFilter, + type ModelFilterMenu, +} from "../RequestLogsPage/RequestLogsFilter/ModelFilter"; import { ProviderFilter, type ProviderFilterMenu, @@ -21,6 +25,7 @@ interface ListSessionsFilterProps { user: UserFilterMenu; provider: ProviderFilterMenu; client: ClientFilterMenu; + model: ModelFilterMenu; }; } @@ -50,6 +55,7 @@ export const ListSessionsFilter: FC = ({ + } /> diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx index f34cfb3a30..c4c4127705 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx @@ -10,6 +10,7 @@ import { RequirePermission } from "#/modules/permissions/RequirePermission"; import { pageTitle } from "#/utils/page"; import { getAIBridgePermissions } from "../getAIBridgePermissions"; import { useClientFilterMenu } from "../RequestLogsPage/RequestLogsFilter/ClientFilter"; +import { useModelFilterMenu } from "../RequestLogsPage/RequestLogsFilter/ModelFilter"; import { useProviderFilterMenu } from "../RequestLogsPage/RequestLogsFilter/ProviderFilter"; import { ListSessionsPageView } from "./ListSessionsPageView"; @@ -64,6 +65,15 @@ const AISessionListPage: FC = () => { }), }); + const modelMenu = useModelFilterMenu({ + value: filter.values.model, + onChange: (option) => + filter.update({ + ...filter.values, + model: option?.value, + }), + }); + return ( {pageTitle("Sessions", "AI Bridge")} @@ -85,6 +95,7 @@ const AISessionListPage: FC = () => { user: userMenu, provider: providerMenu, client: clientMenu, + model: modelMenu, }, }} /> diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx index b4affcee75..d4c6eeb40e 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx @@ -24,6 +24,7 @@ const defaultFilterProps = getDefaultFilterProps({ user: MockMenu, provider: MockMenu, client: MockMenu, + model: MockMenu, }, }); diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx index 34805a7585..c525df1863 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx @@ -43,11 +43,13 @@ const ThreadTooltip: FC = ({ children }) => (
{children}
 - -

- A thread is a multi-part interaction between human and agent involving - an initial human prompt and a subsequent agentic loop. -

+ + A thread is a multi-part interaction between human and agent involving + an initial human prompt and a subsequent agentic loop. @@ -78,9 +80,9 @@ export const ListSessionsPageView: FC = ({ - +
- + Last Prompt User Provider diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx index 5b551b275e..9addc7cfe4 100644 --- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx +++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx @@ -33,14 +33,15 @@ export const ListSessionsRow: FC = ({ onClick?.(); }} > - +

{session.last_prompt}

 - - {session.last_prompt} + +
Last prompt
+
{session.last_prompt}
 @@ -54,7 +55,7 @@ export const ListSessionsRow: FC = ({ size="lg" className="flex-shrink-0" /> -
+
{session.initiator.name ?? session.initiator.username}
@@ -103,7 +104,7 @@ export const ListSessionsRow: FC = ({ {session.threads} - +
{formatDateTime( diff --git a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionSummaryTable.tsx b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionSummaryTable.tsx index d37139b4e0..951babd654 100644 --- a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionSummaryTable.tsx +++ b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionSummaryTable.tsx @@ -45,28 +45,30 @@ export const SessionSummaryTable = ({ return (
Session ID
-
+
{sessionId}
Start time
-
+
{formatDateTime(startTime)}
End time
-
{endTime ? formatDateTime(endTime) : "—"}
+
+ {endTime ? formatDateTime(endTime) : "—"} +
Duration
{durationInMs !== undefined diff --git a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPage.tsx b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPage.tsx index b98201bc04..5fe41793a7 100644 --- a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPage.tsx +++ b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPage.tsx @@ -1,6 +1,6 @@ import type { FC } from "react"; import { useInfiniteQuery } from "react-query"; -import { useParams } from "react-router"; +import { useNavigate, useParams } from "react-router"; import { infiniteSessionThreads } from "#/api/queries/aiBridge"; import { useAuthenticated } from "#/hooks/useAuthenticated"; import { useDashboard } from "#/modules/dashboard/useDashboard"; @@ -12,6 +12,7 @@ import { SessionThreadsPageView } from "./SessionThreadsPageView"; const SessionThreadsPage: FC = () => { const { permissions } = useAuthenticated(); const { entitlements } = useDashboard(); + const navigate = useNavigate(); const { isEntitled, isEnabled, hasPermission } = getAIBridgePermissions( entitlements, @@ -44,6 +45,7 @@ const SessionThreadsPage: FC = () => { onFetchNextPage={sessionQuery.fetchNextPage} isAISessionsEnabled={isEnabled} isAISessionsEntitled={isEntitled} + onBackClicked={() => navigate(-1)} /> ); diff --git a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPageView.tsx b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPageView.tsx index 5de34810b0..cf017fb9cf 100644 --- a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPageView.tsx +++ b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionThreadsPageView.tsx @@ -1,6 +1,5 @@ import { ArrowLeftIcon, InfoIcon } from "lucide-react"; import type { FC, PropsWithChildren } from "react"; -import { Link as RouterLink } from "react-router"; import type { AIBridgeSessionThreadsResponse, AIBridgeThread, @@ -27,7 +26,7 @@ const SessionSummaryTooltip: FC = ({ children }) => (

A session is a set of threads or interceptions logically grouped by a @@ -47,6 +46,7 @@ interface SessionThreadsPageViewProps { onFetchNextPage: () => void; isAISessionsEnabled: boolean; isAISessionsEntitled: boolean; + onBackClicked: () => void; } export const SessionThreadsPageView: FC = ({ @@ -58,6 +58,7 @@ export const SessionThreadsPageView: FC = ({ onFetchNextPage, isAISessionsEnabled, isAISessionsEntitled, + onBackClicked, }) => { if (!isAISessionsEntitled) { return ; @@ -81,19 +82,20 @@ export const SessionThreadsPageView: FC = ({ variant="outline" size="lg" title="Back to AI Bridge sessions list" + onClick={onBackClicked} > - + Back - +

-