phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 11:14:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor chat playground

Browse source
This commit is contained in:
Ishaan Jaff 2025-04-03 21:57:05 -07:00
parent 353c882574
commit e91dc1e00f
1 changed files with 174 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

99
ui/litellm-dashboard/src/components/chat_ui.tsx
View file

@ -226,19 +226,11 @@ const ChatUI: React.FC<ChatUIProps> = ({
return ( return (
<div style={{ width: "100%", position: "relative" }}> <div style={{ width: "100%", position: "relative" }}>
<Grid className="gap-2 p-8 h-[80vh] w-full mt-2"> <div className="flex h-[80vh] w-full mt-2">
<Card> {/* Left Sidebar with Controls */}
<div className="w-1/4 p-4 border-r">
<TabGroup> <div className="mb-6">
<TabList> <Text className="font-medium block mb-2">API Key Source</Text>
<Tab>Chat</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div className="sm:max-w-2xl">
<Grid numItems={2}>
<Col>
<Text>API Key Source</Text>
<Select <Select
disabled={disabledPersonalKeyCreation} disabled={disabledPersonalKeyCreation}
defaultValue="session" defaultValue="session"
@ -258,9 +250,10 @@ const ChatUI: React.FC<ChatUIProps> = ({
value={apiKey} value={apiKey}
/> />
)} )}
</Col> </div>
<Col className="mx-2">
<Text>Select Model:</Text> <div className="mb-6">
<Text className="font-medium block mb-2">Select Model:</Text>
<Select <Select
placeholder="Select a Model" placeholder="Select a Model"
onChange={onModelChange} onChange={onModelChange}
@ -271,7 +264,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
})), })),
{ value: 'custom', label: 'Enter custom model' } { value: 'custom', label: 'Enter custom model' }
]} ]}
style={{ width: "350px" }} style={{ width: "100%" }}
showSearch={true} showSearch={true}
/> />
{showCustomModelInput && ( {showCustomModelInput && (
@ -290,42 +283,39 @@ const ChatUI: React.FC<ChatUIProps> = ({
}} }}
/> />
)} )}
</div>
<div className="mb-6">
<EndpointSelector <EndpointSelector
endpointType={endpointType} endpointType={endpointType}
onEndpointChange={handleEndpointChange} onEndpointChange={handleEndpointChange}
className="mt-2"
/> />
</Col> </div>
</Grid>
{/* Clear Chat Button */}
<Button <Button
onClick={clearChatHistory} onClick={clearChatHistory}
className="mt-4" className="w-full"
> >
Clear Chat Clear Chat
</Button> </Button>
</div> </div>
<Table
className="mt-5" {/* Main Chat Area */}
style={{ <div className="w-3/4 flex flex-col">
display: "block", <div className="flex-1 overflow-auto p-4">
maxHeight: "60vh",
overflowY: "auto",
}}
>
<TableHead>
<TableRow>
<TableCell>
{/* <Title>Chat</Title> */}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{chatHistory.map((message, index) => ( {chatHistory.map((message, index) => (
<TableRow key={index}> <div
<TableCell> key={index}
className={`mb-4 ${message.role === "user" ? "text-right" : "text-left"}`}
>
<div style={{
display: 'inline-block',
maxWidth: '80%',
borderRadius: '8px',
padding: '10px 14px',
backgroundColor: message.role === "user" ? '#f0f0f0' : '#f9f9f9',
textAlign: 'left'
}}>
<div style={{ <div style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -386,21 +376,14 @@ const ChatUI: React.FC<ChatUIProps> = ({
</ReactMarkdown> </ReactMarkdown>
)} )}
</div> </div>
</TableCell> </div>
</TableRow> </div>
))} ))}
<TableRow>
<TableCell>
<div ref={chatEndRef} style={{ height: "1px" }} /> <div ref={chatEndRef} style={{ height: "1px" }} />
</TableCell> </div>
</TableRow>
</TableBody> <div className="p-4 border-t">
</Table> <div className="flex">
<div
className="mt-3"
style={{ position: "absolute", bottom: 5, width: "95%" }}
>
<div className="flex" style={{ marginTop: "16px" }}>
<TextInput <TextInput
type="text" type="text"
value={inputMessage} value={inputMessage}
@ -420,12 +403,8 @@ const ChatUI: React.FC<ChatUIProps> = ({
</Button> </Button>
</div> </div>
</div> </div>
</TabPanel> </div>
</div>
</TabPanels>
</TabGroup>
</Card>
</Grid>
</div> </div>
); );
}; };