From 5be89befeff9c4d4f3ab9f508f030bc153fdd06b Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Fri, 25 Apr 2025 17:11:08 -0700
Subject: feat: Fix flickering in iTerm + scrolling + performance issues.

- Refactors history display using Ink's <Static> component to prevent flickering and improve performance by rendering completed items statically.
- Introduces ConsolePatcher component to capture and display console.log, console.warn, and console.error output within the Ink UI, addressing native handling issues.
- Introduce a new content splitting mechanism to work better for static items. Basically when content gets too long we will now split content into multiple blocks for Gemini messages to ensure that we can statically cache larger pieces of history.

Fixes:
- https://b.corp.google.com/issues/411450097
- https://b.corp.google.com/issues/412716309
---
 .../components/messages/GeminiMessageContent.tsx   | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 packages/cli/src/ui/components/messages/GeminiMessageContent.tsx

(limited to 'packages/cli/src/ui/components/messages/GeminiMessageContent.tsx')

diff --git a/packages/cli/src/ui/components/messages/GeminiMessageContent.tsx b/packages/cli/src/ui/components/messages/GeminiMessageContent.tsx
new file mode 100644
index 00000000..fb025231
--- /dev/null
+++ b/packages/cli/src/ui/components/messages/GeminiMessageContent.tsx
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { Box } from 'ink';
+import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
+
+interface GeminiMessageContentProps {
+  text: string;
+}
+
+/*
+ * Gemini message content is a semi-hacked component. The intention is to represent a partial
+ * of GeminiMessage and is only used when a response gets too long. In that instance messages
+ * are split into multiple GeminiMessageContent's to enable the root <Static> component in
+ * App.tsx to be as performant as humanly possible.
+ */
+export const GeminiMessageContent: React.FC<GeminiMessageContentProps> = ({
+  text,
+}) => {
+  const originalPrefix = '✦ ';
+  const prefixWidth = originalPrefix.length;
+  const renderedBlocks = MarkdownRenderer.render(text);
+
+  return (
+    <Box flexDirection="column" paddingLeft={prefixWidth}>
+      {renderedBlocks}
+    </Box>
+  );
+};
-- 
cgit v1.2.3