feat: Chat UI improvements (#210)

Author: charlesvien

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

@@ -11,7 +11,7 @@ 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={`mr-auto max-w-[95%] py-1 xl:max-w-[60%] [&>*:last-child]:mb-0 ${isUser ? "mt-4 rounded-xl rounded-bl-sm bg-accent-4 px-3 py-2" : ""}
       `}
     >
       {children}

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

@@ -430,7 +430,7 @@ export const MessageEditor = forwardRef<
         onClick={handleContainerClick}
         style={{ cursor: "text" }}
       >
-        <Box className="max-h-[200px] flex-1 overflow-y-auto font-mono text-sm">
+        <Box className="max-h-[200px] min-h-[30px] flex-1 overflow-y-auto font-mono text-sm">
           <EditorContent editor={editor} />
         </Box>
         <Flex justify="between" align="center">
@@ -448,32 +448,48 @@ export const MessageEditor = forwardRef<
               color="gray"
               onClick={() => fileInputRef.current?.click()}
               disabled={disabled}
+              title="Attach file"
+              style={{ marginLeft: "0px" }}
             >
-              <Paperclip size={14} />
+              <Paperclip size={14} weight="bold" />
             </IconButton>
           </Tooltip>
-          {isLoading && onCancel ? (
-            <IconButton
-              size="1"
-              variant="soft"
-              color="red"
-              onClick={onCancel}
-              title="Stop"
-            >
-              <Stop size={14} weight="fill" />
-            </IconButton>
-          ) : (
-            <IconButton
-              size="1"
-              variant="solid"
-              color="orange"
-              onClick={handleSubmit}
-              disabled={disabled || isEmpty}
-              title="Send (Enter)"
-            >
-              <ArrowUp size={14} weight="bold" />
-            </IconButton>
-          )}
+          <Flex gap="4" align="center">
+            {isLoading && onCancel ? (
+              <Tooltip content="Stop">
+                <IconButton
+                  size="1"
+                  variant="soft"
+                  color="red"
+                  onClick={onCancel}
+                  title="Stop"
+                >
+                  <Stop size={14} weight="fill" />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              <Tooltip
+                content={
+                  disabled || isEmpty ? "Enter a message" : "Send message"
+                }
+              >
+                <IconButton
+                  size="1"
+                  variant="solid"
+                  onClick={handleSubmit}
+                  disabled={disabled || isEmpty}
+                  loading={isLoading}
+                  style={{
+                    backgroundColor:
+                      disabled || isEmpty ? "var(--accent-a4)" : undefined,
+                    color: disabled || isEmpty ? "var(--accent-8)" : undefined,
+                  }}
+                >
+                  <ArrowUp size={14} weight="bold" />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Flex>
         </Flex>
       </Flex>
     );

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 && (

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

@@ -99,10 +99,6 @@ export function VirtualizedList<T>({
     });
   }, [autoScrollToBottom, items]);
 
-  if (items.length === 0) {
-    return null;
-  }
-
   const virtualItems = virtualizer.getVirtualItems();
 
   return (
@@ -111,30 +107,32 @@ export function VirtualizedList<T>({
       className={className}
       style={{ height: "100%", overflow: "auto" }}
     >
-      <div
-        style={{
-          height: virtualizer.getTotalSize(),
-          width: "100%",
-          position: "relative",
-        }}
-      >
-        {virtualItems.map((virtualRow) => (
-          <div
-            key={virtualRow.key}
-            ref={virtualizer.measureElement}
-            data-index={virtualRow.index}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              transform: `translateY(${virtualRow.start}px)`,
-            }}
-          >
-            {renderItem(items[virtualRow.index], virtualRow.index)}
-          </div>
-        ))}
-      </div>
+      {items.length > 0 && (
+        <div
+          style={{
+            height: virtualizer.getTotalSize(),
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {virtualItems.map((virtualRow) => (
+            <div
+              key={virtualRow.key}
+              ref={virtualizer.measureElement}
+              data-index={virtualRow.index}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`,
+              }}
+            >
+              {renderItem(items[virtualRow.index], virtualRow.index)}
+            </div>
+          ))}
+        </div>
+      )}
       {footer}
     </div>
   );