(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,88 +37,117 @@ 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) => {
+      setChatHistory((prevHistory) => {
-          const lastMessage = prevHistory[prevHistory.length - 1];
+        const lastMessage = prevHistory[prevHistory.length - 1];
-    
+  
-          // Check if the last message is from the same role
+        if (lastMessage && lastMessage.role === role) {
-          if (lastMessage && lastMessage.role === role) {
+          return [
-            // Concatenate the new chunk to the existing message
+            ...prevHistory.slice(0, prevHistory.length - 1),
-            return [
+            { role, content: lastMessage.content + chunk },
-              ...prevHistory.slice(0, prevHistory.length - 1),
+          ];
-              { role, content: lastMessage.content + chunk },
+        } else {
-            ];
+          return [...prevHistory, { role, content: chunk }];
-          } else {
-            // Append a new message if the last message is not from the same role
-            return [...prevHistory, { role, content: chunk }];
-          }
-        });
-      };
-    
-      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));
-        } catch (error) {
-          console.error("Error fetching model response", error);
-          updateUI("assistant", "Error fetching model response");
         }
-    
+      });
-        setInputMessage("");
+    };
-      };
-
   
-      return (
+    const handleSendMessage = async () => {
-        <div style={{ width: "100%", position: "relative" }}>
+      if (inputMessage.trim() === "") return;
-          <Grid className="gap-2 p-10 h-[75vh] w-full">
+  
-            <Card>
+      setChatHistory((prevHistory) => [
-              <Table className="mt-5" style={{ display: "block", maxHeight: "60vh", overflowY: "auto" }}>
+        ...prevHistory,
-                <TableHead>
+        { role: "user", content: inputMessage },
-                  <TableRow>
+      ]);
-                    <TableCell>
+  
-                      <Title>Chat</Title>
+      try {
-                    </TableCell>
+        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");
+      }
+  
+      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>
+                  <TableCell>
+                    <Title>Chat</Title>
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {chatHistory.map((message, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{`${message.role}: ${message.content}`}</TableCell>
                   </TableRow>
-                </TableHead>
+                ))}
-                <TableBody>
+              </TableBody>
-                  {chatHistory.map((message, index) => (
+            </Table>
-                    <TableRow key={index}>
+            <div className="mt-3" style={{ position: "absolute", bottom: 5, width: "95%" }}>
-                      <TableCell>{`${message.role}: ${message.content}`}</TableCell>
+              <div className="flex">
-                    </TableRow>
+                <input
-                  ))}
+                  type="text"
-                </TableBody>
+                  value={inputMessage}
-              </Table>
+                  onChange={(e) => setInputMessage(e.target.value)}
-              <div className="mt-3" style={{ position: "absolute", bottom: 5, width: "95%" }}>
+                  className="flex-1 p-2 border rounded-md mr-2"
-                <div className="flex">
+                  placeholder="Type your message..."
-                  <input
+                />
-                    type="text"
+                <button onClick={handleSendMessage} className="p-2 bg-blue-500 text-white rounded-md">
-                    value={inputMessage}
+                  Send
-                    onChange={(e) => setInputMessage(e.target.value)}
+                </button>
-                    className="flex-1 p-2 border rounded-md mr-2"
-                    placeholder="Type your message..."
-                  />
-                  <button onClick={handleSendMessage} className="p-2 bg-blue-500 text-white rounded-md">
-                    Send
-                  </button>
-                </div>
               </div>
-            </Card>
+            </div>
-          </Grid>
+          </Card>
-        </div>
+        </Grid>
-      );
+      </div>
+    );
   };
-  
 
 
-export default ChatUI;
+
+  export default ChatUI;