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

npm install @sarthakb009/chain-of-thought

Peer Dependencies

Make sure you have these installed in your project:

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

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

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

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:

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

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

License

MIT