Skip to content

Commit 50e9967

Browse files
author
Dylan Huang
committed
more updates
1 parent aee6e46 commit 50e9967

3 files changed

Lines changed: 61 additions & 29 deletions

File tree

‎vite-app/src/components/Dashboard.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,6 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
6969
).toFixed(3)
7070
: "N/A"}
7171
</div>
72-
<div>
73-
<span className="font-semibold text-gray-700">Connected:</span>{" "}
74-
{
75-
state.dataset.filter(
76-
(row) => row.evaluation_result?.is_score_valid
77-
).length
78-
}
79-
</div>
8072
<div>
8173
<span className="font-semibold text-gray-700">Total Messages:</span>{" "}
8274
{state.dataset.reduce((sum, row) => sum + row.messages.length, 0)}

‎vite-app/src/components/MessageBubble.tsx‎

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,27 @@ import type { Message } from "../types/eval-protocol";
33
export const MessageBubble = ({ message }: { message: Message }) => {
44
const isUser = message.role === "user";
55
const isSystem = message.role === "system";
6+
const isTool = message.role === "tool";
67
const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
78
const hasFunctionCall = message.function_call;
89

910
return (
1011
<div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2`}>
1112
<div
12-
className={`max-w-xs lg:max-w-md px-3 py-2 border text-sm ${
13+
className={`max-w-sm lg:max-w-md xl:max-w-lg px-3 py-2 border text-sm ${
1314
isUser
1415
? "bg-blue-50 border-blue-200 text-blue-900"
1516
: isSystem
1617
? "bg-gray-50 border-gray-200 text-gray-800"
17-
: hasToolCalls || hasFunctionCall
18-
? "bg-orange-50 border-orange-200 text-orange-900"
19-
: "bg-white border-gray-200 text-gray-900"
18+
: isTool
19+
? "bg-green-50 border-green-200 text-green-900"
20+
: "bg-yellow-50 border-yellow-200 text-yellow-900"
2021
}`}
2122
>
2223
<div className="font-semibold text-xs mb-1 capitalize">
2324
{message.role}
24-
{(hasToolCalls || hasFunctionCall) && (
25-
<span className="ml-1 text-orange-600">• Tool Call</span>
26-
)}
2725
</div>
28-
<div className="whitespace-pre-wrap">
26+
<div className="whitespace-pre-wrap break-words overflow-hidden">
2927
{typeof message.content === "string"
3028
? message.content
3129
: Array.isArray(message.content)
@@ -37,35 +35,77 @@ export const MessageBubble = ({ message }: { message: Message }) => {
3735
: JSON.stringify(message.content)}
3836
</div>
3937
{hasToolCalls && message.tool_calls && (
40-
<div className="mt-3 pt-2 border-t border-orange-200">
41-
<div className="font-semibold text-xs text-orange-700 mb-1">
38+
<div
39+
className={`mt-3 pt-2 border-t ${
40+
isTool ? "border-green-200" : "border-yellow-200"
41+
}`}
42+
>
43+
<div
44+
className={`font-semibold text-xs mb-1 ${
45+
isTool ? "text-green-700" : "text-yellow-700"
46+
}`}
47+
>
4248
Tool Calls:
4349
</div>
4450
{message.tool_calls.map((call, i) => (
4551
<div
4652
key={i}
47-
className="mb-2 p-2 bg-orange-100 border border-orange-200 rounded text-xs"
53+
className={`mb-2 p-2 border rounded text-xs ${
54+
isTool
55+
? "bg-green-100 border-green-200"
56+
: "bg-yellow-100 border-yellow-200"
57+
}`}
4858
>
49-
<div className="font-semibold text-orange-800 mb-1">
59+
<div
60+
className={`font-semibold mb-1 ${
61+
isTool ? "text-green-800" : "text-yellow-800"
62+
}`}
63+
>
5064
{call.function.name}
5165
</div>
52-
<div className="text-orange-700 font-mono text-xs">
66+
<div
67+
className={`font-mono text-xs break-all overflow-hidden ${
68+
isTool ? "text-green-700" : "text-yellow-700"
69+
}`}
70+
>
5371
{call.function.arguments}
5472
</div>
5573
</div>
5674
))}
5775
</div>
5876
)}
5977
{hasFunctionCall && message.function_call && (
60-
<div className="mt-3 pt-2 border-t border-orange-200">
61-
<div className="font-semibold text-xs text-orange-700 mb-1">
78+
<div
79+
className={`mt-3 pt-2 border-t ${
80+
isTool ? "border-green-200" : "border-yellow-200"
81+
}`}
82+
>
83+
<div
84+
className={`font-semibold text-xs mb-1 ${
85+
isTool ? "text-green-700" : "text-yellow-700"
86+
}`}
87+
>
6288
Function Call:
6389
</div>
64-
<div className="p-2 bg-orange-100 border border-orange-200 rounded text-xs">
65-
<div className="font-semibold text-orange-800 mb-1">
90+
<div
91+
className={`p-2 border rounded text-xs ${
92+
isTool
93+
? "bg-green-100 border-green-200"
94+
: "bg-yellow-100 border-yellow-200"
95+
}`}
96+
>
97+
<div
98+
className={`font-semibold mb-1 ${
99+
isTool ? "text-green-800" : "text-yellow-800"
100+
}`}
101+
>
66102
{message.function_call.name}
67103
</div>
68-
<div className="text-orange-700 font-mono text-xs">
104+
<div
105+
className={`font-mono text-xs break-all overflow-hidden ${
106+
isTool ? "text-green-700" : "text-yellow-700"
107+
}`}
108+
>
69109
{message.function_call.arguments}
70110
</div>
71111
</div>

‎vite-app/src/components/Row.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,13 @@ export const Row = observer(
8585
{/* Expanded Content */}
8686
{isExpanded && (
8787
<div className="p-4 bg-gray-50 border-t border-gray-200">
88-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
88+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
8989
{/* Left Column - Chat Interface */}
90-
<div>
90+
<div className="lg:col-span-2">
9191
<h4 className="font-semibold text-sm text-gray-700 mb-2 pb-1">
9292
Conversation ({row.messages.length} messages)
9393
</h4>
94-
<div className="bg-white border border-gray-200 p-4 max-h-96 overflow-y-auto">
94+
<div className="bg-white border border-gray-200 p-4 max-h-[32rem] overflow-y-auto">
9595
{row.messages.map((message, msgIndex) => (
9696
<MessageBubble key={msgIndex} message={message} />
9797
))}

0 commit comments

Comments
 (0)