Skip to content

Commit 2116fd4

Browse files
Update colors and spacing
1 parent cf85793 commit 2116fd4

File tree

2 files changed

+7
-29
lines changed

2 files changed

+7
-29
lines changed

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/MetricCard.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const useCardStyles = makeStyles({
3737
padding: '.75rem',
3838
border: '1px solid #e0e0e0',
3939
borderRadius: '4px',
40-
width: '10rem',
40+
width: '12rem',
4141
cursor: 'pointer',
4242
transition: 'box-shadow 0.2s ease-in-out, outline 0.2s ease-in-out',
4343
position: 'relative',
@@ -61,10 +61,9 @@ const useCardStyles = makeStyles({
6161
overflow: 'hidden',
6262
textOverflow: 'ellipsis',
6363
lineHeight: '1.2',
64-
maxHeight: '2.4em',
65-
display: '-webkit-box',
66-
WebkitLineClamp: 2,
67-
WebkitBoxOrient: 'vertical',
64+
height: '1.2em',
65+
display: "block",
66+
whiteSpace: 'nowrap',
6867
marginTop: '-0.5rem',
6968
},
7069
iconPlaceholder: {

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/ScenarioTree.tsx

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -247,14 +247,14 @@ const useStyles = makeStyles({
247247
messageRow: {
248248
display: 'flex',
249249
flexDirection: 'column',
250-
width: '900px',
250+
width: '60rem',
251251
position: 'relative',
252252
},
253253
userMessageRow: {
254254
marginLeft: '0',
255255
},
256256
assistantMessageRow: {
257-
marginLeft: '100px',
257+
marginLeft: '10rem',
258258
},
259259
messageParticipantName: {
260260
fontSize: tokens.fontSizeBase200,
@@ -268,19 +268,7 @@ const useStyles = makeStyles({
268268
overflow: 'hidden',
269269
wordBreak: 'break-word',
270270
width: '100%',
271-
},
272-
userBubble: {
273271
backgroundColor: tokens.colorNeutralBackground3,
274-
borderTopLeftRadius: '4px',
275-
},
276-
systemBubble: {
277-
backgroundColor: tokens.colorBrandBackground,
278-
color: tokens.colorNeutralForegroundInverted,
279-
borderTopLeftRadius: '4px',
280-
},
281-
assistantBubble: {
282-
backgroundColor: tokens.colorNeutralBackground4,
283-
borderTopRightRadius: '4px',
284272
},
285273
});
286274

@@ -350,20 +338,11 @@ export const PromptDetails = ({ messages, renderMarkdown }: {
350338
classes.messageRow,
351339
isFromUserSide ? classes.userMessageRow : classes.assistantMessageRow
352340
);
353-
354-
let messageBubble;
355-
if (message.role.toLowerCase() === 'system') {
356-
messageBubble = mergeClasses(classes.messageBubble, classes.systemBubble);
357-
} else if (isFromUserSide) {
358-
messageBubble = mergeClasses(classes.messageBubble, classes.userBubble);
359-
} else {
360-
messageBubble = mergeClasses(classes.messageBubble, classes.assistantBubble);
361-
}
362341

363342
return (
364343
<div key={index} className={messageRowClass}>
365344
<div className={classes.messageParticipantName}>{message.participantName}</div>
366-
<div className={messageBubble}>
345+
<div className={classes.messageBubble}>
367346
{renderMarkdown ?
368347
<ReactMarkdown>{message.content}</ReactMarkdown> :
369348
<pre style={{ whiteSpace: 'pre-wrap' }}>{message.content}</pre>

0 commit comments

Comments
 (0)