Merge pull request #2903 from BerriAI/litellm_set_new_callbacks_ui

ui - add langfuse modal

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

@@ -1159,3 +1159,46 @@ export const getCallbacksCall = async (
 };
 
 
+
+
+
+
+export const setCallbacksCall = async (
+  accessToken: String,
+  formValues: Record<string, any>
+) => {
+  /**
+   * Set callbacks on proxy
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/config/update` : `/config/update`;
+
+    //message.info("Requesting model data");
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        ...formValues, // Include formValues in the request body
+      }),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error(errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    //message.info("Received model data");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to set callbacks:", error);
+    throw error;
+  }
+};
+
+

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

@@ -1,68 +1,186 @@
 import React, { useState, useEffect } from "react";
-import { Card, Title, Subtitle, Table, TableHead, TableRow, Badge, TableHeaderCell, TableCell, TableBody, Metric, Text, Grid, Button, Col, } from "@tremor/react";
-import { getCallbacksCall } from "./networking";
+import {
+  Card,
+  Title,
+  Subtitle,
+  Table,
+  TableHead,
+  TableRow,
+  Badge,
+  TableHeaderCell,
+  TableCell,
+  TableBody,
+  Metric,
+  Text,
+  Grid,
+  Button,
+  Col,
+} from "@tremor/react";
+import { getCallbacksCall, setCallbacksCall } from "./networking";
+import { Modal, Form, Input, Select, Button as Button2 } from "antd";
+import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/components/static-generation-searchparams-bailout-provider";
 
 interface SettingsPageProps {
-    accessToken: string | null;
-    userRole: string | null;
-    userID: string | null;
+  accessToken: string | null;
+  userRole: string | null;
+  userID: string | null;
 }
 
 const Settings: React.FC<SettingsPageProps> = ({
-    accessToken,
-    userRole,
-    userID,
-  }) => {
- const [callbacks, setCallbacks] = useState(["None"]);
+  accessToken,
+  userRole,
+  userID,
+}) => {
+  const [callbacks, setCallbacks] = useState<string[]>([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [form] = Form.useForm();
 
- useEffect(() => {
+  useEffect(() => {
     if (!accessToken || !userRole || !userID) {
       return;
     }
-   getCallbacksCall(accessToken, userID, userRole).then((data) => {
-     console.log("callbacks",data);
-     let callbacks_data = data.data;
-     let callback_names = callbacks_data.success_callback // ["callback1", "callback2"]
+    getCallbacksCall(accessToken, userID, userRole).then((data) => {
+      console.log("callbacks", data);
+      let callbacks_data = data.data;
+      let callback_names = callbacks_data.success_callback; // ["callback1", "callback2"]
+      setCallbacks(callback_names);
+    });
+  }, [accessToken, userRole, userID]);
 
-     setCallbacks(callback_names);
-   });
- }, [accessToken, userRole, userID]);
+  const handleAddCallback = () => {
+    console.log("Add callback clicked");
+    setIsModalVisible(true);
+  };
 
- return (
-   <div className="w-full mx-4">
-     <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
-        
-       <Card className="h-[15vh]">
-       
-        <Grid numItems={2} className="mt-2">
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+  };
+
+  const handleOk = () => {
+    if (!accessToken) {
+      return;
+    }
+    // Handle form submission
+    form.validateFields().then((values) => {
+      // Call API to add the callback
+      let payload;
+      console.log("Callback values:", values);
+      if (values.callback === 'langfuse') {
+        payload = {
+          environment_variables: {
+            LANGFUSE_PUBLIC_KEY: values.langfusePublicKey,
+            LANGFUSE_SECRET_KEY: values.langfusePrivateKey,
+            LANGFUSE_HOST: values.langfuseCloudUrl ,
+          },
+          litellm_settings: {
+            success_callback: [values.callback]
+          }
+        };
+        setCallbacksCall(accessToken, payload);
+
+        // add langfuse to callbacks
+        setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]);
+
+
+      } else {
+        payload = {
+          error: 'Invalid callback value'
+        };
+      }
+      setIsModalVisible(false);
+      form.resetFields();
+    });
+  };
+
+  return (
+    <div className="w-full mx-4">
+      <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
+        <Card className="h-[15vh]">
+          <Grid numItems={2} className="mt-2">
             <Col>
-            <Title>Logging Callbacks</Title>
+              <Title>Logging Callbacks</Title>
             </Col>
             <Col>
             <div>
-            {callbacks.length === 0 ? (
+            {!callbacks ? (
+                <Badge color={"red"}>None</Badge>
+                ) : callbacks.length === 0 ? (
                 <Badge>None</Badge>
-            ) : (
+                ) : (
                 callbacks.map((callback, index) => (
-                <Badge key={index} color={"sky"}>
+                    <Badge key={index} color={"sky"}>
                     {callback}
-                </Badge>
+                    </Badge>
                 ))
-            )}
+                )}
             </div>
             </Col>
+          </Grid>
+          <Col>
+            <Button size="xs" className="mt-2" onClick={handleAddCallback}>
+              Add Callback
+            </Button>
+          </Col>
+        </Card>
+      </Grid>
 
-        
-        </Grid>  
-        <Col>
-       <Button size="xs" className="mt-2">Add Callback</Button>
-       </Col>       
-       </Card>
+      <Modal
+        title="Add Callback"
+        visible={isModalVisible}
+        onOk={handleOk}
+        width={800}
+        onCancel={handleCancel}
+        footer={null}
+      >
+        <Form form={form} layout="vertical" onFinish={handleOk}>
+          <Form.Item
+            label="Callback"
+            name="callback"
+            rules={[{ required: true, message: "Please select a callback" }]}
+          >
+            <Select>
+              <Select.Option value="langfuse">langfuse</Select.Option>
+              <Select.Option value="slack">slack</Select.Option>
+            </Select>
+          </Form.Item>
 
-       
-     </Grid>
-   </div>
- );
+          <Form.Item
+            label="LANGFUSE_PUBLIC_KEY"
+            name="langfusePublicKey"
+            rules={[
+              { required: true, message: "Please enter the public key" },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="LANGFUSE_PRIVATE_KEY"
+            name="langfusePrivateKey"
+            rules={[
+              { required: true, message: "Please enter the private key" },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            label="LANGFUSE_CLOUD_URL"
+            name="langfuseCloudUrl"
+            rules={[{ required: true, message: "Please enter the cloud URL" }]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+
+          <div style={{ textAlign: "right", marginTop: "10px" }}>
+            <Button2 htmlType="submit">Save</Button2>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
 };
 
 export default Settings;