`tsx
import Bookemon from '@e-llm-studio/citation/Bookemon'

open={isOpen}
onClose={() => setIsOpen(false)}
data={bookData}
getHighlightContent={fetchContent}
isBlurToggleVisible={true}
/>
`

$3

| 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

$3

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.

$3

- 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

$3

`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": {}
}
}

open={isOpen}
onClose={() => setIsOpen(false)}
data={pipelineData}
url="https://example.com/document.epub"
/>
`

$3

| 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

`tsx
import { DataSelectedContextProvider } from '@e-llm-studio/citation/context/DataSelectedContext'
import DataSelector from '@e-llm-studio/citation/DataSelector'


pageTitle="Import Dataset"
selectedRlefResources={resources}
setSelectedRlefResources={setResources}
selectedLocalFiles={files}
setSelectedLocalFiles={setFiles}
/>

`

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

$3

| 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

$3

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.

$3

- 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

$3

`tsx
import PaginatedTable from '@e-llm-studio/citation/PaginatedTable'

headers={["ID", "Name", "Email", "Status"]}
tableData={users}
totalFileRecords={10000}
onNextPage={fetchNextPage}
loadingMore={isLoading}
headerRefs={headerRefs}
columnWidth={200}
rowHeight={50}
style={{ height: "600px" }}
/>
`

Performance Characteristics:
- Renders only visible rows (windowed rendering)
- Handles thousands of rows efficiently
- Smooth scrolling even with large datasets
- Memory efficient for large data volumes

$3

| Prop Name | Type | Description |
|-----------|------|-------------|
| headers | string[] | An array of column header names |
| tableData | Object[] | Array of data objects where keys match the headers |
| onNextPage | () => void | Callback triggered when scrolling near the bottom |
| headerRefs | RefObject | A ref object to store references to header DOM elements |
| totalFileRecords | number | The total count of records available on the server |
| loadingMore | boolean | If true, shows a skeleton loader at the bottom |
| columnWidth | number | Fixed width (in px) for every column |
| rowHeight | number | Fixed height (in px) for every row |
| className | string | Custom CSS class for the main container |
| style | CSSProperties | Inline styles for the main container |
| styleOverrides | Object | Granular styles for internal elements |

---

PdfViewer

$3

PdfViewer is a specialized React component designed to render PDF documents with built-in capabilities for text highlighting and highlight navigation. It is built on top of the @react-pdf-viewer library and is optimized for review workflows. It takes a specific list of keywords to highlight and a list of relevant pages, allowing users to "jump" directly between pages that contain relevant information.

$3

- Text highlighting - Automatically highlight keywords within the document
- Highlight navigation - Jump between pages with relevant content
- Zoom controls - In/out zoom and popover zoom options
- Page navigation - Navigate between highlighted pages
- Custom toolbar - Sticky header with navigation controls
- Responsive design - Works well on various screen sizes

$3

`tsx
import PdfViewer from '@e-llm-studio/citation/PdfViewer'

pdfUrl="https://example.com/contract.pdf"
highlightText={["confidential", "termination", "liability"]}
highlightPages={[3, 8, 12]}
jumpToPageValue={3}
/>
`

$3

| Prop Name | Type | Description |
|-----------|------|-------------|
| pdfUrl | string | The direct URL to the PDF file to be rendered |
| highlightText | string[] | An array of keywords or phrases to automatically highlight |
| highlightPages | number[] | An array of page numbers (1-based) where highlights appear |
| jumpToPageValue | number | The specific page number to open the document at initially |

---

ProjectAccordion

$3

ProjectAccordion is a React component designed to display project-related information in an accordion format. Further details to be added.

$3

- Expandable/collapsible accordion design
- Markdown rendering for executive summaries
- Checkbox selection support
- API integration for fetching summaries
- Customizable styling

$3

`tsx
import ProjectAccordion from '@e-llm-studio/citation/ProjectAccordion'

baseUrl="https://api.example.com"
taskId="project-123"
citationTitle="Executive Summary"
isChecked={selected}
onCheckChange={(checked) => setSelected(checked)}
chevronUpComponent={}
chevronDownComponent={}
styles={{
pillButton: {
fontFamily: 'Plus Jakarta Sans, sans-serif',
border: '0px',
padding: '8px',
cursor: 'pointer'
}
}}
/>
`

$3

`tsx
import { UploadData } from '@e-llm-studio/citation'
import { DataSelectedProvider } from '@e-llm-studio/citation/context/DataSelectedContext'




`

$3

- 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 (


saveSelectedDataAsDataSet()}>
Save as Dataset


)
}
`

---

Common Use Cases

$3

// Show AI reasoning behind answers
score="88"
reasoning="Based on chapter 3 of the textbook..."
gap="The textbook doesn't cover recent developments after 2020"
/>
`

$3

// Show training data citations for code explanations
item={trainingDataCitation}
index={1}
headerTitle="Training Data Reference"
/>
`

$3

// Display key takeaways from audio content
artifact={{
fileUrl: "gs://bucket/interview.mp3",
keyTakeaways: [
{
takeawayId: "1",
name: "Key Insight",
content: "Important finding from the interview",
keywords: ["insight", "finding"]
}
]
}}
/>
`

$3

// Upload interface wrapper



`

$3

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

$3

- 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

$3

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

$3

When publishing updates, follow Semantic Versioning:

`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.

$3

> 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
`

$3

- 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.