AiSummaryModal Documentation

Overview

The AiSummaryModal is a feature designed to display an AI-generated summary of a dashboard tile. It incorporates chat functionality that allows users to ask follow-up questions about the data presented. This modal enhances user interaction by providing insights from complex datasets without requiring deep technical knowledge from the user.

Key Features:

• Displays AI-generated summaries of specific dashboard elements.
• Allows users to engage in a dialogue for follow-up questions.
• Caches conversation history for user context during interaction.
• Fetches data dynamically based on user queries to optimize performance.

Settings

tile

1. Type: Object
2. Description: Represents the dashboard tile whose data needs to be summarized. Expected to contain configuration and data properties unique to the tile.
3. Default Value: None (Required).

close

1. Type: Function
2. Description: A callback function that is invoked to close the modal. This function should handle whatever logic is necessary to hide or remove the modal from the UI.
3. Default Value: None (Required).

Internal State Variables

1. messages

   • Type: Array
   • Description: Stores the messages exchanged between the user and the AI assistant. Initialized as an empty array.
   • Default Value: [].

2. loading

   • Type: Boolean
   • Description: Indicates whether a response is being processed. It provides visual feedback to the user while messages are being sent or received.
   • Default Value: false.

3. error

   • Type: String / null
   • Description: Holds any error messages that arise during data fetching or message processing. Used to provide feedback to the user in case something goes wrong.
   • Default Value: null.

4. inputValue

   • Type: String
   • Description: Manages the content of the user's input field. It is updated as the user types their questions or comments.
   • Default Value: ''.

5. copied

   • Type: Boolean
   • Description: Indicates whether the text from the conversation has been copied to the clipboard. Triggers feedback through UI alterations.
   • Default Value: false.

6. showDataPreview

   • Type: Boolean
   • Description: Controls the visibility of the data preview section within the modal. When toggled, it displays additional details about the data source.
   • Default Value: false.

How It Works

Lifecycle

• Upon initial load, the AiSummaryModal accesses the tile prop to retrieve data and configuration settings.
• The component checks for cached conversation states and populates the messages if available.
• When the user sends a message, sendMessage() is called, which processes the message, optionally incorporates relevant tile data, and sends it to an API that leverages a machine learning model to generate insights.
• The modal supports an interactive flow where users can ask follow-up questions based on the AI's responses.

Data Handling

• The preprocessDataForQuery function filters the data based on the user's query. It intelligently reduces the amount of data sent to avoid overloading the AI service while aiming to provide relevant results.
• The component uses a caching strategy for the conversations, ensuring that users can review previous messages unless the page is refreshed.

AI Integrations

The AiSummaryModal utilizes an API endpoint '/api/ai/tile-summary' to communicate with an AI service. This backend integration is responsible for processing data, formulating responses, and returning AI-generated summaries based on user questions and tile data.

Billing Impacts

If the AI service behind the modal incurs costs based on API call frequency, message volume, or processing time, users and companies should monitor usage to manage expenses effectively. Considerations should be made for:

• Number of requests made to the AI service.
• Changes in user interaction patterns leading to more frequent queries.
• Potential costs associated with generating summaries versus actual utilization.

Use Cases & Examples

Use Case 1: Executive Dashboard Interaction

An executive utilizes a dashboard to monitor key performance indicators (KPIs) and wants to quickly grasp insights from large volumes of sales data. The AiSummaryModal provides AI-generated insights, enabling them to ask specific questions such as "What were the sales trends in Q3?" and receive a summary without sifting through raw data.

Use Case 2: Data Analysis by Analysts

A data analyst reviewing analytics dashboard data can use the AiSummaryModal to ask targeted questions about specific data segments. For example, "What were the highest-performing products last month?" This helps focus on relevant data insights without requiring complex queries.

Example Configuration

For the dashboard tile displaying marketing metrics, the AiSummaryModal could be configured as follows:

{
  "tile": {
    "id": "marketing-metrics",
    "title": "Marketing Performance",
    "data": [...],  // Array of marketing data records
    "config": {
      "visualizationType": "bar_chart",
      "aiSummary": {
        "workflowId": "fetch-marketing-data"
      }
    }
  },
  "close": function() {
    // Logic to close the modal
  }
}

In this example, the AI summary is linked to a specific workflow that aggregates marketing data, allowing users to interactively query for specific performance insights.