Chat Interface - Iframe Project

A modern chat interface designed to be embedded in other applications via iframe, with integrated API support.

Features

• Modern Chat UI: Clean, responsive design with message bubbles positioned in bottom right
• API Integration: Connects to your custom API endpoint for intelligent responses
• Real-time API Communication: Live API calls with proper error handling
• Fallback Responses: Graceful handling when API is unavailable
• Quick Reply Buttons: Pre-defined message shortcuts
• Message Timestamps: Shows when each message was sent
• Smooth Animations: Message slide-in effects and transitions
• Cross-browser Compatibility: Works in all modern browsers
• Iframe Communication: Two-way communication via postMessage API
• Mobile Responsive: Optimized for desktop and mobile devices

API Integration

The chat interface is configured to send user questions to your API:

• Endpoint: https://localhost:7050/api/Roster/GetRosterInformation
• Method: GET
• Parameter: question (URL query parameter)
• Example: GET https://localhost:7050/api/Roster/GetRosterInformation?question=What%20is%20the%20roster%20information

Request Headers

Accept: text/plain, application/json

Expected API Response Format

Your API returns a plain string, which will be displayed directly in the chat.

Example:

"Here is the roster information you requested..."

Authentication

Currently, no authentication headers are sent with requests. If your API requires authentication, you will receive a 401 error with instructions on how to configure authentication.

Chat Features

• 🤖 API-Powered Responses: Real-time answers from your custom API endpoint
• 💬 Real-time Messaging: Instant message delivery with typing indicators
• ⚡ Quick Replies: One-click responses for common messages
• 📱 Mobile Optimized: Touch-friendly interface for mobile devices
• 🎨 Beautiful Design: Modern gradient themes with glassmorphism effects

Files

• index.html - Main chat interface
• style.css - Modern chat styling with animations
• script.js - Chat functionality and bot responses
• server.py - HTTP server for hosting
• test.html - Example page showing iframe embedding with controls

How to Use

Quick Start:

1. Start the server:

   cd "c:\Apollo\Iframe_Project"
   python server.py

2. Test the chat: Open http://localhost:8000 in your browser

3. View iframe example: Open test.html in your browser

Embedding in Another Project:

<iframe 
    src="http://localhost:8000" 
    width="400" 
    height="500" 
    frameborder="0"
    title="Chat Interface">
</iframe>

Chat Bot Responses

The bot responds intelligently to:

• Greetings: "Hello", "Hi" → Friendly welcome
• Questions: "How are you?" → Positive response
• Thanks: "Thank you" → Acknowledgment
• Help: "Help" → Assistance offer
• Name: "What's your name?" → Bot introduction
• Goodbye: "Bye" → Farewell message
• General: Random encouraging responses

Iframe Communication

The chat interface communicates with parent windows via postMessage:

Messages Sent to Parent:

{
  source: 'chat-iframe',
  data: {
    action: 'message-sent',
    messageCount: 5,
    isUser: true,
    text: "Hello!",
    timestamp: "2025-11-14T10:30:00.000Z"
  }
}

Messages from Parent:

// Send message to chat from parent window
iframe.contentWindow.postMessage({
  source: 'parent-window',
  action: 'send-message',
  message: 'Hello from parent!'
}, '*');

Customization

Modify Bot Responses:

Edit the botResponses array in script.js to add custom responses.

Change Appearance:

• Colors: Modify gradient colors in style.css
• Avatars: Change emoji avatars in the HTML/JS
• Layout: Adjust spacing and sizing in CSS

Add Features:

• File upload support
• Message reactions
• User authentication
• Message history persistence

Browser Compatibility

• ✅ Chrome, Firefox, Safari, Edge (modern versions)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)
• ✅ Responsive design adapts to different screen sizes
• ✅ Touch-friendly interface for mobile devices

Example Integration

The test.html file demonstrates:

• Iframe embedding
• Parent-to-chat communication
• Message logging
• Control buttons for testing