526 lines
29 KiB
HTML
526 lines
29 KiB
HTML
<div class="row">
|
|
<div class="col-lg-8">
|
|
<!-- Overview Section -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-3">Conversations & Messaging Overview</h5>
|
|
<p class="text-muted lead">
|
|
DocuPulse features a sophisticated real-time messaging system that enables seamless communication
|
|
between team members. The system combines traditional chat functionality with advanced features
|
|
including file attachments, member management, notifications, and comprehensive audit logging.
|
|
Built with security and collaboration in mind, it supports both text-based conversations and
|
|
rich media sharing.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Core Features -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Core Messaging Features</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Real-Time Communication</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Instant message delivery with polling</li>
|
|
<li class="mb-2">• Real-time message updates</li>
|
|
<li class="mb-2">• Message status tracking</li>
|
|
<li class="mb-2">• Typing indicators (planned)</li>
|
|
<li class="mb-2">• Message threading support</li>
|
|
<li class="mb-2">• Conversation history</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">File Attachments</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Multi-format file support (50+ types)</li>
|
|
<li class="mb-2">• Secure file upload (10MB limit)</li>
|
|
<li class="mb-2">• File preview and download</li>
|
|
<li class="mb-2">• Attachment size tracking</li>
|
|
<li class="mb-2">• File type validation</li>
|
|
<li class="mb-2">• Secure file storage</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Member Management</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Role-based conversation access</li>
|
|
<li class="mb-2">• Member invitation system</li>
|
|
<li class="mb-2">• Permission-based management</li>
|
|
<li class="mb-2">• Member removal capabilities</li>
|
|
<li class="mb-2">• Conversation ownership</li>
|
|
<li class="mb-2">• Admin-only controls</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<h6 style="color: var(--primary-color);" class="card-title mb-3">Notifications & Alerts</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2">• Real-time notification system</li>
|
|
<li class="mb-2">• Email notifications</li>
|
|
<li class="mb-2">• Message preview in alerts</li>
|
|
<li class="mb-2">• Attachment notifications</li>
|
|
<li class="mb-2">• Member change alerts</li>
|
|
<li class="mb-2">• Unread message tracking</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation Management -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Conversation Management</h5>
|
|
|
|
<!-- Conversation Creation -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-plus-circle me-2"></i>Conversation Creation
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted mb-3">Conversations can be created by administrators and managers with full member management capabilities.</p>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Creation Process</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>1.</code> Admin/Manager initiates creation</li>
|
|
<li class="mb-1"><code>2.</code> Sets conversation name and description</li>
|
|
<li class="mb-1"><code>3.</code> Selects initial members</li>
|
|
<li class="mb-1"><code>4.</code> System validates permissions</li>
|
|
<li class="mb-1"><code>5.</code> Creates conversation record</li>
|
|
<li class="mb-1"><code>6.</code> Sends member invitations</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Required Fields</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>name</code> - Conversation title</li>
|
|
<li class="mb-1"><code>description</code> - Optional description</li>
|
|
<li class="mb-1"><code>created_by</code> - Creator user ID</li>
|
|
<li class="mb-1"><code>members</code> - Initial member list</li>
|
|
<li class="mb-1"><code>created_at</code> - Creation timestamp</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Management -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-users me-2"></i>Member Management
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Adding Members</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>conversation_invite</code> - Invitation notification</li>
|
|
<li class="mb-1"><code>member_add</code> - Add to conversation</li>
|
|
<li class="mb-1"><code>permission_check</code> - Validate access</li>
|
|
<li class="mb-1"><code>notification_send</code> - Alert new member</li>
|
|
<li class="mb-1"><code>event_log</code> - Log member addition</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Removing Members</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>creator_protection</code> - Prevent creator removal</li>
|
|
<li class="mb-1"><code>member_remove</code> - Remove from conversation</li>
|
|
<li class="mb-1"><code>notification_send</code> - Alert removed member</li>
|
|
<li class="mb-1"><code>event_log</code> - Log member removal</li>
|
|
<li class="mb-1"><code>access_revoke</code> - Revoke conversation access</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Real-Time Messaging -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Real-Time Messaging System</h5>
|
|
|
|
<!-- Message Flow -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-comments me-2"></i>Message Flow
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Message Sending</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>1.</code> User composes message</li>
|
|
<li class="mb-1"><code>2.</code> Attaches files (optional)</li>
|
|
<li class="mb-1"><code>3.</code> Validates permissions</li>
|
|
<li class="mb-1"><code>4.</code> Saves message to database</li>
|
|
<li class="mb-1"><code>5.</code> Processes attachments</li>
|
|
<li class="mb-1"><code>6.</code> Sends notifications</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Message Receiving</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>1.</code> Polling checks for new messages</li>
|
|
<li class="mb-1"><code>2.</code> Fetches messages since last ID</li>
|
|
<li class="mb-1"><code>3.</code> Validates user access</li>
|
|
<li class="mb-1"><code>4.</code> Processes message data</li>
|
|
<li class="mb-1"><code>5.</code> Updates chat interface</li>
|
|
<li class="mb-1"><code>6.</code> Triggers UI events</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Polling System -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-sync me-2"></i>Real-Time Polling
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Polling Configuration</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>interval</code> - 3 seconds between polls</li>
|
|
<li class="mb-1"><code>last_message_id</code> - Track last received</li>
|
|
<li class="mb-1"><code>retry_attempts</code> - 5 failed attempts</li>
|
|
<li class="mb-1"><code>auto_reconnect</code> - Restart on failure</li>
|
|
<li class="mb-1"><code>state_management</code> - Track connection</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Error Handling</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Network failure recovery</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Automatic reconnection</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Duplicate message prevention</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>State synchronization</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Graceful degradation</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Attachments -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">File Attachment System</h5>
|
|
|
|
<!-- Supported File Types -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-paperclip me-2"></i>Supported File Types
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Document Types</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>PDF</code> - Portable Document Format</li>
|
|
<li class="mb-1"><code>DOCX/DOC</code> - Microsoft Word</li>
|
|
<li class="mb-1"><code>XLSX/XLS</code> - Microsoft Excel</li>
|
|
<li class="mb-1"><code>PPTX/PPT</code> - Microsoft PowerPoint</li>
|
|
<li class="mb-1"><code>TXT/RTF</code> - Text documents</li>
|
|
<li class="mb-1"><code>CSV/MD</code> - Data and markdown</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Media Types</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>JPG/PNG/GIF</code> - Image files</li>
|
|
<li class="mb-1"><code>MP3/WAV/OGG</code> - Audio files</li>
|
|
<li class="mb-1"><code>MP4/AVI/MOV</code> - Video files</li>
|
|
<li class="mb-1"><code>ZIP/RAR/7Z</code> - Archive files</li>
|
|
<li class="mb-1"><code>PY/JS/HTML</code> - Code files</li>
|
|
<li class="mb-1"><code>DWG/AI/PSD</code> - Design files</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attachment Security -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-shield-alt me-2"></i>Attachment Security
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Upload Security</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>file_validation</code> - Type and size checks</li>
|
|
<li class="mb-1"><code>secure_filename</code> - Sanitize filenames</li>
|
|
<li class="mb-1"><code>size_limit</code> - 10MB maximum</li>
|
|
<li class="mb-1"><code>virus_scan</code> - Malware detection</li>
|
|
<li class="mb-1"><code>access_control</code> - Permission validation</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Download Security</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Member-only access</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Secure file serving</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Download tracking</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Audit logging</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>File integrity checks</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification System -->
|
|
<div class="mb-5">
|
|
<h5 style="color: var(--primary-color);" class="mb-4">Notification System</h5>
|
|
|
|
<!-- Notification Types -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-bell me-2"></i>Notification Types
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Conversation Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>conversation_invite</code> - Member invitation</li>
|
|
<li class="mb-1"><code>conversation_invite_removed</code> - Member removal</li>
|
|
<li class="mb-1"><code>conversation_message</code> - New message</li>
|
|
<li class="mb-1"><code>conversation_created</code> - New conversation</li>
|
|
<li class="mb-1"><code>conversation_updated</code> - Settings changed</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Message Events</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><code>message_create</code> - Message sent</li>
|
|
<li class="mb-1"><code>message_attachment</code> - File attached</li>
|
|
<li class="mb-1"><code>message_mention</code> - User mentioned</li>
|
|
<li class="mb-1"><code>message_reply</code> - Message replied to</li>
|
|
<li class="mb-1"><code>message_edit</code> - Message edited</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Delivery -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-envelope me-2"></i>Notification Delivery
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">In-App Notifications</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Real-time updates</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Unread count tracking</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Notification center</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Message previews</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Mark as read</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted mb-2">Email Notifications</h6>
|
|
<ul class="list-unstyled small">
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>SMTP integration</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>HTML email templates</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Message content preview</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Direct conversation links</li>
|
|
<li class="mb-1"><i class="fas fa-check text-success me-2"></i>Unsubscribe options</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<!-- Quick Reference -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-info-circle me-2"></i>Quick Reference
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Conversation Roles</h6>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Creator</span>
|
|
<span class="badge bg-primary">Full Control</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Admin</span>
|
|
<span class="badge bg-danger">Manage All</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Manager</span>
|
|
<span class="badge bg-warning">Manage Members</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Member</span>
|
|
<span class="badge bg-success">Send Messages</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">File Limits</h6>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Max File Size</span>
|
|
<span class="badge bg-info">10MB</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Supported Types</span>
|
|
<span class="badge bg-success">50+</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="small">Polling Interval</span>
|
|
<span class="badge bg-warning">3s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message Features -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-comment-dots me-2"></i>Message Features
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Real-time message delivery
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
File attachment support
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Message threading
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Conversation history
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Message search
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Read receipts
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Features -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-shield-alt me-2"></i>Security Features
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled mb-0">
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Member-only access control
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
File type validation
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Secure file storage
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Message encryption
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
Audit logging
|
|
</li>
|
|
<li class="mb-2 small">
|
|
<i class="fas fa-check text-success me-2"></i>
|
|
CSRF protection
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Stack -->
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0" style="color: var(--primary-color);">
|
|
<i class="fas fa-code me-2"></i>Technical Stack
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Backend</h6>
|
|
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">Flask + SQLAlchemy</div>
|
|
<small class="text-muted">Message processing</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Frontend</h6>
|
|
<div class="p-2" style="background-color: var(--secondary-bg-light); border-radius: 6px;">
|
|
<div class="fw-bold" style="color: var(--secondary-color);">JavaScript + jQuery</div>
|
|
<small class="text-muted">Real-time updates</small>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<h6 class="text-muted mb-2">Database</h6>
|
|
<div class="p-2" style="background-color: var(--primary-bg-light); border-radius: 6px;">
|
|
<div class="fw-bold" style="color: var(--primary-color);">PostgreSQL</div>
|
|
<small class="text-muted">Message storage</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|