@e-llm-studio/uiexplainability v1.0.18

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

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

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.