From ba23d635a99e9b7ae8bbc74fdc077f57efe69925 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 19 Feb 2024 16:04:27 -0800
Subject: [PATCH] (feat) ui - request access to new models

---
 .../src/components/model_dashboard.tsx        |  6 +-
 .../src/components/request_model_access.tsx   | 83 +++++++++++++++++++
 2 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 ui/litellm-dashboard/src/components/request_model_access.tsx

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index 44b3ac684e..f57afcdf89 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Card, Title, Subtitle, Table, TableHead, TableRow, TableCell, TableBody, Metric, Grid } from "@tremor/react";
 import { modelInfoCall } from "./networking";
 import { Badge, BadgeDelta, Button } from '@tremor/react';
+import RequestAccess from "./request_model_access";
 
 interface ModelDashboardProps {
   accessToken: string | null;
@@ -41,6 +42,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   if (!modelData) {
     return <div>Loading...</div>;
   }
+  let all_models_on_proxy: any[] = [];
 
   // loop through model data and edit each row 
   for (let i = 0; i < modelData.data.length; i++) {
@@ -82,6 +84,8 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     modelData.data[i].output_cost = output_cost
     modelData.data[i].max_tokens = max_tokens
 
+    all_models_on_proxy.push(curr_model.model_name);
+
     console.log(modelData.data[i]);
 
   }
@@ -110,7 +114,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                 <TableCell>{model.provider}</TableCell>
 
                 <TableCell>
-                  {model.user_access ? <Badge color={"green"}>Yes</Badge> : <Button color={"red"} size="xs">Request Access</Button>}
+                  {model.user_access ? <Badge color={"green"}>Yes</Badge> : <RequestAccess userModels={all_models_on_proxy}></RequestAccess>}
                 </TableCell>
 
                 <TableCell>{model.input_cost}</TableCell>
diff --git a/ui/litellm-dashboard/src/components/request_model_access.tsx b/ui/litellm-dashboard/src/components/request_model_access.tsx
new file mode 100644
index 0000000000..fa1d33a077
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/request_model_access.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Modal, Form, Input, Select, InputNumber, message } from "antd";
+import { Button } from "@tremor/react";
+import { keyCreateCall } from "./networking";
+
+const { Option } = Select;
+
+interface RequestAccessProps {
+  userModels: string[];
+}
+
+function onRequestAccess(formData: Record<string, any>): void {
+    // This function does nothing for now
+  }
+
+const RequestAccess: React.FC<RequestAccessProps> = ({ userModels }) => {
+  const [form] = Form.useForm();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+  };
+
+  const handleRequestAccess = async (formValues: Record<string, any>) => {
+    try {
+      message.info("Requesting access");
+      onRequestAccess(formValues);
+      setIsModalVisible(true);
+    } catch (error) {
+      console.error("Error requesting access:", error);
+    }
+  };
+
+  return (
+    <div>
+      <Button color={"red"} size="xs" onClick={() => setIsModalVisible(true)}>
+        Request Access
+      </Button>
+      <Modal
+        title="Request Access"
+        visible={isModalVisible}
+        width={800}
+        footer={null}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Form
+          form={form}
+          onFinish={handleRequestAccess}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          labelAlign="left"
+        >
+          <Form.Item label="Select Model" name="selectedModel">
+            <Select placeholder="Select model" style={{ width: '100%' }}>
+              {userModels.map((model) => (
+                <Option key={model} value={model}>
+                  {model}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item label="Reason for Access" name="accessReason">
+            <Input.TextArea rows={4} placeholder="Enter reason for access" />
+          </Form.Item>
+          <div style={{ textAlign: 'right', marginTop: '10px' }}>
+            <Button>Request Access</Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default RequestAccess;