@@ -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