# Chatbot

The AI Concierge Chatbot is the core UI element where users interact with your AI agents. It supports a variety of user input and output features designed for a smooth, accessible conversation experience.

You can embed the chatbot anywhere in your app via the Chatbot component. It auto-initializes using the useChat() hook and dynamically adapts to agent configuration and theme.

• Users can submit prompts using either Enter or the Submit button.
• The button becomes disabled during streaming or when the input is empty.
• On mobile, it's optimized for thumb access and visually responsive to interaction.

• Allows users to upload documents (PDF, TXT, CSV, DOCX, etc.).
• Files are sent to the agent for contextual understanding and response.
• Uploads are limited to supported types and sizes (enforced client-side).
• Displayed inline for review after upload.

See also: Attach File

• Each agent response includes a Copy icon.
• Clicking it copies the full message content to the user’s clipboard.
• Visual feedback (e.g. “Copied!”) confirms the action.

See also: Copy to Clipboard

• The input box supports:
  • Rich multi-line editing
  • Markdown formatting preview (via contenteditable or TinyMCE toggle)
  • Keyboard shortcuts (e.g., Shift+Enter for new line)
• Fallbacks to plain <div contenteditable> if advanced editor is disabled.
• Includes placeholder behavior and cleans pasted formatting.

The Chatbot component handles mounting like so:

<Box className={wrapper({ isTestingBot })}>
  <Box className={inner} id="phoenix-technologies-ai-concierge" />
</Box>