small visual adjustments and chat button

messages/en-US.json

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

server/routers/auditLogs/queryAiSessionLog.ts

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

server/routers/auditLogs/types.ts

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

src/app/[orgId]/settings/logs/ai/page.tsx

@@ -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 }) => (
+            header: ({ column }) => {
-                <span className="px-2">{t("model")}</span>
-            ),
-            cell: ({ row }) => {
                 return (
-                    <span className="text-xs text-muted-foreground">
+                    <div className="flex items-center gap-2 px-2">
-                        {row.original.requestedModel || "-"}
+                        <ColumnFilterButton
-                    </span>
+                            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}

src/components/AiSessionChatView.tsx

@@ -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 justify-between gap-2">
-                <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-500">
+                {truncated ? (
-                    <AlertTriangle className="h-3.5 w-3.5 flex-none" />
+                    <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-500">
-                    {t("aiSessionLogTruncated")}
+                        <AlertTriangle className="h-3.5 w-3.5 flex-none" />
-                </div>
+                        {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 />
+                )}
+                <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>
     );
 }

src/lib/queries.ts

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