@e-llm-studio/citation 0.0.117 → 0.0.119

package/README.md

@@ -1,9 +1,135 @@
-# e-llm-studio-lib/citation
+# 📚 e-llm-studio/citation
 
-This library contains React components for rendering various types of citations and related UI elements within the e-LLM Studio ecosystem. It provides a comprehensive set of reusable components designed to display citations, reasoning, code snippets, PDFs, and other content types with rich interactive features and customizable styling.
+
+## Table of Contents
+
+1. [Project Overview](#project-overview)
+2. [Installation](#installation)
+3. [Available Components](#available-citations)
+   - [Citation Components](#citation-components)
+      - [BookCitation](#bookcitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/BookCitation/README.MD)
+      - [ChatCitation](#chatcitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/ChatCitation/ChatCitationReadme.md)
+      - [CitationRenderer](#citationrenderer) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CitationRenderer/CitationRendererReadme.md)
+      - [CognitiveDecisioningCard](#cognitivedecisioningcard) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CognitiveDecisioning/CognitiveDecisioningReadme.md)
+      - [CognitiveInternalGPTReasoning](#cognitiveinternalgptreasoning) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CognitiveInternalgptReasoning/README.md)
+      - [CodeCitation](#codecitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CodeCitation/README.md)
+      - [CitationsViewer](#citationsviewer) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CitationViewer/CitationViewerReadme.md)
+      - [PdfEditorCitation](#pdfeditorcitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/PdfEditorCitation/README.md)
+      - [RequirementAICitation](#requirementaicitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/RequirementAiCitations/RequirementAiCitationsReadme.md)
+   - [Other Components](#other-components)
+      - [Bookemon](#bookemon) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/Bookemon/BookemonReadme.md)
+      - [DatagestMon](#datagestmon) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/DatagestMon/README.md)
+      - [DataSelector](#dataselector)[<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/DataSelector/DataSelectorReadme.md)
+      - [PaginatedTable](#paginatedtable) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/PaginatedTable/PaginatedTableReadme.md)
+      - [PdfViewer](#pdfviewer) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/PdfViewer/PdfViewerReadme.md)
+      - [ProjectAccordion](#projectaccordion) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/ProjectAccordion/README.md)
+      - [UploadData](#uploaddata) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/UploadData/README.md)
+4. [Common Use Cases](#common-use-cases)
+5. [Development & Contribution](#development--contribution)
+6. [License](#license)
+
+
+## Project Overview
+
+The @e-llm-studio/citation library is a comprehensive React component library designed to render various types of citations and related UI elements within the e-LLM Studio ecosystem. It provides a robust set of reusable, production-ready components that enable developers to display citations, reasoning chains, code snippets, PDFs, and other content types with rich interactive features and highly customizable styling.
+
+This library serves as a foundational building block for applications that need to present complex information in an organized, user-friendly manner. Whether you're displaying book citations with highlighted passages, rendering AI reasoning with confidence scores, showcasing code with syntax highlighting, or managing large datasets with pagination, the citation library offers flexible, well-documented components that integrate seamlessly into modern React applications.
+
+The library emphasizes developer experience through comprehensive documentation, TypeScript support, and extensive customization options. Each component is designed with accessibility and performance in mind, ensuring that applications built with these components provide excellent user experiences across different devices and use cases.
+
+---
+
+## Installation
+
+### Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+- **Node.js & npm** - Required for package management and running build scripts
+- **Git** - Required for cloning the repository
+- Basic familiarity with Git and the command line
+
+### Installation Steps
+
+#### 1. Clone the Repository
+
+Start by cloning the citation library repository to your local machine:
+
+```bash
+git clone https://github.com/e-llm-studio/citation.git
+
+cd citation
+```
+
+#### 2. Install Dependencies
+
+Install all required dependencies using npm:
+
+```bash
+npm install
+```
+
+Alternatively, you can use yarn if you prefer:
+
+```bash
+yarn install
+```
+
+#### 3. Link the Library Locally (Optional)
+
+If you want to test the library in another project before publishing, you can link it locally:
+
+```bash
+# In the citation library folder
+npm link
+
+# In your test project folder
+cd ../your-project
+npm link @e-llm-studio/citation
+```
+
+This allows you to test changes in your local library without publishing to npm.
+
+#### 4. Build the Library
+
+Build the library to compile TypeScript and prepare distribution files:
+
+```bash
+npm run build
+```
+
+#### 5. Test Locally
+
+After building, you can test the library in your project:
+
+```bash
+# In your test project
+npm start
+# or
+npm run build
+```
+
+Import the library components and verify that your changes work as expected.
+
+### Quick Installation for End Users
+
+If you're installing the published package from npm:
+
+```bash
+# Using npm
+npm install @e-llm-studio/citation
+
+# Using yarn
+yarn add @e-llm-studio/citation
+
+# Using pnpm
+pnpm add @e-llm-studio/citation
+```
 
 ---
 
+
+# Citation Components
 ## BookCitation
 
 ### Overview
@@ -20,40 +146,21 @@ The BookCitation component is designed to display book citations with an interac
 - **Support for book cover images and external links** - Displays book cover images and provides clickable external links
 - **Customizable styling through the customStyle prop** - Allows fine-grained control over component appearance
 
-### Installation
 
-```bash
-npm install @e-llm-studio/citation
-```
-
-### Usage
+### Usage:
 
 ```tsx
 import BookCitation from '@e-llm-studio/citation/BookCitation'
 
-const MyComponent = () => {
-  return (
-    <BookCitation
-      citationNumber={1}
-      partialMatch={true}
-      citationTitle="Sample Book Citation"
-      title="Sample Book Citation"
-      paragraphs={[
-        `<p><strong>"This is a sample paragraph from a book..."</strong></p>`
-      ]}
-      textToHighlight={['This is a sample paragraph']}
-      customStyle={{
-        citationButton: {
-          color: 'rgb(214, 51, 132)',
-          fontSize: '16px',
-        },
-      }}
-    />
-  )
-}
+<BookCitation
+ citationTitle="Sample Book"
+ paragraphs={['<p>Highlighted text example</p>']}
+ textToHighlight={['example']}
+ partialMatch={true}
+/>
 ```
 
-### Props
+### Props:
 
 | Prop Name | Type | Description |
 |-----------|------|-------------|
@@ -75,63 +182,6 @@ const MyComponent = () => {
 
 ---
 
-## 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
-
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
-### Usage
-
-```tsx
-import Bookemon from '@e-llm-studio/citation/Bookemon'
-
-<Bookemon
-  open={isOpen}
-  onClose={() => setIsOpen(false)}
-  data={bookData}
-  isBlurToggleVisible={true}
-  isNonHighlightedBlur={true}
-  getHighlightContent={api.fetchChunks}
-  handleFetchManuscriptElements={api.fetchPaginatedElements}
-  customStyle={{
-    dialogDimension: { maxWidth: '1400px', height: '95vh' },
-  }}
-/>
-```
-
-### 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<ContentItem[]>` | Async handler to fetch content for highlighting |
-| `handleFetchManuscriptElements` | `(params: FetchElementsParams) => Promise<PaginatedResponse>` | 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 |
-
----
 
 ## ChatCitation
 
@@ -149,36 +199,21 @@ ChatCitation is a composable React UI component for rendering chat-based citatio
 - **Tab-based navigation** - Toggle between summarized and detailed views
 - **Flexible content rendering** - Support for custom renderers and markdown components
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import ChatCitation from '@e-llm-studio/citation/ChatCitation'
 
 <ChatCitation
-  rootContainer={{
-    title: "AI Reasoning",
-    relevanceScore: 0.87,
-  }}
-  chatContainer={{
-    title: "Conversation",
-    chatData,
-    summarizedTab: {
-      chip: { show: true, isActive: true },
-    },
-    detailedTab: {
-      chip: { isActive: false },
-    },
-  }}
-  ruleBookContainer={{
-    title: "Referenced Rules",
-    data: ruleBookItems,
-  }}
+ chatContainer={{
+ chatData: [
+ { role: 'user', message: 'Hello', userName: 'User1', timeStamp: dayjs() }
+ ]
+ }}
+ ruleBookContainer={{
+ title: 'References',
+ data: { content: 'Rule content', highlighted_texts: ['important'] }
+ }}
 />
 ```
 
@@ -193,7 +228,8 @@ import ChatCitation from '@e-llm-studio/citation/ChatCitation'
 
 ---
 
-## Citation (CitationRenderer)
+
+## CitationRenderer
 
 ### Overview
 
@@ -208,33 +244,21 @@ CitationRenderer is a versatile, interactive "Pill" component designed to displa
 - **Flexible styling** - Customize appearance through style props
 - **Callback support** - Optional callbacks for side effects on toggle
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import CitationRenderer from '@e-llm-studio/citation/CitationRenderer'
-import MarkdownRenderer from '@e-llm-studio/citation/CitationRenderer/MarkdownRenderer'
-
-const SimpleCitation = () => (
-  <CitationRenderer
-    inLineCitation={true}
-    citationTitle="Source: Q3 Financial Report"
-    citationIcon={<FaBook />}
-    chevronDownComponent={<FaChevronDown />}
-    chevronUpComponent={<FaChevronUp />}
-    citationComponent={
-      <MarkdownRenderer value="**Revenue grew by 20%** compared to last year." />
-    }
-  />
-)
+
+<CitationRenderer
+ inLineCitation={true}
+ citationTitle="Reference 1"
+ citationComponent={<div>Detailed content here</div>}
+ chevronDownComponent={<ChevronDownIcon />}
+ chevronUpComponent={<ChevronUpIcon />}
+/>
 ```
 
-### Props
+### Props 
 
 | Prop Name | Type | Description |
 |-----------|------|-------------|
@@ -251,55 +275,6 @@ const SimpleCitation = () => (
 
 ---
 
-## CitationRenderer
-
-### Overview
-
-CitationRenderer is the same as the Citation component - a versatile, interactive "Pill" component designed to display a compact reference citation that expands into detailed content. It provides a space-efficient toggle mechanism for displaying source material, footnotes, or reasoning chains.
-
-### Features
-
-- **Expandable pill button** - Compact display that expands on click
-- **Customizable icons** - Support for custom icons for chevron and citation indicators
-- **Markdown content support** - Render rich text content using MarkdownRenderer
-- **Controlled and uncontrolled modes** - Manage state internally or externally
-- **Flexible styling** - Customize appearance through style props
-
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
-### Usage
-
-```tsx
-import CitationRenderer from '@e-llm-studio/citation/CitationRenderer'
-
-const SimpleCitation = () => (
-  <CitationRenderer
-    inLineCitation={true}
-    citationTitle="Source: Q3 Financial Report"
-    citationComponent={<div>Content here</div>}
-  />
-)
-```
-
-### Props
-
-| Prop Name | Type | Description |
-|-----------|------|-------------|
-| `inLineCitation` | `boolean` | Must be true to enable expand/collapse behavior |
-| `citationTitle` | `string` | The text displayed inside the pill button |
-| `citationComponent` | `ReactNode` | The content to render when expanded |
-| `citationIcon` | `ReactNode` | Icon displayed to the left of the title |
-| `chevronUpComponent` | `ReactNode` | Icon shown when the citation is expanded |
-| `chevronDownComponent` | `ReactNode` | Icon shown when the citation is collapsed |
-| `styles` | `Object` | CSS overrides for styling |
-| `isOpen` | `boolean` | Forces the expanded state (controlled mode) |
-| `onToggle` | `func` | Callback fired when the pill is clicked |
-
----
 
 ## CognitiveDecisioningCard
 
@@ -307,9 +282,6 @@ const SimpleCitation = () => (
 
 CognitiveDecisioningCard is a specialized React UI component designed to provide transparency into AI workflows. It renders a toggleable "Pill" that expands into a detailed card, displaying the AI's Reasoning, identified Gaps, and a confidence Score. It features a nested accordion design, robust Markdown rendering for content, and full styling customization.
 
-**Note:** `CognitiveInternalGPTReasoning` is a 'non web search citation' component, exported as `NonWebReasoningComponent`.
-
-**Note:** `RequirementAICitation` is 'ai reasoning', with reference to the explanation within the `CognitiveDecisioningCard` component.
 
 ### Features
 
@@ -321,30 +293,41 @@ CognitiveDecisioningCard is a specialized React UI component designed to provide
 - **Icon customization** - Replace default icons with custom components
 - **Advanced section customization** - Override default sections with custom data structures
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import CognitiveDecisioningCard from '@e-llm-studio/citation/CognitiveDecisioningCard'
 
-const AIView = () => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <CognitiveDecisioningCard
-      isOpen={isOpen}
-      onToggle={() => setIsOpen(!isOpen)}
-      score="92"
-      reasoning="**Analysis:** The user is asking about account limits. Based on the documentation, the limit is $500."
-      gap="The user did not specify *which* account type they are referring to."
-    />
-  )
-}
+<CognitiveDecisioningCard
+ isOpen={isOpen}
+ onToggle={() => setIsOpen(!isOpen)}
+ score="92"
+ reasoning="**Analysis:** Based on document review..."
+ gap="Missing date information in section 3."
+ title="AI Analysis Report"
+/>
+```
+
+**Advanced Customization**:
+```tsx
+const customSections = [
+ {
+ id: 'step1',
+ title: 'Data Retrieval',
+ subtitle: '3 sources processed',
+ icon: <CheckIcon />,
+ content: 'Data retrieved successfully'
+ }
+]
+
+<CognitiveDecisioningCard
+ isOpen={true}
+ sections={customSections}
+ score="100"
+ mdComponents={{
+ a: ({ node, ...props }) => <a {...props} target="_blank" />
+ }}
+/>
 ```
 
 ### Props
@@ -367,6 +350,50 @@ const AIView = () => {
 
 ---
 
+## CognitiveInternalGPTReasoning
+
+### Overview
+
+The CognitiveInternalgptReasoningComponent is a React component designed to render non-web search reasoning citations with advanced interactive features. It provides a comprehensive display of reasoning data with support for expandable content, highlight navigation, and modal fullscreen viewing. This component is particularly useful for displaying AI-generated reasoning, training data citations, and confidence scores in a user-friendly format.
+
+### Features
+
+- **Expandable Content** - Display a paraphrase text that expands to show the full data source content
+- **Highlight Navigation** - Automatically extract and navigate between highlighted sections within the content
+- **Confidence Score Display** - Show confidence percentage in both expanded view and modal
+- **Fullscreen Modal View** - Open a fullscreen modal for detailed examination of reasoning data
+- **Text Formatting Support** - Handle bold text, list items, headers, and special highlight tags
+- **Custom Icon Support** - Replace default icons with custom React components
+
+### Usage
+
+```tsx
+import NonWebReasoningComponent from '@e-llm-studio/citation/CognitiveInternalgptReasoningComponent'
+
+const reasoningData = {
+ text: "Reasoning text here",
+ dataSource: "Source with <highlight>highlighted text</highlight>",
+ trainingDataTitle: "Training Dataset v1.0",
+ confidence_score: 95,
+ paraphrase: "Brief summary"
+}
+
+<NonWebReasoningComponent
+ item={reasoningData}
+ index={1}
+ headerTitle="GPT Reasoning"
+/>
+```
+
+**Highlight Navigation**:
+- Extracts `<highlight>` tags from dataSource
+- Provides navigation between highlighted sections
+- Shows current position (e.g., "2/5 highlights")
+- Auto-scrolls to active highlight
+
+---
+
+
 ## CodeCitation
 
 ### Overview
@@ -385,36 +412,51 @@ CodeCitation is a composable React UI component for rendering code citations wit
 - **Fullscreen view support** - View code in fullscreen modal
 - **Responsive design** - Works well on various screen sizes
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import { CodeCitation } from '@e-llm-studio/citation/CodeCitation'
 
-const App = () => {
-  const sampleCode = `function greet(name) {
-  console.log("Hello, " + name);
-}`
-
-  return (
-    <CodeCitation
-      citationTitle="Example Code"
-      filename="example.js"
-      filepath="/example.js"
-      inLineCitation={true}
-      isDarkModeEnabled={false}
-      showThemeToggle={true}
-      editorHeight={300}
-      editorWidth="100%"
-      customCode={sampleCode}
-    />
-  )
-}
+<CodeCitation
+ citationTitle="Example Code"
+ filename="example.js"
+ filepath="/src/example.js"
+ customCode={`function hello() { return "world"; }`}
+ inLineCitation={true}
+ isDarkModeEnabled={false}
+ showThemeToggle={true}
+ editorHeight={400}
+/>
+```
+
+**Advanced Features**:
+```tsx
+const diagnostics = [
+ {
+ range: { lineStart: 2, lineEnd: 2, columnStart: 6, columnEnd: 11 },
+ severity: 1 
+ }
+]
+
+const highlightRanges = [
+ {
+ startIndex: 2,
+ endIndex: 5,
+ color: 'rgba(255, 255, 0, 0.3)',
+ lightModeColor: 'rgba(255, 255, 0, 0.2)'
+ }
+]
+
+<CodeCitation
+ customCode={sampleCode}
+ diagnostics={diagnostics}
+ diagnosticStylesBySeverity={{
+ 1: { style: { backgroundColor: 'rgba(255,0,0,0.2)' } }
+ }}
+ startIndex={2}
+ endIndex={5}
+ isHighlightingEnabled={true}
+/>
 ```
 
 ### Props
@@ -442,6 +484,246 @@ const App = () => {
 
 ---
 
+## CitationsViewer
+
+### Overview
+
+The Citation Viewer is a rich, interactive React component designed to display AI-generated audio citations. It features a synchronized audio waveform player, a transcript view that highlights active segments, and a summary of key takeaways. This component is ideal for displaying RAG (Retrieval-Augmented Generation) results where the source material is audio or video, allowing users to listen to the specific segment referenced by the AI.
+
+### Features
+
+- **Interactive Waveform** - Visualizes audio using `wavesurfer.js` with playback controls
+- **Smart Highlighting** - Automatically highlights the specific time range referenced in the citation on the waveform
+- **Synchronized Transcript** - Displays chat history and highlights the active message segment
+- **Key Takeaways** - Renders extracted insights with bold text formatting and keyword tags
+- **GCS Integration** - Built-in hook to resolve Google Cloud Storage (`gs://`) URLs to signed URLs via a backend endpoint
+- **Themable** - Fully customizable colors and typography via a theme config object
+
+### Usage
+
+```tsx
+import CitationsViewer from '@e-llm-studio/citation/CitationsViewer'
+
+<CitationsViewer
+ artifact={{
+ baseUrl: "https://api.example.com",
+ artifactTitle: "Quarterly Earnings Call",
+ fileUrl: "gs://bucket/audio.mp3",
+ chatHistory: [
+ {
+ role: "Speaker 1",
+ message: "Revenue increased by 20%",
+ timestamp: "10:30",
+ timestamp_start: 120.5,
+ timestamp_end: 125.0
+ }
+ ],
+ keyTakeaways: [
+ {
+ takeawayId: "1",
+ name: "Revenue Growth",
+ content: "**20% year-over-year growth**",
+ keywords: ["Revenue", "Growth"]
+ }
+ ]
+ }}
+ onCloseHandler={() => console.log('Closed')}
+/>
+```
+
+### Props
+
+| Prop Name | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `artifact` | `ArtifactData` | ✅ | The main data object containing audio, transcript, and metadata |
+| `onCloseHandler` | `() => void` | ❌ | Callback function triggered when the close (X) button is clicked |
+| `theme` | `ThemeConfig` | ❌ | Object to override default colors and fonts |
+| `iconsConfig` | `IconsConfig` | ❌ | Object to inject custom React icons (Play, Pause, Close) |
+
+---
+
+
+## PdfEditorCitation
+
+### Overview
+
+PdfEditorCitation is a core component for the Advanced Document Management and Citation System. It provides a user-friendly interface for viewing, editing, and citing PDF documents directly within the application. It combines interactive PDF viewing capabilities with a collapsible UI pattern, allowing users to manage document space efficiently while maintaining full access to PDF editing and annotation features.
+
+### Features
+
+- **Collapsible PDF viewer functionality** - Users can expand and collapse the PDF editor section
+- **Interactive PDF editing capabilities** - Full support for PDF editing, annotations, and collaborative features
+- **Sentence highlighting support** - Ability to highlight specific sentences within PDF documents
+- **Customizable UI through CSS classes** - Flexible styling options for seamless integration
+
+### Usage
+
+```tsx
+import { PdfEditorCitation } from '@e-llm-studio/citation/PdfEditorCitation'
+
+<PdfEditorCitation
+ citationTitleElement={<div>Research Paper.pdf</div>}
+ pdfUrl="https://example.com/document.pdf"
+ pdfEditorBackendBaseUrl="https://pdf-backend.example.com"
+ sentenceHighlightDetails={{
+ pdfPageNumber: 5,
+ sentenceToHighlight: "key finding in the research"
+ }}
+ currentUserId="user-123"
+/>
+```
+
+### Props
+
+| Prop Name | Type | Description |
+|-----------|------|-------------|
+| `citationTitleElement` | `ReactElement` | A React element to display as the clickable title |
+| `pdfUrl` | `string` | The URL of the PDF file to be displayed and edited |
+| `pdfEditorBackendBaseUrl` | `string` | The base URL of the PDF editor backend service |
+| `citationRootClassName` | `string` | Optional CSS class name for the root container |
+| `citationBodyClassName` | `string` | Optional CSS class name for the body section |
+| `citationBodyWhenCollapsedClassName` | `string` | Optional CSS class name for collapsed state |
+| `citationTitleClassName` | `string` | Optional CSS class name for the title section |
+| `rlefEventServiceBaseUrl` | `string` | Optional base URL for the RLEF event service |
+| `currentUserId` | `string` | Optional user ID of the current user |
+| `sentenceHighlightDetails` | `object` | Optional sentence highlighting configuration |
+
+---
+
+
+## RequirementAICitation
+
+### Overview
+
+RequirementAICitation is a comprehensive React module for displaying AI-generated insights and rich media evidence. It serves two primary purposes: displaying an AI Reasoning Card with expandable sections for logic, gaps, and confidence scores with embedded citations, and providing standalone media citations for Files, Images, and Web Links.
+
+### Features
+
+- **AI Reasoning Card** - Complex, expandable card displaying AI logic, gaps, and confidence scores with embedded, clickable citations
+- **Standalone Media Citations** - Individual, stylized citation pills for Files, Images, and Web Links
+- **Multiple Citation Types** - Support for file citations (PDFs), image citations, and web citations
+- **Relevance Scoring** - Display AI relevance scores for all citation types
+- **Rich Media Preview** - Integrated viewers for PDFs, images, and web content
+- **Customizable Styling** - Deep CSS injection for all components
+
+### Usage
+
+```tsx
+import { AiReasoningCitation } from '@e-llm-studio/citation'
+
+<AiReasoningCitation
+ title="AI Analysis"
+ aiReason={{
+ id: "1",
+ relevance_score: 95,
+ reason: "The <a href='document_citation$1'>ADK.pdf</a> mentions...",
+ gap: "Registry mechanism undefined"
+ }}
+ citationList={{
+ file_citations: [{
+ citation_number: "1",
+ customMetadata: {
+ type: "book_citation_pdf",
+ file_name: "ADK.pdf",
+ highlighted_pdf_signed_url: "https://storage.googleapis.com/..."
+ }
+ }]
+ }}
+ aiReasoningAccordionProps={{
+ icons: {
+ chevronUp: <i className="pi pi-angle-up" />,
+ chevronDown: <i className="pi pi-angle-down" />
+ }
+ }}
+/>
+```
+
+**Embedded Citation Types**:
+1. **FileCitationContent**: PDF documents with signed URLs
+2. **ImageCitationContent**: Images with relevance scores
+3. **WebCitationWithImageContent**: Web pages with screenshots
+
+**Standalone Media Citations**:
+```tsx
+import { CitationRenderer, FileCitationContent } from '@e-llm-studio/citation'
+
+<CitationRenderer
+ inLineCitation={true}
+ citationTitle="Technical Spec.pdf"
+ citationComponent={
+ <FileCitationContent
+ title="Spec.pdf"
+ relevanceScore={88}
+ signedUrl="https://example.com/sample.pdf"
+ styles={{ pdfWrapper: { height: "750px" } }}
+ />
+ }
+/>
+```
+### Props
+
+| Prop Name | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `title` | `string` | ✅ | Title on the main pill |
+| `aiReason` | `TAIReasoning` | ✅ | Contains `reason`, `gap`, `relevance_score` |
+| `citationList` | `Citations` | ✅ | Lookup object for all referenced files/images |
+| `aiReasoningAccordionProps` | `Object` | ✅ | Must contain `icons: { chevronUp, chevronDown }` |
+| `projectDetails` | `Array` | ❌ | Context for specific app-mod logic |
+| `cachingConfig` | `Object` | ❌ | If using `gsUtilPath` instead of `signedUrl` |
+
+---
+
+
+# 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'
+
+<Bookemon
+ open={isOpen}
+ onClose={() => 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<ContentItem[]>` | Async handler to fetch content for highlighting |
+| `handleFetchManuscriptElements` | `(params: FetchElementsParams) => Promise<PaginatedResponse>` | 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
@@ -457,42 +739,36 @@ DatagestMon is a React component for monitoring and displaying structured data f
 - **Material-UI Dialog** - Professional modal presentation
 - **Graceful error handling** - Handle missing or malformed data gracefully
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
-import DatagestMon from '@e-llm-studio/citation'
-
-function DatagestMonExample() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const data = {
-    "analysis": {
-      "processed_data": {
-        "summary": "Analysis completed successfully",
-        "functions": "Extracted 15 key functions",
-      },
-      "error_data": {}
-    },
-  }
-
-  return (
-    <div>
-      <button onClick={() => setIsOpen(true)}>Open DatagestMon</button>
-      <DatagestMon
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        data={data}
-        url="https://example.com/sample.epub"
-      />
-    </div>
-  )
+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": {}
+ }
 }
+
+<DatagestMon
+ open={isOpen}
+ onClose={() => setIsOpen(false)}
+ data={pipelineData}
+ url="https://example.com/document.epub"
+/>
 ```
 
 ### Props
@@ -506,8 +782,9 @@ function DatagestMonExample() {
 
 ---
 
-## DataSelector
 
+## 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.
@@ -522,38 +799,31 @@ DataSelector is a robust, multi-step wizard designed to handle complex data impo
 - **State machine navigation** - Robust step management
 - **Context-driven state sharing** - Centralized state management via React Context
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
-import { DataSelectedContextProvider } from './context/DataSelectedContext'
+import { DataSelectedContextProvider } from '@e-llm-studio/citation/context/DataSelectedContext'
 import DataSelector from '@e-llm-studio/citation/DataSelector'
 
-const App = () => {
-  const [selectedResources, setSelectedResources] = useState([])
-  const [localFiles, setLocalFiles] = useState([])
-
-  return (
-    <DataSelectedContextProvider>
-      <div style={{ height: '600px', width: '100%' }}>
-        <DataSelector 
-          pageTitle="Import Dataset"
-          selectedRlefResources={selectedResources}
-          setSelectedRlefResources={setSelectedResources}
-          selectedLocalFiles={localFiles}
-          setSelectedLocalFiles={setLocalFiles}
-        />
-      </div>
-    </DataSelectedContextProvider>
-  )
-}
+<DataSelectedContextProvider>
+ <DataSelector
+ pageTitle="Import Dataset"
+ selectedRlefResources={resources}
+ setSelectedRlefResources={setResources}
+ selectedLocalFiles={files}
+ setSelectedLocalFiles={setFiles}
+ />
+</DataSelectedContextProvider>
 ```
 
+**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 |
@@ -582,30 +852,30 @@ PaginatedTable is a high-performance React component designed to display large d
 - **Loading states** - Displays a skeleton loader row when fetching more data
 - **Customizable** - Supports custom dimensions and granular style overrides
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import PaginatedTable from '@e-llm-studio/citation/PaginatedTable'
 
 <PaginatedTable
-  headers={["ID", "Name", "Status"]}
-  tableData={data}
-  totalFileRecords={1000}
-  onNextPage={fetchNextPage}
-  loadingMore={loading}
-  headerRefs={headerRefs}
-  columnWidth={200}
-  rowHeight={50}
-  style={{ height: "100%" }}
+ 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
+
 ### Props
 
 | Prop Name | Type | Description |
@@ -624,57 +894,6 @@ import PaginatedTable from '@e-llm-studio/citation/PaginatedTable'
 
 ---
 
-## PdfEditorCitation
-
-### Overview
-
-PdfEditorCitation is a core component for the Advanced Document Management and Citation System. It provides a user-friendly interface for viewing, editing, and citing PDF documents directly within the application. It combines interactive PDF viewing capabilities with a collapsible UI pattern, allowing users to manage document space efficiently while maintaining full access to PDF editing and annotation features.
-
-### Features
-
-- **Collapsible PDF viewer functionality** - Users can expand and collapse the PDF editor section
-- **Interactive PDF editing capabilities** - Full support for PDF editing, annotations, and collaborative features
-- **Sentence highlighting support** - Ability to highlight specific sentences within PDF documents
-- **Customizable UI through CSS classes** - Flexible styling options for seamless integration
-
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
-### Usage
-
-```tsx
-import { PdfEditorCitation } from './features/PdfEditorCitation/PdfEditorCitation'
-
-export function BasicPdfExample() {
-  return (
-    <PdfEditorCitation
-      citationTitleElement={<div>My Document.PDF</div>}
-      pdfUrl="https://example.com/documents/sample.pdf"
-      pdfEditorBackendBaseUrl="https://pdf-backend.example.com"
-    />
-  )
-}
-```
-
-### Props
-
-| Prop Name | Type | Description |
-|-----------|------|-------------|
-| `citationTitleElement` | `ReactElement` | A React element to display as the clickable title |
-| `pdfUrl` | `string` | The URL of the PDF file to be displayed and edited |
-| `pdfEditorBackendBaseUrl` | `string` | The base URL of the PDF editor backend service |
-| `citationRootClassName` | `string` | Optional CSS class name for the root container |
-| `citationBodyClassName` | `string` | Optional CSS class name for the body section |
-| `citationBodyWhenCollapsedClassName` | `string` | Optional CSS class name for collapsed state |
-| `citationTitleClassName` | `string` | Optional CSS class name for the title section |
-| `rlefEventServiceBaseUrl` | `string` | Optional base URL for the RLEF event service |
-| `currentUserId` | `string` | Optional user ID of the current user |
-| `sentenceHighlightDetails` | `object` | Optional sentence highlighting configuration |
-
----
 
 ## PdfViewer
 
@@ -691,35 +910,26 @@ PdfViewer is a specialized React component designed to render PDF documents with
 - **Custom toolbar** - Sticky header with navigation controls
 - **Responsive design** - Works well on various screen sizes
 
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
-
 ### Usage
 
 ```tsx
 import PdfViewer from '@e-llm-studio/citation/PdfViewer'
 
-const DocumentReview = () => {
-  const pdfUrl = "https://example.com/contract.pdf"
-  const searchKeywords = ["termination clause", "liability", "date"]
-  const pagesWithKeywords = [3, 8, 12]
-
-  return (
-    <div style={{ height: "800px", width: "100%" }}>
-      <PdfViewer
-        pdfUrl={pdfUrl}
-        highlightText={searchKeywords}
-        highlightPages={pagesWithKeywords}
-        jumpToPageValue={3}
-      />
-    </div>
-  )
-}
+<PdfViewer
+ pdfUrl="https://example.com/contract.pdf"
+ highlightText={["confidential", "termination", "liability"]}
+ highlightPages={[3, 8, 12]}
+ jumpToPageValue={3}
+/>
 ```
 
+### Navigation Behavior
+- "Next" button jumps to next page with highlights
+- "Previous" button jumps to previous highlighted page
+- Direct page navigation based on highlightPages array
+- Auto-zoom to actual size on load
+
+
 ### Props
 
 | Prop Name | Type | Description |
@@ -739,26 +949,49 @@ ProjectAccordion is a React component designed to display project-related inform
 
 ### Features
 
-- Accordion-based layout for organizing project information
-- Expandable/collapsible sections
-- Markdown support for content rendering
-
-### Installation
-
-```bash
-npm install @e-llm-studio/citation
-```
+- Expandable/collapsible accordion design
+- Markdown rendering for executive summaries
+- Checkbox selection support
+- API integration for fetching summaries
+- Customizable styling
 
 ### Usage
 
-Further details to be added.
+```tsx
+import ProjectAccordion from '@e-llm-studio/citation/ProjectAccordion'
+
+<ProjectAccordion
+ baseUrl="https://api.example.com"
+ taskId="project-123"
+ citationTitle="Executive Summary"
+ isChecked={selected}
+ onCheckChange={(checked) => setSelected(checked)}
+ chevronUpComponent={<UpIcon />}
+ chevronDownComponent={<DownIcon />}
+ styles={{
+ pillButton: {
+ fontFamily: 'Plus Jakarta Sans, sans-serif',
+ border: '0px',
+ padding: '8px',
+ cursor: 'pointer'
+ }
+ }}
+/>
+```
 
 ### Props
-
-Further details to be added.
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `baseUrl` | string | Yes | API base URL |
+| `taskId` | string | Yes | Task/project identifier |
+| `citationTitle` | string \| ReactNode | Yes | Accordion header title |
+| `isChecked` | boolean | No | Controlled checkbox state |
+| `onCheckChange` | function | No | Checkbox change callback |
+| `execSummary` | string | No | Pre-fetched summary text |
 
 ---
 
+
 ## UploadData
 
 ### Overview
@@ -773,28 +1006,258 @@ UploadData is a feature within the DataSelector component that handles data impo
 - **Cloud integration** - Google Drive integration for cloud-based data
 - **Saved dataset management** - Access and manage previously saved datasets
 
-### Installation
+### Usage
 
-```bash
-npm install @e-llm-studio/citation
+```tsx
+import { UploadData } from '@e-llm-studio/citation'
+import { DataSelectedProvider } from '@e-llm-studio/citation/context/DataSelectedContext'
+
+<DataSelectedProvider>
+ <UploadData />
+</DataSelectedProvider>
 ```
 
-### Usage
+### Upload Sources
 
-UploadData is typically used as part of the DataSelector component workflow. It manages the data import process through various sub-components that handle specific data 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
 
-### Props
 
-Further details to be added.
+**Integration Example**:
+```tsx
+import { useSelectDataContext } from '@e-llm-studio/citation/context/DataSelectedContext'
+
+const MyComponent = () => {
+ const { selectedRlefResources, saveSelectedDataAsDataSet } = useSelectDataContext()
+ 
+ return (
+ <DataSelectedProvider>
+ <UploadData />
+ <button onClick={() => saveSelectedDataAsDataSet()}>
+ Save as Dataset
+ </button>
+ </DataSelectedProvider>
+ )
+}
+```
 
 ---
 
-## License
+## Common Use Cases
 
-This library is licensed under the MIT License. See the LICENSE file for details.
+### RAG (Retrieval Augmented Generation) Applications
+```tsx
+// Display book citations in RAG responses
+<BookCitation
+ citationTitle="Source: Machine Learning Textbook"
+ paragraphs={[relevantParagraph]}
+ textToHighlight={[queryKeywords]}
+/>
+
+// Show AI reasoning behind answers
+<CognitiveDecisioningCard
+ score="88"
+ reasoning="Based on chapter 3 of the textbook..."
+ gap="The textbook doesn't cover recent developments after 2020"
+/>
+```
+
+### Code Review and Documentation
+```tsx
+// Display code snippets with diagnostics
+<CodeCitation
+ filename="utils.js"
+ customCode={problematicCode}
+ diagnostics={lintErrors}
+ isHighlightingEnabled={true}
+ startIndex={errorLine - 1}
+ endIndex={errorLine + 1}
+/>
+
+// Show training data citations for code explanations
+<NonWebReasoningComponent
+ item={trainingDataCitation}
+ index={1}
+ headerTitle="Training Data Reference"
+/>
+```
+
+### Audio/Video Content Analysis
+```tsx
+// Show audio citations with synchronized transcripts
+<CitationsViewer
+ artifact={audioAnalysis}
+ onCloseHandler={closePlayer}
+/>
+
+// Display key takeaways from audio content
+<CitationsViewer
+ artifact={{
+ fileUrl: "gs://bucket/interview.mp3",
+ keyTakeaways: [
+ {
+ takeawayId: "1",
+ name: "Key Insight",
+ content: "**Important finding** from the interview",
+ keywords: ["insight", "finding"]
+ }
+ ]
+ }}
+/>
+```
+
+### Document Review Workflows
+```tsx
+// PDF review with highlighting
+<PdfViewer
+ pdfUrl={contractUrl}
+ highlightText={keyClauses}
+ highlightPages={relevantPages}
+/>
+
+// Collaborative PDF editing
+<PdfEditorCitation
+ citationTitleElement={<div>Legal Document.pdf</div>}
+ pdfUrl={legalDocUrl}
+ currentUserId={user.id}
+ pdfEditorBackendBaseUrl="https://pdf-backend.example.com"
+/>
+```
+
+### Data Import and Management
+```tsx
+// Multi-step data import wizard
+<DataSelectedContextProvider>
+ <DataSelector
+ pageTitle="Import Training Data"
+ selectedRlefResources={trainingData}
+ setSelectedRlefResources={setTrainingData}
+ />
+</DataSelectedContextProvider>
+
+// Upload interface wrapper
+<DataSelectedProvider>
+ <UploadData />
+</DataSelectedProvider>
+```
+
+### Performance-Optimized Data Display
+```tsx
+// Virtualized table for large datasets
+<PaginatedTable
+ headers={columns}
+ tableData={largeDataset}
+ totalFileRecords={100000}
+ onNextPage={loadMoreData}
+ loadingMore={loading}
+ style={{ height: "500px" }}
+/>
+```
 
 ---
 
-## Contributing
+## 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/<your-username>/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.
 
-Contributions are welcome! Please submit a pull request or open an issue for any feature requests or bug fixes. We appreciate your help in improving the citation library through bug fixes, feature enhancements, and documentation improvements.
+The license information is also available in the `citation/package.json` file under the 'license' field.