diff --git a/ui/litellm-dashboard/src/components/chat_ui.tsx b/ui/litellm-dashboard/src/components/chat_ui.tsx index d10b15dcdc8..24c76356b71 100644 --- a/ui/litellm-dashboard/src/components/chat_ui.tsx +++ b/ui/litellm-dashboard/src/components/chat_ui.tsx @@ -38,7 +38,7 @@ interface ChatUIProps { async function generateModelResponse( chatHistory: { role: string; content: string }[], - updateUI: (chunk: string) => void, + updateUI: (chunk: string, model: string) => void, selectedModel: string, accessToken: string ) { @@ -67,7 +67,7 @@ async function generateModelResponse( for await (const chunk of response) { console.log(chunk); if (chunk.choices[0].delta.content) { - updateUI(chunk.choices[0].delta.content); + updateUI(chunk.choices[0].delta.content, chunk.model); } } } catch (error) { @@ -84,7 +84,7 @@ const ChatUI: React.FC = ({ const [apiKeySource, setApiKeySource] = useState<'session' | 'custom'>('session'); const [apiKey, setApiKey] = useState(""); const [inputMessage, setInputMessage] = useState(""); - const [chatHistory, setChatHistory] = useState<{ role: string; content: string }[]>([]); + const [chatHistory, setChatHistory] = useState<{ role: string; content: string; model?: string }[]>([]); const [selectedModel, setSelectedModel] = useState( undefined ); @@ -144,17 +144,17 @@ const ChatUI: React.FC = ({ } }, [chatHistory]); - const updateUI = (role: string, chunk: string) => { + const updateUI = (role: string, chunk: string, model?: string) => { setChatHistory((prevHistory) => { const lastMessage = prevHistory[prevHistory.length - 1]; if (lastMessage && lastMessage.role === role) { return [ ...prevHistory.slice(0, prevHistory.length - 1), - { role, content: lastMessage.content + chunk }, + { role, content: lastMessage.content + chunk, model }, ]; } else { - return [...prevHistory, { role, content: chunk }]; + return [...prevHistory, { role, content: chunk, model }]; } }); }; @@ -190,7 +190,7 @@ const ChatUI: React.FC = ({ if (selectedModel) { await generateModelResponse( updatedChatHistory, - (chunk) => updateUI("assistant", chunk), + (chunk, model) => updateUI("assistant", chunk, model), selectedModel, effectiveApiKey ); @@ -296,12 +296,32 @@ const ChatUI: React.FC = ({ {chatHistory.map((message, index) => ( +
+ {message.role} + {message.role === "assistant" && message.model && ( + + {message.model} + + )} +
- {message.role}: {message.content} + {message.content}