phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-25 18:54:30 +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 (
<div style={{ width: "100%", position: "relative" }}>
<Grid className="gap-2 p-8 h-[80vh] w-full mt-2">
<Card>
<TabGroup>
<TabList>
<Tab>Chat</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div className="sm:max-w-2xl">
<Grid numItems={2}>
<Col>
<Text>API Key Source</Text>
<div className="flex h-[80vh] w-full mt-2">
{/* Left Sidebar with Controls */}
<div className="w-1/4 p-4 border-r">
<div className="mb-6">
<Text className="font-medium block mb-2">API Key Source</Text>
<Select
disabled={disabledPersonalKeyCreation}
defaultValue="session"
@ -258,9 +250,10 @@ const ChatUI: React.FC<ChatUIProps> = ({
value={apiKey}
/>
)}
</Col>
<Col className="mx-2">
<Text>Select Model:</Text>
</div>
<div className="mb-6">
<Text className="font-medium block mb-2">Select Model:</Text>
<Select
placeholder="Select a Model"
onChange={onModelChange}
@ -271,7 +264,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
})),
{ value: 'custom', label: 'Enter custom model' }
]}
style={{ width: "350px" }}
style={{ width: "100%" }}
showSearch={true}
/>
{showCustomModelInput && (
@ -290,42 +283,39 @@ const ChatUI: React.FC<ChatUIProps> = ({
}}
/>
)}
</div>
<div className="mb-6">
<EndpointSelector
endpointType={endpointType}
onEndpointChange={handleEndpointChange}
className="mt-2"
/>
</Col>
</div>
</Grid>
{/* Clear Chat Button */}
<Button
onClick={clearChatHistory}
className="mt-4"
className="w-full"
>
Clear Chat
</Button>
</div>
<Table
className="mt-5"
style={{
display: "block",
maxHeight: "60vh",
overflowY: "auto",
}}
>
<TableHead>
<TableRow>
<TableCell>
{/* <Title>Chat</Title> */}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* Main Chat Area */}
<div className="w-3/4 flex flex-col">
<div className="flex-1 overflow-auto p-4">
{chatHistory.map((message, index) => (
<TableRow key={index}>
<TableCell>
<div
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={{
display: 'flex',
alignItems: 'center',
@ -386,21 +376,14 @@ const ChatUI: React.FC<ChatUIProps> = ({
</ReactMarkdown>
)}
</div>
</TableCell>
</TableRow>
</div>
</div>
))}
<TableRow>
<TableCell>
<div ref={chatEndRef} style={{ height: "1px" }} />
</TableCell>
</TableRow>
</TableBody>
</Table>
<div
className="mt-3"
style={{ position: "absolute", bottom: 5, width: "95%" }}
>
<div className="flex" style={{ marginTop: "16px" }}>
</div>
<div className="p-4 border-t">
<div className="flex">
<TextInput
type="text"
value={inputMessage}
@ -420,12 +403,8 @@ const ChatUI: React.FC<ChatUIProps> = ({
</Button>
</div>
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</Card>
</Grid>
</div>
</div>
</div>
);
};