refactor(ui): extract QueuedMessageDisplay into separate component (#8374)

Co-authored-by: Abhi <43648792+abhipatel12@users.noreply.github.com>
2026-04-21 18:44:30 -07:00 · 2025-09-18 11:54:09 -07:00
parent 2c754d71e3
commit 92c99d7873
4 changed files with 144 additions and 52 deletions
@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Box, Text } from 'ink';
+
+const MAX_DISPLAYED_QUEUED_MESSAGES = 3;
+
+export interface QueuedMessageDisplayProps {
+  messageQueue: string[];
+}
+
+export const QueuedMessageDisplay = ({
+  messageQueue,
+}: QueuedMessageDisplayProps) => {
+  if (messageQueue.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {messageQueue
+        .slice(0, MAX_DISPLAYED_QUEUED_MESSAGES)
+        .map((message, index) => {
+          const preview = message.replace(/\s+/g, ' ');
+
+          return (
+            <Box key={index} paddingLeft={2} width="100%">
+              <Text dimColor wrap="truncate">
+                {preview}
+              </Text>
+            </Box>
+          );
+        })}
+      {messageQueue.length > MAX_DISPLAYED_QUEUED_MESSAGES && (
+        <Box paddingLeft={2}>
+          <Text dimColor>
+            ... (+
+            {messageQueue.length - MAX_DISPLAYED_QUEUED_MESSAGES} more)
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};