npm package: @sarthakb009/chain-of-thought
Description: ChainOfThought
Author: Sarthak
Latest version: 1.0.7

# ChainOfThought

A React component for displaying step-by-step reasoning processes with animation support, timers, and visual status indicators. Built with TypeScript and no external dependencies (except React and Lucide icons).

## Installation

```bash
npm install @sarthakb009/chain-of-thought
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0

## Usage

### Basic Example

```tsx
import { ChainOfThought } from '@sarthakb009/chain-of-thought';

function App() {
  const steps = [
    "Analyzing the problem",
    "Gathering relevant information",
    "Formulating a solution",
    "Verifying the result"
  ];

  return (
    <ChainOfThought 
      steps={steps}
      title="Reasoning Process"
    />
  );
}
```

### With Rich Steps

```tsx
import { ChainOfThought, ChainOfThoughtStep } from '@sarthakb009/chain-of-thought';

function App() {
  const steps: ChainOfThoughtStep[] = [
    {
      title: "Analyzing the problem",
      description: "Breaking down the requirements",
      status: "complete"
    },
    {
      title: "Searching for solutions",
      status: "web-search",
      searchQuery: "React component patterns"
    },
    {
      title: "Thinking",
      status: "thinking"
    },
    {
      title: "Implementing solution",
      description: "Writing the code",
      codeBlock: "function example() { return true; }"
    }
  ];

  return (
    <ChainOfThought 
      steps={steps}
      title="AI Reasoning"
    />
  );
}
```

### With Animation

```tsx
import { ChainOfThought } from '@sarthakb009/chain-of-thought';

function App() {
  const steps = [
    { title: "Step 1", duration: 2 },
    { title: "Step 2", duration: 1.5 },
    { title: "Step 3", duration: 3 }
  ];

  return (
    <ChainOfThought 
      steps={steps}
      animated={true}
      autoPlay={true}
      stepDelay={1000}
      showTimers={true}
      totalTimer={true}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `steps` | `(string \| ChainOfThoughtStep)[]` | - | **Yes** | Array of reasoning steps. Can be strings or objects with title, description, status, etc. |
| `title` | `string` | `"Reasoning Process"` | No | Title displayed in the header |
| `defaultOpen` | `boolean` | `true` | No | Whether the component is expanded by default |
| `className` | `string` | - | No | Additional CSS classes |
| `animated` | `boolean` | `false` | No | Enable step-by-step animation |
| `autoPlay` | `boolean` | `false` | No | Automatically start animation on mount |
| `stepDelay` | `number` | `1000` | No | Delay between steps in milliseconds (when duration is not specified) |
| `showTimers` | `boolean` | `true` | No | Show timer for each step |
| `totalTimer` | `boolean` | `true` | No | Show total elapsed time in header |

### ChainOfThoughtStep

| Property | Type | Description |
|----------|------|-------------|
| `title` | `string` | Step title (required) |
| `description` | `string` | Optional step description |
| `status` | `'complete' \| 'processing' \| 'pending' \| 'error' \| 'web-search' \| 'thinking'` | Step status |
| `timestamp` | `string` | Optional timestamp (e.g., "1.2s") |
| `codeBlock` | `string` | Optional code block to display |
| `duration` | `number` | Duration in seconds for animated steps |
| `searchQuery` | `string` | Search query for web-search status |

## Features

- ✅ **Step-by-step Display**: Visual timeline of reasoning steps
- ✅ **Animation Support**: Animated progression through steps
- ✅ **Timers**: Individual step timers and total elapsed time
- ✅ **Status Indicators**: Visual status for complete, processing, error, web-search, and thinking states
- ✅ **Code Blocks**: Display code snippets within steps
- ✅ **Collapsible**: Expandable/collapsible interface
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Customizable**: Full control over styling and behavior

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import { ChainOfThought, ChainOfThoughtProps, ChainOfThoughtStep } from '@sarthakb009/chain-of-thought';

const props: ChainOfThoughtProps = {
  steps: [
    { title: "Step 1", status: "complete" }
  ],
  animated: true,
  autoPlay: true
};
```

## License

MIT