](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/BookCitation/README.MD)
- [ChatCitation](#chatcitation) [- The exact valuation of SpaceX fluctuates between sources.
This visual captures a clean product collaboration workspace prepared for planning, note-taking, and design review.
### Key observations
- The laptop acts as the primary working surface for product or engineering review
- The surrounding setup reinforces a structured, research-oriented workflow
- The image is rendered inline as part of the markdown citation
`;
Scanned Doc Citation Test
β’ `gs_url`: `string`
β’ `page_no?`: `number`
β’ `highlighted_coordinates?`: `BBox[]`
β’ `dimensions?`: `Dimensions`
β’ `highlighted_text?`: `HighlightedText[]` | | `images` | `string[]` | β | β | Array of pre-signed GCS image URLs, one per page | | `highlights` | `PageHighlight[]` | β | β | Array of highlight groups with bounding boxes per page | | `highlightColor` | `string` | β | `rgba(255, 220, 0, 0.15)` | Background color of inactive highlights | | `citationLabelColor` | `string` | β | `#FFFF2E` | Background color of the citation label. | | `subHeadingText` | `string` | β | `""` | Gives you option to add a heading to ScannedDocCitation. | | `showFullScreenMode` | `boolean` | β | `true` | Gives you option to toggle fullscreen tool in renderNav. | | `showCitationLabelOnHover` | `boolean` | β | `true` | Show label only on hover (if `false` β always visible). | | `highlightActiveColor` | `string` | β | `rgba(255, 220, 0, 0.35)` | Background color of the currently active highlight | | `highlightBorderColor` | `string` | β | `rgba(200, 160, 0, 0.4)` | Border color of the active highlight | | `height` | `string \| number` | β | `"700px"` | Maximum height of the scrollable container. Shrinks to fit content if content is shorter. | | `subHeadingTitleInsideModal` | `string` | β | β | Title shown in the fullscreen modal header. Separate from `subHeadingText` which appears above the normal (non-modal) view. | | `scrollToFirstCitation` | `boolean` | β | `false` | When `true`, automatically scrolls the container to the first citation/bounding box once the page image has loaded. | | `showPageSeparator` | `boolean` | β | `true` | When `true`, renders a thin horizontal divider line between pages to make page breaks visually distinct. | | `pageSeparatorColor` | `string` | β | `"#e2e8f0"` | CSS color value for the page separator line. Only used when `showPageSeparator` is `true`. | ### Type Definitions ```typescript interface BBox { xmin: number; // normalized 0β1 (provided directly by backend) ymin: number; xmax: number; ymax: number; } interface PageHighlight { pageIndex: number; // zero-based index matching the images array bboxes: BBox[]; } export interface Dimensions { unit: string; width: number; height: number; } export interface HighlightedText { text: string; excerpt_from_document: string; page_no: number; reasoning: string[]; gap: string[]; score: number; } export interface CitationPage { gs_url: string; page_no?: number; highlighted_coordinates?: BBox[]; dimensions?: Dimensions; highlighted_text?: HighlightedText[]; } interface ScannedDocCitationProps { images: string[]; highlights: PageHighlight[]; pages?: CitationPage[]; citationLabelColor?: string; showCitationLabelOnHover?: boolean; highlightColor?: string; highlightActiveColor?: string; highlightBorderColor?: string; height?: string | number; } ``` > **Note:** Coordinates in `highlighted_coordinates` are already normalized (0β1) by the backend. No pixel conversion needed before passing them to the component. --- ## InstantLearningCitationComponent ### Overview `InstantLearningCitationComponent` renders markdown content with embedded Instant Learning (IL) citation links. Each citation link is resolved against a provided metadata array and rendered as an expandable inline pill backed by `InstantLearningCitation`. It also supports streaming mode, optional text highlighting, and custom `
`/`` popup patterns.
### Features
- **Inline IL citation pills** β Citation links in markdown are replaced with expandable `CitationRenderer` pills that open a full IL citation card
- **Streaming support** β Shows a slash-loader animation in place of citation pills while the response is still generating
- **Text highlighting** β Highlights a specific phrase in yellow across all rendered text nodes
- **Custom `
` popup patterns.
### Features
- **Inline IL citation pills** β Citation links in markdown are replaced with expandable `CitationRenderer` pills that open a full IL citation card
- **Streaming support** β Shows a slash-loader animation in place of citation pills while the response is still generating
- **Text highlighting** β Highlights a specific phrase in yellow across all rendered text nodes
- **Custom `` rendering** β Handles inline, block, and target `` patterns with animated popup regions
### Usage
```tsx
import InstantLearningCitationComponent from '@e-llm-studio/citation/InstantLearningCitation'
console.log({ keys, adId, isOpen })}
isStreaming={false}
/>
```
Citation links in the markdown must follow this format:
```
[LinkText](doc_id=learnings_doc?citationNumber=1&citation_type=IL&citationSource=L1)
```
The `citationNumber` value is matched against `customMetaData.citation_number` in the `citations` array. When `citation_type=IL` and `il_learning` data is present, the link renders as an IL pill; otherwise it falls back to a plain anchor.
**With streaming:**
```tsx
` tags |
| `citations` | `any[]` | β | Citation metadata array; each item matched by `customMetaData.citation_number`. For IL pills, `citation_type` must be `"IL"` and `il_learning` must be present |
| `onCitationToggle` | `(keys: string[], adId: string, isOpen: boolean) => void` | β
| Fired when a citation pill is opened or closed |
| `isStreaming` | `boolean` | β | When `true`, renders an animated slash-loader instead of citation pills (default: `false`) |
| `highlightedText` | `string` | β | Phrase to highlight in yellow across all rendered paragraph, list, and code text |
| `readOnly` | `boolean` | β | Reserved for future editor integration (default: `false`) |
| `height` | `string \| number` | β | Optional container height |
---
# Other Components
## Bookemon
### Overview
Bookemon is a composable, dialog-based React UI component designed for deep book inspection. It features a resizable split-panel layout that allows users to browse detailed metadata while simultaneously viewing and interacting with specific manuscript content. The component is designed to be highly customizable via style injections and handles complex logic for smart text citation, server-side pagination, and focus-mode blurring.
### Features
- **Resizable split-panel layout** - Left panel for metadata, right panel for content preview
- **Deep book inspection** - Browse detailed metadata including overview, elements, copyrights, and awards
- **Smart text citation** - Automatically highlights and focuses on specific text passages
- **Server-side pagination** - Efficiently handles large datasets with pagination support
- **Focus-mode blurring** - Blur non-highlighted text to focus reader attention on relevant content
- **Highly customizable styling** - Inject custom styles for layout containers and citation elements
- **Interactive accordions** - Collapsible sections for book metadata organization
### Usage
```tsx
import Bookemon from '@e-llm-studio/citation/Bookemon'
setIsOpen(false)}
data={bookData}
getHighlightContent={fetchContent}
isBlurToggleVisible={true}
/>
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `open` | `boolean` | Controls the visibility of the dialog |
| `onClose` | `() => void` | Callback function triggered when the dialog is closed |
| `data` | `BookemonData` | Object containing book metadata and elements |
| `getHighlightContent` | `(chunkIds: string[]) => Promise` | Async handler to fetch content for highlighting |
| `handleFetchManuscriptElements` | `(params: FetchElementsParams) => Promise` | Async handler for fetching paginated manuscript elements |
| `isBookemon` | `boolean` | Default: true. Feature flag for Bookemon-specific behavior |
| `isBlurToggleVisible` | `boolean` | Default: false. Shows the blur switch in header |
| `isNonHighlightedBlur` | `boolean` | Default: false. Initial blur state |
| `showComingSoon` | `boolean` | Default: false. Gates the UI with coming soon overlay |
| `customStyle` | `BookemonCustomStyles` | Optional custom styles for layout and citation elements |
---
## DatagestMon
### Overview
DatagestMon is a React component for monitoring and displaying structured data from processing stages (analysis, transform, rag). It provides a comprehensive interface that combines dynamic data visualization with an integrated EPUB viewer. The component uses Material-UI Dialog for display and includes a built-in EPUB reader powered by react-reader.
### Features
- **Multi-stage data display** - Visualize data from analysis, transform, and rag stages
- **Processed and error data** - Display both successful processing results and error information
- **Integrated EPUB viewer** - View associated EPUB content side-by-side with data
- **Dynamic data visualization** - Automatically render various data types
- **Material-UI Dialog** - Professional modal presentation
- **Graceful error handling** - Handle missing or malformed data gracefully
### Usage
```tsx
import DatagestMon from '@e-llm-studio/citation/DatagestMon'
const pipelineData = {
"analysis": {
"processed_data": {
"summary": "Analysis completed",
"functions": "15 functions extracted"
},
"error_data": {
"rate_limit_exceeded": true
}
},
"transform": {
"processed_data": {
"embeddings": 123,
"transformed_records": 1200
},
"error_data": {}
}
}
setIsOpen(false)}
data={pipelineData}
url="https://example.com/document.epub"
/>
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `open` | `boolean` | Controls whether the dialog is open or closed |
| `onClose` | `function` | Callback function triggered when the dialog is closed |
| `data` | `object` | Object containing structured data from processing stages |
| `url` | `string` | Optional URL of the EPUB file to display in the viewer |
---
## DataSelector
### Overview
DataSelector is a robust, multi-step wizard designed to handle complex data import workflows. It acts as a central hub where users can select data from various sourcesβincluding remote RLEF projects, historical copilot data, saved datasets, or local file uploadsβand aggregates them into a unified selection state. It features a built-in state machine for navigation, breadcrumb management, and context-driven state sharing.
### Features
- **Multi-step wizard interface** - Guide users through complex data selection workflows
- **Multiple data sources** - Support for RLEF projects, historical data, saved datasets, and local files
- **Breadcrumb navigation** - Easy navigation through wizard steps
- **Server-side pagination** - Efficiently handle large datasets
- **Search and filtering** - Find data quickly with built-in search
- **State machine navigation** - Robust step management
- **Context-driven state sharing** - Centralized state management via React Context
### Usage
```tsx
import { DataSelectedContextProvider } from '@e-llm-studio/citation/context/DataSelectedContext'
import DataSelector from '@e-llm-studio/citation/DataSelector'
```
**Wizard Steps**:
1. **Data source selection** - Choose from RLEF, Local, Google Drive, Saved Datasets
2. **Project/task selection** - Select specific projects or tasks
3. **Data collection selection** - Choose from available data collections
4. **Data point selection** - Select specific data points within collections
5. **Final review** - Review and confirm selections
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `selectedRlefResources` | `Array` | Initial array of selected remote resources |
| `setSelectedRlefResources` | `Function` | State setter for remote resources |
| `selectedLocalFiles` | `Array` | Initial array of selected local files |
| `setSelectedLocalFiles` | `Function` | State setter for local files |
| `pageTitle` | `string` | Customizes the header text |
| `renderDefaultActionsFooter` | `boolean` | Show/hide the default "Next" button |
---
## PaginatedTable
### Overview
PaginatedTable is a high-performance React component designed to display large datasets efficiently. It leverages virtualization (via react-window) to render only the visible rows, ensuring smooth scrolling even with thousands of records. It also supports infinite scrolling, automatically triggering a "load more" callback when the user scrolls near the bottom.
### Features
- **Virtualization** - Efficiently renders massive datasets using windowing
- **Infinite scroll** - Automatically calls onNextPage when scrolling to the bottom
- **Sticky headers** - Headers remain visible while scrolling vertically
- **Horizontal scrolling** - Handles wide tables with a custom scrollbar
- **Loading states** - Displays a skeleton loader row when fetching more data
- **Customizable** - Supports custom dimensions and granular style overrides
### Usage
```tsx
import PaginatedTable from '@e-llm-studio/citation/PaginatedTable'
setSelected(checked)}
chevronUpComponent={
```
### Upload Sources
- **RLEF Projects**: Data from Research Learning Ecosystem Framework
- **Google Drive**: Cloud-based file storage
- **Local Files**: Direct file upload from device
- **Saved Datasets**: Previously saved data collections
**Integration Example**:
```tsx
import { useSelectDataContext } from '@e-llm-studio/citation/context/DataSelectedContext'
const MyComponent = () => {
const { selectedRlefResources, saveSelectedDataAsDataSet } = useSelectDataContext()
return (
)
}
```
---
## ReviewPanel
### Overview
ReviewPanel is a flexible and accessible component for displaying and managing a list of items with review status tracking. It allows users to navigate through items, track completion status, and customize rendering and styling. The component supports both controlled and uncontrolled modes, making it suitable for various use cases from simple item lists to complex review workflows.
### Features
- **Flexible item rendering** - Custom `renderItem` prop for complete control over item appearance
- **Expand/collapse functionality** - Collapsible item list with smooth animations
- **Navigation and status tracking** - Previous/next buttons and visual status indicators
- **Controlled and uncontrolled modes** - Flexible state management options
- **Customizable theming** - Light and dark modes using CSS variables
- **Accessibility support** - Full keyboard navigation and ARIA attributes
### Usage
```tsx
import { ReviewPanel } from '@e-llm-studio/citation/ReviewPanel'
const items = [
{ id: '1', label: 'Item 1' },
{ id: '2', label: 'Item 2' },
{ id: '3', label: 'Item 3' },
];
function App() {
return (
` | `{}` | Configuration for default item rendering including textKey, showStatusIcon, and showRightBadge |
| `activeIndex` | `number` | `undefined` | Current active item index (controlled mode). When undefined, component manages state internally |
| `onActiveChange` | `(index: number) => void` | `undefined` | Callback fired when active index changes |
| `expanded` | `boolean` | `undefined` | Whether the item list is expanded (controlled mode). When undefined, component manages state internally |
| `onExpandedChange` | `(expanded: boolean) => void` | `undefined` | Callback fired when expanded state changes |
| `headerLeftSlot` | `ReactNode` | `undefined` | Custom content to display on the left side of the header |
| `headerRightSlot` | `(params) => ReactNode` | `undefined` | Custom content to display on the right side of the header |
| `footerSlot` | `ReactNode` | `undefined` | Custom content to display in the footer section |
| `getItemStatus` | `(item: T, index: number) => ReviewStatus` | `undefined` | Function to determine the review status of each item |
| `theme` | `'light' \| 'dark'` | `'dark'` | Color theme for the component |
| `classes` | `ReviewPanelClasses` | `undefined` | Custom CSS class names for component sections |
| `keyExtractor` | `(item: T, index: number) => string` | `(_, i) => i.toString()` | Function to extract unique key for each item |
| `className` | `string` | `undefined` | Custom CSS class for the root container |
---
## TableCitationContent
### Overview
TableCitationContent is a component for rendering tabular data citations with flexible styling and formatting. It automatically discovers columns from data, handles smart formatting for numbers and booleans, and provides built-in support for highlighting specific rows and columns. The component is designed to display structured data in a clean, organized table format with responsive scrolling and sticky headers, making it ideal for presenting data citations, validation results, and metrics in applications.
### Features
- **Automatic column discovery** - Dynamically generates headers from the keys provided in the data rows
- **Smart data formatting** - Automatically formats numbers to fixed decimals and booleans to visual icons (β/β)
- **Theming via CSS Variables** - Easily customize appearance using CSS custom properties without modifying source code
- **Highlighting for rows and columns** - Built-in support for highlighting specific rows or columns for emphasis
- **Sticky headers and responsive scrolling** - Keeps table headers visible while scrolling through large datasets with horizontal and vertical scroll support
- **Data validation UI** - Built-in support for highlighting "failed" cells using the `markFailed` property
### Usage
```tsx
import TableCitationContent from '@e-llm-studio/citation/TableCitationContent';
const tableData = [
{ id: 1, name: "Project Alpha", status: true },
{ id: 2, name: "Project Beta", status: false },
];
function App() {
return (
console.log('Closed')}
/>
);
}
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `rows` | `Record[]` | Array of objects representing the table data. Required prop. |
| `title` | `string` | The main title displayed in the header. |
| `timestamp` | `string` | Sub-header text for dates or versions. |
| `highlightColumns` | `string[]` | List of column keys to apply a highlight background. |
| `highlightRowIndex` | `number` | Zero-based index of a specific row to highlight. |
| `onClose` | `() => void` | Callback function triggered when the close button is clicked. |
| `CloseIcon` | `React.ElementType` | Custom React component to use as the close icon. |
| `className` | `string` | Custom CSS class to apply to the root container. |
---
## RuleBookCitationWrapper
A React component used to render Rule Book citation content with highlighted citation phrases.
The component resolves Rule Book citation information either from the provided `data.fileDetails` or from `msg.artifactSearchData.ruleBookData.rulebook_citations`. It then locates the corresponding guideline file, fetches its contents, extracts the Rule Book text, and renders it using `TextualGuideLinesComponent`.
### Usage
```tsx
import RuleBookCitationWrapper from "";
` | `Required` | Consumer-provided function that returns a signed URL response. |
| `getFileContent` | `(filePath: string) => Promise` | `Required` | Consumer-provided function that returns the JSON file contents. |
| `themeTokens` | `RuleBookCitationThemeTokens` | `undefined` | CSS custom properties used for theming. |
| `classNames` | `RuleBookCitationClassNames` | `undefined` | Custom CSS classes for internal elements. |
| `styles` | `RuleBookCitationStyles` | `undefined` | Inline style overrides for internal elements. |
---
### RuleBookCitationData
| Property | Type | Description |
|----------|------|-------------|
| `citationNumber` | `number` | Citation number (1-based). Internally converted to a zero-based index. |
| `fileDetails.file_id` | `string` | File identifier corresponding to a guideline attachment. |
| `fileDetails.phrase_to_highlight` | `string` | Phrase highlighted inside the Rule Book content. |
---
### Guidelines
The component supports both of the following formats:
```ts
type Guidelines =
| SourceAttachment[]
| Record;
```
---
### SourceAttachment
| Property | Type | Description |
|----------|------|-------------|
| `id` | `string` | Unique identifier matching the citation `file_id`. |
| `gcsUrl` | `string` | GCS path of the Rule Book file. |
| `name` | `string` | File name used to determine the file extension. |
| `is_guideline_file` | `boolean` | Indicates whether the attachment is a guideline file. |
---
### Notes
- `url` is no longer required
- The component no longer makes network calls directly
- Signed URL resolution and file content fetching must be provided through `getSignedUrl` and `getFileContent`
- Theming can also be applied to the nested `TextualGuideLinesComponent` through `themeTokens`, `classNames`, and `styles`
## SplitterCitationsComponent
A responsive, draggable split-pane layout component for React. Renders two panels side-by-side (horizontal) or stacked (vertical) with a draggable divider. Automatically switches to vertical layout when the container is narrower than 500 px. Supports panel collapse/expand and an optional header with a confidence score badge.
### Usage
```tsx
import SplitterCitationsComponent from '@e-llm-studio/citation/SplitterCitations';
{children}
),
};
```
The citation link in the markdown source looks like:
```
[L3](doc_id=learnings_doc?citationNumber=1&citation_type=IL&citationSource=L3&decisionStrength=100%)
```
### Props
| Prop | Type | Required | Description |
|---|---|---|---|
| `href` | `string` | Yes | Citation link URL. Must contain `citationNumber` as a query param. `decisionStrength` is also read from here for `IL` citations. |
| `citations` | `CitationItem[]` | Yes | Array of citation objects. Each item must have a `customMetaData` object with at least `citation_type` and `citation_number`. |
| `children` | `React.ReactNode` | No | Link text passed from the markdown renderer. Used as the display label for `IL`, `web_citation`, and `image_citation`. |
| `isStreaming` | `boolean` | No | When `true`, renders an inline spinner instead of the resolved citation. |
| `onCitationToggle` | `(keys: string[], adId: string, isOpen: boolean) => void` | No | Callback forwarded to `InstantLearningCitationWrapper` for toggle state tracking. |
| `chatCitationConfig` | `ChatCitationConfig` | No | Full layout + style configuration for `chat_citation` type. See `ChatCitationConfig` below. |
### `CitationItem` shape
```ts
interface CitationItem {
customMetaData: {
citation_type: string; // dispatcher key
citation_number?: number | string;
// scanned_doc_citation
gs_url?: string;
highlighted_coordinates?: { xmin: number; ymin: number; xmax: number; ymax: number }[];
value?: any[]; // pre-built page array (overrides gs_url path)
// IL
il_learning?: any;
link_text?: string;
citation_source?: string;
decision_strength?: string;
// chat_citation
chat_data?: ChatCitationDataItem[];
rule_book_content?: string;
rule_book_highlights?: string[];
relevance_score?: number;
// gpt_citation
data_sources?: string[];
training_data_title?: string[];
paraphrase?: string[];
// web_citation
link?: string;
screenshot_url?: string;
// image_citation / document citations
gs_util_path?: string;
signed_url?: string;
[key: string]: any;
};
}
```
### `ChatCitationConfig` prop
Use this to fully control the `chat_citation` rendering without modifying the component:
```ts
interface ChatCitationConfig {
showRootContainer?: boolean;
rootContainer?: {
title?: string;
relevanceTitle?: string;
icon?: React.ReactNode;
slotStyles?: { title?: CSSProperties; relevanceScore?: CSSProperties; container?: CSSProperties };
};
chatContainer?: {
title?: string;
chatIcon?: React.ReactNode;
highlightColor?: string;
summarizedTab?: { chip?: { isActive?: boolean; show?: boolean; styles?: CSSProperties }; view?: { slotStyles?: any } };
detailedTab?: { chip?: { isActive?: boolean; onClick?: () => void; styles?: CSSProperties }; view?: any };
slotStyles?: { title?: CSSProperties; chatDataContainer?: CSSProperties; outerContainer?: CSSProperties; container?: CSSProperties };
additionalSecondaryActions?: React.ReactNode[];
};
ruleBookContainer?: {
title?: string;
ruleBookIcon?: React.ReactNode;
slotStyles?: { title?: CSSProperties; dataContainer?: CSSProperties; outerContainer?: CSSProperties };
additionalSecondaryActions?: React.ReactNode[];
};
reversePanels?: boolean;
isRenderedCustomComponent?: boolean;
modalContainerStyle?: CSSProperties;
additionalData?: {
RuleBookContainerRatio?: number | string;
RuleBookDetailedViewVerticallyStacked?: boolean;
RuleBookContainerHeight?: number | string;
};
closePreview?: () => void;
selectedIdFromReason?: string | null;
}
```
### Examples
#### Scanned document with highlight boxes
```tsx
const citations = [{
customMetaData: {
citation_type: 'scanned_doc_citation',
citation_number: 1,
gs_url: 'https://storage.example.com/doc-page.png',
highlighted_coordinates: [{ xmin: 100, ymin: 200, xmax: 400, ymax: 250 }],
}
}];
[3]
```
Renders: `[3] β ` (spinner) until `isStreaming` becomes `false`.
### Behavior notes
- Returns `null` silently when `citationNumber` is missing from `href` or no matching citation is found in the `citations` array.
- Unknown `citation_type` values also return `null` (with a `console.error`).
- For `web_citation` without a `screenshot_url`, the component falls back to a plain `` tag.
- `chat_citation` defaults: summarized tab active, detailed tab inactive. Override via `chatCitationConfig.chatContainer.summarizedTab` / `detailedTab`.
---
## Common Use Cases
### RAG (Retrieval Augmented Generation) Applications
```tsx
// Display book citations in RAG responses
Legal Document.pdf}
pdfUrl={legalDocUrl}
currentUserId={user.id}
pdfEditorBackendBaseUrl="https://pdf-backend.example.com"
/>
```
### Data Import and Management
```tsx
// Multi-step data import wizard
// Upload interface wrapper
```
### Performance-Optimized Data Display
```tsx
// Virtualized table for large datasets
\nYou are a {{ORGANIZATION_NAME}} AI Assistant.\n`}
height={300}
selectedTag="Role"
highlightVariable="{{ORGANIZATION_NAME}}"
/>
```
### Props
| Prop Name | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `title` | `string` | β
| β | Title shown in header and fullscreen dialog |
| `content` | `string` | β
| β | Prompt content to display in the editor |
| `description` | `string` | β | β | Description shown in fullscreen left panel |
| `height` | `number` | β | `250` | Height of mini editor in pixels |
| `selectedTag` | `string` | β | β | XML tag name to highlight and scroll to |
| `highlightVariable` | `string` | β | β | Variable string to highlight |
---
## PromptemonViewer
### Overview
A full-featured interface for viewing, editing, and managing Functional Prompt Blocks (FPBs). Combines a detailed left panel showing FPB metadata with a Monaco-based right panel for viewing prompt content and extracted segments. Consumer-controlled β all API calls and state management are handled by the consumer.
### Features
- **Full FPB metadata panel** β Title, description, categories, APBs, applicability, specifications
- **Edit mode** β Inline editing with confirm/cancel flow
- **Segment chips** β Shows extracted `{{variable}}` segments per APB after extraction
- **Monaco editor** β Switches to segmentized content after extraction
- **Extract Segments flow** β Loading overlay while extracting
- **Save FPB** β Enabled after extraction, locks editing after save
- **Category/Sub-category selection** β Consumer provides categories and handles creation
### Usage
```tsx
import PromptemonViewer from '@e-llm-studio/citation/PromptemonViewer'
navigate(-1)}
categories={categories}
subCategories={subCategories}
selectedCategoryId={selectedCategoryId}
selectedSubCategoryId={selectedSubCategoryId}
onCategoryChange={(id) => setSelectedCategoryId(id)}
onSubCategoryChange={(id) => setSelectedSubCategoryId(id)}
/>
```
### Props
| Prop Name | Type | Required | Description |
|-----------|------|----------|-------------|
| `block` | `any` | β
| FPB block object |
| `onBlockUpdate` | `(updatedBlock: any) => void` | β
| Called when user confirms edits |
| `isExtracting` | `boolean` | β
| Shows loading overlay while true |
| `isExtracted` | `boolean` | β
| Shows segment chips and enables Save when true |
| `onExtractSegments` | `() => void` | β
| Called when Extract Segments is clicked |
| `isSaving` | `boolean` | β
| Shows "Saving..." while true |
| `isSaved` | `boolean` | β
| Shows "Saved β" and locks editing when true |
| `onSave` | `() => void` | β
| Called when Save FPB is clicked |
| `onBack` | `() => void` | β
| Called when back/close is clicked |
| `title` | `string` | β | Title shown in top bar (default: "FPB Promptemon") |
| `categories` | `SPBCategory[]` | β
| List of categories |
| `subCategories` | `SPBSubCategory[]` | β
| List of sub-categories |
| `selectedCategoryId` | `string` | β
| Currently selected category ID |
| `selectedSubCategoryId` | `string` | β
| Currently selected sub-category ID |
| `onCategoryChange` | `(id: string) => void` | β
| Called when category is selected |
| `onSubCategoryChange` | `(id: string) => void` | β
| Called when sub-category is selected |
| `onAddCategory` | `(data: { name: string; description: string }) => Promise` | β | Called when new category is created |
| `onAddSubCategory` | `(data: { name: string; description: string; categoryId: string }) => Promise` | β | Called when new sub-category is created |
| `showEditMode` | `boolean` | β | `true` | Show/hide the edit pencil icon and edit mode |
| `showExtractSegments` | `boolean` | β | `true` | Show/hide the Extract Segments button and Show Segments toggle |
## SPBAnalysisPanel
### Overview
A full-featured interface for reviewing the analysis of a System Prompt Block (SPB). Combines a scrollable left panel β Overview, Functionality, Applicability, Specifications, and Dependency Graph β with an optional persistent Monaco-based right panel for viewing the underlying prompt content. Consumer-controlled β all analysis/data fetching is handled by the consumer.
### Features
- **Overview summary** β Collapsible high-level + detailed summary
- **Functionality breakdown** β Nested accordions listing functional areas and their APB references
- **Jump-to-code navigation** β Clicking an APB reference highlights that section in the persistent right-side editor
- **Applicability** β Side-by-side "When to apply" / "When NOT to apply" panels
- **Specifications** β Strict Rules / Input / Output, with automatic `` block extraction in Output
- **Dependency Graph** β Interactive, pannable/zoomable graph of APB relationships
- **Persistent code panel (optional)** β Dark/light toggle and fullscreen expand, togglable via `showCodePanel`
- **Markdown + cognitive decisioning** β Text fields render through a shared markdown renderer supporting citations and expandable "cognitive reasoning" panels
### Usage
```tsx
import SPBAnalysisPanel from '@e-llm-studio/citation/SPBAnalysisPanel'
console.log("Send reminder clicked")}
/>
);
}
```
---
## Props Reference
### Required Props
| Prop | Type | Description |
|------|------|-------------|
| `data` | `object` | Contains `due_at` (ISO date string) and `assignee` object with user info |
| `schedules` | `any[]` | Array of generated reminder schedules |
| `setSchedules` | `function` | State setter for schedules |
| `remainderOwners` | `remainderOwnerValue[]` | Array of owner configuration objects |
| `setRemainderOwners` | `function` | State setter for remainder owners |
| `handelSendNow` | `function` | Callback triggered when "Send Now" button is clicked |
### Optional Props - Configuration
#### Colors Configuration
```typescript
// Label colors (used for assignee chips)
colors?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C11574" },
{ bg: "#EEF4FF", text: "#3538CD" },
{ bg: "#F1F5F9", text: "#344054" },
]
// Statement badge colors
chipColor?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C93185" },
{ bg: "#EEF2FF", text: "#6366F1" },
{ bg: "#FFF4E5", text: "#FF6058" },
]
// Recipients avatar colors - USE HEX VALUES, NOT TAILWIND CLASSES
recipientsColor?: ColorConfig[] = [
{ bg: "#DBEAFE", text: "#1E40AF" }, // β
Correct: Hex colors
{ bg: "#CCFBF1", text: "#0D9488" }, // β
Correct: Hex colors
{ bg: "#DCFCE7", text: "#166534" }, // β
Correct: Hex colors
]
```
#### Text Configuration
```typescript
manualReminderTitle?: string = "Send Manual Reminder Now"
manualReminderDescription?: string = "Immediately notify the assignees about this document."
selectRecipientsLabel?: string = "Select recipients:"
previewEmailButtonLabel?: string = "Preview Email"
sendNowButtonLabel?: string = "Send Now"
reminderSuccessTitle?: string = "Reminder sent successfully!"
reminderSuccessDescription?: string = "Email notification sent assignees."
escalationTitle?: string = "Escalation and Auto Reminder Setup"
escalationDescription?: string = "Configure Auto reminder settings for all assignees."
reminderStartDateLabel?: string = "Reminder Start Date"
documentDueDateLabel?: string = "Document Due Date"
reminderFrequencyLabel?: string = "Reminder Frequency"
escalationRemindersLabel?: string = "Escalation Reminders"
escalationConditionText?: string = "If the document is still pending, start escalation reminders"
daysText?: string = "days"
dueDataAndRepeatText?: string = "due date and repeat every"
```
#### Labels and Assignees
```typescript
// Assignee labels (displayed on chips)
labels?: string[] = ["Assignee 1", "Assignee 2", "Assignee 3"]
// Assignee data
assignees?: AssigneeConfig[] = [
{
id: "1",
name: "Assignee 1",
color: "#C11574",
bg: "#FDF2F8",
startDate: new Date("2026-11-09"),
dueDate: new Date("2026-12-01"),
},
// ... more assignees
]
// Fallback recipients when data.assignee is empty
fallbackRecipients?: RecipientConfig[] = [
{
initials: "OR",
name: "Olivia Rhye",
checked: false,
bg: "bg-blue-100",
text: "text-blue-700",
},
// ... more recipients
]
```
#### Options
```typescript
reminderFrequencyOptions?: string[] = [
"12 hours", "24 hours", "48 hours", "72 hours", "Custom"
]
escalationFrequencyOptions?: string[] = [
"1/2 hour", "1 hour", "4 hours", "6 hours", "12 hours", "Custom"
]
beforeAfterOptions?: string[] = ["After", "Before"]
```
---
## Configuration Examples
### Example 1: Basic Setup with Custom Data
```typescript
const mockData = {
due_at: "2026-12-15",
assignee: {
1: { name: "Alice Johnson" },
2: { name: "Bob Smith" },
3: { name: "Carol White" },
},
};
const customAssignees = [
{ id: "1", name: "Alice Johnson", color: "#C11574", bg: "#FDF2F8", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "2", name: "Bob Smith", color: "#3538CD", bg: "#EEF4FF", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "3", name: "Carol White", color: "#FF6058", bg: "#FFF7ED", startDate: new Date(), dueDate: new Date("2026-12-15") },
];
{
console.log("Reminders sent!");
// API call to send reminders
}}
/>
```
### Example 2: Custom Colors (Correct Way)
```typescript
// β
CORRECT: Use hex colors for recipientsColor
const customRecipientsColor = [
{ bg: "#E0E7FF", text: "#3730A3" }, // Indigo
{ bg: "#FDF2F8", text: "#BE185D" }, // Rose
{ bg: "#ECFDF5", text: "#047857" }, // Emerald
];
{
// Send reminders to API
console.log("Sending reminders...");
}}
/>
```
---
## Colors and Styling
### β οΈ IMPORTANT: Color Format Issue & Fix
**The Problem:**
The current code uses Tailwind class names for `recipientsColor`:
```typescript
// β WRONG - These are Tailwind class names
recipientsColor = [
{ bg: "bg-blue-100", text: "text-blue-700" }, // Won't work in inline styles!
]
```
## Development & Contribution
Contributions are welcome! This guide walks you through making changes to the citation library.
### Prerequisites
- **Node.js & npm** installed
- **Git** installed
- Basic familiarity with Git and the command line
### Development Setup
1. **Fork & Clone the Repository**
```bash
git clone https://github.com//citation.git
cd citation
```
2. **Install Dependencies**
```bash
npm install
```
3. **Link the Library Locally** (Optional - for testing before publishing)
```bash
git checkout -b my-change-branch
npm link
# In your test project folder
npm link @e-llm-studio/citation
```
4. **Build the Library**
```bash
npm run build
```
5. **Test Locally**
- Start or build your test project to verify changes work as expected
- Ensure all existing tests pass
### Making Changes
- Edit source files in the `src/` directory
- Add or update tests as needed
- Follow the existing code style and formatting guidelines
- Ensure your changes are well-documented with comments
### Submitting Changes
1. **Commit Your Changes**
```bash
git add .
git commit -m "fix: describe your change"
git push origin my-change-branch
```
2. **Submit a Pull Request**
- Open a pull request on GitHub with a clear description of your changes
- Reference any related issues
- Ensure all tests pass before submitting
### Versioning
When publishing updates, follow [Semantic Versioning](https://semver.org/):
```bash
npm version patch # for bug fixes
npm version minor # for new features
npm version major # for breaking changes
```
For more details, refer to the [npm version documentation](https://docs.npmjs.com/cli/v8/commands/npm-version).
### Publishing to npm
> Ensure you have npm account permissions and are on the correct branch.
```bash
npm login
npm publish --access public
```
After publishing, verify the package:
```bash
npm unlink @e-llm-studio/citation
npm install @e-llm-studio/citation@latest
```
### Additional Tips
- Use `npm pack` to generate a `.tgz` and test installation before publishing
- Open a Pull Request when ready for review
- We appreciate your help in improving the citation library through bug fixes, feature enhancements, and documentation improvements
---
## License
This library is released under the MIT License. See the LICENSE file for more details.
The license information is also available in the `citation/package.json` file under the 'license' field.
` patterns with animated popup regions
### Usage
```tsx
import InstantLearningCitationComponent from '@e-llm-studio/citation/InstantLearningCitation'
console.log({ keys, adId, isOpen })}
isStreaming={false}
/>
```
Citation links in the markdown must follow this format:
```
[LinkText](doc_id=learnings_doc?citationNumber=1&citation_type=IL&citationSource=L1)
```
The `citationNumber` value is matched against `customMetaData.citation_number` in the `citations` array. When `citation_type=IL` and `il_learning` data is present, the link renders as an IL pill; otherwise it falls back to a plain anchor.
**With streaming:**
```tsx
`/`` tags |
| `citations` | `any[]` | β | Citation metadata array; each item matched by `customMetaData.citation_number`. For IL pills, `citation_type` must be `"IL"` and `il_learning` must be present |
| `onCitationToggle` | `(keys: string[], adId: string, isOpen: boolean) => void` | β
| Fired when a citation pill is opened or closed |
| `isStreaming` | `boolean` | β | When `true`, renders an animated slash-loader instead of citation pills (default: `false`) |
| `highlightedText` | `string` | β | Phrase to highlight in yellow across all rendered paragraph, list, and code text |
| `readOnly` | `boolean` | β | Reserved for future editor integration (default: `false`) |
| `height` | `string \| number` | β | Optional container height |
---
# Other Components
## Bookemon
### Overview
Bookemon is a composable, dialog-based React UI component designed for deep book inspection. It features a resizable split-panel layout that allows users to browse detailed metadata while simultaneously viewing and interacting with specific manuscript content. The component is designed to be highly customizable via style injections and handles complex logic for smart text citation, server-side pagination, and focus-mode blurring.
### Features
- **Resizable split-panel layout** - Left panel for metadata, right panel for content preview
- **Deep book inspection** - Browse detailed metadata including overview, elements, copyrights, and awards
- **Smart text citation** - Automatically highlights and focuses on specific text passages
- **Server-side pagination** - Efficiently handles large datasets with pagination support
- **Focus-mode blurring** - Blur non-highlighted text to focus reader attention on relevant content
- **Highly customizable styling** - Inject custom styles for layout containers and citation elements
- **Interactive accordions** - Collapsible sections for book metadata organization
### Usage
```tsx
import Bookemon from '@e-llm-studio/citation/Bookemon'
` tags |
| `citations` | `any[]` | β | Citation metadata array; each item matched by `customMetaData.citation_number`. For IL pills, `citation_type` must be `"IL"` and `il_learning` must be present |
| `onCitationToggle` | `(keys: string[], adId: string, isOpen: boolean) => void` | β
| Fired when a citation pill is opened or closed |
| `isStreaming` | `boolean` | β | When `true`, renders an animated slash-loader instead of citation pills (default: `false`) |
| `highlightedText` | `string` | β | Phrase to highlight in yellow across all rendered paragraph, list, and code text |
| `readOnly` | `boolean` | β | Reserved for future editor integration (default: `false`) |
| `height` | `string \| number` | β | Optional container height |
---
# Other Components
## Bookemon
### Overview
Bookemon is a composable, dialog-based React UI component designed for deep book inspection. It features a resizable split-panel layout that allows users to browse detailed metadata while simultaneously viewing and interacting with specific manuscript content. The component is designed to be highly customizable via style injections and handles complex logic for smart text citation, server-side pagination, and focus-mode blurring.
### Features
- **Resizable split-panel layout** - Left panel for metadata, right panel for content preview
- **Deep book inspection** - Browse detailed metadata including overview, elements, copyrights, and awards
- **Smart text citation** - Automatically highlights and focuses on specific text passages
- **Server-side pagination** - Efficiently handles large datasets with pagination support
- **Focus-mode blurring** - Blur non-highlighted text to focus reader attention on relevant content
- **Highly customizable styling** - Inject custom styles for layout containers and citation elements
- **Interactive accordions** - Collapsible sections for book metadata organization
### Usage
```tsx
import Bookemon from '@e-llm-studio/citation/Bookemon'
setIsOpen(false)}
data={bookData}
getHighlightContent={fetchContent}
isBlurToggleVisible={true}
/>
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `open` | `boolean` | Controls the visibility of the dialog |
| `onClose` | `() => void` | Callback function triggered when the dialog is closed |
| `data` | `BookemonData` | Object containing book metadata and elements |
| `getHighlightContent` | `(chunkIds: string[]) => Promise` | Async handler to fetch content for highlighting |
| `handleFetchManuscriptElements` | `(params: FetchElementsParams) => Promise` | Async handler for fetching paginated manuscript elements |
| `isBookemon` | `boolean` | Default: true. Feature flag for Bookemon-specific behavior |
| `isBlurToggleVisible` | `boolean` | Default: false. Shows the blur switch in header |
| `isNonHighlightedBlur` | `boolean` | Default: false. Initial blur state |
| `showComingSoon` | `boolean` | Default: false. Gates the UI with coming soon overlay |
| `customStyle` | `BookemonCustomStyles` | Optional custom styles for layout and citation elements |
---
## DatagestMon
### Overview
DatagestMon is a React component for monitoring and displaying structured data from processing stages (analysis, transform, rag). It provides a comprehensive interface that combines dynamic data visualization with an integrated EPUB viewer. The component uses Material-UI Dialog for display and includes a built-in EPUB reader powered by react-reader.
### Features
- **Multi-stage data display** - Visualize data from analysis, transform, and rag stages
- **Processed and error data** - Display both successful processing results and error information
- **Integrated EPUB viewer** - View associated EPUB content side-by-side with data
- **Dynamic data visualization** - Automatically render various data types
- **Material-UI Dialog** - Professional modal presentation
- **Graceful error handling** - Handle missing or malformed data gracefully
### Usage
```tsx
import DatagestMon from '@e-llm-studio/citation/DatagestMon'
const pipelineData = {
"analysis": {
"processed_data": {
"summary": "Analysis completed",
"functions": "15 functions extracted"
},
"error_data": {
"rate_limit_exceeded": true
}
},
"transform": {
"processed_data": {
"embeddings": 123,
"transformed_records": 1200
},
"error_data": {}
}
}
setIsOpen(false)}
data={pipelineData}
url="https://example.com/document.epub"
/>
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `open` | `boolean` | Controls whether the dialog is open or closed |
| `onClose` | `function` | Callback function triggered when the dialog is closed |
| `data` | `object` | Object containing structured data from processing stages |
| `url` | `string` | Optional URL of the EPUB file to display in the viewer |
---
## DataSelector
### Overview
DataSelector is a robust, multi-step wizard designed to handle complex data import workflows. It acts as a central hub where users can select data from various sourcesβincluding remote RLEF projects, historical copilot data, saved datasets, or local file uploadsβand aggregates them into a unified selection state. It features a built-in state machine for navigation, breadcrumb management, and context-driven state sharing.
### Features
- **Multi-step wizard interface** - Guide users through complex data selection workflows
- **Multiple data sources** - Support for RLEF projects, historical data, saved datasets, and local files
- **Breadcrumb navigation** - Easy navigation through wizard steps
- **Server-side pagination** - Efficiently handle large datasets
- **Search and filtering** - Find data quickly with built-in search
- **State machine navigation** - Robust step management
- **Context-driven state sharing** - Centralized state management via React Context
### Usage
```tsx
import { DataSelectedContextProvider } from '@e-llm-studio/citation/context/DataSelectedContext'
import DataSelector from '@e-llm-studio/citation/DataSelector'
```
**Wizard Steps**:
1. **Data source selection** - Choose from RLEF, Local, Google Drive, Saved Datasets
2. **Project/task selection** - Select specific projects or tasks
3. **Data collection selection** - Choose from available data collections
4. **Data point selection** - Select specific data points within collections
5. **Final review** - Review and confirm selections
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `selectedRlefResources` | `Array` | Initial array of selected remote resources |
| `setSelectedRlefResources` | `Function` | State setter for remote resources |
| `selectedLocalFiles` | `Array` | Initial array of selected local files |
| `setSelectedLocalFiles` | `Function` | State setter for local files |
| `pageTitle` | `string` | Customizes the header text |
| `renderDefaultActionsFooter` | `boolean` | Show/hide the default "Next" button |
---
## PaginatedTable
### Overview
PaginatedTable is a high-performance React component designed to display large datasets efficiently. It leverages virtualization (via react-window) to render only the visible rows, ensuring smooth scrolling even with thousands of records. It also supports infinite scrolling, automatically triggering a "load more" callback when the user scrolls near the bottom.
### Features
- **Virtualization** - Efficiently renders massive datasets using windowing
- **Infinite scroll** - Automatically calls onNextPage when scrolling to the bottom
- **Sticky headers** - Headers remain visible while scrolling vertically
- **Horizontal scrolling** - Handles wide tables with a custom scrollbar
- **Loading states** - Displays a skeleton loader row when fetching more data
- **Customizable** - Supports custom dimensions and granular style overrides
### Usage
```tsx
import PaginatedTable from '@e-llm-studio/citation/PaginatedTable'
setSelected(checked)}
chevronUpComponent={
```
### Upload Sources
- **RLEF Projects**: Data from Research Learning Ecosystem Framework
- **Google Drive**: Cloud-based file storage
- **Local Files**: Direct file upload from device
- **Saved Datasets**: Previously saved data collections
**Integration Example**:
```tsx
import { useSelectDataContext } from '@e-llm-studio/citation/context/DataSelectedContext'
const MyComponent = () => {
const { selectedRlefResources, saveSelectedDataAsDataSet } = useSelectDataContext()
return (
)
}
```
---
## ReviewPanel
### Overview
ReviewPanel is a flexible and accessible component for displaying and managing a list of items with review status tracking. It allows users to navigate through items, track completion status, and customize rendering and styling. The component supports both controlled and uncontrolled modes, making it suitable for various use cases from simple item lists to complex review workflows.
### Features
- **Flexible item rendering** - Custom `renderItem` prop for complete control over item appearance
- **Expand/collapse functionality** - Collapsible item list with smooth animations
- **Navigation and status tracking** - Previous/next buttons and visual status indicators
- **Controlled and uncontrolled modes** - Flexible state management options
- **Customizable theming** - Light and dark modes using CSS variables
- **Accessibility support** - Full keyboard navigation and ARIA attributes
### Usage
```tsx
import { ReviewPanel } from '@e-llm-studio/citation/ReviewPanel'
const items = [
{ id: '1', label: 'Item 1' },
{ id: '2', label: 'Item 2' },
{ id: '3', label: 'Item 3' },
];
function App() {
return (
` | `{}` | Configuration for default item rendering including textKey, showStatusIcon, and showRightBadge |
| `activeIndex` | `number` | `undefined` | Current active item index (controlled mode). When undefined, component manages state internally |
| `onActiveChange` | `(index: number) => void` | `undefined` | Callback fired when active index changes |
| `expanded` | `boolean` | `undefined` | Whether the item list is expanded (controlled mode). When undefined, component manages state internally |
| `onExpandedChange` | `(expanded: boolean) => void` | `undefined` | Callback fired when expanded state changes |
| `headerLeftSlot` | `ReactNode` | `undefined` | Custom content to display on the left side of the header |
| `headerRightSlot` | `(params) => ReactNode` | `undefined` | Custom content to display on the right side of the header |
| `footerSlot` | `ReactNode` | `undefined` | Custom content to display in the footer section |
| `getItemStatus` | `(item: T, index: number) => ReviewStatus` | `undefined` | Function to determine the review status of each item |
| `theme` | `'light' \| 'dark'` | `'dark'` | Color theme for the component |
| `classes` | `ReviewPanelClasses` | `undefined` | Custom CSS class names for component sections |
| `keyExtractor` | `(item: T, index: number) => string` | `(_, i) => i.toString()` | Function to extract unique key for each item |
| `className` | `string` | `undefined` | Custom CSS class for the root container |
---
## TableCitationContent
### Overview
TableCitationContent is a component for rendering tabular data citations with flexible styling and formatting. It automatically discovers columns from data, handles smart formatting for numbers and booleans, and provides built-in support for highlighting specific rows and columns. The component is designed to display structured data in a clean, organized table format with responsive scrolling and sticky headers, making it ideal for presenting data citations, validation results, and metrics in applications.
### Features
- **Automatic column discovery** - Dynamically generates headers from the keys provided in the data rows
- **Smart data formatting** - Automatically formats numbers to fixed decimals and booleans to visual icons (β/β)
- **Theming via CSS Variables** - Easily customize appearance using CSS custom properties without modifying source code
- **Highlighting for rows and columns** - Built-in support for highlighting specific rows or columns for emphasis
- **Sticky headers and responsive scrolling** - Keeps table headers visible while scrolling through large datasets with horizontal and vertical scroll support
- **Data validation UI** - Built-in support for highlighting "failed" cells using the `markFailed` property
### Usage
```tsx
import TableCitationContent from '@e-llm-studio/citation/TableCitationContent';
const tableData = [
{ id: 1, name: "Project Alpha", status: true },
{ id: 2, name: "Project Beta", status: false },
];
function App() {
return (
console.log('Closed')}
/>
);
}
```
### Props
| Prop Name | Type | Description |
|-----------|------|-------------|
| `rows` | `Record[]` | Array of objects representing the table data. Required prop. |
| `title` | `string` | The main title displayed in the header. |
| `timestamp` | `string` | Sub-header text for dates or versions. |
| `highlightColumns` | `string[]` | List of column keys to apply a highlight background. |
| `highlightRowIndex` | `number` | Zero-based index of a specific row to highlight. |
| `onClose` | `() => void` | Callback function triggered when the close button is clicked. |
| `CloseIcon` | `React.ElementType` | Custom React component to use as the close icon. |
| `className` | `string` | Custom CSS class to apply to the root container. |
---
## RuleBookCitationWrapper
A React component used to render Rule Book citation content with highlighted citation phrases.
The component resolves Rule Book citation information either from the provided `data.fileDetails` or from `msg.artifactSearchData.ruleBookData.rulebook_citations`. It then locates the corresponding guideline file, fetches its contents, extracts the Rule Book text, and renders it using `TextualGuideLinesComponent`.
### Usage
```tsx
import RuleBookCitationWrapper from "";
` | `Required` | Consumer-provided function that returns a signed URL response. |
| `getFileContent` | `(filePath: string) => Promise` | `Required` | Consumer-provided function that returns the JSON file contents. |
| `themeTokens` | `RuleBookCitationThemeTokens` | `undefined` | CSS custom properties used for theming. |
| `classNames` | `RuleBookCitationClassNames` | `undefined` | Custom CSS classes for internal elements. |
| `styles` | `RuleBookCitationStyles` | `undefined` | Inline style overrides for internal elements. |
---
### RuleBookCitationData
| Property | Type | Description |
|----------|------|-------------|
| `citationNumber` | `number` | Citation number (1-based). Internally converted to a zero-based index. |
| `fileDetails.file_id` | `string` | File identifier corresponding to a guideline attachment. |
| `fileDetails.phrase_to_highlight` | `string` | Phrase highlighted inside the Rule Book content. |
---
### Guidelines
The component supports both of the following formats:
```ts
type Guidelines =
| SourceAttachment[]
| Record;
```
---
### SourceAttachment
| Property | Type | Description |
|----------|------|-------------|
| `id` | `string` | Unique identifier matching the citation `file_id`. |
| `gcsUrl` | `string` | GCS path of the Rule Book file. |
| `name` | `string` | File name used to determine the file extension. |
| `is_guideline_file` | `boolean` | Indicates whether the attachment is a guideline file. |
---
### Notes
- `url` is no longer required
- The component no longer makes network calls directly
- Signed URL resolution and file content fetching must be provided through `getSignedUrl` and `getFileContent`
- Theming can also be applied to the nested `TextualGuideLinesComponent` through `themeTokens`, `classNames`, and `styles`
## SplitterCitationsComponent
A responsive, draggable split-pane layout component for React. Renders two panels side-by-side (horizontal) or stacked (vertical) with a draggable divider. Automatically switches to vertical layout when the container is narrower than 500 px. Supports panel collapse/expand and an optional header with a confidence score badge.
### Usage
```tsx
import SplitterCitationsComponent from '@e-llm-studio/citation/SplitterCitations';
{children}
),
};
```
The citation link in the markdown source looks like:
```
[L3](doc_id=learnings_doc?citationNumber=1&citation_type=IL&citationSource=L3&decisionStrength=100%)
```
### Props
| Prop | Type | Required | Description |
|---|---|---|---|
| `href` | `string` | Yes | Citation link URL. Must contain `citationNumber` as a query param. `decisionStrength` is also read from here for `IL` citations. |
| `citations` | `CitationItem[]` | Yes | Array of citation objects. Each item must have a `customMetaData` object with at least `citation_type` and `citation_number`. |
| `children` | `React.ReactNode` | No | Link text passed from the markdown renderer. Used as the display label for `IL`, `web_citation`, and `image_citation`. |
| `isStreaming` | `boolean` | No | When `true`, renders an inline spinner instead of the resolved citation. |
| `onCitationToggle` | `(keys: string[], adId: string, isOpen: boolean) => void` | No | Callback forwarded to `InstantLearningCitationWrapper` for toggle state tracking. |
| `chatCitationConfig` | `ChatCitationConfig` | No | Full layout + style configuration for `chat_citation` type. See `ChatCitationConfig` below. |
### `CitationItem` shape
```ts
interface CitationItem {
customMetaData: {
citation_type: string; // dispatcher key
citation_number?: number | string;
// scanned_doc_citation
gs_url?: string;
highlighted_coordinates?: { xmin: number; ymin: number; xmax: number; ymax: number }[];
value?: any[]; // pre-built page array (overrides gs_url path)
// IL
il_learning?: any;
link_text?: string;
citation_source?: string;
decision_strength?: string;
// chat_citation
chat_data?: ChatCitationDataItem[];
rule_book_content?: string;
rule_book_highlights?: string[];
relevance_score?: number;
// gpt_citation
data_sources?: string[];
training_data_title?: string[];
paraphrase?: string[];
// web_citation
link?: string;
screenshot_url?: string;
// image_citation / document citations
gs_util_path?: string;
signed_url?: string;
[key: string]: any;
};
}
```
### `ChatCitationConfig` prop
Use this to fully control the `chat_citation` rendering without modifying the component:
```ts
interface ChatCitationConfig {
showRootContainer?: boolean;
rootContainer?: {
title?: string;
relevanceTitle?: string;
icon?: React.ReactNode;
slotStyles?: { title?: CSSProperties; relevanceScore?: CSSProperties; container?: CSSProperties };
};
chatContainer?: {
title?: string;
chatIcon?: React.ReactNode;
highlightColor?: string;
summarizedTab?: { chip?: { isActive?: boolean; show?: boolean; styles?: CSSProperties }; view?: { slotStyles?: any } };
detailedTab?: { chip?: { isActive?: boolean; onClick?: () => void; styles?: CSSProperties }; view?: any };
slotStyles?: { title?: CSSProperties; chatDataContainer?: CSSProperties; outerContainer?: CSSProperties; container?: CSSProperties };
additionalSecondaryActions?: React.ReactNode[];
};
ruleBookContainer?: {
title?: string;
ruleBookIcon?: React.ReactNode;
slotStyles?: { title?: CSSProperties; dataContainer?: CSSProperties; outerContainer?: CSSProperties };
additionalSecondaryActions?: React.ReactNode[];
};
reversePanels?: boolean;
isRenderedCustomComponent?: boolean;
modalContainerStyle?: CSSProperties;
additionalData?: {
RuleBookContainerRatio?: number | string;
RuleBookDetailedViewVerticallyStacked?: boolean;
RuleBookContainerHeight?: number | string;
};
closePreview?: () => void;
selectedIdFromReason?: string | null;
}
```
### Examples
#### Scanned document with highlight boxes
```tsx
const citations = [{
customMetaData: {
citation_type: 'scanned_doc_citation',
citation_number: 1,
gs_url: 'https://storage.example.com/doc-page.png',
highlighted_coordinates: [{ xmin: 100, ymin: 200, xmax: 400, ymax: 250 }],
}
}];
[3]
```
Renders: `[3] β ` (spinner) until `isStreaming` becomes `false`.
### Behavior notes
- Returns `null` silently when `citationNumber` is missing from `href` or no matching citation is found in the `citations` array.
- Unknown `citation_type` values also return `null` (with a `console.error`).
- For `web_citation` without a `screenshot_url`, the component falls back to a plain `` tag.
- `chat_citation` defaults: summarized tab active, detailed tab inactive. Override via `chatCitationConfig.chatContainer.summarizedTab` / `detailedTab`.
---
## Common Use Cases
### RAG (Retrieval Augmented Generation) Applications
```tsx
// Display book citations in RAG responses
Legal Document.pdf}
pdfUrl={legalDocUrl}
currentUserId={user.id}
pdfEditorBackendBaseUrl="https://pdf-backend.example.com"
/>
```
### Data Import and Management
```tsx
// Multi-step data import wizard
// Upload interface wrapper
```
### Performance-Optimized Data Display
```tsx
// Virtualized table for large datasets
\nYou are a {{ORGANIZATION_NAME}} AI Assistant.\n`}
height={300}
selectedTag="Role"
highlightVariable="{{ORGANIZATION_NAME}}"
/>
```
### Props
| Prop Name | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `title` | `string` | β
| β | Title shown in header and fullscreen dialog |
| `content` | `string` | β
| β | Prompt content to display in the editor |
| `description` | `string` | β | β | Description shown in fullscreen left panel |
| `height` | `number` | β | `250` | Height of mini editor in pixels |
| `selectedTag` | `string` | β | β | XML tag name to highlight and scroll to |
| `highlightVariable` | `string` | β | β | Variable string to highlight |
---
## PromptemonViewer
### Overview
A full-featured interface for viewing, editing, and managing Functional Prompt Blocks (FPBs). Combines a detailed left panel showing FPB metadata with a Monaco-based right panel for viewing prompt content and extracted segments. Consumer-controlled β all API calls and state management are handled by the consumer.
### Features
- **Full FPB metadata panel** β Title, description, categories, APBs, applicability, specifications
- **Edit mode** β Inline editing with confirm/cancel flow
- **Segment chips** β Shows extracted `{{variable}}` segments per APB after extraction
- **Monaco editor** β Switches to segmentized content after extraction
- **Extract Segments flow** β Loading overlay while extracting
- **Save FPB** β Enabled after extraction, locks editing after save
- **Category/Sub-category selection** β Consumer provides categories and handles creation
### Usage
```tsx
import PromptemonViewer from '@e-llm-studio/citation/PromptemonViewer'
navigate(-1)}
categories={categories}
subCategories={subCategories}
selectedCategoryId={selectedCategoryId}
selectedSubCategoryId={selectedSubCategoryId}
onCategoryChange={(id) => setSelectedCategoryId(id)}
onSubCategoryChange={(id) => setSelectedSubCategoryId(id)}
/>
```
### Props
| Prop Name | Type | Required | Description |
|-----------|------|----------|-------------|
| `block` | `any` | β
| FPB block object |
| `onBlockUpdate` | `(updatedBlock: any) => void` | β
| Called when user confirms edits |
| `isExtracting` | `boolean` | β
| Shows loading overlay while true |
| `isExtracted` | `boolean` | β
| Shows segment chips and enables Save when true |
| `onExtractSegments` | `() => void` | β
| Called when Extract Segments is clicked |
| `isSaving` | `boolean` | β
| Shows "Saving..." while true |
| `isSaved` | `boolean` | β
| Shows "Saved β" and locks editing when true |
| `onSave` | `() => void` | β
| Called when Save FPB is clicked |
| `onBack` | `() => void` | β
| Called when back/close is clicked |
| `title` | `string` | β | Title shown in top bar (default: "FPB Promptemon") |
| `categories` | `SPBCategory[]` | β
| List of categories |
| `subCategories` | `SPBSubCategory[]` | β
| List of sub-categories |
| `selectedCategoryId` | `string` | β
| Currently selected category ID |
| `selectedSubCategoryId` | `string` | β
| Currently selected sub-category ID |
| `onCategoryChange` | `(id: string) => void` | β
| Called when category is selected |
| `onSubCategoryChange` | `(id: string) => void` | β
| Called when sub-category is selected |
| `onAddCategory` | `(data: { name: string; description: string }) => Promise` | β | Called when new category is created |
| `onAddSubCategory` | `(data: { name: string; description: string; categoryId: string }) => Promise` | β | Called when new sub-category is created |
| `showEditMode` | `boolean` | β | `true` | Show/hide the edit pencil icon and edit mode |
| `showExtractSegments` | `boolean` | β | `true` | Show/hide the Extract Segments button and Show Segments toggle |
## SPBAnalysisPanel
### Overview
A full-featured interface for reviewing the analysis of a System Prompt Block (SPB). Combines a scrollable left panel β Overview, Functionality, Applicability, Specifications, and Dependency Graph β with an optional persistent Monaco-based right panel for viewing the underlying prompt content. Consumer-controlled β all analysis/data fetching is handled by the consumer.
### Features
- **Overview summary** β Collapsible high-level + detailed summary
- **Functionality breakdown** β Nested accordions listing functional areas and their APB references
- **Jump-to-code navigation** β Clicking an APB reference highlights that section in the persistent right-side editor
- **Applicability** β Side-by-side "When to apply" / "When NOT to apply" panels
- **Specifications** β Strict Rules / Input / Output, with automatic `` block extraction in Output
- **Dependency Graph** β Interactive, pannable/zoomable graph of APB relationships
- **Persistent code panel (optional)** β Dark/light toggle and fullscreen expand, togglable via `showCodePanel`
- **Markdown + cognitive decisioning** β Text fields render through a shared markdown renderer supporting citations and expandable "cognitive reasoning" panels
### Usage
```tsx
import SPBAnalysisPanel from '@e-llm-studio/citation/SPBAnalysisPanel'
console.log("Send reminder clicked")}
/>
);
}
```
---
## Props Reference
### Required Props
| Prop | Type | Description |
|------|------|-------------|
| `data` | `object` | Contains `due_at` (ISO date string) and `assignee` object with user info |
| `schedules` | `any[]` | Array of generated reminder schedules |
| `setSchedules` | `function` | State setter for schedules |
| `remainderOwners` | `remainderOwnerValue[]` | Array of owner configuration objects |
| `setRemainderOwners` | `function` | State setter for remainder owners |
| `handelSendNow` | `function` | Callback triggered when "Send Now" button is clicked |
### Optional Props - Configuration
#### Colors Configuration
```typescript
// Label colors (used for assignee chips)
colors?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C11574" },
{ bg: "#EEF4FF", text: "#3538CD" },
{ bg: "#F1F5F9", text: "#344054" },
]
// Statement badge colors
chipColor?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C93185" },
{ bg: "#EEF2FF", text: "#6366F1" },
{ bg: "#FFF4E5", text: "#FF6058" },
]
// Recipients avatar colors - USE HEX VALUES, NOT TAILWIND CLASSES
recipientsColor?: ColorConfig[] = [
{ bg: "#DBEAFE", text: "#1E40AF" }, // β
Correct: Hex colors
{ bg: "#CCFBF1", text: "#0D9488" }, // β
Correct: Hex colors
{ bg: "#DCFCE7", text: "#166534" }, // β
Correct: Hex colors
]
```
#### Text Configuration
```typescript
manualReminderTitle?: string = "Send Manual Reminder Now"
manualReminderDescription?: string = "Immediately notify the assignees about this document."
selectRecipientsLabel?: string = "Select recipients:"
previewEmailButtonLabel?: string = "Preview Email"
sendNowButtonLabel?: string = "Send Now"
reminderSuccessTitle?: string = "Reminder sent successfully!"
reminderSuccessDescription?: string = "Email notification sent assignees."
escalationTitle?: string = "Escalation and Auto Reminder Setup"
escalationDescription?: string = "Configure Auto reminder settings for all assignees."
reminderStartDateLabel?: string = "Reminder Start Date"
documentDueDateLabel?: string = "Document Due Date"
reminderFrequencyLabel?: string = "Reminder Frequency"
escalationRemindersLabel?: string = "Escalation Reminders"
escalationConditionText?: string = "If the document is still pending, start escalation reminders"
daysText?: string = "days"
dueDataAndRepeatText?: string = "due date and repeat every"
```
#### Labels and Assignees
```typescript
// Assignee labels (displayed on chips)
labels?: string[] = ["Assignee 1", "Assignee 2", "Assignee 3"]
// Assignee data
assignees?: AssigneeConfig[] = [
{
id: "1",
name: "Assignee 1",
color: "#C11574",
bg: "#FDF2F8",
startDate: new Date("2026-11-09"),
dueDate: new Date("2026-12-01"),
},
// ... more assignees
]
// Fallback recipients when data.assignee is empty
fallbackRecipients?: RecipientConfig[] = [
{
initials: "OR",
name: "Olivia Rhye",
checked: false,
bg: "bg-blue-100",
text: "text-blue-700",
},
// ... more recipients
]
```
#### Options
```typescript
reminderFrequencyOptions?: string[] = [
"12 hours", "24 hours", "48 hours", "72 hours", "Custom"
]
escalationFrequencyOptions?: string[] = [
"1/2 hour", "1 hour", "4 hours", "6 hours", "12 hours", "Custom"
]
beforeAfterOptions?: string[] = ["After", "Before"]
```
---
## Configuration Examples
### Example 1: Basic Setup with Custom Data
```typescript
const mockData = {
due_at: "2026-12-15",
assignee: {
1: { name: "Alice Johnson" },
2: { name: "Bob Smith" },
3: { name: "Carol White" },
},
};
const customAssignees = [
{ id: "1", name: "Alice Johnson", color: "#C11574", bg: "#FDF2F8", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "2", name: "Bob Smith", color: "#3538CD", bg: "#EEF4FF", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "3", name: "Carol White", color: "#FF6058", bg: "#FFF7ED", startDate: new Date(), dueDate: new Date("2026-12-15") },
];
{
console.log("Reminders sent!");
// API call to send reminders
}}
/>
```
### Example 2: Custom Colors (Correct Way)
```typescript
// β
CORRECT: Use hex colors for recipientsColor
const customRecipientsColor = [
{ bg: "#E0E7FF", text: "#3730A3" }, // Indigo
{ bg: "#FDF2F8", text: "#BE185D" }, // Rose
{ bg: "#ECFDF5", text: "#047857" }, // Emerald
];
{
// Send reminders to API
console.log("Sending reminders...");
}}
/>
```
---
## Colors and Styling
### β οΈ IMPORTANT: Color Format Issue & Fix
**The Problem:**
The current code uses Tailwind class names for `recipientsColor`:
```typescript
// β WRONG - These are Tailwind class names
recipientsColor = [
{ bg: "bg-blue-100", text: "text-blue-700" }, // Won't work in inline styles!
]
```
## Development & Contribution
Contributions are welcome! This guide walks you through making changes to the citation library.
### Prerequisites
- **Node.js & npm** installed
- **Git** installed
- Basic familiarity with Git and the command line
### Development Setup
1. **Fork & Clone the Repository**
```bash
git clone https://github.com//citation.git
cd citation
```
2. **Install Dependencies**
```bash
npm install
```
3. **Link the Library Locally** (Optional - for testing before publishing)
```bash
git checkout -b my-change-branch
npm link
# In your test project folder
npm link @e-llm-studio/citation
```
4. **Build the Library**
```bash
npm run build
```
5. **Test Locally**
- Start or build your test project to verify changes work as expected
- Ensure all existing tests pass
### Making Changes
- Edit source files in the `src/` directory
- Add or update tests as needed
- Follow the existing code style and formatting guidelines
- Ensure your changes are well-documented with comments
### Submitting Changes
1. **Commit Your Changes**
```bash
git add .
git commit -m "fix: describe your change"
git push origin my-change-branch
```
2. **Submit a Pull Request**
- Open a pull request on GitHub with a clear description of your changes
- Reference any related issues
- Ensure all tests pass before submitting
### Versioning
When publishing updates, follow [Semantic Versioning](https://semver.org/):
```bash
npm version patch # for bug fixes
npm version minor # for new features
npm version major # for breaking changes
```
For more details, refer to the [npm version documentation](https://docs.npmjs.com/cli/v8/commands/npm-version).
### Publishing to npm
> Ensure you have npm account permissions and are on the correct branch.
```bash
npm login
npm publish --access public
```
After publishing, verify the package:
```bash
npm unlink @e-llm-studio/citation
npm install @e-llm-studio/citation@latest
```
### Additional Tips
- Use `npm pack` to generate a `.tgz` and test installation before publishing
- Open a Pull Request when ready for review
- We appreciate your help in improving the citation library through bug fixes, feature enhancements, and documentation improvements
---
## License
This library is released under the MIT License. See the LICENSE file for more details.
The license information is also available in the `citation/package.json` file under the 'license' field.
` block extraction in Output
- **Dependency Graph** β Interactive, pannable/zoomable graph of APB relationships
- **Persistent code panel (optional)** β Dark/light toggle and fullscreen expand, togglable via `showCodePanel`
- **Markdown + cognitive decisioning** β Text fields render through a shared markdown renderer supporting citations and expandable "cognitive reasoning" panels
### Usage
```tsx
import SPBAnalysisPanel from '@e-llm-studio/citation/SPBAnalysisPanel'
console.log("Send reminder clicked")}
/>
);
}
```
---
## Props Reference
### Required Props
| Prop | Type | Description |
|------|------|-------------|
| `data` | `object` | Contains `due_at` (ISO date string) and `assignee` object with user info |
| `schedules` | `any[]` | Array of generated reminder schedules |
| `setSchedules` | `function` | State setter for schedules |
| `remainderOwners` | `remainderOwnerValue[]` | Array of owner configuration objects |
| `setRemainderOwners` | `function` | State setter for remainder owners |
| `handelSendNow` | `function` | Callback triggered when "Send Now" button is clicked |
### Optional Props - Configuration
#### Colors Configuration
```typescript
// Label colors (used for assignee chips)
colors?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C11574" },
{ bg: "#EEF4FF", text: "#3538CD" },
{ bg: "#F1F5F9", text: "#344054" },
]
// Statement badge colors
chipColor?: ColorConfig[] = [
{ bg: "#FDF2FA", text: "#C93185" },
{ bg: "#EEF2FF", text: "#6366F1" },
{ bg: "#FFF4E5", text: "#FF6058" },
]
// Recipients avatar colors - USE HEX VALUES, NOT TAILWIND CLASSES
recipientsColor?: ColorConfig[] = [
{ bg: "#DBEAFE", text: "#1E40AF" }, // β
Correct: Hex colors
{ bg: "#CCFBF1", text: "#0D9488" }, // β
Correct: Hex colors
{ bg: "#DCFCE7", text: "#166534" }, // β
Correct: Hex colors
]
```
#### Text Configuration
```typescript
manualReminderTitle?: string = "Send Manual Reminder Now"
manualReminderDescription?: string = "Immediately notify the assignees about this document."
selectRecipientsLabel?: string = "Select recipients:"
previewEmailButtonLabel?: string = "Preview Email"
sendNowButtonLabel?: string = "Send Now"
reminderSuccessTitle?: string = "Reminder sent successfully!"
reminderSuccessDescription?: string = "Email notification sent assignees."
escalationTitle?: string = "Escalation and Auto Reminder Setup"
escalationDescription?: string = "Configure Auto reminder settings for all assignees."
reminderStartDateLabel?: string = "Reminder Start Date"
documentDueDateLabel?: string = "Document Due Date"
reminderFrequencyLabel?: string = "Reminder Frequency"
escalationRemindersLabel?: string = "Escalation Reminders"
escalationConditionText?: string = "If the document is still pending, start escalation reminders"
daysText?: string = "days"
dueDataAndRepeatText?: string = "due date and repeat every"
```
#### Labels and Assignees
```typescript
// Assignee labels (displayed on chips)
labels?: string[] = ["Assignee 1", "Assignee 2", "Assignee 3"]
// Assignee data
assignees?: AssigneeConfig[] = [
{
id: "1",
name: "Assignee 1",
color: "#C11574",
bg: "#FDF2F8",
startDate: new Date("2026-11-09"),
dueDate: new Date("2026-12-01"),
},
// ... more assignees
]
// Fallback recipients when data.assignee is empty
fallbackRecipients?: RecipientConfig[] = [
{
initials: "OR",
name: "Olivia Rhye",
checked: false,
bg: "bg-blue-100",
text: "text-blue-700",
},
// ... more recipients
]
```
#### Options
```typescript
reminderFrequencyOptions?: string[] = [
"12 hours", "24 hours", "48 hours", "72 hours", "Custom"
]
escalationFrequencyOptions?: string[] = [
"1/2 hour", "1 hour", "4 hours", "6 hours", "12 hours", "Custom"
]
beforeAfterOptions?: string[] = ["After", "Before"]
```
---
## Configuration Examples
### Example 1: Basic Setup with Custom Data
```typescript
const mockData = {
due_at: "2026-12-15",
assignee: {
1: { name: "Alice Johnson" },
2: { name: "Bob Smith" },
3: { name: "Carol White" },
},
};
const customAssignees = [
{ id: "1", name: "Alice Johnson", color: "#C11574", bg: "#FDF2F8", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "2", name: "Bob Smith", color: "#3538CD", bg: "#EEF4FF", startDate: new Date(), dueDate: new Date("2026-12-15") },
{ id: "3", name: "Carol White", color: "#FF6058", bg: "#FFF7ED", startDate: new Date(), dueDate: new Date("2026-12-15") },
];
{
console.log("Reminders sent!");
// API call to send reminders
}}
/>
```
### Example 2: Custom Colors (Correct Way)
```typescript
// β
CORRECT: Use hex colors for recipientsColor
const customRecipientsColor = [
{ bg: "#E0E7FF", text: "#3730A3" }, // Indigo
{ bg: "#FDF2F8", text: "#BE185D" }, // Rose
{ bg: "#ECFDF5", text: "#047857" }, // Emerald
];
{
// Send reminders to API
console.log("Sending reminders...");
}}
/>
```
---
## Colors and Styling
### β οΈ IMPORTANT: Color Format Issue & Fix
**The Problem:**
The current code uses Tailwind class names for `recipientsColor`:
```typescript
// β WRONG - These are Tailwind class names
recipientsColor = [
{ bg: "bg-blue-100", text: "text-blue-700" }, // Won't work in inline styles!
]
```
## Development & Contribution
Contributions are welcome! This guide walks you through making changes to the citation library.
### Prerequisites
- **Node.js & npm** installed
- **Git** installed
- Basic familiarity with Git and the command line
### Development Setup
1. **Fork & Clone the Repository**
```bash
git clone https://github.com//citation.git
cd citation
```
2. **Install Dependencies**
```bash
npm install
```
3. **Link the Library Locally** (Optional - for testing before publishing)
```bash
git checkout -b my-change-branch
npm link
# In your test project folder
npm link @e-llm-studio/citation
```
4. **Build the Library**
```bash
npm run build
```
5. **Test Locally**
- Start or build your test project to verify changes work as expected
- Ensure all existing tests pass
### Making Changes
- Edit source files in the `src/` directory
- Add or update tests as needed
- Follow the existing code style and formatting guidelines
- Ensure your changes are well-documented with comments
### Submitting Changes
1. **Commit Your Changes**
```bash
git add .
git commit -m "fix: describe your change"
git push origin my-change-branch
```
2. **Submit a Pull Request**
- Open a pull request on GitHub with a clear description of your changes
- Reference any related issues
- Ensure all tests pass before submitting
### Versioning
When publishing updates, follow [Semantic Versioning](https://semver.org/):
```bash
npm version patch # for bug fixes
npm version minor # for new features
npm version major # for breaking changes
```
For more details, refer to the [npm version documentation](https://docs.npmjs.com/cli/v8/commands/npm-version).
### Publishing to npm
> Ensure you have npm account permissions and are on the correct branch.
```bash
npm login
npm publish --access public
```
After publishing, verify the package:
```bash
npm unlink @e-llm-studio/citation
npm install @e-llm-studio/citation@latest
```
### Additional Tips
- Use `npm pack` to generate a `.tgz` and test installation before publishing
- Open a Pull Request when ready for review
- We appreciate your help in improving the citation library through bug fixes, feature enhancements, and documentation improvements
---
## License
This library is released under the MIT License. See the LICENSE file for more details.
The license information is also available in the `citation/package.json` file under the 'license' field.