{% load static %} WebChat Demo - Unicom

🚀 WebChat Interactive Demo

Try out the Unicom WebChat component! Send messages, upload images and audio, create multiple chats, and experience all the features in action.

{% if user.is_authenticated %}

👤 Logged in as: {{ user.username }} ({{ user.email }})

Status: Authenticated User - Your chats are saved to your account

{% else %}

👤 Status: Guest User (session-based)

💡 Your chat history will be preserved if you log in later!

{% endif %}
ℹī¸ Note: This demo page is only available when Django is running with DEBUG=True. It demonstrates the full WebChat functionality including multi-chat support, media uploads, and real-time messaging.

đŸ’Ŧ Full-Featured Chat Interface

Click "New Chat" to start a conversation. Try sending text, uploading images or audio files, and switching between multiple chats.

📱 Messaging Features

  • Send text messages
  • Upload and display images
  • Upload and play audio files
  • HTML content rendering
  • Real-time updates via WebSocket (with fallback to polling or WebSocket-only mode)
  • Load earlier messages

đŸ’Ŧ Multi-Chat Support

  • View all your chats in sidebar
  • Create new chats
  • Switch between chats
  • See last message preview
  • Timestamp for each chat
  • Mobile-responsive layout

🎨 Customization

  • Light and dark themes
  • Custom colors via CSS
  • Adjustable height and width
  • Configurable auto-refresh
  • Custom fonts and borders
  • Responsive design

🔐 User Management

  • Guest user support (session)
  • Authenticated user support
  • Guest-to-user migration
  • Automatic account linking
  • Chat history preservation
  • Member integration

⚡ Performance

  • WebSocket push with configurable fallback or retry-only modes
  • Only refreshes when visible
  • Cursor-based pagination
  • Smooth animations
  • Optimized rendering
  • Minimal network usage

🛠ī¸ Developer Features

  • LitElement web components
  • Modular architecture
  • Django template tag
  • REST API integration
  • CSRF protection
  • Error handling

📖 Usage Example

Embed the chat component in your Django templates with just a few lines of code: 

{% verbatim %}{% load unicom_tags %}

<!-- Simple single-chat component -->
{% webchat_component %}

<!-- Multi-chat component with sidebar -->
<script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/+esm"></script>
<script type="module" src="{% static 'unicom/webchat/webchat-with-sidebar.js' %}"></script>
<unicom-chat-with-sidebar
    theme="light"
    auto-refresh="5"
    style="height: 700px;">
</unicom-chat-with-sidebar>

<!-- With custom styling -->
<unicom-chat-with-sidebar
    theme="dark"
    auto-refresh="3"
    style="
        height: 800px;
        --unicom-primary-color: #ff5722;
        --unicom-border-radius: 16px;
    ">
</unicom-chat-with-sidebar>

<!-- WebSocket-only mode (retry on failure, no polling fallback) -->
<unicom-chat-with-sidebar
    theme="light"
    enable-websocket-only="true"
    style="height: 700px;">
</unicom-chat-with-sidebar>{% endverbatim %}

đŸŽ¯ Try These Actions