ThinkingResponse and Citation Components

Overview

This library provides two React components: ThinkingResponse and Citation. These components are designed for displaying response messages with optional animations and citations for enhanced user interaction and clarity.

ThinkingResponse Component

Purpose

The ThinkingResponse component is used to display a response message, with an expandable view and a thinking animation. It provides a flexible interface for handling response states, such as final responses or intermediary thinking states.

Props

| Prop Name | Type | Description | |---------------------|----------|-------------| | responseFrom | string | The source of the response. | | responseMessage | string | The content of the response message. Supports Markdown rendering. | | header_message | string | The message displayed in the header. | | finalResponseStatus | boolean | Indicates whether the response is final (true) or in-progress (false). | | thinkingBulbIcon | string | URL or path to the icon displayed for the thinking state. | | arrowDownIcon | string | URL or path to the arrow icon used for expanding/collapsing content. | | closeIcon | string (optional) | URL or path to the icon for closing the response. |

Example Usage

import ThinkingResponse from "./ThinkingResponse";

<ThinkingResponse
  responseFrom="Orchestrator"  // string
  responseMessage="This is a **sample response** rendered in Markdown." // string
  header_message="Orchestrator Thinking" // string
  finalResponseStatus={false} // string
  thinkingBulbIcon="/path/to/thinking-bulb-icon.png" // string
  arrowDownIcon="/path/to/arrow-down-icon.png" // string
/>

Features

• Expandable Content: Toggle the response message with a smooth animation.
• Markdown Support: Render the response message with Markdown formatting.
• Customizable Icons: Replace the default icons with your own assets.

Citation Component

Purpose

The Citation component is designed to display a list of citations with expandable details, making it easy for users to view and navigate references.

Props

| Prop Name | Type | Description | |-------------------------------|-----------------------|-------------| | message | MessageType | The message containing citations and related metadata. | | fileIcon | string | Path or URL to the file icon. | | arrowDownIcon | string | Path or URL to the arrow icon for toggling citation details. | | containerClassName | string (optional) | Additional class names for the outer container. | | buttonClassName | string (optional) | Additional class names for the toggle button. | | citationClassName | string (optional) | Additional class names for individual citation items. | | citationDescriptionClassName| string (optional) | Additional class names for citation descriptions. | | citationMetadataClassName | string (optional) | Additional class names for citation metadata. |

MessageType Structure

interface CitationMetadata {
    page_index: number;
}

interface CitationType {
    citation_number?: number;
    title?: string;
    url?: string;
    description?: string;
    metadata: CitationMetadata;
}

interface MessageType {
    id?: string;
    role?: string;
    content?: string;
    citations?: CitationType[];
    citationDisplayType?: string;
}

Example Usage

import Citation from "./Citation";

const message = {
  citations: [
    {
      citation_number: 1,
      title: "Sample Citation",
      url: "https://example.com",
      description: "This is a detailed description of the citation.",
      metadata: {
        page_index: 12,
      },
    },
  ],
  citationDisplayType: "expanded",
};

<Citation
  message={message}
  fileIcon="/path/to/file-icon.png"
  arrowDownIcon="/path/to/arrow-down-icon.png"
/>

Features

• Expandable Details: Toggle detailed descriptions and metadata for each citation.
• Clickable Links: Open citation URLs in a new tab.
• Customizable Styling: Add custom styles using the provided className props.

Installation

npm i @e-llm-studio/uiexplainability

Integration

1. Import the required component:

   import ThinkingResponse from "your-library-name/ThinkingResponse";
   import Citation from "your-library-name/Citation";

2. Provide the required props as per your use case.

3. Add any additional styles if needed.

License

This library is licensed under MIT License.

Contributing

Contributions are welcome! Please submit a pull request or open an issue for any feature requests or bug fixes.