react-virtual in messages list

src/workspaces/apps/Chat/MessageList.tsx

@@ -40,8 +40,9 @@ export const MessageList = ({
             Send a message to start
           </div>
         )}
+        {messages.length > 0 && (
           <div
-          className="p-4 space-y-3"
+            className="relative w-full"
             style={{ height: virtualizer.getTotalSize() }}
           >
             {virtualizer.getVirtualItems().map((virtualRow) => {
@@ -49,18 +50,24 @@ export const MessageList = ({
               return (
                 <div
                   key={virtualRow.key}
-                className="absolute left-0 w-full"
+                  className="absolute top-0 left-0 w-full px-4"
                   style={{
-                  top: virtualRow.start,
-                  height: virtualRow.size,
+                    transform: `translateY(${virtualRow.start}px)`,
                   }}
                 >
+                  <div className="py-1.5">
                     <MessageBubble message={msg} onAnswer={onQuestionAnswer} />
                   </div>
+                </div>
               );
             })}
           </div>
-        {isGenerating && <StreamingBubble text={streamingText} />}
+        )}
+        {isGenerating && (
+          <div className="px-4 py-1.5">
+            <StreamingBubble text={streamingText} />
+          </div>
+        )}
         <div ref={bottomRef} />
       </div>