@viswa-test/test-citation 0.0.46 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,42 +1,41 @@
1
1
  # 📚 e-llm-studio/citation
2
2
 
3
-
4
3
  ## Table of Contents
5
4
 
6
5
  1. [Project Overview](#project-overview)
7
6
  2. [Installation](#installation)
8
7
  3. [Available Components](#available-citations)
9
8
  - [Citation Components](#citation-components)
10
- - [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)
11
- - [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)
12
- - [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)
13
- - [EmailCitation](#emailcitation) [<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/EmailCitation/EmailCitation.md)
14
- - [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)
15
- - [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)
16
- - [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)
17
- - [ChatDrawer](#chatdrawer) [<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/ChatDrawer/ChatDrawerReadme.md)
18
- - [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)
19
- - [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)
20
- - [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)
21
- - [VideoCitationContent](#videocitationcontent) [<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)
22
- - [MarkdownWithImageCitation](#markdownwithimagecitation) [<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/MarkdownWithImageCitation/README.md)
23
- - [ScannedDocCitation](#scanneddoccitation) [<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/ScannedDocCitation/README.md)
9
+ - [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)
10
+ - [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)
11
+ - [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)
12
+ - [EmailCitation](#emailcitation) [<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/EmailCitation/EmailCitation.md)
13
+ - [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)
14
+ - [CognitiveCompare](#cognitivecompare) [<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/new-compare-ui/citation/src/features/CognitiveCompare/README.md)
15
+ - [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)
16
+ - [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)
17
+ - [ChatDrawer](#chatdrawer) [<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/ChatDrawer/ChatDrawerReadme.md)
18
+ - [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)
19
+ - [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)
20
+ - [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)
21
+ - [VideoCitationContent](#videocitationcontent) [<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)
22
+ - [MarkdownWithImageCitation](#markdownwithimagecitation) [<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/MarkdownWithImageCitation/README.md)
23
+ - [ScannedDocCitation](#scanneddoccitation) [<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/ScannedDocCitation/README.md)
24
24
  - [Other Components](#other-components)
25
- - [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)
26
- - [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)
27
- - [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)
28
- - [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)
29
- - [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)
30
- - [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)
31
- - [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)
32
- - [ReviewPanel](#reviewpanel) [<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/ReviewPanel/README.md)
33
- - [TableCitationContent](#tablecitationcontent) [<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/TableCitation/README.md)
34
- - [SplitterCitationsComponent](#splittercitationscomponent) [<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/SplitterCitations/README.md)
25
+ - [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)
26
+ - [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)
27
+ - [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)
28
+ - [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)
29
+ - [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)
30
+ - [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)
31
+ - [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)
32
+ - [ReviewPanel](#reviewpanel) [<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/ReviewPanel/README.md)
33
+ - [TableCitationContent](#tablecitationcontent) [<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/TableCitation/README.md)
34
+ - [SplitterCitationsComponent](#splittercitationscomponent) [<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/SplitterCitations/README.md)
35
35
  4. [Common Use Cases](#common-use-cases)
36
36
  5. [Development & Contribution](#development--contribution)
37
37
  6. [License](#license)
38
38
 
39
-
40
39
  ## Project Overview
41
40
 
42
41
  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.
@@ -136,8 +135,8 @@ pnpm add @e-llm-studio/citation
136
135
 
137
136
  ---
138
137
 
139
-
140
138
  # Citation Components
139
+
141
140
  ## BookCitation
142
141
 
143
142
  ### Overview
@@ -190,7 +189,136 @@ import BookCitation from '@e-llm-studio/citation/BookCitation'
190
189
  | `useDropdown` | `boolean` | Optional flag to render the citation as a dropdown (default: `true`) |
191
190
 
192
191
  ---
192
+ ---
193
+
194
+ ### CognitiveCompare (Main Component)
195
+
196
+ A side-by-side document comparison component with cognitive analysis, deviation badges, citation-linked PDF previews, and two layout modes (Standard and Relative Order). For full documentation see the [dedicated README](https://github.com/Techolution/e-llm-studio-lib/blob/new-compare-ui/citation/src/features/CognitiveCompare/README.md).
197
+
198
+ ### Props
199
+
200
+ | Prop | Type | Default | Description |
201
+ | --------------------- | ----------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
202
+ | `treeData` | `Record<string, any> \| null` | — | **Required.** Backend tree structure powering both columns. |
203
+ | `displayConfig` | [`IDisplayConfig`](#idisplayconfig) | — | **Required.** Controls header/toggle visibility and initial layout mode. |
204
+ | `componentHeaderText` | `string` | `"Contract Comparison"` | Text shown in the top header bar. |
205
+ | `deviationData` | `Record<string, any>` | `{}` | Per-node deviation analysis results keyed by node ID. Populates the Deviation Analysis tab in the cognitive popup and drives inline text highlights within section content. |
206
+
207
+ ---
208
+
209
+ #### IDisplayConfig
210
+
211
+ | Property | Type | Default | Description |
212
+ | ----------------------- | --------- | ------- | ---------------------------------------------------------------------- |
213
+ | `isHeaderVisible` | `boolean` | `true` | Show or hide the top header bar. |
214
+ | `isToggleVisible` | `boolean` | `true` | Show or hide the Standard / Relative Order toggle switch. |
215
+ | `maintainRelativeOrder` | `boolean` | `false` | Initial layout mode — `true` for Relative Order, `false` for Standard. |
216
+
217
+ ---
218
+
219
+ ### treeData Shape
220
+
221
+ `treeData` is the primary data contract. It must be a flat object where every key is a node ID, plus four reserved keys.
222
+
223
+ ```ts
224
+ {
225
+ // Top-level metadata keys
226
+ base_root_id: string, // ID of the root node (looked up inside nodes)
227
+ input_index_map: { // Maps side index to document UUID
228
+ "0": string, // left side UUID
229
+ "1": string, // right side UUID
230
+ },
231
+ documents: { // Document metadata keyed by UUID
232
+ [uuid: string]: {
233
+ title: string,
234
+ signed_url: string, // PDF URL used by CitationAnchor / PdfViewer
235
+ }
236
+ },
237
+
238
+ // All node data lives under the `nodes` key
239
+ nodes: {
240
+ // Root node (identified by base_root_id)
241
+ [rootId: string]: {
242
+ display_node?: boolean,
243
+ comparison_inputs: {
244
+ [uuid: string]: { title: string } // column titles
245
+ },
246
+ decision_scope_description?: string,
247
+ next?: Record<string, string>, // child node IDs
248
+ },
249
+
250
+ // Section nodes
251
+ [nodeId: string]: {
252
+ display_node?: boolean, // set false to hide the node
253
+ evaluation_result?: DeviationDataEntry, // deviation result attached directly to node
254
+ comparison_inputs: {
255
+ [uuid: string]: {
256
+ title: string,
257
+ content: string,
258
+ additional_attributes?: {
259
+ display_index?: number, // used in Relative Order mode for sorting
260
+ display_title?: boolean, // set false to suppress rendering the title
261
+ display_content?: boolean, // set false to suppress rendering the content
262
+ }
263
+ }
264
+ },
265
+ next?: Record<string, string>, // child node IDs (for subsections)
266
+ mapping_rationale?: {
267
+ decision_strength?: string, // numeric string, e.g. "72"
268
+ decisioning_factors?: string[],
269
+ gaps_in_decision?: string[],
270
+ citations?: Record<string, Record<string, CitationEntry>>
271
+ }
272
+ }
273
+ }
274
+ }
275
+ ```
276
+
277
+ > All node data (root and section nodes) lives under the `nodes` key. The top-level `base_root_id`, `input_index_map`, and `documents` keys remain directly on `treeData`.
278
+
279
+ #### deviationData Shape
280
+
281
+ ```ts
282
+ // deviationData[nodeId]
283
+ {
284
+ evaluation_outputs?: {
285
+ output_value?: string, // badge label text
286
+ metadata?: { label_color?: string } // hex — drives badge/highlight colors
287
+ },
288
+ cognitive_decisioning?: {
289
+ decisioning_factors?: string[],
290
+ gaps_in_decision?: string[],
291
+ citations?: Record<string, any>,
292
+ decision_strength?: string | null,
293
+ },
294
+ deviations?: Record<string, any>, // { devKey: { [docUuid]: highlightText } }
295
+ }
296
+ ```
297
+
298
+ #### Usage
299
+
300
+ ```tsx
301
+ import CognitiveCompare from "@e-llm-studio/citation/CognitiveCompare";
302
+
303
+ <CognitiveCompare
304
+ treeData={myTreeData}
305
+ displayConfig={{
306
+ isHeaderVisible: true,
307
+ isToggleVisible: true,
308
+ maintainRelativeOrder: false,
309
+ }}
310
+ deviationData={myDeviationData}
311
+ />;
312
+ ```
313
+
314
+ #### Key Behaviours
193
315
 
316
+ - Badge and highlight colors are generated dynamically from `evaluation_outputs.metadata.label_color` via `generateColorPalette()`. The static `relationStyles` map has been removed.
317
+ - Clicking a badge in **Standard mode** opens `CognitivePopup` directly. In **Relative Order mode** it opens `MoreFunctionsPopup` offering Connect, Side by Side, and Cognitive Decisioning actions.
318
+ - The **Deviation Analysis** tab is shown first in the popup and displays `cognitive_decisioning.decisioning_factors` and `gaps_in_decision` with inline citation anchors that open split PDF viewers.
319
+ - `deviations` entries drive inline `<mark>` highlights inside section content, colored using the same `label_color`-derived palette.
320
+
321
+ ---
194
322
 
195
323
  ## ChatCitation
196
324
 
@@ -926,6 +1054,7 @@ This visual captures a clean product collaboration workspace prepared for planni
926
1054
  ```
927
1055
 
928
1056
  **With CitationRenderer (Expandable Pill):**
1057
+
929
1058
  ```tsx
930
1059
  import { CitationRenderer } from '@e-llm-studio/citation/CitationRenderer'
931
1060
  import { MarkdownWithImageCitation } from '@e-llm-studio/citation/MarkdownWithImageCitation'
@@ -2263,4 +2392,4 @@ npm install @e-llm-studio/citation@latest
2263
2392
 
2264
2393
  This library is released under the MIT License. See the LICENSE file for more details.
2265
2394
 
2266
- The license information is also available in the `citation/package.json` file under the 'license' field.
2395
+ The license information is also available in the `citation/package.json` file under the 'license' field.