| 1 |
import React from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
|
| 4 |
interface DemoMessageProps { |
| 5 |
speaker: 'user' | 'assistant' |
| 6 |
children: React.ReactNode |
| 7 |
} |
| 8 |
|
| 9 |
export const DemoMessage: React.FC<DemoMessageProps> = ({ speaker, children }) => |
| 10 |
<div className={`ai-agent-message is-${speaker}`}> |
| 11 |
<span className="ai-agent-message__role"> |
| 12 |
{'user' === speaker ? __('You', 'code-snippets') : __('AI Agent', 'code-snippets')} |
| 13 |
</span> |
| 14 |
<div className="ai-agent-message__content">{children}</div> |
| 15 |
</div> |
| 16 |
|
| 17 |
export const DemoTyping: React.FC<{ label: string }> = ({ label }) => |
| 18 |
<div className="ai-agent-typing"> |
| 19 |
<span className="ai-agent-typing__dots" aria-hidden="true"><i /><i /><i /></span> |
| 20 |
<span>{label}</span> |
| 21 |
</div> |
| 22 |
|
| 23 |
/** |
| 24 |
* Stand-in for the round trip the real agent makes to Code Snippets Cloud. It |
| 25 |
* carries no state of its own — the parent decides when the trip is in flight. |
| 26 |
*/ |
| 27 |
export const DemoTransit: React.FC<{ label: string }> = ({ label }) => |
| 28 |
<div className="ai-agent-demo-transit"> |
| 29 |
<span className="ai-agent-demo-transit__endpoint">{__('Your site', 'code-snippets')}</span> |
| 30 |
<span className="ai-agent-demo-transit__track" aria-hidden="true"> |
| 31 |
<span className="ai-agent-demo-transit__pulse" /> |
| 32 |
</span> |
| 33 |
<span className="ai-agent-demo-transit__endpoint">{__('Code Snippets Cloud', 'code-snippets')}</span> |
| 34 |
<span className="screen-reader-text">{label}</span> |
| 35 |
</div> |
| 36 |
|
