Skip to content

Inline AI Feedback

Overview

The FioriInlineAIFeedback is a lightweight feedback component is designed to collect binary user feedback using thumbs up and thumbs down buttons.

Fiori Inline AI Feedback Anatomy

Key Features

  • Toggle behavior: Click a selected button to deselect it.
  • Mutually exclusive selection: Only one thumb selected at a time.
  • Visual feedback: Icons switch between outlined and filled variants.
  • Responsive layout using FlowRow.
  • Full accessibility support with screen readers.
  • Customizable colors, spacing, and typography.

Quick Start

var selection by remember { mutableStateOf(InlineAIFeedbackSelection.NONE) }

FioriInlineAIFeedback(
    text = "Was this response helpful?",
    selection = selection,
    onSelectionChange = { newSelection ->
        selection = newSelection
        when (newSelection) {
            InlineAIFeedbackSelection.UP -> handlePositiveFeedback()
            InlineAIFeedbackSelection.DOWN -> handleNegativeFeedback()
            InlineAIFeedbackSelection.NONE -> handleDeselect()
        }
    }
)

Parameters

Parameter Type Default Description
modifier Modifier Modifier Modifier to apply to the feedback row
text String Localized Feedback prompt text
selection InlineAIFeedbackSelection NONE Current selection state (NONE, UP, DOWN)
onSelectionChange (InlineAIFeedbackSelection) -> Unit {} Callback invoked when selection changes
enabled Boolean true Whether buttons are enabled
colors InlineAIFeedbackColors Default Color configuration
styles InlineAIFeedbackStyles Default Spacing and dimension configuration
textStyles InlineAIFeedbackTextStyles Default Typography configuration

Customization

Colors

FioriInlineAIFeedback(
    text = "How was this?",
    selection = selection,
    onSelectionChange = { selection = it },
    colors = InlineAIFeedbackDefaults.colors(
        textColor = Color(0xFF1D1D1F),
        thumbsButtonColors = FioriStandardIconButtonDefaults.colors(
            contentColor = MaterialTheme.colorScheme.primary
        )
    )
)

Styles

FioriInlineAIFeedback(
    text = "Rate this",
    selection = selection,
    onSelectionChange = { selection = it },
    styles = InlineAIFeedbackDefaults.styles(
        startPadding = 16.dp,
        topPadding = 16.dp,
        textToThumbsSpacing = 12.dp,
        thumbsSpacing = 8.dp
    )
)

Text Styles

FioriInlineAIFeedback(
    text = "Your feedback matters",
    selection = selection,
    onSelectionChange = { selection = it },
    textStyles = InlineAIFeedbackDefaults.textStyles(
        textStyle = MaterialTheme.typography.titleSmall
    )
)

API Reference

  • com.sap.cloud.mobile.fiori.compose.ai.inlineaifeedback.FioriInlineAIFeedback
  • com.sap.cloud.mobile.fiori.compose.ai.inlineaifeedback.InlineAIFeedbackSelection

The component uses a FlowRow layout for responsive behavior:

FlowRow(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Start,
    verticalArrangement = Arrangement.Center,
    maxItemsInEachRow = Int.MAX_VALUE,
    maxLines = Int.MAX_VALUE
)

Characteristics:

  • Full Width: The content spans the entire available width.
  • Flexible Wrapping: Content wraps naturally on narrow screens.
  • Text Weight: The prompt text uses weight(1f) to fill the available space.
  • Button Alignment: Buttons are aligned to the end using Arrangement.End.
  • Text Limiting: The prompt is limited to two lines with an ellipsis.

On wide screens, the text and buttons appear on one line. On narrow screens, the buttons wrap to a second line.

Accessibility Features

The component provides comprehensive accessibility support:

Semantics

.semantics {
    contentDescription = "Thumbs up"  // Localized
    selected = upSelected              // Selection state
    role = Role.Button                 // Button role
    if (!enabled) disabled()           // Disabled state
}

Features:

  • Content Descriptions: Provides localized descriptions from string resources.
  • Selection State: Screen readers announce when users select buttons.
  • Role Semantics: Ensures proper button roles for assistive technologies.
  • Disabled State: Communicates correctly to screen readers.
  • Icon Descriptions: Set to null (parent provides description)

Integration Examples

In Writing Assistant Sheet

The component is used in the DefaultPage of the Writing Assistant Sheet:

if (showInlineFeedback && !isError) {
    FioriInlineAIFeedback(
        enabled = thumbsEnabled,
        selection = when {
            thumbsUpSelected -> InlineAIFeedbackSelection.UP
            thumbsDownSelected -> InlineAIFeedbackSelection.DOWN
            else -> InlineAIFeedbackSelection.NONE
        },
        onSelectionChange = { selection ->
            when (selection) {
                InlineAIFeedbackSelection.UP -> {
                    onThumbsUp()
                }
                InlineAIFeedbackSelection.DOWN -> {
                    onNavigateToPage(WritingAssistantSheetPage.FEEDBACK)
                }
                InlineAIFeedbackSelection.NONE -> {
                    // No-op on deselect
                }
            }
        },
        colors = InlineAIFeedbackDefaults.colors(
            textColor = sheetColors.footerColors().value.textColor().value,
            thumbsButtonColors = sheetColors.thumbsButtonColors().value
        ),
        styles = InlineAIFeedbackDefaults.styles(
            startPadding = sheetStyles.feedbackRowStartPadding().value,
            topPadding = sheetStyles.feedbackRowTopPadding().value,
            endPadding = sheetStyles.feedbackRowEndPadding().value,
            bottomPadding = sheetStyles.feedbackRowBottomPadding().value
        )
    )
}

Workflow:

  1. Thumbs Up: Triggers the positive feedback handler.
  2. Thumbs Down: Navigates to the detailed feedback page.
Last update: November 17, 2025