alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Usage

When to use this component

Use the chatbot dialog component to:

  • Confirm destructive actions like closing the chat and losing conversation history
  • Prevent accidental loss of important conversations or work in progress
  • Ask for user consent before clearing chat data or switching contexts
  • Provide clear options when users attempt to navigate away from active conversations
  • Handle scenarios where user intent needs clarification before proceeding

The dialog is particularly important for longer conversations where users have invested time and effort, or when chat history contains valuable information they might need to reference.

When not to use this component

This component is not to be used independent of the standalone or modal chatbot containers as it may not work correctly

Avoid the confirmation dialog when:

  • The action is easily reversible or non-destructive
  • Users can quickly restart or recover their conversation state
  • The chat contains only brief, casual exchanges with little value
  • Frequent confirmations would interrupt the user experience unnecessarily
  • Alternative methods exist to preserve user work (like auto-save functionality)

For simple interactions or when users expect immediate responses to close actions, confirmation dialogs can feel obtrusive.

Implementation

The dialog component provides:

  • Clear explanation of what will happen if the user confirms the action
  • Prominent action buttons with clear labels (e.g., "Keep chat open" vs "Close and delete")
  • Modal overlay that focuses attention on the decision
  • Keyboard navigation support for accessibility
  • Option to cancel and return to the chat without losing progress
  • Consistent styling that matches the overall chatbot interface

The dialog typically appears when users click the close button on a chatbot that contains an active conversation.

Variants

Examples

Installation info
yarn add --dev @visual-framework/vf-chatbot-dialog

Changelog

Changelog

Assets



File system location: components/vf-chatbot-dialog

Find an issue on this page? Propose a change or discuss it.