Small improvements on chat ui

Author: charlesvien

apps/array/src/renderer/features/sessions/components/ChatBubble.tsx

@@ -11,8 +11,11 @@ export function ChatBubble({ variant, children }: ChatBubbleProps) {
 
   return (
     <Box
-      className={`mr-auto max-w-[95%] py-1 xl:max-w-[60%] [&>*:last-child]:mb-0 ${isUser ? "mt-4 rounded-xl rounded-bl-sm bg-gray-2 px-3 py-2" : ""}
-      `}
+      className={`max-w-[95%] xl:max-w-[60%] [&>*:last-child]:mb-0 ${
+        isUser
+          ? "ml-auto rounded-xl rounded-br-sm bg-accent-4 px-3 py-2"
+          : "mr-auto"
+      }`}
     >
       {children}
     </Box>

apps/array/src/renderer/features/sessions/components/SessionView.tsx

@@ -475,7 +475,7 @@ export function SessionView({
       const shouldCollapse = turn.isComplete && collapsibleMessages.length > 0;
 
       return (
-        <Box className="flex flex-col gap-2">
+        <Box className="flex flex-col gap-4">
           <UserMessage content={turn.userMessage.content} />
           {shouldCollapse ? (
             <>
@@ -588,7 +588,7 @@ export function SessionView({
               renderItem={renderTurn}
               autoScrollToBottom
               className="flex-1 p-4"
-              gap={8}
+              gap={24}
               footer={
                 <>
                   {isPromptPending && (