Update PROMPT.md, SUMMARY.md and add ROADMAP

This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-12-15 16:36:25 -03:00
parent 25355f7066
commit de004aa82b
6 changed files with 1161 additions and 2 deletions

View file

@ -580,3 +580,100 @@ HEAR variable
SEND MAIL to, subject, body, attachments
SEND TEMPLATE recipients, template, variables
```
---
## Conversation Examples (WhatsApp Style)
All conversation examples throughout the book use the WhatsApp-style HTML format. This provides a familiar, visually consistent representation of bot interactions.
### Standard Format
```html
<div class="wa-chat">
<div class="wa-message user">
<div class="wa-bubble">
<p>User message goes here</p>
<div class="wa-time">10:30</div>
</div>
</div>
<div class="wa-message bot">
<div class="wa-bubble">
<p>Bot response goes here</p>
<div class="wa-time">10:30</div>
</div>
</div>
</div>
```
### Message Classes
| Class | Usage |
|-------|-------|
| `wa-chat` | Container for the conversation |
| `wa-message` | Individual message wrapper |
| `wa-message user` | User message (right-aligned, colored) |
| `wa-message bot` | Bot message (left-aligned) |
| `wa-bubble` | Message bubble with styling |
| `wa-time` | Timestamp display |
### Formatting Guidelines
1. **User messages** — Use `wa-message user` class
2. **Bot messages** — Use `wa-message bot` class
3. **Timestamps** — Include `wa-time` div with realistic times
4. **Multi-line responses** — Use separate `<p>` tags for each line
5. **Status indicators** — Use text indicators (Success, Error, etc.) not emojis
6. **Bold text** — Use `<strong>` for emphasis
7. **Attachments** — Indicate with text like "[Attachment: filename.pdf]"
### Complete Example
```html
<div class="wa-chat">
<div class="wa-message bot">
<div class="wa-bubble">
<p>Hello! How can I help you today?</p>
<div class="wa-time">10:30</div>
</div>
</div>
<div class="wa-message user">
<div class="wa-bubble">
<p>I want to enroll in computer science</p>
<div class="wa-time">10:31</div>
</div>
</div>
<div class="wa-message bot">
<div class="wa-bubble">
<p>I'll help you enroll! What's your name?</p>
<div class="wa-time">10:31</div>
</div>
</div>
<div class="wa-message user">
<div class="wa-bubble">
<p>Sarah Chen</p>
<div class="wa-time">10:31</div>
</div>
</div>
<div class="wa-message bot">
<div class="wa-bubble">
<p><strong>Success:</strong> Welcome to Computer Science, Sarah!</p>
<p>Your enrollment ID is: ENR-2025-0142</p>
<div class="wa-time">10:31</div>
</div>
</div>
</div>
```
### When to Use Each Format
| Content Type | Format |
|--------------|--------|
| Interface screenshots | SVG wireframe |
| System architecture | SVG diagram |
| Data flow diagrams | SVG diagram |
| Bot conversations | WhatsApp HTML |
| API examples | Code blocks |
| Configuration | Code blocks |
The WhatsApp chat styling is defined in `src/whatsapp-chat.css` and automatically included in the book build.

204
src/ROADMAP.md Normal file
View file

@ -0,0 +1,204 @@
# General Bots Roadmap 2018-2026
<style>
.roadmap-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.roadmap-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.roadmap-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
justify-content: center;
align-items: center;
}
.roadmap-overlay.active {
display: flex;
}
.roadmap-popup {
background: #FFFFFF;
border-radius: 16px;
width: 95vw;
height: 90vh;
max-width: 1800px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
@media (prefers-color-scheme: dark) {
.roadmap-popup {
background: #1E293B;
}
}
.roadmap-popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid #E2E8F0;
}
@media (prefers-color-scheme: dark) {
.roadmap-popup-header {
border-bottom-color: #334155;
}
}
.roadmap-popup-title {
font-size: 1.25rem;
font-weight: 700;
color: #1E1B4B;
margin: 0;
}
@media (prefers-color-scheme: dark) {
.roadmap-popup-title {
color: #F1F5F9;
}
}
.roadmap-popup-close {
background: #F1F5F9;
border: none;
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
color: #64748B;
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-popup-close:hover {
background: #E2E8F0;
color: #334155;
}
@media (prefers-color-scheme: dark) {
.roadmap-popup-close {
background: #334155;
color: #94A3B8;
}
.roadmap-popup-close:hover {
background: #475569;
color: #E2E8F0;
}
}
.roadmap-iframe {
flex: 1;
width: 100%;
border: none;
}
</style>
<button class="roadmap-btn" onclick="openRoadmap()">
View Interactive Roadmap
</button>
<div class="roadmap-overlay" id="roadmap-overlay" onclick="closeRoadmap(event)">
<div class="roadmap-popup" onclick="event.stopPropagation()">
<div class="roadmap-popup-header">
<h3 class="roadmap-popup-title">General Bots Roadmap 2018-2026</h3>
<button class="roadmap-popup-close" onclick="closeRoadmap()">X</button>
</div>
<iframe class="roadmap-iframe" src="assets/roadmap.html" title="Roadmap"></iframe>
</div>
</div>
<script>
function openRoadmap() {
document.getElementById('roadmap-overlay').classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeRoadmap(event) {
if (!event || event.target.id === 'roadmap-overlay') {
document.getElementById('roadmap-overlay').classList.remove('active');
document.body.style.overflow = '';
}
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeRoadmap();
});
</script>
---
## Timeline Overview
| Period | Focus | Features | Key Deliverables |
|--------|-------|----------|------------------|
| **2018-2024** | v1-v5 Pre-LLM | 12 ✅ | Package System, TALK/HEAR, NLP/BERT, GPT-3.5, QR CODE, SET SCHEDULE |
| **2024** | v6 Foundation | 8 ✅ | Rust Core, Migration v5→v6, New Architecture, PostgreSQL, Vault, Minimal Flow |
| **2025 H1** | Rust Migration | 10 ✅ | BASIC Engine, Channels, Drive (S3), Email, REST API, WhatsApp, Telegram, PDF |
| **2025 H2** | Features & AUTOTASK | 19 ✅ | Tasks AI, KB, Vector DB, Tools, Generators, Multimodal, NVIDIA GPU/LXC, Paper, Research, Calendar, Meet |
| **2026 Q1** | Tasks AI GO ⭐ | 12 📋 | Production Autonomous, Gmail, Outlook, Google Drive, OneDrive, Google/Outlook Calendars, Transfer to Human |
| **2026 Q2** | Collaboration | 10 📋 | Multi-Agent, Teams, Google Meet, Zoom, Slack, Discord, Docker, Compliance, Marketplace |
| **2026 Q3** | Workflow & CRM | 2 📋 | Workflow Designer, CRM Integration |
| **2026 Q4** | Enterprise | 4 📋 | Mobile Apps, Enterprise SSO, White Label, Advanced Monitoring |
**Total: 77 Features** (49 Complete ✅ • 28 Planned 📋)
---
## Feature Highlights
### Tasks (AI Autonomous) GO
The flagship feature enabling fully autonomous AI task execution:
- Human provides intent in natural language
- AI creates execution plan
- AI generates code/content
- AI deploys result
- Human reviews and approves
**Available in:** 2025 H2 (scaffolding), Q1 2026 (production)
### Generators
| Generator | Purpose |
|-----------|---------|
| BOT | Conversational bots |
| APP | Full applications |
| SITE | HTMX websites |
| GENERAL | General content |
| LANDPAGE | Landing pages |
---
## Technology Stack
**Backend:** Rust, Actix-Web, Tokio, SQLx
**Database:** PostgreSQL
**Storage:** MinIO (S3-compatible)
**Cache:** Valkey (Redis alternative)
**UI:** HTMX, Askama templates
**Desktop/Mobile:** Tauri
---
## Status Legend
| Status | Description |
|--------|-------------|
| Complete | Feature is fully implemented and available |
| In Progress | Feature is currently being developed |
| Planned | Feature is scheduled for future development |
Click the **View Interactive Roadmap** button above to explore all 77 features with detailed descriptions. Scroll horizontally to navigate the timeline from 2018 to 2026.

View file

@ -1,6 +1,7 @@
# Summary
[Executive Vision](./executive-vision.md)
[Roadmap 2024-2026](./ROADMAP.md)
[Introduction](./introduction.md)
# Part I - Getting Started
@ -399,8 +400,6 @@
- [Backup and Recovery](./19-maintenance/backup-recovery.md)
- [Troubleshooting](./19-maintenance/troubleshooting.md)
- [Appendix D: Documentation Style](./16-appendix-docs-style/conversation-examples.md)
- [SVG and Conversation Standards](./16-appendix-docs-style/svg.md)
[Glossary](./glossary.md)
[Contact](./contact/README.md)

View file

@ -0,0 +1,216 @@
# General Bots Complete Roadmap 2018-2026
## Merged Timeline: User Requirements + botbook Documentation
This table merges the proposed timeline with all features documented in botbook/src.
---
## Summary
| Period | Focus | Feature Count | Status |
|--------|-------|---------------|--------|
| 2018-2024 | v1-v5 Pre-LLM | 12 | ✅ Complete |
| 2024 | v6 Foundation | 8 | ✅ Complete |
| 2025 H1 | Rust Migration | 10 | ✅ Complete |
| 2025 H2 | Features & Tasks | 10 | ✅ Complete |
| 2026 Q1 | Autonomous GO | 12 | 📋 Planned |
| 2026 Q2 | Collaboration | 12 | 📋 Planned |
| 2026 Q3 | AI Features | 8 | 📋 Planned |
| 2026 Q4 | Enterprise | 8 | 📋 Planned |
| **TOTAL** | | **80** | |
---
## 2018-2024: v1-v5 Pre-LLM Era ✅
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Package System (.gbai/.gbot/.gbkb/.gbdialog/.gbtheme) | Your list + botbook | 02-templates/ |
| 2 | TALK / HEAR Keywords | Your list + botbook | 06-gbdialog/keyword-talk.md |
| 3 | NLP / BERT Intent Recognition | Your list | 06-gbdialog/ |
| 4 | GPT-3.5 Integration | Your list | 08-config/llm-config.md |
| 5 | QR CODE Keyword | Your list + botbook | 06-gbdialog/keyword-qrcode.md |
| 6 | SET SCHEDULE Keyword | Your list + botbook | 06-gbdialog/keyword-set-schedule.md |
| 7 | LLM Keyword | Your list + botbook | 06-gbdialog/ |
| 8 | Node.js Core | Your list | Historical |
| 9 | Azure Bot Service | Your list + botbook | Historical |
| 10 | DirectLine API | botbook | Historical |
| 11 | MS Teams Bot | botbook | Historical |
| 12 | Web Server | botbook | Historical |
---
## 2024: v6 Rust Foundation ✅
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Migration v5 → v6 | Your list | 14-migration/ |
| 2 | Node.js → Rust Rewrite | Your list + botbook | 07-gbapp/architecture.md |
| 3 | New Rust Architecture | Your list + botbook | 07-gbapp/crates.md |
| 4 | Minimal Flow MVP | Your list | 07-gbapp/ |
| 5 | PostgreSQL + Diesel ORM | botbook | 15-appendix/schema.md |
| 6 | Auto-Bootstrap System | botbook | 01-introduction/ |
| 7 | Vault Secrets Management | botbook | 08-config/secrets-management.md |
| 8 | Basic HTMX UI | botbook | 04-gbui/htmx-architecture.md |
---
## 2025 H1: Rust Migration & Channels ✅
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | BASIC Engine (70+ keywords) | Your list + botbook | 06-gbdialog/keywords.md |
| 2 | System Automation (cron) | Your list + botbook | 11-features/automation.md |
| 3 | Web Chat Channel | Your list + botbook | 04-gbui/apps/chat.md |
| 4 | LLM Integration (multi-provider) | Your list + botbook | 08-config/llm-config.md |
| 5 | Drive Storage (S3) | Your list + botbook | 02-templates/gbdrive.md |
| 6 | Email System (IMAP/SMTP) | Your list + botbook | 11-features/email.md |
| 7 | REST API | Your list + botbook | 10-rest/ |
| 8 | **Telegram Channel** | botbook ROADMAP | 11-features/channels.md |
| 9 | **PDF Generation** | botbook ROADMAP | 06-gbdialog/keyword-generate-pdf.md |
| 10 | **WhatsApp Channel** | botbook ROADMAP | 11-features/channels.md |
---
## 2025 H2: Features & Autonomous Tasks ✅
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Tasks AI Autonomous (AUTOTASK) | Your list + botbook | 07-gbapp/autonomous-tasks.md |
| 2 | Knowledge Base (Vector) | Your list + botbook | 03-knowledge-base/ |
| 3 | Vector Database (Qdrant) | Your list + botbook | 03-knowledge-base/vector-collections.md |
| 4 | Tools System (MCP) | Your list + botbook | 09-tools/ |
| 5 | UI Minimal Suite | Your list + botbook | 04-gbui/ |
| 6 | APP Generator | Your list + botbook | 07-gbapp/autonomous-tasks.md |
| 7 | **BOT Generator** | botbook | 07-gbapp/autonomous-tasks.md |
| 8 | **SITE Generator** | botbook | 06-gbdialog/keyword-create-site.md |
| 9 | **LANDPAGE Generator** | botbook | 07-gbapp/autonomous-tasks.md |
| 10 | **Analytics Dashboard** | botbook | 04-gbui/apps/analytics.md |
---
## 2026 Q1: Autonomous GO ⭐ FLAGSHIP 📋
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | **Tasks AI GO** ⭐ | Your list + botbook | 07-gbapp/autonomous-tasks.md |
| 2 | Gmail Integration | Your list | 10-rest/email-api.md |
| 3 | Outlook/Hotmail | Your list | 10-rest/email-api.md |
| 4 | Google Drive | Your list | 08-config/drive.md |
| 5 | OneDrive | Your list | 08-config/drive.md |
| 6 | Google Calendar | Your list | 10-rest/calendar-api.md |
| 7 | Outlook Calendar | Your list | 10-rest/calendar-api.md |
| 8 | Speech to Text | Your list | 08-config/multimodal.md |
| 9 | Image Generation | Your list | 08-config/multimodal.md |
| 10 | Vision Analysis | Your list | 08-config/multimodal.md |
| 11 | **Transfer to Human** | botbook | 11-features/transfer-to-human.md |
| 12 | **LLM-Assisted Attendant** | botbook | 11-features/attendant-llm-assist.md |
---
## 2026 Q2: Collaboration Tools 📋
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Multi-Agent System | Your list + botbook | 11-features/multi-agent-orchestration.md |
| 2 | Bot Marketplace | Your list | Future |
| 3 | Compliance Suite | Your list + botbook | 04-gbui/apps/compliance.md |
| 4 | MS Teams Channel | Your list | 11-features/channels.md |
| 5 | Analytics Reports | Your list + botbook | 10-rest/analytics-api.md |
| 6 | **Google Meet** | botbook ROADMAP | 04-gbui/apps/meet.md |
| 7 | **Zoom Integration** | botbook ROADMAP | Future |
| 8 | **Slack Channel** | botbook ROADMAP | 11-features/channels.md |
| 9 | **Discord Channel** | botbook ROADMAP | 11-features/channels.md |
| 10 | **Google Sheets** | botbook ROADMAP | Future |
| 11 | **Excel Online** | botbook ROADMAP | Future |
| 12 | **Whiteboard Collaboration** | botbook | 10-rest/whiteboard-api.md |
---
## 2026 Q3: Advanced AI Features 📋
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Workflow Designer | Your list + botbook | 04-gbui/apps/designer.md |
| 2 | CRM Integration | Your list | 02-templates/template-crm.md |
| 3 | **Voice Synthesis (TTS)** | botbook ROADMAP | 08-config/multimodal.md |
| 4 | **ERP Integration** | botbook ROADMAP | 02-templates/template-erp.md |
| 5 | **Paper App (AI Writing)** | botbook | 04-gbui/apps/paper.md |
| 6 | **Research App (AI Search)** | botbook | 04-gbui/apps/research.md |
| 7 | **Player App (Media)** | botbook | 04-gbui/apps/player.md |
| 8 | **Sources App (Prompts)** | botbook | 04-gbui/apps/sources.md |
---
## 2026 Q4: Enterprise Scale 📋
| # | Feature | Source | Documentation |
|---|---------|--------|---------------|
| 1 | Mobile Apps (iOS/Android) | Your list + botbook | 13-devices/mobile.md |
| 2 | Enterprise SSO (SAML/OIDC) | Your list + botbook | 12-auth/ |
| 3 | White Label | Your list | Future |
| 4 | **Backup & Restore** | botbook | 10-rest/backup-api.md |
| 5 | **NVIDIA GPU Support** | botbook | 09-tools/nvidia-gpu-setup.md |
| 6 | **Docker Deployment** | botbook | 07-gbapp/docker-deployment.md |
| 7 | **LXC Containers** | botbook | 07-gbapp/containers.md |
| 8 | **Advanced Monitoring** | botbook | 10-rest/monitoring-api.md |
---
## Suite Apps Status
| App | Category | Timeline | Documentation |
|-----|----------|----------|---------------|
| Chat | Core | 2025 H1 | 04-gbui/apps/chat.md |
| Drive | Storage | 2025 H1 | 04-gbui/apps/drive.md |
| Tasks | Productivity | 2025 H2 | 04-gbui/apps/tasks.md |
| Mail | Communication | 2025 H1 | 04-gbui/apps/mail.md |
| Calendar | Scheduling | 2026 Q1 | 04-gbui/apps/calendar.md |
| Meet | Video | 2026 Q2 | 04-gbui/apps/meet.md |
| Paper | AI Writing | 2026 Q3 | 04-gbui/apps/paper.md |
| Research | AI Search | 2026 Q3 | 04-gbui/apps/research.md |
| Analytics | Reports | 2025 H2 | 04-gbui/apps/analytics.md |
| Designer | Visual | 2026 Q3 | 04-gbui/apps/designer.md |
| Sources | Prompts | 2026 Q3 | 04-gbui/apps/sources.md |
| Compliance | Security | 2026 Q2 | 04-gbui/apps/compliance.md |
| Player | Media | 2026 Q3 | 04-gbui/apps/player.md |
---
## Channel Support Status
| Channel | Timeline | Documentation |
|---------|----------|---------------|
| Web Chat | 2025 H1 ✅ | 04-gbui/apps/chat.md |
| WhatsApp | 2025 H1 ✅ | 11-features/channels.md |
| Telegram | 2025 H1 ✅ | 11-features/channels.md |
| MS Teams | 2026 Q2 📋 | 11-features/channels.md |
| Slack | 2026 Q2 📋 | 11-features/channels.md |
| Discord | 2026 Q2 📋 | 11-features/channels.md |
| Instagram | Future | 11-features/channels.md |
| SMS | Future | 06-gbdialog/keyword-sms.md |
---
## Infrastructure Features
| Feature | Timeline | Documentation |
|---------|----------|---------------|
| PostgreSQL | 2024 ✅ | 15-appendix/schema.md |
| Redis Cache | 2024 ✅ | 07-gbapp/architecture.md |
| MinIO/S3 | 2024 ✅ | 08-config/drive.md |
| Qdrant Vector | 2025 H2 ✅ | 03-knowledge-base/ |
| Vault Secrets | 2024 ✅ | 08-config/secrets-management.md |
| NVIDIA GPU | 2026 Q4 📋 | 09-tools/nvidia-gpu-setup.md |
| Docker | 2026 Q4 📋 | 07-gbapp/docker-deployment.md |
| LXC | 2026 Q4 📋 | 07-gbapp/containers.md |
---
## Legend
- ✅ Complete
- 📋 Planned
- ⭐ Flagship Feature
- **Bold** = Added from botbook (missing from original timeline)

506
src/assets/roadmap.html Normal file
View file

@ -0,0 +1,506 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General Bots Roadmap 2018-2026</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
color: #fff;
min-height: 100vh;
padding: 40px 20px;
line-height: 1.5;
}
.header { text-align: center; margin-bottom: 50px; }
h1 {
font-size: 2.5rem;
background: linear-gradient(90deg, #00d4ff, #7b2cbf, #ff6b6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.subtitle { color: #888; font-size: 1.1rem; margin-bottom: 20px; }
.badge {
display: inline-block;
background: linear-gradient(135deg, #7b2cbf, #00d4ff);
padding: 8px 24px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
}
.stats { display: flex; justify-content: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-num {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(90deg, #00d4ff, #7b2cbf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label { color: #888; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.suite {
max-width: 1000px;
margin: 0 auto 60px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
}
.suite-title { font-size: 1.3rem; color: #00d4ff; margin-bottom: 25px; text-align: center; }
.apps { display: grid; grid-template-columns: repeat(9, 1fr); gap: 15px; }
@media (max-width: 900px) { .apps { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 500px) { .apps { grid-template-columns: repeat(3, 1fr); } }
.app {
background: rgba(0,212,255,0.08);
border: 1px solid rgba(0,212,255,0.2);
border-radius: 16px;
padding: 20px 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.app:hover {
transform: translateY(-5px);
background: rgba(0,212,255,0.15);
box-shadow: 0 10px 30px rgba(0,212,255,0.2);
}
.app-icon { font-size: 2.2rem; margin-bottom: 8px; }
.app-name { font-size: 0.9rem; font-weight: 600; }
.app-desc { font-size: 0.7rem; color: #888; margin-top: 4px; }
.timeline-arrow {
max-width: 1200px;
margin: 0 auto 20px;
height: 40px;
display: flex;
align-items: center;
}
.arrow-line {
flex: 1;
height: 4px;
background: linear-gradient(90deg, #64748b, #e74c3c, #27ae60, #f39c12, #3498db, #9b59b6, #1abc9c, #e91e63);
border-radius: 2px;
}
.arrow-head {
width: 0;
height: 0;
border-left: 20px solid #e91e63;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.timeline-labels {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto 50px;
padding: 0 20px;
}
.timeline-label { text-align: center; cursor: pointer; transition: transform 0.2s; }
.timeline-label:hover { transform: scale(1.1); }
.label-dot { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 8px; }
.label-year { font-size: 1rem; font-weight: 700; }
.label-desc { font-size: 0.75rem; color: #888; }
.label-count { font-size: 0.7rem; margin-top: 4px; }
.timeline-label.active .label-dot {
box-shadow: 0 0 20px currentColor;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 10px currentColor; }
50% { box-shadow: 0 0 25px currentColor; }
}
.periods { max-width: 1200px; margin: 0 auto; }
.period-section {
margin-bottom: 30px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
overflow: hidden;
}
.period-header {
padding: 20px 25px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: background 0.2s;
}
.period-header:hover { background: rgba(255,255,255,0.03); }
.period-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.period-info { flex: 1; }
.period-title { font-size: 1.2rem; font-weight: 600; }
.period-subtitle { font-size: 0.85rem; color: #888; }
.period-badge { padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.period-badge.complete { background: rgba(39, 174, 96, 0.2); color: #27ae60; }
.period-badge.planned { background: rgba(52, 152, 219, 0.2); color: #3498db; }
.period-badge.flagship {
background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(155, 89, 182, 0.3));
color: #fff;
animation: glow 2s infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
50% { box-shadow: 0 0 15px rgba(52, 152, 219, 0.8); }
}
.period-features {
padding: 0 25px 25px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.feature {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 15px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.feature:hover { background: rgba(255,255,255,0.06); transform: translateX(5px); }
.feature-icon { font-size: 1.3rem; }
.feature-text { flex: 1; }
.feature-name { font-size: 0.9rem; font-weight: 500; }
.feature-status { font-size: 0.7rem; color: #888; }
.feature.flagship {
background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(155, 89, 182, 0.15));
border-color: rgba(52, 152, 219, 0.3);
}
.feature.flagship .feature-name { color: #3498db; font-weight: 700; }
.legend {
max-width: 1200px;
margin: 40px auto 0;
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
padding: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #888; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 20px;
}
.modal.show { display: flex; }
.modal-box {
background: linear-gradient(135deg, #12122a, #1a1a3a);
border-radius: 20px;
max-width: 500px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
border: 1px solid rgba(255,255,255,0.1);
position: relative;
}
.modal-header { padding: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.modal-header h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.modal-header p { color: #888; font-size: 0.9rem; margin-top: 8px; }
.close-btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 1.5rem;
cursor: pointer;
background: none;
border: none;
color: #666;
transition: color 0.2s;
}
.close-btn:hover { color: #fff; }
.modal-body { padding: 25px; }
.modal-body h4 { color: #00d4ff; margin: 15px 0 10px; font-size: 0.95rem; }
.modal-body ul { list-style: none; }
.modal-body li {
padding: 10px 12px;
background: rgba(255,255,255,0.03);
margin-bottom: 6px;
border-radius: 8px;
border-left: 3px solid #00d4ff;
font-size: 0.9rem;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
padding: 5px 14px;
background: rgba(123,44,191,0.2);
border: 1px solid rgba(123,44,191,0.3);
border-radius: 15px;
font-size: 0.75rem;
}
</style>
</head>
<body>
<div class="header">
<h1>🤖 General Bots Roadmap</h1>
<p class="subtitle">Enterprise LLM Orchestrator & AI Automation Platform</p>
<div class="badge">🚀 V6.0 Rust Edition • 2018-2026</div>
<div class="stats">
<div class="stat"><div class="stat-num">77</div><div class="stat-label">Total Features</div></div>
<div class="stat"><div class="stat-num">49</div><div class="stat-label">Complete ✅</div></div>
<div class="stat"><div class="stat-num">28</div><div class="stat-label">Planned 📋</div></div>
<div class="stat"><div class="stat-num">9</div><div class="stat-label">Apps in Suite</div></div>
</div>
</div>
<div class="suite">
<div class="suite-title">📱 General Bots Suite — 9 Apps</div>
<div class="apps">
<div class="app" onclick="showApp('chat')"><div class="app-icon">💬</div><div class="app-name">Chat</div><div class="app-desc">AI Assistant</div></div>
<div class="app" onclick="showApp('tasks')"><div class="app-icon"></div><div class="app-name">Tasks</div><div class="app-desc">AUTOTASK</div></div>
<div class="app" onclick="showApp('drive')"><div class="app-icon">📁</div><div class="app-name">Drive</div><div class="app-desc">File Storage</div></div>
<div class="app" onclick="showApp('mail')"><div class="app-icon">✉️</div><div class="app-name">Mail</div><div class="app-desc">Email</div></div>
<div class="app" onclick="showApp('calendar')"><div class="app-icon">📅</div><div class="app-name">Calendar</div><div class="app-desc">Scheduling</div></div>
<div class="app" onclick="showApp('meet')"><div class="app-icon">🎥</div><div class="app-name">Meet</div><div class="app-desc">Video Calls</div></div>
<div class="app" onclick="showApp('paper')"><div class="app-icon">📝</div><div class="app-name">Paper</div><div class="app-desc">Documents</div></div>
<div class="app" onclick="showApp('research')"><div class="app-icon">🔍</div><div class="app-name">Research</div><div class="app-desc">AI Search</div></div>
<div class="app" onclick="showApp('analytics')"><div class="app-icon">📊</div><div class="app-name">Analytics</div><div class="app-desc">Reports</div></div>
</div>
</div>
<div class="timeline-arrow"><div class="arrow-line"></div><div class="arrow-head"></div></div>
<div class="timeline-labels">
<div class="timeline-label" style="color:#64748b"><div class="label-dot" style="background:#64748b"></div><div class="label-year">2018-24</div><div class="label-desc">Pre-LLM</div><div class="label-count">12 ✅</div></div>
<div class="timeline-label" style="color:#e74c3c"><div class="label-dot" style="background:#e74c3c"></div><div class="label-year">2024</div><div class="label-desc">v6 Foundation</div><div class="label-count">8 ✅</div></div>
<div class="timeline-label" style="color:#27ae60"><div class="label-dot" style="background:#27ae60"></div><div class="label-year">2025 H1</div><div class="label-desc">Rust</div><div class="label-count">10 ✅</div></div>
<div class="timeline-label active" style="color:#f39c12"><div class="label-dot" style="background:#f39c12"></div><div class="label-year">2025 H2</div><div class="label-desc">AUTOTASK</div><div class="label-count">19 ✅</div></div>
<div class="timeline-label active" style="color:#3498db"><div class="label-dot" style="background:#3498db"></div><div class="label-year">2026 Q1</div><div class="label-desc">GO ⭐</div><div class="label-count">12 📋</div></div>
<div class="timeline-label" style="color:#9b59b6"><div class="label-dot" style="background:#9b59b6"></div><div class="label-year">2026 Q2</div><div class="label-desc">Collab</div><div class="label-count">10 📋</div></div>
<div class="timeline-label" style="color:#1abc9c"><div class="label-dot" style="background:#1abc9c"></div><div class="label-year">2026 Q3</div><div class="label-desc">Workflow</div><div class="label-count">2 📋</div></div>
<div class="timeline-label" style="color:#e91e63"><div class="label-dot" style="background:#e91e63"></div><div class="label-year">2026 Q4</div><div class="label-desc">Enterprise</div><div class="label-count">4 📋</div></div>
</div>
<div class="periods">
<!-- 2018-2024 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#64748b"></div>
<div class="period-info"><div class="period-title">📦 2018-2024 — Pre-LLM Foundation</div><div class="period-subtitle">Node.js platform • Package system • BASIC keywords • Bot Service</div></div>
<div class="period-badge complete">12 Complete</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon">📦</span><div class="feature-text"><div class="feature-name">Package System</div><div class="feature-status">.gbai .gbkb .gbdialog .gbot</div></div></div>
<div class="feature"><span class="feature-icon">🗣️</span><div class="feature-text"><div class="feature-name">TALK / HEAR</div><div class="feature-status">Core dialog keywords</div></div></div>
<div class="feature"><span class="feature-icon">🧠</span><div class="feature-text"><div class="feature-name">NLP / BERT</div><div class="feature-status">Intent recognition</div></div></div>
<div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">GPT-3.5 Integration</div><div class="feature-status">First LLM support</div></div></div>
<div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">QR CODE</div><div class="feature-status">WhatsApp auth</div></div></div>
<div class="feature"><span class="feature-icon"></span><div class="feature-text"><div class="feature-name">SET SCHEDULE</div><div class="feature-status">Cron automation</div></div></div>
</div>
</div>
<!-- 2024 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#e74c3c"></div>
<div class="period-info"><div class="period-title">🦀 2024 — v6 Rust Foundation</div><div class="period-subtitle">Migration v5→v6 • New architecture • Minimal Flow MVP</div></div>
<div class="period-badge complete">8 Complete</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon">🦀</span><div class="feature-text"><div class="feature-name">Rust Core</div><div class="feature-status">10x faster, 70% less memory</div></div></div>
<div class="feature"><span class="feature-icon">🔄</span><div class="feature-text"><div class="feature-name">Migration v5→v6</div><div class="feature-status">Node.js to Rust</div></div></div>
<div class="feature"><span class="feature-icon">🏗️</span><div class="feature-text"><div class="feature-name">New Architecture</div><div class="feature-status">Single crate design</div></div></div>
<div class="feature"><span class="feature-icon">🗄️</span><div class="feature-text"><div class="feature-name">PostgreSQL + Diesel</div><div class="feature-status">Database layer</div></div></div>
<div class="feature"><span class="feature-icon">🔐</span><div class="feature-text"><div class="feature-name">Vault Secrets</div><div class="feature-status">Secure credentials</div></div></div>
<div class="feature"><span class="feature-icon">🖥️</span><div class="feature-text"><div class="feature-name">Minimal Flow MVP</div><div class="feature-status">HTMX UI</div></div></div>
</div>
</div>
<!-- 2025 H1 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#27ae60"></div>
<div class="period-info"><div class="period-title">🚀 2025 H1 — Rust Migration</div><div class="period-subtitle">BASIC Engine • Channels • Drive • Email • REST API</div></div>
<div class="period-badge complete">10 Complete</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon"></span><div class="feature-text"><div class="feature-name">BASIC Engine</div><div class="feature-status">70+ keywords</div></div></div>
<div class="feature"><span class="feature-icon">⚙️</span><div class="feature-text"><div class="feature-name">System Automation</div><div class="feature-status">Cron jobs</div></div></div>
<div class="feature"><span class="feature-icon">🌐</span><div class="feature-text"><div class="feature-name">Web Chat</div><div class="feature-status">HTMX widget</div></div></div>
<div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">LLM Integration</div><div class="feature-status">Multi-provider</div></div></div>
<div class="feature"><span class="feature-icon">📁</span><div class="feature-text"><div class="feature-name">Drive (S3)</div><div class="feature-status">File storage</div></div></div>
<div class="feature"><span class="feature-icon">✉️</span><div class="feature-text"><div class="feature-name">Email System</div><div class="feature-status">IMAP/SMTP</div></div></div>
<div class="feature"><span class="feature-icon">🔌</span><div class="feature-text"><div class="feature-name">REST API</div><div class="feature-status">Full endpoints</div></div></div>
<div class="feature"><span class="feature-icon">💬</span><div class="feature-text"><div class="feature-name">WhatsApp</div><div class="feature-status">Cloud API</div></div></div>
<div class="feature"><span class="feature-icon">✈️</span><div class="feature-text"><div class="feature-name">Telegram</div><div class="feature-status">Bot API</div></div></div>
<div class="feature"><span class="feature-icon">📄</span><div class="feature-text"><div class="feature-name">PDF Generation</div><div class="feature-status">Document export</div></div></div>
</div>
</div>
<!-- 2025 H2 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#f39c12"></div>
<div class="period-info"><div class="period-title">⚡ 2025 H2 — Features & AUTOTASK</div><div class="period-subtitle">Autonomous Tasks • KB • Vector DB • Tools • Generators • Multimodal</div></div>
<div class="period-badge complete">19 Complete</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon"></span><div class="feature-text"><div class="feature-name">Tasks AI Autonomous</div><div class="feature-status">Intent → Plan → Execute</div></div></div>
<div class="feature"><span class="feature-icon">📚</span><div class="feature-text"><div class="feature-name">Knowledge Base</div><div class="feature-status">Vector embeddings</div></div></div>
<div class="feature"><span class="feature-icon">🗄️</span><div class="feature-text"><div class="feature-name">Vector DB (Qdrant)</div><div class="feature-status">Semantic search</div></div></div>
<div class="feature"><span class="feature-icon">🔧</span><div class="feature-text"><div class="feature-name">Tools / MCP</div><div class="feature-status">Function calling</div></div></div>
<div class="feature"><span class="feature-icon">🖥️</span><div class="feature-text"><div class="feature-name">UI Minimal</div><div class="feature-status">Suite interface</div></div></div>
<div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">APP Generator</div><div class="feature-status">App scaffolding</div></div></div>
<div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">BOT Generator</div><div class="feature-status">Bot scaffolding</div></div></div>
<div class="feature"><span class="feature-icon">🌐</span><div class="feature-text"><div class="feature-name">SITE Generator</div><div class="feature-status">Website creation</div></div></div>
<div class="feature"><span class="feature-icon">🎯</span><div class="feature-text"><div class="feature-name">LANDPAGE Generator</div><div class="feature-status">Marketing pages</div></div></div>
<div class="feature"><span class="feature-icon">📊</span><div class="feature-text"><div class="feature-name">Analytics Dashboard</div><div class="feature-status">Real-time metrics</div></div></div>
<div class="feature"><span class="feature-icon">🎙️</span><div class="feature-text"><div class="feature-name">Speech to Text</div><div class="feature-status">Voice input</div></div></div>
<div class="feature"><span class="feature-icon">🔊</span><div class="feature-text"><div class="feature-name">Voice Synthesis</div><div class="feature-status">TTS output</div></div></div>
<div class="feature"><span class="feature-icon">🎨</span><div class="feature-text"><div class="feature-name">Image Generation</div><div class="feature-status">AI art</div></div></div>
<div class="feature"><span class="feature-icon">👁️</span><div class="feature-text"><div class="feature-name">Vision Analysis</div><div class="feature-status">Image understanding</div></div></div>
<div class="feature"><span class="feature-icon">🎮</span><div class="feature-text"><div class="feature-name">NVIDIA GPU / LXC</div><div class="feature-status">Containers ready</div></div></div>
<div class="feature"><span class="feature-icon">📝</span><div class="feature-text"><div class="feature-name">Paper App</div><div class="feature-status">AI writing assistant</div></div></div>
<div class="feature"><span class="feature-icon">🔍</span><div class="feature-text"><div class="feature-name">Research App</div><div class="feature-status">Semantic search</div></div></div>
<div class="feature"><span class="feature-icon">📅</span><div class="feature-text"><div class="feature-name">Calendar (iCal)</div><div class="feature-status">Event management</div></div></div>
<div class="feature"><span class="feature-icon">🎥</span><div class="feature-text"><div class="feature-name">Meet (WebRTC)</div><div class="feature-status">Voice/video calls</div></div></div>
</div>
</div>
<!-- 2026 Q1 - FLAGSHIP -->
<div class="period-section" style="border-color:rgba(52,152,219,0.4);box-shadow:0 0 30px rgba(52,152,219,0.1)">
<div class="period-header">
<div class="period-dot" style="background:#3498db;box-shadow:0 0 15px #3498db"></div>
<div class="period-info"><div class="period-title">🚀 2026 Q1 — Tasks AI GO ⭐ FLAGSHIP</div><div class="period-subtitle">Production autonomous • Full integrations • Transfer to Human</div></div>
<div class="period-badge flagship">⭐ 12 Planned</div>
</div>
<div class="period-features">
<div class="feature flagship"><span class="feature-icon">🚀</span><div class="feature-text"><div class="feature-name">Tasks AI GO ⭐</div><div class="feature-status">Production autonomous</div></div></div>
<div class="feature"><span class="feature-icon">📧</span><div class="feature-text"><div class="feature-name">Gmail Integration</div><div class="feature-status">Full email automation</div></div></div>
<div class="feature"><span class="feature-icon">📬</span><div class="feature-text"><div class="feature-name">Outlook/Hotmail</div><div class="feature-status">Microsoft email</div></div></div>
<div class="feature"><span class="feature-icon">📁</span><div class="feature-text"><div class="feature-name">Google Drive</div><div class="feature-status">File sync + Sheets/Docs</div></div></div>
<div class="feature"><span class="feature-icon">☁️</span><div class="feature-text"><div class="feature-name">OneDrive</div><div class="feature-status">Microsoft storage + Excel</div></div></div>
<div class="feature"><span class="feature-icon">📅</span><div class="feature-text"><div class="feature-name">Google Calendar</div><div class="feature-status">Event scheduling</div></div></div>
<div class="feature"><span class="feature-icon">📆</span><div class="feature-text"><div class="feature-name">Outlook Calendar</div><div class="feature-status">Microsoft scheduling</div></div></div>
<div class="feature"><span class="feature-icon">👤</span><div class="feature-text"><div class="feature-name">Transfer to Human</div><div class="feature-status">Bot → Agent handoff</div></div></div>
<div class="feature"><span class="feature-icon">🧠</span><div class="feature-text"><div class="feature-name">LLM-Assisted Attendant</div><div class="feature-status">AI copilot for agents</div></div></div>
</div>
</div>
<!-- 2026 Q2 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#9b59b6"></div>
<div class="period-info"><div class="period-title">🤝 2026 Q2 — Collaboration</div><div class="period-subtitle">Multi-Agent • Meet • Teams • Slack • Docker</div></div>
<div class="period-badge planned">10 Planned</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon">🤖</span><div class="feature-text"><div class="feature-name">Multi-Agent System</div><div class="feature-status">Coordinated AI agents</div></div></div>
<div class="feature"><span class="feature-icon">🏪</span><div class="feature-text"><div class="feature-name">Bot Marketplace</div><div class="feature-status">Share & sell bots</div></div></div>
<div class="feature"><span class="feature-icon">🛡️</span><div class="feature-text"><div class="feature-name">Compliance Suite</div><div class="feature-status">GDPR, SOC2, HIPAA</div></div></div>
<div class="feature"><span class="feature-icon">👥</span><div class="feature-text"><div class="feature-name">MS Teams</div><div class="feature-status">Team collaboration</div></div></div>
<div class="feature"><span class="feature-icon">📊</span><div class="feature-text"><div class="feature-name">Analytics Reports</div><div class="feature-status">Advanced insights</div></div></div>
<div class="feature"><span class="feature-icon">🎥</span><div class="feature-text"><div class="feature-name">Google Meet</div><div class="feature-status">Video calls</div></div></div>
<div class="feature"><span class="feature-icon">📹</span><div class="feature-text"><div class="feature-name">Zoom</div><div class="feature-status">Video meetings</div></div></div>
<div class="feature"><span class="feature-icon">💼</span><div class="feature-text"><div class="feature-name">Slack</div><div class="feature-status">Team messaging</div></div></div>
<div class="feature"><span class="feature-icon">🎮</span><div class="feature-text"><div class="feature-name">Discord</div><div class="feature-status">Community channel</div></div></div>
<div class="feature"><span class="feature-icon">🐳</span><div class="feature-text"><div class="feature-name">Docker Deployment</div><div class="feature-status">Container packaging</div></div></div>
</div>
</div>
<!-- 2026 Q3 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#1abc9c"></div>
<div class="period-info"><div class="period-title">🧠 2026 Q3 — Workflow & CRM</div><div class="period-subtitle">Workflow Designer • CRM Integration</div></div>
<div class="period-badge planned">2 Planned</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon">⚙️</span><div class="feature-text"><div class="feature-name">Workflow Designer</div><div class="feature-status">Visual automation</div></div></div>
<div class="feature"><span class="feature-icon">👤</span><div class="feature-text"><div class="feature-name">CRM Integration</div><div class="feature-status">Customer management</div></div></div>
</div>
</div>
<!-- 2026 Q4 -->
<div class="period-section">
<div class="period-header">
<div class="period-dot" style="background:#e91e63"></div>
<div class="period-info"><div class="period-title">🏆 2026 Q4 — Enterprise</div><div class="period-subtitle">Mobile Apps • SSO • White Label</div></div>
<div class="period-badge planned">4 Planned</div>
</div>
<div class="period-features">
<div class="feature"><span class="feature-icon">📱</span><div class="feature-text"><div class="feature-name">Mobile Apps</div><div class="feature-status">iOS & Android</div></div></div>
<div class="feature"><span class="feature-icon">🔐</span><div class="feature-text"><div class="feature-name">Enterprise SSO</div><div class="feature-status">SAML, OIDC</div></div></div>
<div class="feature"><span class="feature-icon">🏷️</span><div class="feature-text"><div class="feature-name">White Label</div><div class="feature-status">Full branding</div></div></div>
<div class="feature"><span class="feature-icon">📈</span><div class="feature-text"><div class="feature-name">Advanced Monitoring</div><div class="feature-status">Enterprise observability</div></div></div>
</div>
</div>
</div>
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:#27ae60"></div>Complete</div>
<div class="legend-item"><div class="legend-dot" style="background:#3498db"></div>Planned</div>
<div class="legend-item"><div class="legend-dot" style="background:linear-gradient(135deg,#3498db,#9b59b6)"></div>Flagship</div>
</div>
<div class="modal" id="modal" onclick="if(event.target.id==='modal')closeModal()">
<div class="modal-box">
<div class="modal-header">
<h2 id="modal-title"></h2>
<p id="modal-subtitle"></p>
<button class="close-btn" onclick="closeModal()">×</button>
</div>
<div class="modal-body" id="modal-body"></div>
</div>
</div>
<script>
const data = {
chat: { t: '💬 Chat', s: 'AI-powered conversations', d: [{h:'Features',i:['Real-time messaging','Context awareness','Multi-turn dialogs','File sharing','History search']}], tg:['Chat','AI','Suite'] },
tasks: { t: '⚡ Tasks (AUTOTASK)', s: 'Autonomous AI task execution', d: [{h:'AUTOTASK Flow',i:['1. Human provides intent','2. AI creates execution plan','3. AI generates code/content','4. AI deploys result']},{h:'Generators',i:['BOT - conversational bots','APP - applications','SITE - websites','LANDPAGE - marketing']}], tg:['AUTOTASK','Autonomous','AI'] },
drive: { t: '📁 Drive', s: 'File storage with Sheets/Docs', d: [{h:'Features',i:['Google Drive sync','OneDrive sync','Spreadsheet automation','Document editing','File versioning']}], tg:['Drive','Storage','Suite'] },
mail: { t: '✉️ Mail', s: 'Email management', d: [{h:'Features',i:['Gmail integration','Outlook/Hotmail','Smart compose','Templates','AI categorization']}], tg:['Mail','Email','Suite'] },
calendar: { t: '📅 Calendar', s: 'Scheduling & events', d: [{h:'Features',i:['Google Calendar sync','Outlook Calendar','Meeting scheduling','Reminders','Recurring events']}], tg:['Calendar','Suite'] },
meet: { t: '🎥 Meet', s: 'Video conferencing', d: [{h:'Features',i:['Google Meet','Zoom integration','Screen sharing','Recording','Meeting notes']}], tg:['Meet','Video','Suite'] },
paper: { t: '📝 Paper', s: 'AI-powered documents', d: [{h:'Features',i:['Rich text editor','AI writing assistance','Templates','Collaboration','Export options']}], tg:['Paper','Documents','Suite'] },
research: { t: '🔍 Research', s: 'AI search & analysis', d: [{h:'Features',i:['Multi-source search','AI summaries','Citations','Knowledge extraction']}], tg:['Research','AI','Suite'] },
analytics: { t: '📊 Analytics', s: 'Reports & insights', d: [{h:'Features',i:['Real-time dashboards','Usage metrics','Performance KPIs','Custom reports']}], tg:['Analytics','Suite'] }
};
function showApp(id) { if(data[id]) showModal(data[id]); }
function showModal(item) {
document.getElementById('modal-title').innerHTML = item.t;
document.getElementById('modal-subtitle').textContent = item.s;
let html = '';
item.d.forEach(section => {
html += '<h4>' + section.h + '</h4><ul>';
section.i.forEach(i => html += '<li>' + i + '</li>');
html += '</ul>';
});
html += '<div class="tags">';
item.tg.forEach(t => html += '<span class="tag">' + t + '</span>');
html += '</div>';
document.getElementById('modal-body').innerHTML = html;
document.getElementById('modal').classList.add('show');
}
function closeModal() {
document.getElementById('modal').classList.remove('show');
}
document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });
</script>
</body>
</html>

137
src/assets/roadmap.svg Normal file
View file

@ -0,0 +1,137 @@
<svg viewBox="0 0 1200 850" xmlns="http://www.w3.org/2000/svg">
<style>
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; }
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; }
.secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
@media (prefers-color-scheme: dark) { .title-text { fill: #F1F5F9; } .main-text { fill: #E2E8F0; } .secondary-text { fill: #94A3B8; } }
</style>
<defs>
<linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#6366F1"/><stop offset="100%" style="stop-color:#8B5CF6"/></linearGradient>
<linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#06B6D4"/><stop offset="100%" style="stop-color:#0EA5E9"/></linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#10B981"/><stop offset="100%" style="stop-color:#34D399"/></linearGradient>
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#F59E0B"/><stop offset="100%" style="stop-color:#FBBF24"/></linearGradient>
<linearGradient id="grayGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#64748B"/><stop offset="100%" style="stop-color:#94A3B8"/></linearGradient>
<linearGradient id="timelineGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#64748B"/><stop offset="18%" style="stop-color:#10B981"/><stop offset="35%" style="stop-color:#F59E0B"/><stop offset="52%" style="stop-color:#06B6D4"/><stop offset="68%" style="stop-color:#6366F1"/><stop offset="84%" style="stop-color:#10B981"/><stop offset="100%" style="stop-color:#8B5CF6"/></linearGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#6366F1" flood-opacity="0.12"/></filter>
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.05"/></pattern>
</defs>
<rect width="1200" height="850" fill="#FAFBFC"/><rect width="1200" height="850" fill="url(#dots)"/>
<text x="600" y="35" font-size="20" class="title-text" text-anchor="middle">General Bots Roadmap 2024-2026</text>
<text x="600" y="55" font-size="11" class="secondary-text" text-anchor="middle">Enterprise LLM Orchestrator - V6.0 Rust Edition</text>
<path d="M45 80 L45 820" stroke="url(#timelineGrad)" stroke-width="3" fill="none"/>
<!-- 2024 -->
<text x="45" y="95" font-size="13" class="title-text" text-anchor="middle">2024</text>
<circle cx="45" cy="110" r="7" fill="url(#grayGrad)"/>
<rect x="65" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="77" y="114" font-size="9" class="main-text">Conversation System</text>
<rect x="205" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="217" y="114" font-size="9" class="main-text">Architecture Design</text>
<rect x="345" y="97" width="130" height="30" rx="5" fill="#fff" stroke="#E2E8F0" filter="url(#shadow)"/><text x="357" y="114" font-size="9" class="main-text">Node.js Prototype</text>
<!-- 2025 H1 -->
<text x="45" y="165" font-size="12" class="title-text" text-anchor="middle">2025 H1</text>
<text x="45" y="178" font-size="7" class="secondary-text" text-anchor="middle">RUST</text>
<circle cx="45" cy="192" r="7" fill="url(#greenGrad)"/>
<rect x="65" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="194" font-size="8" class="main-text">Rust Migration</text>
<rect x="185" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="194" font-size="8" class="main-text">Actix-Web</text>
<rect x="305" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="194" font-size="8" class="main-text">Tokio Runtime</text>
<rect x="425" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="194" font-size="8" class="main-text">SQLx+PostgreSQL</text>
<rect x="545" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="556" y="194" font-size="8" class="main-text">MinIO Storage</text>
<rect x="665" y="178" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="676" y="194" font-size="8" class="main-text">Valkey Cache</text>
<rect x="65" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="231" font-size="8" class="main-text">Knowledge Base</text>
<rect x="185" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="231" font-size="8" class="main-text">BASIC Engine</text>
<rect x="305" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="231" font-size="8" class="main-text">LLM Integration</text>
<rect x="425" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="231" font-size="8" class="main-text">Vector DB</text>
<rect x="545" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="556" y="231" font-size="8" class="main-text">Tools System</text>
<rect x="665" y="215" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="676" y="231" font-size="8" class="main-text">HTMX UI</text>
<rect x="65" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="268" font-size="8" class="main-text">Embeddings</text>
<rect x="185" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="196" y="268" font-size="8" class="main-text">Semantic Cache</text>
<rect x="305" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="316" y="268" font-size="8" class="main-text">Documentation</text>
<rect x="425" y="252" width="110" height="28" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="436" y="268" font-size="8" class="main-text">.gbai Packages</text>
<!-- 2025 H2 -->
<text x="45" y="315" font-size="12" class="title-text" text-anchor="middle">2025 H2</text>
<text x="45" y="328" font-size="7" class="secondary-text" text-anchor="middle">AUTOTASK</text>
<circle cx="45" cy="345" r="9" fill="url(#orangeGrad)"><animate attributeName="r" values="7;11;7" dur="2s" repeatCount="indefinite"/></circle>
<rect x="65" y="325" width="220" height="42" rx="6" fill="url(#orangeGrad)" filter="url(#shadow)"/><text x="82" y="345" font-size="12" class="white-text" font-weight="700">Tasks (AI Autonomous) GO</text><text x="82" y="360" font-size="8" class="white-text" opacity="0.9">Human intent - AI plans - AI deploys</text>
<rect x="295" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="306" y="343" font-size="8" class="main-text">CREATE SITE</text><text x="306" y="355" font-size="7" class="secondary-text">HTMX generation</text>
<rect x="420" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="431" y="343" font-size="8" class="main-text">App Generator</text><text x="431" y="355" font-size="7" class="secondary-text">BOT, APP, SITE</text>
<rect x="545" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="556" y="343" font-size="8" class="main-text">A2A Protocol</text><text x="556" y="355" font-size="7" class="secondary-text">Agent-to-Agent</text>
<rect x="670" y="325" width="115" height="38" rx="5" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="681" y="343" font-size="8" class="main-text">Multi-Agent</text><text x="681" y="355" font-size="7" class="secondary-text">Orchestration</text>
<rect x="65" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="76" y="391" font-size="8" class="main-text">Memory</text>
<rect x="175" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="186" y="391" font-size="8" class="main-text">Sandbox</text>
<rect x="285" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="296" y="391" font-size="8" class="main-text">SSE Stream</text>
<rect x="395" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="406" y="391" font-size="8" class="main-text">Reflection</text>
<rect x="505" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="516" y="391" font-size="8" class="main-text">Model Route</text>
<rect x="615" y="375" width="100" height="26" rx="4" fill="#fff" stroke="#F59E0B" filter="url(#shadow)"/><text x="626" y="391" font-size="8" class="main-text">gRPC</text>
<!-- 2026 Q1 -->
<text x="45" y="435" font-size="12" class="title-text" text-anchor="middle">Q1 2026</text>
<text x="45" y="448" font-size="7" class="secondary-text" text-anchor="middle">CHANNELS</text>
<circle cx="45" cy="462" r="7" fill="url(#cyanGrad)"/>
<rect x="65" y="445" width="145" height="35" rx="5" fill="url(#cyanGrad)" filter="url(#shadow)"/><text x="78" y="463" font-size="10" class="white-text" font-weight="700">Tasks (AI Auto) GO</text><text x="78" y="475" font-size="7" class="white-text" opacity="0.9">Production release</text>
<rect x="220" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="231" y="463" font-size="8" class="main-text">WhatsApp</text>
<rect x="330" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="341" y="463" font-size="8" class="main-text">Security</text>
<rect x="440" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="451" y="463" font-size="8" class="main-text">Desktop App</text>
<rect x="550" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="561" y="463" font-size="8" class="main-text">TLS/Auth</text>
<rect x="660" y="445" width="100" height="30" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="671" y="463" font-size="8" class="main-text">Audit</text>
<rect x="65" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="75" y="500" font-size="7" class="main-text">Chat</text>
<rect x="160" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="170" y="500" font-size="7" class="main-text">Drive</text>
<rect x="255" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="265" y="500" font-size="7" class="main-text">Tasks</text>
<rect x="350" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="360" y="500" font-size="7" class="main-text">Mail</text>
<rect x="445" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="455" y="500" font-size="7" class="main-text">Calendar</text>
<rect x="540" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="550" y="500" font-size="7" class="main-text">Meet</text>
<rect x="635" y="485" width="85" height="24" rx="4" fill="#fff" stroke="#06B6D4" filter="url(#shadow)"/><text x="645" y="500" font-size="7" class="main-text">Paper</text>
<!-- 2026 Q2 -->
<text x="45" y="545" font-size="12" class="title-text" text-anchor="middle">Q2 2026</text>
<text x="45" y="558" font-size="7" class="secondary-text" text-anchor="middle">INTEGRATIONS</text>
<circle cx="45" cy="572" r="7" fill="url(#primaryGrad)"/>
<rect x="65" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="76" y="573" font-size="8" class="main-text">Gmail</text>
<rect x="175" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="186" y="573" font-size="8" class="main-text">Outlook</text>
<rect x="285" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="296" y="573" font-size="8" class="main-text">Google Calendar</text>
<rect x="395" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="406" y="573" font-size="8" class="main-text">O365 Calendar</text>
<rect x="505" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="516" y="573" font-size="8" class="main-text">Instagram</text>
<rect x="615" y="555" width="100" height="30" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="626" y="573" font-size="8" class="main-text">MS Teams</text>
<rect x="65" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="75" y="610" font-size="7" class="main-text">Analytics</text>
<rect x="160" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="170" y="610" font-size="7" class="main-text">Designer</text>
<rect x="255" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="265" y="610" font-size="7" class="main-text">CRM</text>
<rect x="350" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="360" y="610" font-size="7" class="main-text">Billing</text>
<rect x="445" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="455" y="610" font-size="7" class="main-text">Board</text>
<rect x="540" y="595" width="85" height="24" rx="4" fill="#fff" stroke="#6366F1" filter="url(#shadow)"/><text x="550" y="610" font-size="7" class="main-text">Forms</text>
<!-- 2026 Q3 -->
<text x="45" y="655" font-size="12" class="title-text" text-anchor="middle">Q3 2026</text>
<text x="45" y="668" font-size="7" class="secondary-text" text-anchor="middle">STORAGE</text>
<circle cx="45" cy="682" r="7" fill="url(#greenGrad)"/>
<rect x="65" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="76" y="683" font-size="8" class="main-text">Google Drive</text>
<rect x="175" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="186" y="683" font-size="8" class="main-text">OneDrive</text>
<rect x="285" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="296" y="683" font-size="8" class="main-text">Dropbox</text>
<rect x="395" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="406" y="683" font-size="8" class="main-text">Telegram</text>
<rect x="505" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="516" y="683" font-size="8" class="main-text">Slack</text>
<rect x="615" y="665" width="100" height="30" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="626" y="683" font-size="8" class="main-text">Discord</text>
<rect x="65" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="75" y="720" font-size="7" class="main-text">Sheets</text>
<rect x="160" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="170" y="720" font-size="7" class="main-text">Excel</text>
<rect x="255" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="265" y="720" font-size="7" class="main-text">PDF Gen</text>
<rect x="350" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="360" y="720" font-size="7" class="main-text">Image AI</text>
<rect x="445" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="455" y="720" font-size="7" class="main-text">Video AI</text>
<rect x="540" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="550" y="720" font-size="7" class="main-text">OCR</text>
<rect x="635" y="705" width="85" height="24" rx="4" fill="#fff" stroke="#10B981" filter="url(#shadow)"/><text x="645" y="720" font-size="7" class="main-text">TTS</text>
<!-- 2026 Q4 -->
<text x="45" y="765" font-size="12" class="title-text" text-anchor="middle">Q4 2026</text>
<text x="45" y="778" font-size="7" class="secondary-text" text-anchor="middle">MOBILE</text>
<circle cx="45" cy="795" r="9" fill="url(#primaryGrad)"><animate attributeName="r" values="7;11;7" dur="2s" repeatCount="indefinite"/></circle>
<rect x="65" y="775" width="155" height="38" rx="5" fill="url(#primaryGrad)" filter="url(#shadow)"/><text x="80" y="793" font-size="10" class="white-text" font-weight="700">Mobile App</text><text x="80" y="806" font-size="7" class="white-text" opacity="0.9">iOS/Android Tauri</text>
<rect x="230" y="775" width="155" height="38" rx="5" fill="url(#primaryGrad)" filter="url(#shadow)"/><text x="245" y="793" font-size="10" class="white-text" font-weight="700">IoT Gateway</text><text x="245" y="806" font-size="7" class="white-text" opacity="0.9">Device control</text>
<rect x="395" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="406" y="796" font-size="8" class="main-text">SMS</text>
<rect x="505" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="516" y="796" font-size="8" class="main-text">Email Channel</text>
<rect x="615" y="778" width="100" height="30" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="626" y="796" font-size="8" class="main-text">WeChat</text>
<rect x="65" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="75" y="834" font-size="7" class="main-text">STT</text>
<rect x="160" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="170" y="834" font-size="7" class="main-text">Translate</text>
<rect x="255" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="265" y="834" font-size="7" class="main-text">Sentiment</text>
<rect x="350" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="360" y="834" font-size="7" class="main-text">Intent</text>
<rect x="445" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="455" y="834" font-size="7" class="main-text">NER</text>
<rect x="540" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="550" y="834" font-size="7" class="main-text">Summary</text>
<rect x="635" y="820" width="85" height="22" rx="4" fill="#fff" stroke="#8B5CF6" filter="url(#shadow)"/><text x="645" y="834" font-size="7" class="main-text">Q and A</text>
</svg>

After

Width:  |  Height:  |  Size: 19 KiB