upload files to test key pane

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

@@ -22,7 +22,9 @@ import {
   Button,
 } from "@tremor/react";
 
-import { message, Select } from "antd";
+import { message, Select, Upload } from "antd";
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadFile } from 'antd/es/upload/interface';
 import { modelAvailableCall } from "./networking";
 import openai from "openai";
 import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
@@ -94,6 +96,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
     undefined
   );
   const [modelInfo, setModelInfo] = useState<any[]>([]);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   const chatEndRef = useRef<HTMLDivElement>(null);
 
@@ -139,7 +142,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
     };
 
     fetchModelInfo();
-  }, [accessToken, userID, userRole]);
+  }, [accessToken, token, userID, userRole]);
 
 
   useEffect(() => {
@@ -171,7 +174,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
   };
 
   const handleSendMessage = async () => {
-    if (inputMessage.trim() === "") return;
+    if (inputMessage.trim() === "" && fileList.length === 0) return;
 
     if (!token || !userRole || !userID) {
       return;
@@ -184,12 +187,25 @@ const ChatUI: React.FC<ChatUIProps> = ({
       return;
     }
 
+    // Create message content with files
+    let messageContent = inputMessage;
+    if (fileList.length > 0) {
+      const fileContents = await Promise.all(
+        fileList.map(async (file) => {
+          return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target?.result);
+            reader.readAsText(file as any);
+          });
+        })
+      );
+      messageContent += "\n\nAttached files:\n" + fileContents.join('\n');
+    }
 
-    const newUserMessage = { role: "user", content: inputMessage };
-
+    const newUserMessage = { role: "user", content: messageContent };
     const updatedChatHistory = [...chatHistory, newUserMessage];
-
     setChatHistory(updatedChatHistory);
+    setFileList([]); // Clear files after sending
 
     try {
       if (selectedModel) {
@@ -213,6 +229,19 @@ const ChatUI: React.FC<ChatUIProps> = ({
     message.success("Chat history cleared.");
   };
 
+  const handleFileUpload = {
+    beforeUpload: (file: UploadFile) => {
+      setFileList([...fileList, file]);
+      return false; // Prevent auto upload
+    },
+    onRemove: (file: UploadFile) => {
+      const index = fileList.indexOf(file);
+      const newFileList = fileList.slice();
+      newFileList.splice(index, 1);
+      setFileList(newFileList);
+    },
+  };
+
   if (userRole && userRole === "Admin Viewer") {
     const { Title, Paragraph } = Typography;
     return (
@@ -369,6 +398,13 @@ const ChatUI: React.FC<ChatUIProps> = ({
                   style={{ position: "absolute", bottom: 5, width: "95%" }}
                 >
                   <div className="flex" style={{ marginTop: "16px" }}>
+                    <Upload
+                      fileList={fileList}
+                      {...handleFileUpload}
+                      accept=".txt,.pdf"
+                    >
+                      <Button icon={UploadOutlined}>Attach</Button>
+                    </Upload>
                     <TextInput
                       type="text"
                       value={inputMessage}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Upload, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+
+interface FileUploadProps {
+  onFileUploaded?: (content: string) => void;
+  accept?: string; // Allowed file types
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ onFileUploaded, accept = '.pdf,.txt' }) => {
+  const props: UploadProps = {
+    name: 'file',
+    accept: accept,
+    beforeUpload: (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result && onFileUploaded) {
+          onFileUploaded(e.target.result as string);
+        }
+      };
+      reader.readAsText(file);
+      // Prevent default upload behavior
+      return false;
+    },
+    onChange(info) {
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name} file uploaded successfully`);
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+  };
+
+  return (
+    <Upload {...props}>
+      <button>
+        <UploadOutlined /> Click to Upload File
+      </button>
+    </Upload>
+  );
+};
+
+export default FileUpload;