feat(ui/): allow viewing content filter categories on guardrail info

litellm-proxy-extras/litellm_proxy_extras/migrations/20260214124140_baseline_diff/migration.sql

@@ -0,0 +1,2 @@
+-- This is an empty migration.
+

ui/litellm-dashboard/src/components/guardrails/content_filter/CategoryTable.tsx

@@ -0,0 +1,147 @@
+import React from "react";
+import { Typography, Select, Table, Tag, Button } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+const { Option } = Select;
+
+interface ContentCategory {
+  id: string;
+  category: string;
+  display_name: string;
+  action: "BLOCK" | "MASK";
+  severity_threshold: "high" | "medium" | "low";
+}
+
+interface CategoryTableProps {
+  categories: ContentCategory[];
+  onActionChange?: (id: string, action: "BLOCK" | "MASK") => void;
+  onSeverityChange?: (id: string, severity: "high" | "medium" | "low") => void;
+  onRemove?: (id: string) => void;
+  readOnly?: boolean;
+}
+
+const CategoryTable: React.FC<CategoryTableProps> = ({
+  categories,
+  onActionChange,
+  onSeverityChange,
+  onRemove,
+  readOnly = false,
+}) => {
+  const columns = [
+    {
+      title: "Category",
+      dataIndex: "display_name",
+      key: "display_name",
+      render: (displayName: string, record: ContentCategory) => (
+        <div>
+          <Text strong>{displayName}</Text>
+          {displayName !== record.category && (
+            <div>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {record.category}
+              </Text>
+            </div>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: "Severity Threshold",
+      dataIndex: "severity_threshold",
+      key: "severity_threshold",
+      width: 180,
+      render: (severity: string, record: ContentCategory) => {
+        if (readOnly) {
+          const colorMap = {
+            high: "red",
+            medium: "orange",
+            low: "yellow",
+          } as const;
+          return (
+            <Tag color={colorMap[severity as keyof typeof colorMap]}>
+              {severity.toUpperCase()}
+            </Tag>
+          );
+        }
+        return (
+          <Select
+            value={severity}
+            onChange={(value) => onSeverityChange?.(record.id, value as "high" | "medium" | "low")}
+            style={{ width: 150 }}
+            size="small"
+          >
+            <Option value="high">High</Option>
+            <Option value="medium">Medium</Option>
+            <Option value="low">Low</Option>
+          </Select>
+        );
+      },
+    },
+    {
+      title: "Action",
+      dataIndex: "action",
+      key: "action",
+      width: 150,
+      render: (action: string, record: ContentCategory) => {
+        if (readOnly) {
+          return (
+            <Tag color={action === "BLOCK" ? "red" : "blue"}>
+              {action}
+            </Tag>
+          );
+        }
+        return (
+          <Select
+            value={action}
+            onChange={(value) => onActionChange?.(record.id, value as "BLOCK" | "MASK")}
+            style={{ width: 120 }}
+            size="small"
+          >
+            <Option value="BLOCK">Block</Option>
+            <Option value="MASK">Mask</Option>
+          </Select>
+        );
+      },
+    },
+  ];
+
+  if (!readOnly) {
+    columns.push({
+      title: "",
+      key: "actions",
+      width: 100,
+      render: (_: any, record: ContentCategory) => (
+        <Button
+          type="text"
+          danger
+          size="small"
+          icon={<DeleteOutlined />}
+          onClick={() => onRemove?.(record.id)}
+        >
+          Delete
+        </Button>
+      ),
+    } as any);
+  }
+
+  if (categories.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "40px 0", color: "#999" }}>
+        No categories configured.
+      </div>
+    );
+  }
+
+  return (
+    <Table
+      dataSource={categories}
+      columns={columns}
+      rowKey="id"
+      pagination={false}
+      size="small"
+    />
+  );
+};
+
+export default CategoryTable;

ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterDisplay.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Card, Text, Badge } from "@tremor/react";
 import PatternTable from "./PatternTable";
 import KeywordTable from "./KeywordTable";
+import CategoryTable from "./CategoryTable";
 
 interface Pattern {
   id: string;
@@ -19,26 +20,42 @@ interface BlockedWord {
   description?: string;
 }
 
+interface ContentCategory {
+  id: string;
+  category: string;
+  display_name: string;
+  action: "BLOCK" | "MASK";
+  severity_threshold: "high" | "medium" | "low";
+}
+
 interface ContentFilterDisplayProps {
   patterns: Pattern[];
   blockedWords: BlockedWord[];
+  categories?: ContentCategory[];
   readOnly?: boolean;
   onPatternActionChange?: (id: string, action: "BLOCK" | "MASK") => void;
   onPatternRemove?: (id: string) => void;
   onBlockedWordUpdate?: (id: string, field: string, value: any) => void;
   onBlockedWordRemove?: (id: string) => void;
+  onCategoryActionChange?: (id: string, action: "BLOCK" | "MASK") => void;
+  onCategorySeverityChange?: (id: string, severity: "high" | "medium" | "low") => void;
+  onCategoryRemove?: (id: string) => void;
 }
 
 const ContentFilterDisplay: React.FC<ContentFilterDisplayProps> = ({
   patterns,
   blockedWords,
+  categories = [],
   readOnly = true,
   onPatternActionChange,
   onPatternRemove,
   onBlockedWordUpdate,
   onBlockedWordRemove,
+  onCategoryActionChange,
+  onCategorySeverityChange,
+  onCategoryRemove,
 }) => {
-  if (patterns.length === 0 && blockedWords.length === 0) {
+  if (patterns.length === 0 && blockedWords.length === 0 && categories.length === 0) {
     return null;
   }
 
@@ -47,6 +64,22 @@ const ContentFilterDisplay: React.FC<ContentFilterDisplayProps> = ({
 
   return (
     <>
+      {categories.length > 0 && (
+        <Card className="mt-6">
+          <div className="flex justify-between items-center mb-4">
+            <Text className="text-lg font-semibold">Content Categories</Text>
+            <Badge color="blue">{categories.length} categories configured</Badge>
+          </div>
+          <CategoryTable
+            categories={categories}
+            onActionChange={readOnly ? undefined : onCategoryActionChange}
+            onSeverityChange={readOnly ? undefined : onCategorySeverityChange}
+            onRemove={readOnly ? undefined : onCategoryRemove}
+            readOnly={readOnly}
+          />
+        </Card>
+      )}
+
       {patterns.length > 0 && (
         <Card className="mt-6">
           <div className="flex justify-between items-center mb-4">

ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterManager.tsx

@@ -158,7 +158,14 @@ const ContentFilterManager: React.FC<ContentFilterManagerProps> = ({
 
   // Read-only display mode
   if (!isEditing) {
-    return <ContentFilterDisplay patterns={selectedPatterns} blockedWords={blockedWords} readOnly={true} />;
+    return (
+      <ContentFilterDisplay
+        patterns={selectedPatterns}
+        blockedWords={blockedWords}
+        categories={selectedContentCategories}
+        readOnly={true}
+      />
+    );
   }
 
   // Edit mode