Phoenix Chatbot

Overview

Phoenix is a modern, AI-powered chatbot interface designed with a clean, dark theme that provides an intuitive conversational experience. The interface emphasizes simplicity, readability, and user engagement through thoughtful design choices.

Interface Screenshots

Screenshot 1: Welcome Screen

The initial welcome screen displays a clean, centered greeting with "Hi," followed by "How can I help you today?" The header shows "Phoenix, by PhoenixGPT" with a Stream toggle in the top right corner.

• Clean, minimal welcome message
• Stream toggle control
• Dark theme with professional appearance
• Centered layout for focus

Screenshot 2: User Input State

Shows the interface when a user is typing a query. The input field at the bottom contains "hi phoenix what is french revolution" with a blue border indicating active state. The send button (arrow icon) is visible on the right side of the input field.

• Rounded input field with placeholder text
• Blue accent color for active states
• Clean send button with arrow icon
• Consistent spacing and typography

Screenshot 3: Chat Conversation

Displays a full conversation with user message in blue bubble on the right and Phoenix's response in a dark gray bubble on the left. Each message has an avatar - a blue circle for the user and a bot icon for Phoenix. The response provides detailed information about the French Revolution.

• Message bubbles with distinct colors
• Avatar system for user/assistant identification
• Proper text formatting and readability
• Responsive message layout

Screenshot 4: Message Detail View

A close-up view of Phoenix's response message showing the detailed text about the French Revolution. The message appears in a dark gray bubble with white text, demonstrating the high contrast design for optimal readability. At the top right is the copy button, to copy Phoenix's response.

• High contrast text for readability
• Copy button for copying the message
• Rounded message bubbles

Screenshot 5: Header with Stream Toggle Off

Shows the header section with the Stream toggle in the OFF position. The toggle appears as a gray switch, indicating that streaming mode is disabled. In this mode, Phoenix first compiles its answer, then generates the response. Slower. It also shows a delete button to delete the chat.

• Toggle Stream Mode
• Delete button
• Consistent header design

Screenshot 6: Header with Stream Toggle On

Displays the header with the Stream toggle in the ON position. The toggle shows a green color indicating that streaming mode is active. In this mode, Phoenix answers as it is generating the response with a typing effect, faster.

• Green accent for active streaming
• Faster output
• Typing effect

Screenshot 7: Agent Mode

Shows Phoenix in a specialized "agent mode" for healthcare in this case with a user request to "turn on agent mode for healthcare". Phoenix responds with information about its healthcare capabilities while including appropriate disclaimers about not being a replacement for professional medical advice. Such Agent modes can be activated in other fields. To know more visit Documentation

• Specialized mode capabilities
• Consistent UI in specialized modes

Color Palette

The Phoenix interface uses a carefully selected dark color palette that ensures high contrast and readability while maintaining visual appeal.

Key Components