Chat Message

import { Meta, StoryObj } from '@storybook/react-vite';

import { ChatMessage } from './ChatMessage';
import { ChatMessageList } from './ChatMessageList';

const AGENT_TEXT =
	'I found 3 issues on the homepage. Would you like me to fix them on the current page? Tell me which ones, or I can start with the critical issues.';

const meta: Meta<typeof ChatMessage> = {
	tags: ['new-pattern'],
	title: 'Proposals/Chat Message',
	component: ChatMessage,
	parameters: {
		docs: {
			description: {
				component:
					'**New pattern:** not in PDS v2 today. One turn in a conversation. `sender` is `user` (a bubble on the right that hugs its text) or `agent` (plain content across the full width).',
			},
		},
	},
	argTypes: {
		children: { control: 'text', table: { category: 'Content' } },
		className: { table: { category: 'Base attributes' } },
		label: { control: 'text', table: { category: 'Content' } },
		sender: {
			control: 'select',
			options: ['agent', 'user'],
			table: { category: 'Component configuration' },
		},
	},
	args: {
		children: AGENT_TEXT,
		label: 'Zappy',
		sender: 'agent',
	},
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const User: Story = {
	args: {
		children:
			'Can you check the homepage for accessibility problems? I am especially worried about the hero section, because the headline is set over a photo and I think the contrast might be too low for people with low vision. Please also look at the footer links, since a couple of them looked broken when I tried them yesterday, and tell me which pages are affected so I can decide what to fix first. If anything needs a design change, explain why before you make it.',
		label: 'You',
		sender: 'user',
	},
	parameters: {
		docs: {
			description: {
				story:
					'A user message is a filled bubble that hugs its text and sits on the right, up to 80% of the width. Line breaks the user typed are kept.',
			},
		},
	},
};

export const Conversation: Story = {
	parameters: {
		docs: {
			description: {
				story:
					'The variants together, as in the chat UI: a user prompt, an agent reply with a list in it, then a follow-up, stacked in a `ChatMessageList`, which owns the gap between turns (turn Annotate on to see it). ',
			},
		},
	},
	render: () => (
		<ChatMessageList>
			<ChatMessage label='You' sender='user'>
				Can you check the homepage for accessibility problems?
			</ChatMessage>
			<ChatMessage label='Zappy'>
				<p>I found 3 issues on the homepage:</p>
				<ul>
					<li>The hero image has no alt text (critical)</li>
					<li>The hero subtitle has low contrast against its background</li>
					<li>Two footer links go to pages that no longer exist</li>
				</ul>
				<p>
					Would you like me to fix these on the current page? If so, let me know
					which ones, or I can start with the critical issues.
				</p>
			</ChatMessage>
			<ChatMessage label='You' sender='user'>
				Fix the hero
			</ChatMessage>
		</ChatMessageList>
	),
};