MinimizedThinkingSteps Component

Overview

The MinimizedThinkingSteps component is a flexible and interactive React component designed for displaying orchestrator and agent messages with an expandable view and optional animations. It also includes a "thinking" and "completed" response state with icons, allowing the user to manage response states effectively.

Features

• Expandable Sections: Toggle between collapsed and expanded view for messages.
• Customizable Icons: Supports custom icons for the thinking state, complete state, and arrow down icon.
• Smooth Animations: Includes animations for expanding/collapsing content.
• Markdown Support: Supports rendering of markdown formatted response messages.
• Interactive Workflow: Allows users to toggle the workflow state between "streaming" and "complete".

Props

| Prop Name | Type | Description | | ------------------------------- | --------------------------- | --------------------------------------------------------------- | | orchestratorAndAgentsMessages | ThinkingResponseData[] | List of orchestrator and agent messages to be displayed. | | isStreaming | boolean | Indicates whether the response is still streaming or completed. | | setIsStreaming | (value: boolean) => void | Function to set the streaming state. | | setUserToggled | (value: boolean) => void | Function to set the user toggled state. | | openAccordions | number[] | List of currently open accordion indices. | | setOpenAccordions | (value: number[]) => void | Function to set the open accordion state. | | thinkingBulbIcon | string | URL or path to the icon for the thinking state. | | completeIcon | string | URL or path to the icon for the completed state. | | arrowDownIcon | string | URL or path to the arrow icon for expanding/collapsing content. | | headerStyle | React.CSSProperties | Custom styles for the header. | | iconStyle | React.CSSProperties | Custom styles for the icons. | | arrowIconStyle | React.CSSProperties | Custom styles for the arrow icon. | | headerMessageStyle | React.CSSProperties | Custom styles for the header message. | | expandedContainerStyle | React.CSSProperties | Custom styles for the expanded container. | | headerClassName | string (optional) | Additional class name for the header. | | containerClassName | string (optional) | Additional class name for the container. |

Example Usage

import React, { useState } from "react";
import MinimizedThinkingSteps from "your-library-name/MinimizedThinkingSteps";

const App = () => {
  const [isStreaming, setIsStreaming] = useState(true);
  const [openAccordions, setOpenAccordions] = useState<number[]>([]);
  const [userToggled, setUserToggled] = useState(false);

  const orchestratorAndAgentsMessages = [
    {
      responseFrom: "Orchestrator",
      responsedata: "This is a sample response with **Markdown** support.",
      header_message: "Thinking about the next step...",
      finalResponseStatus: false,
    },
    // Add more messages as needed
  ];

  return (
    <div>
      <MinimizedThinkingSteps
        orchestratorAndAgentsMessages={orchestratorAndAgentsMessages}
        isStreaming={isStreaming}
        setIsStreaming={setIsStreaming}
        setUserToggled={setUserToggled}
        openAccordions={openAccordions}
        setOpenAccordions={setOpenAccordions}
        thinkingBulbIcon="/path/to/thinking-bulb-icon.png"
        completeIcon="/path/to/complete-icon.png"
        arrowDownIcon="/path/to/arrow-down-icon.png"
      />
    </div>
  );
};

export default App;


## Installation
```bash
npm i @e-llm-studio/uiexplainability

Integration

1. Import the required component:

   import MinimizedThinkingSteps from "your-library-name/MinimizedThinkingSteps";

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.

MinimizedThinkingStepsForParallelTools

MinimizedThinkingStepsForParallelTools is a React component that displays a collapsible workflow with a list of thinking steps. Each step contains a response message and an optional expandable section for detailed content.

Installation

To use this component, install the required dependencies:

npm install react-markdown

Props

| Prop Name | Type | Description | |----------------------------|--------------------------------------|-------------| | orchestratorAndAgentsMessages | ThinkingResponseData[] | Array of response objects, each containing response details. | | isStreaming | boolean | Controls the workflow expansion. | | setIsStreaming | function | Function to toggle the workflow visibility. | | openAccordions | any | Array storing indices of expanded steps. | | markdownRefs | React.MutableRefObject<HTMLDivElement[]> | References for markdown content. | | toggleExpandedResponse | (index: number) => void | Function to toggle expanded response view. | | expandedResponses | any | Stores indices of responses that are fully expanded. | | setOpenAccordions | function | Function to set the expanded accordions. | | thinkingBulbIcon | string | Icon URL for the thinking state. | | completeIcon | string | Icon URL for completed steps. | | arrowDownIcon | string | Icon URL for expanding/collapsing steps. | | ArrowIconBlue | string | Icon URL for 'View More' expansion. | | headerStyle | React.CSSProperties | Custom styles for the header. | | iconStyle | React.CSSProperties | Custom styles for icons. | | arrowIconStyle | React.CSSProperties | Custom styles for the arrow icon. | | responseFromStyle | React.CSSProperties | Custom styles for response sender text. | | responseMessageStyle | React.CSSProperties | Custom styles for response messages. | | customCircleStyle | React.CSSProperties | Custom styles for the circular icons. | | headerMessageStyle | React.CSSProperties | Custom styles for header messages. | | expandedContainerStyle | React.CSSProperties | Custom styles for expanded content. | | headerClassName | string | Custom class for the header. | | responseFromClassName | string | Custom class for the response sender. | | responseMessageClassName | string | Custom class for response messages. | | containerClassName | string | Custom class for the main container. | | viewMoreAccordian | React.CSSProperties | Custom styles for "View More" accordions. | | viewMoreExpand | React.CSSProperties | Custom styles for "View More" button. | | finalResponse | React.CSSProperties | Custom styles for the final response section. | | selectedHeaderMessage | number | User selected header index. | | setSelectedHeaderMessage | function | Selects the index that user wanted to see the response. | | isLargeResponse | boolean | For identifying the huge response. | | isSelectedHeaderStyleProps| string | For highlighting the user selected header meassge. | | setSelectedResponseData | function | Storing user selected response in state |

Usage

import React, { useState, useRef } from "react";
import MinimizedThinkingStepsForParallelTools from "your-package-name";

const Example = () => {
 const [isStreaming, setIsStreaming] = useState(false);
  const [openAccordions, setOpenAccordions] = useState([]);
  const [selectedHeaderMessage, setSelectedHeaderMessage] = useState();
  const [expandedResponses, setExpandedResponses] = useState([]);
  const [selectedResponseData, setSelectedResponseData] = useState('')
  const toggleExpandedResponse = (index) => {
    setExpandedResponses((prev) =>
      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
    );
  };
  const orchestratorAndAgentsMessages = [
    {
      responseFrom: "Agent",
      responsedata: "Response from agent...",
      header_message: "Processing Request",
      finalResponseStatus: false,
      explainability_id: "1",
      isParallelToolResponse: false,
    },
  ];

  return (
    <MinimizedThinkingStepsForParallelTools
      orchestratorAndAgentsMessages={orchestratorAndAgentsMessages}
      isStreaming={isStreaming}
      setIsStreaming={setIsStreaming}
      openAccordions={openAccordions}
      markdownRefs={markdownRefs}
      expandedResponses={expandedResponses}
      toggleExpandedResponse={(index) => {
        setExpandedResponses((prev) =>
          prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
        );
      }}
      setOpenAccordions={setOpenAccordions}
      thinkingBulbIcon="/icons/thinking.svg"
      completeIcon="/icons/complete.svg"
      arrowDownIcon="/icons/arrow-down.svg"
      ArrowIconBlue="/icons/arrow-blue.svg"
      redirectIcon="/icons/redirectIcon.svg"
    />
  );
};

export default Example;

Features

• Collapsible workflow section
• Expandable steps for detailed insights
• Supports Markdown rendering for responses
• Customizable styles and icons

License

MIT License