small visual adjustments and chat button

2026-08-12 15:30:53 +02:00 · 2026-08-11 15:57:57 -04:00
parent e3ccc4f8d4
commit e734cc93a1
6 changed files with 113 additions and 50 deletions
@@ -3405,6 +3405,8 @@
    "aiSessionNoData": "No data captured",
    "aiSessionCouldNotParse": "(raw, could not parse transcript)",
    "aiSessionLogTruncated": "This session was truncated before storage and may be incomplete.",
+    "aiSessionViewRaw": "View Raw JSON",
+    "aiSessionViewChat": "View Chat",
    "requestAnalyticsDescription": "View detailed request analytics for resources in this organization",
    "logRetentionRequestLabel": "HTTP Request Log Retention",
    "logRetentionRequestDescription": "How long to retain request logs",
@@ -66,6 +66,7 @@ export const queryAiSessionLogsQuery = z.strictObject({
        .pipe(z.int().positive())
        .optional(),
    actor: z.string().optional(),
+    model: z.string().optional(),
    isStream: z
        .union([z.boolean(), z.string()])
        .transform((val) => (typeof val === "string" ? val === "true" : val))
@@ -123,6 +124,9 @@ function getWhere(data: Q) {
              )
            : undefined,
        data.actor ? eq(aiSessionLog.userId, data.actor) : undefined,
+        data.model
+            ? eq(aiSessionLog.requestedModel, data.model)
+            : undefined,
        data.isStream !== undefined
            ? eq(aiSessionLog.isStream, data.isStream)
            : undefined
@@ -333,7 +337,8 @@ async function queryUniqueFilterAttributes(
        uniqueProviders,
        uniqueUsers,
        uniqueResources,
-        uniqueSiteResources
+        uniqueSiteResources,
+        uniqueModels
    ] = await Promise.all([
        logsDb
            .selectDistinct({ id: aiSessionLog.providerId })
@@ -354,9 +359,18 @@ async function queryUniqueFilterAttributes(
            .selectDistinct({ id: aiSessionLog.siteResourceId })
            .from(aiSessionLog)
            .where(and(baseConditions, isNull(aiSessionLog.resourceId)))
+            .limit(DISTINCT_LIMIT + 1),
+        logsDb
+            .selectDistinct({ model: aiSessionLog.requestedModel })
+            .from(aiSessionLog)
+            .where(baseConditions)
            .limit(DISTINCT_LIMIT + 1)
    ]);

+    const models = uniqueModels
+        .map((row) => row.model)
+        .filter((model): model is string => model !== null);
+
    const providerIds = uniqueProviders
        .map((row) => row.id)
        .filter((id): id is number => id !== null);
@@ -440,7 +454,8 @@ async function queryUniqueFilterAttributes(
    return {
        providers: sortNamedFilterOptions(providers),
        resources: sortNamedFilterOptions(resourcesWithNames),
-        users: userList
+        users: userList,
+        models: models.sort()
    };
 }

@@ -138,6 +138,7 @@ export type QueryAiSessionLogResponse = {
            id: string;
            email: string | null;
        }[];
+        models: string[];
    };
 };

@@ -50,12 +50,14 @@ export default function AiSessionLogsPage() {
        capability?: string;
        resourceId?: string;
        actor?: string;
+        model?: string;
        isStream?: string;
    }>({
        providerId: searchParams.get("providerId") || undefined,
        capability: searchParams.get("capability") || undefined,
        resourceId: searchParams.get("resourceId") || undefined,
        actor: searchParams.get("actor") || undefined,
+        model: searchParams.get("model") || undefined,
        isStream: searchParams.get("isStream") || undefined
    });

@@ -132,7 +134,8 @@ export default function AiSessionLogsPage() {
    const filterAttributes = data?.filterAttributes ?? {
        providers: [],
        resources: [],
-        users: []
+        users: [],
+        models: []
    };

    const handleDateRangeChange = (
@@ -309,15 +312,27 @@ export default function AiSessionLogsPage() {
        },
        {
            accessorKey: "requestedModel",
-            header: ({ column }) => (
-                <span className="px-2">{t("model")}</span>
-            ),
-            cell: ({ row }) => {
+            header: ({ column }) => {
                return (
-                    <span className="text-xs text-muted-foreground">
-                        {row.original.requestedModel || "-"}
-                    </span>
+                    <div className="flex items-center gap-2 px-2">
+                        <ColumnFilterButton
+                            options={filterAttributes.models.map((model) => ({
+                                value: model,
+                                label: model
+                            }))}
+                            selectedValue={filters.model}
+                            onValueChange={(value) =>
+                                handleFilterChange("model", value)
+                            }
+                            label={t("model")}
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
+                        />
+                    </div>
                );
+            },
+            cell: ({ row }) => {
+                return <span>{row.original.requestedModel || "-"}</span>;
            }
        },
        {
@@ -444,7 +459,7 @@ export default function AiSessionLogsPage() {
    const renderExpandedRow = (row: any) => {
        return (
            <div className="space-y-4">
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs">
+                <div className="grid grid-cols-2 gap-4 text-xs">
                    <div>
                        <strong>{t("aiSessionId")}</strong>
                        <p className="text-muted-foreground mt-1 break-all">
@@ -457,18 +472,6 @@ export default function AiSessionLogsPage() {
                            {row.statusCode ?? "N/A"}
                        </p>
                    </div>
-                    <div>
-                        <strong>{t("model")}</strong>
-                        <p className="text-muted-foreground mt-1 break-all">
-                            {row.requestedModel || "N/A"}
-                        </p>
-                    </div>
-                    <div>
-                        <strong>{t("capability")}</strong>
-                        <p className="text-muted-foreground mt-1 break-all">
-                            {capabilityLabels[row.capability] || row.capability}
-                        </p>
-                    </div>
                </div>
                <AiSessionChatView
                    normalizedRequest={row.normalizedRequest}
@@ -1,8 +1,17 @@
 "use client";

-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
-import { AlertTriangle, Bot, Terminal, User as UserIcon, Wrench } from "lucide-react";
+import {
+    AlertTriangle,
+    Bot,
+    Code,
+    MessagesSquare,
+    Terminal,
+    User as UserIcon,
+    Wrench
+} from "lucide-react";
+import { Button } from "@app/components/ui/button";
 import type { NormalizedAiMessage } from "@server/lib/aiMessageNormalization";

 type AiSessionChatViewProps = {
@@ -95,14 +104,14 @@ function RawFallbackBlock({
    label: string;
    raw: string | null;
    noDataLabel: string;
-    unparsedLabel: string;
+    unparsedLabel?: string;
 }) {
    const pretty = prettyRaw(raw);
    return (
        <div className="rounded-md border bg-muted/30 p-3">
            <div className="mb-1 text-xs font-medium text-muted-foreground">
                {label}
-                {pretty && (
+                {pretty && unparsedLabel && (
                    <span className="ml-2 font-normal italic opacity-70">
                        {unparsedLabel}
                    </span>
@@ -123,6 +132,7 @@ export function AiSessionChatView({
    truncated
 }: AiSessionChatViewProps) {
    const t = useTranslations();
+    const [rawMode, setRawMode] = useState(false);

    const requestMessages = useMemo(
        () => parseMessages(normalizedRequest),
@@ -139,38 +149,69 @@ export function AiSessionChatView({

    return (
        <div className="space-y-2">
-            {truncated && (
-                <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-500">
-                    <AlertTriangle className="h-3.5 w-3.5 flex-none" />
-                    {t("aiSessionLogTruncated")}
-                </div>
-            )}
-            <div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
-                {hasRequestMessages ? (
-                    requestMessages!.map((message, i) => (
-                        <MessageBubble key={`req-${i}`} message={message} />
-                    ))
+            <div className="flex items-center justify-between gap-2">
+                {truncated ? (
+                    <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-500">
+                        <AlertTriangle className="h-3.5 w-3.5 flex-none" />
+                        {t("aiSessionLogTruncated")}
+                    </div>
                ) : (
+                    <div />
+                )}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRawMode((prev) => !prev)}
+                >
+                    {rawMode ? (
+                        <MessagesSquare className="mr-2 h-3.5 w-3.5" />
+                    ) : (
+                        <Code className="mr-2 h-3.5 w-3.5" />
+                    )}
+                    {rawMode ? t("aiSessionViewChat") : t("aiSessionViewRaw")}
+                </Button>
+            </div>
+            {rawMode ? (
+                <div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
                    <RawFallbackBlock
                        label={t("aiSessionRequest")}
-                        raw={requestBody}
+                        raw={normalizedRequest}
                        noDataLabel={t("aiSessionNoData")}
-                        unparsedLabel={t("aiSessionCouldNotParse")}
                    />
-                )}
-                {hasResponseMessages ? (
-                    responseMessages!.map((message, i) => (
-                        <MessageBubble key={`res-${i}`} message={message} />
-                    ))
-                ) : (
                    <RawFallbackBlock
                        label={t("aiSessionResponse")}
-                        raw={responseBody}
+                        raw={normalizedResponse}
                        noDataLabel={t("aiSessionNoData")}
-                        unparsedLabel={t("aiSessionCouldNotParse")}
                    />
-                )}
-            </div>
+                </div>
+            ) : (
+                <div className="flex max-h-[32rem] flex-col gap-3 overflow-y-auto rounded-md border bg-background p-4">
+                    {hasRequestMessages ? (
+                        requestMessages!.map((message, i) => (
+                            <MessageBubble key={`req-${i}`} message={message} />
+                        ))
+                    ) : (
+                        <RawFallbackBlock
+                            label={t("aiSessionRequest")}
+                            raw={requestBody}
+                            noDataLabel={t("aiSessionNoData")}
+                            unparsedLabel={t("aiSessionCouldNotParse")}
+                        />
+                    )}
+                    {hasResponseMessages ? (
+                        responseMessages!.map((message, i) => (
+                            <MessageBubble key={`res-${i}`} message={message} />
+                        ))
+                    ) : (
+                        <RawFallbackBlock
+                            label={t("aiSessionResponse")}
+                            raw={responseBody}
+                            noDataLabel={t("aiSessionNoData")}
+                            unparsedLabel={t("aiSessionCouldNotParse")}
+                        />
+                    )}
+                </div>
+            )}
        </div>
    );
 }
@@ -1053,6 +1053,7 @@ export const aiSessionLogsFiltersSchema = z.object({
    capability: z.string().optional().catch(undefined),
    resourceId: z.string().optional().catch(undefined),
    actor: z.string().optional().catch(undefined),
+    model: z.string().optional().catch(undefined),
    isStream: z.string().optional().catch(undefined)
 });