From 90ebedd3e7772ec6e815699126dc0f63373d6001 Mon Sep 17 00:00:00 2001
From: Harshit Jain <harshitjain0562@gmail.com>
Date: Fri, 30 Jan 2026 20:28:39 +0530
Subject: [PATCH] fix: hide during call from frontend

---
 .../guardrails/add_guardrail_form.tsx         | 57 ++++++-------------
 .../guardrails/edit_guardrail_form.tsx        | 16 +++---
 .../guardrails/guardrail_info_helpers.tsx     | 17 ++++++
 3 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/guardrails/add_guardrail_form.tsx b/ui/litellm-dashboard/src/components/guardrails/add_guardrail_form.tsx
index f4bfa304811..46d0ae49a54 100644
--- a/ui/litellm-dashboard/src/components/guardrails/add_guardrail_form.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/add_guardrail_form.tsx
@@ -5,6 +5,7 @@ import {
   guardrail_provider_map,
   shouldRenderPIIConfigSettings,
   shouldRenderContentFilterConfigSettings,
+  getAvailableModesForProvider,
   guardrailLogoMap,
   populateGuardrailProviders,
   populateGuardrailProviderMap,
@@ -125,6 +126,11 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
     return (providerValue || "").toLowerCase() === "tool_permission";
   }, [selectedProvider]);
 
+  const availableModes = useMemo(
+    () => getAvailableModesForProvider(selectedProvider, guardrailSettings?.supported_modes),
+    [selectedProvider, guardrailSettings?.supported_modes],
+  );
+
   // Fetch guardrail UI settings + provider params on mount / accessToken change
   useEffect(() => {
     if (!accessToken) return;
@@ -155,11 +161,19 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
   const handleProviderChange = (value: string) => {
     setSelectedProvider(value);
     // Reset form fields that are provider-specific
-    form.setFieldsValue({
+    const updates: { config?: undefined; presidio_analyzer_api_base?: undefined; presidio_anonymizer_api_base?: undefined; mode?: string[] } = {
       config: undefined,
       presidio_analyzer_api_base: undefined,
       presidio_anonymizer_api_base: undefined,
-    });
+    };
+    // Content Filter cannot use during_call (MASK must run first); clear it if user switches to Content Filter
+    if (shouldRenderContentFilterConfigSettings(value)) {
+      const currentMode = form.getFieldValue("mode");
+      if (Array.isArray(currentMode) && currentMode.includes("during_call")) {
+        updates.mode = currentMode.filter((m: string) => m !== "during_call");
+      }
+    }
+    form.setFieldsValue(updates);
 
     // Reset PII selections when changing provider
     setSelectedEntities([]);
@@ -530,7 +544,7 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
           rules={[{ required: true, message: "Please select a mode" }]}
         >
           <Select optionLabelProp="label" mode="multiple">
-            {guardrailSettings?.supported_modes?.map((mode) => (
+            {availableModes.map((mode) => (
               <Option key={mode} value={mode} label={mode}>
                 <div>
                   <div>
@@ -546,42 +560,7 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
                   </div>
                 </div>
               </Option>
-            )) || (
-              <>
-                <Option value="pre_call" label="pre_call">
-                  <div>
-                    <div>
-                      <strong>pre_call</strong> <Tag color="green">Recommended</Tag>
-                    </div>
-                    <div style={{ fontSize: "12px", color: "#888" }}>{modeDescriptions.pre_call}</div>
-                  </div>
-                </Option>
-                <Option value="during_call" label="during_call">
-                  <div>
-                    <div>
-                      <strong>during_call</strong>
-                    </div>
-                    <div style={{ fontSize: "12px", color: "#888" }}>{modeDescriptions.during_call}</div>
-                  </div>
-                </Option>
-                <Option value="post_call" label="post_call">
-                  <div>
-                    <div>
-                      <strong>post_call</strong>
-                    </div>
-                    <div style={{ fontSize: "12px", color: "#888" }}>{modeDescriptions.post_call}</div>
-                  </div>
-                </Option>
-                <Option value="logging_only" label="logging_only">
-                  <div>
-                    <div>
-                      <strong>logging_only</strong>
-                    </div>
-                    <div style={{ fontSize: "12px", color: "#888" }}>{modeDescriptions.logging_only}</div>
-                  </div>
-                </Option>
-              </>
-            )}
+            ))}
           </Select>
         </Form.Item>
 
diff --git a/ui/litellm-dashboard/src/components/guardrails/edit_guardrail_form.tsx b/ui/litellm-dashboard/src/components/guardrails/edit_guardrail_form.tsx
index a2cc3ad41dd..2ef52823dd8 100644
--- a/ui/litellm-dashboard/src/components/guardrails/edit_guardrail_form.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/edit_guardrail_form.tsx
@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { Form, Typography, Select, Input, Switch, Modal } from "antd";
 import { Button, TextInput } from "@tremor/react";
-import { guardrail_provider_map, guardrailLogoMap, getGuardrailProviders } from "./guardrail_info_helpers";
+import {
+  guardrail_provider_map,
+  guardrailLogoMap,
+  getGuardrailProviders,
+  getAvailableModesForProvider,
+} from "./guardrail_info_helpers";
 import { getGuardrailUISettings, getGlobalLitellmHeaderName } from "../networking";
 import PiiConfiguration from "./pii_configuration";
 import NotificationsManager from "../molecules/notifications_manager";
@@ -381,16 +386,11 @@ const EditGuardrailForm: React.FC<EditGuardrailFormProps> = ({
           rules={[{ required: true, message: "Please select a mode" }]}
         >
           <Select>
-            {guardrailSettings?.supported_modes?.map((mode) => (
+            {getAvailableModesForProvider(selectedProvider, guardrailSettings?.supported_modes).map((mode) => (
               <Option key={mode} value={mode}>
                 {mode}
               </Option>
-            )) || (
-              <>
-                <Option value="pre_call">pre_call</Option>
-                <Option value="post_call">post_call</Option>
-              </>
-            )}
+            ))}
           </Select>
         </Form.Item>
 
diff --git a/ui/litellm-dashboard/src/components/guardrails/guardrail_info_helpers.tsx b/ui/litellm-dashboard/src/components/guardrails/guardrail_info_helpers.tsx
index c6314c95bef..77d32df704e 100644
--- a/ui/litellm-dashboard/src/components/guardrails/guardrail_info_helpers.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_info_helpers.tsx
@@ -101,6 +101,23 @@ export const shouldRenderContentFilterConfigSettings = (provider: string | null)
   return providerEnum === "LiteLLM Content Filter";
 };
 
+const DEFAULT_SUPPORTED_MODES = ["pre_call", "during_call", "post_call", "logging_only"];
+
+/**
+ * Returns the list of mode options to show in the UI for a given provider.
+ * Content Filter cannot use during_call (MASK must run first); that option is excluded for that provider.
+ */
+export const getAvailableModesForProvider = (
+  provider: string | null,
+  supportedModes: string[] | undefined,
+): string[] => {
+  const base = supportedModes ?? DEFAULT_SUPPORTED_MODES;
+  if (shouldRenderContentFilterConfigSettings(provider)) {
+    return base.filter((m) => m !== "during_call");
+  }
+  return base;
+};
+
 const asset_logos_folder = "../ui/assets/logos/";
 
 export const guardrailLogoMap: Record<string, string> = {