diff --git a/packages/cli/src/ui/components/messages/BtwMessage.test.tsx b/packages/cli/src/ui/components/messages/BtwMessage.test.tsx new file mode 100644 index 000000000..da784dc0d --- /dev/null +++ b/packages/cli/src/ui/components/messages/BtwMessage.test.tsx @@ -0,0 +1,34 @@ +/** + * @license + * Copyright 2025 Qwen Code + * SPDX-License-Identifier: Apache-2.0 + */ + +import { describe, expect, it } from 'vitest'; +import { render } from 'ink-testing-library'; +import { BtwMessage } from './BtwMessage.js'; + +describe('BtwMessage', () => { + it('is wrapped in React.memo to avoid unnecessary layout rerenders', () => { + expect((BtwMessage as unknown as { $$typeof?: symbol }).$$typeof).toBe( + Symbol.for('react.memo'), + ); + }); + + it('renders the side question and answer', () => { + const { lastFrame } = render( + , + ); + + const output = lastFrame() ?? ''; + expect(output).toContain('/btw'); + expect(output).toContain('side question'); + expect(output).toContain('side answer'); + }); +}); diff --git a/packages/cli/src/ui/components/messages/BtwMessage.tsx b/packages/cli/src/ui/components/messages/BtwMessage.tsx index 8a7ac9d15..a172d43fa 100644 --- a/packages/cli/src/ui/components/messages/BtwMessage.tsx +++ b/packages/cli/src/ui/components/messages/BtwMessage.tsx @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import type React from 'react'; +import React from 'react'; import { Box, Text } from 'ink'; import type { BtwProps } from '../../types.js'; import { Colors } from '../../colors.js'; @@ -14,7 +14,7 @@ export interface BtwDisplayProps { btw: BtwProps; } -export const BtwMessage: React.FC = ({ btw }) => ( +const BtwMessageInternal: React.FC = ({ btw }) => ( = ({ btw }) => ( )} ); + +export const BtwMessage = React.memo(BtwMessageInternal);