phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

(ui) show two tabs on chat ui

Browse source
This commit is contained in:
ishaan-jaff 2024-02-13 18:55:16 -08:00
parent 3de9f5e860
commit bf382dcaa3
1 changed files with 66 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,10 @@
import React, { useState, useEffect } from "react";
import { Card, Title, Table, TableHead, TableRow, TableCell, TableBody, Grid } from "@tremor/react";
import { Card, Title, Table, TableHead, TableRow, TableCell, TableBody, Grid, Tab,
TabGroup,
TabList,
TabPanel,
Metric,
TabPanels, } from "@tremor/react";
import { modelInfoCall } from "./networking";
import openai from "openai";
@ -98,50 +103,66 @@ const ChatUI: React.FC<ChatUIProps> = ({ accessToken, token, userRole, userID })
<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>
))}
</TableBody>
</Table>
<div className="mt-3" style={{ position: "absolute", bottom: 5, width: "95%" }}>
<div className="flex">
<input
type="text"
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
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>
<TabGroup>
<TabList className="mt-4">
<Tab>Chat</Tab>
<Tab>Proxy Usage</Tab>
</TabList>
<TabPanels>
<TabPanel>
<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>
))}
</TableBody>
</Table>
<div className="mt-3" style={{ position: "absolute", bottom: 5, width: "95%" }}>
<div className="flex">
<input
type="text"
value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)}
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>
</TabPanel>
<TabPanel>
<Metric>
Usage
</Metric>
</TabPanel>
</TabPanels>
</TabGroup>
</Card>
</Grid>
</div>