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