[Feat] - UI Allow using Key/Team Based Logging for Langfuse OTEL (#13791)

* add langfuse_otel

* ui allow setting langfuse OTEL

* fixes - using langfuse OTEL

* add description for logging integrations

* add description

ui/litellm-dashboard/src/components/callback_info_helpers.tsx

@@ -3,6 +3,7 @@ export enum Callbacks {
   CustomCallbackAPI = "Custom Callback API",
   Datadog = "Datadog",
   Langfuse = "Langfuse",
+  LangfuseOtel = "LangfuseOtel",
   LangSmith = "LangSmith",
   Lago = "Lago",
   OpenMeter = "OpenMeter",
@@ -16,6 +17,7 @@ export const callback_map: Record<string, string> = {
   CustomCallbackAPI: "custom_callback_api",
   Datadog: "datadog",
   Langfuse: "langfuse",
+  LangfuseOtel: "langfuse_otel",
   LangSmith: "langsmith",
   Lago: "lago",
   OpenMeter: "openmeter",
@@ -45,6 +47,7 @@ interface CallbackInfo {
   logo: string;
   supports_key_team_logging: boolean;
   dynamic_params: Record<string, "text" | "password" | "select" | "upload">;
+  description: string | null;
 }
 
 export const callbackInfo: Record<string, CallbackInfo> = {
@@ -55,7 +58,18 @@ export const callbackInfo: Record<string, CallbackInfo> = {
         "langfuse_public_key": "text",
         "langfuse_secret_key": "password",
         "langfuse_host": "text"
-    }
+    },
+    description: "Langfuse v2 Logging Integration"
+    },
+    [Callbacks.LangfuseOtel]: {
+      logo: `${asset_logos_folder}langfuse.png`,
+      supports_key_team_logging: true,
+      dynamic_params: {
+        "langfuse_public_key": "text",
+        "langfuse_secret_key": "password",
+        "langfuse_host": "text"
+      },
+      description: "Langfuse v3 OTEL Logging Integration"
     },
     [Callbacks.Arize]: {
       logo: `${asset_logos_folder}arize.png`,
@@ -63,7 +77,8 @@ export const callbackInfo: Record<string, CallbackInfo> = {
       dynamic_params: {
         "arize_api_key": "password",
         "arize_space_id": "text",
-      }
+      },
+      description: "Arize Logging Integration"
     },
     [Callbacks.LangSmith]: {
       logo: `${asset_logos_folder}langsmith.png`,
@@ -72,42 +87,50 @@ export const callbackInfo: Record<string, CallbackInfo> = {
         "langsmith_api_key": "password",
         "langsmith_project": "text",
         "langsmith_base_url": "text"
-      }
-  },
+      },
+      description: "Langsmith Logging Integration"
+    },
     [Callbacks.Braintrust]: {
         logo: `${asset_logos_folder}braintrust.png`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "Braintrust Logging Integration"
     },
     [Callbacks.CustomCallbackAPI]: {
         logo: `${asset_logos_folder}custom.svg`,
         supports_key_team_logging: true,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "Custom Callback API Logging Integration"
     },
     [Callbacks.Datadog]: {
         logo: `${asset_logos_folder}datadog.png`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "Datadog Logging Integration"
     },
     [Callbacks.Lago]: {
         logo: `${asset_logos_folder}lago.svg`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "Lago Billing Logging Integration"
     },
     [Callbacks.OpenMeter]: {
         logo: `${asset_logos_folder}openmeter.png`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "OpenMeter Logging Integration"
     },
     [Callbacks.OTel]: {
         logo: `${asset_logos_folder}otel.png`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "OpenTelemetry Logging Integration"
     },
     [Callbacks.S3]: {
         logo: `${asset_logos_folder}aws.svg`,
         supports_key_team_logging: false,
-        dynamic_params: {}
+        dynamic_params: {},
+        description: "S3 Bucket (AWS) Logging Integration"
     }
 };
   

ui/litellm-dashboard/src/components/settings.tsx

@@ -315,7 +315,7 @@ const Settings: React.FC<SettingsPageProps> = ({
     addForm.validateFields().then((values) => {
       // Call API to add the callback
       let payload;
-      if (values.callback === "langfuse") {
+      if (values.callback === "langfuse" || values.callback === "langfuse_otel") {
         payload = {
           environment_variables: {
             LANGFUSE_PUBLIC_KEY: values.langfusePublicKey,

ui/litellm-dashboard/src/components/team/LoggingSettings.tsx

@@ -164,18 +164,21 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
           >
             {allCallbacks.map((callbackName) => {
               const logo = callbackInfo[callbackName]?.logo;
+              const description = callbackInfo[callbackName]?.description;
               return (
                 <Option key={callbackName} value={callbackName} label={callbackName}>
-                  <div className="flex items-center space-x-2">
-                    {logo && (
-                      <img 
-                        src={logo} 
-                        alt={callbackName} 
-                        className="w-4 h-4 object-contain" 
-                      />
-                    )}
-                    <span>{callbackName}</span>
-                  </div>
+                  <Tooltip title={description} placement="right">
+                    <div className="flex items-center space-x-2">
+                      {logo && (
+                        <img 
+                          src={logo} 
+                          alt={callbackName} 
+                          className="w-4 h-4 object-contain" 
+                        />
+                      )}
+                      <span>{callbackName}</span>
+                    </div>
+                  </Tooltip>
                 </Option>
               );
             })}
@@ -257,18 +260,21 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
                     >
                       {supportedCallbacks.map((callbackName) => {
                         const logo = callbackInfo[callbackName]?.logo;
+                        const description = callbackInfo[callbackName]?.description;
                         return (
                           <Option key={callbackName} value={callbackName} label={callbackName}>
-                            <div className="flex items-center space-x-2">
-                              {logo && (
-                                <img 
-                                  src={logo} 
-                                  alt={callbackName} 
-                                  className="w-4 h-4 object-contain" 
-                                />
-                              )}
-                              <span>{callbackName}</span>
-                            </div>
+                            <Tooltip title={description} placement="right">
+                              <div className="flex items-center space-x-2">
+                                {logo && (
+                                  <img 
+                                    src={logo} 
+                                    alt={callbackName} 
+                                    className="w-4 h-4 object-contain" 
+                                  />
+                                )}
+                                <span>{callbackName}</span>
+                              </div>
+                            </Tooltip>
                           </Option>
                         );
                       })}