(Admin UI) - maintain history on chat UI (#7351)

* ui fix - allow searching model list + fix bug on filtering

* qa fix - use correct provider name for azure_text

* ui wrap content onto next line

* ui fix - allow selecting current UI session when logging in

* ui session budgets

* ui show provider models on wildcard models

* test provider name appears in model list

* ui fix auto scroll on chat ui tab

* ui - maintain chat history

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

@@ -25,6 +25,7 @@ import {
 import { message, Select } from "antd";
 import { modelAvailableCall } from "./networking";
 import openai from "openai";
+import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { Typography } from "antd";
 
@@ -36,14 +37,14 @@ interface ChatUIProps {
 }
 
 async function generateModelResponse(
-  inputMessage: string,
+  chatHistory: { role: string; content: string }[],
   updateUI: (chunk: string) => void,
   selectedModel: string,
   accessToken: string
 ) {
   // base url should be the current base_url
   const isLocal = process.env.NODE_ENV === "development";
-  if (isLocal != true) {
+  if (isLocal !== true) {
     console.log = function () {};
   }
   console.log("isLocal:", isLocal);
@@ -60,12 +61,7 @@ async function generateModelResponse(
     const response = await client.chat.completions.create({
       model: selectedModel,
       stream: true,
-      messages: [
+      messages: chatHistory as ChatCompletionMessageParam[],
-        {
-          role: "user",
-          content: inputMessage,
-        },
-      ],
     });
 
     for await (const chunk of response) {
@@ -88,7 +84,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
   const [apiKeySource, setApiKeySource] = useState<'session' | 'custom'>('session');
   const [apiKey, setApiKey] = useState("");
   const [inputMessage, setInputMessage] = useState("");
-  const [chatHistory, setChatHistory] = useState<any[]>([]);
+  const [chatHistory, setChatHistory] = useState<{ role: string; content: string }[]>([]);
   const [selectedModel, setSelectedModel] = useState<string | undefined>(
     undefined
   );
@@ -183,15 +179,17 @@ const ChatUI: React.FC<ChatUIProps> = ({
       return;
     }
 
-    setChatHistory((prevHistory) => [
+
-      ...prevHistory,
+    const newUserMessage = { role: "user", content: inputMessage };
-      { role: "user", content: inputMessage },
+
-    ]);
+    const updatedChatHistory = [...chatHistory, newUserMessage];
+
+    setChatHistory(updatedChatHistory);
 
     try {
       if (selectedModel) {
         await generateModelResponse(
-          inputMessage,
+          updatedChatHistory,
           (chunk) => updateUI("assistant", chunk),
           selectedModel,
           effectiveApiKey
@@ -205,6 +203,11 @@ const ChatUI: React.FC<ChatUIProps> = ({
     setInputMessage("");
   };
 
+  const clearChatHistory = () => {
+    setChatHistory([]);
+    message.success("Chat history cleared.");
+  };
+
   if (userRole && userRole === "Admin Viewer") {
     const { Title, Paragraph } = Typography;
     return (
@@ -229,7 +232,6 @@ const ChatUI: React.FC<ChatUIProps> = ({
             <TabList>
               <Tab>Chat</Tab>
             </TabList>
-
             <TabPanels>
               <TabPanel>
                 <div className="sm:max-w-2xl">
@@ -257,7 +259,6 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     </Col>
                     <Col className="mx-2">
                       <Text>Select Model:</Text>
-
                       <Select
                         placeholder="Select a Model"
                         onChange={onChange}
@@ -268,7 +269,13 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     </Col>
                   </Grid>
 
-          
+                  {/* Clear Chat Button */}
+                  <Button
+                    onClick={clearChatHistory}
+                    className="mt-4"
+                  >
+                    Clear Chat
+                  </Button>
                 </div>
                 <Table
                   className="mt-5"
@@ -315,7 +322,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                       type="text"
                       value={inputMessage}
                       onChange={(e) => setInputMessage(e.target.value)}
-                      onKeyDown={handleKeyDown} // Add this line
+                      onKeyDown={handleKeyDown}
                       placeholder="Type your message..."
                     />
                     <Button