react-thinking-panel

A React component that replicates the Gemini Deep Research thinking panel style with expandable sections and source links.

Features

• 📍 Timeline Design - Vertical line with dot markers for flow visualization
• 🎨 CSS Variables - Fully customizable colors via CSS custom properties
• 🌙 Dark Mode - Built-in dark mode support (auto or manual)
• 🔧 Flexible Icons - Built-in icons or custom React nodes
• 📦 TypeScript - Full type definitions included
• 🪶 Lightweight - No dependencies (peer dependency on React only)

Installation

npm install react-thinking-panel
# or
yarn add react-thinking-panel
# or
pnpm add react-thinking-panel

Quick Start

import { ThinkingPanel } from 'react-thinking-panel';
import 'react-thinking-panel/styles.css';

function App() {
  const [expanded, setExpanded] = useState(true);

  return (
    <ThinkingPanel
      title="思路"
      expanded={expanded}
      onToggle={() => setExpanded(!expanded)}
      sections={[
        {
          icon: 'sparkle',
          title: 'Analysis',
          content: 'Analyzing the problem...'
        },
        {
          icon: 'brain',
          title: 'Deep Thinking',
          content: ['First paragraph.', 'Second paragraph.']
        }
      ]}
    />
  );
}

API Reference

ThinkingPanelProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | '思路' | Panel header title | | titleIcon | ReactNode | - | Custom icon before title | | expanded | boolean | true | Whether panel is expanded | | onToggle | () => void | - | Toggle callback | | sections | ThinkingSection[] | required | Thinking sections | | researching | ResearchingSection | - | Source links section | | className | string | - | Container class | | headerClassName | string | - | Header class | | contentClassName | string | - | Content area class | | darkMode | boolean | - | Force dark mode | | style | CSSProperties | - | Inline styles |

ThinkingSection

| Prop | Type | Description | |------|------|-------------| | title | string | Section title | | content | string \| string[] | Paragraph(s) content | | icon | 'sparkle' \| 'search' \| 'brain' \| 'bulb' \| string | Built-in or emoji icon | | iconNode | ReactNode | Custom icon (overrides icon) | | className | string | Section class |

ResearchingSection

| Prop | Type | Description | |------|------|-------------| | title | string | Section title | | icon | 'google' \| 'search' \| string | Built-in or emoji icon | | iconNode | ReactNode | Custom icon | | links | SourceLink[] | Source links | | className | string | Section class |

SourceLink

| Prop | Type | Description | |------|------|-------------| | domain | string | Domain name (e.g., "github.com") | | title | string | Link title | | url | string | Full URL | | icon | string | Custom favicon URL |

Customization

CSS Variables

Override these CSS custom properties to customize colors:

:root {
  /* Light Mode */
  --tp-bg: #ffffff;
  --tp-border: #e5e7eb;
  --tp-title-color: #374151;
  --tp-section-icon-color: #f59e0b;
  --tp-paragraph-color: #4b5563;
  
  /* Timeline */
  --tp-timeline-line-color: #e5e7eb;
  --tp-timeline-dot-color: #3b82f6;
  --tp-timeline-dot-size: 8px;
  --tp-timeline-line-width: 2px;
  /* ... see styles.css for all variables */
}

Dark Mode

Auto (via media query):

@media (prefers-color-scheme: dark) {
  :root { /* dark colors */ }
}

Manual:

<ThinkingPanel darkMode={true} ... />

Or apply .tp-dark class to a parent element.

Custom Icons

import { FaRobot } from 'react-icons/fa';

<ThinkingPanel
  sections={[
    {
      title: 'Custom Icon',
      content: 'Using react-icons',
      iconNode: <FaRobot size={16} color="#4285F4" />
    }
  ]}
/>

Example with Researching Section

<ThinkingPanel
  title="Deep Research"
  expanded={expanded}
  onToggle={() => setExpanded(!expanded)}
  sections={[
    { icon: 'sparkle', title: 'Analysis', content: '...' }
  ]}
  researching={{
    title: 'Researching websites',
    icon: 'google',
    links: [
      { domain: 'github.com', title: 'Repository', url: 'https://github.com/...' },
      { domain: 'arxiv.org', title: 'Paper', url: 'https://arxiv.org/...' }
    ]
  }}
/>

License

MIT