# code-snippets/trunk/js/components/ManageMenu/AiAgentDemo/DemoThread.tsx

Code Snippets, version trunk. 36 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/trunk/code/js/components/ManageMenu/AiAgentDemo/DemoThread.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/trunk/raw/js/components/ManageMenu/AiAgentDemo/DemoThread.tsx
- Modified: 2026-09-22T07:42:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/trunk/code/js/components/ManageMenu/AiAgentDemo/DemoThread.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'

interface DemoMessageProps {
	speaker: 'user' | 'assistant'
	children: React.ReactNode
}

export const DemoMessage: React.FC<DemoMessageProps> = ({ speaker, children }) =>
	<div className={`ai-agent-message is-${speaker}`}>
		<span className="ai-agent-message__role">
			{'user' === speaker ? __('You', 'code-snippets') : __('AI Agent', 'code-snippets')}
		</span>
		<div className="ai-agent-message__content">{children}</div>
	</div>

export const DemoTyping: React.FC<{ label: string }> = ({ label }) =>
	<div className="ai-agent-typing">
		<span className="ai-agent-typing__dots" aria-hidden="true"><i /><i /><i /></span>
		<span>{label}</span>
	</div>

/**
 * Stand-in for the round trip the real agent makes to Code Snippets Cloud. It
 * carries no state of its own — the parent decides when the trip is in flight.
 */
export const DemoTransit: React.FC<{ label: string }> = ({ label }) =>
	<div className="ai-agent-demo-transit">
		<span className="ai-agent-demo-transit__endpoint">{__('Your site', 'code-snippets')}</span>
		<span className="ai-agent-demo-transit__track" aria-hidden="true">
			<span className="ai-agent-demo-transit__pulse" />
		</span>
		<span className="ai-agent-demo-transit__endpoint">{__('Code Snippets Cloud', 'code-snippets')}</span>
		<span className="screen-reader-text">{label}</span>
	</div>

```