Usage

1. Drag and Drop: Drag the ConversationBlock from the widget tree onto your screen in OutSystems Service Studio.

2. Bind Inputs: Populate the input parameters with your application's data and logic.

3. Implement Logic: Connect the UI events (e.g., button clicks, text input submission, speech recognition results) to your backend logic (e.g., calling the Gemini API, handling message lists, managing loading states).

Input Parameters

The ConversationBlock exposes the following input parameters for configuration and data binding:

• MainHeading

  • Data Type: Text

  • Description: The primary title or heading displayed at the top of the conversation component (e.g., "AI Voice Assistant," "Customer Support Chat").

• SecondHeading

  • Data Type: Text

  • Description: A secondary title or subtitle, typically used for a brief instruction or contextual message below the main heading (e.g., "Speak or type to interact," "How can I help you today?").

• Is_VoiceInput

  • Data Type: Boolean

  • Description: Controls the visibility and active state of the microphone button and related voice input functionalities. Set to True to enable the voice input option, False to hide it.

• Is_VoiceOutput

  • Data Type: Boolean

  • Description: A flag to indicate whether text-to-speech (TTS) output should be enabled. While this parameter controls the UI's readiness, the actual TTS functionality needs to be implemented in your application's logic.

• Is_Loading

  • Data Type: Boolean

  • Description: When set to True, a loading spinner is displayed, indicating that the component is waiting for a response (e.g., from an AI backend). Set to False to hide the spinner.

• Mesasges 

  • Data Type: List of (Structure/Entity for Message)

  • Description: The list of conversation messages to be displayed in the chat area. Each item in this list should be a structure or entity with the following properties:

    • Avatar (Image/Text for URL): The URL or identifier for the avatar image of the message sender.

    • BelowText (Text): Optional text to display below the main message bubble (e.g., a timestamp, sender name, or status).

    • Is_Sender (Boolean): A flag indicating the sender of the message. Set to True if the message is from the current user, False if it's from the AI or another participant. This determines message alignment and styling.

    • Message (Text): The main text content of the message.

    • UniqueID (Text): A unique identifier for the message. This is crucial for efficient rendering and updates, especially when messages are added or removed dynamically.

• InputValue

  • Data Type: Text

  • Description: Binds to the current text content of the user's input field. Use this to get the text typed by the user or to pre-populate the input area.

• Is_Typing

  • Data Type: Boolean

  • Description: When set to True, the animated "typing indicator" (three dots with AI avatar) is displayed at the bottom of the conversation area, signaling that the AI is generating a response. Set to False when the response is ready.

• TypingPersonImage

  • Data Type: Image (or Text for URL)

  • Description: If a group of people is chatting so it's helpful to identify which one is currently typing.

• ShowAnimation

  • Data Type: Boolean

  • Description: Controls whether the message entry animations (slide-in effects for new messages) are enabled. Set to True to show animations, False to disable them.

• Height

  • Data Type: Text

  • Description: Defines the explicit height of the conversation component. This can be a CSS value (e.g., "70vh", "500px", "100%"). Useful for controlling the component's vertical space within its parent container.