react-virtual in messages list

src/workspaces/apps/Chat/MessageList.tsx

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