From fd5e3d191a90eeef0f3a9b971feab2f90569e29b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 14:40:31 +0000
Subject: [PATCH] feat(ui): S3VectorsConfig to shadcn Tooltip + custom info
 alert

- antd Alert \u2192 plain blue-tinted div with lucide Info icon.
- antd Tooltip + @ant-design InfoCircleOutlined \u2192 shadcn Tooltip +
  lucide Info (four field tooltips).
- antd Form.Item / Input / Select preserved \u2014 parent wraps the file in
  an antd Form.
- File added to .eslintrc.json overrides for the blue info callout.

Gates: TS \u2713 | Build \u2713 | Vitest 11/11 green for S3VectorsConfig tests.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 ui/litellm-dashboard/.eslintrc.json           |   1 +
 .../S3VectorsConfig.tsx                       | 135 ++++++++++++------
 2 files changed, 94 insertions(+), 42 deletions(-)

diff --git a/ui/litellm-dashboard/.eslintrc.json b/ui/litellm-dashboard/.eslintrc.json
index 34010baf1e0..0bdf5a6375b 100644
--- a/ui/litellm-dashboard/.eslintrc.json
+++ b/ui/litellm-dashboard/.eslintrc.json
@@ -66,6 +66,7 @@
         "src/components/guardrails/GuardrailTestPanel.tsx",
         "src/components/guardrails/GuardrailTestResults.tsx",
         "src/components/guardrails/GuardrailTestPlayground.tsx",
+        "src/components/vector_store_management/S3VectorsConfig.tsx",
         "src/components/prompts/prompt_editor_view/PromptEditorHeader.tsx",
         "src/components/prompts/prompt_editor_view/VersionHistorySidePanel.tsx",
         "src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx",
diff --git a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx
index bf714923120..f27ecd89a4b 100644
--- a/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx
+++ b/ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.tsx
@@ -1,11 +1,22 @@
 import React, { useState, useEffect } from "react";
-import { Alert, Form, Input, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { Form, Input, Select } from "antd";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info } from "lucide-react";
+import {
+  fetchAvailableModels,
+  ModelGroup,
+} from "../playground/llm_calls/fetch_models";
 
 interface S3VectorsConfigProps {
   accessToken: string | null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   providerParams: Record<string, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onParamsChange: (params: Record<string, any>) => void;
 }
 
@@ -46,42 +57,59 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({
 
   return (
     <>
-      {/* S3 Vectors Setup Instructions */}
-      <Alert
-        message="AWS S3 Vectors Setup"
-        description={
-          <div>
-            <p>AWS S3 Vectors allows you to store and query vector embeddings directly in S3:</p>
-            <ul style={{ marginLeft: "16px", marginTop: "8px" }}>
-              <li>Vector buckets and indexes will be automatically created if they don&apos;t exist</li>
-              <li>Vector dimensions are auto-detected from your selected embedding model</li>
-              <li>Ensure your AWS credentials have permissions for S3 Vectors operations</li>
-              <li>
-                Learn more:{" "}
-                <a
-                  href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-vector-buckets.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  AWS S3 Vectors Documentation
-                </a>
-              </li>
-            </ul>
-          </div>
-        }
-        type="info"
-        showIcon
-        style={{ marginBottom: "16px" }}
-      />
+      <div className="mb-4 flex gap-2 items-start p-3 rounded-md bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-900 text-blue-800 dark:text-blue-200">
+        <Info className="h-4 w-4 mt-0.5 shrink-0" />
+        <div className="flex-1">
+          <div className="font-semibold">AWS S3 Vectors Setup</div>
+          <p className="text-sm mt-1">
+            AWS S3 Vectors allows you to store and query vector embeddings
+            directly in S3:
+          </p>
+          <ul className="ml-4 mt-2 text-sm list-disc">
+            <li>
+              Vector buckets and indexes will be automatically created if they
+              don&apos;t exist
+            </li>
+            <li>
+              Vector dimensions are auto-detected from your selected embedding
+              model
+            </li>
+            <li>
+              Ensure your AWS credentials have permissions for S3 Vectors
+              operations
+            </li>
+            <li>
+              Learn more:{" "}
+              <a
+                href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/s3-vector-buckets.html"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline"
+              >
+                AWS S3 Vectors Documentation
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
 
       {/* Vector Bucket Name */}
       <Form.Item
         label={
           <span>
             Vector Bucket Name{" "}
-            <Tooltip title="S3 bucket name for vector storage (must be at least 3 characters, lowercase letters, numbers, hyphens, and periods only)">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="ml-1 h-3 w-3 inline text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs">
+                  S3 bucket name for vector storage (must be at least 3
+                  characters, lowercase letters, numbers, hyphens, and
+                  periods only)
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </span>
         }
         required
@@ -110,9 +138,18 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({
         label={
           <span>
             Index Name{" "}
-            <Tooltip title="Name for the vector index (optional, will be auto-generated if not provided). If provided, must be at least 3 characters.">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="ml-1 h-3 w-3 inline text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs">
+                  Name for the vector index (optional, will be auto-generated
+                  if not provided). If provided, must be at least 3
+                  characters.
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </span>
         }
         validateStatus={
@@ -140,9 +177,16 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({
         label={
           <span>
             AWS Region{" "}
-            <Tooltip title="AWS region where the S3 bucket is located (e.g., us-west-2)">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="ml-1 h-3 w-3 inline text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs">
+                  AWS region where the S3 bucket is located (e.g., us-west-2)
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </span>
         }
         required
@@ -161,9 +205,16 @@ const S3VectorsConfig: React.FC<S3VectorsConfigProps> = ({
         label={
           <span>
             Embedding Model{" "}
-            <Tooltip title="Select the embedding model to use for vector generation">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="ml-1 h-3 w-3 inline text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs">
+                  Select the embedding model to use for vector generation
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </span>
         }
         required