Chain of Thought

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

import { AgentStep } from '../AgentStep/AgentStep';

import { ChainOfThought } from './ChainOfThought';

const meta: Meta<typeof ChainOfThought> = {
	tags: ['new-pattern'],
	title: 'Proposals/Chain of Thought',
	component: ChainOfThought,
	parameters: {
		docs: {
			description: {
				component:
					'**New pattern:** not in PDS v2 today. A collapsible record of what an agent did. The summary line is a Thinking State rendered from `label`, `isActive` and `time`; the body depends on the variant: plain steps, reasoning text, a web search, or coding tool calls. Rows are Agent Step.',
			},
		},
	},
	argTypes: {
		className: { table: { category: 'Base attributes' } },
		isOpen: { control: 'boolean', table: { category: 'State' } },
		expandWhenActive: {
			control: 'boolean',
			table: { category: 'Component configuration' },
		},
		iconName: {
			control: 'select',
			options: ['zappy', 'sparklesSolid'],
			table: { category: 'Content' },
		},
		isActive: { control: 'boolean', table: { category: 'State' } },
		label: { control: 'text', table: { category: 'Content' } },
		size: {
			control: 'select',
			options: ['s', 'm'],
			table: { category: 'Component configuration' },
		},
		variant: {
			control: 'select',
			options: ['steps', 'reasoning', 'search', 'coding'],
			table: { category: 'Component configuration' },
		},
	},
	args: { isOpen: true, label: 'Thought for 4 seconds', size: 's' },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Steps: Story = {
	render: (args) => (
		<ChainOfThought {...args}>
			<AgentStep label='Confirmed edit permission' status='done' />
			<AgentStep label='Read the page' secondaryText='home' status='done' />
			<AgentStep label='Reserved the page for editing' status='done' />
			<AgentStep
				detail='Updated the heading, two paragraphs and two links.'
				label='Applied changes'
				secondaryText='5 edits'
				status='done'
			/>
			<AgentStep label='Saved changes' status='done' />
		</ChainOfThought>
	),
};

export const Working: Story = {
	args: { expandWhenActive: true, isActive: true, isOpen: false },
	render: (args) => (
		<ChainOfThought {...args} label='Working...'>
			<AgentStep label='Confirmed edit permission' status='done' />
			<AgentStep label='Read the page' secondaryText='home' status='done' />
			<AgentStep label='Reserved the page for editing' status='active' />
			<AgentStep label='Applied changes' status='pending' />
			<AgentStep label='Saved changes' status='pending' />
		</ChainOfThought>
	),
};

export const Reasoning: Story = {
	args: { variant: 'reasoning' },
	render: (args) => (
		<ChainOfThought {...args} label='Thought for 4 seconds'>
			<p>
				Summer demand spikes for stone-fruit flavors — peach and apricot lead.
			</p>
			<p>
				I should check cone inventory before promoting a waffle-bowl special.
			</p>
		</ChainOfThought>
	),
};

export const Search: Story = {
	args: { variant: 'search' },
	render: (args) => (
		<ChainOfThought {...args} label='Searched the web'>
			<AgentStep
				iconName='magnifyingGlass'
				isQuiet
				label='best waffle cone supplier'
			/>
			<AgentStep
				iconName='globe'
				label='Joy Cone'
				secondaryText='joycone.com'
			/>
			<AgentStep
				iconName='globe'
				label='WebstaurantStore'
				secondaryText='webstaurantstore.com'
			/>
			<AgentStep
				iconName='globe'
				label='The Konery'
				secondaryText='thekonery.com'
			/>
			<AgentStep isQuiet label='+7 more' />
		</ChainOfThought>
	),
};

export const Coding: Story = {
	args: { variant: 'coding' },
	render: (args) => (
		<ChainOfThought {...args} label='Ran 3 tools'>
			<AgentStep label='Read' secondaryText={<code>flavors.ts</code>} />
			<AgentStep
				label='Edit'
				secondaryText={
					<>
						<code>ChurnSchedule.tsx</code>{' '}
						<span className='pds-agent-step__added'>+74</span>{' '}
						<span className='pds-agent-step__removed'>-41</span>
					</>
				}
			/>
			<AgentStep label='Run' secondaryText={<code>npm run freeze</code>} />
		</ChainOfThought>
	),
};