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

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