From 5946c68973d1605c6c9d2d352afddb21d5e1c663 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 22:04:22 +0000
Subject: [PATCH] feat(ui): guardrails/content_filter/ContentFilterManager
 Alert to shadcn

- antd Alert/Divider/Typography (Text only) \u2192 inline flex+<hr>
  section divider and a lucide AlertTriangle warning banner.
- Categorical amber tint preserved behind no-raw-tailwind-colors
  eslint-disable.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../content_filter/ContentFilterManager.tsx   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterManager.tsx b/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterManager.tsx
index 1e106e2b1c4..597cbf7613f 100644
--- a/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterManager.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterManager.tsx
@@ -1,10 +1,9 @@
-import { Alert, Divider, Typography } from "antd";
+import { AlertTriangle } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import ContentFilterConfiguration from "./ContentFilterConfiguration";
 import ContentFilterDisplay from "./ContentFilterDisplay";
 import type { CompetitorIntentConfig } from "./CompetitorIntentConfiguration";
 
-const { Text } = Typography
 
 interface Pattern {
   id: string;
@@ -233,19 +232,21 @@ const ContentFilterManager: React.FC<ContentFilterManagerProps> = ({
   // Edit mode
   return (
     <>
-      <Divider orientation="left">Content Filter Configuration</Divider>
+      <div className="flex items-center my-4">
+        <span className="text-sm font-medium text-foreground mr-3">
+          Content Filter Configuration
+        </span>
+        <hr className="flex-1 border-border" />
+      </div>
       {hasUnsavedChanges && (
-        <Alert
-          type="warning"
-          showIcon
-          className="mb-4"
-          message={
-            <Text>
-              You have unsaved changes to patterns or keywords. Remember to click &quot;Save Changes&quot; at the
-              bottom.
-            </Text>
-          }
-        />
+        // eslint-disable-next-line litellm-ui/no-raw-tailwind-colors
+        <div className="flex gap-2 items-start p-3 mb-4 rounded-md bg-amber-50 border border-amber-200 text-amber-800 dark:bg-amber-950/30 dark:border-amber-900 dark:text-amber-200">
+          <AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
+          <span className="text-sm">
+            You have unsaved changes to patterns or keywords. Remember to
+            click &quot;Save Changes&quot; at the bottom.
+          </span>
+        </div>
       )}
       <div className="mb-6">
         {guardrailSettings && guardrailSettings.content_filter_settings && (