(feat): add message states, tweaks chat ui

(feat): add drag and drop to login page

packages/chat/src/components/message.tsx

@@ -35,6 +35,7 @@ function MessageComponent({
 
   return (
     <div
+      // pt-3 is to get a gap between messages
       className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
     >
       <ContextMenu>

packages/chat/src/screen.tsx

@@ -438,7 +438,7 @@ export default function Screen() {
         className="min-h-0 flex-1 overflow-y-auto"
         style={{
           overflowAnchor: "none",
-          paddingBottom: "8px",
+          paddingBottom: "22px",
         }}
         onScroll={handleContainerScroll}
       >
@@ -461,7 +461,6 @@ export default function Screen() {
                     left: 0,
                     width: "100%",
                     transform: `translateY(${virtualRow.start + verticalOffset}px)`,
-                    padding: "4px 0",
                   }}
                 >
                   <div className="w-full flex justify-start">