@capitol.ai/ui-components/README.md

Library of React components from Capitol AI

# Capitol AI - Summary

## Local setup

First, install the package:

```
npm install @capitol.ai/summary
```

Then, import components you need and default styles (optional):
```
import { Summary } from '@capitol.ai/summary';
import '@capitol.ai/summary/dist/summary.css';
```

## Components

### Summary

The main component that displays AI-generated summaries in different layouts.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| summaryId | string | "" | Unique identifier for the summary |
| prompt | string | "prompt" | The prompt text that generated the summary |
| title | string | "AI summary" | Title of the summary |
| className | string | "" | Additional CSS classes |
| summary | string | "" | The summary content |
| layout | "quoted" \| "clean" | "quoted" | Layout type for the summary. "quoted" shows prompt in quotes with decorative elements, "clean" provides a minimal design |
| format | "basic" \| "advanced" | "basic" | Format type for the summary |
| output | SummaryOutput | undefined | Additional output data for advanced format |
| useMarkdown | boolean | false | Whether to render the summary content as markdown. When true, the content will be rendered using ReactMarkdown with proper styling |

### Prompt

A component for user input with customizable styling.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholderText | string | "Enter prompt" | Placeholder text for the input |
| minHeight | number | undefined | Minimum height of the input area |
| accentColor | string | undefined | Accent color for the submit button |
| onSubmit | (prompt: string) => void | () => {} | Callback when prompt is submitted |
| onChange | (text: string) => void | () => {} | Callback when prompt text changes |
| disabled | boolean | false | Whether the input is disabled |

### PromptSuggestions

Displays a list of prompt suggestions that users can click on.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| prompts | string[] | [] | Array of prompt suggestions |
| onClickHandler | (prompt: string) => void | () => {} | Callback when a suggestion is clicked |
| title | string | "Suggestions" | Title of the suggestions section |

### PromptWithOptions

Combines the Prompt component with suggestion options.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| placeholder | string | "Ask a question" | Placeholder text for the input |
| prompts | string[] | [] | Array of prompt suggestions |
| onSubmit | (prompt: string) => void | undefined | Callback when prompt is submitted |
| onChange | (text: string) => void | undefined | Callback when prompt text changes |

### Sources

Displays a list of sources with optional masonry layout and pagination.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| sources | Source[] | [] | Array of source objects |
| isMasonryLayout | boolean | false | Whether to use masonry layout |
| itemsPerPage | number | 4 | Number of items to display per page |

### Pagination

A reusable pagination component for navigating through pages of content. Mainly used as pagination for Sources

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| currentPage | number | 1 | Current page number |
| totalPages | number | 1 | Total number of pages |
| onPageChange | (page: number) => void | () => {} | Callback when page changes |
| maxVisiblePages | number | 5 | Maximum number of visible page buttons |

### Navigation

Displays a navigation menu with active state tracking.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | "Navigation" | Title of the navigation section |
| navList | NavItem[] | [] | Array of navigation items |
| activeItem | string | "" | Currently active navigation item |

### GenerationLog

Displays a list of generation steps with loading animations.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | "Generating..." | Title of the generation log |
| logs | string[] | [] | Array of log messages |

## Types

### SummaryOutput

| Property | Type | Description |
|----------|------|-------------|
| header | string | Header text for the summary |
| body | string | Main body content of the summary |
| image | string | Optional image URL for the summary |

### Source

| Property | Type | Description |
|----------|------|-------------|
| url | string | URL of the source |
| title | string | Title of the source |
| image | string | Image URL for the source |

### NavItem

| Property | Type | Description |
|----------|------|-------------|
| ref | string | Reference ID for the navigation item |
| name | string | Display name of the navigation item |

## Example Usage

```jsx
import { Summary, PromptWithOptions, Sources, Navigation, GenerationLog } from '@capitol.ai/summary';
import '@capitol.ai/summary/dist/summary.css';

const MyApp = () => {
  return (
    <div>
      <PromptWithOptions
        placeholder="Ask a question"
        prompts={["What is AI?", "How does it work?"]}
        onSubmit={(prompt) => console.log(prompt)}
      />
      <GenerationLog
        title="Generating Summary"
        logs={["Analyzing sources", "Generating content"]}
      />
      <Summary
        title="AI Summary"
        prompt="What is artificial intelligence?"
        summary="Artificial intelligence is..."
        layout="metric-media"
      />
      <Sources
        sources={[
          {
            url: "https://example.com",
            title: "Example Source",
            image: "https://example.com/image.jpg"
          }
        ]}
      />
      <Navigation
        title="Table of Contents"
        navList={[
          { ref: "section1", name: "Introduction" },
          { ref: "section2", name: "Main Content" }
        ]}
        activeItem="section1"
      />
    </div>
  );
}
```

## Building new package

It's always a better idea to test before publish (e.g. using App.jsx).

Once you absolutely happy with what you've done:

```
npm run build
npm version patch
npm publish
```