Skip to main content

Chat App

Overview​

The Chat app is a real-time global messaging platform integrated into Lazarus Tools. It allows authenticated users to communicate with each other through text messages and images, featuring both manual image uploads and AI-powered image generation capabilities.

Table of Contents​

Features​

1. Real-Time Messaging​

  • Instant Communication: Messages are delivered in real-time to all connected users
  • Global Chat Room: All users share a single chat room for community-wide conversations
  • Message History: Chat history is preserved and accessible when you return to the app
  • Auto-Scrolling: The chat automatically scrolls to show new messages

2. User Profiles​

  • Automatic Profile Creation: Your profile is automatically created using your GitHub authentication details
  • Display Names: Shows your GitHub display name or email username
  • Avatar Images: Displays your GitHub profile picture in the chat
  • Profile Updates: Changes to your GitHub profile are automatically synced

3. Image Sharing​

Manual Image Upload​

  • Easy Upload: Click the gradient image button next to the message input
  • Select "Upload Image" from the popup menu
  • Supported Formats: Upload any standard image format (JPEG, PNG, GIF, etc.)
  • Automatic Storage: Images are securely stored in Supabase cloud storage
  • Click to View: Click any image in the chat to open it in full size in a new tab

AI Image Generation​

  • Powered by Google GenAI: Generate unique images from text descriptions
  • Access: Click the gradient image button, then select "Generate with AI"
  • Prompt System: Describe what you want to generate in natural language
  • Processing: Images are generated in seconds and automatically shared in chat
  • Examples of prompts:
    • "A futuristic cityscape at sunset"
    • "A cute robot playing guitar"
    • "Abstract art with blue and purple colors"

4. Message Interface​

Sending Messages​

  • Text Input: Type your message in the input field at the bottom
  • Send Button: Click the blue send button or press Enter to send
  • Multi-line Messages: Use Shift+Enter to create line breaks
  • Character Limit: No strict limit, but keep messages reasonable for readability

Message Display​

  • User Identification: Each message shows the sender's name and profile picture
  • Timestamps: Every message includes the time it was sent
  • Visual Distinction: Your messages appear on the right in blue, others' on the left
  • Image Previews: Images are displayed inline with automatic sizing

How to Use​

Getting Started​

  1. Login Required: You must be logged in with GitHub to access the chat
  2. Navigate to Chat: Click the chat icon (group/users icon) in the sidebar
  3. Automatic Setup: Your profile is created automatically on first use

Sending Your First Message​

  1. Type in the input field at the bottom of the chat window
  2. Press Enter or click the blue send button
  3. Your message appears immediately in the chat

Sharing Images​

To Upload an Image:​

  1. Click the colorful gradient button (image icon) next to the message input
  2. Select "Upload Image" from the popup menu
  3. Choose an image file from your device
  4. The image uploads automatically and appears in the chat
  5. You can add text along with the image if desired

To Generate an AI Image:​

  1. Click the colorful gradient button (image icon)
  2. Select "Generate with AI" from the popup menu
  3. A modal window appears
  4. Describe the image you want in the text field
  5. Click "Generate Image" or press Enter
  6. Wait a few seconds while the AI creates your image
  7. The generated image automatically posts to the chat

Viewing Chat History​

  • Automatic Loading: Recent messages (last 100) load when you open the chat
  • Scroll Up: Manually scroll up to see older messages
  • Persistent History: Messages remain available across sessions

Keyboard Shortcuts​

  • Enter: Send message
  • Shift + Enter: New line in message
  • Escape: Close image generation modal (when open)

Tips for Best Experience​

Message Etiquette​

  • Keep messages respectful and appropriate
  • Avoid spamming or flooding the chat
  • Use images thoughtfully to enhance conversations

Image Best Practices​

  • Upload Size: Large images are automatically optimized
  • AI Prompts: Be descriptive but concise for best AI results
  • Image Context: Add text messages to provide context for shared images

Performance Tips​

  • The chat performs best with a stable internet connection
  • If messages aren't appearing, refresh the page
  • Close the image generation modal if you decide not to generate

Troubleshooting​

Common Issues​

"Please log in to join the global chat"​

  • Solution: Ensure you're logged in with GitHub authentication
  • Navigate to the login page and authenticate with GitHub

Messages Not Sending​

  • Check your internet connection
  • Ensure you're not sending empty messages
  • Try refreshing the page

Images Not Uploading​

  • Verify the file is a valid image format
  • Check file size (very large files may take longer)
  • Ensure you have a stable internet connection

AI Image Generation Fails​

  • Try a different, simpler prompt
  • Check for any special characters that might cause issues
  • Ensure the service is available (may have temporary downtime)

Profile Issues​

  • Profile updates automatically from GitHub
  • If your name/avatar isn't showing correctly, try logging out and back in
  • Changes may take a moment to propagate

Privacy and Security​

Data Storage​

  • Messages are stored in Supabase's secure database
  • Images are stored in Supabase's secure cloud storage
  • Only authenticated users can access the chat

Visibility​

  • All messages are visible to all authenticated users
  • This is a global chat room - assume all messages are public
  • Do not share sensitive or private information

User Identification​

  • Users are identified by their GitHub profiles
  • Profile information is automatically synced
  • Anonymous messaging is not supported

Technical Details​

Real-Time Technology​

  • Powered by Supabase Realtime subscriptions
  • WebSocket connections for instant message delivery
  • Automatic reconnection on connection loss

Image Handling​

  • Manual uploads stored in Supabase Storage
  • AI images generated via Google GenAI API
  • All images are publicly accessible via generated URLs
  • Maximum display height of 300px in chat (click for full size)

Message Limits​

  • Last 100 messages loaded on initial page load
  • No hard limit on message length (use responsibly)
  • Images can be shared with or without accompanying text

Future Enhancements​

While not currently available, potential future features might include:

  • Private messaging between users
  • Message reactions or emojis
  • Voice messages
  • File sharing beyond images
  • Message search functionality
  • User presence indicators
  • Typing indicators
  • Message editing/deletion
  • Chat rooms or channels

Support​

If you encounter issues not covered in this documentation:

  • Check your browser console for error messages
  • Ensure you're using a modern, supported browser
  • Try clearing your browser cache and cookies
  • Log out and log back in to refresh your session

The Chat app provides a simple yet powerful way to communicate with other dashboard users, combining traditional text messaging with modern image sharing and AI generation capabilities.