(ui) select a model to chat with

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

@@ -3,6 +3,8 @@ import { Card, Title, Table, TableHead, TableRow, TableCell, TableBody, Grid } f
 import { modelInfoCall } from "./networking";
 import openai from "openai";
 
+
+
 interface ChatUIProps {
   accessToken: string | null;
   token: string | null;
@@ -10,15 +12,15 @@ interface ChatUIProps {
   userID: string | null;
 }
 
-async function generateModelResponse(inputMessage: string, updateUI: (chunk: string) => void) {
+async function generateModelResponse(inputMessage: string, updateUI: (chunk: string) => void, selectedModel: string, accessToken: string) {
   const client = new openai.OpenAI({
-    apiKey: 'sk-1234', // Replace with your OpenAI API key
+    apiKey: accessToken, // Replace with your OpenAI API key
     baseURL: 'http://0.0.0.0:4000', // Replace with your OpenAI API base URL
     dangerouslyAllowBrowser: true, // using a temporary litellm proxy key
   });
 
   const response = await client.chat.completions.create({
-    model: 'azure-gpt-3.5',
+    model: selectedModel,
     stream: true,
     messages: [
       {
@@ -35,23 +37,38 @@ async function generateModelResponse(inputMessage: string, updateUI: (chunk: str
     }
   }
 }
+
 const ChatUI: React.FC<ChatUIProps> = ({ accessToken, token, userRole, userID }) => {
     const [inputMessage, setInputMessage] = useState("");
     const [chatHistory, setChatHistory] = useState<any[]>([]);
+    const [selectedModel, setSelectedModel] = useState<string | undefined>(undefined);
+    const [modelInfo, setModelInfo] = useState<any | null>(null); // Declare modelInfo at the component level
+  
+    useEffect(() => {
+      // Fetch model info and set the default selected model
+      const fetchModelInfo = async () => {
+        const fetchedModelInfo = await modelInfoCall(accessToken, userID, userRole);
+        console.log("model_info:", fetchedModelInfo);
+  
+        if (fetchedModelInfo?.data.length > 0) {
+          setModelInfo(fetchedModelInfo);
+          setSelectedModel(fetchedModelInfo.data[0].model_name);
+        }
+      };
+  
+      fetchModelInfo();
+    }, [accessToken, userID, userRole]);
   
     const updateUI = (role: string, chunk: string) => {
       setChatHistory((prevHistory) => {
         const lastMessage = prevHistory[prevHistory.length - 1];
   
-          // Check if the last message is from the same role
         if (lastMessage && lastMessage.role === role) {
-            // Concatenate the new chunk to the existing message
           return [
             ...prevHistory.slice(0, prevHistory.length - 1),
             { role, content: lastMessage.content + chunk },
           ];
         } else {
-            // Append a new message if the last message is not from the same role
           return [...prevHistory, { role, content: chunk }];
         }
       });
@@ -60,14 +77,15 @@ const ChatUI: React.FC<ChatUIProps> = ({ accessToken, token, userRole, userID })
     const handleSendMessage = async () => {
       if (inputMessage.trim() === "") return;
   
-        // Add the user's message to the chat history
       setChatHistory((prevHistory) => [
         ...prevHistory,
         { role: "user", content: inputMessage },
       ]);
   
       try {
-          await generateModelResponse(inputMessage, (chunk) => updateUI("assistant", chunk));
+        if (selectedModel) {
+          await generateModelResponse(inputMessage, (chunk) => updateUI("assistant", chunk), selectedModel, accessToken);
+        }
       } catch (error) {
         console.error("Error fetching model response", error);
         updateUI("assistant", "Error fetching model response");
@@ -76,11 +94,24 @@ const ChatUI: React.FC<ChatUIProps> = ({ accessToken, token, userRole, userID })
       setInputMessage("");
     };
   
-  
     return (
       <div style={{ width: "100%", position: "relative" }}>
         <Grid className="gap-2 p-10 h-[75vh] w-full">
           <Card>
+          <div>
+              <label>Select Model:</label>
+              <select
+                value={selectedModel || ""}
+                onChange={(e) => setSelectedModel(e.target.value)}
+              >
+                {/* Populate dropdown options from available models */}
+                {modelInfo?.data.map((element: { model_name: string }) => (
+                  <option key={element.model_name} value={element.model_name}>
+                    {element.model_name}
+                  </option>
+                ))}
+              </select>
+            </div>
             <Table className="mt-5" style={{ display: "block", maxHeight: "60vh", overflowY: "auto" }}>
               <TableHead>
                 <TableRow>