GeneralBots/generalbots
2
1
Fork 0
Code Activity Actions 4

- botbook extracted from.

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-12-03 19:59:27 -03:00
parent b2f1ea40e4
commit d088490f41
481 changed files with 588 additions and 104858 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Cargo.lock generated
View file

@ -1058,6 +1058,21 @@ dependencies = [
"tokio",
]
[[package]]
name = "botlib"
version = "6.1.0"
dependencies = [
"anyhow",
"chrono",
"diesel",
"log",
"serde",
"serde_json",
"thiserror 2.0.17",
"toml 0.8.23",
"uuid",
]
[[package]]
name = "botserver"
version = "6.1.0"
@ -1075,6 +1090,7 @@ dependencies = [
"axum 0.7.9",
"axum-server",
"base64 0.22.1",
"botlib",
"bytes",
"calamine",
"chrono",

4
Cargo.toml
View file

@ -38,6 +38,10 @@ description = "General Bots Server - Open-source bot platform by Pragmatismo.com
license = "AGPL-3.0"
repository = "https://github.com/GeneralBots/BotServer"
[dependencies.botlib]
path = "../botlib"
features = ["database"]
[features]
# ===== DEFAULT FEATURE SET =====
default = ["console", "chat", "automation", "tasks", "drive", "llm", "redis-cache", "progress-bars", "directory"]

240
docs/GAP_ANALYSIS.md
View file

@ -1,240 +0,0 @@
# Documentation vs Source Code Gap Analysis
> Generated analysis comparing `botserver/src/` with `botserver/docs/`
## Summary
| Category | Documented | Implemented | Gap |
|----------|------------|-------------|-----|
| BASIC Keywords | ~65 | ~80+ | ~15 undocumented |
| Source Modules | 18 | 24 | 6 undocumented |
| Suite Apps | 14 | 14 | ✅ Complete |
| REST APIs | 22 | 22 | ✅ Complete |
---
## 1. Undocumented BASIC Keywords
The following keywords exist in `src/basic/keywords/` but lack dedicated documentation pages:
### High Priority (Commonly Used)
| Keyword | Source File | Description |
|---------|-------------|-------------|
| `QR CODE` | `qrcode.rs` | Generates QR code images from data |
| `SEND SMS` | `sms.rs` | Sends SMS messages via Twilio/AWS SNS/Vonage |
| `PLAY` | `play.rs` | Opens content projector for videos, images, docs |
| `REMEMBER` | `remember.rs` | Stores user memories with expiration |
| `BOOK` | `book.rs` | Schedules calendar meetings/appointments |
| `WEATHER` | `weather.rs` | Gets weather data (API documented, keyword not) |
### Medium Priority (Advanced Features)
| Keyword | Source File | Description |
|---------|-------------|-------------|
| `A2A` | `a2a_protocol.rs` | Agent-to-Agent communication protocol |
| `ADD BOT` | `add_bot.rs` | Dynamically adds bots to session |
| `ADD MEMBER` | `add_member.rs` | Adds members to groups/teams |
| `ADD SUGGESTION` | `add_suggestion.rs` | Adds response suggestions |
| `HUMAN APPROVAL` | `human_approval.rs` | Human-in-the-loop workflow |
| `MODEL ROUTE` | `model_routing.rs` | Routes requests to different LLM models |
| `SEND TEMPLATE` | `send_template.rs` | Sends WhatsApp/channel templates |
| `SET USER` | `set_user.rs` | Sets current user context |
### Low Priority (Internal/Advanced)
| Keyword | Source File | Description |
|---------|-------------|-------------|
| `EPISODIC MEMORY` | `episodic_memory.rs` | Long-term episodic memory storage |
| `KNOWLEDGE GRAPH` | `knowledge_graph.rs` | Knowledge graph operations |
| `LLM` | `llm_keyword.rs` | Direct LLM invocation |
| `MULTIMODAL` | `multimodal.rs` | Image/audio processing |
| `PROCEDURE` | `procedures.rs` | BASIC procedure definitions |
| `ON FORM SUBMIT` | `on_form_submit.rs` | Form submission handlers |
| `IMPORT/EXPORT` | `import_export.rs` | Data import/export operations |
---
## 2. Undocumented Source Modules
### Modules Without Dedicated Documentation
| Module | Path | Purpose | Priority |
|--------|------|---------|----------|
| `attendance` | `src/attendance/` | Queue management for human attendants | Medium |
| `timeseries` | `src/timeseries/` | InfluxDB 3 integration for metrics | Medium |
| `weba` | `src/weba/` | Placeholder for web app features | Low |
| `nvidia` | `src/nvidia/` | GPU acceleration (partially documented) | Low |
| `multimodal` | `src/multimodal/` | Image/video processing | Medium |
| `console` | `src/console/` | Admin console backend | Low |
### Modules With Partial Documentation
| Module | Missing Docs |
|--------|--------------|
| `llm` | LLM keyword syntax, model routing details |
| `calendar` | CalDAV integration details, recurrence rules |
| `meet` | WebRTC/LiveKit integration details |
---
## 3. Documentation Accuracy Issues
### Incorrect or Outdated References
1. **keyword-remember.md** - Referenced but file doesn't exist in SUMMARY.md
2. **keyword-book.md** - Referenced in keyword-create-task.md but no file exists
3. **keyword-weather.md** - API documented but keyword syntax not documented
### Missing from SUMMARY.md
These keyword files exist but aren't linked in SUMMARY.md:
- `keyword-synchronize.md`
- `keyword-reference-complete.md`
- Several template files
---
## 4. API Endpoint Gaps
### Suite App Backend APIs (Recently Implemented)
| App | Endpoints | Status |
|-----|-----------|--------|
| Analytics | 12 endpoints | ✅ Implemented |
| Paper | 20+ endpoints | ✅ Implemented |
| Research | 8 endpoints | ✅ Implemented |
| Sources | 7 endpoints | ✅ Implemented |
| Designer | 5 endpoints | ✅ Implemented |
### Undocumented Internal APIs
| API | Path | Purpose |
|-----|------|---------|
| Queue API | `/api/queue/*` | Human attendant queue management |
| TimeSeries API | N/A | Metrics ingestion (internal only) |
---
## 5. Recommended Documentation Additions
### Immediate Priority
1. **Create `keyword-qrcode.md`**
```basic
' Generate QR code
path = QR CODE "https://example.com"
SEND FILE path
' With custom size
path = QR CODE "data", 512
```
2. **Create `keyword-sms.md`**
```basic
' Send SMS
SEND SMS "+1234567890", "Hello!"
' With provider
SEND SMS phone, message, "twilio"
```
3. **Create `keyword-play.md`**
```basic
' Play video
PLAY "video.mp4"
' With options
PLAY "presentation.pptx" WITH OPTIONS "fullscreen"
```
4. **Create `keyword-remember.md`**
```basic
' Remember with expiration
REMEMBER "user_preference", "dark_mode", "30 days"
' Recall later
pref = RECALL "user_preference"
```
5. **Create `keyword-book.md`**
```basic
' Book a meeting
BOOK "Team Standup" WITH user1, user2 AT "2025-01-20 10:00" FOR 30
```
### Medium Priority
1. **Document TimeSeries module** - Add to appendix or chapter-11
2. **Document Attendance/Queue system** - Add to chapter-10 APIs
3. **Expand Multimodal docs** - Add keyword reference
4. **Create A2A Protocol guide** - Multi-agent communication
### Low Priority
1. Add advanced LLM routing documentation
2. Document internal console APIs
3. Add GPU acceleration tuning guide
---
## 6. Consistency Issues
### Naming Conventions
| Issue | Location | Fix |
|-------|----------|-----|
| `keyword-for-each.md` vs `for_next.rs` | Inconsistent naming | Document both FOR EACH and FOR/NEXT |
| `keyword-delete-http.md` vs `DELETE` | Overlap | Clarify HTTP DELETE vs data DELETE |
### Missing Cross-References
- Paper app docs don't reference .gbusers storage (FIXED)
- Calendar docs don't reference BOOK keyword
- Meet docs don't reference video/audio keywords
---
## 7. Action Items
### High Priority
- [ ] Create 5 missing keyword docs (QR CODE, SMS, PLAY, REMEMBER, BOOK)
- [ ] Add WEATHER keyword syntax to weather.md
- [ ] Fix broken references in existing docs
### Medium Priority
- [ ] Document attendance/queue module
- [ ] Add timeseries module to appendix
- [ ] Create A2A protocol guide
- [ ] Add multimodal keyword reference
### Low Priority
- [ ] Document internal console APIs
- [ ] Add advanced configuration examples
- [ ] Create video tutorials references
---
## 8. Verification Commands
```bash
# List all keyword files in src
ls botserver/src/basic/keywords/*.rs | wc -l
# List all keyword docs
ls botserver/docs/src/chapter-06-gbdialog/keyword-*.md | wc -l
# Find references to undocumented keywords
grep -r "QRCODE\|QR CODE\|SEND SMS\|PLAY\|REMEMBER\|BOOK" botserver/docs/
# Check for broken links in SUMMARY.md
grep -oP '\./[^)]+\.md' botserver/docs/src/SUMMARY.md | while read f; do
[ ! -f "botserver/docs/src/$f" ] && echo "Missing: $f"
done
```
---
*Last updated: 2025-01-20*
*Analyzed modules: 24 source directories, 100+ documentation files*

19
docs/book.toml
View file

@ -1,19 +0,0 @@
[book]
title = "General Bots Documentation"
authors = ["General Bots Team"]
language = "en"
multilingual = false
src = "src"
[build]
build-dir = "book"
[output.html]
default-theme = "light"
preferred-dark-theme = "navy"
smart-punctuation = true
additional-css = ["src/custom.css", "src/whatsapp-chat.css"]
additional-js = ["src/theme-sync.js"]
[output.html.favicon]
png = "favicon.png"

124
docs/src/README.md
View file

@ -1,124 +0,0 @@
<div align="center">
<img src="https://pragmatismo.com.br/icons/general-bots-text.svg" alt="General Bots" width="400">
</div>
# General Bots Documentation
Welcome to the General Bots documentation. This guide explains how to install, configure, extend, and deploy conversational AI bots using General Bots' template-based package system and BASIC scripting language.
## About This Documentation
This documentation has been recently updated to accurately reflect the actual implementation of General Bots version 6.0.8.
The following chapters now contain accurate, verified documentation: Chapter 02 covering the package system with its template-based `.gbai` structure, Chapter 06 documenting the Rust architecture including the single-crate structure and module overview, Chapter 09 explaining core features, and the Introduction providing architecture and capabilities overview.
Several areas have partial documentation that continues to improve. Chapter 05 on BASIC keywords includes working examples though the full reference needs expansion. Chapter 08 on tool integration has concepts documented while implementation details are being added. Chapter 11 on authentication reflects the implemented functionality but needs additional detail.
Documentation work continues on several modules. The UI module in `src/ui/`, the UI tree module in `src/ui_tree/`, the Riot compiler module in `src/riot_compiler/`, and the prompt manager in `src/prompt_manager/` all need comprehensive documentation. API endpoints, UI server routes, Drive integration details for S3-compatible storage, and LiveKit video conferencing integration are also being documented.
## What is General Bots?
General Bots is an open-source conversational AI platform written in Rust. The platform enables users to create intelligent chatbots through several integrated capabilities.
BASIC Scripting provides simple `.bas` scripts for defining conversation flows without requiring traditional programming expertise. Template Packages organize bots as `.gbai` directories containing dialogs, knowledge bases, and configuration in a portable structure. Vector Search enables semantic document retrieval using Qdrant for intelligent information access. LLM Integration connects to local models, cloud APIs, and custom providers for natural language understanding. Auto-Bootstrap handles automated installation of PostgreSQL, cache, drive storage, and other dependencies. Multi-Bot Hosting allows running multiple isolated bots on a single server instance.
## Quick Start
Getting started with General Bots follows a straightforward path. Begin with installation by following Chapter 01 on Run and Talk. Then explore the templates directory, particularly `templates/announcements.gbai/`, to see working examples. Create your own bot by copying a template and modifying it to suit your needs. Learn the BASIC scripting language through Chapter 05's reference documentation. Configure your bot by editing the `config.csv` file in your `.gbot/` directory. Finally, deploy by restarting General Bots to activate your changes.
## Table of Contents
### Part I - Getting Started
Chapter 01 on Run and Talk covers installation and your first conversation with a bot.
### Part II - Package System
Chapter 02 on About Packages provides an overview of the template-based package system. This includes the `.gbai` Architecture explaining package structure and lifecycle, `.gbdialog` Dialogs for BASIC scripts, `.gbkb` Knowledge Base for document collections, `.gbot` Configuration for bot parameters, `.gbtheme` UI Theming for web interface customization, and `.gbdrive` File Storage for S3-compatible drive integration.
### Part III - Knowledge Base
Chapter 03 on gbkb Reference covers semantic search and vector database functionality.
### Part IV - User Interface
Chapter 04 on .gbui Interface Reference documents HTML templates and UI components.
### Part V - Themes and Styling
Chapter 05 on gbtheme CSS Reference explains CSS-based theme customization.
### Part VI - BASIC Dialogs
Chapter 06 on gbdialog Reference provides the complete BASIC scripting reference including keywords like TALK, HEAR, LLM, SET CONTEXT, USE KB, and many more.
### Part VII - Extending General Bots
Chapter 07 on gbapp Architecture Reference documents the internal architecture. This includes the Architecture Overview explaining the bootstrap process, Building from Source for compilation and features, Module Structure describing single-crate organization, Service Layer with module descriptions, Creating Custom Keywords for extending BASIC, and Adding Dependencies for Cargo.toml management.
### Part VIII - Bot Configuration
Chapter 08 on gbot Reference covers configuration and parameters.
### Part IX - Tools and Integration
Chapter 09 on API and Tooling explains function calling and tool integration.
### Part X - Feature Deep Dive
Chapter 10 on Feature Reference provides the complete feature list including Core Features documenting platform capabilities.
### Part XI - Community
Chapter 11 on Contributing provides development and contribution guidelines.
### Part XII - Authentication and Security
Chapter 12 on Authentication documents security features.
### Appendices
Appendix I on Database Model provides schema reference. The Glossary defines terms used throughout the documentation.
## Architecture Overview
General Bots is a monolithic Rust application organized as a single crate with clearly defined modules serving different purposes.
### Core Modules
The core modules handle fundamental bot functionality. The auth module provides Argon2 password hashing and session token management. The bot module manages bot lifecycle and coordination. The session module maintains persistent conversation state across interactions. The basic module implements the BASIC interpreter powered by the Rhai scripting engine. The llm and llm_models modules handle LLM provider integration for multiple backends. The context module manages conversation memory and context window optimization.
### Infrastructure Modules
Infrastructure modules provide the foundation for bot operations. The bootstrap module handles auto-installation of all required components. The package_manager module manages PostgreSQL, cache, drive storage, and other services. The web_server module implements the Axum HTTP REST API. The drive module integrates S3-compatible storage and vector database access. The config module handles environment configuration loading and validation.
### Feature Modules
Feature modules add specific capabilities to the platform. The automation module provides cron scheduling and event-driven processing. The email module offers optional IMAP and SMTP integration. The meet module enables LiveKit video conferencing. The channels module supports multi-channel deployment across different platforms. The file module handles document processing for PDF and other formats. The drive_monitor module watches file system changes for automatic updates.
## Technology Stack
General Bots is built on a modern Rust technology stack. The application uses Rust 2021 edition for safety and performance. Web handling uses Axum combined with Tower middleware and Tokio async runtime. Database access uses the Diesel ORM with PostgreSQL as the backing store. Caching uses a Redis-compatible cache component for session and data caching. Storage uses the AWS SDK for S3-compatible drive operations. Vector database functionality uses Qdrant for semantic search when enabled. Scripting uses the Rhai engine to power the BASIC interpreter. Security uses Argon2 for password hashing and AES-GCM for encryption. Optional desktop deployment uses Tauri for native applications.
## Project Information
The current version is 6.0.8 released under the AGPL-3.0 license. The source repository is available at https://github.com/GeneralBots/botserver. The project is maintained by open-source contributors from Pragmatismo.com.br and the broader community.
## Documentation Status
This documentation is a living document that evolves alongside the codebase. Contributions are welcome from anyone who wants to improve it.
If you find inaccuracies or gaps in the documentation, the best approach is to check the source code in `src/` for the ground truth implementation. Submit documentation improvements via pull requests on GitHub. Report issues through the GitHub issue tracker so they can be tracked and addressed.
## Next Steps
Start with the Introduction for a comprehensive overview of General Bots concepts and capabilities. Alternatively, jump directly to Chapter 01 on Run and Talk to install and run General Bots immediately.

370
docs/src/SUMMARY.md
View file

@ -1,370 +0,0 @@
# Summary
[Executive Vision](./executive-vision.md)
[Introduction](./introduction.md)
# Part I - Getting Started
- [Chapter 01: Run and Talk](./chapter-01/README.md)
- [Overview](./chapter-01/overview.md)
- [Quick Start](./chapter-01/quick-start.md)
- [Installation](./chapter-01/installation.md)
- [First Conversation](./chapter-01/first-conversation.md)
- [Sessions and Channels](./chapter-01/sessions.md)
# Part II - Package System
- [Chapter 02: About Packages](./chapter-02/README.md)
- [.gbai Architecture](./chapter-02/gbai.md)
- [.gbdialog Dialogs](./chapter-02/gbdialog.md)
- [.gbkb Knowledge Base](./chapter-02/gbkb.md)
- [.gbot Bot Configuration](./chapter-02/gbot.md)
- [.gbtheme UI Theming](./chapter-02/gbtheme.md)
- [.gbdrive File Storage](./chapter-02/gbdrive.md)
- [Bot Templates](./chapter-02/templates.md)
- [Template Samples & Conversations](./chapter-02/template-samples.md)
- [Template: Business Intelligence](./chapter-02/template-bi.md)
- [Template: Web Crawler](./chapter-02/template-crawler.md)
- [Template: Legal Documents](./chapter-02/template-law.md)
- [Template: LLM Server](./chapter-02/template-llm-server.md)
- [Template: LLM Tools](./chapter-02/template-llm-tools.md)
- [Template: API Client](./chapter-02/template-api-client.md)
- [Template: Platform Analytics](./chapter-02/template-analytics.md)
- [Template: Office Automation](./chapter-02/template-office.md)
- [Template: Reminders](./chapter-02/template-reminder.md)
- [Template: Sales CRM](./chapter-02/template-crm.md)
- [Template: CRM Contacts](./chapter-02/template-crm-contacts.md)
- [Template: Marketing](./chapter-02/template-marketing.md)
- [Template: Creating Templates](./chapter-02/template-template.md)
# Part III - Knowledge Base
- [Chapter 03: gbkb Reference](./chapter-03/README.md)
- [KB and Tools System](./chapter-03/kb-and-tools.md)
- [Vector Collections](./chapter-03/vector-collections.md)
- [Document Indexing](./chapter-03/indexing.md)
- [Semantic Search](./chapter-03/semantic-search.md)
- [Episodic Memory](./chapter-03/episodic-memory.md)
- [Semantic Caching](./chapter-03/caching.md)
# Part IV - User Interface
- [Chapter 04: .gbui Interface Reference](./chapter-04-gbui/README.md)
- [Suite User Manual](./chapter-04-gbui/suite-manual.md)
- [UI Structure](./chapter-04-gbui/ui-structure.md)
- [single.gbui - Simple Chat](./chapter-04-gbui/single-gbui.md)
- [Console Mode](./chapter-04-gbui/console-mode.md)
- [Monitoring Dashboard](./chapter-04-gbui/monitoring.md)
- [HTMX Architecture](./chapter-04-gbui/htmx-architecture.md)
- [Suite Applications](./chapter-04-gbui/apps/README.md)
- [Suite - Full Desktop](./chapter-04-gbui/apps/suite.md)
- [Chat - AI Assistant](./chapter-04-gbui/apps/chat.md)
- [Drive - File Management](./chapter-04-gbui/apps/drive.md)
- [Tasks - To-Do Lists](./chapter-04-gbui/apps/tasks.md)
- [Mail - Email Client](./chapter-04-gbui/apps/mail.md)
- [Calendar - Scheduling](./chapter-04-gbui/apps/calendar.md)
- [Meet - Video Calls](./chapter-04-gbui/apps/meet.md)
- [Player - Media Viewer](./chapter-04-gbui/apps/player.md)
- [Paper - AI Writing](./chapter-04-gbui/apps/paper.md)
- [Research - AI Search](./chapter-04-gbui/apps/research.md)
- [Analytics - Dashboards](./chapter-04-gbui/apps/analytics.md)
- [Designer - Visual Builder](./chapter-04-gbui/apps/designer.md)
- [Sources - Prompts & Templates](./chapter-04-gbui/apps/sources.md)
- [Compliance - Security Scanner](./chapter-04-gbui/apps/compliance.md)
- [Compliance API Reference](./chapter-04-gbui/apps/compliance-api.md)
- [How-To Tutorials](./chapter-04-gbui/how-to/README.md)
- [Create Your First Bot](./chapter-04-gbui/how-to/create-first-bot.md)
- [Write Your First Dialog](./chapter-04-gbui/how-to/write-first-dialog.md)
- [Add Documents to Knowledge Base](./chapter-04-gbui/how-to/add-kb-documents.md)
- [Connect WhatsApp](./chapter-04-gbui/how-to/connect-whatsapp.md)
- [Monitor Your Bot](./chapter-04-gbui/how-to/monitor-sessions.md)
# Part V - Themes and Styling
- [Chapter 05: gbtheme CSS Reference](./chapter-05-gbtheme/README.md)
- [Theme Structure](./chapter-05-gbtheme/structure.md)
- [CSS Customization](./chapter-05-gbtheme/css.md)
# Part VI - BASIC Dialogs
- [Chapter 06: gbdialog Reference](./chapter-06-gbdialog/README.md)
- [Dialog Basics](./chapter-06-gbdialog/basics.md)
- [Universal Messaging & Multi-Channel](./chapter-06-gbdialog/universal-messaging.md)
- [BASIC vs n8n/Zapier/Make](./chapter-06-gbdialog/basic-vs-automation-tools.md)
- [Template Variables](./chapter-06-gbdialog/template-variables.md)
- [Template Examples](./chapter-06-gbdialog/templates.md)
- [start.bas](./chapter-06-gbdialog/templates/start.md)
- [enrollment.bas](./chapter-06-gbdialog/templates/enrollment.md)
- [auth.bas](./chapter-06-gbdialog/templates/auth.md)
- [ai-search.bas](./chapter-06-gbdialog/templates/ai-search.md)
- [analytics-dashboard.bas](./chapter-06-gbdialog/templates/analytics-dashboard.md)
- [announcements.bas](./chapter-06-gbdialog/templates/announcements.md)
- [backup.bas](./chapter-06-gbdialog/templates/backup.md)
- [bank.bas](./chapter-06-gbdialog/templates/bank.md)
- [broadcast.bas](./chapter-06-gbdialog/templates/broadcast.md)
- [default.bas](./chapter-06-gbdialog/templates/default.md)
- [edu.bas](./chapter-06-gbdialog/templates/edu.md)
- [employees.bas](./chapter-06-gbdialog/templates/employees.md)
- [erp.bas](./chapter-06-gbdialog/templates/erp.md)
- [helpdesk.bas](./chapter-06-gbdialog/templates/helpdesk.md)
- [privacy.bas](./chapter-06-gbdialog/templates/privacy.md)
- [sales-pipeline.bas](./chapter-06-gbdialog/templates/sales-pipeline.md)
- [store.bas](./chapter-06-gbdialog/templates/store.md)
- [talk-to-data.bas](./chapter-06-gbdialog/templates/talk-to-data.md)
- [whatsapp.bas](./chapter-06-gbdialog/templates/whatsapp.md)
- [Consolidated Examples](./chapter-06-gbdialog/examples-consolidated.md)
- [Data Sync Tools](./chapter-06-gbdialog/tools-data-sync.md)
- [Keywords Reference](./chapter-06-gbdialog/keywords.md)
- [TALK](./chapter-06-gbdialog/keyword-talk.md)
- [HEAR](./chapter-06-gbdialog/keyword-hear.md)
- [SET CONTEXT](./chapter-06-gbdialog/keyword-set-context.md)
- [GET BOT MEMORY](./chapter-06-gbdialog/keyword-get-bot-memory.md)
- [SET BOT MEMORY](./chapter-06-gbdialog/keyword-set-bot-memory.md)
- [GET USER MEMORY](./chapter-06-gbdialog/keyword-get-user-memory.md)
- [SET USER MEMORY](./chapter-06-gbdialog/keyword-set-user-memory.md)
- [REMEMBER / RECALL](./chapter-06-gbdialog/keyword-remember.md)
- [BOOK / BOOK_MEETING](./chapter-06-gbdialog/keyword-book.md)
- [WEATHER / FORECAST](./chapter-06-gbdialog/keyword-weather.md)
- [ADD BOT](./chapter-06-gbdialog/keyword-add-bot.md)
- [ADD MEMBER](./chapter-06-gbdialog/keyword-add-member.md)
- [ADD SUGGESTION](./chapter-06-gbdialog/keyword-add-suggestion.md)
- [MODEL ROUTE](./chapter-06-gbdialog/keyword-model-route.md)
- [SEND TEMPLATE](./chapter-06-gbdialog/keyword-send-template.md)
- [SET USER](./chapter-06-gbdialog/keyword-set-user.md)
- [USE MODEL](./chapter-06-gbdialog/keyword-use-model.md)
- [DELEGATE TO BOT](./chapter-06-gbdialog/keyword-delegate-to-bot.md)
- [BOT REFLECTION](./chapter-06-gbdialog/keyword-bot-reflection.md)
- [RUN PYTHON / JAVASCRIPT / BASH](./chapter-06-gbdialog/keyword-run-code.md)
- [USE KB](./chapter-06-gbdialog/keyword-use-kb.md)
- [CLEAR KB](./chapter-06-gbdialog/keyword-clear-kb.md)
- [USE WEBSITE](./chapter-06-gbdialog/keyword-use-website.md)
- [USE TOOL](./chapter-06-gbdialog/keyword-use-tool.md)
- [CLEAR TOOLS](./chapter-06-gbdialog/keyword-clear-tools.md)
- [GET](./chapter-06-gbdialog/keyword-get.md)
- [SET](./chapter-06-gbdialog/keyword-set.md)
- [ON](./chapter-06-gbdialog/keyword-on.md)
- [SET SCHEDULE](./chapter-06-gbdialog/keyword-set-schedule.md)
- [CREATE SITE](./chapter-06-gbdialog/keyword-create-site.md)
- [CREATE DRAFT](./chapter-06-gbdialog/keyword-create-draft.md)
- [CREATE TASK](./chapter-06-gbdialog/keyword-create-task.md)
- [PRINT](./chapter-06-gbdialog/keyword-print.md)
- [WAIT](./chapter-06-gbdialog/keyword-wait.md)
- [FORMAT](./chapter-06-gbdialog/keyword-format.md)
- [FIRST](./chapter-06-gbdialog/keyword-first.md)
- [LAST](./chapter-06-gbdialog/keyword-last.md)
- [FOR EACH](./chapter-06-gbdialog/keyword-for-each.md)
- [EXIT FOR](./chapter-06-gbdialog/keyword-exit-for.md)
- [SEND MAIL](./chapter-06-gbdialog/keyword-send-mail.md)
- [FIND](./chapter-06-gbdialog/keyword-find.md)
- [INSTR](./chapter-06-gbdialog/keyword-instr.md)
- [IS NUMERIC](./chapter-06-gbdialog/keyword-is-numeric.md)
- [SWITCH](./chapter-06-gbdialog/keyword-switch.md)
- [WEBHOOK](./chapter-06-gbdialog/keyword-webhook.md)
- [TABLE](./chapter-06-gbdialog/keyword-table.md)
- [KB Statistics Keywords](./chapter-06-gbdialog/keywords-kb-statistics.md)
- [KB STATISTICS](./chapter-06-gbdialog/keyword-kb-statistics.md)
- [KB COLLECTION STATS](./chapter-06-gbdialog/keyword-kb-collection-stats.md)
- [KB DOCUMENTS COUNT](./chapter-06-gbdialog/keyword-kb-documents-count.md)
- [KB DOCUMENTS ADDED SINCE](./chapter-06-gbdialog/keyword-kb-documents-added-since.md)
- [KB LIST COLLECTIONS](./chapter-06-gbdialog/keyword-kb-list-collections.md)
- [KB STORAGE SIZE](./chapter-06-gbdialog/keyword-kb-storage-size.md)
- [Multi-Agent Keywords](./chapter-06-gbdialog/keywords-multi-agent.md)
- [Social Media Keywords](./chapter-06-gbdialog/keywords-social-media.md)
- [Lead Scoring Keywords](./chapter-06-gbdialog/keywords-lead-scoring.md)
- [HTTP & API Operations](./chapter-06-gbdialog/keywords-http.md)
- [POST](./chapter-06-gbdialog/keyword-post.md)
- [PUT](./chapter-06-gbdialog/keyword-put.md)
- [PATCH](./chapter-06-gbdialog/keyword-patch.md)
- [DELETE HTTP](./chapter-06-gbdialog/keyword-delete-http.md)
- [SET HEADER](./chapter-06-gbdialog/keyword-set-header.md)
- [GRAPHQL](./chapter-06-gbdialog/keyword-graphql.md)
- [SOAP](./chapter-06-gbdialog/keyword-soap.md)
- [Data Operations](./chapter-06-gbdialog/keywords-data.md)
- [SAVE](./chapter-06-gbdialog/keyword-save.md)
- [INSERT](./chapter-06-gbdialog/keyword-insert.md)
- [UPDATE](./chapter-06-gbdialog/keyword-update.md)
- [DELETE](./chapter-06-gbdialog/keyword-delete.md)
- [MERGE](./chapter-06-gbdialog/keyword-merge.md)
- [FILL](./chapter-06-gbdialog/keyword-fill.md)
- [MAP](./chapter-06-gbdialog/keyword-map.md)
- [FILTER](./chapter-06-gbdialog/keyword-filter.md)
- [AGGREGATE](./chapter-06-gbdialog/keyword-aggregate.md)
- [JOIN](./chapter-06-gbdialog/keyword-join.md)
- [PIVOT](./chapter-06-gbdialog/keyword-pivot.md)
- [GROUP BY](./chapter-06-gbdialog/keyword-group-by.md)
- [Media & Messaging](./chapter-06-gbdialog/keywords-media.md)
- [PLAY](./chapter-06-gbdialog/keyword-play.md)
- [QR CODE](./chapter-06-gbdialog/keyword-qrcode.md)
- [SEND SMS](./chapter-06-gbdialog/keyword-sms.md)
- [File Operations](./chapter-06-gbdialog/keywords-file.md)
- [READ](./chapter-06-gbdialog/keyword-read.md)
- [WRITE](./chapter-06-gbdialog/keyword-write.md)
- [DELETE FILE](./chapter-06-gbdialog/keyword-delete-file.md)
- [COPY](./chapter-06-gbdialog/keyword-copy.md)
- [MOVE](./chapter-06-gbdialog/keyword-move.md)
- [LIST](./chapter-06-gbdialog/keyword-list.md)
- [COMPRESS](./chapter-06-gbdialog/keyword-compress.md)
- [EXTRACT](./chapter-06-gbdialog/keyword-extract.md)
- [UPLOAD](./chapter-06-gbdialog/keyword-upload.md)
- [DOWNLOAD](./chapter-06-gbdialog/keyword-download.md)
- [GENERATE PDF](./chapter-06-gbdialog/keyword-generate-pdf.md)
- [MERGE PDF](./chapter-06-gbdialog/keyword-merge-pdf.md)
# Part VII - Extending General Bots
- [Chapter 07: gbapp Architecture Reference](./chapter-07-gbapp/README.md)
- [Architecture Overview](./chapter-07-gbapp/architecture.md)
- [Building from Source](./chapter-07-gbapp/building.md)
- [Container Deployment (LXC)](./chapter-07-gbapp/containers.md)
- [Docker Deployment](./chapter-07-gbapp/docker-deployment.md)
- [Scaling and Load Balancing](./chapter-07-gbapp/scaling.md)
- [Infrastructure Design](./chapter-07-gbapp/infrastructure.md)
- [Observability](./chapter-07-gbapp/observability.md)
- [Philosophy](./chapter-07-gbapp/philosophy.md)
- [Example gbapp](./chapter-07-gbapp/example-gbapp.md)
- [Module Structure](./chapter-07-gbapp/crates.md)
- [Service Layer](./chapter-07-gbapp/services.md)
- [Creating Custom Keywords](./chapter-07-gbapp/custom-keywords.md)
- [Adding Dependencies](./chapter-07-gbapp/dependencies.md)
# Part VIII - Bot Configuration
- [Chapter 08: gbot Reference](./chapter-08-config/README.md)
- [config.csv Format](./chapter-08-config/config-csv.md)
- [Bot Parameters](./chapter-08-config/parameters.md)
- [LLM Configuration](./chapter-08-config/llm-config.md)
- [Context Configuration](./chapter-08-config/context-config.md)
- [Drive Integration](./chapter-08-config/drive.md)
- [Multimodal Configuration](./chapter-08-config/multimodal.md)
- [Secrets Management](./chapter-08-config/secrets-management.md)
# Part IX - Tools and Integration
- [Chapter 09: API and Tooling](./chapter-09-api/README.md)
- [Tool Definition](./chapter-09-api/tool-definition.md)
- [PARAM Declaration](./chapter-09-api/param-declaration.md)
- [Tool Compilation](./chapter-09-api/compilation.md)
- [MCP Format](./chapter-09-api/mcp-format.md)
- [Tool Format](./chapter-09-api/openai-format.md)
- [GET Keyword Integration](./chapter-09-api/get-integration.md)
- [External APIs](./chapter-09-api/external-apis.md)
- [LLM REST Server](./chapter-09-api/llm-rest-server.md)
- [NVIDIA GPU Setup for LXC](./chapter-09-api/nvidia-gpu-setup.md)
- [Chapter 10: REST API Reference](./chapter-10-api/README.md)
- [Files API](./chapter-10-api/files-api.md)
- [Document Processing API](./chapter-10-api/document-processing.md)
- [Users API](./chapter-10-api/users-api.md)
- [User Security API](./chapter-10-api/user-security.md)
- [Groups API](./chapter-10-api/groups-api.md)
- [Group Membership API](./chapter-10-api/group-membership.md)
- [Conversations API](./chapter-10-api/conversations-api.md)
- [Calls API](./chapter-10-api/calls-api.md)
- [Whiteboard API](./chapter-10-api/whiteboard-api.md)
- [Email API](./chapter-10-api/email-api.md)
- [Notifications API](./chapter-10-api/notifications-api.md)
- [Calendar API](./chapter-10-api/calendar-api.md)
- [Tasks API](./chapter-10-api/tasks-api.md)
- [Storage API](./chapter-10-api/storage-api.md)
- [Backup API](./chapter-10-api/backup-api.md)
- [Analytics API](./chapter-10-api/analytics-api.md)
- [Reports API](./chapter-10-api/reports-api.md)
- [Admin API](./chapter-10-api/admin-api.md)
- [Monitoring API](./chapter-10-api/monitoring-api.md)
- [AI API](./chapter-10-api/ai-api.md)
- [ML API](./chapter-10-api/ml-api.md)
- [Security API](./chapter-10-api/security-api.md)
- [Compliance API](./chapter-10-api/compliance-api.md)
- [Example Integrations](./chapter-10-api/examples.md)
# Part X - Feature Deep Dive
- [Chapter 11: Feature Reference](./chapter-11-features/README.md)
- [Feature Editions](./chapter-11-features/editions.md)
- [Core Features](./chapter-11-features/core-features.md)
- [Conversation Management](./chapter-11-features/conversation.md)
- [AI and LLM](./chapter-11-features/ai-llm.md)
- [Knowledge Base](./chapter-11-features/knowledge-base.md)
- [Automation](./chapter-11-features/automation.md)
- [Email Integration](./chapter-11-features/email.md)
- [Storage and Data](./chapter-11-features/storage.md)
- [Multi-Channel Support](./chapter-11-features/channels.md)
- [Drive Monitor](./chapter-11-features/drive-monitor.md)
- [Platform Capabilities](./chapter-11-features/platform-comparison.md)
- [Enterprise Platform Migration](./chapter-11-features/m365-comparison.md)
- [Projects](./chapter-11-features/projects.md)
- [Multi-Agent Office Suite Design](./chapter-11-features/multi-agent-design.md)
- [What's New: Multi-Agent Features](./chapter-11-features/whats-new.md)
- [Multi-Agent Orchestration](./chapter-11-features/multi-agent-orchestration.md)
- [Memory Management](./chapter-11-features/memory-management.md)
- [Hybrid RAG Search](./chapter-11-features/hybrid-search.md)
# Part XI - Security
- [Chapter 12: Authentication & Permissions](./chapter-12-auth/README.md)
- [User Authentication](./chapter-12-auth/user-auth.md)
- [Password Security](./chapter-12-auth/password-security.md)
- [API Endpoints](./chapter-12-auth/api-endpoints.md)
- [Bot Authentication](./chapter-12-auth/bot-auth.md)
- [Security Features](./chapter-12-auth/security-features.md)
- [Security Policy](./chapter-12-auth/security-policy.md)
- [Compliance Requirements](./chapter-12-auth/compliance-requirements.md)
- [Permissions Matrix](./chapter-12-auth/permissions-matrix.md)
- [User Context vs System Context](./chapter-12-auth/user-system-context.md)
# Part XII - Community
- [Chapter 13: Contributing](./chapter-13-community/README.md)
- [Development Setup](./chapter-13-community/setup.md)
- [Testing Guide](./chapter-13-community/testing.md)
- [Documentation](./chapter-13-community/documentation.md)
- [Pull Requests](./chapter-13-community/pull-requests.md)
- [Community Guidelines](./chapter-13-community/community.md)
- [IDEs](./chapter-13-community/ide-extensions.md)
# Part XIII - Migration
- [Chapter 14: Migration Guide](./chapter-14-migration/README.md)
- [Migration Overview](./chapter-14-migration/overview.md)
- [Platform Comparison Matrix](./chapter-14-migration/comparison-matrix.md)
- [Migration Resources](./chapter-14-migration/resources.md)
- [Common Concepts](./chapter-14-migration/common-concepts.md)
- [Knowledge Base Migration](./chapter-14-migration/kb-migration.md)
- [Cloud Productivity Migration](./chapter-14-migration/google-workspace.md)
- [Enterprise Platform Migration](./chapter-14-migration/microsoft-365.md)
- [n8n Migration](./chapter-14-migration/n8n.md)
- [Notion Migration](./chapter-14-migration/notion.md)
- [Perplexity Migration](./chapter-14-migration/perplexity.md)
- [Zapier and Make Migration](./chapter-14-migration/zapier-make.md)
- [Intercom Migration](./chapter-14-migration/intercom.md)
- [Dialogflow Migration](./chapter-14-migration/dialogflow.md)
- [Botpress Migration](./chapter-14-migration/botpress.md)
- [Automation Migration](./chapter-14-migration/automation.md)
- [Validation and Testing](./chapter-14-migration/validation.md)
# Appendices
- [Appendix A: Database Model](./appendix-15/README.md)
- [Schema Overview](./appendix-15/schema.md)
- [Tables](./appendix-15/tables.md)
- [Relationships](./appendix-15/relationships.md)
- [Appendix B: External Services](./appendix-external-services/README.md)
- [Service Catalog](./appendix-external-services/catalog.md)
- [LLM Providers](./appendix-external-services/llm-providers.md)
- [Weather API](./appendix-external-services/weather.md)
- [Channel Integrations](./appendix-external-services/channels.md)
- [Storage Services](./appendix-external-services/storage.md)
- [Directory Services](./appendix-external-services/directory.md)
- [Attendance Queue](./appendix-external-services/attendance-queue.md)
- [Time-Series Database](./appendix-external-services/timeseries.md)
- [NVIDIA GPU](./appendix-external-services/nvidia.md)
- [Multimodal](./appendix-external-services/multimodal.md)
- [Console (XtreeUI)](./appendix-external-services/console.md)
- [Appendix C: Environment Variables](./appendix-env-vars/README.md)
- [Appendix D: Documentation Style](./appendix-docs-style/conversation-examples.md)
[Glossary](./glossary.md)
[Contact](./contact/README.md)

52
docs/src/appendix-15/README.md
View file

@ -1,52 +0,0 @@
## Appendix I – Database Model
<img src="./assets/schema-overview.svg" alt="Database Schema Overview" style="max-height: 400px; width: 100%; object-fit: contain;">
The core database schema for GeneralBots is defined in `src/shared/models.rs`. It uses **Diesel** with PostgreSQL and includes the following primary tables:
| Table | Description |
|-------|-------------|
| `users` | Stores user accounts, authentication tokens, and profile data. |
| `sessions` | Tracks active `BotSession` instances, their start/end timestamps, and associated user. |
| `knowledge_bases` | Metadata for each `.gbkb` collection (name, vector store configuration, creation date). |
| `messages` | Individual chat messages (role = user/assistant, content, timestamp, linked to a session). |
| `tools` | Registered custom tools per session (name, definition JSON, activation status). |
| `files` | References to files managed by the `.gbdrive` package (path, size, MIME type, storage location). |
### Relationships
- **User ↔ Sessions** – One‑to‑many: a user can have many sessions.
- **Session ↔ Messages** – One‑to‑many: each session contains a sequence of messages.
- **Session ↔ KnowledgeBase** – Many‑to‑one: a session uses a single knowledge base at a time.
- **Session ↔ Tools** – One‑to‑many: tools are scoped to the session that registers them.
- **File ↔ KnowledgeBase** – Optional link for documents stored in a knowledge base.
### Key Tables
**User Table**
- id: Integer primary key
- username: String
- email: String
- password_hash: String
- created_at: Timestamp
**Session Table**
- id: Integer primary key
- user_id: Foreign key to User
- started_at: Timestamp
- last_active: Timestamp
- knowledge_base_id: Integer
**Message Table**
- id: Integer primary key
- session_id: Foreign key to Session
- role: String ("user" or "assistant")
- content: Text
- timestamp: Timestamp
The schema is automatically migrated when the server starts.
---
<div align="center">
<img src="https://pragmatismo.com.br/icons/general-bots-text.svg" alt="General Bots" width="200">
</div>

180
docs/src/appendix-15/relationships.md
View file

@ -1,180 +0,0 @@
# Database Relationships
This document describes the relationships between tables in the General Bots database schema.
## Entity Relationship Overview
The database follows a hierarchical structure with organizations at the top, containing bots, which in turn manage users, sessions, and content.
## Primary Relationships
### Organization Hierarchy
```
organizations
bots (1:N)
bot_configuration (1:N)
bot_memories (1:N)
kb_collections (1:N)
kb_documents (1:N)
basic_tools (1:N)
system_automations (1:N)
```
Each organization can have multiple bots, and each bot has its own configuration, memories, knowledge bases, tools, and automations. Cascade delete behavior means that deleting an organization removes all associated bots and their data.
### User and Session Management
```
users
user_sessions (1:N)
message_history (1:N)
clicks (1:N)
user_kb_associations (1:N)
session_tool_associations (1:N)
user_login_tokens (1:N)
user_preferences (1:1)
user_email_accounts (1:N)
email_drafts (1:N)
email_folders (1:N)
folder_messages (1:N)
```
Users can have multiple active sessions across different bots. Each session maintains its own message history and associations. Sessions link to both users and bots, forming a many-to-many relationship through the sessions table.
### Bot-User Interaction
```
bots ←→ user_sessions ←→ users
user_sessions:
message_history
user_kb_associations → kb_collections
session_tool_associations → basic_tools
bots:
kb_collections
basic_tools
```
Users interact with bots through sessions. Sessions dynamically associate with knowledge bases and tools as needed. Message history preserves the conversation context for continuity across interactions.
## Foreign Key Constraints
### Strong Relationships (CASCADE DELETE)
These relationships enforce referential integrity with cascade deletion.
The organizations to bots relationship means deleting an organization removes all its bots, with `bots.org_id` referencing `organizations.org_id`.
The bots to bot_configuration relationship means deleting a bot removes all its configuration, with `bot_configuration.bot_id` referencing `bots.id`.
The bots to bot_memories relationship means deleting a bot removes all its memories, with `bot_memories.bot_id` referencing `bots.id`.
The user_sessions to message_history relationship means ending a session removes its message history, with `message_history.session_id` referencing `user_sessions.id`.
### Weak Relationships (SET NULL/RESTRICT)
These relationships maintain data integrity without cascade deletion.
The users to user_sessions relationship sets `session.user_id` to NULL when a user is deleted, preserving conversation history for audit purposes while making the session anonymous.
The kb_collections to kb_documents relationship restricts deletion if documents exist, requiring explicit document deletion first to prevent accidental data loss.
The user_email_accounts to email_drafts relationship preserves drafts when an email account is deleted, allowing draft recovery or reassignment to other accounts.
## Many-to-Many Relationships
### Sessions ↔ Knowledge Bases
```
user_sessions ←→ user_kb_associations ←→ kb_collections
```
The `user_kb_associations` junction table allows dynamic KB activation per session. Multiple knowledge bases can be active simultaneously, enabling conversations that draw from several information sources.
### Sessions ↔ Tools
```
user_sessions ←→ session_tool_associations ←→ basic_tools
```
The `session_tool_associations` junction table enables tools to be loaded per session as needed. This supports dynamic tool discovery where available capabilities vary based on context.
## Relationship Cardinality
One-to-one relationships exist between users and user_preferences, where each user has exactly one preferences record.
One-to-many relationships include organizations to bots, bots to bot_configuration, bots to kb_collections, kb_collections to kb_documents, users to user_sessions, user_sessions to message_history, and user_email_accounts to email_drafts.
Many-to-many relationships exist between user_sessions and kb_collections through user_kb_associations, between user_sessions and basic_tools through session_tool_associations, and between users and bots through user_sessions.
## Referential Integrity Rules
### Insert Order
When inserting data, follow this sequence: organizations first, then bots, then bot_configuration. For user data, insert users first, then user_sessions, then message_history. Knowledge base data requires kb_collections before kb_documents. Tools require basic_tools before session_tool_associations.
### Delete Order (reverse of insert)
When deleting data, reverse the insert order: message_history first, then user_sessions, then users. For tools, delete session_tool_associations before basic_tools. For knowledge bases, delete kb_documents before kb_collections. For organizational data, delete bot_configuration, then bots, then organizations.
## Orphan Prevention
### Automatic Cleanup
Sessions expire based on the `expires_at` timestamp. Orphaned associations are cleaned by background jobs that run periodically. Temporary data has TTL settings that trigger automatic removal.
### Manual Cleanup Required
Some data requires manual cleanup. Unused kb_documents should be periodically reviewed and removed. Old message_history should be cleared based on retention policy. Expired user_login_tokens should be purged.
## Performance Implications
### Hot Paths
These relationships are frequently traversed and should be optimized.
The user_sessions to message_history path benefits from an index on `(session_id, created_at DESC)` and is used for conversation display.
The bots to bot_memories path benefits from an index on `(bot_id, key)` and is used by GET BOT MEMORY and SET BOT MEMORY operations.
The kb_collections to kb_documents path benefits from an index on `(collection_id, indexed)` and is used for semantic search.
### Join Optimization
Common join patterns benefit from composite indexes.
User session context queries join user_sessions with users on `user_sessions.user_id = users.id` and with bots on `user_sessions.bot_id = bots.id`.
Knowledge base loading joins user_kb_associations with kb_collections on `user_kb_associations.collection_id = kb_collections.id` and kb_documents on `kb_collections.id = kb_documents.collection_id`.
Tool discovery joins session_tool_associations with basic_tools on `session_tool_associations.tool_id = basic_tools.id` filtered by session_id and bot_id.
## Data Consistency Patterns
### Transaction Boundaries
Certain operations must be atomic.
Session creation requires inserting the user_session record, initializing default associations, and creating the initial message all within a single transaction.
Tool registration requires inserting the basic_tool record, updating bot_configuration, and refreshing active sessions together.
Document upload requires inserting the kb_document record, triggering the indexing job, and updating collection metadata atomically.
### Eventual Consistency
Some operations can be eventually consistent.
Vector embeddings allow document upload to complete first, with asynchronous indexing creating embeddings afterward. Search becomes available after processing completes.
Email synchronization saves account configuration immediately, then background sync fetches emails asynchronously. Folders and counts update as sync progresses.
## Best Practices
Always use foreign keys for data integrity to catch relationship violations at the database level. Index foreign key columns for join performance to avoid full table scans on relationship traversals. Use transactions for related updates to maintain consistency across multiple tables.
Implement soft deletes for audit trails where regulations require historical data retention. Monitor constraint violations in logs to catch application bugs early. Plan cascade paths carefully to avoid unintended data deletion.
Document relationship changes in migrations so the team understands schema evolution over time.

126
docs/src/appendix-15/schema.md
View file

@ -1,126 +0,0 @@
# Database Schema Overview
General Bots uses PostgreSQL as its primary database with Diesel ORM for type-safe database operations. The schema is designed to support multi-tenant bot hosting with comprehensive session management, user authentication, and content storage.
## Core Architecture
The database schema follows several key design principles. All tables use UUID primary keys for globally unique identifiers that work across distributed systems. Created and updated timestamps provide audit trails for tracking data changes. Foreign key relationships maintain referential integrity between related entities. JSON fields offer flexible storage for dynamic configuration and metadata that doesn't fit rigid schema definitions.
## Database Schema Diagram
## Entity Relationship Overview
<img src="./assets/schema-overview.svg" alt="Database Schema Overview" style="max-height: 400px; width: 100%; object-fit: contain;">
### Core Tables Structure
## Detailed Schema
<img src="./assets/schema-detailed.svg" alt="Database Entity Details" style="max-height: 400px; width: 100%; object-fit: contain;">
## Schema Categories
### Organization & Bot Management
The `organizations` table provides multi-tenant organization support, isolating data between different customers or deployments. The `bots` table stores bot instances and their configurations. The `bot_configuration` table contains bot-specific settings and parameters. The `bot_memories` table provides persistent key-value storage for bots to maintain state across sessions.
### User & Authentication
The `users` table stores user accounts with secure password storage using Argon2 hashing. The `user_sessions` table tracks active user sessions with authentication tokens. The `user_login_tokens` table manages authentication tokens for login flows. The `user_preferences` table contains user-specific settings and customizations.
### Conversation & Messaging
The `message_history` table maintains complete conversation history between users and bots. The `clicks` table tracks user interaction events for analytics. The `system_automations` table stores scheduled tasks and automation rules that run without user intervention.
### Knowledge Base
The `kb_collections` table defines knowledge base collection containers. The `kb_documents` table stores documents within those collections. The `user_kb_associations` table manages user access permissions to knowledge bases. The `session_tool_associations` table tracks which tools are available within specific sessions.
### Tools & Integration
The `basic_tools` table stores BASIC script tool definitions compiled from `.bas` files. The `user_email_accounts` table manages email integration accounts for users. The `email_drafts` table stores draft emails being composed. The `email_folders` table organizes email folder structures.
## Table Relationships
### Session Flow
<img src="./assets/session-flow.svg" alt="Session Flow Diagram" style="max-height: 400px; width: 100%; object-fit: contain;">
### Knowledge Base Access
<img src="./assets/kb-access.svg" alt="Knowledge Base Access" style="max-height: 400px; width: 100%; object-fit: contain;">
### Primary Relationships
The bot hierarchy establishes that organizations contain multiple bots in a one-to-many relationship. Each bot has multiple configuration entries and memories associated with it.
User sessions connect users to bots through the session table. Users can have multiple sessions, and each session maintains its own message history. Bots also connect to sessions, enabling the many-to-many relationship between users and bots.
Knowledge management links bots to knowledge base collections, with each collection containing multiple documents. Sessions associate with knowledge bases through the user_kb_associations table.
Tool associations connect bots to their defined tools, and sessions link to available tools through the session_tool_associations junction table.
## Data Types
The schema uses several PostgreSQL data types throughout. UUID fields serve as primary keys and foreign key references for globally unique identification. Text fields store variable-length string data without length constraints. Varchar fields hold fixed-length strings for codes and identifiers. Timestamptz fields store timestamps with timezone information for accurate time tracking across regions. Jsonb fields provide JSON storage with indexing capabilities for flexible schemas. Boolean fields represent binary flags and settings. Integer fields store counters and numeric values.
## Indexing Strategy
Primary indexes exist on all id fields serving as primary keys. Foreign key relationships receive indexes for efficient joins. Timestamp fields are indexed to support time-based queries. Session tokens have indexes for fast authentication lookups.
Composite indexes optimize common query patterns. The combination of bot_id and user_id enables efficient session lookup. Collection_id with document_id accelerates knowledge retrieval. User_id paired with created_at supports history queries ordered by time.
## Migration Management
Database migrations are managed through Diesel's migration system. Migrations reside in the `migrations/` directory with each migration containing both up.sql and down.sql files for applying and reverting changes. Version tracking occurs in the `__diesel_schema_migrations` table. The bootstrap process automatically applies pending migrations on startup.
## Performance Considerations
### Connection Pooling
The default connection pool maintains 10 connections to balance resource usage with concurrency. Pool size is configurable via environment variables for different deployment scales. Automatic connection recycling prevents stale connections from causing issues.
### Query Optimization
Prepared statements cache query plans for repeated queries, improving performance. Batch operations handle bulk inserts efficiently rather than individual row insertions. Lazy loading defers loading of related entities until needed. Pagination limits result sets to manageable sizes for large tables.
### Data Retention
Message history retention is configurable to balance storage costs with historical needs. Automatic cleanup removes expired sessions to free resources. An archival strategy moves old conversations to cold storage while maintaining accessibility.
## Security Features
### Data Protection
Password hashing uses the Argon2 algorithm for strong protection against brute-force attacks. AES-GCM encryption protects sensitive fields at rest. Secure random token generation creates unpredictable session identifiers. Diesel's parameterized queries prevent SQL injection attacks.
### Access Control
Row-level security is implemented through application logic that filters queries by user context. User isolation ensures sessions only access their own data. Bot isolation separates data by organization to prevent cross-tenant access. Audit logging records sensitive operations for compliance and security review.
## Backup Strategy
### Backup Types
Full database dumps capture complete point-in-time snapshots. Incremental WAL archiving provides continuous backup with minimal storage overhead. Point-in-time recovery support enables restoration to any moment within the retention window. Cross-region replication offers disaster recovery capabilities for critical deployments.
### Restore Procedures
Automated restore testing validates backup integrity on a regular schedule. Version compatibility checks ensure backups restore correctly to the current schema. Data integrity validation confirms restored data matches expected checksums. Zero-downtime migration support enables schema changes without service interruption.
## Monitoring
### Key Metrics
Connection pool usage indicates whether the pool size needs adjustment. Query execution time reveals slow queries requiring optimization. Table sizes and growth rates inform capacity planning. Index effectiveness metrics show whether indexes are being utilized. Lock contention monitoring identifies concurrency bottlenecks.
### Health Checks
Database connectivity verification ensures the connection pool can reach PostgreSQL. Migration status checks confirm all migrations have been applied. Replication lag monitoring applies to deployments with read replicas. Storage usage tracking prevents disk space exhaustion.
## Best Practices
Always use migrations for schema changes rather than manual DDL to maintain consistency across environments. Never modify production data directly through SQL clients to avoid bypassing application logic. Test migrations in development first to catch issues before they affect production. Monitor performance metrics regularly to identify degradation early. Plan capacity based on growth projections to avoid emergency scaling. Document changes in migration files with comments explaining the purpose of each change. Use transactions for data consistency when multiple tables must be updated together. Implement retry logic for transient failures like connection timeouts or deadlocks.
## Future Considerations
Partitioning for large tables like message_history would improve query performance and enable efficient data archival. Read replicas could scale read-heavy workloads across multiple database instances. Time-series optimization for metrics data would support analytics features. Full-text search indexes would enable natural language queries against stored content. Graph relationships could support advanced queries for interconnected data like conversation flows.

275
docs/src/appendix-15/tables.md
View file

@ -1,275 +0,0 @@
# Database Tables
This section documents all database tables in General Bots, their structures, and purposes.
## Core Tables
### organizations
Stores organization/tenant information for multi-tenant deployments.
| Column | Type | Description |
|--------|------|-------------|
| org_id | UUID | Primary key |
| name | TEXT | Organization name |
| slug | TEXT | URL-friendly identifier |
| created_at | TIMESTAMPTZ | Creation timestamp |
### bots
Bot instances and their basic configuration.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| name | TEXT | Bot name |
| org_id | UUID | Foreign key to organizations |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update timestamp |
### bot_configuration
Stores bot-specific configuration parameters from config.csv.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| bot_id | UUID | Foreign key to bots |
| key | TEXT | Configuration key |
| value | TEXT | Configuration value |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update timestamp |
### bot_memories
Persistent key-value storage for bots (used by GET BOT MEMORY/SET BOT MEMORY).
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| bot_id | UUID | Foreign key to bots |
| key | TEXT | Memory key |
| value | TEXT | Memory value |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update timestamp |
## User Management Tables
### users
User accounts with authentication credentials.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| username | TEXT | Unique username |
| email | TEXT | Email address |
| password_hash | TEXT | Argon2 hashed password |
| active | BOOLEAN | Account status |
| created_at | TIMESTAMPTZ | Registration timestamp |
| updated_at | TIMESTAMPTZ | Last update timestamp |
### user_sessions
Active user sessions for authentication and state management.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| user_id | UUID | Foreign key to users |
| bot_id | UUID | Foreign key to bots |
| session_token | TEXT | Unique session identifier |
| expires_at | TIMESTAMPTZ | Session expiration |
| created_at | TIMESTAMPTZ | Session start |
| updated_at | TIMESTAMPTZ | Last activity |
### user_login_tokens
Authentication tokens for login flows.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| user_id | UUID | Foreign key to users |
| token | TEXT | Login token |
| expires_at | TIMESTAMPTZ | Token expiration |
| used | BOOLEAN | Whether token was used |
| created_at | TIMESTAMPTZ | Token creation |
### user_preferences
User-specific settings and preferences.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| user_id | UUID | Foreign key to users |
| preferences | JSONB | Preferences data |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update |
## Conversation Tables
### message_history
Complete conversation history between users and bots.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| session_id | UUID | Foreign key to user_sessions |
| user_id | UUID | Foreign key to users |
| bot_id | UUID | Foreign key to bots |
| message | TEXT | Message content |
| sender | TEXT | 'user' or 'bot' |
| created_at | TIMESTAMPTZ | Message timestamp |
### clicks
Tracks user interactions with UI elements.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| session_id | UUID | Foreign key to user_sessions |
| element_id | TEXT | UI element identifier |
| timestamp | TIMESTAMPTZ | Click timestamp |
### system_automations
Scheduled tasks and automation rules.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| bot_id | UUID | Foreign key to bots |
| name | TEXT | Automation name |
| schedule | TEXT | Cron expression |
| script | TEXT | BASIC script to execute |
| active | BOOLEAN | Whether automation is active |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update |
## Knowledge Base Tables
### kb_collections
Knowledge base collection definitions.
| Column | Type | Description |
|--------|------|-------------|
| id | TEXT | Primary key (collection name) |
| bot_id | UUID | Foreign key to bots |
| name | TEXT | Collection display name |
| description | TEXT | Collection description |
| metadata | JSONB | Additional metadata |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update |
### kb_documents
Documents stored in knowledge base collections.
| Column | Type | Description |
|--------|------|-------------|
| id | TEXT | Primary key (document ID) |
| collection_id | TEXT | Foreign key to kb_collections |
| bot_id | UUID | Foreign key to bots |
| name | TEXT | Document name |
| content | TEXT | Document content |
| metadata | JSONB | Document metadata |
| embedding_id | TEXT | Vector embedding reference |
| indexed | BOOLEAN | Whether document is indexed |
| created_at | TIMESTAMPTZ | Upload timestamp |
| updated_at | TIMESTAMPTZ | Last update |
### user_kb_associations
Links user sessions to available knowledge bases.
| Column | Type | Description |
|--------|------|-------------|
| id | TEXT | Primary key |
| session_id | UUID | Foreign key to user_sessions |
| collection_id | TEXT | Foreign key to kb_collections |
| created_at | TIMESTAMPTZ | Association timestamp |
## Tool Tables
### basic_tools
BASIC script tool definitions.
| Column | Type | Description |
|--------|------|-------------|
| id | TEXT | Primary key (tool name) |
| bot_id | UUID | Foreign key to bots |
| name | TEXT | Tool display name |
| description | TEXT | Tool description |
| parameters | JSONB | Parameter definitions |
| script | TEXT | BASIC script implementation |
| metadata | JSONB | Additional metadata |
| created_at | TIMESTAMPTZ | Creation timestamp |
| updated_at | TIMESTAMPTZ | Last update |
### session_tool_associations
Links sessions to available tools.
| Column | Type | Description |
|--------|------|-------------|
| id | TEXT | Primary key |
| session_id | UUID | Foreign key to user_sessions |
| tool_id | TEXT | Foreign key to basic_tools |
| created_at | TIMESTAMPTZ | Association timestamp |
## Email Integration Tables
### user_email_accounts
Email accounts configured for users.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| user_id | UUID | Foreign key to users |
| email_address | TEXT | Email address |
| imap_server | TEXT | IMAP server address |
| imap_port | INTEGER | IMAP port |
| smtp_server | TEXT | SMTP server address |
| smtp_port | INTEGER | SMTP port |
| encrypted_password | TEXT | Encrypted email password |
| active | BOOLEAN | Account status |
| created_at | TIMESTAMPTZ | Configuration timestamp |
| updated_at | TIMESTAMPTZ | Last update |
### email_drafts
Draft emails created by users or bots.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| user_id | UUID | Foreign key to users |
| account_id | UUID | Foreign key to user_email_accounts |
| to_addresses | TEXT[] | Recipient addresses |
| cc_addresses | TEXT[] | CC addresses |
| bcc_addresses | TEXT[] | BCC addresses |
| subject | TEXT | Email subject |
| body | TEXT | Email body |
| attachments | JSONB | Attachment metadata |
| created_at | TIMESTAMPTZ | Draft creation |
| updated_at | TIMESTAMPTZ | Last edit |
### email_folders
Email folder organization.
| Column | Type | Description |
|--------|------|-------------|
| id | UUID | Primary key |
| account_id | UUID | Foreign key to user_email_accounts |
| name | TEXT | Folder name |
| path | TEXT | IMAP folder path |
| parent_id | UUID | Parent folder ID |
| message_count | INTEGER | Number of messages |
| unread_count | INTEGER | Unread messages |
| created_at | TIMESTAMPTZ | Folder creation |
| updated_at | TIMESTAMPTZ | Last sync |
## Indexes
### Primary Indexes
- All `id` columns have primary key indexes
- All foreign key columns have indexes for joins
### Performance Indexes
- `user_sessions.session_token` - for session lookup
- `message_history.created_at` - for time-based queries
- `kb_documents.collection_id` - for collection queries
- `bot_memories(bot_id, key)` - composite for memory lookup
### Full-Text Search Indexes
- `kb_documents.content` - for document search (when enabled)
- `message_history.message` - for conversation search (when enabled)

235
docs/src/appendix-docs-style/conversation-examples.md
View file

@ -1,235 +0,0 @@
# Conversation Examples Style Guide
> **Standard format for displaying bot-user conversations in documentation**
## Overview
All conversation examples in General Bots documentation use a WhatsApp-style chat format. This provides a consistent, familiar, and readable way to show bot interactions.
## CSS Include
The styling is defined in `/assets/wa-chat.css`. Include it in your mdBook or HTML output.
---
## Basic Structure
```html
<div class="wa-chat">
<div class="wa-message bot">
<div class="wa-bubble">
<p>Bot message here</p>
<div class="wa-time">10:30</div>
</div>
</div>
<div class="wa-message user">
<div class="wa-bubble">
<p>User message here</p>
<div class="wa-time">10:31</div>
</div>
</div>
</div>
```
---
## Message Types
### Bot Message
```html
<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>
```
### User Message
```html
<div class="wa-message user">
<div class="wa-bubble">
<p>What meetings do I have today?</p>
<div class="wa-time">10:31</div>
</div>
</div>
```
---
## Formatting Within Messages
### Multiple Paragraphs
```html
<div class="wa-bubble">
<p>You have 2 meetings scheduled:</p>
<p>• 2:00 PM - Team Standup (30 min)</p>
<p>• 4:00 PM - Project Review (1 hour)</p>
<div class="wa-time">10:31</div>
</div>
```
### Bold Text
```html
<p><strong>Name:</strong> John Smith</p>
<p><strong>Email:</strong> john@example.com</p>
```
### Emoji Usage
Emojis are encouraged to make conversations more expressive:
| Purpose | Emoji Examples |
|---------|----------------|
| Success | ✅ ✓ 🎉 |
| Warning | ⚠️ ⚡ |
| Error | ❌ 🔴 |
| Info | ℹ️ 📋 |
| File | 📄 📁 📎 |
| Calendar | 📅 🗓️ |
| Email | 📧 ✉️ |
| Person | 👤 👥 |
| Time | 🕐 ⏱️ |
### File Attachments
```html
<div class="wa-message user">
<div class="wa-bubble">
<p>Here's the report</p>
<p>📎 quarterly-report.pdf</p>
<div class="wa-time">10:32</div>
</div>
</div>
```
### Action Buttons (visual representation)
```html
<p>[📧 Send] [✏️ Edit] [🗑 Discard]</p>
```
---
## Complete Example
```html
<div class="wa-chat">
<div class="wa-message user">
<div class="wa-bubble">
<p>Schedule a meeting with Sarah tomorrow at 2pm</p>
<div class="wa-time">10:30</div>
</div>
</div>
<div class="wa-message bot">
<div class="wa-bubble">
<p>✅ Meeting scheduled!</p>
<p>👥 Meeting with Sarah</p>
<p>📅 Tomorrow at 2:00 PM</p>
<p>⏱️ Duration: 1 hour</p>
<p>Invitation sent to Sarah.</p>
<div class="wa-time">10:30</div>
</div>
</div>
</div>
```
**Rendered Output:**
<div class="wa-chat">
<div class="wa-message user">
<div class="wa-bubble">
<p>Schedule a meeting with Sarah tomorrow at 2pm</p>
<div class="wa-time">10:30</div>
</div>
</div>
<div class="wa-message bot">
<div class="wa-bubble">
<p>✅ Meeting scheduled!</p>
<p>👥 Meeting with Sarah</p>
<p>📅 Tomorrow at 2:00 PM</p>
<p>⏱️ Duration: 1 hour</p>
<p>Invitation sent to Sarah.</p>
<div class="wa-time">10:30</div>
</div>
</div>
</div>
---
## Variants
### Full Width
Add `wa-full-width` class for wider conversations:
```html
<div class="wa-chat wa-full-width">
...
</div>
```
### Compact
Add `wa-compact` class for tighter spacing:
```html
<div class="wa-chat wa-compact">
...
</div>
```
### Hide Timestamps
Add `wa-no-time` class to hide timestamps:
```html
<div class="wa-chat wa-no-time">
...
</div>
```
---
## Best Practices
1. **Keep messages concise** - Break long bot responses into multiple paragraphs
2. **Use consistent timestamps** - Use realistic times (10:30, 10:31, etc.)
3. **Start with user context** - Show what the user asked before the bot response
4. **Include visual feedback** - Use emojis for status (✅, ❌, 📋)
5. **Show realistic flows** - Include multi-turn conversations when appropriate
6. **Use semantic formatting** - Bold for labels, lists for options
---
## Files Using This Format
This format is used throughout the documentation:
- `chapter-02/template-crm-contacts.md`
- `chapter-04-gbui/apps/*.md`
- `chapter-06-gbdialog/basic-vs-automation-tools.md`
- And many more...
---
## See Also
- [UI Structure](../chapter-04-gbui/ui-structure.md)
- [Chat App Documentation](../chapter-04-gbui/apps/chat.md)
<style>
.wa-chat{background-color:#e5ddd5;border-radius:8px;padding:20px 15px;margin:20px 0;max-width:500px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px}
.wa-message{margin-bottom:10px}
.wa-message.user{text-align:right}
.wa-message.user .wa-bubble{background-color:#dcf8c6;display:inline-block;text-align:left}
.wa-message.bot .wa-bubble{background-color:#fff;display:inline-block}
.wa-bubble{padding:8px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.13);max-width:85%}
.wa-bubble p{margin:0 0 4px 0;line-height:1.4;color:#303030}
.wa-bubble p:last-child{margin-bottom:0}
.wa-time{font-size:11px;color:#8696a0;text-align:right;margin-top:4px}
</style>

136
docs/src/appendix-env-vars/README.md
View file

@ -1,136 +0,0 @@
# Appendix C: Environment Variables
General Bots uses a minimal set of environment variables. All configuration is managed through `config.csv` files within each bot's `.gbot` folder, with secrets stored securely in Vault.
## Required Environment Variables
Only Vault-related environment variables are used by General Bots:
### VAULT_* Variables
**Purpose**: HashiCorp Vault integration for secure secrets management.
| Variable | Description | Example |
|----------|-------------|---------|
| `VAULT_ADDR` | Vault server URL | `http://localhost:8200` |
| `VAULT_TOKEN` | Authentication token | Auto-generated during bootstrap |
| `VAULT_NAMESPACE` | Vault namespace (optional) | `admin` |
**Example**:
```bash
VAULT_ADDR=http://localhost:8200
VAULT_TOKEN=hvs.your-vault-token
```
## Auto-Managed Services
The following services are automatically configured through Vault:
| Service | Management |
|---------|------------|
| PostgreSQL | Connection credentials in Vault |
| S3-Compatible Storage | Access keys in Vault |
| Cache | Connection managed via Vault |
| Email (Stalwart) | Credentials in Vault |
| LLM API Keys | Stored in Vault |
You do **not** need to set environment variables for these services. Vault handles credential distribution and rotation automatically.
## What NOT to Use Environment Variables For
**All application configuration belongs in `config.csv`**:
| Configuration | Where to Configure |
|--------------|-------------------|
| Database connection | Managed by Vault |
| Storage credentials | Managed by Vault |
| LLM API keys | Managed by Vault |
| LLM provider | `config.csv`: `llm-url` |
| Email settings | `config.csv`: `email-*` |
| Channel tokens | `config.csv`: `whatsapp-*`, etc. |
| Bot settings | `config.csv`: all bot-specific settings |
| Feature flags | `config.csv`: various keys |
## Configuration Philosophy
General Bots follows these principles:
1. **Vault-First**: All secrets are managed by Vault
2. **Minimal Environment**: Only Vault address and token use environment variables
3. **config.csv for Settings**: All application configuration is in `config.csv`
4. **Per-Bot Configuration**: Each bot has its own `config.csv` in its `.gbot` folder
5. **No Hardcoded Secrets**: Never store secrets in code or config files
## Setting Environment Variables
### Linux/macOS
```bash
export VAULT_ADDR=http://localhost:8200
export VAULT_TOKEN=hvs.your-vault-token
```
### Systemd Service
```ini
[Service]
Environment="VAULT_ADDR=http://localhost:8200"
Environment="VAULT_TOKEN=hvs.your-vault-token"
```
### LXC Container
When using LXC deployment, environment variables are set in the container configuration:
```bash
lxc config set container-name environment.VAULT_ADDR="http://localhost:8200"
lxc config set container-name environment.VAULT_TOKEN="hvs.your-vault-token"
```
## Security Notes
1. **Never commit tokens**: Use `.env` files (gitignored) or secrets management
2. **Rotate regularly**: Vault tokens should be rotated periodically
3. **Limit access**: Only the botserver process needs these variables
4. **Use TLS**: Always use HTTPS for Vault in production
## Bootstrap Process
During bootstrap, General Bots:
1. Connects to Vault using `VAULT_*` variables
2. Retrieves credentials for all managed services
3. Configures database, storage, cache, and other services
4. Stores service endpoints securely
This eliminates the need for manual credential management.
## Troubleshooting
### Vault Connection Failed
```
Error: Failed to connect to Vault
```
Verify:
- `VAULT_ADDR` is set correctly
- Vault server is running and accessible
- `VAULT_TOKEN` is valid and not expired
- Network allows connection to Vault host
### Service Not Available
If a managed service (database, storage, cache) is unavailable:
1. Check Vault is running and unsealed
2. Verify secrets exist in Vault
3. Check service container/process status
4. Review logs for connection errors
## See Also
- [config.csv Format](../chapter-08-config/config-csv.md) - Bot configuration
- [Secrets Management](../chapter-08-config/secrets-management.md) - Vault integration details
- [Drive Integration](../chapter-08-config/drive.md) - Storage setup
- [Authentication](../chapter-12-auth/README.md) - Security features

94
docs/src/appendix-external-services/README.md
View file

@ -1,94 +0,0 @@
# Appendix B: External Services
This appendix catalogs all external services that General Bots integrates with, including their configuration requirements, associated BASIC keywords, and API endpoints.
## Overview
General Bots connects to external services for extended functionality. All service credentials should be stored in `config.csv` within the bot's `.gbot` folder - never hardcoded in scripts.
Infrastructure services (database, storage, cache) are automatically managed by the Directory service (Zitadel).
## Service Categories
| Category | Services | Configuration Location |
|----------|----------|----------------------|
| LLM Providers | OpenAI, Groq, Anthropic, Azure OpenAI | `config.csv` |
| Weather | OpenWeatherMap | `config.csv` |
| Messaging Channels | WhatsApp, Teams, Instagram, Telegram | `config.csv` |
| Storage | S3-Compatible (MinIO, etc.) | Vault (automatic) |
| Directory | Zitadel | `VAULT_*` environment variables |
| Email | Stalwart / IMAP/SMTP | Vault (automatic) |
| Calendar | CalDAV servers | `config.csv` |
| Database | PostgreSQL | Vault (automatic) |
| Cache | Redis-compatible | Vault (automatic) |
## Quick Reference
### BASIC Keywords That Call External Services
| Keyword | Service | Config Key |
|---------|---------|-----------|
| `LLM` | LLM Provider | `llm-provider`, `llm-api-key` |
| `WEATHER` | OpenWeatherMap | `weather-api-key` |
| `SEND MAIL` | SMTP Server | Managed by Directory service |
| `SEND WHATSAPP` | WhatsApp Business API | `whatsapp-api-key`, `whatsapp-phone-number-id` |
| `SEND TEAMS` | Microsoft Teams | `teams-app-id`, `teams-app-password` |
| `SEND INSTAGRAM` | Instagram Graph API | `instagram-access-token`, `instagram-page-id` |
| `GET` (with http/https URL) | Any HTTP endpoint | N/A |
| `IMAGE` | BotModels (local) | `botmodels-enabled`, `botmodels-url` |
| `VIDEO` | BotModels (local) | `botmodels-enabled`, `botmodels-url` |
| `AUDIO` | BotModels (local) | `botmodels-enabled`, `botmodels-url` |
| `SEE` | BotModels (local) | `botmodels-enabled`, `botmodels-url` |
| `FIND` | Qdrant (local) | Internal service |
| `USE WEBSITE` | Web crawling | N/A |
## Service Configuration Template
Add these to your `config.csv`:
```csv
key,value
llm-provider,openai
llm-api-key,YOUR_API_KEY
llm-model,gpt-4o
weather-api-key,YOUR_OPENWEATHERMAP_KEY
whatsapp-api-key,YOUR_WHATSAPP_KEY
whatsapp-phone-number-id,YOUR_PHONE_ID
teams-app-id,YOUR_TEAMS_APP_ID
teams-app-password,YOUR_TEAMS_PASSWORD
instagram-access-token,YOUR_INSTAGRAM_TOKEN
instagram-page-id,YOUR_PAGE_ID
botmodels-enabled,true
botmodels-url,http://localhost:5000
```
## Auto-Managed Services
The following services are automatically configured by the Directory service (Zitadel):
| Service | What's Managed |
|---------|----------------|
| PostgreSQL | Connection credentials, database creation |
| S3-Compatible Storage | Access keys, bucket policies |
| Cache | Connection credentials |
| Stalwart Email | User accounts, SMTP/IMAP access |
You do **not** need to configure these services manually. The Directory service handles credential provisioning and rotation.
## Security Notes
1. **Never hardcode credentials** - Always use `config.csv` or `GET BOT MEMORY`
2. **Rotate keys regularly** - Update `config.csv` and restart the bot
3. **Use least privilege** - Only grant permissions needed by the bot
4. **Audit access** - Monitor external API usage through logs
5. **Infrastructure credentials** - Managed automatically by Directory service
## See Also
- [Service Catalog](./catalog.md) - Detailed service documentation
- [LLM Providers](./llm-providers.md) - AI model configuration
- [Weather API](./weather.md) - Weather service setup
- [Channel Integrations](./channels.md) - Messaging platform setup
- [Storage Services](./storage.md) - S3-compatible storage
- [Directory Services](./directory.md) - User authentication
- [Environment Variables](../appendix-env-vars/README.md) - DIRECTORY_* configuration

78
docs/src/appendix-external-services/attendance-queue.md
View file

@ -1,78 +0,0 @@
# Attendance Queue Module
Human-attendant queue management for hybrid bot/human support workflows.
## Overview
The attendance queue module manages handoffs from bot to human agents, tracking conversation queues, attendant availability, and real-time assignment.
## Configuration
Create `attendant.csv` in your bot's `.gbai` folder:
```csv
id,name,channel,preferences
att-001,John Smith,whatsapp,sales
att-002,Jane Doe,web,support
att-003,Bob Wilson,all,technical
```
## Queue Status
| Status | Description |
|--------|-------------|
| `waiting` | User waiting for attendant |
| `assigned` | Attendant assigned, not yet active |
| `active` | Conversation in progress |
| `resolved` | Conversation completed |
| `abandoned` | User left before assignment |
## Attendant Status
| Status | Description |
|--------|-------------|
| `online` | Available for new conversations |
| `busy` | Currently handling conversations |
| `away` | Temporarily unavailable |
| `offline` | Not working |
## REST API Endpoints
### GET /api/queue
List conversations in queue.
### POST /api/queue/assign
Assign conversation to attendant.
```json
{
"session_id": "uuid",
"attendant_id": "uuid"
}
```
### POST /api/queue/transfer
Transfer conversation between attendants.
```json
{
"session_id": "uuid",
"from_attendant_id": "uuid",
"to_attendant_id": "uuid",
"reason": "Specialist needed"
}
```
### GET /api/attendants
List all attendants with stats.
## BASIC Keywords
```basic
TRANSFER TO HUMAN "sales"
TRANSFER TO HUMAN "support", "high"
```
## See Also
- [Human Approval](../chapter-06-gbdialog/keyword-human-approval.md)

273
docs/src/appendix-external-services/catalog.md
View file

@ -1,273 +0,0 @@
# Service Catalog
This catalog provides detailed information about every external service that General Bots integrates with.
## LLM Providers
### OpenAI
| Property | Value |
|----------|-------|
| **Service URL** | `https://api.openai.com/v1` |
| **Config Key** | `llm-provider=openai` |
| **API Key Config** | `llm-api-key` |
| **Documentation** | [platform.openai.com/docs](https://platform.openai.com/docs) |
| **BASIC Keywords** | `LLM` |
| **Supported Models** | `gpt-4o`, `gpt-4o-mini`, `gpt-4-turbo`, `gpt-3.5-turbo` |
### Groq
| Property | Value |
|----------|-------|
| **Service URL** | `https://api.groq.com/openai/v1` |
| **Config Key** | `llm-provider=groq` |
| **API Key Config** | `llm-api-key` |
| **Documentation** | [console.groq.com/docs](https://console.groq.com/docs) |
| **BASIC Keywords** | `LLM` |
| **Supported Models** | `llama-3.1-70b-versatile`, `llama-3.1-8b-instant`, `mixtral-8x7b-32768` |
### Anthropic
| Property | Value |
|----------|-------|
| **Service URL** | `https://api.anthropic.com/v1` |
| **Config Key** | `llm-provider=anthropic` |
| **API Key Config** | `llm-api-key` |
| **Documentation** | [docs.anthropic.com](https://docs.anthropic.com) |
| **BASIC Keywords** | `LLM` |
| **Supported Models** | `claude-3-5-sonnet`, `claude-3-opus`, `claude-3-haiku` |
### Azure OpenAI
| Property | Value |
|----------|-------|
| **Service URL** | `https://{resource}.openai.azure.com/` |
| **Config Key** | `llm-provider=azure` |
| **API Key Config** | `llm-api-key`, `azure-openai-endpoint` |
| **Documentation** | [learn.microsoft.com/azure/ai-services/openai](https://learn.microsoft.com/azure/ai-services/openai) |
| **BASIC Keywords** | `LLM` |
---
## Weather Services
### OpenWeatherMap
| Property | Value |
|----------|-------|
| **Service URL** | `https://api.openweathermap.org/data/2.5` |
| **Config Key** | `weather-api-key` |
| **Documentation** | [openweathermap.org/api](https://openweathermap.org/api) |
| **BASIC Keywords** | `WEATHER` |
| **Free Tier** | 1,000 calls/day |
| **Required Plan** | Free or higher |
**Example Usage:**
```basic
weather = WEATHER "Seattle"
TALK weather
```
---
## Messaging Channels
### WhatsApp Business API
| Property | Value |
|----------|-------|
| **Service URL** | `https://graph.facebook.com/v17.0` |
| **Config Keys** | `whatsapp-api-key`, `whatsapp-phone-number-id`, `whatsapp-business-account-id` |
| **Documentation** | [developers.facebook.com/docs/whatsapp](https://developers.facebook.com/docs/whatsapp) |
| **BASIC Keywords** | `SEND WHATSAPP`, `SEND FILE` (WhatsApp) |
| **Webhook URL** | `/api/channels/whatsapp/webhook` |
### Microsoft Teams
| Property | Value |
|----------|-------|
| **Service URL** | `https://smba.trafficmanager.net/apis` |
| **Config Keys** | `teams-app-id`, `teams-app-password`, `teams-tenant-id` |
| **Documentation** | [learn.microsoft.com/microsoftteams/platform](https://learn.microsoft.com/microsoftteams/platform) |
| **BASIC Keywords** | `SEND TEAMS`, `SEND FILE` (Teams) |
| **Webhook URL** | `/api/channels/teams/messages` |
### Instagram Messaging
| Property | Value |
|----------|-------|
| **Service URL** | `https://graph.facebook.com/v17.0` |
| **Config Keys** | `instagram-access-token`, `instagram-page-id`, `instagram-account-id` |
| **Documentation** | [developers.facebook.com/docs/instagram-api](https://developers.facebook.com/docs/instagram-api) |
| **BASIC Keywords** | `SEND INSTAGRAM` |
| **Webhook URL** | `/api/channels/instagram/webhook` |
### Telegram
| Property | Value |
|----------|-------|
| **Service URL** | `https://api.telegram.org/bot{token}` |
| **Config Keys** | `telegram-bot-token` |
| **Documentation** | [core.telegram.org/bots/api](https://core.telegram.org/bots/api) |
| **BASIC Keywords** | `SEND TELEGRAM` |
| **Webhook URL** | `/api/channels/telegram/webhook` |
---
## Storage Services
### S3-Compatible Storage
General Bots uses S3-compatible object storage. Configuration is **automatically managed** by the Directory service (Zitadel).
| Property | Value |
|----------|-------|
| **Local Default** | MinIO on port 9000 |
| **Management** | Directory service (automatic) |
| **Console Port** | 9001 (when using MinIO) |
| **BASIC Keywords** | `GET` (file retrieval) |
**Compatible Services:**
- MinIO (default local installation)
- Backblaze B2
- Wasabi
- DigitalOcean Spaces
- Cloudflare R2
- Any S3-compatible provider
Storage credentials are provisioned and rotated automatically by the Directory service. No manual configuration required.
---
## Directory Services
### Zitadel (Identity Provider)
| Property | Value |
|----------|-------|
| **Local Default** | Port 8080 |
| **Environment Variables** | `DIRECTORY_URL`, `DIRECTORY_CLIENT_ID`, `DIRECTORY_CLIENT_SECRET` |
| **Documentation** | [zitadel.com/docs](https://zitadel.com/docs) |
| **Purpose** | User authentication, SSO, OAuth2/OIDC, service credential management |
The Directory service manages:
- User authentication
- Service credentials (database, storage, cache)
- OAuth applications
- Role-based access control
---
## Email Services
### Stalwart Mail Server
| Property | Value |
|----------|-------|
| **Ports** | 25 (SMTP), 993 (IMAPS), 587 (Submission) |
| **Management** | Directory service (automatic) |
| **Documentation** | [stalw.art/docs](https://stalw.art/docs) |
| **BASIC Keywords** | `SEND MAIL` |
Email accounts are created and managed through the Directory service.
### External IMAP/SMTP
| Property | Value |
|----------|-------|
| **Config Keys** | `smtp-server`, `smtp-port`, `imap-server`, `imap-port`, `email-username`, `email-password` |
| **BASIC Keywords** | `SEND MAIL` |
| **Supported Providers** | Gmail, Outlook, custom SMTP/IMAP |
**Gmail Configuration Example (in config.csv):**
```csv
smtp-server,smtp.gmail.com
smtp-port,587
imap-server,imap.gmail.com
imap-port,993
```
---
## Local Services (BotModels)
### Image Generation
| Property | Value |
|----------|-------|
| **Service URL** | `http://localhost:5000` (default) |
| **Config Keys** | `botmodels-enabled`, `botmodels-url` |
| **BASIC Keywords** | `IMAGE` |
| **Requires** | BotModels service running |
### Video Generation
| Property | Value |
|----------|-------|
| **Service URL** | `http://localhost:5000` (default) |
| **Config Keys** | `botmodels-enabled`, `botmodels-url` |
| **BASIC Keywords** | `VIDEO` |
| **Requires** | BotModels service running, GPU recommended |
### Audio Generation (TTS)
| Property | Value |
|----------|-------|
| **Service URL** | `http://localhost:5000` (default) |
| **Config Keys** | `botmodels-enabled`, `botmodels-url` |
| **BASIC Keywords** | `AUDIO` |
| **Requires** | BotModels service running |
### Vision/Captioning
| Property | Value |
|----------|-------|
| **Service URL** | `http://localhost:5000` (default) |
| **Config Keys** | `botmodels-enabled`, `botmodels-url` |
| **BASIC Keywords** | `SEE` |
| **Requires** | BotModels service running |
---
## Internal Services
These services are deployed locally as part of the General Bots stack. All are managed by the Directory service:
| Service | Default Port | Purpose | Management |
|---------|-------------|---------|------------|
| PostgreSQL | 5432 | Primary database | Vault |
| Qdrant | 6333 | Vector storage for KB | Vault |
| Cache | 6379 | Caching | Vault |
| Stalwart | 25, 993 | Email server (optional) | Vault |
| BotModels | 5000 | AI model inference | config.csv |
---
## Service Health Checks
All services can be checked via the monitoring API:
```
GET /api/monitoring/services
```
Response includes status for all configured external services.
---
## Troubleshooting
### Common Issues
1. **API Key Invalid** - Verify key in `config.csv`, ensure no trailing whitespace
2. **Rate Limited** - Check service quotas, implement caching with `SET BOT MEMORY`
3. **Connection Timeout** - Verify network access to external URLs
4. **Service Unavailable** - Check service status pages
### Debug Logging
Enable trace logging to see external API calls:
```bash
RUST_LOG=trace ./botserver
```

1
docs/src/appendix-external-services/channels.md
View file

@ -1 +0,0 @@
# Channel Integrations

114
docs/src/appendix-external-services/console.md
View file

@ -1,114 +0,0 @@
# Console Module (XtreeUI)
Terminal-based admin interface for managing General Bots instances.
## Overview
XtreeUI is a TUI (Terminal User Interface) for administering bots directly from the command line. It provides file browsing, log viewing, chat testing, and status monitoring in a single terminal window.
## Feature Flag
Enabled via Cargo feature:
```toml
[features]
console = []
```
## Panels
| Panel | Key | Description |
|-------|-----|-------------|
| File Tree | `1` | Browse bot files and packages |
| Editor | `2` | View/edit configuration files |
| Status | `3` | System status and metrics |
| Logs | `4` | Real-time log viewer |
| Chat | `5` | Test bot conversations |
## Keyboard Navigation
| Key | Action |
|-----|--------|
| `1-5` | Switch between panels |
| `Tab` | Cycle panels |
| `↑/↓` | Navigate within panel |
| `Enter` | Select/open item |
| `q` | Quit console |
| `?` | Show help |
## Components
### File Tree
Browse `.gbai` folder structure:
- View packages (.gbkb, .gbdialog, .gbtheme)
- Open config.csv for editing
- Navigate bot resources
### Status Panel
Real-time system metrics:
- CPU/memory usage
- Active connections
- Bot status
- Database connectivity
### Log Panel
Live log streaming with filtering:
- Error highlighting
- Log level filtering
- Search functionality
### Chat Panel
Interactive bot testing:
- Send messages to bot
- View responses
- Debug conversation flow
### Editor
Basic file editing:
- Syntax highlighting
- Save/reload files
- Config validation
## Starting the Console
```bash
./botserver --console
```
Or programmatically:
```rust
let mut ui = XtreeUI::new();
ui.set_app_state(app_state);
ui.start_ui()?;
```
## Progress Channel
Monitor background tasks:
```rust
let (tx, rx) = tokio::sync::mpsc::channel(100);
ui.set_progress_channel(rx);
// Send progress updates
tx.send(ProgressUpdate::new("Loading KB...", 50)).await;
```
## Use Cases
- Server administration without web UI
- SSH-based remote management
- Development and debugging
- Headless server deployments
- Quick configuration changes
## See Also
- [Building from Source](../chapter-07-gbapp/building.md)
- [Bot Configuration](../chapter-08-config/README.md)

1
docs/src/appendix-external-services/directory.md
View file

@ -1 +0,0 @@
# Directory Services

437
docs/src/appendix-external-services/llm-providers.md
View file

@ -1,437 +0,0 @@
# LLM Providers
General Bots supports multiple Large Language Model (LLM) providers, both cloud-based services and local deployments. This guide helps you choose the right provider for your use case.
## Overview
LLMs are the intelligence behind General Bots' conversational capabilities. You can configure:
- **Cloud Providers** - External APIs (OpenAI, Anthropic, Groq, etc.)
- **Local Models** - Self-hosted models via llama.cpp
- **Hybrid** - Use local for simple tasks, cloud for complex reasoning
## Cloud Providers
### OpenAI (GPT Series)
The most widely known LLM provider, offering GPT-4 and GPT-4o models.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| GPT-4o | 128K | General purpose, vision | Fast |
| GPT-4o-mini | 128K | Cost-effective tasks | Very Fast |
| GPT-4 Turbo | 128K | Complex reasoning | Medium |
| o1-preview | 128K | Advanced reasoning, math | Slow |
| o1-mini | 128K | Code, logic tasks | Medium |
**Configuration:**
```csv
llm-provider,openai
llm-api-key,sk-xxxxxxxxxxxxxxxxxxxxxxxx
llm-model,gpt-4o
```
**Strengths:**
- Excellent general knowledge
- Strong code generation
- Good instruction following
- Vision capabilities (GPT-4o)
**Considerations:**
- API costs can add up
- Data sent to external servers
- Rate limits apply
### Anthropic (Claude Series)
Known for safety, helpfulness, and large context windows.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| Claude 3.5 Sonnet | 200K | Best balance of capability/speed | Fast |
| Claude 3.5 Haiku | 200K | Quick, everyday tasks | Very Fast |
| Claude 3 Opus | 200K | Most capable, complex tasks | Slow |
**Configuration:**
```csv
llm-provider,anthropic
llm-api-key,sk-ant-xxxxxxxxxxxxxxxx
llm-model,claude-3-5-sonnet-20241022
```
**Strengths:**
- Largest context window (200K tokens)
- Excellent at following complex instructions
- Strong coding abilities
- Better at refusing harmful requests
**Considerations:**
- Premium pricing
- No vision in all models
- Newer provider, smaller ecosystem
### Groq
Ultra-fast inference using custom LPU hardware. Offers open-source models at high speed.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| Llama 3.3 70B | 128K | Complex reasoning | Very Fast |
| Llama 3.1 8B | 128K | Quick responses | Extremely Fast |
| Mixtral 8x7B | 32K | Balanced performance | Very Fast |
| Gemma 2 9B | 8K | Lightweight tasks | Extremely Fast |
**Configuration:**
```csv
llm-provider,groq
llm-api-key,gsk_xxxxxxxxxxxxxxxx
llm-model,llama-3.3-70b-versatile
```
**Strengths:**
- Fastest inference speeds (500+ tokens/sec)
- Competitive pricing
- Open-source models
- Great for real-time applications
**Considerations:**
- Limited model selection
- Rate limits on free tier
- Models may be less capable than GPT-4/Claude
### Google (Gemini Series)
Google's multimodal AI models with strong reasoning capabilities.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| Gemini 1.5 Pro | 2M | Extremely long documents | Medium |
| Gemini 1.5 Flash | 1M | Fast multimodal | Fast |
| Gemini 2.0 Flash | 1M | Latest capabilities | Fast |
**Configuration:**
```csv
llm-provider,google
llm-api-key,AIzaxxxxxxxxxxxxxxxx
llm-model,gemini-1.5-pro
```
**Strengths:**
- Largest context window (2M tokens)
- Native multimodal (text, image, video, audio)
- Strong at structured data
- Good coding abilities
**Considerations:**
- Newer ecosystem
- Some features region-limited
- API changes more frequently
### Mistral AI
European AI company offering efficient, open-weight models.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| Mistral Large | 128K | Complex tasks | Medium |
| Mistral Medium | 32K | Balanced performance | Fast |
| Mistral Small | 32K | Cost-effective | Very Fast |
| Codestral | 32K | Code generation | Fast |
**Configuration:**
```csv
llm-provider,mistral
llm-api-key,xxxxxxxxxxxxxxxx
llm-model,mistral-large-latest
```
**Strengths:**
- European data sovereignty (GDPR)
- Excellent code generation (Codestral)
- Open-weight models available
- Competitive pricing
**Considerations:**
- Smaller context than competitors
- Less brand recognition
- Fewer fine-tuning options
### DeepSeek
Chinese AI company known for efficient, capable models.
| Model | Context | Best For | Speed |
|-------|---------|----------|-------|
| DeepSeek-V3 | 128K | General purpose | Fast |
| DeepSeek-R1 | 128K | Reasoning, math | Medium |
| DeepSeek-Coder | 128K | Programming | Fast |
**Configuration:**
```csv
llm-provider,deepseek
llm-api-key,sk-xxxxxxxxxxxxxxxx
llm-model,deepseek-chat
llm-server-url,https://api.deepseek.com
```
**Strengths:**
- Extremely cost-effective
- Strong reasoning (R1 model)
- Excellent code generation
- Open-weight versions available
**Considerations:**
- Data processed in China
- Newer provider
- May have content restrictions
## Local Models
Run models on your own hardware for privacy, cost control, and offline operation.
### Setting Up Local LLM
General Bots uses **llama.cpp** server for local inference:
```csv
llm-provider,local
llm-server-url,https://localhost:8081
llm-model,DeepSeek-R1-Distill-Qwen-1.5B
```
### Recommended Local Models
#### For High-End GPU (24GB+ VRAM)
| Model | Size | VRAM | Quality |
|-------|------|------|---------|
| GPT-OSS 120B Q4 | 70GB | 48GB+ | Excellent |
| Llama 3.1 70B Q4 | 40GB | 48GB+ | Excellent |
| DeepSeek-R1 32B Q4 | 20GB | 24GB | Very Good |
| Qwen 2.5 72B Q4 | 42GB | 48GB+ | Excellent |
#### For Mid-Range GPU (12-16GB VRAM)
| Model | Size | VRAM | Quality |
|-------|------|------|---------|
| GPT-OSS 20B F16 | 40GB | 16GB | Very Good |
| Llama 3.1 8B Q8 | 9GB | 12GB | Good |
| DeepSeek-R1-Distill 14B Q4 | 8GB | 12GB | Good |
| Mistral Nemo 12B Q4 | 7GB | 10GB | Good |
#### For Small GPU or CPU (8GB VRAM or less)
| Model | Size | VRAM | Quality |
|-------|------|------|---------|
| DeepSeek-R1-Distill 1.5B Q4 | 1GB | 4GB | Basic |
| Phi-3 Mini 3.8B Q4 | 2.5GB | 6GB | Acceptable |
| Gemma 2 2B Q8 | 3GB | 6GB | Acceptable |
| Qwen 2.5 3B Q4 | 2GB | 4GB | Basic |
### Model Download URLs
Add models to `installer.rs` data_download_list:
```rust
// GPT-OSS 20B - Recommended for small GPU
"https://huggingface.co/unsloth/gpt-oss-20b-GGUF/resolve/main/gpt-oss-20b-F16.gguf"
// DeepSeek R1 Distill - For CPU or minimal GPU
"https://huggingface.co/unsloth/DeepSeek-R1-Distill-Qwen-1.5B-GGUF/resolve/main/DeepSeek-R1-Distill-Qwen-1.5B-Q4_K_M.gguf"
// Llama 3.1 8B - Good balance
"https://huggingface.co/bartowski/Meta-Llama-3.1-8B-Instruct-GGUF/resolve/main/Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf"
```
### Embedding Models
For vector search, you need an embedding model:
```csv
embedding-provider,local
embedding-server-url,https://localhost:8082
embedding-model,bge-small-en-v1.5
```
Recommended embedding models:
| Model | Dimensions | Size | Quality |
|-------|------------|------|---------|
| bge-small-en-v1.5 | 384 | 130MB | Good |
| bge-base-en-v1.5 | 768 | 440MB | Better |
| bge-large-en-v1.5 | 1024 | 1.3GB | Best |
| nomic-embed-text | 768 | 550MB | Good |
## Hybrid Configuration
Use different models for different tasks:
```csv
# Primary model for complex conversations
llm-provider,anthropic
llm-model,claude-3-5-sonnet-20241022
# Fast model for simple tasks
llm-fast-provider,groq
llm-fast-model,llama-3.1-8b-instant
# Local fallback for offline operation
llm-fallback-provider,local
llm-fallback-model,DeepSeek-R1-Distill-Qwen-1.5B
# Embeddings always local
embedding-provider,local
embedding-model,bge-small-en-v1.5
```
## Model Selection Guide
### By Use Case
| Use Case | Recommended | Why |
|----------|-------------|-----|
| Customer support | Claude 3.5 Sonnet | Best at following guidelines |
| Code generation | DeepSeek-Coder, GPT-4o | Specialized for code |
| Document analysis | Gemini 1.5 Pro | 2M context window |
| Real-time chat | Groq Llama 3.1 8B | Fastest responses |
| Privacy-sensitive | Local DeepSeek-R1 | No external data transfer |
| Cost-sensitive | DeepSeek-V3, Local | Lowest cost per token |
| Complex reasoning | Claude 3 Opus, o1 | Best reasoning ability |
### By Budget
| Budget | Recommended Setup |
|--------|-------------------|
| Free | Local models only |
| Low ($10-50/mo) | Groq + Local fallback |
| Medium ($50-200/mo) | GPT-4o-mini + Claude Haiku |
| High ($200+/mo) | GPT-4o + Claude Sonnet |
| Enterprise | Private deployment + premium APIs |
## Configuration Reference
### Environment Variables
```bash
# Primary LLM
LLM_PROVIDER=openai
LLM_API_KEY=sk-xxx
LLM_MODEL=gpt-4o
LLM_SERVER_URL=https://api.openai.com
# Local LLM Server
LLM_LOCAL_URL=https://localhost:8081
LLM_LOCAL_MODEL=DeepSeek-R1-Distill-Qwen-1.5B
# Embedding
EMBEDDING_PROVIDER=local
EMBEDDING_URL=https://localhost:8082
EMBEDDING_MODEL=bge-small-en-v1.5
```
### config.csv Parameters
| Parameter | Description | Example |
|-----------|-------------|---------|
| `llm-provider` | Provider name | `openai`, `anthropic`, `local` |
| `llm-api-key` | API key for cloud providers | `sk-xxx` |
| `llm-model` | Model identifier | `gpt-4o` |
| `llm-server-url` | API endpoint | `https://api.openai.com` |
| `llm-server-ctx-size` | Context window size | `128000` |
| `llm-temperature` | Response randomness (0-2) | `0.7` |
| `llm-max-tokens` | Maximum response length | `4096` |
| `llm-cache-enabled` | Enable semantic caching | `true` |
| `llm-cache-ttl` | Cache time-to-live (seconds) | `3600` |
## Security Considerations
### Cloud Providers
- API keys should be stored in environment variables or secrets manager
- Consider data residency requirements (EU: Mistral, US: OpenAI)
- Review provider data retention policies
- Use separate keys for production/development
### Local Models
- All data stays on your infrastructure
- No internet required after model download
- Full control over model versions
- Consider GPU security for sensitive deployments
## Performance Optimization
### Caching
Enable semantic caching to reduce API calls:
```csv
llm-cache-enabled,true
llm-cache-ttl,3600
llm-cache-similarity-threshold,0.92
```
### Batching
For bulk operations, use batch APIs when available:
```csv
llm-batch-enabled,true
llm-batch-size,10
```
### Context Management
Optimize context window usage:
```csv
llm-context-compaction,true
llm-max-history-turns,10
llm-summarize-long-contexts,true
```
## Troubleshooting
### Common Issues
**API Key Invalid**
- Verify key is correct and not expired
- Check if key has required permissions
- Ensure billing is active
**Model Not Found**
- Check model name spelling
- Verify model is available in your region
- Some models require waitlist access
**Rate Limits**
- Implement exponential backoff
- Use caching to reduce calls
- Consider upgrading API tier
**Local Model Slow**
- Check GPU memory usage
- Reduce context size
- Use quantized models (Q4 instead of F16)
### Logging
Enable LLM logging for debugging:
```csv
llm-log-requests,true
llm-log-responses,false
llm-log-timing,true
```
## Next Steps
- [LLM Configuration](../chapter-08-config/llm-config.md) - Detailed configuration guide
- [Semantic Caching](../chapter-03/caching.md) - Cache configuration
- [NVIDIA GPU Setup](../chapter-09-api/nvidia-gpu-setup.md) - GPU configuration for local models

143
docs/src/appendix-external-services/multimodal.md
View file

@ -1,143 +0,0 @@
# Multimodal Module
Image, video, and audio generation with vision/captioning capabilities.
## Overview
The multimodal module connects to BotModels server for AI-powered media generation and analysis.
## BASIC Keywords
| Keyword | Purpose |
|---------|---------|
| `IMAGE` | Generate image from text prompt |
| `VIDEO` | Generate video from text prompt |
| `AUDIO` | Generate speech audio from text |
| `SEE` | Describe/caption an image or video |
## IMAGE
Generate an image from a text prompt:
```basic
url = IMAGE "A sunset over mountains with a lake"
TALK "Here's your image: " + url
```
Timeout: 300 seconds (5 minutes)
## VIDEO
Generate a video from a text prompt:
```basic
url = VIDEO "A cat playing with a ball of yarn"
TALK "Here's your video: " + url
```
Timeout: 600 seconds (10 minutes)
## AUDIO
Generate speech audio from text:
```basic
url = AUDIO "Welcome to our service. How can I help you today?"
PLAY url
```
## SEE
Get a description of an image or video:
```basic
description = SEE "path/to/image.jpg"
TALK "I see: " + description
```
## Configuration
Add to `config.csv`:
```csv
botmodels-enabled,true
botmodels-host,localhost
botmodels-port,5000
botmodels-api-key,your-api-key
botmodels-use-https,false
```
### Image Generation Config
```csv
botmodels-image-model,stable-diffusion
botmodels-image-steps,20
botmodels-image-width,512
botmodels-image-height,512
```
### Video Generation Config
```csv
botmodels-video-model,text2video
botmodels-video-frames,16
botmodels-video-fps,8
```
## BotModels Client
Rust API for direct integration:
```rust
let client = BotModelsClient::from_state(&state, &bot_id);
if client.is_enabled() {
let image_url = client.generate_image("A beautiful garden").await?;
let description = client.describe_image("path/to/photo.jpg").await?;
}
```
### Available Methods
| Method | Description |
|--------|-------------|
| `generate_image(prompt)` | Create image from text |
| `generate_video(prompt)` | Create video from text |
| `generate_audio(text)` | Create speech audio |
| `describe_image(path)` | Get image caption |
| `describe_video(path)` | Get video description |
| `speech_to_text(audio_path)` | Transcribe audio |
| `health_check()` | Check BotModels server status |
## Response Structures
### GenerationResponse
```json
{
"status": "success",
"file_path": "/path/to/generated/file.png",
"generation_time": 12.5,
"error": null
}
```
### DescribeResponse
```json
{
"description": "A golden retriever playing fetch in a park",
"confidence": 0.92
}
```
## Requirements
- BotModels server running (separate service)
- GPU recommended for generation tasks
- Sufficient disk space for generated media
## See Also
- [NVIDIA Module](./nvidia.md) - GPU monitoring
- [PLAY Keyword](../chapter-06-gbdialog/keyword-play.md) - Play generated audio

76
docs/src/appendix-external-services/nvidia.md
View file

@ -1,76 +0,0 @@
# NVIDIA GPU Module
System monitoring for NVIDIA GPU utilization and performance metrics.
## Overview
This module provides GPU monitoring capabilities when NVIDIA hardware is available, useful for tracking resource usage during LLM inference and multimodal generation tasks.
## Feature Flag
Enabled via Cargo feature:
```toml
[features]
nvidia = []
```
## Functions
### has_nvidia_gpu()
Check if NVIDIA GPU is available:
```rust
if nvidia::has_nvidia_gpu() {
// GPU acceleration available
}
```
Returns `true` if `nvidia-smi` command succeeds.
### get_gpu_utilization()
Get current GPU and memory utilization:
```rust
let util = nvidia::get_gpu_utilization()?;
let gpu_percent = util.get("gpu"); // GPU compute utilization %
let mem_percent = util.get("memory"); // GPU memory utilization %
```
### get_system_metrics()
Get combined CPU and GPU metrics:
```rust
let metrics = nvidia::get_system_metrics()?;
println!("CPU: {}%", metrics.cpu_usage);
if let Some(gpu) = metrics.gpu_usage {
println!("GPU: {}%", gpu);
}
```
## SystemMetrics Struct
| Field | Type | Description |
|-------|------|-------------|
| `cpu_usage` | `f32` | CPU utilization percentage |
| `gpu_usage` | `Option<f32>` | GPU utilization (None if no NVIDIA GPU) |
## Requirements
- NVIDIA GPU with driver installed
- `nvidia-smi` command available in PATH
## Use Cases
- Monitor GPU during image/video generation
- Track resource usage for LLM inference
- Capacity planning for bot deployments
- Performance dashboards
## See Also
- [Multimodal Module](./multimodal.md)
- [Time-Series Database](./timeseries.md) - Store GPU metrics over time

1
docs/src/appendix-external-services/storage.md
View file

@ -1 +0,0 @@
# Storage Services

85
docs/src/appendix-external-services/timeseries.md
View file

@ -1,85 +0,0 @@
# Time-Series Database Module
InfluxDB 3 integration for metrics, analytics, and operational data.
## Overview
High-performance time-series storage supporting 2.5M+ points/sec ingestion with async batching.
## Configuration
Add to `config.csv`:
```csv
influxdb-url,http://localhost:8086
influxdb-token,your-token
influxdb-org,pragmatismo
influxdb-bucket,metrics
```
Or environment variables:
```bash
INFLUXDB_URL=http://localhost:8086
INFLUXDB_TOKEN=your-token
INFLUXDB_ORG=pragmatismo
INFLUXDB_BUCKET=metrics
```
## Metric Points
Structure:
| Field | Description |
|-------|-------------|
| `measurement` | Metric name (e.g., "messages", "response_time") |
| `tags` | Indexed key-value pairs for filtering |
| `fields` | Actual metric values |
| `timestamp` | When the metric was recorded |
## Built-in Metrics
| Measurement | Tags | Fields |
|-------------|------|--------|
| `messages` | bot, channel, user | count |
| `response_time` | bot, endpoint | duration_ms |
| `llm_tokens` | bot, model, type | input, output, total |
| `kb_queries` | bot, collection | count, latency_ms |
| `errors` | bot, type, severity | count |
## Usage in Rust
```rust
let client = TimeSeriesClient::new(config).await?;
client.write_point(
MetricPoint::new("messages")
.tag("bot", "sales-bot")
.tag("channel", "whatsapp")
.field_i64("count", 1)
).await?;
```
## Querying
REST endpoint for analytics:
```
GET /api/analytics/timeseries/messages?range=24h
GET /api/analytics/timeseries/response_time?range=7d
```
## Installation
The timeseries_db component is installed via package manager:
```bash
gb install timeseries_db
```
Ports: 8086 (HTTP API), 8083 (RPC)
## See Also
- [Analytics Module](../chapter-04-gbui/apps/analytics.md)
- [Observability Setup](./observability.md)

318
docs/src/appendix-external-services/weather.md
View file

@ -1,318 +0,0 @@
# Weather API Integration
The `WEATHER` and `FORECAST` keywords provide real-time weather information and multi-day forecasts using the OpenWeatherMap API.
## Keywords Overview
| Keyword | Purpose |
|---------|---------|
| `WEATHER` | Get current weather conditions for a location |
| `FORECAST` | Get extended weather forecast for multiple days |
## WEATHER
Retrieves current weather conditions for a specified location.
### Syntax
```basic
result = WEATHER location
```
### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `location` | String | City name, optionally with country code (e.g., "London" or "London,UK") |
### Return Value
Returns a formatted string containing:
- Temperature (current and feels-like)
- Weather conditions description
- Humidity percentage
- Wind speed and direction
- Visibility
- Atmospheric pressure
### Example
```basic
' Get current weather for London
weather = WEATHER "London"
TALK weather
' Output:
' Current weather in London:
' 🌡️ Temperature: 15.2°C (feels like 14.5°C)
' ☁️ Conditions: Partly cloudy
' 💧 Humidity: 65%
' 💨 Wind: 3.5 m/s NE
' 🔍 Visibility: 10.0 km
' 📊 Pressure: 1013 hPa
```
## FORECAST
Retrieves an extended weather forecast for multiple days.
### Syntax
```basic
result = FORECAST location, days
```
### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `location` | String | City name, optionally with country code |
| `days` | Integer | Number of days to forecast (1-5, default: 5) |
### Example
```basic
' Get 5-day forecast for Paris
forecast = FORECAST "Paris,FR", 5
TALK forecast
' Output:
' Weather forecast for Paris:
'
' 📅 2024-03-15
' 🌡️ High: 18.5°C, Low: 12.3°C
' ☁️ Scattered clouds
' ☔ Rain chance: 20%
'
' 📅 2024-03-16
' 🌡️ High: 20.1°C, Low: 13.0°C
' ☁️ Clear sky
' ☔ Rain chance: 5%
' ...
```
## Complete Example: Weather Bot
```basic
' weather-assistant.bas
' A conversational weather assistant
TALK "Hello! I can help you with weather information."
TALK "Which city would you like to know about?"
HEAR city
TALK "Would you like the current weather or a forecast?"
HEAR choice
IF INSTR(LOWER(choice), "forecast") > 0 THEN
TALK "How many days? (1-5)"
HEAR days
IF NOT IS_NUMERIC(days) THEN
days = 5
END IF
result = FORECAST city, days
TALK result
ELSE
result = WEATHER city
TALK result
END IF
TALK "Is there another city you'd like to check?"
```
## Weather-Based Automation
```basic
' weather-alert.bas
' Send alerts based on weather conditions
cities = ["New York", "London", "Tokyo", "Sydney"]
FOR EACH city IN cities
weather = WEATHER city
' Check for extreme conditions
IF INSTR(weather, "storm") > 0 OR INSTR(weather, "heavy rain") > 0 THEN
SEND MAIL "alerts@company.com", "Weather Alert: " + city, weather
END IF
NEXT
```
## Daily Weather Report
```basic
' daily-weather.bas
' Generate a daily weather report for multiple locations
locations = ["San Francisco,US", "Austin,US", "Seattle,US"]
report = "☀️ Daily Weather Report\n\n"
FOR EACH loc IN locations
weather = WEATHER loc
report = report + weather + "\n\n---\n\n"
NEXT
' Send the compiled report
SEND MAIL "team@company.com", "Daily Weather Update", report
```
## Travel Planning Assistant
```basic
' travel-weather.bas
' Help users plan travel based on weather
TALK "Where are you planning to travel?"
HEAR destination
TALK "When are you planning to go? (Please provide a date)"
HEAR travel_date
' Get forecast for destination
forecast = FORECAST destination, 5
TALK "Here's the weather forecast for " + destination + ":"
TALK forecast
TALK "Based on the forecast, would you like packing suggestions?"
HEAR wants_suggestions
IF LOWER(wants_suggestions) = "yes" THEN
weather = WEATHER destination
IF INSTR(weather, "rain") > 0 THEN
TALK "🌂 Don't forget to pack an umbrella and rain jacket!"
END IF
IF INSTR(weather, "Temperature: 2") > 0 OR INSTR(weather, "Temperature: 3") > 0 THEN
TALK "🩳 It's warm! Pack light clothing and sunscreen."
ELSE IF INSTR(weather, "Temperature: 0") > 0 OR INSTR(weather, "Temperature: 1") > 0 THEN
TALK "🧥 It's cool. Bring a light jacket."
ELSE
TALK "🧣 It's cold! Pack warm layers and a coat."
END IF
END IF
```
## Weather Data Structure
The `WeatherData` object returned internally contains:
| Field | Type | Description |
|-------|------|-------------|
| `location` | String | Resolved location name |
| `temperature` | Float | Current temperature in Celsius |
| `temperature_unit` | String | Temperature unit (°C) |
| `description` | String | Weather condition description |
| `humidity` | Integer | Humidity percentage (0-100) |
| `wind_speed` | Float | Wind speed in m/s |
| `wind_direction` | String | Compass direction (N, NE, E, etc.) |
| `feels_like` | Float | "Feels like" temperature |
| `pressure` | Integer | Atmospheric pressure in hPa |
| `visibility` | Float | Visibility in kilometers |
| `uv_index` | Float (optional) | UV index if available |
| `forecast` | Array | Forecast data (for FORECAST keyword) |
## Forecast Day Structure
Each forecast day contains:
| Field | Type | Description |
|-------|------|-------------|
| `date` | String | Date in YYYY-MM-DD format |
| `temp_high` | Float | Maximum temperature |
| `temp_low` | Float | Minimum temperature |
| `description` | String | Weather conditions |
| `rain_chance` | Integer | Probability of precipitation (0-100%) |
## Configuration
To use the weather keywords, configure your OpenWeatherMap API key in `config.csv`:
| Key | Description | Required |
|-----|-------------|----------|
| `weather-api-key` | OpenWeatherMap API key | Yes |
### Getting an API Key
1. Visit [OpenWeatherMap](https://openweathermap.org/api)
2. Create a free account
3. Navigate to "API Keys" in your dashboard
4. Generate a new API key
5. Add to your bot's `config.csv`:
```csv
weather-api-key,your-api-key-here
```
## Wind Direction Compass
Wind direction is converted from degrees to compass directions:
| Degrees | Direction |
|---------|-----------|
| 0° | N (North) |
| 45° | NE (Northeast) |
| 90° | E (East) |
| 135° | SE (Southeast) |
| 180° | S (South) |
| 225° | SW (Southwest) |
| 270° | W (West) |
| 315° | NW (Northwest) |
## Error Handling
```basic
' Handle weather API errors gracefully
ON ERROR GOTO weather_error
weather = WEATHER "Unknown City XYZ"
TALK weather
END
weather_error:
TALK "Sorry, I couldn't get weather information for that location."
TALK "Please check the city name and try again."
END
```
## Rate Limits
The OpenWeatherMap free tier includes:
- 60 calls per minute
- 1,000,000 calls per month
For higher limits, consider upgrading to a paid plan.
## Best Practices
1. **Use country codes**: For accuracy, include country codes (e.g., "Paris,FR" instead of just "Paris").
2. **Cache results**: Weather data doesn't change frequently—consider caching results for 10-15 minutes.
3. **Handle timeouts**: Weather API calls have a 10-second timeout. Handle failures gracefully.
4. **Validate locations**: Check if the location is valid before making API calls.
5. **Localization**: Consider user preferences for temperature units (Celsius vs Fahrenheit).
## Fallback Behavior
If the OpenWeatherMap API is unavailable, the system will:
1. Log the error
2. Attempt a fallback weather service (if configured)
3. Return a user-friendly error message
## Related Keywords
- [GET](../chapter-06-gbdialog/keyword-get.md) - Make custom HTTP requests to weather APIs
- [SET SCHEDULE](../chapter-06-gbdialog/keyword-set-schedule.md) - Schedule regular weather checks
- [SEND MAIL](../chapter-06-gbdialog/keyword-send-mail.md) - Send weather alerts via email
- [SEND SMS](../chapter-06-gbdialog/keyword-sms.md) - Send weather alerts via SMS
## See Also
- [OpenWeatherMap API Documentation](https://openweathermap.org/api)
- [API Tool Generator](../chapter-06-gbdialog/keyword-use-tool.md) - Create custom weather integrations

207
docs/src/assets/api-comparison-matrix.svg
View file

@ -1,207 +0,0 @@
<svg width="1400" height="800" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Modern Gradients -->
<linearGradient id="gbGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
</linearGradient>
<linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#64748B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#94A3B8;stop-opacity:1" />
</linearGradient>
<linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
</linearGradient>
<linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#1E1B4B;stop-opacity:0.05" />
<stop offset="50%" style="stop-color:#312E81;stop-opacity:0.08" />
<stop offset="100%" style="stop-color:#1E1B4B;stop-opacity:0.05" />
</linearGradient>
<linearGradient id="flowLine" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:0.2" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.2" />
</linearGradient>
<filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="dropShadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.1"/>
</filter>
<!-- Arrow marker -->
<marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#10B981"/>
</marker>
</defs>
<style>
.main-text { fill: #1a1a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.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; }
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
.accent-text { fill: #6366F1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
@media (prefers-color-scheme: dark) {
.main-text { fill: #F1F5F9; }
.secondary-text { fill: #94A3B8; }
.mono-text { fill: #CBD5E1; }
}
</style>
<!-- Background subtle pattern -->
<rect width="1400" height="800" fill="#FAFBFC"/>
<rect x="0" y="0" width="1400" height="120" fill="url(#headerGradient)"/>
<!-- Title Section -->
<text x="700" y="50" text-anchor="middle" font-size="28" font-weight="600" class="main-text">API Migration Matrix</text>
<text x="700" y="80" text-anchor="middle" font-size="16" class="secondary-text">Enterprise Cloud APIs → General Bots Keywords</text>
<!-- Platform Labels -->
<g transform="translate(100, 130)">
<!-- Cloud Platform Box -->
<rect x="0" y="0" width="180" height="50" rx="8" fill="url(#cloudGradient)" filter="url(#dropShadow)"/>
<text x="90" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">Cloud Platform</text>
</g>
<g transform="translate(1120, 130)">
<!-- General Bots Box -->
<rect x="0" y="0" width="180" height="50" rx="8" fill="url(#gbGradient)" filter="url(#dropShadow)"/>
<text x="90" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">General Bots</text>
</g>
<!-- Flow Arrow -->
<path d="M300 155 Q700 155 1100 155" stroke="url(#flowLine)" stroke-width="3" fill="none" stroke-dasharray="8,4"/>
<text x="700" y="150" text-anchor="middle" font-size="12" font-weight="500" class="accent-text">MIGRATION PATH</text>
<!-- Comparison Rows -->
<g transform="translate(50, 200)">
<!-- Row 1: Mail -->
<g transform="translate(0, 0)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Email / Mail</text>
<text x="55" y="44" font-size="11" class="mono-text">Messages, Send, Folders</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">SEND MAIL keyword</text>
<text x="900" y="44" font-size="11" class="mono-text">SEND MAIL TO email SUBJECT s BODY b</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 2: Calendar -->
<g transform="translate(0, 70)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Calendar Events</text>
<text x="55" y="44" font-size="11" class="mono-text">Events, Scheduling, Free/Busy</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">BOOK keyword + Calendar API</text>
<text x="900" y="44" font-size="11" class="mono-text">BOOK "Meeting" AT datetime</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 3: Drive/Files -->
<g transform="translate(0, 140)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Cloud Storage / Files</text>
<text x="55" y="44" font-size="11" class="mono-text">Files, Versions, Sharing</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">SeaweedFS + File Keywords</text>
<text x="900" y="44" font-size="11" class="mono-text">READ, WRITE, LIST, COPY, MOVE, DELETE</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 4: Tasks -->
<g transform="translate(0, 210)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Tasks / Planning</text>
<text x="55" y="44" font-size="11" class="mono-text">Tasks, Lists, Assignments</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">CREATE TASK + Projects</text>
<text x="900" y="44" font-size="11" class="mono-text">CREATE TASK "title" DUE date IN PROJECT id</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 5: Messaging -->
<g transform="translate(0, 280)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Team Messaging</text>
<text x="55" y="44" font-size="11" class="mono-text">Chat, Channels, Messages</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">TALK + Multi-Channel</text>
<text x="900" y="44" font-size="11" class="mono-text">Web, WhatsApp, Teams, Slack, Telegram</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 6: Users -->
<g transform="translate(0, 350)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Users / Directory</text>
<text x="55" y="44" font-size="11" class="mono-text">Users, Groups, Permissions</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">Zitadel IAM + Users API</text>
<text x="900" y="44" font-size="11" class="mono-text">OIDC/OAuth2 + SCIM provisioning</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#successGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">READY</text>
</g>
<!-- Row 7: Automation -->
<g transform="translate(0, 420)">
<rect x="0" y="0" width="1300" height="60" rx="6" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<circle cx="30" cy="30" r="8" fill="#10B981"/>
<text x="55" y="26" font-size="13" font-weight="600" class="main-text">Workflow Automation</text>
<text x="55" y="44" font-size="11" class="mono-text">Flows, Triggers, Connectors</text>
<text x="650" y="35" text-anchor="middle" font-size="20" class="accent-text">→</text>
<text x="900" y="26" font-size="13" font-weight="600" class="main-text">BASIC Scripts + SET SCHEDULE</text>
<text x="900" y="44" font-size="11" class="mono-text">90+ keywords, webhooks, cron, full logic</text>
<rect x="1200" y="15" width="70" height="28" rx="14" fill="url(#gbGradient)"/>
<text x="1235" y="34" text-anchor="middle" font-size="11" font-weight="600" class="white-text">BETTER</text>
</g>
</g>
<!-- Summary Stats -->
<g transform="translate(100, 720)">
<rect x="0" y="0" width="250" height="60" rx="8" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1"/>
<text x="125" y="28" text-anchor="middle" font-size="24" font-weight="700" class="accent-text">100%</text>
<text x="125" y="48" text-anchor="middle" font-size="12" class="secondary-text">Feature Parity</text>
</g>
<g transform="translate(400, 720)">
<rect x="0" y="0" width="250" height="60" rx="8" fill="#ECFDF5" stroke="#A7F3D0" stroke-width="1"/>
<text x="125" y="28" text-anchor="middle" font-size="24" font-weight="700" fill="#10B981">90+</text>
<text x="125" y="48" text-anchor="middle" font-size="12" class="secondary-text">BASIC Keywords</text>
</g>
<g transform="translate(700, 720)">
<rect x="0" y="0" width="250" height="60" rx="8" fill="#FEF3C7" stroke="#FCD34D" stroke-width="1"/>
<text x="125" y="28" text-anchor="middle" font-size="24" font-weight="700" fill="#D97706">$0</text>
<text x="125" y="48" text-anchor="middle" font-size="12" class="secondary-text">Per-User Licensing</text>
</g>
<g transform="translate(1000, 720)">
<rect x="0" y="0" width="300" height="60" rx="8" fill="#F0FDF4" stroke="#86EFAC" stroke-width="1"/>
<text x="150" y="28" text-anchor="middle" font-size="24" font-weight="700" fill="#16A34A">Self-Hosted</text>
<text x="150" y="48" text-anchor="middle" font-size="12" class="secondary-text">Full Data Sovereignty</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

234
docs/src/assets/architecture-overview.svg
View file

@ -1,234 +0,0 @@
<svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Modern Gradients -->
<linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
</linearGradient>
<linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0EA5E9;stop-opacity:1" />
</linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
</linearGradient>
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
</linearGradient>
<linearGradient id="flowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:0.2" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.2" />
</linearGradient>
<!-- Filters -->
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="130%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#6366F1" flood-opacity="0.15"/>
</filter>
<filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Arrow markers -->
<marker id="arrowPurple" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#8B5CF6"/>
</marker>
<!-- Dot pattern -->
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.08"/>
</pattern>
</defs>
<style>
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.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; }
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
@media (prefers-color-scheme: dark) {
.title-text { fill: #F1F5F9; }
.main-text { fill: #E2E8F0; }
.secondary-text { fill: #94A3B8; }
.mono-text { fill: #CBD5E1; }
}
</style>
<!-- Background -->
<rect width="1200" height="500" fill="#FAFBFC"/>
<rect width="1200" height="500" fill="url(#dots)"/>
<!-- Title -->
<text x="600" y="40" text-anchor="middle" font-size="22" font-weight="600" class="title-text">General Bots Architecture</text>
<text x="600" y="65" text-anchor="middle" font-size="13" class="secondary-text">Single binary • Zero dependencies • Production ready</text>
<!-- Input Layer -->
<g transform="translate(50, 100)">
<text x="80" y="0" text-anchor="middle" font-size="12" font-weight="600" class="secondary-text">CHANNELS</text>
<!-- Web -->
<rect x="0" y="20" width="160" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="45" r="15" fill="url(#cyanGrad)"/>
<text x="28" y="50" text-anchor="middle" font-size="12" font-weight="700" class="white-text">W</text>
<text x="100" y="42" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Web Chat</text>
<text x="100" y="56" text-anchor="middle" font-size="10" class="mono-text">WebSocket</text>
<!-- WhatsApp -->
<rect x="0" y="80" width="160" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="105" r="15" fill="url(#greenGrad)"/>
<text x="28" y="110" text-anchor="middle" font-size="12" font-weight="700" class="white-text">WA</text>
<text x="100" y="102" text-anchor="middle" font-size="12" font-weight="500" class="main-text">WhatsApp</text>
<text x="100" y="116" text-anchor="middle" font-size="10" class="mono-text">Business API</text>
<!-- Teams -->
<rect x="0" y="140" width="160" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="165" r="15" fill="url(#primaryGrad)"/>
<text x="28" y="170" text-anchor="middle" font-size="12" font-weight="700" class="white-text">T</text>
<text x="100" y="162" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Teams</text>
<text x="100" y="176" text-anchor="middle" font-size="10" class="mono-text">Bot Framework</text>
<!-- Voice -->
<rect x="0" y="200" width="160" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="225" r="15" fill="url(#orangeGrad)"/>
<text x="28" y="230" text-anchor="middle" font-size="12" font-weight="700" class="white-text">V</text>
<text x="100" y="222" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Voice</text>
<text x="100" y="236" text-anchor="middle" font-size="10" class="mono-text">LiveKit</text>
</g>
<!-- Flow Arrows to Core -->
<g stroke="url(#flowGrad)" stroke-width="2" fill="none">
<path d="M220 145 Q280 145 340 200" marker-end="url(#arrowPurple)"/>
<path d="M220 180 Q270 180 340 210" marker-end="url(#arrowPurple)"/>
<path d="M220 240 Q270 240 340 230" marker-end="url(#arrowPurple)"/>
<path d="M220 320 Q280 320 340 260" marker-end="url(#arrowPurple)"/>
</g>
<!-- Core Processing -->
<g transform="translate(350, 100)">
<text x="225" y="0" text-anchor="middle" font-size="12" font-weight="600" class="secondary-text">CORE RUNTIME</text>
<!-- Main processing box -->
<rect x="0" y="20" width="450" height="260" rx="12" fill="#FFFFFF" stroke="#C7D2FE" stroke-width="2" filter="url(#cardShadow)"/>
<rect x="0" y="20" width="450" height="40" rx="12" fill="url(#primaryGrad)"/>
<rect x="0" y="48" width="450" height="12" fill="url(#primaryGrad)"/>
<text x="225" y="47" text-anchor="middle" font-size="14" font-weight="600" class="white-text">BotServer (Rust)</text>
<!-- Session Manager -->
<rect x="20" y="75" width="200" height="45" rx="6" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1"/>
<text x="120" y="95" text-anchor="middle" font-size="11" font-weight="600" class="main-text">Session Manager</text>
<text x="120" y="110" text-anchor="middle" font-size="9" class="mono-text">Tokio Async Runtime</text>
<!-- BASIC Interpreter -->
<rect x="230" y="75" width="200" height="45" rx="6" fill="#FEF3C7" stroke="#FCD34D" stroke-width="1"/>
<text x="330" y="95" text-anchor="middle" font-size="11" font-weight="600" class="main-text">BASIC Interpreter</text>
<text x="330" y="110" text-anchor="middle" font-size="9" class="mono-text">90+ Keywords</text>
<!-- LLM Integration -->
<rect x="20" y="130" width="200" height="45" rx="6" fill="#F5F3FF" stroke="#DDD6FE" stroke-width="1"/>
<text x="120" y="150" text-anchor="middle" font-size="11" font-weight="600" class="main-text">LLM Integration</text>
<text x="120" y="165" text-anchor="middle" font-size="9" class="mono-text">OpenAI, Anthropic, Local</text>
<!-- Package Manager -->
<rect x="230" y="130" width="200" height="45" rx="6" fill="#ECFDF5" stroke="#A7F3D0" stroke-width="1"/>
<text x="330" y="150" text-anchor="middle" font-size="11" font-weight="600" class="main-text">Package Manager</text>
<text x="330" y="165" text-anchor="middle" font-size="9" class="mono-text">.gbai, .gbkb, .gbdialog</text>
<!-- RAG Engine -->
<rect x="20" y="185" width="130" height="40" rx="6" fill="#F0FDF4" stroke="#86EFAC" stroke-width="1"/>
<text x="85" y="202" text-anchor="middle" font-size="10" font-weight="600" class="main-text">RAG Engine</text>
<text x="85" y="216" text-anchor="middle" font-size="8" class="mono-text">Qdrant Vectors</text>
<!-- Tool Executor -->
<rect x="160" y="185" width="130" height="40" rx="6" fill="#FFF7ED" stroke="#FDBA74" stroke-width="1"/>
<text x="225" y="202" text-anchor="middle" font-size="10" font-weight="600" class="main-text">Tool Executor</text>
<text x="225" y="216" text-anchor="middle" font-size="8" class="mono-text">Function Calling</text>
<!-- API Server -->
<rect x="300" y="185" width="130" height="40" rx="6" fill="#EFF6FF" stroke="#93C5FD" stroke-width="1"/>
<text x="365" y="202" text-anchor="middle" font-size="10" font-weight="600" class="main-text">REST API</text>
<text x="365" y="216" text-anchor="middle" font-size="8" class="mono-text">Axum Server</text>
<!-- Data services bar -->
<rect x="20" y="235" width="410" height="35" rx="6" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<text x="60" y="257" text-anchor="middle" font-size="9" class="mono-text">PostgreSQL</text>
<text x="140" y="257" text-anchor="middle" font-size="9" class="mono-text">SeaweedFS</text>
<text x="220" y="257" text-anchor="middle" font-size="9" class="mono-text">Valkey</text>
<text x="300" y="257" text-anchor="middle" font-size="9" class="mono-text">Zitadel</text>
<text x="380" y="257" text-anchor="middle" font-size="9" class="mono-text">Stalwart</text>
</g>
<!-- Flow Arrows to Output -->
<g stroke="url(#flowGrad)" stroke-width="2" fill="none">
<path d="M810 200 Q870 200 920 150" marker-end="url(#arrowPurple)"/>
<path d="M810 230 Q870 230 920 230" marker-end="url(#arrowPurple)"/>
<path d="M810 260 Q870 260 920 310" marker-end="url(#arrowPurple)"/>
</g>
<!-- Output Layer -->
<g transform="translate(930, 100)">
<text x="110" y="0" text-anchor="middle" font-size="12" font-weight="600" class="secondary-text">OUTPUT</text>
<!-- Responses -->
<rect x="0" y="30" width="220" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="55" r="15" fill="url(#primaryGrad)"/>
<text x="28" y="60" text-anchor="middle" font-size="10" font-weight="700" class="white-text">💬</text>
<text x="130" y="52" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Conversations</text>
<text x="130" y="66" text-anchor="middle" font-size="10" class="mono-text">Text, Voice, Rich Media</text>
<!-- Actions -->
<rect x="0" y="95" width="220" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="120" r="15" fill="url(#greenGrad)"/>
<text x="28" y="125" text-anchor="middle" font-size="10" font-weight="700" class="white-text">⚡</text>
<text x="130" y="117" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Automations</text>
<text x="130" y="131" text-anchor="middle" font-size="10" class="mono-text">Webhooks, Schedules</text>
<!-- Data -->
<rect x="0" y="160" width="220" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<circle cx="30" cy="185" r="15" fill="url(#cyanGrad)"/>
<text x="28" y="190" text-anchor="middle" font-size="10" font-weight="700" class="white-text">📊</text>
<text x="130" y="182" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Data & Files</text>
<text x="130" y="196" text-anchor="middle" font-size="10" class="mono-text">Drive, Mail, Calendar</text>
</g>
<!-- Bottom stats bar -->
<g transform="translate(100, 420)">
<rect x="0" y="0" width="1000" height="60" rx="10" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#cardShadow)"/>
<g transform="translate(50, 15)">
<rect x="0" y="0" width="150" height="30" rx="6" fill="#EEF2FF"/>
<text x="75" y="20" text-anchor="middle" font-size="12" font-weight="600" class="main-text">Single Binary</text>
</g>
<g transform="translate(230, 15)">
<rect x="0" y="0" width="150" height="30" rx="6" fill="#ECFDF5"/>
<text x="75" y="20" text-anchor="middle" font-size="12" font-weight="600" class="main-text">Self-Hosted</text>
</g>
<g transform="translate(410, 15)">
<rect x="0" y="0" width="150" height="30" rx="6" fill="#FEF3C7"/>
<text x="75" y="20" text-anchor="middle" font-size="12" font-weight="600" class="main-text">Open Source</text>
</g>
<g transform="translate(590, 15)">
<rect x="0" y="0" width="150" height="30" rx="6" fill="#F0FDF4"/>
<text x="75" y="20" text-anchor="middle" font-size="12" font-weight="600" class="main-text">AI-First</text>
</g>
<g transform="translate(770, 15)">
<rect x="0" y="0" width="150" height="30" rx="6" fill="#F5F3FF"/>
<text x="75" y="20" text-anchor="middle" font-size="12" font-weight="600" class="main-text">No Forms</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

226
docs/src/assets/architecture.svg
View file

@ -1,226 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.neon-gray { stroke: #666666; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-gray {
stroke: #888888;
stroke-width: 2.8;
filter: drop-shadow(0 0 2px #888888);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="25%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="75%" style="stop-color:#7ED321;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#50E3C2;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-size="32" font-weight="600" class="main-text">General Bots Architecture</text>
<text x="700" y="75" text-anchor="middle" font-size="21" class="secondary-text">Single binary with everything included - no external dependencies</text>
<!-- Phase Labels -->
<text x="180" y="115" text-anchor="middle" font-size="21" font-weight="500" class="secondary-text">Interface Layer</text>
<text x="700" y="115" text-anchor="middle" font-size="21" font-weight="500" class="secondary-text">Core Runtime</text>
<text x="1220" y="115" text-anchor="middle" font-size="21" font-weight="500" class="secondary-text">Processing</text>
<!-- MAIN FLOW DIAGRAM (Upper Section) -->
<g id="main-flow">
<!-- Top Layer - Interface Components -->
<!-- Web Server -->
<rect x="50" y="140" width="130" height="60" class="neon-blue" rx="6.5"/>
<text x="115" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Web Server</text>
<!-- Console UI -->
<rect x="200" y="140" width="130" height="60" class="neon-cyan" rx="6.5"/>
<text x="265" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Console UI</text>
<!-- BASIC Interpreter -->
<rect x="480" y="140" width="180" height="60" class="neon-orange" rx="6.5"/>
<text x="570" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">BASIC Interpreter</text>
<!-- LLM Integration -->
<rect x="680" y="140" width="160" height="60" class="neon-purple" rx="6.5"/>
<text x="760" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">LLM Integration</text>
<!-- Package Manager -->
<rect x="860" y="140" width="170" height="60" class="neon-green" rx="6.5"/>
<text x="945" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Package Manager</text>
<!-- BotModels -->
<rect x="1135" y="140" width="160" height="60" class="neon-purple" rx="6.5"/>
<text x="1215" y="178" text-anchor="middle" font-size="22" font-weight="500" class="main-text">BotModels (AI)</text>
<!-- Middle Layer - Session Manager -->
<rect x="350" y="280" width="400" height="60" class="neon-blue" rx="6.5"/>
<text x="550" y="318" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Session Manager (Tokio Async Runtime)</text>
<!-- Channels Box -->
<rect x="800" y="280" width="150" height="60" class="neon-cyan" rx="6.5"/>
<text x="875" y="318" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Channels</text>
<!-- External API -->
<rect x="980" y="280" width="140" height="60" class="neon-orange" rx="6.5"/>
<text x="1050" y="318" text-anchor="middle" font-size="22" font-weight="500" class="main-text">External API</text>
<!-- Data Layer Components -->
<!-- PostgreSQL -->
<rect x="50" y="420" width="140" height="60" class="neon-orange" rx="6.5"/>
<text x="120" y="458" text-anchor="middle" font-size="22" font-weight="500" class="main-text">PostgreSQL</text>
<!-- Valkey Cache -->
<rect x="210" y="420" width="140" height="60" class="neon-purple" rx="6.5"/>
<text x="280" y="458" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Valkey Cache</text>
<!-- Qdrant Vectors -->
<rect x="370" y="420" width="150" height="60" class="neon-green" rx="6.5"/>
<text x="445" y="458" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Qdrant Vectors</text>
<!-- SeaweedFS -->
<rect x="540" y="420" width="150" height="60" class="neon-cyan" rx="6.5"/>
<text x="615" y="458" text-anchor="middle" font-size="22" font-weight="500" class="main-text">SeaweedFS</text>
<!-- Storage Contents Box -->
<rect x="720" y="420" width="350" height="60" class="neon-gray" rx="6.5"/>
<text x="895" y="448" text-anchor="middle" font-size="18" class="secondary-text">.gbkb (Docs) | .gbdialog (Scripts) | .gbot (Config)</text>
<text x="895" y="470" text-anchor="middle" font-size="18" class="secondary-text">Templates | User Assets</text>
<!-- Directory Services -->
<rect x="1090" y="420" width="140" height="60" class="neon-blue" rx="6.5"/>
<text x="1160" y="458" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Zitadel (IAM)</text>
</g>
<!-- Arrows -->
<g stroke="#666" stroke-width="2.6" fill="none" opacity="0.7">
<!-- Top layer to Session Manager -->
<line x1="115" y1="200" x2="400" y2="280" marker-end="url(#arrow)"/>
<line x1="265" y1="200" x2="450" y2="280" marker-end="url(#arrow)"/>
<line x1="570" y1="200" x2="550" y2="280" marker-end="url(#arrow)"/>
<line x1="760" y1="200" x2="650" y2="280" marker-end="url(#arrow)"/>
<line x1="945" y1="200" x2="750" y2="280" marker-end="url(#arrow)"/>
<!-- BotModels connection -->
<line x1="1215" y1="200" x2="1050" y2="280" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Session Manager to Data Layer -->
<line x1="400" y1="340" x2="120" y2="420" marker-end="url(#arrow)"/>
<line x1="450" y1="340" x2="280" y2="420" marker-end="url(#arrow)"/>
<line x1="550" y1="340" x2="445" y2="420" marker-end="url(#arrow)"/>
<line x1="650" y1="340" x2="615" y2="420" marker-end="url(#arrow)"/>
<line x1="700" y1="340" x2="820" y2="420" marker-end="url(#arrow)"/>
<!-- Channels/External connections -->
<line x1="875" y1="340" x2="920" y2="420" marker-end="url(#arrow)"/>
<line x1="1050" y1="340" x2="1160" y2="420" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
</g>
<!-- PROGRESS INDICATOR (Lower Section) -->
<g id="progress-legend">
<!-- Background gradient bar -->
<rect x="50" y="560" width="1300" height="100" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="150" cy="610" r="12" class="neon-blue"/>
<circle cx="400" cy="610" r="12" class="neon-orange"/>
<circle cx="650" cy="610" r="12" class="neon-purple"/>
<circle cx="900" cy="610" r="12" class="neon-green"/>
<circle cx="1150" cy="610" r="12" class="neon-cyan"/>
<!-- Connecting lines -->
<line x1="162" y1="610" x2="388" y2="610" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="412" y1="610" x2="638" y2="610" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="662" y1="610" x2="888" y2="610" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="912" y1="610" x2="1138" y2="610" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="150" y="580" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Request</text>
<text x="150" y="650" text-anchor="middle" font-size="16" class="secondary-text">Web/Console</text>
<text x="400" y="580" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Process</text>
<text x="400" y="650" text-anchor="middle" font-size="16" class="secondary-text">BASIC + LLM</text>
<text x="650" y="580" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Decide</text>
<text x="650" y="650" text-anchor="middle" font-size="16" class="secondary-text">AI Routing</text>
<text x="900" y="580" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Execute</text>
<text x="900" y="650" text-anchor="middle" font-size="16" class="secondary-text">Tools + APIs</text>
<text x="1150" y="580" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Respond</text>
<text x="1150" y="650" text-anchor="middle" font-size="16" class="secondary-text">Multi-Channel</text>
</g>
<!-- Legend -->
<g id="legend" transform="translate(50, 720)">
<text x="0" y="0" font-size="18" font-weight="500" class="main-text">Component Types:</text>
<rect x="0" y="20" width="24" height="24" class="neon-blue" rx="4"/>
<text x="35" y="38" font-size="16" class="secondary-text">Interface / Routing</text>
<rect x="200" y="20" width="24" height="24" class="neon-orange" rx="4"/>
<text x="235" y="38" font-size="16" class="secondary-text">Processing / Scripts</text>
<rect x="420" y="20" width="24" height="24" class="neon-purple" rx="4"/>
<text x="455" y="38" font-size="16" class="secondary-text">AI / ML / Decision</text>
<rect x="640" y="20" width="24" height="24" class="neon-green" rx="4"/>
<text x="675" y="38" font-size="16" class="secondary-text">Execution / Storage</text>
<rect x="870" y="20" width="24" height="24" class="neon-cyan" rx="4"/>
<text x="905" y="38" font-size="16" class="secondary-text">Output / Response</text>
</g>
<!-- Description -->
<text x="700" y="810" text-anchor="middle" font-size="21" class="secondary-text">
Rust-powered single binary serving web UI, BASIC scripting, LLM orchestration, and multi-channel messaging
</text>
<text x="700" y="845" text-anchor="middle" font-size="21" class="secondary-text">
Auto-installed infrastructure: PostgreSQL, Valkey, Qdrant, SeaweedFS, Zitadel - zero external dependencies
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

79
docs/src/assets/architecture.svg.backup
View file

@ -1,79 +0,0 @@
<svg width="900" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- Main Container -->
<rect x="50" y="30" width="800" height="540" fill="none" stroke="#4A5568" stroke-width="3" rx="10"/>
<!-- Title Bar -->
<rect x="50" y="30" width="800" height="50" fill="none" stroke="#4A5568" stroke-width="2" rx="10 10 0 0"/>
<text x="450" y="60" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#E2E8F0">BotServer (Single Binary)</text>
<!-- Top Layer Components -->
<g id="top-components">
<!-- Web Server -->
<rect x="100" y="120" width="200" height="80" fill="none" stroke="#4299E1" stroke-width="2" rx="8"/>
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#63B3ED">Web Server</text>
<text x="200" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#90CDF4">(Axum)</text>
<!-- BASIC Interpreter -->
<rect x="350" y="120" width="200" height="80" fill="none" stroke="#F56565" stroke-width="2" rx="8"/>
<text x="450" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#FC8181">BASIC</text>
<text x="450" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#FEB2B2">Interpreter</text>
<text x="450" y="190" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#FBB6CE">(Rhai)</text>
<!-- LLM Integration -->
<rect x="600" y="120" width="200" height="80" fill="none" stroke="#B794F4" stroke-width="2" rx="8"/>
<text x="700" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#D6BCFA">LLM</text>
<text x="700" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#E9D8FD">Integration</text>
</g>
<!-- Connection Lines from Top to Middle -->
<g stroke="#718096" stroke-width="2" fill="none">
<line x1="200" y1="200" x2="200" y2="240" stroke-dasharray="5,5" opacity="0.6"/>
<line x1="450" y1="200" x2="450" y2="240" stroke-dasharray="5,5" opacity="0.6"/>
<line x1="700" y1="200" x2="700" y2="240" stroke-dasharray="5,5" opacity="0.6"/>
</g>
<!-- Session Manager -->
<rect x="100" y="240" width="700" height="60" fill="none" stroke="#48BB78" stroke-width="2" rx="8"/>
<text x="450" y="275" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#68D391">Session Manager (Tokio)</text>
<!-- Connection Lines from Middle to Data Layer -->
<g stroke="#718096" stroke-width="2" fill="none">
<line x1="250" y1="300" x2="250" y2="340" stroke-dasharray="5,5" opacity="0.6"/>
<line x1="450" y1="300" x2="450" y2="340" stroke-dasharray="5,5" opacity="0.6"/>
<line x1="650" y1="300" x2="650" y2="340" stroke-dasharray="5,5" opacity="0.6"/>
</g>
<!-- Data Layer Components -->
<g id="data-components">
<!-- PostgreSQL -->
<rect x="100" y="340" width="200" height="80" fill="none" stroke="#4A90E2" stroke-width="2" rx="8"/>
<text x="200" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#5BA0F2">PostgreSQL</text>
<text x="200" y="395" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#7BB4F6">Database</text>
<!-- Valkey Cache -->
<rect x="350" y="340" width="200" height="80" fill="none" stroke="#E53E3E" stroke-width="2" rx="8"/>
<text x="450" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#FC6B6B">Valkey</text>
<text x="450" y="395" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#FD8E8E">Cache</text>
<!-- Qdrant Vectors -->
<rect x="600" y="340" width="200" height="80" fill="none" stroke="#38D4B2" stroke-width="2" rx="8"/>
<text x="700" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#4EECC8">Qdrant</text>
<text x="700" y="395" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#6FF4D2">Vectors</text>
</g>
<!-- Object Storage -->
<rect x="100" y="450" width="700" height="100" fill="none" stroke="#38A169" stroke-width="2" rx="8"/>
<text x="450" y="480" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#48BB78">Object Storage (SeaweedFS/S3)</text>
<!-- Storage Items -->
<g id="storage-items">
<rect x="150" y="500" width="150" height="35" fill="none" stroke="#68D391" stroke-width="1" rx="5"/>
<text x="225" y="522" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#9AE6B4">Documents</text>
<rect x="375" y="500" width="150" height="35" fill="none" stroke="#68D391" stroke-width="1" rx="5"/>
<text x="450" y="522" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#9AE6B4">Templates</text>
<rect x="600" y="500" width="150" height="35" fill="none" stroke="#68D391" stroke-width="1" rx="5"/>
<text x="675" y="522" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#9AE6B4">Assets</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 5.1 KiB

182
docs/src/assets/botmodels-architecture.svg
View file

@ -1,182 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-size="32" font-weight="600" class="main-text">BotServer ↔ BotModels Integration</text>
<text x="700" y="75" text-anchor="middle" font-size="18" class="secondary-text">Rust backend calling Python AI services over HTTPS</text>
<!-- MAIN ARCHITECTURE DIAGRAM -->
<g id="main-architecture">
<!-- BotServer Box (Left) -->
<rect x="80" y="120" width="400" height="380" class="neon-blue" rx="10"/>
<text x="280" y="155" text-anchor="middle" font-size="26" font-weight="600" class="main-text">botserver (Rust)</text>
<!-- BotServer Components -->
<rect x="110" y="180" width="160" height="55" class="neon-orange" rx="6.5"/>
<text x="190" y="215" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BASIC Interpreter</text>
<rect x="290" y="180" width="160" height="55" class="neon-purple" rx="6.5"/>
<text x="370" y="215" text-anchor="middle" font-size="18" font-weight="500" class="main-text">LLM Integration</text>
<!-- BASIC Keywords -->
<rect x="110" y="260" width="340" height="120" class="neon-green" rx="6.5"/>
<text x="280" y="290" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BASIC Keywords</text>
<text x="140" y="320" font-size="16" class="secondary-text">• IMAGE prompt</text>
<text x="140" y="345" font-size="16" class="secondary-text">• VIDEO prompt</text>
<text x="300" y="320" font-size="16" class="secondary-text">• AUDIO text</text>
<text x="300" y="345" font-size="16" class="secondary-text">• SEE image</text>
<text x="140" y="370" font-size="16" class="secondary-text">• HEAR AS AUDIO</text>
<!-- Config -->
<rect x="110" y="400" width="340" height="70" class="neon-cyan" rx="6.5"/>
<text x="280" y="430" text-anchor="middle" font-size="16" font-weight="500" class="main-text">config.csv</text>
<text x="280" y="455" text-anchor="middle" font-size="14" class="secondary-text">botmodels-url, botmodels-enabled</text>
<!-- BotModels Box (Right) -->
<rect x="920" y="120" width="400" height="380" class="neon-purple" rx="10"/>
<text x="1120" y="155" text-anchor="middle" font-size="26" font-weight="600" class="main-text">botmodels (Python)</text>
<!-- BotModels Services -->
<rect x="950" y="180" width="160" height="55" class="neon-orange" rx="6.5"/>
<text x="1030" y="208" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Image Service</text>
<text x="1030" y="228" text-anchor="middle" font-size="12" class="secondary-text">Stable Diffusion</text>
<rect x="1130" y="180" width="160" height="55" class="neon-green" rx="6.5"/>
<text x="1210" y="208" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Video Service</text>
<text x="1210" y="228" text-anchor="middle" font-size="12" class="secondary-text">Zeroscope</text>
<rect x="950" y="260" width="160" height="55" class="neon-cyan" rx="6.5"/>
<text x="1030" y="288" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Speech Service</text>
<text x="1030" y="308" text-anchor="middle" font-size="12" class="secondary-text">TTS / Whisper</text>
<rect x="1130" y="260" width="160" height="55" class="neon-blue" rx="6.5"/>
<text x="1210" y="288" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Vision Service</text>
<text x="1210" y="308" text-anchor="middle" font-size="12" class="secondary-text">BLIP2 / QRCode</text>
<!-- API Endpoints -->
<rect x="950" y="340" width="340" height="130" class="neon-orange" rx="6.5"/>
<text x="1120" y="370" text-anchor="middle" font-size="16" font-weight="500" class="main-text">FastAPI Endpoints</text>
<text x="980" y="400" font-size="14" class="secondary-text">/api/v1/image/generate</text>
<text x="980" y="422" font-size="14" class="secondary-text">/api/v1/video/generate</text>
<text x="980" y="444" font-size="14" class="secondary-text">/api/v1/speech/to-text</text>
<text x="980" y="466" font-size="14" class="secondary-text">/api/v1/vision/describe</text>
<!-- Connection Arrow -->
<line x1="480" y1="310" x2="920" y2="310" class="arrow-color" stroke-width="4" marker-end="url(#arrow)"/>
<rect x="600" y="280" width="120" height="60" fill="white" class="neon-cyan" rx="6.5"/>
<text x="660" y="305" text-anchor="middle" font-size="16" font-weight="600" class="main-text">HTTPS</text>
<text x="660" y="325" text-anchor="middle" font-size="12" class="secondary-text">JSON / Binary</text>
<!-- Outputs -->
<rect x="920" y="530" width="400" height="80" class="neon-green" rx="6.5"/>
<text x="1120" y="565" text-anchor="middle" font-size="18" font-weight="500" class="main-text">outputs/ (Generated Files)</text>
<text x="1120" y="590" text-anchor="middle" font-size="14" class="secondary-text">Images, Videos, Audio files served via /outputs</text>
<!-- Arrow from API to outputs -->
<line x1="1120" y1="470" x2="1120" y2="530" class="arrow-color" stroke-width="2.6" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.6"/>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend">
<rect x="80" y="650" width="1240" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="690" r="12" class="neon-blue"/>
<circle cx="460" cy="690" r="12" class="neon-orange"/>
<circle cx="720" cy="690" r="12" class="neon-purple"/>
<circle cx="980" cy="690" r="12" class="neon-green"/>
<circle cx="1200" cy="690" r="12" class="neon-cyan"/>
<!-- Connecting lines -->
<line x1="212" y1="690" x2="448" y2="690" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="472" y1="690" x2="708" y2="690" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="732" y1="690" x2="968" y2="690" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="992" y1="690" x2="1188" y2="690" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="200" y="720" text-anchor="middle" font-size="14" class="secondary-text">BASIC Keyword</text>
<text x="460" y="720" text-anchor="middle" font-size="14" class="secondary-text">HTTP Request</text>
<text x="720" y="720" text-anchor="middle" font-size="14" class="secondary-text">AI Processing</text>
<text x="980" y="720" text-anchor="middle" font-size="14" class="secondary-text">Generate</text>
<text x="1200" y="720" text-anchor="middle" font-size="14" class="secondary-text">Return URL</text>
</g>
<!-- Legend -->
<g id="legend" transform="translate(80, 770)">
<rect x="0" y="0" width="24" height="24" class="neon-blue" rx="4"/>
<text x="35" y="18" font-size="14" class="secondary-text">Rust Backend</text>
<rect x="180" y="0" width="24" height="24" class="neon-purple" rx="4"/>
<text x="215" y="18" font-size="14" class="secondary-text">Python AI</text>
<rect x="340" y="0" width="24" height="24" class="neon-orange" rx="4"/>
<text x="375" y="18" font-size="14" class="secondary-text">Processing</text>
<rect x="500" y="0" width="24" height="24" class="neon-green" rx="4"/>
<text x="535" y="18" font-size="14" class="secondary-text">Output</text>
<rect x="660" y="0" width="24" height="24" class="neon-cyan" rx="4"/>
<text x="695" y="18" font-size="14" class="secondary-text">Config/API</text>
</g>
<!-- Description -->
<text x="700" y="830" text-anchor="middle" font-size="18" class="secondary-text">
BotModels runs as a separate Python service for GPU-accelerated AI inference
</text>
<text x="700" y="855" text-anchor="middle" font-size="18" class="secondary-text">
Enable with: botmodels-enabled=true and botmodels-url=http://localhost:8001
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.8 KiB

98
docs/src/assets/chapter-01/bootstrap-process.svg
View file

@ -1,98 +0,0 @@
<svg width="800" height="900" viewBox="0 0 800 900" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
</defs>
<!-- Title -->
<text x="400" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Auto-Bootstrap Process</text>
<!-- Start: ./botserver (First Run) -->
<rect x="325" y="50" width="150" height="40" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="400" y="75" text-anchor="middle" font-family="monospace" font-size="20" fill="#1E40AF">./botserver</text>
<!-- Arrow down -->
<line x1="400" y1="90" x2="400" y2="120" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Detect System -->
<rect x="300" y="120" width="200" height="60" fill="none" stroke="#F6AD55" stroke-width="2" rx="8"/>
<text x="400" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">Detect System</text>
<text x="400" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1F2937">(Linux/Mac)</text>
<!-- Arrow down -->
<line x1="400" y1="180" x2="400" y2="210" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Main Process Container -->
<rect x="50" y="210" width="700" height="280" fill="none" stroke="#4A5568" stroke-width="2" rx="10" stroke-dasharray="5,5" opacity="0.6"/>
<text x="400" y="235" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#374151">Auto-Bootstrap Process</text>
<!-- Component Grid -->
<g id="components">
<!-- PostgreSQL -->
<rect x="100" y="260" width="140" height="100" fill="none" stroke="#4A90E2" stroke-width="2" rx="8"/>
<text x="170" y="285" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2563EB">PostgreSQL</text>
<text x="170" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1E40AF">16.2</text>
<text x="170" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Install</text>
<text x="170" y="340" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Configure</text>
<text x="170" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Migrate</text>
<!-- Valkey -->
<rect x="260" y="260" width="140" height="100" fill="none" stroke="#E53E3E" stroke-width="2" rx="8"/>
<text x="330" y="285" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EF4444">Valkey</text>
<text x="330" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#DC2626">Cache</text>
<text x="330" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Install</text>
<text x="330" y="340" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Configure</text>
<text x="330" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Start</text>
<!-- SeaweedFS -->
<rect x="420" y="260" width="140" height="100" fill="none" stroke="#38A169" stroke-width="2" rx="8"/>
<text x="490" y="285" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#047857">SeaweedFS</text>
<text x="490" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#059669">Storage</text>
<text x="490" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Install</text>
<text x="490" y="340" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Configure</text>
<text x="490" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Start</text>
<!-- Qdrant -->
<rect x="580" y="260" width="140" height="100" fill="none" stroke="#38D4B2" stroke-width="2" rx="8"/>
<text x="650" y="285" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#0891B2">Qdrant</text>
<text x="650" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#0891B2">Vectors</text>
<text x="650" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Install</text>
<text x="650" y="340" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Configure</text>
<text x="650" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Start</text>
</g>
<!-- LLM Models -->
<rect x="150" y="380" width="500" height="80" fill="none" stroke="#B794F4" stroke-width="2" rx="8"/>
<text x="400" y="405" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#9333EA">LLM Models (Optional)</text>
<text x="400" y="430" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Download BGE embeddings</text>
<text x="400" y="445" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#059669">✓ Download Llama model (if local)</text>
<!-- Arrow down -->
<line x1="400" y1="490" x2="400" y2="520" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Generate .env file -->
<rect x="275" y="520" width="250" height="80" fill="none" stroke="#ED8936" stroke-width="2" rx="8"/>
<text x="400" y="545" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#D97706">Generate .env file</text>
<text x="400" y="565" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Secure passwords</text>
<text x="400" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Connection URLs</text>
<text x="400" y="595" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Port assignments</text>
<!-- Arrow down -->
<line x1="400" y1="600" x2="400" y2="630" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Load Templates -->
<rect x="275" y="630" width="250" height="80" fill="none" stroke="#9F7AEA" stroke-width="2" rx="8"/>
<text x="400" y="655" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#9333EA">Load Templates</text>
<text x="400" y="675" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Scan .gbai dirs</text>
<text x="400" y="690" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Create bots</text>
<text x="400" y="705" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">• Index documents</text>
<!-- Arrow down -->
<line x1="400" y1="710" x2="400" y2="740" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Start Web Server -->
<rect x="275" y="740" width="250" height="60" fill="none" stroke="#48BB78" stroke-width="2" rx="8"/>
<text x="400" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#059669">Start Web Server</text>
<text x="400" y="785" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#10B981">localhost:8080</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.5 KiB

188
docs/src/assets/chapter-01/quick-start-bootstrap-wide.svg
View file

@ -1,188 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<marker id="arrow-small" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" class="arrow-color"/>
</marker>
</defs>
<!-- Title (well separated from content) -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Bootstrap Flow</text>
<!-- MAIN FLOW DIAGRAM (Upper Section) -->
<!-- Phase 1: Start -->
<g id="phase-start">
<rect x="40" y="100" width="160" height="70" fill="none" class="neon-blue" rx="6.5"/>
<text x="120" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">./botserver</text>
</g>
<!-- Arrow from Start to OS Detection -->
<line x1="200" y1="135" x2="250" y2="135" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 2: OS Detection -->
<g id="phase-detection">
<rect x="250" y="100" width="180" height="70" fill="none" class="neon-orange" rx="6.5"/>
<text x="340" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">OS Detection</text>
</g>
<!-- Arrow from OS Detection to Component Installation -->
<line x1="430" y1="135" x2="490" y2="135" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 3: Component Installation -->
<g id="phase-components">
<!-- Label -->
<text x="620" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Component Installation</text>
<!-- Components in 2x2 grid with proper widths -->
<rect x="490" y="120" width="120" height="50" fill="none" class="neon-blue" rx="5"/>
<text x="550" y="151" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">PostgreSQL</text>
<rect x="630" y="120" width="120" height="50" fill="none" class="neon-purple" rx="5"/>
<text x="690" y="151" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Valkey</text>
<rect x="490" y="190" width="120" height="50" fill="none" class="neon-green" rx="5"/>
<text x="550" y="221" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">SeaweedFS</text>
<rect x="630" y="190" width="120" height="50" fill="none" class="neon-cyan" rx="5"/>
<text x="690" y="221" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Qdrant</text>
<!-- Merge lines -->
<g class="arrow-color" stroke-width="1.5" fill="none" opacity="0.5">
<line x1="550" y1="170" x2="550" y2="180"/>
<line x1="690" y1="170" x2="690" y2="180"/>
<line x1="550" y1="180" x2="690" y2="180"/>
<line x1="620" y1="180" x2="620" y2="260"/>
</g>
</g>
<!-- Arrow to Configuration -->
<line x1="620" y1="260" x2="620" y2="330" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 4: Configuration & Setup -->
<g id="phase-config">
<rect x="490" y="330" width="260" height="70" fill="none" class="neon-purple" rx="6.5"/>
<text x="620" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">Configuration &amp; Setup</text>
</g>
<!-- Arrow from Configuration to Bot Deployment section -->
<line x1="750" y1="365" x2="820" y2="365" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 5: Bot Deployment (vertical flow) -->
<g id="phase-deployment">
<!-- Label -->
<text x="1030" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Bot Deployment</text>
<!-- Scan templates with proper width -->
<rect x="880" y="120" width="300" height="60" fill="none" class="neon-orange" rx="6.5"/>
<text x="1030" y="158" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" class="main-text">Scan templates/ directory</text>
<!-- Dashed arrow -->
<line x1="1030" y1="180" x2="1030" y2="230" class="arrow-color" stroke-width="2.6" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Load packages with proper width -->
<rect x="880" y="230" width="300" height="60" fill="none" class="neon-orange" rx="6.5"/>
<text x="1030" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" class="main-text">Load .gbai packages</text>
<!-- Arrow -->
<line x1="1030" y1="290" x2="1030" y2="340" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Start Web Server -->
<rect x="880" y="340" width="300" height="60" fill="none" class="neon-green" rx="6.5"/>
<text x="1030" y="378" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Start Web Server</text>
</g>
<!-- PROGRESS INDICATOR (Bottom Section) -->
<g id="process-flow">
<!-- Large flow arrow at bottom -->
<defs>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Flow visualization bar -->
<rect x="120" y="500" width="1060" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage indicators -->
<circle cx="120" cy="540" r="8" class="neon-blue" fill="none"/>
<circle cx="340" cy="540" r="8" class="neon-orange" fill="none"/>
<circle cx="620" cy="540" r="8" class="neon-purple" fill="none"/>
<circle cx="1030" cy="540" r="8" class="neon-green" fill="none"/>
<!-- Connecting lines -->
<line x1="128" y1="540" x2="332" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="348" y1="540" x2="612" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="628" y1="540" x2="1022" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="120" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Start</text>
<text x="340" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Detect</text>
<text x="620" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Install &amp; Configure</text>
<text x="1030" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Deploy</text>
</g>
<!-- Description text (well-spaced at bottom) -->
<text x="700" y="720" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
Automatic bootstrap process: detect OS, install components, configure, and deploy
</text>
<text x="700" y="755" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
Zero configuration required - everything runs from a single binary
</text>
<!-- Optional: Add subtle grid/connection lines in background -->
<g opacity="0.05" class="arrow-color">
<line x1="120" y1="170" x2="120" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="340" y1="170" x2="340" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="620" y1="240" x2="620" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="1030" y1="400" x2="1030" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.3 KiB

188
docs/src/assets/chapter-01/quick-start-bootstrap.svg
View file

@ -1,188 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<marker id="arrow-small" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" class="arrow-color"/>
</marker>
</defs>
<!-- Title (well separated from content) -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Bootstrap Flow</text>
<!-- MAIN FLOW DIAGRAM (Upper Section) -->
<!-- Phase 1: Start -->
<g id="phase-start">
<rect x="40" y="100" width="160" height="70" fill="none" class="neon-blue" rx="6.5"/>
<text x="120" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">./botserver</text>
</g>
<!-- Arrow from Start to OS Detection -->
<line x1="200" y1="135" x2="250" y2="135" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 2: OS Detection -->
<g id="phase-detection">
<rect x="250" y="100" width="180" height="70" fill="none" class="neon-orange" rx="6.5"/>
<text x="340" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">OS Detection</text>
</g>
<!-- Arrow from OS Detection to Component Installation -->
<line x1="430" y1="135" x2="490" y2="135" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 3: Component Installation -->
<g id="phase-components">
<!-- Label -->
<text x="620" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Component Installation</text>
<!-- Components in 2x2 grid with proper widths -->
<rect x="490" y="120" width="120" height="50" fill="none" class="neon-blue" rx="5"/>
<text x="550" y="151" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">PostgreSQL</text>
<rect x="630" y="120" width="120" height="50" fill="none" class="neon-purple" rx="5"/>
<text x="690" y="151" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Valkey</text>
<rect x="490" y="190" width="120" height="50" fill="none" class="neon-green" rx="5"/>
<text x="550" y="221" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">SeaweedFS</text>
<rect x="630" y="190" width="120" height="50" fill="none" class="neon-cyan" rx="5"/>
<text x="690" y="221" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Qdrant</text>
<!-- Merge lines -->
<g class="arrow-color" stroke-width="1.5" fill="none" opacity="0.5">
<line x1="550" y1="170" x2="550" y2="180"/>
<line x1="690" y1="170" x2="690" y2="180"/>
<line x1="550" y1="180" x2="690" y2="180"/>
<line x1="620" y1="180" x2="620" y2="260"/>
</g>
</g>
<!-- Arrow to Configuration -->
<line x1="620" y1="260" x2="620" y2="330" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 4: Configuration & Setup -->
<g id="phase-config">
<rect x="490" y="330" width="260" height="70" fill="none" class="neon-purple" rx="6.5"/>
<text x="620" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="500" class="main-text">Configuration &amp; Setup</text>
</g>
<!-- Arrow from Configuration to Bot Deployment section -->
<line x1="750" y1="365" x2="820" y2="365" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Phase 5: Bot Deployment (vertical flow) -->
<g id="phase-deployment">
<!-- Label -->
<text x="1030" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Bot Deployment</text>
<!-- Scan templates with proper width -->
<rect x="880" y="120" width="300" height="60" fill="none" class="neon-orange" rx="6.5"/>
<text x="1030" y="158" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" class="main-text">Scan templates/ directory</text>
<!-- Dashed arrow -->
<line x1="1030" y1="180" x2="1030" y2="230" class="arrow-color" stroke-width="2.6" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Load packages with proper width -->
<rect x="880" y="230" width="300" height="60" fill="none" class="neon-orange" rx="6.5"/>
<text x="1030" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" class="main-text">Load .gbai packages</text>
<!-- Arrow -->
<line x1="1030" y1="290" x2="1030" y2="340" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Start Web Server -->
<rect x="880" y="340" width="300" height="60" fill="none" class="neon-green" rx="6.5"/>
<text x="1030" y="378" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Start Web Server</text>
</g>
<!-- PROGRESS INDICATOR (Bottom Section) -->
<g id="process-flow">
<!-- Large flow arrow at bottom -->
<defs>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Flow visualization bar -->
<rect x="120" y="500" width="1060" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage indicators -->
<circle cx="120" cy="540" r="8" class="neon-blue" fill="none"/>
<circle cx="340" cy="540" r="8" class="neon-orange" fill="none"/>
<circle cx="620" cy="540" r="8" class="neon-purple" fill="none"/>
<circle cx="1030" cy="540" r="8" class="neon-green" fill="none"/>
<!-- Connecting lines -->
<line x1="128" y1="540" x2="332" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="348" y1="540" x2="612" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="628" y1="540" x2="1022" y2="540" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="120" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Start</text>
<text x="340" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Detect</text>
<text x="620" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Install &amp; Configure</text>
<text x="1030" y="610" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Deploy</text>
</g>
<!-- Description text (well-spaced at bottom) -->
<text x="700" y="720" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
Automatic bootstrap process: detect OS, install components, configure, and deploy
</text>
<text x="700" y="755" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
Zero configuration required - everything runs from a single binary
</text>
<!-- Optional: Add subtle grid/connection lines in background -->
<g opacity="0.05" class="arrow-color">
<line x1="120" y1="170" x2="120" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="340" y1="170" x2="340" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="620" y1="240" x2="620" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
<line x1="1030" y1="400" x2="1030" y2="500" stroke-width="1" stroke-dasharray="2,4"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.3 KiB

103
docs/src/assets/chapter-01/session-manager.svg
View file

@ -1,103 +0,0 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
<marker id="arrow-double" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L5,3 z" fill="#999"/>
<path d="M5,0 L5,6 L10,3 z" fill="#999"/>
</marker>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Session Manager Architecture</text>
<!-- User Input -->
<rect x="50" y="60" width="150" height="50" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="125" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1E40AF">User Input</text>
<!-- Bot Response -->
<rect x="600" y="60" width="150" height="50" fill="none" stroke="#68D391" stroke-width="2" rx="8"/>
<text x="675" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#10B981">Bot Response</text>
<!-- Arrows down from User Input and up to Bot Response -->
<line x1="125" y1="110" x2="125" y2="150" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="675" y1="150" x2="675" y2="110" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- WebSocket/HTTP boxes -->
<rect x="50" y="150" width="150" height="60" fill="none" stroke="#F6AD55" stroke-width="2" rx="6"/>
<text x="125" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">WebSocket</text>
<text x="125" y="195" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#FED7AA">/HTTP</text>
<rect x="600" y="150" width="150" height="60" fill="none" stroke="#F6AD55" stroke-width="2" rx="6"/>
<text x="675" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">WebSocket</text>
<text x="675" y="195" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#FED7AA">/HTTP</text>
<!-- Arrows to/from Session Manager -->
<line x1="125" y1="210" x2="125" y2="250" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="675" y1="250" x2="675" y2="210" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Session Manager Box -->
<rect x="100" y="250" width="600" height="130" fill="none" stroke="#B794F4" stroke-width="3" rx="10"/>
<text x="400" y="280" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#9333EA">Session Manager</text>
<!-- Session Manager Steps -->
<g font-family="Arial, sans-serif" font-size="18" fill="#7C3AED">
<text x="150" y="310">1. Validate Token</text>
<text x="150" y="330">2. Load Session</text>
<text x="150" y="350">3. Update State</text>
<text x="450" y="310">4. Execute BASIC</text>
<text x="450" y="330">5. Generate Response</text>
<text x="450" y="350">6. Save History</text>
</g>
<!-- Arrows down to databases -->
<line x1="250" y1="380" x2="250" y2="420" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="550" y1="380" x2="550" y2="420" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Database boxes -->
<rect x="150" y="420" width="200" height="80" fill="none" stroke="#E53E3E" stroke-width="2" rx="8"/>
<text x="250" y="450" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EF4444">Valkey</text>
<text x="250" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#DC2626">(Cache)</text>
<rect x="450" y="420" width="200" height="80" fill="none" stroke="#4A90E2" stroke-width="2" rx="8"/>
<text x="550" y="450" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2563EB">PostgreSQL</text>
<text x="550" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1E40AF">(Persist)</text>
<!-- Sync arrow between databases -->
<path d="M 350 460 L 450 460" stroke="#888" stroke-width="2" marker-end="url(#arrow-double)" stroke-dasharray="5,5" opacity="0.7"/>
<text x="400" y="455" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Sync Every</text>
<text x="400" y="475" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Message</text>
<!-- Process Flow Numbers -->
<g font-family="Arial, sans-serif" font-size="16" fill="#374151">
<circle cx="125" cy="130" r="12" fill="none" stroke="#718096" stroke-width="1"/>
<text x="125" y="134" text-anchor="middle">1</text>
<circle cx="125" cy="230" r="12" fill="none" stroke="#718096" stroke-width="1"/>
<text x="125" y="234" text-anchor="middle">2</text>
<circle cx="400" cy="315" r="12" fill="none" stroke="#718096" stroke-width="1"/>
<text x="400" y="319" text-anchor="middle">3</text>
<circle cx="675" cy="230" r="12" fill="none" stroke="#718096" stroke-width="1"/>
<text x="675" y="234" text-anchor="middle">4</text>
<circle cx="675" cy="130" r="12" fill="none" stroke="#718096" stroke-width="1"/>
<text x="675" y="134" text-anchor="middle">5</text>
</g>
<!-- Features box -->
<g id="features" transform="translate(50, 520)">
<rect x="0" y="0" width="700" height="60" fill="none" stroke="#4A5568" stroke-width="1" rx="5" stroke-dasharray="2,2" opacity="0.5"/>
<text x="350" y="20" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1F2937">Key Features</text>
<g font-family="Arial, sans-serif" font-size="16" fill="#374151">
<text x="50" y="45">• Real-time WebSocket support</text>
<text x="250" y="45">• Automatic session persistence</text>
<text x="450" y="45">• Redis-compatible caching</text>
<text x="600" y="45">• ACID compliance</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.1 KiB

79
docs/src/assets/chapter-01/session-states.svg
View file

@ -1,79 +0,0 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
</defs>
<!-- Title -->
<text x="300" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Session State Flow</text>
<!-- Browser Opens -->
<rect x="200" y="60" width="200" height="50" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="300" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1E40AF">Browser</text>
<text x="300" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1F2937">Opens</text>
<!-- Arrow down -->
<line x1="300" y1="110" x2="300" y2="150" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- CREATE State -->
<rect x="200" y="150" width="200" height="80" fill="none" stroke="#48BB78" stroke-width="2" rx="8"/>
<text x="300" y="175" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#059669">CREATE</text>
<text x="300" y="195" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#10B981">New UUID</text>
<text x="300" y="210" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#10B981">Token Gen</text>
<!-- Arrow down -->
<line x1="300" y1="230" x2="300" y2="270" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- ACTIVE State -->
<rect x="200" y="270" width="200" height="80" fill="none" stroke="#4299E1" stroke-width="2" rx="8"/>
<text x="300" y="295" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2563EB">ACTIVE</text>
<text x="300" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1E40AF">Chatting</text>
<text x="300" y="330" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1E40AF">Messages</text>
<!-- Arrow down -->
<line x1="300" y1="350" x2="300" y2="390" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- IDLE State -->
<rect x="200" y="390" width="200" height="80" fill="none" stroke="#F6AD55" stroke-width="2" rx="8"/>
<text x="300" y="415" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">IDLE</text>
<text x="300" y="435" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#FED7AA">No Input</text>
<text x="300" y="450" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#FED7AA">30min Timer</text>
<!-- User Returns Loop -->
<path d="M 400 430 Q 480 360 480 310 Q 480 260 400 310"
stroke="#888" stroke-width="2" fill="none" marker-end="url(#arrow)" stroke-dasharray="5,5" opacity="0.7"/>
<text x="490" y="360" font-family="Arial, sans-serif" font-size="16" fill="#374151">User Returns</text>
<!-- Arrow down -->
<line x1="300" y1="470" x2="300" y2="510" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- EXPIRE State -->
<rect x="200" y="510" width="200" height="80" fill="none" stroke="#FC8181" stroke-width="2" rx="8"/>
<text x="300" y="535" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EF4444">EXPIRE</text>
<text x="300" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#DC2626">7d Anon</text>
<text x="300" y="570" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#DC2626">Never Auth</text>
<!-- Retry Loop -->
<path d="M 200 550 Q 120 400 120 200 Q 120 150 200 190"
stroke="#888" stroke-width="2" fill="none" marker-end="url(#arrow)" stroke-dasharray="5,5" opacity="0.7"/>
<text x="90" y="360" font-family="Arial, sans-serif" font-size="16" fill="#374151">Retry</text>
<!-- Arrow down -->
<line x1="300" y1="590" x2="300" y2="630" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- CLEANUP State -->
<rect x="200" y="630" width="200" height="80" fill="none" stroke="#718096" stroke-width="2" rx="8"/>
<text x="300" y="655" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#374151">CLEANUP</text>
<text x="300" y="675" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1F2937">Archive</text>
<text x="300" y="690" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1F2937">Delete</text>
<!-- State Duration Labels -->
<g id="durations" font-family="Arial, sans-serif" font-size="16" fill="#374151">
<text x="420" y="195" text-anchor="start">Instant</text>
<text x="420" y="315" text-anchor="start">Active use</text>
<text x="420" y="435" text-anchor="start">30 minutes</text>
<text x="420" y="555" text-anchor="start">7 days / Never</text>
<text x="420" y="675" text-anchor="start">Permanent</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 5 KiB

105
docs/src/assets/chapter-01/tool-execution-flow.svg
View file

@ -1,105 +0,0 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
</defs>
<!-- Title -->
<text x="350" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Tool Execution Flow</text>
<!-- User Input -->
<rect x="200" y="60" width="300" height="50" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="350" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#1E40AF">User: "I want to enroll in</text>
<text x="350" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#1E40AF">Computer Science"</text>
<!-- Arrow down -->
<line x1="350" y1="110" x2="350" y2="140" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- LLM Analyzes -->
<rect x="225" y="140" width="250" height="80" fill="none" stroke="#B794F4" stroke-width="2" rx="8"/>
<text x="350" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#9333EA">LLM Analyzes</text>
<text x="350" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#7C3AED">"enrollment need"</text>
<text x="350" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Intent detection</text>
<!-- Arrow down -->
<line x1="350" y1="220" x2="350" y2="250" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Scan Available Tools -->
<rect x="175" y="250" width="350" height="100" fill="none" stroke="#F6AD55" stroke-width="2" rx="8"/>
<text x="350" y="275" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">Scan Available Tools</text>
<g font-family="monospace" font-size="18">
<text x="220" y="305" fill="#059669">• enrollment.bas ✓</text>
<text x="220" y="325" fill="#374151">• other-tools.bas</text>
</g>
<!-- Arrow down -->
<line x1="350" y1="350" x2="350" y2="380" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Collect Parameters -->
<rect x="175" y="380" width="350" height="120" fill="none" stroke="#4FD1C5" stroke-width="2" rx="8"/>
<text x="350" y="405" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#0891B2">Collect Parameters</text>
<g font-family="Arial, sans-serif" font-size="18" fill="#0E7490">
<text x="220" y="435">• name: (ask user)</text>
<text x="220" y="455">• email: (ask user)</text>
<text x="220" y="475">• course: "Comp Sci"</text>
</g>
<!-- Arrow down -->
<line x1="350" y1="500" x2="350" y2="530" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Execute enrollment.bas -->
<rect x="175" y="530" width="350" height="100" fill="none" stroke="#48BB78" stroke-width="2" rx="8"/>
<text x="350" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#059669">Execute enrollment.bas</text>
<g font-family="Arial, sans-serif" font-size="18" fill="#10B981">
<text x="220" y="585">• Save to CSV</text>
<text x="220" y="605">• Return confirmation</text>
</g>
<!-- Arrow down -->
<line x1="350" y1="630" x2="350" y2="660" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Bot Response -->
<rect x="175" y="660" width="350" height="60" fill="none" stroke="#68D391" stroke-width="2" rx="8"/>
<text x="350" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="#10B981">"Welcome to Computer Science!"</text>
<text x="350" y="705" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Confirmation sent to user</text>
<!-- Side annotations -->
<g font-family="Arial, sans-serif" font-size="16" fill="#374151">
<!-- Time indicators -->
<text x="50" y="180" text-anchor="end">~100ms</text>
<text x="50" y="300" text-anchor="end">~50ms</text>
<text x="50" y="440" text-anchor="end">Interactive</text>
<text x="50" y="580" text-anchor="end">~200ms</text>
<text x="50" y="690" text-anchor="end">Instant</text>
<!-- Process descriptions -->
<text x="550" y="180">Natural language</text>
<text x="550" y="200">understanding</text>
<text x="550" y="300">Tool discovery</text>
<text x="550" y="320">and matching</text>
<text x="550" y="440">Smart parameter</text>
<text x="550" y="460">extraction</text>
<text x="550" y="580">BASIC script</text>
<text x="550" y="600">execution</text>
</g>
<!-- Tool example box -->
<g id="tool-example" transform="translate(50, 740)">
<rect x="0" y="0" width="600" height="120" fill="none" stroke="#4A5568" stroke-width="1" rx="5" stroke-dasharray="2,2" opacity="0.5"/>
<text x="300" y="20" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1F2937">enrollment.bas</text>
<g font-family="monospace" font-size="16" fill="#374151">
<text x="20" y="45">' Student enrollment tool</text>
<text x="20" y="65">PARAM name, email, course</text>
<text x="20" y="85">SAVE "enrollments.csv", name, email, course, NOW()</text>
<text x="20" y="105">TALK "Welcome to " + course + ", " + name + "!"</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 5.4 KiB

132
docs/src/assets/chapter-02/package-structure.svg
View file

@ -1,132 +0,0 @@
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Package Structure</text>
<!-- Root Package -->
<rect x="300" y="60" width="200" height="50" fill="none" stroke="#4299E1" stroke-width="2" rx="8"/>
<text x="400" y="85" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#2563EB">my-bot.gbai/</text>
<text x="400" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1E40AF">(Package Root)</text>
<!-- Connection Lines from Root -->
<g stroke="#888" stroke-width="1" fill="none">
<line x1="400" y1="110" x2="400" y2="140"/>
<!-- Horizontal spread -->
<line x1="400" y1="140" x2="150" y2="140"/>
<line x1="400" y1="140" x2="650" y2="140"/>
<!-- Vertical lines to components -->
<line x1="150" y1="140" x2="150" y2="180"/>
<line x1="280" y1="140" x2="280" y2="180"/>
<line x1="400" y1="140" x2="400" y2="180"/>
<line x1="520" y1="140" x2="520" y2="180"/>
<line x1="650" y1="140" x2="650" y2="180"/>
</g>
<!-- Component Folders -->
<g id="folders">
<!-- .gbdialog -->
<rect x="70" y="180" width="160" height="80" fill="none" stroke="#F6AD55" stroke-width="2" rx="6"/>
<text x="150" y="205" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#EA580C">.gbdialog</text>
<text x="150" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#FED7AA">Dialog Scripts</text>
<text x="150" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Conversation Logic</text>
<!-- .gbkb -->
<rect x="200" y="180" width="160" height="80" fill="none" stroke="#4FD1C5" stroke-width="2" rx="6"/>
<text x="280" y="205" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#0891B2">.gbkb</text>
<text x="280" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#0E7490">Knowledge Base</text>
<text x="280" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Documents</text>
<!-- .gbot -->
<rect x="320" y="180" width="160" height="80" fill="none" stroke="#B794F4" stroke-width="2" rx="6"/>
<text x="400" y="205" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#9333EA">.gbot</text>
<text x="400" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Configuration</text>
<text x="400" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">Bot Settings</text>
<!-- .gbtheme -->
<rect x="440" y="180" width="160" height="80" fill="none" stroke="#FC8181" stroke-width="2" rx="6"/>
<text x="520" y="205" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#EF4444">.gbtheme</text>
<text x="520" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#DC2626">(optional)</text>
<text x="520" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">UI Theme</text>
<!-- .gbdrive -->
<rect x="570" y="180" width="160" height="80" fill="none" stroke="#68D391" stroke-width="2" rx="6"/>
<text x="650" y="205" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#059669">.gbdrive</text>
<text x="650" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#10B981">(optional)</text>
<text x="650" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">File Storage</text>
</g>
<!-- Connection lines to file types -->
<g stroke="#888" stroke-width="1" fill="none" opacity="0.6">
<line x1="150" y1="260" x2="150" y2="300"/>
<line x1="280" y1="260" x2="280" y2="300"/>
<line x1="400" y1="260" x2="400" y2="300"/>
<line x1="520" y1="260" x2="520" y2="300"/>
<line x1="650" y1="260" x2="650" y2="300"/>
</g>
<!-- File Types -->
<g id="file-types">
<!-- Scripts -->
<rect x="80" y="300" width="140" height="60" fill="none" stroke="#F6AD55" stroke-width="1" rx="4" stroke-dasharray="3,3" opacity="0.7"/>
<text x="150" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#EA580C">Scripts</text>
<text x="150" y="345" text-anchor="middle" font-family="monospace" font-size="16" fill="#374151">.bas files</text>
<!-- Documents -->
<rect x="210" y="300" width="140" height="60" fill="none" stroke="#4FD1C5" stroke-width="1" rx="4" stroke-dasharray="3,3" opacity="0.7"/>
<text x="280" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#0891B2">Docs</text>
<text x="280" y="345" text-anchor="middle" font-family="monospace" font-size="16" fill="#374151">PDF/TXT</text>
<!-- Config -->
<rect x="330" y="300" width="140" height="60" fill="none" stroke="#B794F4" stroke-width="1" rx="4" stroke-dasharray="3,3" opacity="0.7"/>
<text x="400" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#9333EA">Config</text>
<text x="400" y="345" text-anchor="middle" font-family="monospace" font-size="16" fill="#374151">.csv</text>
<!-- Styles -->
<rect x="450" y="300" width="140" height="60" fill="none" stroke="#FC8181" stroke-width="1" rx="4" stroke-dasharray="3,3" opacity="0.7"/>
<text x="520" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#EF4444">Styles</text>
<text x="520" y="345" text-anchor="middle" font-family="monospace" font-size="16" fill="#374151">CSS/HTML</text>
<!-- Storage -->
<rect x="580" y="300" width="140" height="60" fill="none" stroke="#68D391" stroke-width="1" rx="4" stroke-dasharray="3,3" opacity="0.7"/>
<text x="650" y="325" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#059669">Storage</text>
<text x="650" y="345" text-anchor="middle" font-family="monospace" font-size="16" fill="#374151">S3 Link</text>
</g>
<!-- Example Structure -->
<g id="example" transform="translate(100, 400)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">Example Directory Structure:</text>
<g font-family="monospace" font-size="18" fill="#374151">
<text x="0" y="30">botname.gbai/</text>
<text x="20" y="50">├── botname.gbdialog/</text>
<text x="40" y="70">│ ├── start.bas</text>
<text x="40" y="90">│ ├── auth.bas</text>
<text x="40" y="110">│ └── tools/</text>
<text x="20" y="130">├── botname.gbkb/</text>
<text x="40" y="150">│ ├── collection1/</text>
<text x="40" y="170">│ └── collection2/</text>
<text x="20" y="190">├── botname.gbot/</text>
<text x="40" y="210">│ └── config.csv</text>
<text x="20" y="230">└── botname.gbtheme/</text>
<text x="40" y="250"> └── default.css</text>
</g>
</g>
<!-- Notes -->
<g id="notes" transform="translate(450, 430)">
<rect x="0" y="0" width="300" height="120" fill="none" stroke="#4A5568" stroke-width="1" rx="5" stroke-dasharray="2,2" opacity="0.5"/>
<text x="150" y="20" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1F2937">Key Points</text>
<g font-family="Arial, sans-serif" font-size="16" fill="#374151">
<text x="10" y="45">• Folder name = Bot name</text>
<text x="10" y="65">• Only .gbdialog is required</text>
<text x="10" y="85">• start.bas is the entry point</text>
<text x="10" y="105">• Deploy by copying folder</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.1 KiB

83
docs/src/assets/chapter-02/template-deployment-flow.svg
View file

@ -1,83 +0,0 @@
<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#4B5563"/>
</marker>
</defs>
<!-- Title -->
<text x="300" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#1F2937">Template Deployment Flow</text>
<!-- Templates folder -->
<rect x="225" y="60" width="150" height="50" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="300" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1E40AF">templates/</text>
<text x="300" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Source folder</text>
<!-- Arrow down -->
<line x1="300" y1="110" x2="300" y2="140" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- SCAN -->
<rect x="200" y="140" width="200" height="70" fill="none" stroke="#F6AD55" stroke-width="2" rx="8"/>
<text x="300" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EA580C">SCAN</text>
<text x="300" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#FED7AA">Find all .gbai folders</text>
<!-- Arrow down -->
<line x1="300" y1="210" x2="300" y2="240" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- VALIDATE -->
<rect x="200" y="240" width="200" height="90" fill="none" stroke="#B794F4" stroke-width="2" rx="8"/>
<text x="300" y="265" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#9333EA">VALIDATE</text>
<text x="300" y="285" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Check required structure</text>
<text x="300" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• start.bas exists?</text>
<text x="300" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Folders match name?</text>
<!-- Arrow down -->
<line x1="300" y1="330" x2="300" y2="360" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- UPLOAD -->
<rect x="200" y="360" width="200" height="90" fill="none" stroke="#48BB78" stroke-width="2" rx="8"/>
<text x="300" y="385" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#059669">UPLOAD</text>
<text x="300" y="405" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#10B981">Copy to object storage</text>
<text x="300" y="420" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Templates → S3/Drive</text>
<text x="300" y="435" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Assets → CDN paths</text>
<!-- Arrow down -->
<line x1="300" y1="450" x2="300" y2="480" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- INDEX -->
<rect x="200" y="480" width="200" height="90" fill="none" stroke="#4FD1C5" stroke-width="2" rx="8"/>
<text x="300" y="505" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#0891B2">INDEX</text>
<text x="300" y="525" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#0E7490">Process knowledge base</text>
<text x="300" y="540" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Extract text</text>
<text x="300" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Generate embeddings</text>
<text x="300" y="570" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Store in Qdrant</text>
<!-- Arrow down -->
<line x1="300" y1="580" x2="300" y2="610" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- REGISTER -->
<rect x="200" y="610" width="200" height="90" fill="none" stroke="#FBBF24" stroke-width="2" rx="8"/>
<text x="300" y="635" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#FCD34D">REGISTER</text>
<text x="300" y="655" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#FDE68A">Create in database</text>
<text x="300" y="670" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Bot record</text>
<text x="300" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Configuration</text>
<text x="300" y="700" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• URL mapping</text>
<!-- Arrow down -->
<line x1="300" y1="710" x2="300" y2="740" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<!-- ACTIVATE -->
<rect x="200" y="740" width="200" height="90" fill="none" stroke="#FC8181" stroke-width="2" rx="8"/>
<text x="300" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#EF4444">ACTIVATE</text>
<text x="300" y="785" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#DC2626">Start serving</text>
<text x="300" y="800" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• /bot-name endpoint</text>
<text x="300" y="815" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• WebSocket ready</text>
<text x="300" y="830" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">• Sessions enabled</text>
<!-- Process time indicator -->
<g id="time-indicator" transform="translate(450, 450)">
<circle cx="0" cy="0" r="40" fill="none" stroke="#4A5568" stroke-width="1" opacity="0.5"/>
<text x="0" y="0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#1F2937">5-10s</text>
<text x="0" y="15" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#374151">per bot</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.1 KiB

173
docs/src/assets/chapter-03/caching-architecture.svg
View file

@ -1,173 +0,0 @@
<svg width="750" height="400" viewBox="0 0 750 400" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Beautiful gradients with vibrant colors -->
<linearGradient id="userQueryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="keyGenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="valkeyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#ee5a24;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="embedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="semanticGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="generateGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#fa709a;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#fee140;stop-opacity:0.4" />
</linearGradient>
<linearGradient id="storeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#30cfd0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#330867;stop-opacity:0.4" />
</linearGradient>
<!-- Hit path gradient -->
<linearGradient id="hitPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#34d399;stop-opacity:0.4" />
</linearGradient>
<!-- Miss path gradient -->
<linearGradient id="missPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#fbbf24;stop-opacity:0.4" />
</linearGradient>
<!-- Improved arrow marker with color -->
<marker id="arrowCache" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.8"/>
</marker>
<marker id="arrowHit" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#10b981" opacity="0.9"/>
</marker>
<marker id="arrowMiss" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#f59e0b" opacity="0.9"/>
</marker>
<!-- Drop shadow effect -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="3" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Glow effect for decision diamond -->
<filter id="glowEffect" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="750" height="400" fill="#fafafa"/>
<!-- Title with better padding -->
<rect x="200" y="10" width="350" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
<text x="375" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
Semantic Caching Architecture
</text>
<!-- User Query -->
<rect x="50" y="70" width="130" height="45" fill="url(#userQueryGrad)" stroke="#667eea" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="115" y="95" text-anchor="middle" font-family="system-ui" sans-serif" font-size="20" font-weight="600" fill="#1e293b">User Query</text>
<text x="115" y="108" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">"What's the policy?"</text>
<!-- Arrow to Generate Key -->
<path d="M 180 92 L 220 92" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Generate Key -->
<rect x="220" y="70" width="130" height="45" fill="url(#keyGenGrad)" stroke="#f5576c" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="285" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Generate Key</text>
<text x="285" y="108" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Hash + Embed</text>
<!-- Arrow to Check Valkey -->
<path d="M 350 92 L 390 92" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Check Valkey -->
<rect x="390" y="70" width="130" height="45" fill="url(#valkeyGrad)" stroke="#ee5a24" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="455" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Check Valkey</text>
<text x="455" y="108" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Memory Store</text>
<!-- Arrow to Decision -->
<path d="M 520 92 L 560 92" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Hit/Miss Decision Diamond with glow -->
<g filter="url(#glowEffect)">
<path d="M 610 70 L 650 92 L 610 114 L 570 92 Z" fill="rgba(139, 92, 246, 0.2)" stroke="#8b5cf6" stroke-width="2.5"/>
<text x="610" y="97" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">Hit?</text>
</g>
<!-- Arrow down from Generate Key to Embedding -->
<path d="M 285 115 L 285 160" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Embedding Hash -->
<rect x="210" y="160" width="150" height="45" fill="url(#embedGrad)" stroke="#00f2fe" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="285" y="185" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Embedding Hash</text>
<text x="285" y="198" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">384D Vector</text>
<!-- Arrow down from Embedding Hash -->
<path d="M 285 205 L 285 250" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Semantic Search -->
<rect x="210" y="250" width="150" height="45" fill="url(#semanticGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="285" y="275" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Semantic Search</text>
<text x="285" y="288" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Similarity > 0.95</text>
<!-- Cache Hit path (success) -->
<path d="M 610 70 L 610 40 L 455 40" stroke="url(#hitPathGrad)" stroke-width="3" fill="none" opacity="0.8" stroke-linecap="round"/>
<rect x="330" y="25" width="125" height="30" fill="rgba(16, 185, 129, 0.1)" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4,2" rx="6"/>
<text x="392" y="44" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#047857">✓ Cache Hit</text>
<!-- Miss path -->
<path d="M 610 114 L 610 160" stroke="url(#missPathGrad)" stroke-width="3" fill="none" marker-end="url(#arrowMiss)" opacity="0.8" stroke-linecap="round"/>
<text x="630" y="140" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#d97706">Miss</text>
<!-- Generate New Response -->
<rect x="530" y="160" width="150" height="45" fill="url(#generateGrad)" stroke="#fa709a" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="605" y="185" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Generate New</text>
<text x="605" y="198" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">LLM Response</text>
<!-- Arrow down from Generate New -->
<path d="M 605 205 L 605 250" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrowCache)" opacity="0.7"/>
<!-- Store in Valkey -->
<rect x="510" y="250" width="190" height="45" fill="url(#storeGrad)" stroke="#330867" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="605" y="270" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">Store in Valkey</text>
<text x="605" y="285" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">TTL: 3600s</text>
<!-- Performance Metrics Box -->
<rect x="50" y="320" width="650" height="60" fill="rgba(99, 102, 241, 0.05)" stroke="#8b5cf6" stroke-width="1" stroke-dasharray="6,3" rx="8"/>
<text x="375" y="343" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Performance Metrics
</text>
<text x="200" y="365" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Hit Rate: ~85%</text>
<text x="375" y="365" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Latency: &lt;50ms</text>
<text x="550" y="365" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Cost Reduction: 95%</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

205
docs/src/assets/chapter-03/context-window.svg
View file

@ -1,205 +0,0 @@
<svg width="900" height="450" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradient for original documents -->
<linearGradient id="origGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#1e40af;stop-opacity:0.2" />
</linearGradient>
<!-- Gradient for vector DB -->
<linearGradient id="vectorGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:0.2" />
</linearGradient>
<!-- Gradient for multiplication factor -->
<linearGradient id="multiGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.2" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrowhead2" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<polygon points="0 0, 10 5, 0 10" fill="#4a5568"/>
</marker>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="900" height="450" fill="#fafafa"/>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
Vector Database Storage Requirements: The Real Mathematics
</text>
<!-- Original Documents Section -->
<rect x="50" y="60" width="180" height="380" fill="url(#origGrad)" stroke="#3b82f6" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="140" y="85" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Original Documents
</text>
<text x="140" y="105" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#475569">
1 TB Total
</text>
<!-- File type breakdown -->
<rect x="70" y="120" width="140" height="30" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="140" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#1e293b">
PDF: 400 GB
</text>
<rect x="70" y="155" width="140" height="25" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="172" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#1e293b">
DOCX: 250 GB
</text>
<rect x="70" y="185" width="140" height="20" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="200" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#1e293b">
XLSX: 150 GB
</text>
<rect x="70" y="210" width="140" height="15" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="223" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#1e293b">
TXT: 100 GB
</text>
<rect x="70" y="230" width="140" height="15" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="243" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#1e293b">
HTML: 50 GB
</text>
<rect x="70" y="250" width="140" height="10" fill="rgba(59, 130, 246, 0.05)" stroke="#93c5fd" stroke-width="1"/>
<text x="140" y="258" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Other: 50 GB
</text>
<!-- Arrow -->
<path d="M 240 250 L 290 250" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead2)" opacity="0.7"/>
<text x="265" y="240" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Processing
</text>
<!-- Vector Database Storage -->
<rect x="300" y="60" width="250" height="380" fill="url(#vectorGrad)" stroke="#10b981" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="425" y="85" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Vector DB Storage
</text>
<text x="425" y="105" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#475569">
~3.5 TB Required
</text>
<!-- Storage breakdown -->
<rect x="320" y="120" width="210" height="50" fill="rgba(16, 185, 129, 0.05)" stroke="#86efac" stroke-width="1" stroke-dasharray="3,2"/>
<text x="425" y="135" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#1e293b">
Raw Text Extracted
</text>
<text x="425" y="150" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
~800 GB (cleaned)
</text>
<text x="425" y="163" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Deduplication reduces 20%
</text>
<rect x="320" y="175" width="210" height="60" fill="rgba(16, 185, 129, 0.05)" stroke="#86efac" stroke-width="1" stroke-dasharray="3,2"/>
<text x="425" y="190" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#1e293b">
Vector Embeddings
</text>
<text x="425" y="205" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
~1.2 TB (384-dim floats)
</text>
<text x="425" y="218" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
4 bytes × 384 × ~800M chunks
</text>
<text x="425" y="230" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
= 1,228 GB
</text>
<rect x="320" y="240" width="210" height="55" fill="rgba(16, 185, 129, 0.05)" stroke="#86efac" stroke-width="1" stroke-dasharray="3,2"/>
<text x="425" y="255" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#1e293b">
HNSW Index
</text>
<text x="425" y="270" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
~600 GB
</text>
<text x="425" y="283" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Graph structure + links
</text>
<rect x="320" y="300" width="210" height="50" fill="rgba(16, 185, 129, 0.05)" stroke="#86efac" stroke-width="1" stroke-dasharray="3,2"/>
<text x="425" y="315" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#1e293b">
Metadata + Positions
</text>
<text x="425" y="330" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
~400 GB
</text>
<text x="425" y="343" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Doc refs, chunks, offsets
</text>
<rect x="320" y="355" width="210" height="45" fill="rgba(16, 185, 129, 0.05)" stroke="#86efac" stroke-width="1" stroke-dasharray="3,2"/>
<text x="425" y="370" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#1e293b">
Cache + Auxiliary
</text>
<text x="425" y="385" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
~500 GB
</text>
<text x="425" y="395" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Query cache, temp indices
</text>
<!-- Total comparison -->
<rect x="570" y="150" width="300" height="200" fill="url(#multiGrad)" stroke="#f59e0b" stroke-width="2" stroke-dasharray="5,3" rx="8" filter="url(#shadow)"/>
<text x="720" y="175" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Storage Multiplication Factor
</text>
<text x="590" y="205" font-family="system-ui, sans-serif" font-size="18" fill="#1e293b">
Original Documents: 1.0 TB
</text>
<text x="590" y="230" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Vector DB Total: 3.5 TB
</text>
<text x="590" y="255" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#dc2626">
Multiplication Factor: 3.5×
</text>
<text x="590" y="285" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
With redundancy/backup:
</text>
<text x="590" y="305" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Production Total: 7.0 TB (2× replica)
</text>
<text x="720" y="335" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-style="italic" fill="#64748b">
Reality: You need 3.5-7× your document storage
</text>
<!-- Visual indicators -->
<g transform="translate(820, 80)">
<circle cx="0" cy="0" r="3" fill="#3b82f6"/>
<text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">Input</text>
</g>
<g transform="translate(820, 100)">
<circle cx="0" cy="0" r="3" fill="#10b981"/>
<text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">Storage</text>
</g>
<g transform="translate(820, 120)">
<circle cx="0" cy="0" r="3" fill="#f59e0b"/>
<text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">Factor</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.6 KiB

150
docs/src/assets/chapter-03/kb-architecture-pipeline.svg
View file

@ -1,150 +0,0 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and filters -->
<defs>
<!-- Gradient for input layer -->
<linearGradient id="inputGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
</linearGradient>
<!-- Gradient for processing layers -->
<linearGradient id="processGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06ffa5;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00d2ff;stop-opacity:0.3" />
</linearGradient>
<!-- Gradient for embedding layer -->
<linearGradient id="embedGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.3" />
</linearGradient>
<!-- Gradient for index layer -->
<linearGradient id="indexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#fa709a;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#fee140;stop-opacity:0.3" />
</linearGradient>
<!-- Gradient for retrieval layer -->
<linearGradient id="retrievalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#30cfd0;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#330867;stop-opacity:0.3" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrowhead" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.8"/>
</marker>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="800" height="600" fill="#ffffff"/>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="26" font-weight="600" fill="#1a202c">
Knowledge Base Architecture Pipeline
</text>
<!-- Document Ingestion Layer -->
<rect x="100" y="60" width="600" height="60" fill="url(#inputGrad)" stroke="#667eea" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="85" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Document Ingestion Layer
</text>
<text x="400" y="105" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
PDF • Word • Excel • Text • HTML • Markdown
</text>
<!-- Arrow -->
<path d="M 400 120 L 400 140" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Preprocessing Pipeline -->
<rect x="100" y="140" width="600" height="60" fill="url(#processGrad)" stroke="#00d2ff" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="165" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Preprocessing Pipeline
</text>
<text x="400" y="185" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
Extraction • Cleaning • Normalization • Validation
</text>
<!-- Arrow -->
<path d="M 400 200 L 400 220" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Chunking Engine -->
<rect x="100" y="220" width="600" height="60" fill="url(#processGrad)" stroke="#06ffa5" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="245" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Intelligent Chunking Engine
</text>
<text x="400" y="265" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
Semantic Segmentation • Overlap Management • Metadata Preservation
</text>
<!-- Arrow -->
<path d="M 400 280 L 400 300" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Embedding Generation -->
<rect x="100" y="300" width="600" height="60" fill="url(#embedGrad)" stroke="#f5576c" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="325" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Embedding Generation
</text>
<text x="400" y="345" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
BGE Models • Transformer Architecture • Dimensionality: 384/768
</text>
<!-- Arrow -->
<path d="M 400 360 L 400 380" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Vector Index Layer -->
<rect x="100" y="380" width="600" height="60" fill="url(#indexGrad)" stroke="#fa709a" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="405" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Vector Index Layer
</text>
<text x="400" y="425" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
HNSW Algorithm • Quantization • Distributed Sharding
</text>
<!-- Arrow -->
<path d="M 400 440 L 400 460" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Retrieval Engine -->
<rect x="100" y="460" width="600" height="60" fill="url(#retrievalGrad)" stroke="#30cfd0" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="485" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#2d3748">
Semantic Retrieval Engine
</text>
<text x="400" y="505" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568">
Cosine Similarity • Hybrid Search • Re-ranking • Context Injection
</text>
<!-- Side labels -->
<g transform="translate(50, 290)">
<text x="0" y="0" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151" transform="rotate(-90)">
Data Flow Direction
</text>
</g>
<!-- Stage indicators on the right -->
<text x="730" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Raw Docs</text>
<text x="730" y="175" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Clean Text</text>
<text x="730" y="255" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Chunks</text>
<text x="730" y="335" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Vectors</text>
<text x="730" y="415" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Index</text>
<text x="730" y="495" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#374151">Results</text>
<!-- Performance metrics -->
<rect x="100" y="540" width="600" height="40" fill="#f7fafc" stroke="#cbd5e0" stroke-width="1" stroke-dasharray="5,5" rx="4"/>
<text x="400" y="565" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#4a5568" font-style="italic">
Pipeline processes ~1000 documents/minute • Query latency &lt;50ms (p99) • 95% semantic accuracy
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

165
docs/src/assets/chapter-03/search-pipeline.svg
View file

@ -1,165 +0,0 @@
<svg width="900" height="500" viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradient for query stage -->
<linearGradient id="queryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.35" />
</linearGradient>
<!-- Gradient for embedding stage -->
<linearGradient id="embedSearchGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.35" />
</linearGradient>
<!-- Gradient for search stage -->
<linearGradient id="searchGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.35" />
</linearGradient>
<!-- Gradient for ranking stage -->
<linearGradient id="rankGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.35" />
</linearGradient>
<!-- Gradient for result stage -->
<linearGradient id="resultGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#fa709a;stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#fee140;stop-opacity:0.35" />
</linearGradient>
<!-- Arrow marker -->
<marker id="searchArrow" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.7"/>
</marker>
<!-- Glow effect -->
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Drop shadow -->
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="3" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background with subtle gradient -->
<rect x="0" y="0" width="900" height="500" fill="url(#bgGrad)"/>
<defs>
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Title -->
<text x="450" y="35" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="28" font-weight="600" fill="#1a202c">
Semantic Search Pipeline
</text>
<!-- Main flow container -->
<g transform="translate(0, 70)">
<!-- Stage 1: User Query -->
<g transform="translate(50, 0)">
<rect x="0" y="0" width="160" height="80" fill="url(#queryGrad)" stroke="#667eea" stroke-width="2" rx="10" filter="url(#dropShadow)"/>
<text x="80" y="30" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">User Query</text>
<text x="80" y="50" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">"What's the return</text>
<text x="80" y="65" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">policy?"</text>
</g>
<!-- Arrow 1 -->
<path d="M 210 40 L 250 40" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6"/>
<!-- Stage 2: Query Embedding -->
<g transform="translate(250, 0)">
<rect x="0" y="0" width="160" height="80" fill="url(#embedSearchGrad)" stroke="#f5576c" stroke-width="2" rx="10" filter="url(#dropShadow)"/>
<text x="80" y="30" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">Embedding</text>
<text x="80" y="50" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">Transform to</text>
<text x="80" y="65" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">384D vector</text>
</g>
<!-- Arrow 2 -->
<path d="M 410 40 L 450 40" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6"/>
<!-- Stage 3: Vector Search -->
<g transform="translate(450, 0)">
<rect x="0" y="0" width="180" height="80" fill="url(#searchGrad)" stroke="#00f2fe" stroke-width="2" rx="10" filter="url(#dropShadow)"/>
<text x="90" y="30" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">Vector Search</text>
<text x="90" y="50" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">Cosine similarity</text>
<text x="90" y="65" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">in vector space</text>
</g>
<!-- Arrow 3 -->
<path d="M 630 40 L 670 40" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6"/>
<!-- Stage 4: Ranking -->
<g transform="translate(670, 0)">
<rect x="0" y="0" width="160" height="80" fill="url(#rankGrad)" stroke="#38f9d7" stroke-width="2" rx="10" filter="url(#dropShadow)"/>
<text x="80" y="30" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">Re-ranking</text>
<text x="80" y="50" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">Score &amp; sort</text>
<text x="80" y="65" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">by relevance</text>
</g>
<!-- Collections being searched (below main flow) -->
<g transform="translate(450, 140)">
<rect x="0" y="0" width="180" height="60" fill="rgba(79, 172, 254, 0.1)" stroke="#4facfe" stroke-width="1.5" stroke-dasharray="5,5" rx="8"/>
<text x="90" y="25" text-anchor="middle" font-family="system-ui" font-size="18" font-weight="500" fill="#2d3748">Active Collections</text>
<text x="90" y="45" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">policies • procedures • faq</text>
</g>
<!-- Arrow from Vector Search to Collections -->
<path d="M 540 80 L 540 140" stroke="#4facfe" stroke-width="2" stroke-dasharray="4,4" fill="none" marker-end="url(#searchArrow)" opacity="0.4"/>
<!-- Results -->
<g transform="translate(350, 250)">
<rect x="0" y="0" width="380" height="100" fill="url(#resultGrad)" stroke="#fa709a" stroke-width="2" rx="10" filter="url(#dropShadow)"/>
<text x="190" y="30" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">Retrieved Context</text>
<text x="60" y="55" text-anchor="start" font-family="system-ui" font-size="16" fill="#4a5568">1. "Refund policy: 30 days..." (0.92)</text>
<text x="60" y="75" text-anchor="start" font-family="system-ui" font-size="16" fill="#4a5568">2. "Return procedures..." (0.87)</text>
<text x="60" y="95" text-anchor="start" font-family="system-ui" font-size="16" fill="#4a5568">3. "Warranty information..." (0.81)</text>
</g>
<!-- Arrow to Results -->
<path d="M 750 80 L 750 120 L 540 120 L 540 250" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6"/>
<!-- LLM Integration -->
<g transform="translate(350, 370)">
<rect x="0" y="0" width="380" height="60" fill="rgba(102, 126, 234, 0.1)" stroke="#667eea" stroke-width="2" stroke-dasharray="8,4" rx="10"/>
<text x="190" y="25" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="#2d3748">Context Injection to LLM</text>
<text x="190" y="45" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568">Retrieved chunks provided as context for response generation</text>
</g>
<!-- Arrow to LLM -->
<path d="M 540 350 L 540 370" stroke="#667eea" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6"/>
</g>
<!-- Side annotations -->
<g transform="translate(40, 180)">
<text x="0" y="0" text-anchor="start" font-family="system-ui" font-size="16" fill="#374151" font-style="italic">Automatic</text>
<text x="0" y="15" text-anchor="start" font-family="system-ui" font-size="16" fill="#374151" font-style="italic">Process</text>
</g>
<!-- Performance metrics -->
<rect x="50" y="450" width="800" height="35" fill="rgba(203, 213, 224, 0.1)" stroke="#cbd5e0" stroke-width="1" stroke-dasharray="5,5" rx="6"/>
<text x="450" y="472" text-anchor="middle" font-family="system-ui" font-size="16" fill="#4a5568" font-style="italic">
Search latency: ~20ms • Embedding: BGE-small (384D) • Similarity threshold: 0.7 • Top-K: 5 chunks
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.9 KiB

235
docs/src/assets/chapter-03/storage-breakdown.svg
View file

@ -1,235 +0,0 @@
<svg width="900" height="500" viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradient for original context -->
<linearGradient id="origContextGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.2" />
<stop offset="50%" style="stop-color:#f59e0b;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#eab308;stop-opacity:0.2" />
</linearGradient>
<!-- Gradient for compressed context -->
<linearGradient id="compContextGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:0.3" />
</linearGradient>
<!-- Gradients for technique boxes -->
<linearGradient id="tech1Grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="tech2Grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="tech3Grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="tech4Grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.2" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrowhead3" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto">
<polygon points="0 0, 10 5, 0 10" fill="#4a5568"/>
</marker>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="900" height="500" fill="#fafafa"/>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
LLM Context Compression Strategies
</text>
<!-- Context Window Visualization -->
<g transform="translate(50, 60)">
<!-- Original context -->
<rect x="0" y="0" width="800" height="60" fill="url(#origContextGrad)" stroke="#dc2626" stroke-width="2" rx="6" filter="url(#shadow)"/>
<text x="10" y="20" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Original Context: 10,000 tokens
</text>
<rect x="10" y="30" width="780" height="20" fill="#fee2e2" rx="3"/>
<!-- Document chunks visualization -->
<rect x="10" y="30" width="100" height="20" fill="#fca5a5" rx="2"/>
<rect x="112" y="30" width="120" height="20" fill="#f87171" rx="2"/>
<rect x="234" y="30" width="90" height="20" fill="#fca5a5" rx="2"/>
<rect x="326" y="30" width="110" height="20" fill="#ef4444" rx="2"/>
<rect x="438" y="30" width="95" height="20" fill="#fca5a5" rx="2"/>
<rect x="535" y="30" width="105" height="20" fill="#f87171" rx="2"/>
<rect x="642" y="30" width="80" height="20" fill="#fca5a5" rx="2"/>
<rect x="724" y="30" width="66" height="20" fill="#ef4444" rx="2"/>
</g>
<!-- Arrow down -->
<path d="M 450 130 L 450 160" stroke="#4a5568" stroke-width="3" fill="none" marker-end="url(#arrowhead3)" opacity="0.7"/>
<text x="470" y="150" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#475569">
Compression Level 4
</text>
<!-- Compressed context -->
<g transform="translate(200, 170)">
<rect x="0" y="0" width="500" height="60" fill="url(#compContextGrad)" stroke="#10b981" stroke-width="2" rx="6" filter="url(#shadow)"/>
<text x="10" y="20" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Compressed Context: 4,096 tokens (fits LLM window)
</text>
<rect x="10" y="30" width="480" height="20" fill="#dcfce7" rx="3"/>
<!-- Compressed chunks -->
<rect x="10" y="30" width="80" height="20" fill="#86efac" rx="2"/>
<rect x="92" y="30" width="70" height="20" fill="#4ade80" rx="2"/>
<rect x="164" y="30" width="75" height="20" fill="#86efac" rx="2"/>
<rect x="241" y="30" width="85" height="20" fill="#22c55e" rx="2"/>
<rect x="328" y="30" width="90" height="20" fill="#4ade80" rx="2"/>
<rect x="420" y="30" width="70" height="20" fill="#86efac" rx="2"/>
</g>
<!-- Compression Techniques -->
<g transform="translate(50, 260)">
<text x="400" y="0" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#1e293b">
Compression Techniques (Level 4)
</text>
<!-- Technique 1: Semantic Deduplication -->
<g transform="translate(0, 30)">
<rect x="0" y="0" width="190" height="140" fill="url(#tech1Grad)" stroke="#8b5cf6" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="95" y="20" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Semantic Deduplication
</text>
<text x="10" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Remove redundant info
</text>
<text x="10" y="55" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Merge similar chunks
</text>
<text x="10" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Keep unique facts
</text>
<rect x="10" y="85" width="170" height="25" fill="rgba(139, 92, 246, 0.1)" rx="4"/>
<text x="95" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#7c3aed">
Reduction: 30-40%
</text>
<!-- Visual representation -->
<g transform="translate(95, 120)">
<circle cx="0" cy="0" r="8" fill="#8b5cf6" opacity="0.3"/>
<circle cx="-15" cy="0" r="8" fill="#8b5cf6" opacity="0.3"/>
<circle cx="15" cy="0" r="8" fill="#8b5cf6" opacity="0.3"/>
</g>
</g>
<!-- Technique 2: Relevance Scoring -->
<g transform="translate(205, 30)">
<rect x="0" y="0" width="190" height="140" fill="url(#tech2Grad)" stroke="#3b82f6" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="95" y="20" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Relevance Scoring
</text>
<text x="10" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Score by query match
</text>
<text x="10" y="55" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Keep top-k relevant
</text>
<text x="10" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Drop low scores
</text>
<rect x="10" y="85" width="170" height="25" fill="rgba(59, 130, 246, 0.1)" rx="4"/>
<text x="95" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#2563eb">
Reduction: 40-50%
</text>
<!-- Visual bars -->
<rect x="50" y="118" width="90" height="4" fill="#3b82f6" rx="2"/>
<rect x="50" y="124" width="70" height="4" fill="#60a5fa" rx="2"/>
<rect x="50" y="130" width="40" height="4" fill="#93c5fd" rx="2"/>
</g>
<!-- Technique 3: Hierarchical Summary -->
<g transform="translate(410, 30)">
<rect x="0" y="0" width="190" height="140" fill="url(#tech3Grad)" stroke="#06b6d4" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="95" y="20" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Hierarchical Summary
</text>
<text x="10" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Extract key points
</text>
<text x="10" y="55" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Create abstracts
</text>
<text x="10" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Preserve details
</text>
<rect x="10" y="85" width="170" height="25" fill="rgba(6, 182, 212, 0.1)" rx="4"/>
<text x="95" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#0891b2">
Reduction: 50-60%
</text>
<!-- Tree structure -->
<g transform="translate(95, 120)">
<circle cx="0" cy="-8" r="4" fill="#06b6d4"/>
<circle cx="-15" cy="8" r="3" fill="#67e8f9"/>
<circle cx="0" cy="8" r="3" fill="#67e8f9"/>
<circle cx="15" cy="8" r="3" fill="#67e8f9"/>
<line x1="0" y1="-4" x2="-15" y2="5" stroke="#06b6d4" stroke-width="1"/>
<line x1="0" y1="-4" x2="0" y2="5" stroke="#06b6d4" stroke-width="1"/>
<line x1="0" y1="-4" x2="15" y2="5" stroke="#06b6d4" stroke-width="1"/>
</g>
</g>
<!-- Technique 4: Token Optimization -->
<g transform="translate(615, 30)">
<rect x="0" y="0" width="185" height="140" fill="url(#tech4Grad)" stroke="#f59e0b" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="92" y="20" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">
Token Optimization
</text>
<text x="10" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Remove stopwords
</text>
<text x="10" y="55" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Compress phrases
</text>
<text x="10" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Use abbreviations
</text>
<rect x="10" y="85" width="165" height="25" fill="rgba(245, 158, 11, 0.1)" rx="4"/>
<text x="92" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#d97706">
Reduction: 20-30%
</text>
<!-- Text compression visual -->
<text x="92" y="122" text-anchor="middle" font-family="monospace" font-size="16" fill="#92400e">
ABCDEF → ABC
</text>
<text x="92" y="133" text-anchor="middle" font-family="monospace" font-size="16" fill="#92400e">
GHIJKL → GHI
</text>
</g>
</g>
<!-- Performance note -->
<rect x="50" y="440" width="800" height="40" fill="rgba(99, 102, 241, 0.05)" stroke="#6366f1" stroke-width="1.5" stroke-dasharray="6,3" rx="6"/>
<text x="450" y="465" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-style="italic" fill="#4f46e5">
Compression Level 4 achieves 60-75% reduction while maintaining 95%+ information retention
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

127
docs/src/assets/chapter-03/storage-multiplication.svg
View file

@ -1,127 +0,0 @@
<svg width="900" height="400" viewBox="0 0 900 400" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradient for bars -->
<linearGradient id="barGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#1e40af;stop-opacity:0.9" />
</linearGradient>
<linearGradient id="barGrad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:0.9" />
</linearGradient>
<linearGradient id="barGrad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#6d28d9;stop-opacity:0.9" />
</linearGradient>
<linearGradient id="barGrad4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.9" />
</linearGradient>
<linearGradient id="barGrad5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#dc2626;stop-opacity:0.9" />
</linearGradient>
<linearGradient id="barGrad6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:0.9" />
</linearGradient>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="900" height="400" fill="#fafafa"/>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
Storage Components per 1TB of Documents
</text>
<!-- Chart area -->
<rect x="100" y="60" width="700" height="260" fill="none" stroke="#e2e8f0" stroke-width="1"/>
<!-- Grid lines -->
<line x1="100" y1="125" x2="800" y2="125" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
<line x1="100" y1="190" x2="800" y2="190" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
<line x1="100" y1="255" x2="800" y2="255" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
<!-- Axes -->
<line x1="100" y1="320" x2="800" y2="320" stroke="#475569" stroke-width="2"/>
<line x1="100" y1="60" x2="100" y2="320" stroke="#475569" stroke-width="2"/>
<!-- Y-axis labels -->
<text x="90" y="325" text-anchor="end" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">0 GB</text>
<text x="90" y="260" text-anchor="end" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">250 GB</text>
<text x="90" y="195" text-anchor="end" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">500 GB</text>
<text x="90" y="130" text-anchor="end" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">750 GB</text>
<text x="90" y="65" text-anchor="end" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">1000 GB</text>
<!-- Y-axis title -->
<text x="30" y="190" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" fill="#475569" transform="rotate(-90 30 190)">
Storage Size (GB)
</text>
<!-- Bars -->
<!-- Original -->
<rect x="150" y="60" width="80" height="260" fill="url(#barGrad1)" stroke="#3b82f6" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="190" y="80" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">1000</text>
<text x="190" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Original</text>
<text x="190" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">1000 GB</text>
<!-- Text Extracted -->
<rect x="260" y="112" width="80" height="208" fill="url(#barGrad2)" stroke="#10b981" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="300" y="132" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">800</text>
<text x="300" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Extracted</text>
<text x="300" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">800 GB</text>
<!-- Embeddings -->
<rect x="370" y="8" width="80" height="312" fill="url(#barGrad3)" stroke="#8b5cf6" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="410" y="28" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">1200</text>
<text x="410" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Embeddings</text>
<text x="410" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">1200 GB</text>
<!-- Index -->
<rect x="480" y="164" width="80" height="156" fill="url(#barGrad4)" stroke="#f59e0b" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="520" y="184" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">600</text>
<text x="520" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Index</text>
<text x="520" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">600 GB</text>
<!-- Metadata -->
<rect x="590" y="216" width="80" height="104" fill="url(#barGrad5)" stroke="#ef4444" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="630" y="236" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">400</text>
<text x="630" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Metadata</text>
<text x="630" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">400 GB</text>
<!-- Cache -->
<rect x="700" y="190" width="80" height="130" fill="url(#barGrad6)" stroke="#06b6d4" stroke-width="2" rx="4" filter="url(#shadow)"/>
<text x="740" y="210" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="white">500</text>
<text x="740" y="340" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">Cache</text>
<text x="740" y="355" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">500 GB</text>
<!-- Total line -->
<line x1="150" y1="45" x2="780" y2="45" stroke="#dc2626" stroke-width="3" stroke-dasharray="8,4"/>
<rect x="790" y="35" width="90" height="25" fill="#fee2e2" stroke="#dc2626" stroke-width="2" rx="4"/>
<text x="835" y="52" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#dc2626">3.5 TB Total</text>
<!-- Legend -->
<g transform="translate(120, 375)">
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Components contribute to 3.5× storage multiplication factor</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

157
docs/src/assets/chapter-03/technical-specs.svg
View file

@ -1,157 +0,0 @@
<svg width="900" height="450" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradient for embedding section -->
<linearGradient id="embeddingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.2" />
</linearGradient>
<!-- Gradient for LLM section -->
<linearGradient id="llmGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06ffa5;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#00d2ff;stop-opacity:0.2" />
</linearGradient>
<!-- Gradient for performance section -->
<linearGradient id="perfGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.2" />
</linearGradient>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="900" height="450" fill="#fafafa"/>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
System Technical Specifications
</text>
<!-- Main container -->
<rect x="50" y="50" width="800" height="380" fill="none" stroke="#cbd5e1" stroke-width="2" rx="8"/>
<!-- Embedding Configuration Section -->
<g transform="translate(70, 80)">
<rect x="0" y="0" width="350" height="150" fill="url(#embeddingGrad)" stroke="#667eea" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="175" y="25" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#1e293b">
Embedding Configuration
</text>
<text x="15" y="50" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Model: bge-small-en-v1.5-f32.gguf
</text>
<text x="15" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Dimensions: 384
</text>
<text x="15" y="90" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Format: GGUF (quantized)
</text>
<text x="15" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Server: localhost:8082
</text>
<text x="15" y="130" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Memory: ~200MB loaded
</text>
</g>
<!-- LLM Configuration Section -->
<g transform="translate(450, 80)">
<rect x="0" y="0" width="350" height="150" fill="url(#llmGrad)" stroke="#00d2ff" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="175" y="25" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#1e293b">
LLM Configuration
</text>
<text x="15" y="50" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Model: DeepSeek-R1-Distill-Qwen-1.5B
</text>
<text x="15" y="70" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Context Size: 4096 tokens
</text>
<text x="15" y="90" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Max Predict: 1024 tokens
</text>
<text x="15" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Parallel Requests: 6
</text>
<text x="15" y="130" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Quantization: Q3_K_M
</text>
</g>
<!-- Performance Characteristics Section -->
<g transform="translate(70, 250)">
<rect x="0" y="0" width="730" height="150" fill="url(#perfGrad)" stroke="#f5576c" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="365" y="25" text-anchor="middle" font-family="system-ui, sans-serif" font-size="19" font-weight="600" fill="#1e293b">
Performance Characteristics
</text>
<!-- Left column - Vector Index -->
<g transform="translate(15, 45)">
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Vector Index: HNSW Algorithm
</text>
<text x="0" y="20" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• M=16, ef_construction=200
</text>
<text x="0" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Distance: Cosine Similarity
</text>
<text x="0" y="60" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Build: ~1000 docs/minute
</text>
</g>
<!-- Middle column - Chunking Strategy -->
<g transform="translate(250, 45)">
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Chunking Strategy
</text>
<text x="0" y="20" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Chunk Size: 512 tokens
</text>
<text x="0" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Overlap: 50 tokens
</text>
<text x="0" y="60" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Prompt Compact: Level 4
</text>
</g>
<!-- Right column - Runtime Metrics -->
<g transform="translate(490, 45)">
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
Runtime Metrics
</text>
<text x="0" y="20" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Query Latency: &lt;50ms p99
</text>
<text x="0" y="40" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Memory: ~1GB/million chunks
</text>
<text x="0" y="60" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Cache TTL: 3600 seconds
</text>
</g>
</g>
<!-- Additional specs indicators -->
<g transform="translate(820, 100)">
<circle cx="0" cy="0" r="3" fill="#10b981"/>
<circle cx="0" cy="20" r="3" fill="#3b82f6"/>
<circle cx="0" cy="40" r="3" fill="#f59e0b"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.6 KiB

195
docs/src/assets/chapter-04/analytics-interface.svg
View file

@ -1,195 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.card { fill: #fff; stroke: #ddd; stroke-width: 1; }
.metric-value { fill: #1a1a1a; font-family: Arial, sans-serif; font-weight: bold; }
.metric-label { fill: #666; font-family: Arial, sans-serif; }
.metric-change-up { fill: #7ED321; font-family: Arial, sans-serif; }
.metric-change-down { fill: #E74C3C; font-family: Arial, sans-serif; }
.chart-line { stroke: #4A90E2; stroke-width: 2; fill: none; }
.chart-area { fill: #4A90E2; opacity: 0.1; }
.chart-grid { stroke: #eee; stroke-width: 1; }
.bar { fill: #4A90E2; }
.bar-alt { fill: #BD10E0; }
.dropdown { fill: #fff; stroke: #ccc; stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.card { fill: #2a2a2a; stroke: #444; }
.metric-value { fill: #ffffff; }
.metric-label { fill: #aaa; }
.chart-grid { stroke: #333; }
.dropdown { fill: #2a2a2a; stroke: #444; }
.button { fill: #00D4FF; }
.chart-line { stroke: #00D4FF; }
.bar { fill: #00D4FF; }
.bar-alt { fill: #E040FB; }
.chart-area { fill: #00D4FF; opacity: 0.1; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Analytics - Dashboard Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header -->
<rect x="30" y="50" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="92" width="840" height="8" class="bg"/>
<!-- Title and Controls -->
<text x="55" y="82" font-size="16" font-weight="600" class="main-text">📊 Analytics Dashboard</text>
<!-- Time Range Dropdown -->
<g transform="translate(550, 62)">
<rect x="0" y="0" width="120" height="30" rx="4" class="dropdown"/>
<text x="15" y="20" font-size="13" class="main-text">Last 24h ▼</text>
</g>
<!-- Refresh Button -->
<g transform="translate(680, 62)">
<rect x="0" y="0" width="80" height="30" rx="4" class="button"/>
<text x="40" y="20" text-anchor="middle" font-size="13" class="button-text">⟳ Refresh</text>
</g>
<!-- Divider -->
<line x1="30" y1="100" x2="870" y2="100" class="divider"/>
<!-- Metric Cards Row -->
<g transform="translate(50, 115)">
<!-- Card 1: Messages -->
<rect x="0" y="0" width="185" height="90" rx="8" class="card"/>
<text x="92" y="35" text-anchor="middle" font-size="28" class="metric-value">1,234</text>
<text x="92" y="55" text-anchor="middle" font-size="13" class="metric-label">Messages</text>
<text x="92" y="75" text-anchor="middle" font-size="12" class="metric-change-up">↑ +12%</text>
<!-- Card 2: Success Rate -->
<rect x="200" y="0" width="185" height="90" rx="8" class="card"/>
<text x="292" y="35" text-anchor="middle" font-size="28" class="metric-value">89%</text>
<text x="292" y="55" text-anchor="middle" font-size="13" class="metric-label">Success Rate</text>
<text x="292" y="75" text-anchor="middle" font-size="12" class="metric-change-up">↑ +3%</text>
<!-- Card 3: Avg Response Time -->
<rect x="400" y="0" width="185" height="90" rx="8" class="card"/>
<text x="492" y="35" text-anchor="middle" font-size="28" class="metric-value">2.3s</text>
<text x="492" y="55" text-anchor="middle" font-size="13" class="metric-label">Avg Response</text>
<text x="492" y="75" text-anchor="middle" font-size="12" class="metric-change-down">↓ -0.2s</text>
<!-- Card 4: Users Today -->
<rect x="600" y="0" width="185" height="90" rx="8" class="card"/>
<text x="692" y="35" text-anchor="middle" font-size="28" class="metric-value">45</text>
<text x="692" y="55" text-anchor="middle" font-size="13" class="metric-label">Users Today</text>
<text x="692" y="75" text-anchor="middle" font-size="12" class="metric-change-up">↑ +8</text>
</g>
<!-- Charts Row -->
<g transform="translate(50, 220)">
<!-- Line Chart: Messages Over Time -->
<rect x="0" y="0" width="480" height="200" rx="8" class="card"/>
<text x="20" y="25" font-size="14" font-weight="500" class="main-text">Messages Over Time</text>
<!-- Chart Grid -->
<g transform="translate(30, 45)">
<line x1="0" y1="0" x2="430" y2="0" class="chart-grid"/>
<line x1="0" y1="40" x2="430" y2="40" class="chart-grid"/>
<line x1="0" y1="80" x2="430" y2="80" class="chart-grid"/>
<line x1="0" y1="120" x2="430" y2="120" class="chart-grid"/>
<!-- Chart Area -->
<path d="M0,100 Q50,80 100,60 T200,40 T300,50 T400,20 L400,120 L0,120 Z" class="chart-area"/>
<!-- Chart Line -->
<path d="M0,100 Q50,80 100,60 T200,40 T300,50 T400,20" class="chart-line"/>
<!-- Data Points -->
<circle cx="0" cy="100" r="4" class="bar"/>
<circle cx="100" cy="60" r="4" class="bar"/>
<circle cx="200" cy="40" r="4" class="bar"/>
<circle cx="300" cy="50" r="4" class="bar"/>
<circle cx="400" cy="20" r="4" class="bar"/>
<!-- X-axis Labels -->
<text x="0" y="140" text-anchor="middle" font-size="10" class="secondary-text">Mon</text>
<text x="100" y="140" text-anchor="middle" font-size="10" class="secondary-text">Tue</text>
<text x="200" y="140" text-anchor="middle" font-size="10" class="secondary-text">Wed</text>
<text x="300" y="140" text-anchor="middle" font-size="10" class="secondary-text">Thu</text>
<text x="400" y="140" text-anchor="middle" font-size="10" class="secondary-text">Fri</text>
</g>
<!-- Bar Chart: Top Questions -->
<rect x="500" y="0" width="285" height="200" rx="8" class="card"/>
<text x="520" y="25" font-size="14" font-weight="500" class="main-text">Top Questions</text>
<g transform="translate(520, 45)">
<!-- Bar 1 -->
<text x="0" y="12" font-size="11" class="secondary-text">1. How do I reset...</text>
<rect x="0" y="18" width="200" height="16" rx="3" class="bar"/>
<!-- Bar 2 -->
<text x="0" y="52" font-size="11" class="secondary-text">2. What is the status...</text>
<rect x="0" y="58" width="160" height="16" rx="3" class="bar"/>
<!-- Bar 3 -->
<text x="0" y="92" font-size="11" class="secondary-text">3. Where can I find...</text>
<rect x="0" y="98" width="130" height="16" rx="3" class="bar"/>
<!-- Bar 4 -->
<text x="0" y="132" font-size="11" class="secondary-text">4. Help with login</text>
<rect x="0" y="138" width="100" height="16" rx="3" class="bar"/>
</g>
</g>
<!-- Quick Stats Row -->
<g transform="translate(50, 435)">
<rect x="0" y="0" width="785" height="45" rx="6" class="card"/>
<text x="20" y="28" font-size="12" class="secondary-text">📈 Peak Hour:</text>
<text x="100" y="28" font-size="12" font-weight="500" class="main-text">2:00 PM</text>
<line x1="160" y1="10" x2="160" y2="35" class="divider"/>
<text x="180" y="28" font-size="12" class="secondary-text">🔝 Top Intent:</text>
<text x="260" y="28" font-size="12" font-weight="500" class="main-text">Support Query</text>
<line x1="370" y1="10" x2="370" y2="35" class="divider"/>
<text x="390" y="28" font-size="12" class="secondary-text">⚡ Avg Session:</text>
<text x="480" y="28" font-size="12" font-weight="500" class="main-text">4.2 min</text>
<line x1="540" y1="10" x2="540" y2="35" class="divider"/>
<text x="560" y="28" font-size="12" class="secondary-text">🎯 Resolution:</text>
<text x="640" y="28" font-size="12" font-weight="500" class="main-text">94%</text>
<!-- Export Button -->
<rect x="700" y="8" width="70" height="28" rx="4" class="button"/>
<text x="735" y="27" text-anchor="middle" font-size="11" class="button-text">Export</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<text x="0" y="0" font-size="11" class="secondary-text">Metrics: Real-time KPIs</text>
<text x="150" y="0" font-size="11" class="secondary-text">Charts: Trends & Distribution</text>
<text x="350" y="0" font-size="11" class="secondary-text">Time Range: Last 24h, 7d, 30d, Custom</text>
<text x="600" y="0" font-size="11" class="secondary-text">Shortcuts: R = Refresh | E = Export</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.9 KiB

211
docs/src/assets/chapter-04/calendar-interface.svg
View file

@ -1,211 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.today { fill: #4A90E2; }
.event-bg { fill: #4A90E2; opacity: 0.8; }
.event-text { fill: #fff; font-family: Arial, sans-serif; }
.weekend { fill: #f0f0f0; }
.cell-border { stroke: #e0e0e0; stroke-width: 1; fill: none; }
.nav-btn { fill: #f0f0f0; stroke: #ccc; stroke-width: 1; }
.view-active { fill: #4A90E2; }
.view-inactive { fill: #e0e0e0; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.today { fill: #00D4FF; }
.event-bg { fill: #00D4FF; opacity: 0.8; }
.weekend { fill: #252525; }
.cell-border { stroke: #444; }
.nav-btn { fill: #333; stroke: #555; }
.button { fill: #00D4FF; }
.view-active { fill: #00D4FF; }
.view-inactive { fill: #333; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Calendar - Scheduling Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header -->
<rect x="30" y="50" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="92" width="840" height="8" class="bg"/>
<!-- Navigation -->
<g transform="translate(50, 62)">
<!-- Prev/Next Buttons -->
<rect x="0" y="0" width="30" height="30" rx="4" class="nav-btn"/>
<text x="15" y="21" text-anchor="middle" font-size="16" class="icon-text">◄</text>
<rect x="40" y="0" width="30" height="30" rx="4" class="nav-btn"/>
<text x="55" y="21" text-anchor="middle" font-size="16" class="icon-text">►</text>
<!-- Month/Year -->
<text x="100" y="22" font-size="18" font-weight="600" class="main-text">March 2024</text>
</g>
<!-- View Toggle -->
<g transform="translate(650, 62)">
<rect x="0" y="0" width="50" height="30" rx="4" class="view-inactive"/>
<text x="25" y="20" text-anchor="middle" font-size="12" class="main-text">Day</text>
<rect x="55" y="0" width="55" height="30" rx="4" class="view-inactive"/>
<text x="82" y="20" text-anchor="middle" font-size="12" class="main-text">Week</text>
<rect x="115" y="0" width="60" height="30" rx="4" class="view-active"/>
<text x="145" y="20" text-anchor="middle" font-size="12" fill="#fff">Month</text>
</g>
<!-- Divider -->
<line x1="30" y1="100" x2="870" y2="100" class="divider"/>
<!-- Calendar Grid -->
<g transform="translate(50, 110)">
<!-- Day Headers -->
<g>
<text x="55" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Mon</text>
<text x="170" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Tue</text>
<text x="285" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Wed</text>
<text x="400" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Thu</text>
<text x="515" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Fri</text>
<text x="630" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Sat</text>
<text x="745" y="20" text-anchor="middle" font-size="13" font-weight="500" class="secondary-text">Sun</text>
</g>
<!-- Grid Lines and Cells -->
<!-- Row 1 -->
<g transform="translate(0, 35)">
<rect x="0" y="0" width="115" height="65" class="cell-border"/>
<rect x="115" y="0" width="115" height="65" class="cell-border"/>
<rect x="230" y="0" width="115" height="65" class="cell-border"/>
<rect x="345" y="0" width="115" height="65" class="cell-border"/>
<text x="435" y="20" text-anchor="middle" font-size="14" class="main-text">1</text>
<rect x="460" y="0" width="115" height="65" class="cell-border"/>
<text x="550" y="20" text-anchor="middle" font-size="14" class="main-text">2</text>
<rect x="575" y="0" width="115" height="65" class="cell-border weekend"/>
<text x="665" y="20" text-anchor="middle" font-size="14" class="secondary-text">3</text>
<rect x="690" y="0" width="110" height="65" class="cell-border weekend"/>
</g>
<!-- Row 2 -->
<g transform="translate(0, 100)">
<rect x="0" y="0" width="115" height="65" class="cell-border"/>
<text x="15" y="20" font-size="14" class="main-text">4</text>
<rect x="115" y="0" width="115" height="65" class="cell-border"/>
<text x="130" y="20" font-size="14" class="main-text">5</text>
<!-- Event -->
<rect x="120" y="28" width="105" height="22" rx="3" class="event-bg"/>
<text x="125" y="43" font-size="11" class="event-text">Team Meeting</text>
<rect x="230" y="0" width="115" height="65" class="cell-border"/>
<text x="245" y="20" font-size="14" class="main-text">6</text>
<rect x="345" y="0" width="115" height="65" class="cell-border"/>
<text x="360" y="20" font-size="14" class="main-text">7</text>
<rect x="460" y="0" width="115" height="65" class="cell-border"/>
<text x="475" y="20" font-size="14" class="main-text">8</text>
<rect x="575" y="0" width="115" height="65" class="cell-border weekend"/>
<text x="590" y="20" font-size="14" class="secondary-text">9</text>
<rect x="690" y="0" width="110" height="65" class="cell-border weekend"/>
<text x="705" y="20" font-size="14" class="secondary-text">10</text>
</g>
<!-- Row 3 -->
<g transform="translate(0, 165)">
<rect x="0" y="0" width="115" height="65" class="cell-border"/>
<text x="15" y="20" font-size="14" class="main-text">11</text>
<rect x="115" y="0" width="115" height="65" class="cell-border"/>
<text x="130" y="20" font-size="14" class="main-text">12</text>
<rect x="230" y="0" width="115" height="65" class="cell-border"/>
<text x="245" y="20" font-size="14" class="main-text">13</text>
<!-- Event -->
<rect x="235" y="28" width="105" height="22" rx="3" class="event-bg"/>
<text x="240" y="43" font-size="11" class="event-text">Project Review</text>
<rect x="345" y="0" width="115" height="65" class="cell-border"/>
<text x="360" y="20" font-size="14" class="main-text">14</text>
<!-- Event -->
<rect x="350" y="28" width="105" height="22" rx="3" class="event-bg"/>
<text x="355" y="43" font-size="11" class="event-text">1:1 Meeting</text>
<rect x="460" y="0" width="115" height="65" class="cell-border"/>
<!-- Today -->
<circle cx="485" cy="18" r="14" class="today"/>
<text x="485" y="23" text-anchor="middle" font-size="14" fill="#fff">15</text>
<rect x="575" y="0" width="115" height="65" class="cell-border weekend"/>
<text x="590" y="20" font-size="14" class="secondary-text">16</text>
<rect x="690" y="0" width="110" height="65" class="cell-border weekend"/>
<text x="705" y="20" font-size="14" class="secondary-text">17</text>
</g>
<!-- Row 4 -->
<g transform="translate(0, 230)">
<rect x="0" y="0" width="115" height="65" class="cell-border"/>
<text x="15" y="20" font-size="14" class="main-text">18</text>
<rect x="115" y="0" width="115" height="65" class="cell-border"/>
<text x="130" y="20" font-size="14" class="main-text">19</text>
<rect x="230" y="0" width="115" height="65" class="cell-border"/>
<text x="245" y="20" font-size="14" class="main-text">20</text>
<rect x="345" y="0" width="115" height="65" class="cell-border"/>
<text x="360" y="20" font-size="14" class="main-text">21</text>
<rect x="460" y="0" width="115" height="65" class="cell-border"/>
<text x="475" y="20" font-size="14" class="main-text">22</text>
<rect x="575" y="0" width="115" height="65" class="cell-border weekend"/>
<text x="590" y="20" font-size="14" class="secondary-text">23</text>
<rect x="690" y="0" width="110" height="65" class="cell-border weekend"/>
<text x="705" y="20" font-size="14" class="secondary-text">24</text>
</g>
</g>
<!-- Add Event Button -->
<g transform="translate(750, 470)">
<circle cx="30" cy="30" r="28" class="button"/>
<text x="30" y="38" text-anchor="middle" font-size="28" fill="#fff">+</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<circle cx="10" cy="-4" r="8" class="today"/>
<text x="25" y="0" font-size="11" class="secondary-text">Today</text>
<rect x="80" y="-10" width="40" height="14" rx="3" class="event-bg"/>
<text x="130" y="0" font-size="11" class="secondary-text">Event</text>
<rect x="200" y="-10" width="20" height="14" class="weekend"/>
<text x="230" y="0" font-size="11" class="secondary-text">Weekend</text>
<text x="400" y="0" font-size="11" class="secondary-text">Shortcuts: N = New event | T = Today | ← → = Navigate | D/W/M = View</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.5 KiB

200
docs/src/assets/chapter-04/compliance-interface.svg
View file

@ -1,200 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.button-secondary { fill: #fff; stroke: #ccc; stroke-width: 1; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.card { fill: #fff; stroke: #ddd; stroke-width: 1; }
.severity-critical { fill: #E74C3C; }
.severity-high { fill: #F5A623; }
.severity-medium { fill: #F1C40F; }
.severity-low { fill: #7ED321; }
.severity-info { fill: #4A90E2; }
.severity-text { fill: #fff; font-family: Arial, sans-serif; }
.row-bg { fill: #fff; }
.row-hover { fill: #fef6f6; }
.fix-btn { fill: #E74C3C; }
.review-btn { fill: #F5A623; }
.table-header { fill: #f5f5f5; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.card { fill: #2a2a2a; stroke: #444; }
.row-bg { fill: #2a2a2a; }
.row-hover { fill: #3a2a2a; }
.table-header { fill: #333; }
.button { fill: #00D4FF; }
.button-secondary { fill: #333; stroke: #555; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Compliance - Security Scanner Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header -->
<rect x="30" y="50" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="92" width="840" height="8" class="bg"/>
<!-- Title and Controls -->
<text x="55" y="82" font-size="16" font-weight="600" class="main-text">🛡 Compliance Scanner</text>
<!-- Action Buttons -->
<g transform="translate(600, 60)">
<rect x="0" y="0" width="80" height="32" rx="4" class="button"/>
<text x="40" y="21" text-anchor="middle" font-size="13" class="button-text">Scan</text>
<rect x="90" y="0" width="80" height="32" rx="4" class="button-secondary"/>
<text x="130" y="21" text-anchor="middle" font-size="13" class="main-text">Export</text>
</g>
<!-- Divider -->
<line x1="30" y1="100" x2="870" y2="100" class="divider"/>
<!-- Severity Summary Cards -->
<g transform="translate(50, 115)">
<!-- Critical -->
<rect x="0" y="0" width="145" height="70" rx="8" class="card"/>
<rect x="10" y="15" width="50" height="40" rx="6" class="severity-critical"/>
<text x="35" y="42" text-anchor="middle" font-size="20" font-weight="bold" class="severity-text">2</text>
<text x="75" y="35" font-size="12" font-weight="500" class="main-text">Critical</text>
<text x="75" y="52" font-size="11" class="secondary-text">🔴 Immediate</text>
<!-- High -->
<rect x="160" y="0" width="145" height="70" rx="8" class="card"/>
<rect x="170" y="15" width="50" height="40" rx="6" class="severity-high"/>
<text x="195" y="42" text-anchor="middle" font-size="20" font-weight="bold" class="severity-text">5</text>
<text x="235" y="35" font-size="12" font-weight="500" class="main-text">High</text>
<text x="235" y="52" font-size="11" class="secondary-text">🟠 Priority</text>
<!-- Medium -->
<rect x="320" y="0" width="145" height="70" rx="8" class="card"/>
<rect x="330" y="15" width="50" height="40" rx="6" class="severity-medium"/>
<text x="355" y="42" text-anchor="middle" font-size="20" font-weight="bold" class="severity-text">3</text>
<text x="395" y="35" font-size="12" font-weight="500" class="main-text">Medium</text>
<text x="395" y="52" font-size="11" class="secondary-text">🟡 Review</text>
<!-- Low -->
<rect x="480" y="0" width="145" height="70" rx="8" class="card"/>
<rect x="490" y="15" width="50" height="40" rx="6" class="severity-low"/>
<text x="515" y="42" text-anchor="middle" font-size="20" font-weight="bold" class="severity-text">1</text>
<text x="555" y="35" font-size="12" font-weight="500" class="main-text">Low</text>
<text x="555" y="52" font-size="11" class="secondary-text">🟢 Minor</text>
<!-- Info -->
<rect x="640" y="0" width="145" height="70" rx="8" class="card"/>
<rect x="650" y="15" width="50" height="40" rx="6" class="severity-info"/>
<text x="675" y="42" text-anchor="middle" font-size="20" font-weight="bold" class="severity-text">0</text>
<text x="715" y="35" font-size="12" font-weight="500" class="main-text">Info</text>
<text x="715" y="52" font-size="11" class="secondary-text">ℹ Notes</text>
</g>
<!-- Divider -->
<line x1="50" y1="200" x2="850" y2="200" class="divider"/>
<!-- Issues Table -->
<g transform="translate(50, 210)">
<!-- Table Header -->
<rect x="0" y="0" width="800" height="35" rx="4" class="table-header"/>
<text x="20" y="23" font-size="12" font-weight="500" class="secondary-text">Severity</text>
<text x="120" y="23" font-size="12" font-weight="500" class="secondary-text">Issue</text>
<text x="450" y="23" font-size="12" font-weight="500" class="secondary-text">File</text>
<text x="650" y="23" font-size="12" font-weight="500" class="secondary-text">Action</text>
<!-- Row 1 - Critical -->
<rect x="0" y="40" width="800" height="45" rx="4" class="row-hover"/>
<rect x="15" y="52" width="70" height="22" rx="4" class="severity-critical"/>
<text x="50" y="68" text-anchor="middle" font-size="11" class="severity-text">Critical</text>
<text x="120" y="68" font-size="13" class="main-text">Hardcoded password detected</text>
<text x="450" y="68" font-size="12" font-family="monospace" class="secondary-text">start.bas:15</text>
<rect x="650" y="52" width="55" height="24" rx="4" class="fix-btn"/>
<text x="677" y="69" text-anchor="middle" font-size="11" class="severity-text">Fix</text>
<!-- Row 2 - Critical -->
<rect x="0" y="90" width="800" height="45" rx="4" class="row-hover"/>
<rect x="15" y="102" width="70" height="22" rx="4" class="severity-critical"/>
<text x="50" y="118" text-anchor="middle" font-size="11" class="severity-text">Critical</text>
<text x="120" y="118" font-size="13" class="main-text">API key exposed in code</text>
<text x="450" y="118" font-size="12" font-family="monospace" class="secondary-text">api.bas:42</text>
<rect x="650" y="102" width="55" height="24" rx="4" class="fix-btn"/>
<text x="677" y="119" text-anchor="middle" font-size="11" class="severity-text">Fix</text>
<!-- Row 3 - High -->
<rect x="0" y="140" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="152" width="70" height="22" rx="4" class="severity-high"/>
<text x="50" y="168" text-anchor="middle" font-size="11" class="severity-text">High</text>
<text x="120" y="168" font-size="13" class="main-text">SQL injection risk in query</text>
<text x="450" y="168" font-size="12" font-family="monospace" class="secondary-text">data.bas:28</text>
<rect x="650" y="152" width="65" height="24" rx="4" class="review-btn"/>
<text x="682" y="169" text-anchor="middle" font-size="11" class="severity-text">Review</text>
<!-- Row 4 - High -->
<rect x="0" y="190" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="202" width="70" height="22" rx="4" class="severity-high"/>
<text x="50" y="218" text-anchor="middle" font-size="11" class="severity-text">High</text>
<text x="120" y="218" font-size="13" class="main-text">Insecure HTTP endpoint</text>
<text x="450" y="218" font-size="12" font-family="monospace" class="secondary-text">config.csv:8</text>
<rect x="650" y="202" width="65" height="24" rx="4" class="review-btn"/>
<text x="682" y="219" text-anchor="middle" font-size="11" class="severity-text">Review</text>
<!-- Row 5 - Medium -->
<rect x="0" y="240" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="252" width="70" height="22" rx="4" class="severity-medium"/>
<text x="50" y="268" text-anchor="middle" font-size="11" class="severity-text">Medium</text>
<text x="120" y="268" font-size="13" class="main-text">Missing input validation</text>
<text x="450" y="268" font-size="12" font-family="monospace" class="secondary-text">form.bas:55</text>
<rect x="650" y="252" width="65" height="24" rx="4" class="button-secondary"/>
<text x="682" y="269" text-anchor="middle" font-size="11" class="main-text">Review</text>
</g>
<!-- Footer Stats -->
<g transform="translate(50, 480)">
<text x="0" y="0" font-size="12" class="secondary-text">Last scan: 2 minutes ago</text>
<text x="200" y="0" font-size="12" class="secondary-text">Files scanned: 24</text>
<text x="380" y="0" font-size="12" class="secondary-text">Total issues: 11</text>
<!-- Pagination -->
<text x="600" y="0" font-size="12" class="secondary-text">Showing 1-5 of 11</text>
<rect x="720" y="-15" width="25" height="22" rx="4" class="button-secondary"/>
<text x="732" y="2" text-anchor="middle" font-size="12" class="main-text">←</text>
<rect x="750" y="-15" width="25" height="22" rx="4" class="button-secondary"/>
<text x="762" y="2" text-anchor="middle" font-size="12" class="main-text">→</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<rect x="0" y="-10" width="14" height="14" rx="3" class="severity-critical"/>
<text x="20" y="0" font-size="11" class="secondary-text">Critical</text>
<rect x="70" y="-10" width="14" height="14" rx="3" class="severity-high"/>
<text x="90" y="0" font-size="11" class="secondary-text">High</text>
<rect x="130" y="-10" width="14" height="14" rx="3" class="severity-medium"/>
<text x="150" y="0" font-size="11" class="secondary-text">Medium</text>
<rect x="200" y="-10" width="14" height="14" rx="3" class="severity-low"/>
<text x="220" y="0" font-size="11" class="secondary-text">Low</text>
<text x="300" y="0" font-size="11" class="secondary-text">Fix = Auto-remediate | Review = Manual inspection needed</text>
<text x="650" y="0" font-size="11" class="secondary-text">LGPD • GDPR • CCPA</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

258
docs/src/assets/chapter-04/designer-interface.svg
View file

@ -1,258 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.canvas-bg { fill: #fff; }
.canvas-grid { stroke: #f0f0f0; stroke-width: 1; }
.node-talk { fill: #4A90E2; stroke: #3a7bc8; stroke-width: 2; }
.node-hear { fill: #7ED321; stroke: #6bc01a; stroke-width: 2; }
.node-if { fill: #F5A623; stroke: #d9911f; stroke-width: 2; }
.node-text { fill: #fff; font-family: Arial, sans-serif; }
.connector { stroke: #666; stroke-width: 2; fill: none; }
.connector-arrow { fill: #666; }
.toolbox-item { fill: #fff; stroke: #ddd; stroke-width: 1; }
.toolbox-item:hover { fill: #f0f7ff; }
.properties-panel { fill: #fafafa; }
.section-header { fill: #e8e8e8; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.canvas-bg { fill: #252525; }
.canvas-grid { stroke: #333; }
.toolbox-item { fill: #2a2a2a; stroke: #444; }
.properties-panel { fill: #222; }
.section-header { fill: #333; }
.connector { stroke: #888; }
.connector-arrow { fill: #888; }
.button { fill: #00D4FF; }
.node-talk { fill: #00D4FF; stroke: #00a8cc; }
.node-hear { fill: #00FF88; stroke: #00cc6d; }
.node-if { fill: #FF9500; stroke: #cc7700; }
}
</style>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" class="connector-arrow"/>
</marker>
</defs>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Designer - Visual Builder Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Left Panel - Toolbox -->
<rect x="30" y="50" width="120" height="470" rx="8" class="panel-bg"/>
<line x1="150" y1="50" x2="150" y2="520" class="divider"/>
<!-- Toolbox Header -->
<rect x="30" y="50" width="120" height="30" rx="8" class="section-header"/>
<rect x="30" y="72" width="120" height="8" class="panel-bg"/>
<text x="90" y="70" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Toolbox</text>
<!-- Toolbox Items -->
<g transform="translate(40, 90)">
<!-- TALK -->
<rect x="0" y="0" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="23" font-size="14" class="icon-text">💬</text>
<text x="35" y="23" font-size="12" class="main-text">TALK</text>
<!-- HEAR -->
<rect x="0" y="45" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="68" font-size="14" class="icon-text">👂</text>
<text x="35" y="68" font-size="12" class="main-text">HEAR</text>
<!-- SET -->
<rect x="0" y="90" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="113" font-size="14" class="icon-text">📝</text>
<text x="35" y="113" font-size="12" class="main-text">SET</text>
<!-- Separator -->
<line x1="0" y1="140" x2="100" y2="140" class="divider"/>
<!-- IF -->
<rect x="0" y="155" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="178" font-size="14" class="icon-text">🔀</text>
<text x="35" y="178" font-size="12" class="main-text">IF</text>
<!-- FOR -->
<rect x="0" y="200" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="223" font-size="14" class="icon-text">🔄</text>
<text x="35" y="223" font-size="12" class="main-text">FOR</text>
<!-- SWITCH -->
<rect x="0" y="245" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="268" font-size="14" class="icon-text">🔃</text>
<text x="35" y="268" font-size="12" class="main-text">SWITCH</text>
<!-- Separator -->
<line x1="0" y1="295" x2="100" y2="295" class="divider"/>
<!-- CALL -->
<rect x="0" y="310" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="333" font-size="14" class="icon-text">📞</text>
<text x="35" y="333" font-size="12" class="main-text">CALL</text>
<!-- SEND -->
<rect x="0" y="355" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="378" font-size="14" class="icon-text">📧</text>
<text x="35" y="378" font-size="12" class="main-text">SEND</text>
<!-- SAVE -->
<rect x="0" y="400" width="100" height="35" rx="4" class="toolbox-item"/>
<text x="15" y="423" font-size="14" class="icon-text">💾</text>
<text x="35" y="423" font-size="12" class="main-text">SAVE</text>
</g>
<!-- Center Panel - Canvas -->
<rect x="150" y="50" width="560" height="470" class="canvas-bg"/>
<!-- Canvas Grid (subtle) -->
<g transform="translate(150, 50)">
<line x1="0" y1="100" x2="560" y2="100" class="canvas-grid"/>
<line x1="0" y1="200" x2="560" y2="200" class="canvas-grid"/>
<line x1="0" y1="300" x2="560" y2="300" class="canvas-grid"/>
<line x1="0" y1="400" x2="560" y2="400" class="canvas-grid"/>
<line x1="100" y1="0" x2="100" y2="470" class="canvas-grid"/>
<line x1="200" y1="0" x2="200" y2="470" class="canvas-grid"/>
<line x1="300" y1="0" x2="300" y2="470" class="canvas-grid"/>
<line x1="400" y1="0" x2="400" y2="470" class="canvas-grid"/>
<line x1="500" y1="0" x2="500" y2="470" class="canvas-grid"/>
</g>
<!-- Flow Diagram on Canvas -->
<g transform="translate(200, 80)">
<!-- Node 1: TALK "Hello!" -->
<rect x="0" y="0" width="120" height="60" rx="8" class="node-talk"/>
<text x="20" y="25" font-size="14" class="node-text">💬 TALK</text>
<text x="20" y="45" font-size="12" class="node-text">"Hello!"</text>
<!-- Connector 1 to 2 -->
<line x1="60" y1="60" x2="60" y2="100" class="connector" marker-end="url(#arrowhead)"/>
<!-- Node 2: HEAR name -->
<rect x="0" y="110" width="120" height="60" rx="8" class="node-hear"/>
<text x="20" y="135" font-size="14" class="node-text">👂 HEAR</text>
<text x="20" y="155" font-size="12" class="node-text">name</text>
<!-- Connector 2 to 3 -->
<line x1="120" y1="140" x2="180" y2="140" class="connector" marker-end="url(#arrowhead)"/>
<!-- Node 3: IF condition -->
<rect x="190" y="110" width="140" height="60" rx="8" class="node-if"/>
<text x="210" y="135" font-size="14" class="node-text">🔀 IF</text>
<text x="210" y="155" font-size="12" class="node-text">name = "Jo"</text>
<!-- Branch Labels -->
<text x="220" y="195" font-size="11" class="secondary-text">Yes</text>
<text x="310" y="195" font-size="11" class="secondary-text">No</text>
<!-- Connector to Yes branch -->
<path d="M220 170 L220 200 L220 230" class="connector" marker-end="url(#arrowhead)"/>
<!-- Connector to No branch -->
<path d="M310 170 L310 200 L310 230" class="connector" marker-end="url(#arrowhead)"/>
<!-- Node 4a: TALK "Hi Jo!" -->
<rect x="160" y="240" width="120" height="60" rx="8" class="node-talk"/>
<text x="180" y="265" font-size="14" class="node-text">💬 TALK</text>
<text x="180" y="285" font-size="12" class="node-text">"Hi Jo!"</text>
<!-- Node 4b: TALK "Hello!" -->
<rect x="290" y="240" width="120" height="60" rx="8" class="node-talk"/>
<text x="310" y="265" font-size="14" class="node-text">💬 TALK</text>
<text x="310" y="285" font-size="12" class="node-text">"Hello!"</text>
</g>
<!-- Right Panel - Properties -->
<rect x="710" y="50" width="160" height="470" rx="8" class="properties-panel"/>
<line x1="710" y1="50" x2="710" y2="520" class="divider"/>
<!-- Properties Header -->
<rect x="710" y="50" width="160" height="30" rx="8" class="section-header"/>
<rect x="710" y="72" width="160" height="8" class="properties-panel"/>
<text x="790" y="70" text-anchor="middle" font-size="12" font-weight="500" class="main-text">Properties</text>
<!-- Properties Content -->
<g transform="translate(720, 95)">
<text x="0" y="0" font-size="12" class="secondary-text">Node:</text>
<text x="0" y="20" font-size="14" font-weight="500" class="main-text">TALK</text>
<line x1="0" y1="35" x2="140" y2="35" class="divider"/>
<text x="0" y="55" font-size="12" class="secondary-text">Message:</text>
<rect x="0" y="65" width="140" height="60" rx="4" class="input-field"/>
<text x="10" y="85" font-size="12" class="main-text">"Hello!"</text>
<line x1="0" y1="140" x2="140" y2="140" class="divider"/>
<text x="0" y="160" font-size="12" class="secondary-text">Voice:</text>
<rect x="0" y="170" width="140" height="30" rx="4" class="input-field"/>
<text x="10" y="190" font-size="12" class="secondary-text">Default ▼</text>
<text x="0" y="220" font-size="12" class="secondary-text">Delay:</text>
<rect x="0" y="230" width="140" height="30" rx="4" class="input-field"/>
<text x="10" y="250" font-size="12" class="main-text">0ms</text>
<line x1="0" y1="275" x2="140" y2="275" class="divider"/>
<!-- Action Buttons -->
<rect x="0" y="290" width="65" height="30" rx="4" class="button"/>
<text x="32" y="310" text-anchor="middle" font-size="11" class="button-text">Apply</text>
<rect x="75" y="290" width="65" height="30" rx="4" class="input-field"/>
<text x="107" y="310" text-anchor="middle" font-size="11" class="main-text">Delete</text>
</g>
<!-- Canvas Controls (bottom) -->
<g transform="translate(160, 490)">
<rect x="0" y="0" width="30" height="25" rx="4" class="input-field"/>
<text x="15" y="17" text-anchor="middle" font-size="14" class="icon-text">+</text>
<rect x="35" y="0" width="30" height="25" rx="4" class="input-field"/>
<text x="50" y="17" text-anchor="middle" font-size="14" class="icon-text">−</text>
<rect x="70" y="0" width="30" height="25" rx="4" class="input-field"/>
<text x="85" y="17" text-anchor="middle" font-size="12" class="icon-text">⌖</text>
<text x="120" y="17" font-size="11" class="secondary-text">100%</text>
<rect x="480" y="0" width="60" height="25" rx="4" class="button"/>
<text x="510" y="17" text-anchor="middle" font-size="11" class="button-text">▶ Run</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<rect x="0" y="-10" width="20" height="14" rx="3" class="node-talk"/>
<text x="28" y="0" font-size="11" class="secondary-text">Talk</text>
<rect x="60" y="-10" width="20" height="14" rx="3" class="node-hear"/>
<text x="88" y="0" font-size="11" class="secondary-text">Hear</text>
<rect x="120" y="-10" width="20" height="14" rx="3" class="node-if"/>
<text x="148" y="0" font-size="11" class="secondary-text">Condition</text>
<text x="250" y="0" font-size="11" class="secondary-text">Drag nodes from Toolbox → Canvas | Connect by dragging</text>
<text x="600" y="0" font-size="11" class="secondary-text">Shortcuts: Delete | Ctrl+D = Duplicate | Ctrl+Z = Undo</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

155
docs/src/assets/chapter-04/drive-interface.svg
View file

@ -1,155 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.row-hover { fill: #f0f7ff; }
.folder-icon { fill: #F5A623; }
.file-icon { fill: #4A90E2; }
.image-icon { fill: #7ED321; }
.sidebar-item { fill: none; }
.sidebar-item:hover { fill: #e8e8e8; }
.label-blue { fill: #4A90E2; }
.label-green { fill: #7ED321; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.row-hover { fill: #2a3a4a; }
.button { fill: #00D4FF; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Drive - File Management Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Toolbar -->
<rect x="30" y="50" width="840" height="45" rx="8" class="header-bg"/>
<rect x="30" y="87" width="840" height="8" class="bg"/>
<!-- New Button -->
<rect x="50" y="60" width="80" height="28" rx="4" class="button"/>
<text x="90" y="79" text-anchor="middle" font-size="13" class="button-text">+ New ▼</text>
<!-- Search Bar -->
<rect x="300" y="60" width="250" height="28" rx="14" class="input-field"/>
<text x="320" y="79" font-size="13" class="secondary-text">🔍 Search files...</text>
<!-- View Toggle -->
<g transform="translate(750, 60)">
<rect x="0" y="0" width="30" height="28" rx="4" class="input-field"/>
<text x="15" y="19" text-anchor="middle" font-size="14" class="icon-text">⊞</text>
<rect x="35" y="0" width="30" height="28" rx="4" class="input-field"/>
<text x="50" y="19" text-anchor="middle" font-size="14" class="icon-text">≡</text>
</g>
<!-- Divider -->
<line x1="30" y1="95" x2="870" y2="95" class="divider"/>
<!-- Left Sidebar -->
<rect x="30" y="95" width="140" height="425" class="panel-bg"/>
<line x1="170" y1="95" x2="170" y2="520" class="divider"/>
<!-- Sidebar Items -->
<g transform="translate(45, 110)">
<rect x="-5" y="-5" width="120" height="28" rx="4" class="row-hover"/>
<text x="0" y="14" font-size="14" class="main-text">📁 My Drive</text>
<text x="0" y="50" font-size="14" class="secondary-text">⭐ Starred</text>
<text x="0" y="80" font-size="14" class="secondary-text">🕐 Recent</text>
<text x="0" y="110" font-size="14" class="secondary-text">🗑 Trash</text>
<line x1="-5" y1="130" x2="115" y2="130" class="divider"/>
<text x="0" y="155" font-size="12" font-weight="500" class="secondary-text">Labels</text>
<circle cx="10" cy="175" r="6" class="label-blue"/>
<text x="25" y="180" font-size="13" class="main-text">Work</text>
<circle cx="10" cy="200" r="6" class="label-green"/>
<text x="25" y="205" font-size="13" class="main-text">Personal</text>
</g>
<!-- Breadcrumb -->
<text x="190" y="120" font-size="13" class="secondary-text">📁 My Drive › Projects › 2024</text>
<!-- Column Headers -->
<g transform="translate(185, 140)">
<rect x="0" y="0" width="680" height="25" class="header-bg"/>
<text x="30" y="17" font-size="12" font-weight="500" class="secondary-text">☐</text>
<text x="60" y="17" font-size="12" font-weight="500" class="secondary-text">Name</text>
<text x="400" y="17" font-size="12" font-weight="500" class="secondary-text">Size</text>
<text x="520" y="17" font-size="12" font-weight="500" class="secondary-text">Modified</text>
</g>
<!-- File List -->
<g transform="translate(185, 170)">
<!-- Row 1 - Folder -->
<rect x="0" y="0" width="680" height="35" class="row-hover" opacity="0.5"/>
<text x="30" y="23" font-size="14" class="secondary-text">☐</text>
<text x="55" y="23" font-size="16" class="folder-icon">📁</text>
<text x="80" y="23" font-size="14" class="main-text">Reports</text>
<text x="400" y="23" font-size="13" class="secondary-text">—</text>
<text x="520" y="23" font-size="13" class="secondary-text">Today</text>
<!-- Row 2 - Folder -->
<rect x="0" y="40" width="680" height="35" fill="none"/>
<text x="30" y="63" font-size="14" class="secondary-text">☐</text>
<text x="55" y="63" font-size="16" class="folder-icon">📁</text>
<text x="80" y="63" font-size="14" class="main-text">Presentations</text>
<text x="400" y="63" font-size="13" class="secondary-text">—</text>
<text x="520" y="63" font-size="13" class="secondary-text">Yesterday</text>
<!-- Row 3 - Excel File -->
<rect x="0" y="80" width="680" height="35" fill="none"/>
<text x="30" y="103" font-size="14" class="secondary-text">☐</text>
<text x="55" y="103" font-size="16" class="file-icon">📄</text>
<text x="80" y="103" font-size="14" class="main-text">Budget.xlsx</text>
<text x="400" y="103" font-size="13" class="secondary-text">245 KB</text>
<text x="520" y="103" font-size="13" class="secondary-text">Mar 15</text>
<!-- Row 4 - Doc File -->
<rect x="0" y="120" width="680" height="35" fill="none"/>
<text x="30" y="143" font-size="14" class="secondary-text">☐</text>
<text x="55" y="143" font-size="16" class="file-icon">📄</text>
<text x="80" y="143" font-size="14" class="main-text">Notes.docx</text>
<text x="400" y="143" font-size="13" class="secondary-text">12 KB</text>
<text x="520" y="143" font-size="13" class="secondary-text">Mar 14</text>
<!-- Row 5 - Image File -->
<rect x="0" y="160" width="680" height="35" fill="none"/>
<text x="30" y="183" font-size="14" class="secondary-text">☐</text>
<text x="55" y="183" font-size="16" class="image-icon">🖼</text>
<text x="80" y="183" font-size="14" class="main-text">Logo.png</text>
<text x="400" y="183" font-size="13" class="secondary-text">89 KB</text>
<text x="520" y="183" font-size="13" class="secondary-text">Mar 10</text>
</g>
<!-- Drag & Drop Zone -->
<rect x="185" y="380" width="680" height="100" rx="8" fill="none" stroke="#4A90E2" stroke-width="2" stroke-dasharray="8,4"/>
<text x="525" y="425" text-anchor="middle" font-size="16" class="secondary-text">📤 Drag files here to upload</text>
<text x="525" y="450" text-anchor="middle" font-size="13" class="secondary-text">or click + New to create</text>
<!-- Legend -->
<g transform="translate(30, 535)">
<text x="0" y="0" font-size="11" class="secondary-text">Sidebar: Quick access, Labels</text>
<text x="200" y="0" font-size="11" class="secondary-text">Main: File browser with sort columns</text>
<text x="500" y="0" font-size="11" class="secondary-text">Actions: Upload, Create, Search, View toggle</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.3 KiB

147
docs/src/assets/chapter-04/mail-interface.svg
View file

@ -1,147 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.unread-dot { fill: #4A90E2; }
.selected-row { fill: #e8f4fd; }
.row-bg { fill: #fff; }
.sidebar-active { fill: #e8f4fd; }
.badge { fill: #4A90E2; }
.action-btn { fill: #f0f0f0; stroke: #ccc; stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.unread-dot { fill: #00D4FF; }
.selected-row { fill: #2a3a4a; }
.row-bg { fill: #222; }
.sidebar-active { fill: #2a3a4a; }
.badge { fill: #00D4FF; }
.button { fill: #00D4FF; }
.action-btn { fill: #333; stroke: #555; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Mail - Email Client Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Left Sidebar -->
<rect x="30" y="50" width="130" height="470" rx="8" class="panel-bg"/>
<rect x="152" y="50" width="8" height="470" class="bg"/>
<!-- Compose Button -->
<rect x="45" y="65" width="100" height="35" rx="6" class="button"/>
<text x="95" y="88" text-anchor="middle" font-size="13" class="button-text">✏ Compose</text>
<!-- Sidebar Items -->
<g transform="translate(45, 120)">
<!-- Inbox - Active -->
<rect x="-5" y="-5" width="110" height="30" rx="4" class="sidebar-active"/>
<text x="0" y="14" font-size="14" class="main-text">📥 Inbox</text>
<rect x="75" y="2" width="22" height="16" rx="8" class="badge"/>
<text x="86" y="14" text-anchor="middle" font-size="11" fill="#fff">3</text>
<text x="0" y="50" font-size="14" class="secondary-text">📤 Sent</text>
<text x="0" y="80" font-size="14" class="secondary-text">📝 Drafts</text>
<text x="0" y="110" font-size="14" class="secondary-text">🗑 Trash</text>
</g>
<!-- Middle Panel - Email List -->
<rect x="160" y="50" width="220" height="470" class="panel-bg"/>
<line x1="380" y1="50" x2="380" y2="520" class="divider"/>
<!-- List Header -->
<rect x="160" y="50" width="220" height="35" class="header-bg"/>
<text x="175" y="73" font-size="14" font-weight="500" class="main-text">Inbox</text>
<!-- Email List Items -->
<g transform="translate(160, 90)">
<!-- Email 1 - Unread, Selected -->
<rect x="0" y="0" width="220" height="70" class="selected-row"/>
<circle cx="20" cy="20" r="5" class="unread-dot"/>
<text x="35" y="20" font-size="13" font-weight="600" class="main-text">Project Update</text>
<text x="35" y="38" font-size="12" class="secondary-text">from John</text>
<text x="175" y="20" font-size="11" class="secondary-text">10:30 AM</text>
<line x1="0" y1="70" x2="220" y2="70" class="divider"/>
<!-- Email 2 - Read -->
<rect x="0" y="70" width="220" height="70" class="row-bg"/>
<circle cx="20" cy="90" r="5" fill="none" stroke="#ccc"/>
<text x="35" y="90" font-size="13" class="main-text">Meeting Notes</text>
<text x="35" y="108" font-size="12" class="secondary-text">from Sarah</text>
<text x="175" y="90" font-size="11" class="secondary-text">Yesterday</text>
<line x1="0" y1="140" x2="220" y2="140" class="divider"/>
<!-- Email 3 - Read -->
<rect x="0" y="140" width="220" height="70" class="row-bg"/>
<circle cx="20" cy="160" r="5" fill="none" stroke="#ccc"/>
<text x="35" y="160" font-size="13" class="main-text">Invoice #1234</text>
<text x="35" y="178" font-size="12" class="secondary-text">from Vendor</text>
<text x="175" y="160" font-size="11" class="secondary-text">Mar 15</text>
<line x1="0" y1="210" x2="220" y2="210" class="divider"/>
</g>
<!-- Right Panel - Email Content -->
<rect x="380" y="50" width="490" height="470" rx="8" class="bg"/>
<!-- Email Header -->
<g transform="translate(400, 70)">
<text x="0" y="0" font-size="12" class="secondary-text">From:</text>
<text x="45" y="0" font-size="12" class="main-text">john@company.com</text>
<text x="0" y="25" font-size="12" class="secondary-text">Subject:</text>
<text x="55" y="25" font-size="14" font-weight="600" class="main-text">Project Update</text>
</g>
<!-- Divider -->
<line x1="400" y1="115" x2="850" y2="115" class="divider"/>
<!-- Email Body -->
<g transform="translate(400, 135)">
<text x="0" y="0" font-size="14" class="main-text">Hi,</text>
<text x="0" y="30" font-size="14" class="main-text">Here's the latest update on our project.</text>
<text x="0" y="55" font-size="14" class="main-text">We've completed the first milestone and</text>
<text x="0" y="80" font-size="14" class="main-text">are now moving to phase two.</text>
<text x="0" y="130" font-size="14" class="main-text">Best,</text>
<text x="0" y="155" font-size="14" class="main-text">John</text>
</g>
<!-- Action Buttons -->
<g transform="translate(400, 460)">
<rect x="0" y="0" width="80" height="35" rx="6" class="button"/>
<text x="40" y="23" text-anchor="middle" font-size="13" class="button-text">Reply</text>
<rect x="90" y="0" width="90" height="35" rx="6" class="action-btn"/>
<text x="135" y="23" text-anchor="middle" font-size="13" class="main-text">Forward</text>
<rect x="190" y="0" width="80" height="35" rx="6" class="action-btn"/>
<text x="230" y="23" text-anchor="middle" font-size="13" class="main-text">Delete</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<text x="0" y="0" font-size="11" class="secondary-text">Sidebar: Folders</text>
<text x="150" y="0" font-size="11" class="secondary-text">List: Email threads</text>
<text x="320" y="0" font-size="11" class="secondary-text">Content: Read and reply</text>
<text x="550" y="0" font-size="11" class="secondary-text">Shortcuts: C = Compose | R = Reply | F = Forward</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.6 KiB

139
docs/src/assets/chapter-04/meet-interface.svg
View file

@ -1,139 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #1a1a1a; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #252525; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; font-family: Arial, sans-serif; }
.secondary-text { fill: #aaa; font-family: Arial, sans-serif; }
.icon-text { fill: #ddd; font-family: Arial, sans-serif; }
.divider { stroke: #444; stroke-width: 1; }
.video-frame { fill: #333; stroke: #444; stroke-width: 2; }
.avatar-bg { fill: #4A90E2; }
.control-btn { fill: #444; stroke: #555; stroke-width: 1; }
.control-btn-active { fill: #4A90E2; }
.control-btn-danger { fill: #E74C3C; }
.control-text { fill: #fff; font-family: Arial, sans-serif; }
.timer { fill: #7ED321; font-family: monospace; }
.participant-count { fill: #4A90E2; }
.chat-icon { fill: #fff; }
@media (prefers-color-scheme: light) {
.bg { fill: #2a2a2a; }
.frame { stroke: #444; }
.panel-bg { fill: #333; }
.header-bg { fill: #3a3a3a; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Meet - Video Calls Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header Bar -->
<rect x="30" y="50" width="840" height="45" rx="8" class="header-bg"/>
<rect x="30" y="87" width="840" height="8" class="bg"/>
<!-- Meeting Title -->
<text x="55" y="78" font-size="16" font-weight="500" class="main-text">Meeting Room</text>
<!-- Timer -->
<text x="450" y="78" text-anchor="middle" font-size="16" class="timer">00:15:32</text>
<!-- Header Right Controls -->
<g transform="translate(720, 58)">
<!-- Participants -->
<rect x="0" y="0" width="45" height="30" rx="4" class="control-btn"/>
<text x="15" y="20" font-size="14" class="control-text">👥</text>
<text x="35" y="20" font-size="12" class="participant-count">3</text>
<!-- Chat -->
<rect x="55" y="0" width="35" height="30" rx="4" class="control-btn"/>
<text x="72" y="20" text-anchor="middle" font-size="14" class="chat-icon">💬</text>
</g>
<!-- Divider -->
<line x1="30" y1="95" x2="870" y2="95" class="divider"/>
<!-- Video Grid Area -->
<g transform="translate(50, 110)">
<!-- Main Participant 1 (You) -->
<rect x="0" y="0" width="380" height="220" rx="8" class="video-frame"/>
<circle cx="190" cy="90" r="45" class="avatar-bg"/>
<text x="190" y="100" text-anchor="middle" font-size="32" class="main-text">👤</text>
<text x="190" y="150" text-anchor="middle" font-size="16" class="main-text">You</text>
<text x="190" y="175" text-anchor="middle" font-size="13" class="secondary-text">(Camera)</text>
<!-- Name label -->
<rect x="10" y="190" width="60" height="22" rx="4" fill="#000" opacity="0.6"/>
<text x="40" y="206" text-anchor="middle" font-size="12" class="main-text">You</text>
<!-- Mute indicator -->
<circle cx="355" cy="195" r="12" fill="#E74C3C"/>
<text x="355" y="200" text-anchor="middle" font-size="10" class="main-text">🎤</text>
<!-- Main Participant 2 (John) -->
<rect x="400" y="0" width="380" height="220" rx="8" class="video-frame"/>
<circle cx="590" cy="90" r="45" class="avatar-bg"/>
<text x="590" y="100" text-anchor="middle" font-size="32" class="main-text">👤</text>
<text x="590" y="150" text-anchor="middle" font-size="16" class="main-text">John</text>
<text x="590" y="175" text-anchor="middle" font-size="13" class="secondary-text">(Camera)</text>
<!-- Name label -->
<rect x="410" y="190" width="60" height="22" rx="4" fill="#000" opacity="0.6"/>
<text x="440" y="206" text-anchor="middle" font-size="12" class="main-text">John</text>
<!-- Participant 3 (Sarah) - Smaller -->
<rect x="0" y="235" width="250" height="145" rx="8" class="video-frame"/>
<circle cx="125" cy="290" r="35" class="avatar-bg"/>
<text x="125" y="298" text-anchor="middle" font-size="26" class="main-text">👤</text>
<text x="125" y="340" text-anchor="middle" font-size="14" class="main-text">Sarah</text>
<!-- Name label -->
<rect x="10" y="355" width="55" height="20" rx="4" fill="#000" opacity="0.6"/>
<text x="37" y="369" text-anchor="middle" font-size="11" class="main-text">Sarah</text>
</g>
<!-- Control Bar -->
<rect x="30" y="470" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="470" width="840" height="8" class="bg"/>
<!-- Control Buttons -->
<g transform="translate(200, 480)">
<!-- Mute Button -->
<rect x="0" y="0" width="55" height="38" rx="6" class="control-btn-danger"/>
<text x="27" y="25" text-anchor="middle" font-size="18" class="control-text">🎤</text>
<!-- Video Button -->
<rect x="70" y="0" width="55" height="38" rx="6" class="control-btn-active"/>
<text x="97" y="25" text-anchor="middle" font-size="18" class="control-text">📹</text>
<!-- Share Screen Button -->
<rect x="140" y="0" width="55" height="38" rx="6" class="control-btn"/>
<text x="167" y="25" text-anchor="middle" font-size="18" class="control-text">🖥</text>
<!-- Record Button -->
<rect x="210" y="0" width="55" height="38" rx="6" class="control-btn"/>
<text x="237" y="25" text-anchor="middle" font-size="18" class="control-text">🔴</text>
<!-- Transcribe Button -->
<rect x="280" y="0" width="55" height="38" rx="6" class="control-btn"/>
<text x="307" y="25" text-anchor="middle" font-size="18" class="control-text">📝</text>
<!-- End Call Button -->
<rect x="365" y="0" width="70" height="38" rx="6" class="control-btn-danger"/>
<text x="400" y="25" text-anchor="middle" font-size="18" class="control-text">📞</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<rect x="0" y="-10" width="20" height="14" rx="3" class="control-btn-active"/>
<text x="28" y="0" font-size="11" class="secondary-text">Active</text>
<rect x="80" y="-10" width="20" height="14" rx="3" class="control-btn-danger"/>
<text x="108" y="0" font-size="11" class="secondary-text">Muted/End</text>
<rect x="180" y="-10" width="20" height="14" rx="3" class="control-btn"/>
<text x="208" y="0" font-size="11" class="secondary-text">Available</text>
<text x="350" y="0" font-size="11" class="secondary-text">Shortcuts: M = Mute | V = Video | S = Share | Space = Push-to-talk</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.4 KiB

179
docs/src/assets/chapter-04/paper-interface.svg
View file

@ -1,179 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.toolbar-bg { fill: #f0f0f0; }
.toolbar-btn { fill: #fff; stroke: #ccc; stroke-width: 1; }
.toolbar-btn-active { fill: #e0e0e0; stroke: #999; stroke-width: 1; }
.ai-btn { fill: #BD10E0; }
.ai-text { fill: #fff; font-family: Arial, sans-serif; }
.sidebar-item { fill: none; }
.sidebar-active { fill: #e8f4fd; }
.cursor { stroke: #4A90E2; stroke-width: 2; }
.doc-content { fill: #fff; stroke: #ddd; stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.toolbar-bg { fill: #333; }
.toolbar-btn { fill: #2a2a2a; stroke: #444; }
.toolbar-btn-active { fill: #444; stroke: #555; }
.sidebar-active { fill: #2a3a4a; }
.doc-content { fill: #2a2a2a; stroke: #444; }
.button { fill: #00D4FF; }
.ai-btn { fill: #E040FB; }
.cursor { stroke: #00D4FF; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Paper - AI Writing Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Left Sidebar - Document List -->
<rect x="30" y="50" width="140" height="470" rx="8" class="panel-bg"/>
<line x1="170" y1="50" x2="170" y2="520" class="divider"/>
<!-- Sidebar Header -->
<text x="50" y="78" font-size="14" font-weight="500" class="main-text">📄 Notes</text>
<line x1="40" y1="90" x2="160" y2="90" class="divider"/>
<!-- Document List -->
<g transform="translate(40, 100)">
<!-- Active Document -->
<rect x="-5" y="0" width="125" height="30" rx="4" class="sidebar-active"/>
<text x="0" y="20" font-size="13" class="main-text">Meeting Notes</text>
<text x="0" y="50" font-size="13" class="secondary-text">Project Plan</text>
<text x="0" y="80" font-size="13" class="secondary-text">Ideas</text>
<line x1="-5" y1="100" x2="115" y2="100" class="divider"/>
<text x="0" y="125" font-size="12" font-weight="500" class="secondary-text">Quick Start</text>
<text x="0" y="150" font-size="12" class="secondary-text">📄 Blank</text>
<text x="0" y="175" font-size="12" class="secondary-text">📋 Meeting</text>
<text x="0" y="200" font-size="12" class="secondary-text">✓ To-Do</text>
<text x="0" y="225" font-size="12" class="secondary-text">🔬 Research</text>
</g>
<!-- Main Editor Area -->
<rect x="170" y="50" width="700" height="470" class="bg"/>
<!-- Toolbar -->
<rect x="170" y="50" width="700" height="45" class="toolbar-bg"/>
<line x1="170" y1="95" x2="870" y2="95" class="divider"/>
<!-- Formatting Buttons -->
<g transform="translate(185, 58)">
<!-- Bold -->
<rect x="0" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="15" y="20" text-anchor="middle" font-size="14" font-weight="bold" class="icon-text">B</text>
<!-- Italic -->
<rect x="35" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="50" y="20" text-anchor="middle" font-size="14" font-style="italic" class="icon-text">I</text>
<!-- Underline -->
<rect x="70" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="85" y="20" text-anchor="middle" font-size="14" class="icon-text" text-decoration="underline">U</text>
<!-- Separator -->
<line x1="110" y1="5" x2="110" y2="25" class="divider"/>
<!-- H1 -->
<rect x="120" y="0" width="30" height="28" rx="4" class="toolbar-btn-active"/>
<text x="135" y="20" text-anchor="middle" font-size="12" font-weight="bold" class="icon-text">H1</text>
<!-- H2 -->
<rect x="155" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="170" y="20" text-anchor="middle" font-size="12" class="icon-text">H2</text>
<!-- Separator -->
<line x1="195" y1="5" x2="195" y2="25" class="divider"/>
<!-- Bullet List -->
<rect x="205" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="220" y="20" text-anchor="middle" font-size="14" class="icon-text">•</text>
<!-- Horizontal Rule -->
<rect x="240" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="255" y="20" text-anchor="middle" font-size="14" class="icon-text">―</text>
<!-- Link -->
<rect x="275" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="290" y="20" text-anchor="middle" font-size="14" class="icon-text">🔗</text>
<!-- Image -->
<rect x="310" y="0" width="30" height="28" rx="4" class="toolbar-btn"/>
<text x="325" y="20" text-anchor="middle" font-size="14" class="icon-text">📷</text>
<!-- AI Button -->
<rect x="360" y="0" width="70" height="28" rx="4" class="ai-btn"/>
<text x="395" y="19" text-anchor="middle" font-size="12" class="ai-text">AI ✨</text>
</g>
<!-- Document Content Area -->
<rect x="190" y="110" width="660" height="395" rx="4" class="doc-content"/>
<!-- Document Content -->
<g transform="translate(210, 135)">
<!-- Title -->
<text x="0" y="0" font-size="24" font-weight="bold" class="main-text">Project Proposal</text>
<line x1="0" y1="10" x2="200" y2="10" stroke="#4A90E2" stroke-width="3"/>
<!-- Section -->
<text x="0" y="55" font-size="18" font-weight="600" class="main-text">Introduction</text>
<line x1="0" y1="65" x2="100" y2="65" class="divider"/>
<!-- Body text -->
<text x="0" y="95" font-size="14" class="main-text">This document outlines our proposal for</text>
<text x="0" y="118" font-size="14" class="main-text">the upcoming project. We aim to deliver</text>
<text x="0" y="141" font-size="14" class="main-text">a comprehensive solution that addresses</text>
<text x="0" y="164" font-size="14" class="main-text">all stakeholder requirements.</text>
<!-- Cursor -->
<line x1="248" y1="150" x2="248" y2="170" class="cursor"/>
<!-- More content preview -->
<text x="0" y="210" font-size="18" font-weight="600" class="secondary-text">Key Objectives</text>
<text x="0" y="240" font-size="14" class="secondary-text">• Improve efficiency by 30%</text>
<text x="0" y="263" font-size="14" class="secondary-text">• Reduce costs through automation</text>
<text x="0" y="286" font-size="14" class="secondary-text">• Enhance user experience</text>
</g>
<!-- Word Count / Status Bar -->
<g transform="translate(190, 490)">
<text x="0" y="0" font-size="11" class="secondary-text">Words: 156</text>
<text x="100" y="0" font-size="11" class="secondary-text">Characters: 892</text>
<text x="250" y="0" font-size="11" class="secondary-text">Reading time: 1 min</text>
<text x="480" y="0" font-size="11" class="secondary-text">✓ Auto-saved 2 min ago</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<rect x="0" y="-10" width="20" height="14" rx="3" class="ai-btn"/>
<text x="28" y="0" font-size="11" class="secondary-text">AI Assist</text>
<text x="100" y="0" font-size="11" class="secondary-text">Shortcuts: Ctrl+B = Bold | Ctrl+I = Italic | Ctrl+S = Save | Ctrl+/ = AI</text>
<text x="550" y="0" font-size="11" class="secondary-text">Markdown supported</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.9 KiB

168
docs/src/assets/chapter-04/research-interface.svg
View file

@ -1,168 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.search-box { fill: #fff; stroke: #4A90E2; stroke-width: 2; }
.filter-active { fill: #4A90E2; }
.filter-inactive { fill: #e0e0e0; }
.result-card { fill: #fff; stroke: #ddd; stroke-width: 1; }
.source-link { fill: #4A90E2; font-family: Arial, sans-serif; }
.sidebar-item { fill: none; }
.sidebar-active { fill: #e8f4fd; }
.collection-icon { fill: #F5A623; }
.ai-highlight { fill: #f0e6ff; stroke: #BD10E0; stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.search-box { fill: #2a2a2a; stroke: #00D4FF; }
.filter-inactive { fill: #333; }
.result-card { fill: #2a2a2a; stroke: #444; }
.source-link { fill: #00D4FF; }
.sidebar-active { fill: #2a3a4a; }
.button { fill: #00D4FF; }
.filter-active { fill: #00D4FF; }
.ai-highlight { fill: #2a2040; stroke: #E040FB; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Research - AI Search Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Left Sidebar -->
<rect x="30" y="50" width="140" height="470" rx="8" class="panel-bg"/>
<line x1="170" y1="50" x2="170" y2="520" class="divider"/>
<!-- Sidebar Header -->
<text x="50" y="78" font-size="14" font-weight="500" class="main-text">🔍 Research</text>
<line x1="40" y1="90" x2="160" y2="90" class="divider"/>
<!-- Focus Filters -->
<g transform="translate(40, 105)">
<text x="0" y="0" font-size="12" font-weight="500" class="secondary-text">Focus:</text>
<!-- All - Active -->
<rect x="-5" y="10" width="115" height="26" rx="4" class="sidebar-active"/>
<text x="5" y="28" font-size="13" class="main-text">🌐 All</text>
<text x="5" y="58" font-size="13" class="secondary-text">📚 Academic</text>
<text x="5" y="83" font-size="13" class="secondary-text">💻 Code</text>
<text x="5" y="108" font-size="13" class="secondary-text">🏠 Internal</text>
<line x1="-5" y1="125" x2="115" y2="125" class="divider"/>
<!-- Collections -->
<text x="0" y="145" font-size="12" font-weight="500" class="secondary-text">Collections:</text>
<text x="5" y="170" font-size="13" class="collection-icon">📁</text>
<text x="25" y="170" font-size="13" class="main-text">Project A</text>
<text x="5" y="195" font-size="13" class="collection-icon">📁</text>
<text x="25" y="195" font-size="13" class="main-text">References</text>
<line x1="-5" y1="215" x2="115" y2="215" class="divider"/>
<!-- Recent Searches -->
<text x="0" y="235" font-size="12" font-weight="500" class="secondary-text">Recent:</text>
<text x="5" y="258" font-size="12" class="secondary-text">• market size</text>
<text x="5" y="278" font-size="12" class="secondary-text">• competitors</text>
<text x="5" y="298" font-size="12" class="secondary-text">• best practices</text>
</g>
<!-- Main Content Area -->
<rect x="170" y="50" width="700" height="470" class="bg"/>
<!-- Search Box -->
<g transform="translate(190, 70)">
<rect x="0" y="0" width="640" height="50" rx="25" class="search-box"/>
<text x="25" y="32" font-size="16" class="secondary-text">What are the best practices for...</text>
<circle cx="610" cy="25" r="18" class="button"/>
<text x="610" y="31" text-anchor="middle" font-size="16" fill="#fff">→</text>
</g>
<!-- AI Answer Section -->
<g transform="translate(190, 140)">
<rect x="0" y="0" width="640" height="180" rx="8" class="ai-highlight"/>
<!-- Header -->
<text x="20" y="30" font-size="16" font-weight="600" class="main-text">AI Answer:</text>
<line x1="20" y1="42" x2="100" y2="42" stroke="#BD10E0" stroke-width="2"/>
<!-- Answer Content -->
<text x="20" y="70" font-size="14" class="main-text">Based on multiple sources, here are the key best practices:</text>
<text x="20" y="100" font-size="14" class="main-text">1. Start with clear requirements and objectives</text>
<text x="20" y="122" font-size="14" class="main-text">2. Use iterative development with frequent feedback</text>
<text x="20" y="144" font-size="14" class="main-text">3. Test early and often with real users</text>
<text x="20" y="166" font-size="14" class="main-text">4. Document decisions and maintain knowledge base</text>
</g>
<!-- Sources Section -->
<g transform="translate(190, 335)">
<text x="0" y="0" font-size="14" font-weight="600" class="main-text">Sources:</text>
<!-- Source Cards -->
<rect x="0" y="15" width="200" height="70" rx="6" class="result-card"/>
<text x="10" y="35" font-size="11" class="secondary-text">[1]</text>
<text x="30" y="35" font-size="12" class="source-link">industry-guide.com</text>
<text x="10" y="55" font-size="11" class="secondary-text">Best practices for software</text>
<text x="10" y="70" font-size="11" class="secondary-text">development in 2024...</text>
<rect x="215" y="15" width="200" height="70" rx="6" class="result-card"/>
<text x="225" y="35" font-size="11" class="secondary-text">[2]</text>
<text x="245" y="35" font-size="12" class="source-link">techblog.dev</text>
<text x="225" y="55" font-size="11" class="secondary-text">Modern development</text>
<text x="225" y="70" font-size="11" class="secondary-text">methodology overview...</text>
<rect x="430" y="15" width="200" height="70" rx="6" class="result-card"/>
<text x="440" y="35" font-size="11" class="secondary-text">[3]</text>
<text x="460" y="35" font-size="12" class="source-link">your-docs/guidelines.pdf</text>
<text x="440" y="55" font-size="11" class="secondary-text">📄 Internal document</text>
<text x="440" y="70" font-size="11" class="secondary-text">Company guidelines...</text>
</g>
<!-- Action Buttons -->
<g transform="translate(190, 430)">
<rect x="0" y="0" width="100" height="32" rx="6" class="button"/>
<text x="50" y="21" text-anchor="middle" font-size="12" class="button-text">📁 Save</text>
<rect x="110" y="0" width="100" height="32" rx="6" class="input-field"/>
<text x="160" y="21" text-anchor="middle" font-size="12" class="main-text">📤 Share</text>
<rect x="220" y="0" width="120" height="32" rx="6" class="input-field"/>
<text x="280" y="21" text-anchor="middle" font-size="12" class="main-text">🔄 Deep Dive</text>
<rect x="350" y="0" width="100" height="32" rx="6" class="input-field"/>
<text x="400" y="21" text-anchor="middle" font-size="12" class="main-text">📋 Copy</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<rect x="0" y="-10" width="20" height="14" rx="3" class="ai-highlight"/>
<text x="28" y="0" font-size="11" class="secondary-text">AI Summary</text>
<rect x="100" y="-10" width="20" height="14" rx="3" class="result-card"/>
<text x="128" y="0" font-size="11" class="secondary-text">Sources</text>
<text x="220" y="0" font-size="11" class="secondary-text">Focus: Web • Academic • Code • Internal docs</text>
<text x="550" y="0" font-size="11" class="secondary-text">Enter = Search | Ctrl+S = Save</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8 KiB

206
docs/src/assets/chapter-04/sources-interface.svg
View file

@ -1,206 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.panel-bg { fill: #fafafa; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.tab-active { fill: #4A90E2; }
.tab-inactive { fill: #e0e0e0; }
.card { fill: #fff; stroke: #ddd; stroke-width: 1; }
.card-featured { fill: #fff; stroke: #4A90E2; stroke-width: 2; }
.sidebar-active { fill: #e8f4fd; }
.category-icon { fill: #666; }
.star-icon { fill: #F5A623; }
.tag { fill: #e8f4fd; stroke: #4A90E2; stroke-width: 1; }
.tag-text { fill: #4A90E2; font-family: Arial, sans-serif; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.panel-bg { fill: #222; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.tab-inactive { fill: #333; }
.card { fill: #2a2a2a; stroke: #444; }
.card-featured { fill: #2a2a2a; stroke: #00D4FF; }
.sidebar-active { fill: #2a3a4a; }
.button { fill: #00D4FF; }
.tab-active { fill: #00D4FF; }
.tag { fill: #1a2a3a; stroke: #00D4FF; }
.tag-text { fill: #00D4FF; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Sources - Prompts &amp; Templates Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header -->
<rect x="30" y="50" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="92" width="840" height="8" class="bg"/>
<!-- Title -->
<text x="55" y="82" font-size="16" font-weight="600" class="main-text">Sources</text>
<!-- Search Bar -->
<g transform="translate(580, 60)">
<rect x="0" y="0" width="200" height="32" rx="16" class="input-field"/>
<text x="20" y="21" font-size="13" class="secondary-text">🔍 Search...</text>
</g>
<!-- Divider -->
<line x1="30" y1="100" x2="870" y2="100" class="divider"/>
<!-- Tabs -->
<g transform="translate(50, 110)">
<rect x="0" y="0" width="90" height="32" rx="4" class="tab-active"/>
<text x="45" y="21" text-anchor="middle" font-size="12" fill="#fff">Prompts</text>
<rect x="100" y="0" width="95" height="32" rx="4" class="tab-inactive"/>
<text x="147" y="21" text-anchor="middle" font-size="12" class="main-text">Templates</text>
<rect x="205" y="0" width="105" height="32" rx="4" class="tab-inactive"/>
<text x="257" y="21" text-anchor="middle" font-size="12" class="main-text">MCP Servers</text>
<rect x="320" y="0" width="95" height="32" rx="4" class="tab-inactive"/>
<text x="367" y="21" text-anchor="middle" font-size="12" class="main-text">LLM Tools</text>
<rect x="425" y="0" width="80" height="32" rx="4" class="tab-inactive"/>
<text x="465" y="21" text-anchor="middle" font-size="12" class="main-text">Models</text>
</g>
<!-- Divider -->
<line x1="50" y1="155" x2="850" y2="155" class="divider"/>
<!-- Left Sidebar - Categories -->
<rect x="30" y="155" width="130" height="365" class="panel-bg"/>
<line x1="160" y1="155" x2="160" y2="520" class="divider"/>
<!-- Categories -->
<g transform="translate(40, 170)">
<text x="0" y="0" font-size="12" font-weight="500" class="secondary-text">Categories</text>
<line x1="0" y1="10" x2="110" y2="10" class="divider"/>
<!-- Category Items -->
<rect x="-5" y="20" width="115" height="28" rx="4" class="sidebar-active"/>
<text x="5" y="39" font-size="13" class="main-text">📝 Writing</text>
<text x="5" y="70" font-size="13" class="secondary-text">📊 Analysis</text>
<text x="5" y="98" font-size="13" class="secondary-text">💼 Business</text>
<text x="5" y="126" font-size="13" class="secondary-text">💻 Code</text>
<text x="5" y="154" font-size="13" class="secondary-text">🎨 Creative</text>
<text x="5" y="182" font-size="13" class="secondary-text">🤖 Automation</text>
<text x="5" y="210" font-size="13" class="secondary-text">📞 Support</text>
</g>
<!-- Main Content Area -->
<g transform="translate(175, 170)">
<!-- Featured Section -->
<text x="0" y="0" font-size="14" font-weight="500" class="main-text">⭐ Featured</text>
<!-- Card 1: Customer Service -->
<rect x="0" y="20" width="210" height="150" rx="8" class="card-featured"/>
<text x="15" y="50" font-size="15" font-weight="500" class="main-text">Customer</text>
<text x="15" y="70" font-size="15" font-weight="500" class="main-text">Service</text>
<line x1="15" y1="80" x2="195" y2="80" class="divider"/>
<text x="15" y="100" font-size="12" class="secondary-text">Handle support</text>
<text x="15" y="118" font-size="12" class="secondary-text">inquiries with AI</text>
<text x="15" y="136" font-size="12" class="secondary-text">assistance</text>
<!-- Use Button -->
<rect x="15" y="145" width="60" height="24" rx="4" class="button"/>
<text x="45" y="162" text-anchor="middle" font-size="11" class="button-text">Use</text>
<!-- Star -->
<text x="180" y="50" font-size="14" class="star-icon">★</text>
<!-- Card 2: Sales Assistant -->
<rect x="225" y="20" width="210" height="150" rx="8" class="card-featured"/>
<text x="240" y="50" font-size="15" font-weight="500" class="main-text">Sales</text>
<text x="240" y="70" font-size="15" font-weight="500" class="main-text">Assistant</text>
<line x1="240" y1="80" x2="420" y2="80" class="divider"/>
<text x="240" y="100" font-size="12" class="secondary-text">Qualify leads and</text>
<text x="240" y="118" font-size="12" class="secondary-text">schedule meetings</text>
<text x="240" y="136" font-size="12" class="secondary-text">automatically</text>
<!-- Use Button -->
<rect x="240" y="145" width="60" height="24" rx="4" class="button"/>
<text x="270" y="162" text-anchor="middle" font-size="11" class="button-text">Use</text>
<!-- Star -->
<text x="405" y="50" font-size="14" class="star-icon">★</text>
<!-- Card 3: Code Helper -->
<rect x="450" y="20" width="210" height="150" rx="8" class="card"/>
<text x="465" y="50" font-size="15" font-weight="500" class="main-text">Code</text>
<text x="465" y="70" font-size="15" font-weight="500" class="main-text">Helper</text>
<line x1="465" y1="80" x2="645" y2="80" class="divider"/>
<text x="465" y="100" font-size="12" class="secondary-text">Generate and</text>
<text x="465" y="118" font-size="12" class="secondary-text">explain code</text>
<text x="465" y="136" font-size="12" class="secondary-text">snippets</text>
<!-- Use Button -->
<rect x="465" y="145" width="60" height="24" rx="4" class="button"/>
<text x="495" y="162" text-anchor="middle" font-size="11" class="button-text">Use</text>
<!-- More Templates Section -->
<text x="0" y="200" font-size="14" font-weight="500" class="main-text">All Prompts</text>
<!-- Smaller Cards Row -->
<rect x="0" y="220" width="155" height="100" rx="6" class="card"/>
<text x="15" y="245" font-size="13" font-weight="500" class="main-text">Meeting Notes</text>
<text x="15" y="265" font-size="11" class="secondary-text">Summarize meetings</text>
<rect x="15" y="280" width="50" height="22" rx="3" class="tag"/>
<text x="40" y="295" text-anchor="middle" font-size="10" class="tag-text">Writing</text>
<rect x="105" y="280" width="40" height="22" rx="4" class="button"/>
<text x="125" y="295" text-anchor="middle" font-size="10" class="button-text">Use</text>
<rect x="165" y="220" width="155" height="100" rx="6" class="card"/>
<text x="180" y="245" font-size="13" font-weight="500" class="main-text">Data Analyst</text>
<text x="180" y="265" font-size="11" class="secondary-text">Analyze datasets</text>
<rect x="180" y="280" width="55" height="22" rx="3" class="tag"/>
<text x="207" y="295" text-anchor="middle" font-size="10" class="tag-text">Analysis</text>
<rect x="270" y="280" width="40" height="22" rx="4" class="button"/>
<text x="290" y="295" text-anchor="middle" font-size="10" class="button-text">Use</text>
<rect x="330" y="220" width="155" height="100" rx="6" class="card"/>
<text x="345" y="245" font-size="13" font-weight="500" class="main-text">Email Writer</text>
<text x="345" y="265" font-size="11" class="secondary-text">Draft pro emails</text>
<rect x="345" y="280" width="55" height="22" rx="3" class="tag"/>
<text x="372" y="295" text-anchor="middle" font-size="10" class="tag-text">Business</text>
<rect x="435" y="280" width="40" height="22" rx="4" class="button"/>
<text x="455" y="295" text-anchor="middle" font-size="10" class="button-text">Use</text>
<rect x="495" y="220" width="155" height="100" rx="6" class="card"/>
<text x="510" y="245" font-size="13" font-weight="500" class="main-text">Story Writer</text>
<text x="510" y="265" font-size="11" class="secondary-text">Creative stories</text>
<rect x="510" y="280" width="55" height="22" rx="3" class="tag"/>
<text x="537" y="295" text-anchor="middle" font-size="10" class="tag-text">Creative</text>
<rect x="600" y="280" width="40" height="22" rx="4" class="button"/>
<text x="620" y="295" text-anchor="middle" font-size="10" class="button-text">Use</text>
</g>
<!-- Pagination -->
<g transform="translate(400, 500)">
<text x="0" y="0" font-size="12" class="secondary-text">Page 1 of 5</text>
<rect x="80" y="-15" width="30" height="22" rx="4" class="input-field"/>
<text x="95" y="2" text-anchor="middle" font-size="12" class="main-text">←</text>
<rect x="115" y="-15" width="30" height="22" rx="4" class="input-field"/>
<text x="130" y="2" text-anchor="middle" font-size="12" class="main-text">→</text>
</g>
<!-- Legend -->
<g transform="translate(30, 535)">
<text x="0" y="0" font-size="11" class="secondary-text">Tabs: Prompts, Templates, MCP Servers, LLM Tools, Models</text>
<text x="350" y="0" font-size="11" class="secondary-text">Categories filter content</text>
<text x="550" y="0" font-size="11" class="secondary-text">Click Use to apply prompt/template</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

82
docs/src/assets/chapter-04/suite-main-layout.svg
View file

@ -1,82 +0,0 @@
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.header-bg { fill: #e0e0e0; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ccc; stroke-width: 1; }
.button { fill: #fff; stroke: #999; stroke-width: 1; rx: 4; }
.input-field { fill: #fff; stroke: #bbb; stroke-width: 1; }
.accent { fill: #4A90E2; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.button { fill: #333; stroke: #555; }
.input-field { fill: #2a2a2a; stroke: #444; }
.accent { fill: #00D4FF; }
}
</style>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Suite - Main Layout</text>
<!-- Main Frame -->
<rect x="50" y="50" width="700" height="420" rx="8" class="frame bg"/>
<!-- Header Bar -->
<rect x="50" y="50" width="700" height="50" rx="8" class="header-bg"/>
<rect x="50" y="92" width="700" height="8" class="bg"/>
<!-- Logo/Brand -->
<circle cx="85" cy="75" r="15" class="accent"/>
<text x="85" y="80" text-anchor="middle" font-size="14" fill="#fff">🤖</text>
<text x="115" y="80" font-size="16" font-weight="600" class="main-text">General Bots</text>
<!-- Header Right Controls -->
<g transform="translate(620, 60)">
<!-- Apps Menu -->
<rect x="0" y="0" width="35" height="30" rx="4" class="button"/>
<text x="17" y="20" text-anchor="middle" font-size="12" class="icon-text">⋮⋮⋮</text>
<!-- Theme Toggle -->
<rect x="45" y="0" width="35" height="30" rx="4" class="button"/>
<text x="62" y="20" text-anchor="middle" font-size="14" class="icon-text">🌙</text>
<!-- User Avatar -->
<circle cx="110" cy="15" r="15" class="accent"/>
<text x="110" y="20" text-anchor="middle" font-size="12" fill="#fff">U</text>
</g>
<!-- Divider -->
<line x1="50" y1="100" x2="750" y2="100" class="divider"/>
<!-- Main Chat Area -->
<rect x="70" y="120" width="660" height="280" rx="6" class="input-field"/>
<!-- Chat Area Label -->
<text x="400" y="200" text-anchor="middle" font-size="24" class="secondary-text">💬</text>
<text x="400" y="240" text-anchor="middle" font-size="18" class="main-text">Chat</text>
<text x="400" y="265" text-anchor="middle" font-size="14" class="secondary-text">(Main Area)</text>
<!-- Message Input -->
<rect x="70" y="420" width="580" height="40" rx="20" class="input-field"/>
<text x="100" y="445" font-size="14" class="secondary-text">Type your message here...</text>
<!-- Send Button -->
<rect x="660" y="420" width="70" height="40" rx="20" class="accent"/>
<text x="695" y="445" text-anchor="middle" font-size="14" fill="#fff">Send</text>
<!-- Legend -->
<g transform="translate(50, 480)">
<text x="0" y="0" font-size="11" class="secondary-text">Header: Navigation, Apps Menu, Theme, Profile</text>
<text x="400" y="0" font-size="11" class="secondary-text">Main: AI Chat Interface with Message Input</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

151
docs/src/assets/chapter-04/tasks-interface.svg
View file

@ -1,151 +0,0 @@
<svg width="900" height="550" xmlns="http://www.w3.org/2000/svg">
<style>
.bg { fill: #f5f5f5; }
.frame { fill: none; stroke: #333; stroke-width: 2; }
.header-bg { fill: #e8e8e8; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.icon-text { fill: #333; font-family: Arial, sans-serif; }
.divider { stroke: #ddd; stroke-width: 1; }
.button { fill: #4A90E2; }
.button-text { fill: #fff; font-family: Arial, sans-serif; }
.input-field { fill: #fff; stroke: #ccc; stroke-width: 1; }
.tab-active { fill: #4A90E2; }
.tab-inactive { fill: #e0e0e0; }
.priority-high { fill: #E74C3C; }
.priority-medium { fill: #F5A623; }
.priority-low { fill: #7ED321; }
.checkbox { fill: #fff; stroke: #999; stroke-width: 1.5; }
.checkbox-done { fill: #7ED321; stroke: #5cb318; stroke-width: 1.5; }
.task-done { fill: #999; text-decoration: line-through; }
.row-bg { fill: #fff; }
.row-hover { fill: #f0f7ff; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.frame { stroke: #555; }
.header-bg { fill: #2a2a2a; }
.main-text { fill: #ffffff; }
.secondary-text { fill: #aaa; }
.icon-text { fill: #ddd; }
.divider { stroke: #444; }
.input-field { fill: #2a2a2a; stroke: #444; }
.tab-inactive { fill: #333; }
.checkbox { fill: #2a2a2a; stroke: #666; }
.row-bg { fill: #222; }
.row-hover { fill: #2a3a4a; }
.button { fill: #00D4FF; }
.tab-active { fill: #00D4FF; }
}
</style>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Tasks - To-Do Management Interface</text>
<!-- Main Frame -->
<rect x="30" y="50" width="840" height="470" rx="8" class="frame bg"/>
<!-- Header -->
<rect x="30" y="50" width="840" height="50" rx="8" class="header-bg"/>
<rect x="30" y="92" width="840" height="8" class="bg"/>
<!-- Title and Stats -->
<text x="55" y="82" font-size="18" font-weight="600" class="main-text">✓ Tasks</text>
<g transform="translate(600, 65)">
<text x="0" y="15" font-size="12" class="secondary-text">Total: </text>
<text x="40" y="15" font-size="12" font-weight="600" class="main-text">12</text>
<text x="70" y="15" font-size="12" class="secondary-text">Active: </text>
<text x="115" y="15" font-size="12" font-weight="600" class="main-text">5</text>
<text x="140" y="15" font-size="12" class="secondary-text">Done: </text>
<text x="180" y="15" font-size="12" font-weight="600" class="main-text">7</text>
</g>
<!-- Divider -->
<line x1="30" y1="100" x2="870" y2="100" class="divider"/>
<!-- Add Task Input -->
<g transform="translate(50, 115)">
<rect x="0" y="0" width="620" height="40" rx="6" class="input-field"/>
<text x="15" y="26" font-size="14" class="secondary-text">What needs to be done?</text>
<!-- Category Dropdown -->
<rect x="640" y="0" width="100" height="40" rx="6" class="input-field"/>
<text x="655" y="26" font-size="13" class="secondary-text">Category ▼</text>
<!-- Add Button -->
<rect x="755" y="0" width="60" height="40" rx="6" class="button"/>
<text x="785" y="26" text-anchor="middle" font-size="13" class="button-text">+ Add</text>
</g>
<!-- Divider -->
<line x1="50" y1="170" x2="850" y2="170" class="divider"/>
<!-- Filter Tabs -->
<g transform="translate(50, 185)">
<rect x="0" y="0" width="90" height="32" rx="4" class="tab-active"/>
<text x="45" y="21" text-anchor="middle" font-size="13" fill="#fff">📋 All (12)</text>
<rect x="100" y="0" width="100" height="32" rx="4" class="tab-inactive"/>
<text x="150" y="21" text-anchor="middle" font-size="13" class="main-text">⏳ Active (5)</text>
<rect x="210" y="0" width="120" height="32" rx="4" class="tab-inactive"/>
<text x="270" y="21" text-anchor="middle" font-size="13" class="main-text">✓ Completed (7)</text>
<rect x="340" y="0" width="100" height="32" rx="4" class="tab-inactive"/>
<text x="390" y="21" text-anchor="middle" font-size="13" class="main-text">⚡ Priority</text>
</g>
<!-- Divider -->
<line x1="50" y1="230" x2="850" y2="230" class="divider"/>
<!-- Task List -->
<g transform="translate(50, 245)">
<!-- Task 1 - High Priority -->
<rect x="0" y="0" width="800" height="45" rx="4" class="row-hover"/>
<rect x="15" y="12" width="20" height="20" rx="4" class="checkbox"/>
<text x="50" y="28" font-size="14" class="main-text">Review quarterly report</text>
<text x="550" y="28" font-size="13" class="secondary-text">📅 Today</text>
<circle cx="780" cy="22" r="8" class="priority-high"/>
<!-- Task 2 - Medium Priority -->
<rect x="0" y="50" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="62" width="20" height="20" rx="4" class="checkbox"/>
<text x="50" y="78" font-size="14" class="main-text">Call client about proposal</text>
<text x="550" y="78" font-size="13" class="secondary-text">📅 Today</text>
<circle cx="780" cy="72" r="8" class="priority-medium"/>
<!-- Task 3 - Low Priority -->
<rect x="0" y="100" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="112" width="20" height="20" rx="4" class="checkbox"/>
<text x="50" y="128" font-size="14" class="main-text">Update project documentation</text>
<text x="550" y="128" font-size="13" class="secondary-text">📅 Tomorrow</text>
<circle cx="780" cy="122" r="8" class="priority-low"/>
<!-- Task 4 - Completed -->
<rect x="0" y="150" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="162" width="20" height="20" rx="4" class="checkbox-done"/>
<text x="22" y="178" font-size="12" fill="#fff">✓</text>
<text x="50" y="178" font-size="14" class="task-done">Send meeting notes</text>
<text x="550" y="178" font-size="13" class="secondary-text">✓ Done</text>
<!-- Task 5 - Completed -->
<rect x="0" y="200" width="800" height="45" rx="4" class="row-bg"/>
<rect x="15" y="212" width="20" height="20" rx="4" class="checkbox-done"/>
<text x="22" y="228" font-size="12" fill="#fff">✓</text>
<text x="50" y="228" font-size="14" class="task-done">Complete expense report</text>
<text x="550" y="228" font-size="13" class="secondary-text">✓ Done</text>
</g>
<!-- Priority Legend -->
<g transform="translate(50, 505)">
<text x="0" y="0" font-size="12" font-weight="500" class="secondary-text">Priority:</text>
<circle cx="70" cy="-4" r="6" class="priority-high"/>
<text x="82" y="0" font-size="11" class="secondary-text">High</text>
<circle cx="130" cy="-4" r="6" class="priority-medium"/>
<text x="142" y="0" font-size="11" class="secondary-text">Medium</text>
<circle cx="210" cy="-4" r="6" class="priority-low"/>
<text x="222" y="0" font-size="11" class="secondary-text">Low</text>
<text x="350" y="0" font-size="11" class="secondary-text">Shortcuts: Enter = Add | Space = Toggle | Delete = Remove</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7 KiB

175
docs/src/assets/chapter-06/basic-execution-flow.svg
View file

@ -1,175 +0,0 @@
<svg width="800" height="420" viewBox="0 0 800 420" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and filters -->
<defs>
<!-- Soft glow filter -->
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Beautiful gradients with colors -->
<linearGradient id="userGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="llmGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06ffa5;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00d2ff;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="toolGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffa500;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="responseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="memoryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="directPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#34d399;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="toolPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#fbbf24;stop-opacity:0.3" />
</linearGradient>
<!-- Arrow markers -->
<marker id="arrow" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#4a5568" opacity="0.7"/>
</marker>
<marker id="arrowGreen" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#10b981" opacity="0.8"/>
</marker>
<marker id="arrowOrange" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#f59e0b" opacity="0.8"/>
</marker>
<!-- Drop shadow effect -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="800" height="420" fill="#fafafa"/>
<!-- Background accent circles for depth -->
<circle cx="120" cy="90" r="45" fill="#667eea" opacity="0.04"/>
<circle cx="400" cy="90" r="65" fill="#00d2ff" opacity="0.04"/>
<circle cx="650" cy="90" r="40" fill="#ffa500" opacity="0.04"/>
<circle cx="650" cy="230" r="50" fill="#ff6b6b" opacity="0.04"/>
<circle cx="400" cy="330" r="55" fill="#4facfe" opacity="0.04"/>
<!-- Title with background -->
<rect x="250" y="15" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
<text x="400" y="38" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="23" font-weight="600" fill="#1e293b">
BASIC LLM Tool Execution Flow
</text>
<!-- Stage 1: User Input -->
<rect x="50" y="70" width="140" height="55" fill="url(#userGrad)" stroke="#667eea" stroke-width="2" rx="10" filter="url(#shadow)"/>
<text x="120" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">USER</text>
<text x="120" y="112" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">"What's the policy?"</text>
<!-- Elegant flow arrow 1 -->
<path d="M 190 97 C 220 97, 230 97, 260 97" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
<!-- Stage 2: LLM Processing -->
<rect x="260" y="70" width="280" height="55" fill="url(#llmGrad)" stroke="#00d2ff" stroke-width="2" rx="10" filter="url(#shadow)"/>
<text x="400" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">LLM + CONTEXT</text>
<text x="400" y="112" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Understands intent + loaded KBs</text>
<!-- Elegant flow arrow 2 -->
<path d="M 540 97 C 560 97, 580 97, 600 97" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
<!-- Stage 3: Decision Diamond -->
<g filter="url(#glow)">
<path d="M 650 70 L 700 97 L 650 124 L 600 97 Z" fill="rgba(139, 92, 246, 0.15)" stroke="#8b5cf6" stroke-width="2.5"/>
<circle cx="650" cy="97" r="10" fill="#8b5cf6" opacity="0.3"/>
<text x="650" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">Tool?</text>
</g>
<!-- Direct Response Path - graceful curve -->
<path d="M 650 70 C 650 40, 500 40, 400 40 C 280 40, 140 40, 140 170"
stroke="url(#directPathGrad)" stroke-width="2.5" fill="none" marker-end="url(#arrowGreen)"
stroke-dasharray="8,4" opacity="0.6" stroke-linecap="round"/>
<!-- Label for direct path -->
<rect x="350" y="25" width="100" height="22" fill="rgba(16, 185, 129, 0.1)" rx="5"/>
<text x="400" y="40" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#047857">Direct Answer</text>
<!-- Tool Path - smooth descent -->
<path d="M 650 124 C 650 160, 650 170, 650 200" stroke="url(#toolPathGrad)" stroke-width="3" fill="none" marker-end="url(#arrowOrange)" opacity="0.8" stroke-linecap="round"/>
<!-- Label for tool path -->
<text x="670" y="165" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#d97706">Call Tool</text>
<!-- Stage 4: BASIC Tool -->
<rect x="560" y="200" width="180" height="75" fill="url(#toolGrad)" stroke="#ff6b6b" stroke-width="2" rx="10" filter="url(#shadow)"/>
<text x="650" y="225" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">BASIC TOOL</text>
<text x="650" y="245" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">enrollment.bas</text>
<text x="650" y="260" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">PARAM name, course</text>
<!-- Tool Return Path - smooth curve -->
<path d="M 560 237 C 490 237, 430 220, 400 195" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.6" stroke-linecap="round"/>
<!-- Stage 5: Response Generation -->
<rect x="310" y="170" width="180" height="55" fill="url(#responseGrad)" stroke="#4facfe" stroke-width="2" rx="10" filter="url(#shadow)"/>
<text x="400" y="195" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">RESPONSE</text>
<text x="400" y="212" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Generate natural answer</text>
<!-- Final Arrow -->
<path d="M 310 197 C 280 197, 240 197, 210 197" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
<!-- Stage 6: Bot Output -->
<rect x="50" y="170" width="140" height="55" fill="url(#userGrad)" stroke="#764ba2" stroke-width="2" rx="10" filter="url(#shadow)"/>
<text x="120" y="195" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">BOT</text>
<text x="120" y="212" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">"30-day return..."</text>
<!-- Memory Store - elegant and subtle -->
<rect x="350" y="290" width="320" height="55" fill="url(#memoryGrad)" stroke="#f5576c" stroke-width="1.5" stroke-dasharray="6,3" rx="10" opacity="0.8"/>
<text x="510" y="315" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="500" fill="#1e293b">MEMORY STORE</text>
<text x="510" y="332" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">BOT_MEMORY • Session State • Context</text>
<!-- Memory connection - delicate -->
<path d="M 650 275 L 650 290" stroke="#f5576c" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.4"/>
<path d="M 400 225 L 400 290" stroke="#4facfe" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.4"/>
<!-- Performance metrics -->
<rect x="50" y="370" width="700" height="35" fill="rgba(99, 102, 241, 0.05)" stroke="#8b5cf6" stroke-width="1" stroke-dasharray="6,3" rx="8"/>
<text x="400" y="392" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569" font-style="italic">
LLM decides tool calls • Zero IF/THEN logic • Natural conversation flow • Context-aware responses
</text>
<!-- Legend -->
<g transform="translate(50, 260)">
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="#1e293b">Legend:</text>
<circle cx="10" cy="15" r="4" fill="#10b981"/>
<text x="20" y="19" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Direct response</text>
<circle cx="10" cy="30" r="4" fill="#f59e0b"/>
<text x="20" y="34" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Tool invocation</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

139
docs/src/assets/chapter-07/data-flow.svg
View file

@ -1,139 +0,0 @@
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#666" opacity="0.8"/>
</marker>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#4A90E2;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#50C878;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#50C878;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="gradient3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#FF6B6B;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#333">BotServer Data Flow Architecture</text>
<!-- User Input Layer -->
<g id="user-layer">
<rect x="50" y="60" width="700" height="80" fill="url(#gradient1)" stroke="#4A90E2" stroke-width="2" rx="8" opacity="0.8"/>
<text x="400" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#333">User Input Layer</text>
<!-- Input sources -->
<rect x="80" y="95" width="120" height="30" fill="white" stroke="#4A90E2" stroke-width="1" rx="4" opacity="0.9"/>
<text x="140" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#333">Web UI</text>
<rect x="220" y="95" width="120" height="30" fill="white" stroke="#4A90E2" stroke-width="1" rx="4" opacity="0.9"/>
<text x="280" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#333">WhatsApp</text>
<rect x="360" y="95" width="120" height="30" fill="white" stroke="#4A90E2" stroke-width="1" rx="4" opacity="0.9"/>
<text x="420" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#333">Teams</text>
<rect x="500" y="95" width="120" height="30" fill="white" stroke="#4A90E2" stroke-width="1" rx="4" opacity="0.9"/>
<text x="560" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#333">Email</text>
<rect x="640" y="95" width="80" height="30" fill="white" stroke="#4A90E2" stroke-width="1" rx="4" opacity="0.9"/>
<text x="680" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#333">API</text>
</g>
<!-- Arrows from User Layer to Processing -->
<line x1="400" y1="140" x2="400" y2="170" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Processing Layer -->
<g id="processing-layer">
<rect x="50" y="170" width="700" height="200" fill="url(#gradient2)" stroke="#50C878" stroke-width="2" rx="8" opacity="0.8"/>
<text x="400" y="195" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#333">Core Processing Engine</text>
<!-- Session Manager -->
<rect x="80" y="210" width="150" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="155" y="235" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Session Manager</text>
<text x="155" y="252" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">User Context</text>
<!-- BASIC Interpreter -->
<rect x="250" y="210" width="150" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="325" y="235" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">BASIC Interpreter</text>
<text x="325" y="252" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Script Execution</text>
<!-- LLM Integration -->
<rect x="420" y="210" width="150" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="495" y="235" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">LLM Integration</text>
<text x="495" y="252" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">AI Processing</text>
<!-- Knowledge Base -->
<rect x="590" y="210" width="130" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="655" y="235" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Knowledge Base</text>
<text x="655" y="252" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Vector Search</text>
<!-- Internal flow arrows -->
<line x1="230" y1="240" x2="250" y2="240" stroke="#666" stroke-width="1" marker-end="url(#arrow)" opacity="0.5"/>
<line x1="400" y1="240" x2="420" y2="240" stroke="#666" stroke-width="1" marker-end="url(#arrow)" opacity="0.5"/>
<line x1="570" y1="240" x2="590" y2="240" stroke="#666" stroke-width="1" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Tool System -->
<rect x="80" y="290" width="300" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="230" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Tool System</text>
<text x="230" y="332" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">External APIs &amp; Functions</text>
<!-- Cache Layer -->
<rect x="420" y="290" width="300" height="60" fill="white" stroke="#50C878" stroke-width="1" rx="4" opacity="0.9"/>
<text x="570" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Cache Layer</text>
<text x="570" y="332" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Response Optimization</text>
</g>
<!-- Arrows from Processing to Storage -->
<line x1="400" y1="370" x2="400" y2="400" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Storage Layer -->
<g id="storage-layer">
<rect x="50" y="400" width="700" height="120" fill="url(#gradient3)" stroke="#FF6B6B" stroke-width="2" rx="8" opacity="0.8"/>
<text x="400" y="425" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#333">Storage &amp; Persistence Layer</text>
<!-- Database -->
<rect x="80" y="450" width="140" height="50" fill="white" stroke="#FF6B6B" stroke-width="1" rx="4" opacity="0.9"/>
<text x="150" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Database</text>
<text x="150" y="487" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">User Data</text>
<!-- Vector DB -->
<rect x="240" y="450" width="140" height="50" fill="white" stroke="#FF6B6B" stroke-width="1" rx="4" opacity="0.9"/>
<text x="310" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Vector DB</text>
<text x="310" y="487" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Embeddings</text>
<!-- Drive Storage -->
<rect x="400" y="450" width="140" height="50" fill="white" stroke="#FF6B6B" stroke-width="1" rx="4" opacity="0.9"/>
<text x="470" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Drive Storage</text>
<text x="470" y="487" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Files &amp; Assets</text>
<!-- Cache -->
<rect x="560" y="450" width="140" height="50" fill="white" stroke="#FF6B6B" stroke-width="1" rx="4" opacity="0.9"/>
<text x="630" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Cache</text>
<text x="630" y="487" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666">Fast Access</text>
</g>
<!-- Bidirectional arrows showing data flow -->
<g id="flow-arrows" opacity="0.4">
<!-- Vertical flows -->
<line x1="155" y1="270" x2="155" y2="450" stroke="#666" stroke-width="1" stroke-dasharray="5,5"/>
<line x1="325" y1="270" x2="310" y2="450" stroke="#666" stroke-width="1" stroke-dasharray="5,5"/>
<line x1="495" y1="270" x2="470" y2="450" stroke="#666" stroke-width="1" stroke-dasharray="5,5"/>
<line x1="655" y1="270" x2="630" y2="450" stroke="#666" stroke-width="1" stroke-dasharray="5,5"/>
</g>
<!-- Legend -->
<g id="legend" transform="translate(50, 540)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">Data Flow:</text>
<line x1="80" y1="-5" x2="120" y2="-5" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
<text x="125" y="0" font-family="Arial, sans-serif" font-size="16" fill="#666">Request/Response</text>
<line x1="250" y1="-5" x2="290" y2="-5" stroke="#666" stroke-width="1" stroke-dasharray="5,5"/>
<text x="295" y="0" font-family="Arial, sans-serif" font-size="16" fill="#666">Data Access</text>
</g>
<!-- Performance Note -->
<text x="400" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#999">All components run in async Rust for maximum performance</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.5 KiB

306
docs/src/assets/chapter-07/data-traceability.svg
View file

@ -1,306 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200" height="900" viewBox="0 0 1200 900" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#075e54"/>
<stop offset="100%" style="stop-color:#25d366"/>
</linearGradient>
<linearGradient id="userGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#667eea"/>
<stop offset="100%" style="stop-color:#764ba2"/>
</linearGradient>
<linearGradient id="botGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#11998e"/>
<stop offset="100%" style="stop-color:#38ef7d"/>
</linearGradient>
<linearGradient id="storageGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb"/>
<stop offset="100%" style="stop-color:#f5576c"/>
</linearGradient>
<linearGradient id="llmGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe"/>
<stop offset="100%" style="stop-color:#00f2fe"/>
</linearGradient>
<linearGradient id="dbGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fa709a"/>
<stop offset="100%" style="stop-color:#fee140"/>
</linearGradient>
<!-- Arrow marker -->
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
</marker>
<marker id="arrowheadGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#25d366"/>
</marker>
<marker id="arrowheadBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#4facfe"/>
</marker>
<marker id="arrowheadPink" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#f5576c"/>
</marker>
<!-- Drop shadow -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Background -->
<rect width="1200" height="900" fill="#f8fafc"/>
<!-- Header -->
<rect x="0" y="0" width="1200" height="60" fill="url(#headerGradient)"/>
<text x="600" y="38" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white" text-anchor="middle">
Data Traceability Diagram - General Bots Architecture
</text>
<!-- Legend -->
<g transform="translate(900, 80)">
<rect x="0" y="0" width="280" height="140" rx="8" fill="white" stroke="#e2e8f0" filter="url(#shadow)"/>
<text x="140" y="25" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#1a1a1a" text-anchor="middle">Legend</text>
<line x1="20" y1="50" x2="60" y2="50" stroke="#25d366" stroke-width="2" marker-end="url(#arrowheadGreen)"/>
<text x="75" y="54" font-family="Arial, sans-serif" font-size="12" fill="#666">User Input Flow</text>
<line x1="20" y1="75" x2="60" y2="75" stroke="#4facfe" stroke-width="2" marker-end="url(#arrowheadBlue)"/>
<text x="75" y="79" font-family="Arial, sans-serif" font-size="12" fill="#666">LLM Processing</text>
<line x1="20" y1="100" x2="60" y2="100" stroke="#f5576c" stroke-width="2" marker-end="url(#arrowheadPink)"/>
<text x="75" y="104" font-family="Arial, sans-serif" font-size="12" fill="#666">Storage Operations</text>
<line x1="20" y1="125" x2="60" y2="125" stroke="#666" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
<text x="75" y="129" font-family="Arial, sans-serif" font-size="12" fill="#666">Internal Flow</text>
</g>
<!-- User/Channels Section -->
<g transform="translate(50, 100)">
<rect x="0" y="0" width="200" height="280" rx="12" fill="url(#userGradient)" filter="url(#shadow)"/>
<text x="100" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">CHANNELS</text>
<!-- WhatsApp -->
<rect x="20" y="50" width="160" height="40" rx="6" fill="white" opacity="0.9"/>
<text x="100" y="75" font-family="Arial, sans-serif" font-size="13" fill="#333" text-anchor="middle">📱 WhatsApp</text>
<!-- Telegram -->
<rect x="20" y="100" width="160" height="40" rx="6" fill="white" opacity="0.9"/>
<text x="100" y="125" font-family="Arial, sans-serif" font-size="13" fill="#333" text-anchor="middle">✈️ Telegram</text>
<!-- Web UI -->
<rect x="20" y="150" width="160" height="40" rx="6" fill="white" opacity="0.9"/>
<text x="100" y="175" font-family="Arial, sans-serif" font-size="13" fill="#333" text-anchor="middle">🌐 Web UI / gbui</text>
<!-- API -->
<rect x="20" y="200" width="160" height="40" rx="6" fill="white" opacity="0.9"/>
<text x="100" y="225" font-family="Arial, sans-serif" font-size="13" fill="#333" text-anchor="middle">🔌 REST API</text>
<!-- Webhook -->
<rect x="20" y="250" width="160" height="20" rx="4" fill="white" opacity="0.7"/>
<text x="100" y="264" font-family="Arial, sans-serif" font-size="11" fill="#333" text-anchor="middle">🪝 Webhooks</text>
</g>
<!-- Bot Core -->
<g transform="translate(350, 120)">
<rect x="0" y="0" width="240" height="360" rx="12" fill="url(#botGradient)" filter="url(#shadow)"/>
<text x="120" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">BOTSERVER CORE</text>
<!-- BASIC Interpreter -->
<rect x="20" y="50" width="200" height="50" rx="6" fill="white" opacity="0.95"/>
<text x="120" y="72" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333" text-anchor="middle">BASIC Interpreter</text>
<text x="120" y="88" font-family="Arial, sans-serif" font-size="10" fill="#666" text-anchor="middle">.bas scripts → Rhai engine</text>
<!-- Message Router -->
<rect x="20" y="110" width="200" height="50" rx="6" fill="white" opacity="0.95"/>
<text x="120" y="132" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333" text-anchor="middle">Message Router</text>
<text x="120" y="148" font-family="Arial, sans-serif" font-size="10" fill="#666" text-anchor="middle">TALK / HEAR / SEND</text>
<!-- Scheduler -->
<rect x="20" y="170" width="200" height="50" rx="6" fill="white" opacity="0.95"/>
<text x="120" y="192" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333" text-anchor="middle">Scheduler</text>
<text x="120" y="208" font-family="Arial, sans-serif" font-size="10" fill="#666" text-anchor="middle">SET SCHEDULE "every hour"</text>
<!-- Keywords Engine -->
<rect x="20" y="230" width="200" height="50" rx="6" fill="white" opacity="0.95"/>
<text x="120" y="252" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333" text-anchor="middle">Keywords Engine</text>
<text x="120" y="268" font-family="Arial, sans-serif" font-size="10" fill="#666" text-anchor="middle">GET/POST/FIND/SAVE/LLM</text>
<!-- Session Manager -->
<rect x="20" y="290" width="200" height="50" rx="6" fill="white" opacity="0.95"/>
<text x="120" y="312" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#333" text-anchor="middle">Session Manager</text>
<text x="120" y="328" font-family="Arial, sans-serif" font-size="10" fill="#666" text-anchor="middle">user_id → bot_id → org_id</text>
</g>
<!-- LLM Section -->
<g transform="translate(680, 100)">
<rect x="0" y="0" width="200" height="200" rx="12" fill="url(#llmGradient)" filter="url(#shadow)"/>
<text x="100" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">LLM PROVIDERS</text>
<rect x="20" y="50" width="160" height="30" rx="4" fill="white" opacity="0.9"/>
<text x="100" y="70" font-family="Arial, sans-serif" font-size="11" fill="#333" text-anchor="middle">🧠 Claude Opus 4</text>
<rect x="20" y="90" width="160" height="30" rx="4" fill="white" opacity="0.9"/>
<text x="100" y="110" font-family="Arial, sans-serif" font-size="11" fill="#333" text-anchor="middle">🤖 GPT-4 Turbo</text>
<rect x="20" y="130" width="160" height="30" rx="4" fill="white" opacity="0.9"/>
<text x="100" y="150" font-family="Arial, sans-serif" font-size="11" fill="#333" text-anchor="middle">💎 Gemini Pro</text>
<rect x="20" y="170" width="160" height="20" rx="4" fill="white" opacity="0.7"/>
<text x="100" y="184" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">🦙 Local: Llama/Mistral</text>
</g>
<!-- Storage Section -->
<g transform="translate(680, 320)">
<rect x="0" y="0" width="200" height="200" rx="12" fill="url(#storageGradient)" filter="url(#shadow)"/>
<text x="100" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">STORAGE (MinIO)</text>
<rect x="20" y="50" width="160" height="35" rx="4" fill="white" opacity="0.9"/>
<text x="100" y="65" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#333" text-anchor="middle">📁 /{org}/{botname}/</text>
<text x="100" y="78" font-family="Arial, sans-serif" font-size="9" fill="#666" text-anchor="middle">Bucket per bot</text>
<rect x="20" y="95" width="75" height="30" rx="4" fill="white" opacity="0.85"/>
<text x="57" y="114" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">.gbdialog</text>
<rect x="105" y="95" width="75" height="30" rx="4" fill="white" opacity="0.85"/>
<text x="142" y="114" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">.gbkb</text>
<rect x="20" y="135" width="75" height="30" rx="4" fill="white" opacity="0.85"/>
<text x="57" y="154" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">.gbot</text>
<rect x="105" y="135" width="75" height="30" rx="4" fill="white" opacity="0.85"/>
<text x="142" y="154" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">.gbtheme</text>
<rect x="20" y="175" width="160" height="18" rx="3" fill="white" opacity="0.7"/>
<text x="100" y="188" font-family="Arial, sans-serif" font-size="9" fill="#666" text-anchor="middle">uploads/ | exports/ | cache/</text>
</g>
<!-- Database Section -->
<g transform="translate(950, 180)">
<rect x="0" y="0" width="200" height="280" rx="12" fill="url(#dbGradient)" filter="url(#shadow)"/>
<text x="100" y="30" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">DATABASE</text>
<rect x="20" y="50" width="160" height="35" rx="4" fill="white" opacity="0.9"/>
<text x="100" y="65" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#333" text-anchor="middle">🐘 PostgreSQL</text>
<text x="100" y="78" font-family="Arial, sans-serif" font-size="9" fill="#666" text-anchor="middle">Main database</text>
<rect x="20" y="95" width="160" height="25" rx="3" fill="white" opacity="0.85"/>
<text x="100" y="112" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">organizations</text>
<rect x="20" y="125" width="160" height="25" rx="3" fill="white" opacity="0.85"/>
<text x="100" y="142" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">bots</text>
<rect x="20" y="155" width="160" height="25" rx="3" fill="white" opacity="0.85"/>
<text x="100" y="172" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">users / sessions</text>
<rect x="20" y="185" width="160" height="25" rx="3" fill="white" opacity="0.85"/>
<text x="100" y="202" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">conversations</text>
<rect x="20" y="215" width="160" height="25" rx="3" fill="white" opacity="0.85"/>
<text x="100" y="232" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">system_automations</text>
<rect x="20" y="250" width="160" height="20" rx="3" fill="white" opacity="0.7"/>
<text x="100" y="264" font-family="Arial, sans-serif" font-size="9" fill="#666" text-anchor="middle">🔴 Redis (cache/queue)</text>
</g>
<!-- Data Flow Arrows -->
<!-- Channels to Bot Core -->
<path d="M 250 240 L 350 300" stroke="#25d366" stroke-width="2" fill="none" marker-end="url(#arrowheadGreen)"/>
<path d="M 250 220 L 350 280" stroke="#25d366" stroke-width="2" fill="none" marker-end="url(#arrowheadGreen)"/>
<!-- Bot Core to LLM -->
<path d="M 590 200 L 680 200" stroke="#4facfe" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<text x="635" y="190" font-family="Arial, sans-serif" font-size="9" fill="#4facfe">LLM</text>
<!-- LLM back to Bot Core -->
<path d="M 680 230 L 590 270" stroke="#4facfe" stroke-width="2" fill="none" marker-end="url(#arrowheadBlue)"/>
<!-- Bot Core to Storage -->
<path d="M 590 380 L 680 400" stroke="#f5576c" stroke-width="2" fill="none" marker-end="url(#arrowheadPink)"/>
<text x="620" y="375" font-family="Arial, sans-serif" font-size="9" fill="#f5576c">FILES</text>
<!-- Bot Core to Database -->
<path d="M 590 340 Q 750 340 950 340" stroke="#666" stroke-width="2" stroke-dasharray="5,5" fill="none" marker-end="url(#arrowhead)"/>
<text x="770" y="330" font-family="Arial, sans-serif" font-size="9" fill="#666">FIND/SAVE</text>
<!-- Storage to Database (metadata) -->
<path d="M 880 420 L 950 380" stroke="#666" stroke-width="1.5" stroke-dasharray="3,3" fill="none" marker-end="url(#arrowhead)"/>
<!-- Key Data Flows Section -->
<g transform="translate(50, 550)">
<rect x="0" y="0" width="1100" height="300" rx="12" fill="white" stroke="#e2e8f0" filter="url(#shadow)"/>
<text x="550" y="30" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1a1a1a" text-anchor="middle">Key Data Flows</text>
<!-- Flow 1: User Message -->
<g transform="translate(30, 50)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#e8f5e9" stroke="#4caf50"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#2e7d32" text-anchor="middle">1. User Message Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">Channel → Router → Session</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">→ BASIC Script → LLM (if needed)</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Response → Channel</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Key: {org}_{bot}_{user}_{session}</text>
</g>
<!-- Flow 2: Scheduled Task -->
<g transform="translate(380, 50)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#e3f2fd" stroke="#2196f3"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#1565c0" text-anchor="middle">2. Scheduled Task Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">Cron Trigger → Load Script</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">→ Execute Keywords → External APIs</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Save Results → Log</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Key: {org}_{bot}_schedule_{name}</text>
</g>
<!-- Flow 3: File Operations -->
<g transform="translate(730, 50)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#fce4ec" stroke="#e91e63"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#c2185b" text-anchor="middle">3. File Operations Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">UPLOAD/DOWNLOAD → MinIO</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">Bucket: /{org}/{botname}/</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Metadata → PostgreSQL</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Path: s3://{org}/{bot}/{path}</text>
</g>
<!-- Flow 4: Knowledge Base -->
<g transform="translate(30, 165)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#fff3e0" stroke="#ff9800"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#e65100" text-anchor="middle">4. Knowledge Base Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">USE KB "docs" → Load .gbkb</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">→ Embed → Vector DB (pgvector)</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Semantic Search → LLM Context</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Key: {org}_{bot}_kb_{name}</text>
</g>
<!-- Flow 5: Webhook -->
<g transform="translate(380, 165)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#f3e5f5" stroke="#9c27b0"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#7b1fa2" text-anchor="middle">5. Webhook Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">External POST → /webhook/{id}</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">→ Validate → Trigger Script</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Process → Response/Notify</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Key: {org}_{bot}_webhook_{path}</text>
</g>
<!-- Flow 6: Bot Memory -->
<g transform="translate(730, 165)">
<rect x="0" y="0" width="320" height="100" rx="8" fill="#e0f2f1" stroke="#009688"/>
<text x="160" y="25" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#00695c" text-anchor="middle">6. Bot Memory Flow</text>
<text x="10" y="50" font-family="monospace" font-size="10" fill="#333">SET/GET BOT MEMORY → Redis</text>
<text x="10" y="65" font-family="monospace" font-size="10" fill="#333">→ Persist → PostgreSQL (backup)</text>
<text x="10" y="80" font-family="monospace" font-size="10" fill="#333">→ Scope: global | user | session</text>
<text x="10" y="95" font-family="Arial, sans-serif" font-size="9" fill="#666">Key: {org}_{bot}_mem_{scope}_{key}</text>
</g>
</g>
<!-- Footer -->
<text x="600" y="880" font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">
General Bots Data Traceability - All keys follow pattern: {org}_{botname}_{resource}_{identifier}
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

135
docs/src/assets/chapter-07/module-data-flow.svg
View file

@ -1,135 +0,0 @@
<svg width="900" height="800" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#666" opacity="0.8"/>
</marker>
<linearGradient id="inputGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="processGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#10B981;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="serviceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="dataGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#F59E0B;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="outputGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#EF4444;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#EF4444;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1F2937">Data Flow Through Modules</text>
<!-- User Input -->
<ellipse cx="450" cy="70" rx="80" ry="25" fill="url(#inputGradient)" stroke="#3B82F6" stroke-width="2" opacity="0.9"/>
<text x="450" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">User Input</text>
<!-- Arrow down -->
<line x1="450" y1="95" x2="450" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- web_server/channels -->
<rect x="300" y="120" width="300" height="70" fill="url(#processGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="450" y="145" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">web_server/ | channels/</text>
<text x="450" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Axum HTTP Server</text>
<text x="450" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Route to channel</text>
<!-- Arrow down -->
<line x1="450" y1="190" x2="450" y2="220" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- session/ -->
<rect x="300" y="220" width="300" height="70" fill="url(#processGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="450" y="245" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">session/</text>
<text x="450" y="265" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Load/Create Session</text>
<text x="450" y="280" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Validate Token</text>
<!-- Arrow down -->
<line x1="450" y1="290" x2="450" y2="320" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- auth/ -->
<rect x="300" y="320" width="300" height="70" fill="url(#processGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="450" y="345" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">auth/</text>
<text x="450" y="365" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Check Permissions</text>
<text x="450" y="380" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Apply RBAC</text>
<!-- Arrow down -->
<line x1="450" y1="390" x2="450" y2="420" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- bot/ -->
<rect x="300" y="420" width="300" height="70" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="450" y="445" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">bot/</text>
<text x="450" y="465" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Route to Bot Instance</text>
<text x="450" y="480" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Load Configuration</text>
<!-- Arrow down -->
<line x1="450" y1="490" x2="450" y2="520" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- basic/ -->
<rect x="300" y="520" width="300" height="70" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="450" y="545" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">basic/</text>
<text x="450" y="565" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Execute BASIC Script</text>
<text x="450" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C3AED">Parse Keywords</text>
<!-- Multiple arrows branching out -->
<line x1="350" y1="590" x2="200" y2="640" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="400" y1="590" x2="350" y2="640" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="500" y1="590" x2="550" y2="640" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="550" y1="590" x2="700" y2="640" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Data Layer Services -->
<!-- context/ -->
<rect x="120" y="640" width="140" height="60" fill="url(#dataGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="190" y="665" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">context/</text>
<text x="190" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C2D12">Load KB</text>
<!-- drive/ -->
<rect x="280" y="640" width="140" height="60" fill="url(#dataGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="350" y="665" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">drive/</text>
<text x="350" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C2D12">Get Files</text>
<!-- database/ -->
<rect x="480" y="640" width="140" height="60" fill="url(#dataGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="550" y="665" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">database/</text>
<text x="550" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C2D12">Query DB</text>
<!-- llm/ -->
<rect x="640" y="640" width="140" height="60" fill="url(#dataGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="710" y="665" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">llm/</text>
<text x="710" y="685" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7C2D12">Call AI</text>
<!-- Convergence arrows -->
<line x1="190" y1="700" x2="400" y2="730" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="350" y1="700" x2="420" y2="730" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="550" y1="700" x2="480" y2="730" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="710" y1="700" x2="500" y2="730" stroke="#666" stroke-width="1" opacity="0.5"/>
<!-- Arrow down -->
<line x1="450" y1="730" x2="450" y2="750" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Bot Response -->
<ellipse cx="450" cy="780" rx="80" ry="25" fill="url(#outputGradient)" stroke="#EF4444" stroke-width="2" opacity="0.9"/>
<text x="450" y="785" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">Bot Response</text>
<!-- Side annotations -->
<g id="annotations" opacity="0.7">
<!-- Processing stages -->
<text x="50" y="75" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">1. Input Reception</text>
<text x="50" y="155" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">2. HTTP Routing</text>
<text x="50" y="255" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">3. Session Management</text>
<text x="50" y="355" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">4. Authorization</text>
<text x="50" y="455" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">5. Bot Routing</text>
<text x="50" y="555" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">6. Script Execution</text>
<text x="50" y="670" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">7. Data Processing</text>
<text x="50" y="785" text-anchor="start" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">8. Response Generation</text>
</g>
<!-- Performance note -->
<text x="450" y="820" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-style="italic" fill="#9CA3AF">All operations are async with Tokio runtime for maximum throughput</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 9.7 KiB

133
docs/src/assets/chapter-07/module-dependency.svg
View file

@ -1,133 +0,0 @@
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#666" opacity="0.8"/>
</marker>
<linearGradient id="mainGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="coreGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#10B981;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="serviceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="leafGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#F59E0B;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1F2937">Module Dependency Graph</text>
<!-- main.rs (Entry Point) -->
<rect x="350" y="50" width="100" height="40" fill="url(#mainGradient)" stroke="#3B82F6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="400" y="75" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#1F2937">main.rs</text>
<!-- Arrow to bootstrap -->
<line x1="400" y1="90" x2="400" y2="120" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- bootstrap/ -->
<rect x="330" y="120" width="140" height="40" fill="url(#coreGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="400" y="145" text-anchor="middle" font-family="monospace" font-size="20" font-weight="bold" fill="#1F2937">bootstrap/</text>
<!-- Arrows from bootstrap to core modules -->
<line x1="350" y1="160" x2="200" y2="210" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="400" y1="160" x2="400" y2="210" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="450" y1="160" x2="600" y2="210" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Core Layer -->
<!-- package_manager/ -->
<rect x="120" y="210" width="160" height="40" fill="url(#coreGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="200" y="235" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">package_manager/</text>
<!-- config/ -->
<rect x="320" y="210" width="160" height="40" fill="url(#coreGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="400" y="235" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">config/</text>
<!-- database/ -->
<rect x="520" y="210" width="160" height="40" fill="url(#coreGradient)" stroke="#10B981" stroke-width="2" rx="8" opacity="0.9"/>
<text x="600" y="235" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">database/</text>
<!-- Convergence arrows to session -->
<line x1="400" y1="250" x2="400" y2="290" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="600" y1="250" x2="450" y2="290" stroke="#666" stroke-width="1" opacity="0.5"/>
<!-- session/ -->
<rect x="350" y="290" width="100" height="40" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="400" y="315" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">session/</text>
<!-- web_server/ and bidirectional arrow with session -->
<rect x="180" y="290" width="120" height="40" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="240" y="315" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">web_server/</text>
<line x1="300" y1="310" x2="350" y2="310" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="350" y1="320" x2="300" y2="320" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Arrow from package_manager to web_server -->
<line x1="200" y1="250" x2="240" y2="290" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Service Layer branches -->
<line x1="240" y1="330" x2="140" y2="380" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="240" y1="330" x2="260" y2="380" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="240" y1="330" x2="380" y2="380" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="400" y1="330" x2="500" y2="380" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Feature Modules -->
<!-- channels/ -->
<rect x="80" y="380" width="100" height="40" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="130" y="405" text-anchor="middle" font-family="monospace" font-size="16" fill="#1F2937">channels/</text>
<!-- bot/ -->
<rect x="210" y="380" width="100" height="40" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="260" y="405" text-anchor="middle" font-family="monospace" font-size="16" fill="#1F2937">bot/</text>
<!-- basic/ -->
<rect x="340" y="380" width="100" height="40" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="390" y="405" text-anchor="middle" font-family="monospace" font-size="16" fill="#1F2937">basic/</text>
<!-- auth/ -->
<rect x="470" y="380" width="100" height="40" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="520" y="405" text-anchor="middle" font-family="monospace" font-size="16" fill="#1F2937">auth/</text>
<!-- Convergence to LLM -->
<line x1="130" y1="420" x2="340" y2="470" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="260" y1="420" x2="340" y2="470" stroke="#666" stroke-width="1" opacity="0.5"/>
<line x1="390" y1="420" x2="390" y2="470" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<line x1="520" y1="420" x2="430" y2="470" stroke="#666" stroke-width="1" opacity="0.5"/>
<!-- llm/ -->
<rect x="340" y="470" width="100" height="40" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="2" rx="8" opacity="0.9"/>
<text x="390" y="495" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">llm/</text>
<!-- Arrow to context -->
<line x1="390" y1="510" x2="390" y2="540" stroke="#666" stroke-width="2" marker-end="url(#arrow)" opacity="0.6"/>
<!-- context/ -->
<rect x="340" y="540" width="100" height="40" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="2" rx="8" opacity="0.9"/>
<text x="390" y="565" text-anchor="middle" font-family="monospace" font-size="18" fill="#1F2937">context/</text>
<!-- Legend -->
<g id="legend" transform="translate(580, 480)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1F2937">Layers:</text>
<rect x="0" y="10" width="15" height="15" fill="url(#mainGradient)" stroke="#3B82F6" stroke-width="1" rx="2" opacity="0.8"/>
<text x="20" y="22" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Entry Point</text>
<rect x="0" y="30" width="15" height="15" fill="url(#coreGradient)" stroke="#10B981" stroke-width="1" rx="2" opacity="0.8"/>
<text x="20" y="42" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Core System</text>
<rect x="0" y="50" width="15" height="15" fill="url(#serviceGradient)" stroke="#8B5CF6" stroke-width="1" rx="2" opacity="0.8"/>
<text x="20" y="62" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Services</text>
<rect x="0" y="70" width="15" height="15" fill="url(#leafGradient)" stroke="#F59E0B" stroke-width="1" rx="2" opacity="0.8"/>
<text x="20" y="82" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Features</text>
</g>
<!-- Dependency Flow Note -->
<text x="50" y="580" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Arrows indicate compile-time dependencies</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

155
docs/src/assets/chapter-07/system-architecture.svg
View file

@ -1,155 +0,0 @@
<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 700" style="max-width: 100%; height: auto;">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="#666"/>
</marker>
</defs>
<!-- Title -->
<text x="450" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="26" font-weight="bold" fill="#1F2937">BotServer Architecture - Virtual Crates System</text>
<!-- Main Container -->
<rect x="40" y="50" width="820" height="620" fill="none" stroke="#E5E7EB" stroke-width="2" rx="12" stroke-opacity="0.5"/>
<!-- Binary Output -->
<rect x="350" y="70" width="200" height="40" fill="#EBF8FF" stroke="#2563EB" stroke-width="2" rx="8"/>
<text x="450" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">BotServer Binary</text>
<!-- Compilation Arrow -->
<line x1="450" y1="110" x2="450" y2="140" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)" stroke-dasharray="5,3" opacity="0.6"/>
<text x="470" y="130" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">compiles to</text>
<!-- Core Layer -->
<g id="core-layer">
<rect x="60" y="140" width="780" height="120" fill="#EBF8FF" fill-opacity="0.3" stroke="#2563EB" stroke-width="2" rx="8"/>
<text x="450" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">Core Engine (src/core/)</text>
<!-- Core Components -->
<rect x="80" y="185" width="140" height="55" fill="white" stroke="#2563EB" stroke-width="1" rx="4"/>
<text x="150" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">Bootstrap</text>
<text x="150" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">System Init</text>
<text x="150" y="232" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Service Start</text>
<rect x="240" y="185" width="140" height="55" fill="white" stroke="#2563EB" stroke-width="1" rx="4"/>
<text x="310" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">Package Manager</text>
<text x="310" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Component Registry</text>
<text x="310" y="232" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Module Loader</text>
<rect x="400" y="185" width="140" height="55" fill="white" stroke="#2563EB" stroke-width="1" rx="4"/>
<text x="470" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">Session Manager</text>
<text x="470" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Context Handling</text>
<text x="470" y="232" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">State Management</text>
<rect x="560" y="185" width="140" height="55" fill="white" stroke="#2563EB" stroke-width="1" rx="4"/>
<text x="630" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">Shared State</text>
<text x="630" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">AppState</text>
<text x="630" y="232" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Configuration</text>
<rect x="720" y="185" width="100" height="55" fill="white" stroke="#2563EB" stroke-width="1" rx="4"/>
<text x="770" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">Utils</text>
<text x="770" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Helpers</text>
<text x="770" y="232" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">Common</text>
</g>
<!-- Bidirectional Arrow -->
<line x1="450" y1="260" x2="450" y2="290" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)" opacity="0.6"/>
<line x1="460" y1="290" x2="460" y2="260" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- Virtual Crates Layer (gbapps) -->
<g id="gbapp-layer">
<rect x="60" y="290" width="780" height="180" fill="#D1FAE5" fill-opacity="0.3" stroke="#10B981" stroke-width="2" rx="8"/>
<text x="450" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">Virtual Crates (gbapp modules in src/)</text>
<!-- BASIC gbapp -->
<rect x="80" y="335" width="170" height="115" fill="white" stroke="#10B981" stroke-width="1" rx="4"/>
<text x="165" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">basic.gbapp</text>
<text x="165" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">src/basic/</text>
<line x1="90" y1="378" x2="240" y2="378" stroke="#E5E7EB" stroke-width="1"/>
<text x="165" y="393" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• BASIC Interpreter</text>
<text x="165" y="408" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Keywords Registry</text>
<text x="165" y="423" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Script Execution</text>
<text x="165" y="438" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Rhai Engine</text>
<!-- Channels gbapp -->
<rect x="270" y="335" width="170" height="115" fill="white" stroke="#10B981" stroke-width="1" rx="4"/>
<text x="355" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">channels.gbapp</text>
<text x="355" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">src/channels/</text>
<line x1="280" y1="378" x2="430" y2="378" stroke="#E5E7EB" stroke-width="1"/>
<text x="355" y="393" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• WhatsApp</text>
<text x="355" y="408" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Teams</text>
<text x="355" y="423" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Email</text>
<text x="355" y="438" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Web UI</text>
<!-- Storage gbapp -->
<rect x="460" y="335" width="170" height="115" fill="white" stroke="#10B981" stroke-width="1" rx="4"/>
<text x="545" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">storage.gbapp</text>
<text x="545" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">src/storage/</text>
<line x1="470" y1="378" x2="620" y2="378" stroke="#E5E7EB" stroke-width="1"/>
<text x="545" y="393" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Knowledge Base</text>
<text x="545" y="408" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Drive Integration</text>
<text x="545" y="423" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Vector DB</text>
<text x="545" y="438" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">• Cache</text>
<!-- Custom gbapp (Your Contribution) -->
<rect x="650" y="335" width="170" height="115" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2" rx="4" stroke-dasharray="5,3"/>
<text x="735" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1F2937">your_feature.gbapp</text>
<text x="735" y="370" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#6B7280">src/your_feature/</text>
<line x1="660" y1="378" x2="810" y2="378" stroke="#E5E7EB" stroke-width="1"/>
<text x="735" y="393" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-style="italic" fill="#6B7280">• Your Keywords</text>
<text x="735" y="408" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-style="italic" fill="#6B7280">• Your Services</text>
<text x="735" y="423" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-style="italic" fill="#6B7280">• Your Models</text>
<text x="735" y="438" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#F59E0B">+ Add yours!</text>
</g>
<!-- Arrow from gbapp to AI -->
<line x1="450" y1="470" x2="450" y2="500" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)" opacity="0.6"/>
<!-- AI/LLM Layer -->
<g id="ai-layer">
<rect x="60" y="500" width="380" height="80" fill="#EDE9FE" fill-opacity="0.3" stroke="#8B5CF6" stroke-width="2" rx="8"/>
<text x="250" y="525" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">AI &amp; LLM Integration</text>
<rect x="80" y="535" width="100" height="35" fill="white" stroke="#8B5CF6" stroke-width="1" rx="4"/>
<text x="130" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">LLM Service</text>
<rect x="195" y="535" width="100" height="35" fill="white" stroke="#8B5CF6" stroke-width="1" rx="4"/>
<text x="245" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Embeddings</text>
<rect x="310" y="535" width="110" height="35" fill="white" stroke="#8B5CF6" stroke-width="1" rx="4"/>
<text x="365" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Semantic Search</text>
</g>
<!-- Storage Layer -->
<g id="storage-layer">
<rect x="460" y="500" width="380" height="80" fill="#FEE2E2" fill-opacity="0.3" stroke="#EF4444" stroke-width="2" rx="8"/>
<text x="650" y="525" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1F2937">Persistence Layer</text>
<rect x="480" y="535" width="85" height="35" fill="white" stroke="#EF4444" stroke-width="1" rx="4"/>
<text x="522" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Database</text>
<rect x="580" y="535" width="85" height="35" fill="white" stroke="#EF4444" stroke-width="1" rx="4"/>
<text x="622" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Vector DB</text>
<rect x="680" y="535" width="70" height="35" fill="white" stroke="#EF4444" stroke-width="1" rx="4"/>
<text x="715" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Drive</text>
<rect x="765" y="535" width="60" height="35" fill="white" stroke="#EF4444" stroke-width="1" rx="4"/>
<text x="795" y="555" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#1F2937">Cache</text>
</g>
<!-- Legend -->
<g id="legend" transform="translate(60, 600)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#1F2937">Key Concepts:</text>
<rect x="120" y="-12" width="15" height="15" fill="#D1FAE5" stroke="#10B981" stroke-width="1" rx="2"/>
<text x="140" y="0" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Virtual Crates = Modules in src/</text>
<rect x="320" y="-12" width="15" height="15" fill="#FEF3C7" stroke="#F59E0B" stroke-width="1" rx="2" stroke-dasharray="3,2"/>
<text x="340" y="0" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">Your Contribution Space</text>
<text x="500" y="0" font-family="Arial, sans-serif" font-size="16" fill="#4B5563">All compile to single optimized binary</text>
</g>
<!-- Philosophy Note -->
<text x="450" y="650" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-style="italic" fill="#6B7280">gbapp virtual crates: The bridge between old Node.js packages and new Rust modules</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

205
docs/src/assets/chapter-10/api-architecture.svg
View file

@ -1,205 +0,0 @@
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradients for different layers -->
<linearGradient id="clientGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="gatewayGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06ffa5;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00d2ff;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="authGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="businessGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="adminGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#fa709a;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#fee140;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="serviceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#30cfd0;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#330867;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="dbGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.3" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrow" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.7"/>
</marker>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="800" height="600" fill="#fafafa"/>
<!-- Title -->
<rect x="250" y="10" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
<text x="400" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="600" fill="#1e293b">
BotServer API Architecture
</text>
<!-- Client Applications Layer -->
<rect x="250" y="60" width="300" height="50" fill="url(#clientGrad)" stroke="#667eea" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="90" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Client Applications
</text>
<!-- Arrow down -->
<path d="M 400 110 L 400 130" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<!-- HTTP/HTTPS Layer -->
<rect x="300" y="130" width="200" height="45" fill="rgba(99, 102, 241, 0.08)" stroke="#8b5cf6" stroke-width="1.5" rx="6" filter="url(#shadow)"/>
<text x="400" y="150" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="500" fill="#1e293b">
HTTP/HTTPS
</text>
<text x="400" y="165" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Port 8080
</text>
<!-- Arrow down -->
<path d="M 400 175 L 400 195" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<!-- API Gateway -->
<rect x="250" y="195" width="300" height="50" fill="url(#gatewayGrad)" stroke="#00d2ff" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="220" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
API Gateway
</text>
<text x="400" y="235" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/api/*
</text>
<!-- Arrows to endpoint groups -->
<path d="M 400 245 L 400 260 L 180 260 L 180 280" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 400 245 L 400 280" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 400 245 L 400 260 L 620 260 L 620 280" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Auth Endpoints -->
<rect x="80" y="280" width="200" height="80" fill="url(#authGrad)" stroke="#f5576c" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="180" y="305" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Auth Endpoints
</text>
<text x="180" y="325" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/auth/login
</text>
<text x="180" y="340" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/auth/logout
</text>
<text x="180" y="355" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/auth/token
</text>
<!-- Business Endpoints -->
<rect x="300" y="280" width="200" height="80" fill="url(#businessGrad)" stroke="#00f2fe" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="305" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Business Endpoints
</text>
<text x="400" y="325" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/files/* • /users/*
</text>
<text x="400" y="340" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/groups/* • /tasks/*
</text>
<text x="400" y="355" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/sessions/*
</text>
<!-- Admin Endpoints -->
<rect x="520" y="280" width="200" height="80" fill="url(#adminGrad)" stroke="#fa709a" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="620" y="305" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Admin Endpoints
</text>
<text x="620" y="325" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/admin/*
</text>
<text x="620" y="340" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/monitoring
</text>
<text x="620" y="355" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">
/analytics
</text>
<!-- Arrows converging to service layer -->
<path d="M 180 360 L 180 380 L 400 380 L 400 400" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 400 360 L 400 400" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 620 360 L 620 380 L 400 380 L 400 400" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Service Layer -->
<rect x="250" y="400" width="300" height="70" fill="url(#serviceGrad)" stroke="#330867" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="425" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Service Layer
</text>
<text x="400" y="445" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Session Manager
</text>
<text x="400" y="460" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
• Auth Service • Bot Service
</text>
<!-- Arrows to databases -->
<path d="M 400 470 L 400 485 L 180 485 L 180 500" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 400 470 L 400 500" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<path d="M 400 470 L 400 485 L 620 485 L 620 500" stroke="#4a5568" stroke-width="2" fill="none" marker-end="url(#arrow)" opacity="0.7"/>
<!-- PostgreSQL -->
<rect x="80" y="500" width="200" height="70" fill="url(#dbGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="180" y="525" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
PostgreSQL
</text>
<text x="180" y="545" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Database
</text>
<text x="180" y="560" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Sessions • Users • Config
</text>
<!-- Valkey Cache -->
<rect x="300" y="500" width="200" height="70" fill="url(#dbGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="400" y="525" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Valkey
</text>
<text x="400" y="545" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Cache
</text>
<text x="400" y="560" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Semantic • Session • Temp
</text>
<!-- Qdrant -->
<rect x="520" y="500" width="200" height="70" fill="url(#dbGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="620" y="525" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Qdrant
</text>
<text x="620" y="545" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Vectors
</text>
<text x="620" y="560" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b">
Embeddings • Search
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

224
docs/src/assets/chapter-10/api-request-flow.svg
View file

@ -1,224 +0,0 @@
<svg width="600" height="700" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
<!-- Define gradients and effects -->
<defs>
<!-- Gradients for different stages -->
<linearGradient id="requestGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="rateLimitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#d97706;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="authGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#dc2626;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="routeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="validateGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#0891b2;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="processGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#059669;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="formatGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="responseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.3" />
</linearGradient>
<!-- Success path gradient -->
<linearGradient id="successPath" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#34d399;stop-opacity:0.3" />
</linearGradient>
<!-- Failure path gradient -->
<linearGradient id="failPath" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#f87171;stop-opacity:0.3" />
</linearGradient>
<!-- Arrow markers -->
<marker id="arrow" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.7"/>
</marker>
<marker id="arrowSuccess" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#10b981" opacity="0.8"/>
</marker>
<marker id="arrowFail" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#ef4444" opacity="0.8"/>
</marker>
<!-- Drop shadow filter -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.15"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="600" height="700" fill="#fafafa"/>
<!-- Title -->
<rect x="150" y="10" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
<text x="300" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
API Request Flow
</text>
<!-- HTTP Request -->
<rect x="200" y="60" width="200" height="50" fill="url(#requestGrad)" stroke="#667eea" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="85" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
HTTP Request
</text>
<text x="300" y="100" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Client → Server
</text>
<!-- Arrow down -->
<path d="M 300 110 L 300 140" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<!-- Rate Limit -->
<rect x="200" y="140" width="200" height="60" fill="url(#rateLimitGrad)" stroke="#f59e0b" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="165" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Rate Limit
</text>
<text x="300" y="185" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Check request limits
</text>
<!-- Pass/Fail paths -->
<path d="M 300 200 L 300 230" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<text x="320" y="215" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Pass</text>
<path d="M 400 170 L 480 170 L 480 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
<text x="420" y="165" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">429 Too Many</text>
<!-- Auth -->
<rect x="200" y="230" width="200" height="60" fill="url(#authGrad)" stroke="#ef4444" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="255" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Auth
</text>
<text x="300" y="275" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Validate token/session
</text>
<!-- Pass/Fail paths -->
<path d="M 300 290 L 300 320" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<text x="320" y="305" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Valid</text>
<path d="M 400 260 L 460 260 L 460 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
<text x="420" y="255" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">401 Unauthorized</text>
<!-- Route -->
<rect x="200" y="320" width="200" height="60" fill="url(#routeGrad)" stroke="#8b5cf6" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="345" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Route
</text>
<text x="300" y="365" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Match endpoint pattern
</text>
<!-- Arrow down -->
<path d="M 300 380 L 300 410" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<path d="M 400 350 L 440 350 L 440 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
<text x="420" y="345" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">404 Not Found</text>
<!-- Validate -->
<rect x="200" y="410" width="200" height="60" fill="url(#validateGrad)" stroke="#06b6d4" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="435" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Validate
</text>
<text x="300" y="455" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Check request body
</text>
<!-- Pass/Fail paths -->
<path d="M 300 470 L 300 500" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<text x="320" y="485" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Valid</text>
<path d="M 400 440 L 420 440 L 420 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
<text x="425" y="435" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">400 Bad Request</text>
<!-- Process -->
<rect x="200" y="500" width="200" height="60" fill="url(#processGrad)" stroke="#10b981" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="525" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Process
</text>
<text x="300" y="545" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Execute business logic
</text>
<!-- Arrow down -->
<path d="M 300 560 L 300 590" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<!-- Format -->
<rect x="200" y="590" width="200" height="60" fill="url(#formatGrad)" stroke="#00f2fe" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="615" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
Format
</text>
<text x="300" y="635" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
JSON response
</text>
<!-- Arrow down -->
<path d="M 300 650 L 300 680" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
<!-- HTTP Response -->
<rect x="200" y="680" width="200" height="50" fill="url(#responseGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
<text x="300" y="705" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
HTTP Response
</text>
<text x="300" y="720" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
Server → Client
</text>
<!-- Error Response box -->
<rect x="410" y="650" width="100" height="30" fill="rgba(239, 68, 68, 0.1)" stroke="#ef4444" stroke-width="1.5" rx="6"/>
<text x="460" y="670" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#dc2626">
Error Response
</text>
<!-- Side labels -->
<g transform="translate(50, 380)">
<text x="0" y="0" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b" transform="rotate(-90)">
Request Pipeline
</text>
</g>
<!-- Status indicators -->
<g transform="translate(80, 150)">
<circle cx="0" cy="0" r="4" fill="#10b981"/>
<text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Success path</text>
</g>
<g transform="translate(80, 170)">
<circle cx="0" cy="0" r="4" fill="#ef4444"/>
<text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Error path</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

216
docs/src/assets/conversation-flow.svg
View file

@ -1,216 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="25%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="75%" style="stop-color:#7ED321;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#50E3C2;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title (positioned well above content) -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Conversation Flow</text>
<text x="700" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">How General Bots processes user messages through the AI pipeline</text>
<!-- MAIN FLOW DIAGRAM (Upper Section) -->
<g id="main-flow">
<!-- Phase labels -->
<text x="140" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Input</text>
<text x="380" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Script</text>
<text x="620" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">AI Decision</text>
<text x="900" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Execution</text>
<text x="1180" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Response</text>
<!-- Main flow components -->
<!-- User Input -->
<rect x="50" y="145" width="180" height="70" class="neon-blue" rx="6.5"/>
<text x="140" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">User Input</text>
<text x="140" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Web / WhatsApp / Teams</text>
<!-- BASIC Script -->
<rect x="290" y="145" width="180" height="70" class="neon-orange" rx="6.5"/>
<text x="380" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">BASIC Script</text>
<text x="380" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">start.bas / tools</text>
<!-- LLM Decision -->
<rect x="530" y="145" width="180" height="70" class="neon-purple" rx="6.5"/>
<text x="620" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">LLM Decision</text>
<text x="620" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Intent / Tool Selection</text>
<!-- Bot Executor -->
<rect x="770" y="145" width="200" height="70" class="neon-green" rx="6.5"/>
<text x="870" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Bot Executor</text>
<text x="870" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Run Keywords</text>
<!-- Bot Response -->
<rect x="1030" y="145" width="200" height="70" class="neon-cyan" rx="6.5"/>
<text x="1130" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Bot Response</text>
<text x="1130" y="205" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">TALK / Send</text>
<!-- Parallel processes section -->
<text x="700" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Parallel Operations</text>
<!-- Vector Search -->
<rect x="420" y="320" width="200" height="65" class="neon-blue" rx="6.5"/>
<text x="520" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Vector Search</text>
<text x="520" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Qdrant / USE KB</text>
<!-- External APIs -->
<rect x="680" y="320" width="200" height="65" class="neon-orange" rx="6.5"/>
<text x="780" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">External APIs</text>
<text x="780" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">GET / POST / GraphQL</text>
<!-- Database -->
<rect x="940" y="320" width="180" height="65" class="neon-purple" rx="6.5"/>
<text x="1030" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Database</text>
<text x="1030" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">TABLE / SAVE</text>
<!-- Knowledge Base Box -->
<rect x="100" y="320" width="260" height="65" class="neon-cyan" rx="6.5"/>
<text x="230" y="355" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Knowledge Base</text>
<text x="230" y="375" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">.gbkb Documents</text>
</g>
<!-- Flow Arrows -->
<g id="arrows" stroke-width="2.6" fill="none">
<!-- Main horizontal flow -->
<line x1="230" y1="180" x2="290" y2="180" class="arrow-color" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="470" y1="180" x2="530" y2="180" class="arrow-color" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="710" y1="180" x2="770" y2="180" class="arrow-color" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="970" y1="180" x2="1030" y2="180" class="arrow-color" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Branch down to parallel processes -->
<line x1="870" y1="215" x2="870" y2="260" class="arrow-color" stroke-dasharray="3.9,3.9" opacity="0.5"/>
<line x1="870" y1="260" x2="520" y2="320" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<line x1="870" y1="260" x2="780" y2="320" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<line x1="870" y1="260" x2="1030" y2="320" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Knowledge base to Vector Search -->
<line x1="360" y1="352" x2="420" y2="352" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Feedback from parallel to response -->
<path d="M520,385 Q520,440 1130,440 Q1130,240 1130,215" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<path d="M780,385 Q780,430 1110,430 Q1110,235 1110,215" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<path d="M1030,385 Q1030,420 1090,420 Q1090,230 1090,215" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<!-- Feedback loop from response to input -->
<path d="M140,145 Q140,50 1130,50 Q1130,100 1130,145" class="arrow-color" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.3"/>
</g>
<!-- PROGRESS INDICATOR (Lower Section) -->
<g id="progress-legend">
<!-- Background gradient bar -->
<rect x="100" y="520" width="1200" height="100" fill="url(#flowGradient)" rx="13" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="570" r="13" class="neon-blue"/>
<circle cx="440" cy="570" r="13" class="neon-orange"/>
<circle cx="680" cy="570" r="13" class="neon-purple"/>
<circle cx="920" cy="570" r="13" class="neon-green"/>
<circle cx="1160" cy="570" r="13" class="neon-cyan"/>
<!-- Connecting lines between stages -->
<line x1="213" y1="570" x2="427" y2="570" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="453" y1="570" x2="667" y2="570" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="693" y1="570" x2="907" y2="570" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="933" y1="570" x2="1147" y2="570" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="200" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Receive</text>
<text x="440" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Parse</text>
<text x="680" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Decide</text>
<text x="920" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Execute</text>
<text x="1160" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">Respond</text>
</g>
<!-- Legend -->
<g id="legend" transform="translate(100, 670)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Legend:</text>
<line x1="100" y1="-5" x2="150" y2="-5" stroke="#666" stroke-width="2.6" opacity="0.7"/>
<text x="160" y="0" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Main Flow</text>
<line x1="300" y1="-5" x2="350" y2="-5" stroke="#666" stroke-width="2.6" stroke-dasharray="3.9,3.9" opacity="0.5"/>
<text x="360" y="0" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Parallel / Optional</text>
<line x1="550" y1="-5" x2="600" y2="-5" stroke="#666" stroke-width="2.6" stroke-dasharray="3.9,3.9" opacity="0.3"/>
<text x="610" y="0" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Feedback Loop</text>
</g>
<!-- Description text (bottom) -->
<text x="700" y="760" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
The AI handles everything automatically - understanding intent, searching knowledge,
</text>
<text x="700" y="790" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
executing tools, and generating responses. Zero configuration required.
</text>
<!-- Feature highlights -->
<g id="features" transform="translate(100, 830)">
<rect x="0" y="0" width="180" height="40" class="neon-blue" rx="6.5" opacity="0.5"/>
<text x="90" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">Multi-Channel</text>
<rect x="200" y="0" width="180" height="40" class="neon-orange" rx="6.5" opacity="0.5"/>
<text x="290" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">BASIC Scripting</text>
<rect x="400" y="0" width="180" height="40" class="neon-purple" rx="6.5" opacity="0.5"/>
<text x="490" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">LLM Powered</text>
<rect x="600" y="0" width="180" height="40" class="neon-green" rx="6.5" opacity="0.5"/>
<text x="690" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">Tool Execution</text>
<rect x="800" y="0" width="180" height="40" class="neon-cyan" rx="6.5" opacity="0.5"/>
<text x="890" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">RAG Search</text>
<rect x="1000" y="0" width="180" height="40" class="neon-blue" rx="6.5" opacity="0.5"/>
<text x="1090" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">Real-time</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

59
docs/src/assets/conversation-flow.svg.backup
View file

@ -1,59 +0,0 @@
<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#666"/>
</marker>
</defs>
<!-- Boxes -->
<g id="boxes">
<!-- User Input -->
<rect x="20" y="30" width="100" height="40" fill="none" stroke="#4A9EFF" stroke-width="2" rx="5"/>
<text x="70" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#4A9EFF">User Input</text>
<!-- BASIC Script -->
<rect x="180" y="30" width="100" height="40" fill="none" stroke="#FF9F40" stroke-width="2" rx="5"/>
<text x="230" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#FF9F40">BASIC Script</text>
<!-- LLM Decision -->
<rect x="340" y="30" width="100" height="40" fill="none" stroke="#BA68C8" stroke-width="2" rx="5"/>
<text x="390" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#BA68C8">LLM Decision</text>
<!-- Tool Execution -->
<rect x="500" y="30" width="120" height="40" fill="none" stroke="#66BB6A" stroke-width="2" rx="5"/>
<text x="560" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#66BB6A">Tool Execution</text>
<!-- Save to CSV -->
<rect x="500" y="100" width="120" height="40" fill="none" stroke="#EC407A" stroke-width="2" rx="5"/>
<text x="560" y="125" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#EC407A">Save to CSV</text>
<!-- Search Knowledge -->
<rect x="320" y="100" width="140" height="40" fill="none" stroke="#26A69A" stroke-width="2" rx="5"/>
<text x="390" y="125" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#26A69A">Search Knowledge</text>
<!-- Bot Response -->
<rect x="160" y="160" width="120" height="40" fill="none" stroke="#5C6BC0" stroke-width="2" rx="5"/>
<text x="220" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#5C6BC0">Bot Response</text>
</g>
<!-- Arrows -->
<g id="arrows" stroke="#888" stroke-width="2" fill="none">
<!-- Horizontal flow -->
<line x1="120" y1="50" x2="180" y2="50" marker-end="url(#arrow)"/>
<line x1="280" y1="50" x2="340" y2="50" marker-end="url(#arrow)"/>
<line x1="440" y1="50" x2="500" y2="50" marker-end="url(#arrow)"/>
<!-- Vertical connections -->
<line x1="230" y1="70" x2="230" y2="90" stroke-dasharray="3,3" opacity="0.6"/>
<line x1="390" y1="70" x2="390" y2="100" marker-end="url(#arrow)"/>
<line x1="560" y1="70" x2="560" y2="100" marker-end="url(#arrow)"/>
<!-- Feedback lines -->
<line x1="230" y1="90" x2="220" y2="160" marker-end="url(#arrow)"/>
<line x1="390" y1="140" x2="240" y2="160" marker-end="url(#arrow)"/>
<line x1="500" y1="120" x2="280" y2="170" marker-end="url(#arrow)"/>
<!-- User to Bot Response -->
<path d="M 70 70 Q 70 180 160 180" stroke-dasharray="3,3" marker-end="url(#arrow)" opacity="0.6"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 3 KiB

143
docs/src/assets/directory-tree.svg
View file

@ -1,143 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none">
<defs>
<!-- GB-inspired gradient for folders -->
<linearGradient id="folderGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4A90E2"/>
<stop offset="100%" style="stop-color:#3672B8"/>
</linearGradient>
<!-- GB-inspired gradient for files -->
<linearGradient id="fileGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366f1"/>
<stop offset="100%" style="stop-color:#4f46e5"/>
</linearGradient>
<!-- Connection line gradient -->
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#60a5fa;stop-opacity:0.4"/>
</linearGradient>
<!-- Folder symbol -->
<symbol id="folder" viewBox="0 0 24 20">
<path d="M2 4C2 2.9 2.9 2 4 2H9.17C9.7 2 10.21 2.21 10.59 2.59L12 4H20C21.1 4 22 4.9 22 6V16C22 17.1 21.1 18 20 18H4C2.9 18 2 17.1 2 16V4Z" fill="url(#folderGrad)"/>
<circle cx="8" cy="11" r="1" fill="#fff" opacity="0.7"/>
<circle cx="12" cy="11" r="1" fill="#fff" opacity="0.7"/>
</symbol>
<!-- File symbol -->
<symbol id="file" viewBox="0 0 20 24">
<path d="M12 1H4C2.9 1 2 1.9 2 3V21C2 22.1 2.9 23 4 23H16C17.1 23 18 22.1 18 21V7L12 1Z" fill="url(#fileGrad)" opacity="0.85"/>
<path d="M12 1V7H18" fill="#8b9dc3"/>
<line x1="5" y1="12" x2="13" y2="12" stroke="#fff" stroke-width="1" opacity="0.6"/>
<line x1="5" y1="15" x2="11" y2="15" stroke="#fff" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="18" x2="9" y2="18" stroke="#fff" stroke-width="1" opacity="0.3"/>
</symbol>
<!-- Bot config symbol (.gbot) -->
<symbol id="config" viewBox="0 0 20 24">
<path d="M12 1H4C2.9 1 2 1.9 2 3V21C2 22.1 2.9 23 4 23H16C17.1 23 18 22.1 18 21V7L12 1Z" fill="#f59e0b" opacity="0.85"/>
<path d="M12 1V7H18" fill="#fbbf24"/>
<circle cx="10" cy="14" r="4" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.8"/>
<circle cx="10" cy="14" r="1.5" fill="#fff" opacity="0.8"/>
</symbol>
<!-- Knowledge base symbol (.gbkb) -->
<symbol id="knowledge" viewBox="0 0 20 24">
<path d="M12 1H4C2.9 1 2 1.9 2 3V21C2 22.1 2.9 23 4 23H16C17.1 23 18 22.1 18 21V7L12 1Z" fill="#10b981" opacity="0.85"/>
<path d="M12 1V7H18" fill="#34d399"/>
<circle cx="10" cy="13" r="3" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.8"/>
<path d="M10 10V13L12 15" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
</symbol>
<!-- Dialog/script symbol (.bas) -->
<symbol id="script" viewBox="0 0 20 24">
<path d="M12 1H4C2.9 1 2 1.9 2 3V21C2 22.1 2.9 23 4 23H16C17.1 23 18 22.1 18 21V7L12 1Z" fill="#8b5cf6" opacity="0.85"/>
<path d="M12 1V7H18" fill="#a78bfa"/>
<text x="5" y="16" font-family="monospace" font-size="8" fill="#fff" opacity="0.9">BAS</text>
</symbol>
</defs>
<style>
.tree-label { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: #374151; }
.tree-label-folder { font-weight: 600; fill: #1f2937; }
.connection { stroke: url(#lineGrad); stroke-width: 2; stroke-linecap: round; }
.node-dot { fill: #3b82f6; }
</style>
<!-- Example tree structure - customize as needed -->
<!-- Root folder -->
<g transform="translate(20, 20)">
<use href="#folder" width="24" height="20"/>
<text x="30" y="14" class="tree-label tree-label-folder">mybot.gbai</text>
</g>
<!-- Vertical connector from root -->
<path d="M32 40 L32 240" class="connection" opacity="0.5"/>
<!-- Level 1: .gbdialog folder -->
<g transform="translate(50, 60)">
<circle cx="-18" cy="10" r="4" class="node-dot" opacity="0.6"/>
<path d="M-14 10 L0 10" class="connection"/>
<use href="#folder" width="24" height="20"/>
<text x="30" y="14" class="tree-label tree-label-folder">mybot.gbdialog</text>
</g>
<!-- Vertical connector for .gbdialog children -->
<path d="M62 80 L62 140" class="connection" opacity="0.4"/>
<!-- Level 2: start.bas -->
<g transform="translate(80, 100)">
<circle cx="-18" cy="12" r="3" class="node-dot" opacity="0.5"/>
<path d="M-15 12 L0 12" class="connection" opacity="0.6"/>
<use href="#script" width="16" height="20"/>
<text x="22" y="14" class="tree-label">start.bas</text>
</g>
<!-- Level 2: auth.bas -->
<g transform="translate(80, 130)">
<circle cx="-18" cy="12" r="3" class="node-dot" opacity="0.5"/>
<path d="M-15 12 L0 12" class="connection" opacity="0.6"/>
<use href="#script" width="16" height="20"/>
<text x="22" y="14" class="tree-label">auth.bas</text>
</g>
<!-- Level 1: .gbkb folder -->
<g transform="translate(50, 160)">
<circle cx="-18" cy="10" r="4" class="node-dot" opacity="0.6"/>
<path d="M-14 10 L0 10" class="connection"/>
<use href="#folder" width="24" height="20"/>
<text x="30" y="14" class="tree-label tree-label-folder">mybot.gbkb</text>
</g>
<!-- Vertical connector for .gbkb children -->
<path d="M62 180 L62 210" class="connection" opacity="0.4"/>
<!-- Level 2: knowledge file -->
<g transform="translate(80, 195)">
<circle cx="-18" cy="12" r="3" class="node-dot" opacity="0.5"/>
<path d="M-15 12 L0 12" class="connection" opacity="0.6"/>
<use href="#knowledge" width="16" height="20"/>
<text x="22" y="14" class="tree-label">faq.docx</text>
</g>
<!-- Level 1: .gbot folder -->
<g transform="translate(50, 230)">
<circle cx="-18" cy="10" r="4" class="node-dot" opacity="0.6"/>
<path d="M-14 10 L0 10" class="connection"/>
<use href="#folder" width="24" height="20"/>
<text x="30" y="14" class="tree-label tree-label-folder">mybot.gbot</text>
</g>
<!-- Vertical connector for .gbot children -->
<path d="M62 250 L62 275" class="connection" opacity="0.4"/>
<!-- Level 2: config.csv -->
<g transform="translate(80, 260)">
<circle cx="-18" cy="12" r="3" class="node-dot" opacity="0.5"/>
<path d="M-15 12 L0 12" class="connection" opacity="0.6"/>
<use href="#config" width="16" height="20"/>
<text x="22" y="14" class="tree-label">config.csv</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.2 KiB

261
docs/src/assets/feature-parity-flow.svg
View file

@ -1,261 +0,0 @@
<svg width="1200" height="650" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Modern Gradients -->
<linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
</linearGradient>
<linearGradient id="secondaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0EA5E9;stop-opacity:1" />
</linearGradient>
<linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
</linearGradient>
<linearGradient id="warningGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
</linearGradient>
<linearGradient id="flowLineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.3" />
</linearGradient>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F8FAFC;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F1F5F9;stop-opacity:1" />
</linearGradient>
<!-- Filters -->
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="130%">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#6366F1" flood-opacity="0.15"/>
</filter>
<filter id="glowEffect" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Arrow markers -->
<marker id="arrowPrimary" markerWidth="12" markerHeight="12" refX="10" refY="4" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,8 L12,4 z" fill="#8B5CF6"/>
</marker>
<marker id="arrowSuccess" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L10,3 z" fill="#10B981"/>
</marker>
<!-- Dot pattern -->
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.1"/>
</pattern>
</defs>
<style>
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.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; }
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
.accent-text { fill: #6366F1; 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; }
.mono-text { fill: #CBD5E1; }
}
</style>
<!-- Background -->
<rect width="1200" height="650" fill="url(#bgGradient)"/>
<rect width="1200" height="650" fill="url(#dots)"/>
<!-- Title -->
<text x="600" y="45" text-anchor="middle" font-size="26" font-weight="700" class="title-text">Feature Parity Flow</text>
<text x="600" y="72" text-anchor="middle" font-size="14" class="secondary-text">From Enterprise Cloud Services to Self-Hosted Freedom</text>
<!-- Source Platform Box -->
<g transform="translate(50, 110)">
<rect x="0" y="0" width="300" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2" filter="url(#cardShadow)"/>
<rect x="0" y="0" width="300" height="50" rx="12" fill="url(#secondaryGradient)"/>
<rect x="0" y="38" width="300" height="12" fill="url(#secondaryGradient)"/>
<text x="150" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">Enterprise Cloud</text>
<!-- Service items -->
<g transform="translate(20, 70)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Exchange Online</text>
<text x="45" y="32" font-size="10" class="mono-text">Mail, Calendar, Contacts</text>
</g>
<g transform="translate(20, 120)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">OneDrive / SharePoint</text>
<text x="45" y="32" font-size="10" class="mono-text">Files, Versioning, Sharing</text>
</g>
<g transform="translate(20, 170)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Teams</text>
<text x="45" y="32" font-size="10" class="mono-text">Chat, Video, Collaboration</text>
</g>
<g transform="translate(20, 220)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Power Automate</text>
<text x="45" y="32" font-size="10" class="mono-text">Workflows, Triggers</text>
</g>
<g transform="translate(20, 270)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Copilot</text>
<text x="45" y="32" font-size="10" class="mono-text">AI Assistant ($30/user)</text>
</g>
<g transform="translate(20, 320)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Azure AD / Entra</text>
<text x="45" y="32" font-size="10" class="mono-text">Identity, Auth, SSO</text>
</g>
</g>
<!-- Migration Arrow Center -->
<g transform="translate(380, 250)">
<!-- Flow line -->
<path d="M0,60 Q220,60 440,60" stroke="url(#flowLineGradient)" stroke-width="4" fill="none" marker-end="url(#arrowPrimary)"/>
<!-- Migration badge -->
<rect x="170" y="20" width="100" height="80" rx="10" fill="url(#primaryGradient)" filter="url(#glowEffect)"/>
<text x="220" y="55" text-anchor="middle" font-size="11" font-weight="600" class="white-text">MIGRATE</text>
<text x="220" y="72" text-anchor="middle" font-size="10" class="white-text" opacity="0.8">100% Parity</text>
<!-- Checkmarks -->
<g transform="translate(190, 95)">
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
</g>
<g transform="translate(220, 95)">
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
</g>
<g transform="translate(250, 95)">
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
</g>
</g>
<!-- Target Platform Box -->
<g transform="translate(850, 110)">
<rect x="0" y="0" width="300" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2" filter="url(#cardShadow)"/>
<rect x="0" y="0" width="300" height="50" rx="12" fill="url(#primaryGradient)"/>
<rect x="0" y="38" width="300" height="12" fill="url(#primaryGradient)"/>
<text x="150" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">General Bots</text>
<!-- Service items -->
<g transform="translate(20, 70)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Stalwart Mail</text>
<text x="45" y="32" font-size="10" class="mono-text">IMAP/SMTP/JMAP + CalDAV</text>
</g>
<g transform="translate(20, 120)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">SeaweedFS Drive</text>
<text x="45" y="32" font-size="10" class="mono-text">S3-compatible + Versioning</text>
</g>
<g transform="translate(20, 170)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">LiveKit Meet</text>
<text x="45" y="32" font-size="10" class="mono-text">WebRTC + Multi-channel</text>
</g>
<g transform="translate(20, 220)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">BASIC Scripts</text>
<text x="45" y="32" font-size="10" class="mono-text">90+ Keywords + Cron</text>
</g>
<g transform="translate(20, 270)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">LLM Integration</text>
<text x="45" y="32" font-size="10" class="mono-text">Any Provider (Free)</text>
</g>
<g transform="translate(20, 320)">
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Zitadel IAM</text>
<text x="45" y="32" font-size="10" class="mono-text">OIDC/OAuth2 + MFA</text>
</g>
</g>
<!-- Benefits Bar -->
<g transform="translate(50, 540)">
<rect x="0" y="0" width="1100" height="80" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
<!-- Benefit 1 -->
<g transform="translate(50, 15)">
<rect x="0" y="0" width="200" height="50" rx="8" fill="#ECFDF5"/>
<circle cx="25" cy="25" r="15" fill="url(#successGradient)"/>
<text x="22" y="30" text-anchor="middle" font-size="14" font-weight="700" class="white-text">✓</text>
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Self-Hosted</text>
<text x="55" y="38" font-size="10" class="secondary-text">Full Data Control</text>
</g>
<!-- Benefit 2 -->
<g transform="translate(280, 15)">
<rect x="0" y="0" width="200" height="50" rx="8" fill="#EEF2FF"/>
<circle cx="25" cy="25" r="15" fill="url(#primaryGradient)"/>
<text x="25" y="31" text-anchor="middle" font-size="14" font-weight="700" class="white-text">$0</text>
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">No Per-User Fee</text>
<text x="55" y="38" font-size="10" class="secondary-text">Unlimited Users</text>
</g>
<!-- Benefit 3 -->
<g transform="translate(510, 15)">
<rect x="0" y="0" width="200" height="50" rx="8" fill="#FEF3C7"/>
<circle cx="25" cy="25" r="15" fill="url(#warningGradient)"/>
<text x="25" y="31" text-anchor="middle" font-size="12" font-weight="700" class="white-text">AI</text>
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Native LLM</text>
<text x="55" y="38" font-size="10" class="secondary-text">Built-in RAG + Tools</text>
</g>
<!-- Benefit 4 -->
<g transform="translate(740, 15)">
<rect x="0" y="0" width="200" height="50" rx="8" fill="#F0FDF4"/>
<circle cx="25" cy="25" r="15" fill="url(#successGradient)"/>
<text x="25" y="31" text-anchor="middle" font-size="10" font-weight="700" class="white-text">OSS</text>
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Open Source</text>
<text x="55" y="38" font-size="10" class="secondary-text">AGPL Licensed</text>
</g>
<!-- Benefit 5 -->
<g transform="translate(970, 15)">
<rect x="0" y="0" width="80" height="50" rx="8" fill="#EEF2FF"/>
<text x="40" y="30" text-anchor="middle" font-size="20" font-weight="700" class="accent-text">90+</text>
<text x="40" y="45" text-anchor="middle" font-size="9" class="secondary-text">Keywords</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

124
docs/src/assets/gb-decorative-header.svg
View file

@ -1,124 +0,0 @@
<svg width="1200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Primary brand gradient -->
<linearGradient id="brandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
<stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
<stop offset="60%" style="stop-color:#A855F7;stop-opacity:1" />
<stop offset="100%" style="stop-color:#D946EF;stop-opacity:1" />
</linearGradient>
<!-- Accent gradient -->
<linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
<stop offset="50%" style="stop-color:#3B82F6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
</linearGradient>
<!-- Subtle mesh gradient background -->
<radialGradient id="meshGradient1" cx="20%" cy="30%" r="60%" fx="20%" fy="30%">
<stop offset="0%" style="stop-color:#818CF8;stop-opacity:0.15" />
<stop offset="100%" style="stop-color:#818CF8;stop-opacity:0" />
</radialGradient>
<radialGradient id="meshGradient2" cx="80%" cy="70%" r="50%" fx="80%" fy="70%">
<stop offset="0%" style="stop-color:#C084FC;stop-opacity:0.12" />
<stop offset="100%" style="stop-color:#C084FC;stop-opacity:0" />
</radialGradient>
<radialGradient id="meshGradient3" cx="50%" cy="20%" r="40%" fx="50%" fy="20%">
<stop offset="0%" style="stop-color:#22D3EE;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#22D3EE;stop-opacity:0" />
</radialGradient>
<!-- Glow filter -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Soft shadow -->
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#6366F1" flood-opacity="0.25"/>
</filter>
<!-- Wave pattern -->
<pattern id="wavePattern" patternUnits="userSpaceOnUse" width="100" height="20" patternTransform="rotate(-5)">
<path d="M0 10 Q25 0 50 10 T100 10" stroke="url(#brandGradient)" stroke-width="0.5" fill="none" opacity="0.3"/>
</pattern>
<!-- Dot pattern -->
<pattern id="dotPattern" patternUnits="userSpaceOnUse" width="30" height="30">
<circle cx="15" cy="15" r="1" fill="#6366F1" opacity="0.15"/>
</pattern>
</defs>
<style>
.header-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.sub-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
@media (prefers-color-scheme: dark) {
.header-text { fill: #F1F5F9; }
.sub-text { fill: #94A3B8; }
}
</style>
<!-- Background layers -->
<rect width="1200" height="200" fill="#FAFBFC"/>
<rect width="1200" height="200" fill="url(#dotPattern)"/>
<rect width="1200" height="200" fill="url(#meshGradient1)"/>
<rect width="1200" height="200" fill="url(#meshGradient2)"/>
<rect width="1200" height="200" fill="url(#meshGradient3)"/>
<!-- Decorative wave lines -->
<rect x="0" y="60" width="1200" height="80" fill="url(#wavePattern)" opacity="0.5"/>
<!-- Decorative circles -->
<circle cx="100" cy="100" r="80" fill="none" stroke="url(#brandGradient)" stroke-width="1" opacity="0.2"/>
<circle cx="100" cy="100" r="60" fill="none" stroke="url(#accentGradient)" stroke-width="0.5" opacity="0.3"/>
<circle cx="100" cy="100" r="40" fill="none" stroke="url(#brandGradient)" stroke-width="0.5" opacity="0.4"/>
<circle cx="1100" cy="100" r="70" fill="none" stroke="url(#brandGradient)" stroke-width="1" opacity="0.2"/>
<circle cx="1100" cy="100" r="50" fill="none" stroke="url(#accentGradient)" stroke-width="0.5" opacity="0.3"/>
<circle cx="1100" cy="100" r="30" fill="none" stroke="url(#brandGradient)" stroke-width="0.5" opacity="0.4"/>
<!-- Floating shapes -->
<g opacity="0.6">
<rect x="200" y="30" width="12" height="12" rx="2" fill="url(#brandGradient)" transform="rotate(15 206 36)"/>
<rect x="950" y="150" width="10" height="10" rx="2" fill="url(#accentGradient)" transform="rotate(-20 955 155)"/>
<circle cx="300" cy="160" r="5" fill="#A855F7" opacity="0.5"/>
<circle cx="850" cy="40" r="4" fill="#06B6D4" opacity="0.6"/>
<circle cx="1000" cy="80" r="3" fill="#8B5CF6" opacity="0.5"/>
<circle cx="180" cy="70" r="3" fill="#3B82F6" opacity="0.5"/>
</g>
<!-- Central decorative element -->
<g transform="translate(600, 100)" filter="url(#softShadow)">
<!-- Outer ring -->
<circle cx="0" cy="0" r="45" fill="none" stroke="url(#brandGradient)" stroke-width="2" stroke-dasharray="8 4" opacity="0.4"/>
<!-- Inner hexagon shape -->
<path d="M0,-30 L26,-15 L26,15 L0,30 L-26,15 L-26,-15 Z"
fill="none" stroke="url(#accentGradient)" stroke-width="1.5" opacity="0.5"/>
<!-- Center dot -->
<circle cx="0" cy="0" r="8" fill="url(#brandGradient)" filter="url(#glow)"/>
<circle cx="0" cy="0" r="4" fill="#FFFFFF"/>
</g>
<!-- Connecting lines -->
<g stroke="url(#brandGradient)" stroke-width="1" opacity="0.2">
<line x1="170" y1="100" x2="555" y2="100"/>
<line x1="645" y1="100" x2="1030" y2="100"/>
</g>
<!-- Gradient accent line at bottom -->
<rect x="0" y="195" width="1200" height="5" fill="url(#brandGradient)" opacity="0.8"/>
<!-- Corner accents -->
<path d="M0,0 L50,0 L50,5 L5,5 L5,50 L0,50 Z" fill="url(#brandGradient)" opacity="0.3"/>
<path d="M1200,0 L1150,0 L1150,5 L1195,5 L1195,50 L1200,50 Z" fill="url(#brandGradient)" opacity="0.3"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 5.7 KiB

16
docs/src/assets/icons/gb-bot.svg
View file

@ -1,16 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<!-- Bot head - rounded square inspired by GB logo -->
<rect x="4" y="4" width="16" height="14" rx="3" ry="3"/>
<!-- Eyes - circular like GB branding -->
<circle cx="9" cy="10" r="1.5" fill="currentColor" stroke="none"/>
<circle cx="15" cy="10" r="1.5" fill="currentColor" stroke="none"/>
<!-- Smile -->
<path d="M9 14 Q12 16 15 14" fill="none"/>
<!-- Antenna -->
<line x1="12" y1="4" x2="12" y2="1"/>
<circle cx="12" cy="1" r="1" fill="currentColor" stroke="none"/>
<!-- Base/body connection -->
<path d="M8 18 L8 21 L16 21 L16 18"/>
<line x1="10" y1="21" x2="10" y2="23"/>
<line x1="14" y1="21" x2="14" y2="23"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 811 B

27
docs/src/assets/icons/gb-chart.svg
View file

@ -1,27 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired chart icon with characteristic curves -->
<defs>
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6"/>
<stop offset="100%" style="stop-color:#1d4ed8"/>
</linearGradient>
</defs>
<!-- Base platform - GB style rounded -->
<path d="M3 20h18" stroke="url(#chartGradient)" stroke-width="2" stroke-linecap="round"/>
<!-- Bar 1 - shortest -->
<rect x="4" y="14" width="3" height="6" rx="1" fill="url(#chartGradient)" opacity="0.6"/>
<!-- Bar 2 - medium -->
<rect x="9" y="10" width="3" height="10" rx="1" fill="url(#chartGradient)" opacity="0.8"/>
<!-- Bar 3 - tallest with GB curve accent -->
<rect x="14" y="5" width="3" height="15" rx="1" fill="url(#chartGradient)"/>
<!-- Trend line - GB characteristic curve -->
<path d="M5.5 13 C8 11, 10 9, 15.5 4" stroke="#10b981" stroke-width="2" stroke-linecap="round" fill="none"/>
<!-- Accent dot at peak -->
<circle cx="15.5" cy="4" r="2" fill="#10b981"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

21
docs/src/assets/icons/gb-check.svg
View file

@ -1,21 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired checkmark icon -->
<defs>
<linearGradient id="gbCheckGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#10b981"/>
<stop offset="100%" style="stop-color:#059669"/>
</linearGradient>
</defs>
<!-- Outer circle - GB style -->
<circle cx="12" cy="12" r="10" stroke="url(#gbCheckGradient)" stroke-width="1.5" fill="none"/>
<!-- Inner fill with GB transparency -->
<circle cx="12" cy="12" r="8" fill="url(#gbCheckGradient)" opacity="0.15"/>
<!-- Checkmark path - bold and confident -->
<path d="M7 12.5L10.5 16L17 8" stroke="url(#gbCheckGradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Subtle accent dot at tip - GB brand element -->
<circle cx="17" cy="8" r="1" fill="#10b981"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 919 B

29
docs/src/assets/icons/gb-database.svg
View file

@ -1,29 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired database icon with cylindrical storage aesthetic -->
<defs>
<linearGradient id="dbGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#6366f1"/>
<stop offset="100%" style="stop-color:#4f46e5"/>
</linearGradient>
</defs>
<!-- Top ellipse - database cap -->
<ellipse cx="12" cy="5" rx="8" ry="3" fill="url(#dbGradient)" stroke="currentColor" stroke-width="1"/>
<!-- Database body sides -->
<path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5" stroke="currentColor" stroke-width="1" fill="none"/>
<!-- Side fill -->
<path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5c0 1.66-3.58 3-8 3S4 6.66 4 5z" fill="url(#dbGradient)" opacity="0.85"/>
<!-- Middle rings - GB horizontal accent lines -->
<ellipse cx="12" cy="10" rx="8" ry="2.5" fill="none" stroke="currentColor" stroke-width="0.75" opacity="0.5"/>
<ellipse cx="12" cy="15" rx="8" ry="2.5" fill="none" stroke="currentColor" stroke-width="0.75" opacity="0.5"/>
<!-- Data indicator dots - GB bot eyes reference -->
<circle cx="9" cy="12" r="1" fill="#fff" opacity="0.8"/>
<circle cx="15" cy="12" r="1" fill="#fff" opacity="0.8"/>
<!-- Bottom highlight -->
<ellipse cx="12" cy="19" rx="6" ry="1.5" fill="#fff" fill-opacity="0.15"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

20
docs/src/assets/icons/gb-folder.svg
View file

@ -1,20 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired folder icon -->
<defs>
<linearGradient id="folderGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4A90E2"/>
<stop offset="100%" style="stop-color:#3672B8"/>
</linearGradient>
</defs>
<!-- Folder back -->
<path d="M2 6C2 4.89543 2.89543 4 4 4H9.17157C9.70201 4 10.2107 4.21071 10.5858 4.58579L12 6H20C21.1046 6 22 6.89543 22 8V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6Z" fill="url(#folderGradient)" opacity="0.85"/>
<!-- Folder front tab -->
<path d="M2 8C2 7.44772 2.44772 7 3 7H21C21.5523 7 22 7.44772 22 8V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V8Z" fill="url(#folderGradient)"/>
<!-- GB bot face on folder - subtle branding -->
<circle cx="9" cy="13" r="1" fill="#fff" opacity="0.8"/>
<circle cx="15" cy="13" r="1" fill="#fff" opacity="0.8"/>
<path d="M10 16 Q12 17.5 14 16" stroke="#fff" stroke-width="1" fill="none" opacity="0.6" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

4
docs/src/assets/icons/gb-gear.svg
View file

@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 4 KiB

32
docs/src/assets/icons/gb-globe.svg
View file

@ -1,32 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired globe/web icon -->
<defs>
<linearGradient id="globeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6"/>
<stop offset="100%" style="stop-color:#1d4ed8"/>
</linearGradient>
</defs>
<!-- Main globe circle -->
<circle cx="12" cy="12" r="10" stroke="url(#globeGradient)" stroke-width="1.5" fill="none"/>
<!-- Horizontal latitude lines - GB curved style -->
<ellipse cx="12" cy="12" rx="10" ry="4" stroke="currentColor" stroke-width="1" fill="none" opacity="0.4"/>
<ellipse cx="12" cy="12" rx="10" ry="7" stroke="currentColor" stroke-width="1" fill="none" opacity="0.25"/>
<!-- Vertical meridian line -->
<ellipse cx="12" cy="12" rx="4" ry="10" stroke="currentColor" stroke-width="1" fill="none" opacity="0.5"/>
<!-- Center vertical line -->
<line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="1" opacity="0.3"/>
<!-- Center horizontal line -->
<line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="1" opacity="0.3"/>
<!-- GB bot eyes on globe - subtle branding -->
<circle cx="9" cy="10" r="1" fill="url(#globeGradient)" opacity="0.7"/>
<circle cx="15" cy="10" r="1" fill="url(#globeGradient)" opacity="0.7"/>
<!-- Subtle highlight arc -->
<path d="M6 6 Q8 4 12 4" stroke="white" stroke-width="1.5" fill="none" opacity="0.3" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

20
docs/src/assets/icons/gb-lightbulb.svg
View file

@ -1,20 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- General Bots inspired lightbulb icon -->
<defs>
<linearGradient id="gbLightbulbGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F5A623;stop-opacity:1" />
<stop offset="100%" style="stop-color:#F8D71C;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Bulb body with GB circular motif -->
<path d="M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7z" fill="url(#gbLightbulbGradient)"/>
<!-- Inner glow representing bot intelligence -->
<circle cx="12" cy="9" r="3" fill="#fff" fill-opacity="0.6"/>
<!-- Bot eye dot -->
<circle cx="12" cy="9" r="1.2" fill="#4A90E2"/>
<!-- Base segments -->
<rect x="9" y="18" width="6" height="1.5" rx="0.5" fill="#666"/>
<rect x="9" y="20" width="6" height="1.5" rx="0.5" fill="#888"/>
<!-- Light rays -->
<path d="M12 0v1.5M18.5 3.5l-1.06 1.06M21 9h-1.5M18.5 14.5l-1.06-1.06M5.5 3.5l1.06 1.06M3 9h1.5M5.5 14.5l1.06-1.06" stroke="#F5A623" stroke-width="1" stroke-linecap="round" opacity="0.7"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

43
docs/src/assets/icons/gb-lock.svg
View file

@ -1,43 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired lock/security icon -->
<defs>
<linearGradient id="lockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#6366f1"/>
<stop offset="100%" style="stop-color:#4f46e5"/>
</linearGradient>
</defs>
<!-- Lock shackle - rounded GB style -->
<path d="M7 10V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V10"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
fill="none"/>
<!-- Lock body - rounded rectangle with GB aesthetic -->
<rect x="5" y="10" width="14" height="12" rx="2"
fill="url(#lockGradient)"
stroke="currentColor"
stroke-width="1.5"/>
<!-- Keyhole - bot eye inspired circular design -->
<circle cx="12" cy="14.5" r="2" fill="#1e1b4b"/>
<!-- Keyhole slot -->
<path d="M12 16V18.5" stroke="#1e1b4b" stroke-width="2" stroke-linecap="round"/>
<!-- Highlight reflection - GB polish -->
<path d="M7 12C7 11.4477 7.44772 11 8 11H10C10.5523 11 11 11.4477 11 12"
stroke="white"
stroke-opacity="0.3"
stroke-width="1"
stroke-linecap="round"
fill="none"/>
<!-- Subtle inner border glow -->
<rect x="6" y="11" width="12" height="10" rx="1.5"
stroke="white"
stroke-opacity="0.1"
stroke-width="0.5"
fill="none"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

16
docs/src/assets/icons/gb-note.svg
View file

@ -1,16 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired document/note icon -->
<!-- Page with folded corner -->
<path d="M14 2H6C4.9 2 4 2.9 4 4v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6z" stroke="currentColor" stroke-width="1.5" fill="none"/>
<!-- Folded corner -->
<path d="M14 2v6h6" stroke="currentColor" stroke-width="1.5" fill="currentColor" fill-opacity="0.1" stroke-linejoin="round"/>
<!-- Text lines - GB clean style -->
<line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
<line x1="8" y1="15" x2="14" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
<line x1="8" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
<!-- GB accent dot -->
<circle cx="17" cy="17" r="1.5" fill="#3b82f6"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 942 B

13
docs/src/assets/icons/gb-package.svg
View file

@ -1,13 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<!-- GB-inspired package icon - hexagonal bot head with package box -->
<path d="M12 2L3 7v10l9 5 9-5V7l-9-5z" opacity="0.2" fill="currentColor"/>
<path d="M12 2L3 7v10l9 5 9-5V7l-9-5z"/>
<path d="M12 22V12"/>
<path d="M21 7l-9 5-9-5"/>
<!-- Bot eyes -->
<circle cx="9" cy="10" r="1" fill="currentColor"/>
<circle cx="15" cy="10" r="1" fill="currentColor"/>
<!-- Bot antenna -->
<path d="M12 2v-1"/>
<circle cx="12" cy="0.5" r="0.5" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 645 B

32
docs/src/assets/icons/gb-palette.svg
View file

@ -1,32 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired palette icon for theming -->
<defs>
<linearGradient id="paletteGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8b5cf6"/>
<stop offset="100%" style="stop-color:#6366f1"/>
</linearGradient>
</defs>
<!-- Palette shape - GB rounded organic form -->
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C12.76 22 13.5 21.76 14.1 21.32C14.85 20.78 15.3 19.9 15.3 18.95C15.3 18.44 15.12 17.95 14.82 17.54C14.52 17.12 14.38 16.6 14.55 16.1C14.74 15.53 15.3 15.15 15.9 15.15H18C20.21 15.15 22 13.36 22 11.15C22 6.13 17.52 2 12 2Z"
fill="url(#paletteGradient)"
stroke="currentColor"
stroke-width="1"
opacity="0.85"/>
<!-- Color dots - GB circular branding style -->
<!-- Blue dot -->
<circle cx="6.5" cy="11" r="2" fill="#3b82f6"/>
<!-- Green dot -->
<circle cx="9" cy="6.5" r="2" fill="#10b981"/>
<!-- Yellow/Gold dot -->
<circle cx="14" cy="6" r="2" fill="#fbbf24"/>
<!-- Pink/Coral dot -->
<circle cx="17" cy="10" r="2" fill="#f472b6"/>
<!-- Highlight reflection - GB polish -->
<path d="M7 4C9 3 11 2.5 13 3" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.3 KiB

31
docs/src/assets/icons/gb-rocket.svg
View file

@ -1,31 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired rocket icon - representing launch/deploy -->
<defs>
<linearGradient id="rocketGradient" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#3b82f6"/>
<stop offset="100%" style="stop-color:#60a5fa"/>
</linearGradient>
<linearGradient id="flameGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f97316"/>
<stop offset="50%" style="stop-color:#fbbf24"/>
<stop offset="100%" style="stop-color:#fcd34d"/>
</linearGradient>
</defs>
<!-- Rocket body - GB rounded aesthetic -->
<path d="M12 2C12 2 8 6 8 12C8 15 9.5 17 12 19C14.5 17 16 15 16 12C16 6 12 2 12 2Z" fill="url(#rocketGradient)" stroke="currentColor" stroke-width="1"/>
<!-- Window - circular GB style -->
<circle cx="12" cy="9" r="2" fill="#fff" stroke="currentColor" stroke-width="0.75"/>
<circle cx="12" cy="9" r="1" fill="#1e3a5f" opacity="0.8"/>
<!-- Left fin -->
<path d="M8 14L5 17L7 18L8 16" fill="url(#rocketGradient)" stroke="currentColor" stroke-width="0.75" stroke-linejoin="round"/>
<!-- Right fin -->
<path d="M16 14L19 17L17 18L16 16" fill="url(#rocketGradient)" stroke="currentColor" stroke-width="0.75" stroke-linejoin="round"/>
<!-- Flame exhaust -->
<path d="M10 19C10 19 11 22 12 23C13 22 14 19 14 19C13.5 20 12.5 21 12 21C11.5 21 10.5 20 10 19Z" fill="url(#flameGradient)"/>
<path d="M11 19C11 19 11.5 21 12 21.5C12.5 21 13 19 13 19" fill="#fef08a" opacity="0.8"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.6 KiB

18
docs/src/assets/icons/gb-search.svg
View file

@ -1,18 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired search icon with bot-like characteristics -->
<!-- Main magnifying glass circle - GB rounded aesthetic -->
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5" fill="none"/>
<!-- Inner circle detail - bot eye inspired -->
<circle cx="10" cy="10" r="3.5" stroke="currentColor" stroke-width="1" fill="none" opacity="0.4"/>
<!-- Center highlight - GB bot eye -->
<circle cx="10" cy="10" r="1.5" fill="currentColor" opacity="0.6"/>
<!-- Handle with GB curve -->
<path d="M15.5 15.5L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<!-- Subtle reflection arc - GB style -->
<path d="M6 7 Q7.5 5.5 9.5 5.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.3"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 878 B

33
docs/src/assets/icons/gb-signal.svg
View file

@ -1,33 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired signal/broadcast icon -->
<defs>
<linearGradient id="signalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:#3b82f6"/>
<stop offset="100%" style="stop-color:#60a5fa"/>
</linearGradient>
</defs>
<!-- Outer wave arc -->
<path d="M4.5 4.5C1.5 7.5 1.5 12.5 4.5 15.5" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
<path d="M19.5 4.5C22.5 7.5 22.5 12.5 19.5 15.5" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
<!-- Middle wave arc -->
<path d="M7 7C5 9 5 11 7 13" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.6"/>
<path d="M17 7C19 9 19 11 17 13" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.6"/>
<!-- Inner wave arc -->
<path d="M9.5 8.5C8.5 9.5 8.5 10.5 9.5 11.5" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.8"/>
<path d="M14.5 8.5C15.5 9.5 15.5 10.5 14.5 11.5" stroke="url(#signalGradient)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.8"/>
<!-- Center broadcast point - GB bot head style -->
<circle cx="12" cy="10" r="2.5" fill="url(#signalGradient)"/>
<circle cx="11" cy="9.5" r="0.5" fill="#fff" opacity="0.8"/>
<circle cx="13" cy="9.5" r="0.5" fill="#fff" opacity="0.8"/>
<!-- Antenna tower base -->
<path d="M12 12.5V18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M9 18H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M10 21H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<path d="M9 18L10 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<path d="M15 18L14 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2 KiB

16
docs/src/assets/icons/gb-target.svg
View file

@ -1,16 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB Target Icon - Inspired by General Bots aesthetic -->
<!-- Outer ring -->
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.3"/>
<!-- Middle ring -->
<circle cx="12" cy="12" r="6.5" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
<!-- Inner core - GB style rounded hexagon hint -->
<path d="M12 5.5L15.5 8V13L12 16.5L8.5 13V8L12 5.5Z" stroke="currentColor" stroke-width="1.5" fill="currentColor" fill-opacity="0.15" stroke-linejoin="round"/>
<!-- Center dot -->
<circle cx="12" cy="11" r="1.5" fill="currentColor"/>
<!-- Targeting lines -->
<line x1="12" y1="2" x2="12" y2="4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="12" y1="20" x2="12" y2="22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="2" y1="12" x2="4" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<line x1="20" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

42
docs/src/assets/icons/gb-tree.svg
View file

@ -1,42 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired tree structure icon for file/directory trees -->
<defs>
<linearGradient id="treeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3b82f6"/>
<stop offset="100%" style="stop-color:#1d4ed8"/>
</linearGradient>
</defs>
<!-- Main vertical trunk -->
<path d="M6 3V21" stroke="url(#treeGradient)" stroke-width="2" stroke-linecap="round"/>
<!-- Branch 1 - top level -->
<path d="M6 6H10" stroke="url(#treeGradient)" stroke-width="2" stroke-linecap="round"/>
<!-- Node 1 - GB bot-inspired circle -->
<circle cx="13" cy="6" r="3" fill="url(#treeGradient)" opacity="0.9"/>
<circle cx="12" cy="5.5" r="0.6" fill="#fff"/>
<circle cx="14" cy="5.5" r="0.6" fill="#fff"/>
<!-- Branch 2 - middle level -->
<path d="M6 12H10" stroke="url(#treeGradient)" stroke-width="2" stroke-linecap="round"/>
<!-- Node 2 - folder-like rectangle with GB rounding -->
<rect x="10" y="10" width="8" height="4" rx="1.5" fill="url(#treeGradient)" opacity="0.7"/>
<line x1="12" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="1" stroke-linecap="round" opacity="0.8"/>
<!-- Branch 3 - bottom level -->
<path d="M6 18H10" stroke="url(#treeGradient)" stroke-width="2" stroke-linecap="round"/>
<!-- Node 3 - document icon -->
<path d="M10 16H16C16.5523 16 17 16.4477 17 17V19C17 19.5523 16.5523 20 16 20H10C10 20 10 16 10 16Z" fill="url(#treeGradient)" opacity="0.5"/>
<line x1="12" y1="18" x2="15" y2="18" stroke="#fff" stroke-width="0.75" stroke-linecap="round"/>
<!-- Sub-branch connector dots - GB style -->
<circle cx="6" cy="6" r="1" fill="url(#treeGradient)"/>
<circle cx="6" cy="12" r="1" fill="url(#treeGradient)"/>
<circle cx="6" cy="18" r="1" fill="url(#treeGradient)"/>
<!-- Root node at top -->
<circle cx="6" cy="3" r="1.5" fill="url(#treeGradient)"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

25
docs/src/assets/icons/gb-warning.svg
View file

@ -1,25 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- GB-inspired warning icon - triangular with bot aesthetic -->
<defs>
<linearGradient id="warningGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fbbf24"/>
<stop offset="100%" style="stop-color:#f59e0b"/>
</linearGradient>
</defs>
<!-- Warning triangle with rounded corners - GB style -->
<path d="M12 2L2 20C1.7 20.5 2.1 21 2.6 21H21.4C21.9 21 22.3 20.5 22 20L12 2Z"
fill="url(#warningGradient)"
stroke="#d97706"
stroke-width="1"
stroke-linejoin="round"/>
<!-- Bot-style exclamation with rounded elements -->
<rect x="11" y="8" width="2" height="6" rx="1" fill="#7c2d12"/>
<!-- Dot at bottom - circular like GB branding -->
<circle cx="12" cy="17" r="1.2" fill="#7c2d12"/>
<!-- Subtle inner highlight -->
<path d="M12 4L4.5 18H19.5L12 4Z" fill="white" fill-opacity="0.15"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 992 B

248
docs/src/assets/infrastructure-architecture.svg
View file

@ -1,248 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.neon-gray { stroke: #888888; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-gray {
stroke: #AAAAAA;
stroke-width: 2.8;
filter: drop-shadow(0 0 2px #888888);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="33%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="66%" style="stop-color:#7ED321;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#50E3C2;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-size="32" font-weight="600" class="main-text">Infrastructure Architecture</text>
<text x="700" y="75" text-anchor="middle" font-size="18" class="secondary-text">Load Balancing, Multi-Tenant Isolation, and Auto-Scaling</text>
<!-- MAIN ARCHITECTURE DIAGRAM -->
<g id="main-architecture">
<!-- Internet/Clients -->
<text x="700" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Clients</text>
<!-- Client Icons Row -->
<rect x="350" y="130" width="100" height="50" class="neon-blue" rx="6.5"/>
<text x="400" y="160" text-anchor="middle" font-size="16" class="main-text">Web</text>
<rect x="500" y="130" width="100" height="50" class="neon-blue" rx="6.5"/>
<text x="550" y="160" text-anchor="middle" font-size="16" class="main-text">Mobile</text>
<rect x="650" y="130" width="100" height="50" class="neon-blue" rx="6.5"/>
<text x="700" y="160" text-anchor="middle" font-size="16" class="main-text">WhatsApp</text>
<rect x="800" y="130" width="100" height="50" class="neon-blue" rx="6.5"/>
<text x="850" y="160" text-anchor="middle" font-size="16" class="main-text">Teams</text>
<rect x="950" y="130" width="100" height="50" class="neon-blue" rx="6.5"/>
<text x="1000" y="160" text-anchor="middle" font-size="16" class="main-text">API</text>
<!-- Load Balancer -->
<rect x="300" y="220" width="800" height="60" class="neon-orange" rx="6.5"/>
<text x="700" y="255" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Load Balancer (Caddy)</text>
<text x="700" y="273" text-anchor="middle" font-size="14" class="secondary-text">TLS Termination | Rate Limiting | Health Checks</text>
<!-- Connection lines from clients to LB -->
<g stroke="#666" stroke-width="2" opacity="0.5">
<line x1="400" y1="180" x2="500" y2="220"/>
<line x1="550" y1="180" x2="600" y2="220"/>
<line x1="700" y1="180" x2="700" y2="220"/>
<line x1="850" y1="180" x2="800" y2="220"/>
<line x1="1000" y1="180" x2="900" y2="220"/>
</g>
<!-- BotServer Instances -->
<text x="700" y="315" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">BotServer Instances (Auto-Scaled)</text>
<rect x="150" y="335" width="200" height="80" class="neon-green" rx="6.5"/>
<text x="250" y="370" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BotServer 1</text>
<text x="250" y="395" text-anchor="middle" font-size="14" class="secondary-text">LXC Container</text>
<rect x="400" y="335" width="200" height="80" class="neon-green" rx="6.5"/>
<text x="500" y="370" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BotServer 2</text>
<text x="500" y="395" text-anchor="middle" font-size="14" class="secondary-text">LXC Container</text>
<rect x="650" y="335" width="200" height="80" class="neon-green" rx="6.5"/>
<text x="750" y="370" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BotServer 3</text>
<text x="750" y="395" text-anchor="middle" font-size="14" class="secondary-text">LXC Container</text>
<rect x="900" y="335" width="200" height="80" class="neon-gray" rx="6.5" stroke-dasharray="5,5"/>
<text x="1000" y="370" text-anchor="middle" font-size="18" font-weight="500" class="main-text">BotServer N</text>
<text x="1000" y="395" text-anchor="middle" font-size="14" class="secondary-text">Auto-Scale</text>
<!-- Connection lines from LB to BotServers -->
<g stroke="#666" stroke-width="2.6" opacity="0.7">
<line x1="400" y1="280" x2="250" y2="335" marker-end="url(#arrow)"/>
<line x1="550" y1="280" x2="500" y2="335" marker-end="url(#arrow)"/>
<line x1="700" y1="280" x2="750" y2="335" marker-end="url(#arrow)"/>
<line x1="850" y1="280" x2="1000" y2="335" marker-end="url(#arrow)" stroke-dasharray="5,5"/>
</g>
<!-- Data Layer Label -->
<text x="700" y="460" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Shared Data Layer</text>
<!-- Data Layer Components -->
<rect x="50" y="480" width="160" height="70" class="neon-purple" rx="6.5"/>
<text x="130" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">PostgreSQL</text>
<text x="130" y="535" text-anchor="middle" font-size="12" class="secondary-text">Relational Data</text>
<rect x="230" y="480" width="140" height="70" class="neon-purple" rx="6.5"/>
<text x="300" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Valkey</text>
<text x="300" y="535" text-anchor="middle" font-size="12" class="secondary-text">Cache + Sessions</text>
<rect x="390" y="480" width="140" height="70" class="neon-purple" rx="6.5"/>
<text x="460" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Qdrant</text>
<text x="460" y="535" text-anchor="middle" font-size="12" class="secondary-text">Vector Search</text>
<rect x="550" y="480" width="160" height="70" class="neon-purple" rx="6.5"/>
<text x="630" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">SeaweedFS</text>
<text x="630" y="535" text-anchor="middle" font-size="12" class="secondary-text">Object Storage</text>
<rect x="730" y="480" width="140" height="70" class="neon-cyan" rx="6.5"/>
<text x="800" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Zitadel</text>
<text x="800" y="535" text-anchor="middle" font-size="12" class="secondary-text">IAM / Auth</text>
<rect x="890" y="480" width="140" height="70" class="neon-cyan" rx="6.5"/>
<text x="960" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">LiveKit</text>
<text x="960" y="535" text-anchor="middle" font-size="12" class="secondary-text">Real-time Meet</text>
<rect x="1050" y="480" width="140" height="70" class="neon-cyan" rx="6.5"/>
<text x="1120" y="515" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Stalwart</text>
<text x="1120" y="535" text-anchor="middle" font-size="12" class="secondary-text">Email Server</text>
<!-- Connection lines from BotServers to Data Layer -->
<g stroke="#666" stroke-width="2" opacity="0.4">
<line x1="250" y1="415" x2="130" y2="480"/>
<line x1="250" y1="415" x2="300" y2="480"/>
<line x1="500" y1="415" x2="460" y2="480"/>
<line x1="500" y1="415" x2="630" y2="480"/>
<line x1="750" y1="415" x2="800" y2="480"/>
<line x1="750" y1="415" x2="960" y2="480"/>
<line x1="1000" y1="415" x2="1120" y2="480"/>
</g>
</g>
<!-- PROGRESS INDICATOR (Lower Section) -->
<g id="progress-legend">
<rect x="50" y="600" width="1300" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="640" r="12" class="neon-blue"/>
<circle cx="500" cy="640" r="12" class="neon-orange"/>
<circle cx="800" cy="640" r="12" class="neon-green"/>
<circle cx="1100" cy="640" r="12" class="neon-purple"/>
<!-- Connecting lines -->
<line x1="212" y1="640" x2="488" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="512" y1="640" x2="788" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="812" y1="640" x2="1088" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="200" y="610" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Request</text>
<text x="200" y="672" text-anchor="middle" font-size="14" class="secondary-text">Multi-Channel</text>
<text x="500" y="610" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Route</text>
<text x="500" y="672" text-anchor="middle" font-size="14" class="secondary-text">Load Balance</text>
<text x="800" y="610" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Process</text>
<text x="800" y="672" text-anchor="middle" font-size="14" class="secondary-text">BotServer</text>
<text x="1100" y="610" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Store</text>
<text x="1100" y="672" text-anchor="middle" font-size="14" class="secondary-text">Data Layer</text>
</g>
<!-- Legend -->
<g id="legend" transform="translate(50, 720)">
<text x="0" y="0" font-size="18" font-weight="500" class="main-text">Component Types:</text>
<rect x="0" y="20" width="24" height="24" class="neon-blue" rx="4"/>
<text x="35" y="38" font-size="16" class="secondary-text">Client / Interface</text>
<rect x="220" y="20" width="24" height="24" class="neon-orange" rx="4"/>
<text x="255" y="38" font-size="16" class="secondary-text">Load Balancer</text>
<rect x="440" y="20" width="24" height="24" class="neon-green" rx="4"/>
<text x="475" y="38" font-size="16" class="secondary-text">Compute Instance</text>
<rect x="680" y="20" width="24" height="24" class="neon-purple" rx="4"/>
<text x="715" y="38" font-size="16" class="secondary-text">Data Storage</text>
<rect x="900" y="20" width="24" height="24" class="neon-cyan" rx="4"/>
<text x="935" y="38" font-size="16" class="secondary-text">Services</text>
</g>
<!-- Features row -->
<g id="features" transform="translate(50, 790)">
<rect x="0" y="0" width="200" height="45" class="neon-blue" rx="6.5" opacity="0.5"/>
<text x="100" y="28" text-anchor="middle" font-size="14" class="main-text">Auto-Scaling</text>
<rect x="220" y="0" width="200" height="45" class="neon-orange" rx="6.5" opacity="0.5"/>
<text x="320" y="28" text-anchor="middle" font-size="14" class="main-text">TLS Everywhere</text>
<rect x="440" y="0" width="200" height="45" class="neon-purple" rx="6.5" opacity="0.5"/>
<text x="540" y="28" text-anchor="middle" font-size="14" class="main-text">Multi-Tenant</text>
<rect x="660" y="0" width="200" height="45" class="neon-green" rx="6.5" opacity="0.5"/>
<text x="760" y="28" text-anchor="middle" font-size="14" class="main-text">Health Checks</text>
<rect x="880" y="0" width="200" height="45" class="neon-cyan" rx="6.5" opacity="0.5"/>
<text x="980" y="28" text-anchor="middle" font-size="14" class="main-text">Zero Downtime</text>
<rect x="1100" y="0" width="200" height="45" class="neon-gray" rx="6.5" opacity="0.5"/>
<text x="1200" y="28" text-anchor="middle" font-size="14" class="main-text">LXC Containers</text>
</g>
<!-- Description -->
<text x="700" y="870" text-anchor="middle" font-size="18" class="secondary-text">
Production-ready infrastructure with automatic scaling, load balancing, and multi-tenant isolation
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

366
docs/src/assets/migration-architecture.svg
View file

@ -1,366 +0,0 @@
<svg viewBox="0 0 1400 900" xmlns="http://www.w3.org/2000/svg" style="background: transparent;">
<style>
/* Ensure transparent background */
svg {
background: transparent !important;
}
/* CSS Custom Properties for theme switching */
:root {
/* Light theme defaults */
--main-text-color: #1a1a1a;
--secondary-text-color: #666;
--arrow-color: #666;
/* Neon colors for light theme */
--neon-blue: #4A90E2;
--neon-orange: #F5A623;
--neon-purple: #BD10E0;
--neon-green: #7ED321;
--neon-cyan: #50E3C2;
--neon-red: #E24A4A;
--neon-stroke-width: 2.6;
}
/* Dark theme override */
@media (prefers-color-scheme: dark) {
:root {
--main-text-color: #FFFFFF;
--secondary-text-color: #B0B0B0;
--arrow-color: #B0B0B0;
/* Neon colors for dark theme */
--neon-blue: #00D4FF;
--neon-orange: #FF9500;
--neon-purple: #E040FB;
--neon-green: #00FF88;
--neon-cyan: #00E5EA;
--neon-red: #FF4A4A;
--neon-stroke-width: 2.8;
}
}
/* Classes using CSS custom properties */
.neon-blue {
stroke: var(--neon-blue);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.neon-orange {
stroke: var(--neon-orange);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.neon-purple {
stroke: var(--neon-purple);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.neon-green {
stroke: var(--neon-green);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.neon-cyan {
stroke: var(--neon-cyan);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.neon-red {
stroke: var(--neon-red);
stroke-width: var(--neon-stroke-width);
fill: none;
}
.main-text {
fill: var(--main-text-color);
}
.secondary-text {
fill: var(--secondary-text-color);
}
.arrow-line {
stroke: var(--arrow-color);
fill: none;
}
.arrow-head {
fill: var(--arrow-color);
stroke: none;
}
/* Dark theme glow effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-red {
filter: drop-shadow(0 0 4px #FF4A4A) drop-shadow(0 0 8px #FF0000);
}
}
</style>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" class="arrow-head"/>
</marker>
<linearGradient id="migrationGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#E24A4A;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Enterprise Migration Architecture</text>
<!-- Section Labels -->
<text x="250" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Current State</text>
<text x="700" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Migration Process</text>
<text x="1150" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" font-weight="500" class="secondary-text">Target State</text>
<!-- Current State - Cloud Services -->
<g id="current-state">
<!-- Big Tech Cloud -->
<rect x="100" y="130" width="300" height="350" class="neon-red" rx="6.5" stroke-dasharray="5,5" opacity="0.5"/>
<text x="250" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Big Tech Cloud</text>
<!-- Microsoft 365 / Google Workspace -->
<rect x="120" y="190" width="120" height="60" class="neon-red" rx="6.5"/>
<text x="180" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">M365/Google</text>
<!-- Individual Services -->
<rect x="260" y="190" width="120" height="60" class="neon-orange" rx="6.5"/>
<text x="320" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">OneDrive/</text>
<text x="320" y="238" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Google Drive</text>
<rect x="120" y="270" width="120" height="60" class="neon-purple" rx="6.5"/>
<text x="180" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Outlook/</text>
<text x="180" y="318" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Gmail</text>
<rect x="260" y="270" width="120" height="60" class="neon-blue" rx="6.5"/>
<text x="320" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Teams/</text>
<text x="320" y="318" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Meet</text>
<rect x="120" y="350" width="120" height="60" class="neon-cyan" rx="6.5"/>
<text x="180" y="380" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">SharePoint/</text>
<text x="180" y="398" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Sites</text>
<rect x="260" y="350" width="120" height="60" class="neon-green" rx="6.5"/>
<text x="320" y="380" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Copilot/</text>
<text x="320" y="398" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Gemini</text>
<!-- Issues -->
<text x="250" y="440" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">• Vendor Lock-in</text>
<text x="250" y="460" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">• Monthly Costs</text>
</g>
<!-- Migration Process -->
<g id="migration">
<!-- Migration Box -->
<rect x="500" y="130" width="400" height="350" rx="6.5" fill="none" stroke="url(#migrationGradient)" stroke-width="3" opacity="0.8"/>
<text x="700" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Migration Tools</text>
<!-- Tools -->
<rect x="520" y="190" width="160" height="50" class="neon-orange" rx="6.5"/>
<text x="600" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">rclone</text>
<rect x="720" y="190" width="160" height="50" class="neon-purple" rx="6.5"/>
<text x="800" y="220" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">imapsync</text>
<rect x="520" y="260" width="160" height="50" class="neon-blue" rx="6.5"/>
<text x="600" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">BASIC Scripts</text>
<rect x="720" y="260" width="160" height="50" class="neon-cyan" rx="6.5"/>
<text x="800" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">API Migration</text>
<rect x="520" y="330" width="160" height="50" class="neon-green" rx="6.5"/>
<text x="600" y="360" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">KB Converter</text>
<rect x="720" y="330" width="160" height="50" class="neon-red" rx="6.5"/>
<text x="800" y="360" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">User Import</text>
<!-- Steps -->
<text x="700" y="410" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">1. Export Data</text>
<text x="700" y="430" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">2. Transform Format</text>
<text x="700" y="450" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">3. Import to GB</text>
<text x="700" y="470" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">4. Validate</text>
</g>
<!-- Target State - General Bots -->
<g id="target-state">
<!-- Self-Hosted -->
<rect x="1000" y="130" width="300" height="350" class="neon-green" rx="6.5" stroke-dasharray="5,5" opacity="0.5"/>
<text x="1150" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Self-Hosted Stack</text>
<!-- General Bots Core -->
<rect x="1020" y="190" width="260" height="60" class="neon-green" rx="6.5"/>
<text x="1150" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="main-text">General Bots Core</text>
<!-- Components -->
<rect x="1020" y="270" width="120" height="50" class="neon-orange" rx="6.5"/>
<text x="1080" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">MinIO</text>
<rect x="1160" y="270" width="120" height="50" class="neon-purple" rx="6.5"/>
<text x="1220" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Stalwart</text>
<rect x="1020" y="330" width="120" height="50" class="neon-blue" rx="6.5"/>
<text x="1080" y="360" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">LiveKit</text>
<rect x="1160" y="330" width="120" height="50" class="neon-cyan" rx="6.5"/>
<text x="1220" y="360" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Qdrant</text>
<rect x="1020" y="390" width="120" height="50" class="neon-red" rx="6.5"/>
<text x="1080" y="420" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Local LLM</text>
<rect x="1160" y="390" width="120" height="50" class="neon-green" rx="6.5"/>
<text x="1220" y="420" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="main-text">Zitadel</text>
<!-- Benefits -->
<text x="1150" y="460" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">✓ Full Control</text>
<text x="1150" y="480" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">✓ No Vendor Lock-in</text>
</g>
<!-- Arrows -->
<g id="arrows" stroke-width="3">
<!-- From Cloud to Migration -->
<line x1="400" y1="305" x2="500" y2="305" class="arrow-line" marker-end="url(#arrowhead)" opacity="0.7"/>
<!-- From Migration to Self-Hosted -->
<line x1="900" y1="305" x2="1000" y2="305" class="arrow-line" marker-end="url(#arrowhead)" opacity="0.7"/>
</g>
<!-- Cost Comparison -->
<g id="cost-comparison">
<rect x="100" y="520" width="1200" height="120" rx="10" fill="none" stroke="var(--secondary-text-color)" stroke-width="1" opacity="0.3"/>
<text x="700" y="550" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Cost Comparison</text>
<!-- Cloud Costs -->
<text x="250" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Enterprise Cloud</text>
<text x="250" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="600" class="main-text">$50-200/user/month</text>
<text x="250" y="625" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Forever</text>
<!-- Migration -->
<text x="700" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Migration Cost</text>
<text x="700" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="600" class="main-text">One-time effort</text>
<text x="700" y="625" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">1-4 weeks</text>
<!-- Self-Hosted -->
<text x="1150" y="580" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Self-Hosted</text>
<text x="1150" y="605" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="600" class="main-text">Infrastructure only</text>
<text x="1150" y="625" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">~$500/month total</text>
</g>
<!-- Timeline -->
<g id="timeline">
<text x="700" y="680" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Typical Migration Timeline</text>
<!-- Timeline bar -->
<rect x="200" y="710" width="1000" height="10" rx="5" fill="url(#migrationGradient)" opacity="0.5"/>
<!-- Milestones -->
<circle cx="200" cy="715" r="8" class="neon-red"/>
<text x="200" y="745" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Start</text>
<text x="200" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Assessment</text>
<circle cx="450" cy="715" r="8" class="neon-orange"/>
<text x="450" y="745" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Week 1</text>
<text x="450" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Infrastructure</text>
<circle cx="700" cy="715" r="8" class="neon-purple"/>
<text x="700" y="745" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Week 2</text>
<text x="700" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Data Migration</text>
<circle cx="950" cy="715" r="8" class="neon-blue"/>
<text x="950" y="745" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Week 3</text>
<text x="950" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Testing</text>
<circle cx="1200" cy="715" r="8" class="neon-green"/>
<text x="1200" y="745" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Week 4</text>
<text x="1200" y="765" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Go Live</text>
</g>
<!-- Footer -->
<text x="700" y="850" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">
Transform from mega-prompt dependency to true component architecture
</text>
<text x="700" y="875" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">
Your data, your infrastructure, your control
</text>
<!-- JavaScript to handle theme switching from parent document -->
<script type="text/javascript">
<![CDATA[
// Function to update CSS variables based on parent theme
function updateTheme() {
try {
// Check if we're in an iframe/object context
const parentDoc = window.parent?.document || window.top?.document;
if (!parentDoc) return;
const rootElement = document.documentElement;
const htmlElement = parentDoc.documentElement;
const bodyElement = parentDoc.body;
// Check for various theme indicators
const isRust = htmlElement.classList.contains('rust') || bodyElement.classList.contains('rust');
const isLight = htmlElement.classList.contains('light') || bodyElement.classList.contains('light');
const isDark = htmlElement.classList.contains('dark') ||
htmlElement.classList.contains('ayu') ||
htmlElement.classList.contains('navy') ||
htmlElement.classList.contains('coal') ||
bodyElement.classList.contains('theme--dark');
// Apply theme-specific CSS variables
if (isRust || isLight) {
// Force black text for Rust/Light themes
rootElement.style.setProperty('--main-text-color', '#1a1a1a');
rootElement.style.setProperty('--secondary-text-color', '#666');
rootElement.style.setProperty('--arrow-color', '#666');
} else if (isDark) {
// White text for dark themes
rootElement.style.setProperty('--main-text-color', '#ffffff');
rootElement.style.setProperty('--secondary-text-color', '#b0b0b0');
rootElement.style.setProperty('--arrow-color', '#b0b0b0');
}
} catch (e) {
// Silent fail if we can't access parent document (cross-origin)
}
}
// Update theme on load
updateTheme();
// Listen for theme changes if possible
try {
if (window.parent && window.parent !== window) {
// Try to observe parent document changes
const observer = new MutationObserver(updateTheme);
observer.observe(window.parent.document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
observer.observe(window.parent.document.body, {
attributes: true,
attributeFilter: ['class']
});
}
} catch (e) {
// Silent fail if cross-origin
}
]]>
</script>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

255
docs/src/assets/observability-flow.svg
View file

@ -1,255 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.neon-gray { stroke: #888888; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-gray {
stroke: #AAAAAA;
stroke-width: 2.8;
filter: drop-shadow(0 0 2px #AAAAAA);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="33%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="66%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-size="32" font-weight="600" class="main-text">Observability Flow</text>
<text x="700" y="75" text-anchor="middle" font-size="18" class="secondary-text">Vector Agent collects logs from BotServer without code changes</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- Phase Labels -->
<text x="200" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Application</text>
<text x="550" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Collection</text>
<text x="900" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Processing</text>
<text x="1200" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Outputs</text>
<!-- BotServer Application Box -->
<rect x="50" y="140" width="300" height="200" class="neon-blue" rx="6.5"/>
<text x="200" y="170" text-anchor="middle" font-size="22" font-weight="500" class="main-text">BotServer Application</text>
<!-- Log calls inside BotServer -->
<text x="80" y="210" font-family="monospace" font-size="14" class="secondary-text">log::trace!()</text>
<text x="80" y="235" font-family="monospace" font-size="14" class="secondary-text">log::debug!()</text>
<text x="80" y="260" font-family="monospace" font-size="14" class="secondary-text">log::info!()</text>
<text x="200" y="210" font-family="monospace" font-size="14" class="secondary-text">log::warn!()</text>
<text x="200" y="235" font-family="monospace" font-size="14" class="secondary-text">log::error!()</text>
<!-- Arrow to log files -->
<text x="200" y="290" text-anchor="middle" font-size="14" class="secondary-text">↓ writes to</text>
<rect x="80" y="305" width="240" height="30" class="neon-gray" rx="4"/>
<text x="200" y="325" text-anchor="middle" font-family="monospace" font-size="12" class="secondary-text">./botserver-stack/logs/</text>
<!-- Vector Agent Box -->
<rect x="400" y="140" width="300" height="200" class="neon-orange" rx="6.5"/>
<text x="550" y="170" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Vector Agent</text>
<text x="550" y="195" text-anchor="middle" font-size="14" class="secondary-text">(Collects from log files)</text>
<!-- Vector components -->
<rect x="420" y="220" width="80" height="50" class="neon-blue" rx="4"/>
<text x="460" y="250" text-anchor="middle" font-size="14" class="main-text">Sources</text>
<rect x="510" y="220" width="90" height="50" class="neon-purple" rx="4"/>
<text x="555" y="250" text-anchor="middle" font-size="14" class="main-text">Transforms</text>
<rect x="610" y="220" width="70" height="50" class="neon-green" rx="4"/>
<text x="645" y="250" text-anchor="middle" font-size="14" class="main-text">Sinks</text>
<!-- Vector sub-labels -->
<text x="460" y="290" text-anchor="middle" font-size="11" class="secondary-text">(Files)</text>
<text x="555" y="290" text-anchor="middle" font-size="11" class="secondary-text">(Parse)</text>
<text x="645" y="290" text-anchor="middle" font-size="11" class="secondary-text">(Output)</text>
<!-- Arrows between Vector components -->
<line x1="500" y1="245" x2="510" y2="245" class="arrow-color" stroke-width="2" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="600" y1="245" x2="610" y2="245" class="arrow-color" stroke-width="2" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Processing/Routing Box -->
<rect x="750" y="140" width="300" height="200" class="neon-purple" rx="6.5"/>
<text x="900" y="170" text-anchor="middle" font-size="22" font-weight="500" class="main-text">Processing</text>
<!-- Filter boxes -->
<rect x="770" y="200" width="130" height="40" class="neon-orange" rx="4"/>
<text x="835" y="225" text-anchor="middle" font-size="14" class="main-text">Filter Errors</text>
<rect x="770" y="250" width="130" height="40" class="neon-cyan" rx="4"/>
<text x="835" y="275" text-anchor="middle" font-size="14" class="main-text">Filter Warnings</text>
<rect x="910" y="200" width="130" height="40" class="neon-green" rx="4"/>
<text x="975" y="225" text-anchor="middle" font-size="14" class="main-text">Log to Metrics</text>
<rect x="910" y="250" width="130" height="40" class="neon-blue" rx="4"/>
<text x="975" y="275" text-anchor="middle" font-size="14" class="main-text">Enrich Data</text>
<!-- Output Sinks -->
<!-- InfluxDB -->
<rect x="1100" y="140" width="150" height="55" class="neon-green" rx="6.5"/>
<text x="1175" y="172" text-anchor="middle" font-size="18" font-weight="500" class="main-text">InfluxDB</text>
<text x="1175" y="190" text-anchor="middle" font-size="12" class="secondary-text">(Metrics)</text>
<!-- Grafana -->
<rect x="1100" y="210" width="150" height="55" class="neon-purple" rx="6.5"/>
<text x="1175" y="242" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Grafana</text>
<text x="1175" y="260" text-anchor="middle" font-size="12" class="secondary-text">(Dashboard)</text>
<!-- Alerts -->
<rect x="1100" y="280" width="150" height="55" class="neon-orange" rx="6.5"/>
<text x="1175" y="312" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Alerts</text>
<text x="1175" y="330" text-anchor="middle" font-size="12" class="secondary-text">(Webhook)</text>
<!-- Flow Arrows -->
<g stroke="#666" stroke-width="2.6" fill="none" opacity="0.7">
<!-- BotServer to Vector -->
<line x1="350" y1="240" x2="400" y2="240" marker-end="url(#arrow)"/>
<!-- Vector to Processing -->
<line x1="700" y1="240" x2="750" y2="240" marker-end="url(#arrow)"/>
<!-- Processing to Outputs -->
<line x1="1050" y1="167" x2="1100" y2="167" marker-end="url(#arrow)"/>
<line x1="1050" y1="237" x2="1100" y2="237" marker-end="url(#arrow)"/>
<line x1="1050" y1="307" x2="1100" y2="307" marker-end="url(#arrow)"/>
</g>
</g>
<!-- Log Sources Detail -->
<g id="log-sources" transform="translate(50, 380)">
<rect width="400" height="160" class="neon-gray" rx="6.5"/>
<text x="200" y="30" text-anchor="middle" font-size="20" font-weight="500" class="main-text">Log Directory Structure</text>
<text x="20" y="60" font-family="monospace" font-size="14" class="secondary-text">logs/system/ → BotServer logs</text>
<text x="20" y="85" font-family="monospace" font-size="14" class="secondary-text">logs/drive/ → SeaweedFS logs</text>
<text x="20" y="110" font-family="monospace" font-size="14" class="secondary-text">logs/tables/ → PostgreSQL logs</text>
<text x="20" y="135" font-family="monospace" font-size="14" class="secondary-text">logs/cache/ → Valkey logs</text>
<text x="220" y="60" font-family="monospace" font-size="14" class="secondary-text">logs/vectordb/ → Qdrant</text>
<text x="220" y="85" font-family="monospace" font-size="14" class="secondary-text">logs/email/ → Stalwart</text>
<text x="220" y="110" font-family="monospace" font-size="14" class="secondary-text">logs/directory/ → Zitadel</text>
<text x="220" y="135" font-family="monospace" font-size="14" class="secondary-text">logs/meet/ → LiveKit</text>
</g>
<!-- Vector Config -->
<g id="vector-config" transform="translate(500, 380)">
<rect width="400" height="160" class="neon-orange" rx="6.5"/>
<text x="200" y="30" text-anchor="middle" font-size="20" font-weight="500" class="main-text">Vector Configuration</text>
<text x="20" y="60" font-family="monospace" font-size="13" class="secondary-text">[sources.botserver_logs]</text>
<text x="20" y="80" font-family="monospace" font-size="13" class="secondary-text">type = "file"</text>
<text x="20" y="100" font-family="monospace" font-size="13" class="secondary-text">include = ["logs/system/*.log"]</text>
<text x="20" y="125" font-family="monospace" font-size="13" class="secondary-text">[transforms.parse_botserver]</text>
<text x="20" y="145" font-family="monospace" font-size="13" class="secondary-text">type = "remap"</text>
</g>
<!-- Key Benefits -->
<g id="benefits" transform="translate(950, 380)">
<rect width="300" height="160" class="neon-cyan" rx="6.5"/>
<text x="150" y="30" text-anchor="middle" font-size="20" font-weight="500" class="main-text">Key Benefits</text>
<text x="20" y="60" font-size="16" class="secondary-text">✓ Zero code changes required</text>
<text x="20" y="85" font-size="16" class="secondary-text">✓ Works with existing logging</text>
<text x="20" y="110" font-size="16" class="secondary-text">✓ Add/remove without recompile</text>
<text x="20" y="135" font-size="16" class="secondary-text">✓ Scales independently</text>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend">
<rect x="50" y="580" width="1300" height="90" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="625" r="13" class="neon-blue"/>
<circle cx="550" cy="625" r="13" class="neon-orange"/>
<circle cx="900" cy="625" r="13" class="neon-purple"/>
<circle cx="1200" cy="625" r="13" class="neon-green"/>
<!-- Connecting lines -->
<line x1="213" y1="625" x2="537" y2="625" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="563" y1="625" x2="887" y2="625" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="913" y1="625" x2="1187" y2="625" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="200" y="600" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Generate</text>
<text x="200" y="655" text-anchor="middle" font-size="14" class="secondary-text">log::*!()</text>
<text x="550" y="600" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Collect</text>
<text x="550" y="655" text-anchor="middle" font-size="14" class="secondary-text">Vector Agent</text>
<text x="900" y="600" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Process</text>
<text x="900" y="655" text-anchor="middle" font-size="14" class="secondary-text">Parse & Route</text>
<text x="1200" y="600" text-anchor="middle" font-size="16" font-weight="500" class="main-text">Store/Alert</text>
<text x="1200" y="655" text-anchor="middle" font-size="14" class="secondary-text">InfluxDB/Grafana</text>
</g>
<!-- Metrics Info -->
<g id="metrics-info" transform="translate(50, 710)">
<text x="0" y="0" font-size="18" font-weight="500" class="main-text">Automatic Metrics:</text>
<rect x="0" y="20" width="200" height="35" class="neon-blue" rx="4" opacity="0.5"/>
<text x="100" y="43" text-anchor="middle" font-size="14" class="main-text">log_events_total</text>
<rect x="220" y="20" width="200" height="35" class="neon-orange" rx="4" opacity="0.5"/>
<text x="320" y="43" text-anchor="middle" font-size="14" class="main-text">errors_total</text>
<rect x="440" y="20" width="200" height="35" class="neon-purple" rx="4" opacity="0.5"/>
<text x="540" y="43" text-anchor="middle" font-size="14" class="main-text">warnings_total</text>
<rect x="660" y="20" width="200" height="35" class="neon-green" rx="4" opacity="0.5"/>
<text x="760" y="43" text-anchor="middle" font-size="14" class="main-text">llm_latency_seconds</text>
<rect x="880" y="20" width="200" height="35" class="neon-cyan" rx="4" opacity="0.5"/>
<text x="980" y="43" text-anchor="middle" font-size="14" class="main-text">sessions_active</text>
</g>
<!-- Description -->
<text x="700" y="810" text-anchor="middle" font-size="21" class="secondary-text">
Keep using standard Rust log macros - Vector handles collection, parsing, and routing
</text>
<text x="700" y="845" text-anchor="middle" font-size="18" class="secondary-text">
Install with: ./botserver install observability
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

205
docs/src/assets/package-system-flow.svg
View file

@ -1,205 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="25%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="75%" style="stop-color:#7ED321;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#50E3C2;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Package System Flow</text>
<text x="700" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">How .gbai packages orchestrate bot behavior</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- Phase Labels -->
<text x="120" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Input</text>
<text x="320" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Script</text>
<text x="560" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Intelligence</text>
<text x="820" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Execution</text>
<text x="1060" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Output</text>
<!-- Main Flow Components -->
<!-- User Request -->
<rect x="50" y="140" width="140" height="70" class="neon-blue" rx="6.5"/>
<text x="120" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">User Request</text>
<!-- start.bas -->
<rect x="250" y="140" width="140" height="70" class="neon-orange" rx="6.5"/>
<text x="320" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">start.bas</text>
<!-- LLM Engine -->
<rect x="470" y="140" width="180" height="70" class="neon-purple" rx="6.5"/>
<text x="560" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">LLM Engine</text>
<!-- Tool Executor -->
<rect x="730" y="140" width="180" height="70" class="neon-green" rx="6.5"/>
<text x="820" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Tool Executor</text>
<!-- Bot Response -->
<rect x="990" y="140" width="140" height="70" class="neon-cyan" rx="6.5"/>
<text x="1060" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="500" class="main-text">Bot Response</text>
<!-- Supporting Components Row -->
<!-- Vector Search -->
<rect x="450" y="280" width="160" height="60" class="neon-blue" rx="6.5"/>
<text x="530" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Vector Search</text>
<!-- Knowledge Base -->
<rect x="650" y="280" width="160" height="60" class="neon-orange" rx="6.5"/>
<text x="730" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">.gbkb Docs</text>
<!-- External APIs -->
<rect x="850" y="280" width="160" height="60" class="neon-purple" rx="6.5"/>
<text x="930" y="315" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">External APIs</text>
<!-- Flow Arrows -->
<g stroke="#666" stroke-width="2.6" fill="none" opacity="0.7">
<!-- Main horizontal flow -->
<line x1="190" y1="175" x2="250" y2="175" marker-end="url(#arrow)"/>
<line x1="390" y1="175" x2="470" y2="175" marker-end="url(#arrow)"/>
<line x1="650" y1="175" x2="730" y2="175" marker-end="url(#arrow)"/>
<line x1="910" y1="175" x2="990" y2="175" marker-end="url(#arrow)"/>
<!-- LLM to Vector Search -->
<line x1="530" y1="210" x2="530" y2="280" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Vector Search to Knowledge Base -->
<line x1="610" y1="310" x2="650" y2="310" marker-end="url(#arrow)" opacity="0.6"/>
<!-- Tool Executor to External APIs -->
<line x1="850" y1="210" x2="930" y2="280" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Context feedback to LLM -->
<path d="M730,280 Q680,250 620,210" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
</g>
<!-- Labels -->
<text x="460" y="250" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Query</text>
<text x="680" y="250" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Context</text>
</g>
<!-- Package Structure Detail -->
<g id="package-structure" transform="translate(50, 380)">
<rect width="300" height="180" class="neon-green" rx="6.5"/>
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Package Structure</text>
<text x="20" y="60" font-family="monospace" font-size="16" class="secondary-text">my-bot.gbai/</text>
<text x="35" y="85" font-family="monospace" font-size="16" class="secondary-text">├── .gbdialog/</text>
<text x="55" y="105" font-family="monospace" font-size="14" class="secondary-text">└── start.bas, tools.bas</text>
<text x="35" y="130" font-family="monospace" font-size="16" class="secondary-text">├── .gbkb/</text>
<text x="55" y="150" font-family="monospace" font-size="14" class="secondary-text">└── docs, PDFs, data</text>
<text x="35" y="170" font-family="monospace" font-size="16" class="secondary-text">└── .gbot/config.csv</text>
</g>
<!-- BASIC Commands Detail -->
<g id="basic-commands" transform="translate(400, 380)">
<rect width="300" height="180" class="neon-purple" rx="6.5"/>
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">BASIC Commands</text>
<text x="20" y="60" font-family="monospace" font-size="16" class="secondary-text">USE KB "knowledge"</text>
<text x="20" y="85" font-family="monospace" font-size="16" class="secondary-text">question = HEAR</text>
<text x="20" y="110" font-family="monospace" font-size="16" class="secondary-text">answer = LLM(question)</text>
<text x="20" y="135" font-family="monospace" font-size="16" class="secondary-text">TALK answer</text>
<text x="20" y="165" font-family="monospace" font-size="14" class="secondary-text">// Zero configuration AI</text>
</g>
<!-- Key Features -->
<g id="features" transform="translate(750, 380)">
<rect width="300" height="180" class="neon-cyan" rx="6.5"/>
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Key Features</text>
<text x="20" y="60" font-family="Arial, sans-serif" font-size="16" class="secondary-text">✓ Auto tool registration</text>
<text x="20" y="85" font-family="Arial, sans-serif" font-size="16" class="secondary-text">✓ RAG from any document</text>
<text x="20" y="110" font-family="Arial, sans-serif" font-size="16" class="secondary-text">✓ Multi-channel deploy</text>
<text x="20" y="135" font-family="Arial, sans-serif" font-size="16" class="secondary-text">✓ Hot reload packages</text>
<text x="20" y="160" font-family="Arial, sans-serif" font-size="16" class="secondary-text">✓ Session persistence</text>
</g>
<!-- Connection lines from boxes to main flow -->
<g stroke="#666" stroke-width="1.5" fill="none" opacity="0.3">
<path d="M200,380 Q200,350 320,210"/>
<path d="M550,380 Q550,350 560,210"/>
<path d="M900,380 Q900,350 850,210"/>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend">
<rect x="50" y="600" width="1300" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="150" cy="640" r="12" class="neon-blue"/>
<circle cx="400" cy="640" r="12" class="neon-orange"/>
<circle cx="650" cy="640" r="12" class="neon-purple"/>
<circle cx="900" cy="640" r="12" class="neon-green"/>
<circle cx="1150" cy="640" r="12" class="neon-cyan"/>
<!-- Connecting lines -->
<line x1="162" y1="640" x2="388" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="412" y1="640" x2="638" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="662" y1="640" x2="888" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="912" y1="640" x2="1138" y2="640" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="150" y="695" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Receive</text>
<text x="400" y="695" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Parse Script</text>
<text x="650" y="695" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">LLM Process</text>
<text x="900" y="695" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Execute Tools</text>
<text x="1150" y="695" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Respond</text>
</g>
<!-- Description -->
<text x="700" y="760" text-anchor="middle" font-family="Arial, sans-serif" font-size="21" class="secondary-text">
BASIC scripts orchestrate LLM decisions, vector search, and responses with zero configuration
</text>
<text x="700" y="790" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">
Drop files in .gbkb → Write scripts in .gbdialog → Deploy instantly
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

95
docs/src/assets/package-system-flow.svg.backup
View file

@ -1,95 +0,0 @@
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#888"/>
</marker>
<marker id="arrow-double" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#999"/>
</marker>
</defs>
<!-- Title -->
<text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#CBD5E0">Package System Flow</text>
<!-- User Request -->
<rect x="50" y="60" width="120" height="50" fill="none" stroke="#63B3ED" stroke-width="2" rx="8"/>
<text x="110" y="90" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#90CDF4">User Request</text>
<!-- Bot Response -->
<rect x="630" y="60" width="120" height="50" fill="none" stroke="#68D391" stroke-width="2" rx="8"/>
<text x="690" y="90" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#9AE6B4">Bot Response</text>
<!-- start.bas Box -->
<rect x="50" y="180" width="180" height="140" fill="none" stroke="#F6AD55" stroke-width="2" rx="8"/>
<rect x="50" y="180" width="180" height="35" fill="none" stroke="#F6AD55" stroke-width="2" rx="8 8 0 0"/>
<text x="140" y="203" text-anchor="middle" font-family="monospace" font-size="14" font-weight="bold" fill="#FBD38D">start.bas</text>
<!-- BASIC Commands -->
<text x="60" y="240" font-family="monospace" font-size="12" fill="#A0AEC0">USE KB "docs"</text>
<text x="60" y="260" font-family="monospace" font-size="12" fill="#A0AEC0">answer=HEAR</text>
<text x="60" y="280" font-family="monospace" font-size="12" fill="#A0AEC0">result=LLM()</text>
<text x="60" y="300" font-family="monospace" font-size="12" fill="#A0AEC0">TALK result</text>
<!-- LLM Engine Box -->
<rect x="350" y="180" width="180" height="140" fill="none" stroke="#B794F4" stroke-width="2" rx="8"/>
<rect x="350" y="180" width="180" height="35" fill="none" stroke="#B794F4" stroke-width="2" rx="8 8 0 0"/>
<text x="440" y="203" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#D6BCFA">LLM Engine</text>
<text x="440" y="250" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" fill="#D6BCFA">(GPT/Local)</text>
<text x="440" y="280" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#A0AEC0">Processes requests</text>
<text x="440" y="300" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#A0AEC0">Makes decisions</text>
<!-- Vector Search Box -->
<rect x="300" y="370" width="200" height="100" fill="none" stroke="#4FD1C5" stroke-width="2" rx="8"/>
<rect x="300" y="370" width="200" height="35" fill="none" stroke="#4FD1C5" stroke-width="2" rx="8 8 0 0"/>
<text x="400" y="393" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#81E6D9">Vector Search</text>
<text x="400" y="430" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" fill="#81E6D9">(.gbkb docs)</text>
<text x="400" y="450" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#A0AEC0">Semantic search</text>
<!-- Arrows -->
<g stroke="#888" stroke-width="2" fill="none">
<!-- User to start.bas -->
<line x1="170" y1="85" x2="140" y2="180" marker-end="url(#arrow)"/>
<!-- start.bas to LLM (bidirectional) -->
<line x1="230" y1="200" x2="350" y2="200" marker-end="url(#arrow)"/>
<line x1="350" y1="220" x2="230" y2="220" marker-end="url(#arrow)" stroke="#999"/>
<line x1="230" y1="280" x2="350" y2="280" marker-end="url(#arrow)"/>
<line x1="350" y1="300" x2="230" y2="300" marker-end="url(#arrow)" stroke="#999"/>
<!-- LLM to Vector Search -->
<line x1="440" y1="320" x2="400" y2="370" marker-end="url(#arrow)"/>
<!-- Vector Search back to LLM -->
<path d="M 400 370 Q 340 340 380 320" stroke="#999" stroke-dasharray="5,5" marker-end="url(#arrow-double)" opacity="0.7"/>
<!-- Bot Response arrow -->
<path d="M 530 250 Q 600 150 630 85" marker-end="url(#arrow)"/>
<!-- start.bas to Bot Response -->
<path d="M 140 180 Q 140 85 630 85" stroke="#999" stroke-dasharray="5,5" marker-end="url(#arrow-double)" opacity="0.7"/>
</g>
<!-- Labels on arrows -->
<text x="290" y="195" font-family="Arial, sans-serif" font-size="11" fill="#718096">Commands</text>
<text x="290" y="235" font-family="Arial, sans-serif" font-size="11" fill="#718096">Results</text>
<text x="420" y="345" font-family="Arial, sans-serif" font-size="11" fill="#718096">Query</text>
<text x="320" y="345" font-family="Arial, sans-serif" font-size="11" fill="#718096">Context</text>
<!-- Legend -->
<g id="legend" transform="translate(600, 380)">
<rect x="0" y="0" width="180" height="100" fill="none" stroke="#4A5568" stroke-width="1" rx="5" opacity="0.5"/>
<text x="90" y="20" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#CBD5E0">Flow Legend</text>
<line x1="10" y1="40" x2="40" y2="40" stroke="#888" stroke-width="2" marker-end="url(#arrow)"/>
<text x="50" y="45" font-family="Arial, sans-serif" font-size="11" fill="#A0AEC0">Direct flow</text>
<line x1="10" y1="60" x2="40" y2="60" stroke="#999" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow-double)" opacity="0.7"/>
<text x="50" y="65" font-family="Arial, sans-serif" font-size="11" fill="#A0AEC0">Feedback/Return</text>
<line x1="10" y1="80" x2="40" y2="80" stroke="#888" stroke-width="2"/>
<line x1="40" y1="80" x2="10" y2="80" stroke="#999" stroke-width="2"/>
<text x="50" y="85" font-family="Arial, sans-serif" font-size="11" fill="#A0AEC0">Bidirectional</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 5.8 KiB

329
docs/src/assets/platform-comparison-summary.svg
View file

@ -1,329 +0,0 @@
<svg width="1200" height="700" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<linearGradient id="gbGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
</linearGradient>
<linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
</linearGradient>
<linearGradient id="grayGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#64748B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#94A3B8;stop-opacity:1" />
</linearGradient>
<linearGradient id="headerBg" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#1E1B4B;stop-opacity:0.05" />
<stop offset="50%" style="stop-color:#312E81;stop-opacity:0.08" />
<stop offset="100%" style="stop-color:#1E1B4B;stop-opacity:0.05" />
</linearGradient>
<!-- Filters -->
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#6366F1" flood-opacity="0.15"/>
</filter>
<!-- Pattern -->
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.08"/>
</pattern>
</defs>
<style>
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.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; }
.accent-text { fill: #6366F1; 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>
<!-- Background -->
<rect width="1200" height="700" fill="#FAFBFC"/>
<rect width="1200" height="700" fill="url(#dots)"/>
<rect x="0" y="0" width="1200" height="100" fill="url(#headerBg)"/>
<!-- Title -->
<text x="600" y="45" text-anchor="middle" font-size="26" font-weight="700" class="title-text">Platform Comparison Summary</text>
<text x="600" y="75" text-anchor="middle" font-size="14" class="secondary-text">General Bots vs Enterprise Cloud Platforms</text>
<!-- General Bots Card (Highlighted) -->
<g transform="translate(50, 120)">
<rect x="0" y="0" width="280" height="460" rx="12" fill="#FFFFFF" stroke="#C7D2FE" stroke-width="2" filter="url(#shadow)"/>
<rect x="0" y="0" width="280" height="60" rx="12" fill="url(#gbGradient)"/>
<rect x="0" y="48" width="280" height="12" fill="url(#gbGradient)"/>
<text x="140" y="40" text-anchor="middle" font-size="18" font-weight="700" class="white-text">General Bots</text>
<!-- Features -->
<g transform="translate(20, 80)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Self-Hosted</text>
</g>
<g transform="translate(20, 115)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Open Source (AGPL)</text>
</g>
<g transform="translate(20, 150)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">No Per-User Fees</text>
</g>
<g transform="translate(20, 185)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Native AI (Any LLM)</text>
</g>
<g transform="translate(20, 220)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Full Productivity Suite</text>
</g>
<g transform="translate(20, 255)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Multi-Channel Chat</text>
</g>
<g transform="translate(20, 290)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Unlimited Automation</text>
</g>
<g transform="translate(20, 325)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">BASIC Scripting</text>
</g>
<g transform="translate(20, 360)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Data Sovereignty</text>
</g>
<!-- Price -->
<rect x="20" y="395" width="240" height="45" rx="8" fill="#ECFDF5" stroke="#A7F3D0" stroke-width="1"/>
<text x="140" y="418" text-anchor="middle" font-size="14" font-weight="700" fill="#10B981">$3K-12K/year</text>
<text x="140" y="433" text-anchor="middle" font-size="10" class="secondary-text">100 users • Infrastructure only</text>
</g>
<!-- Enterprise Cloud Card -->
<g transform="translate(360, 120)">
<rect x="0" y="0" width="280" height="460" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#shadow)"/>
<rect x="0" y="0" width="280" height="60" rx="12" fill="url(#grayGradient)"/>
<rect x="0" y="48" width="280" height="12" fill="url(#grayGradient)"/>
<text x="140" y="40" text-anchor="middle" font-size="18" font-weight="700" class="white-text">Enterprise Cloud</text>
<!-- Features -->
<g transform="translate(20, 80)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Cloud Only</text>
</g>
<g transform="translate(20, 115)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Proprietary</text>
</g>
<g transform="translate(20, 150)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">$12-57/user/month</text>
</g>
<g transform="translate(20, 185)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">AI Extra ($30/user)</text>
</g>
<g transform="translate(20, 220)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Full Productivity Suite</text>
</g>
<g transform="translate(20, 255)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Limited Channels</text>
</g>
<g transform="translate(20, 290)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Per-Flow Fees</text>
</g>
<g transform="translate(20, 325)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">~</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Limited Scripting</text>
</g>
<g transform="translate(20, 360)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="30" y="16" font-size="13" font-weight="500" class="main-text">Vendor Controlled</text>
</g>
<!-- Price -->
<rect x="20" y="395" width="240" height="45" rx="8" fill="#FEF2F2" stroke="#FECACA" stroke-width="1"/>
<text x="140" y="418" text-anchor="middle" font-size="14" font-weight="700" fill="#DC2626">$50K-90K/year</text>
<text x="140" y="433" text-anchor="middle" font-size="10" class="secondary-text">100 users • Base + AI + Automation</text>
</g>
<!-- Automation Platforms Card -->
<g transform="translate(670, 120)">
<rect x="0" y="0" width="230" height="460" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#shadow)"/>
<rect x="0" y="0" width="230" height="60" rx="12" fill="url(#grayGradient)"/>
<rect x="0" y="48" width="230" height="12" fill="url(#grayGradient)"/>
<text x="115" y="40" text-anchor="middle" font-size="16" font-weight="700" class="white-text">Automation Tools</text>
<g transform="translate(15, 80)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">~</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Some Self-Host</text>
</g>
<g transform="translate(15, 115)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">~</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Fair-code/Proprietary</text>
</g>
<g transform="translate(15, 150)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Per-Task Pricing</text>
</g>
<g transform="translate(15, 185)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">AI via Connectors</text>
</g>
<g transform="translate(15, 220)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Productivity Suite</text>
</g>
<g transform="translate(15, 255)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Native Chat</text>
</g>
<g transform="translate(15, 290)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Visual Workflows</text>
</g>
<g transform="translate(15, 325)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">~</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">JS/Visual Only</text>
</g>
<g transform="translate(15, 360)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">~</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Partial Control</text>
</g>
<rect x="15" y="395" width="200" height="45" rx="8" fill="#FEF3C7" stroke="#FCD34D" stroke-width="1"/>
<text x="115" y="418" text-anchor="middle" font-size="14" font-weight="700" fill="#D97706">$15K-30K/year</text>
<text x="115" y="433" text-anchor="middle" font-size="10" class="secondary-text">+ external tools needed</text>
</g>
<!-- AI Assistants Card -->
<g transform="translate(920, 120)">
<rect x="0" y="0" width="230" height="460" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1" filter="url(#shadow)"/>
<rect x="0" y="0" width="230" height="60" rx="12" fill="url(#grayGradient)"/>
<rect x="0" y="48" width="230" height="12" fill="url(#grayGradient)"/>
<text x="115" y="40" text-anchor="middle" font-size="16" font-weight="700" class="white-text">AI Assistants</text>
<g transform="translate(15, 80)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Cloud Only</text>
</g>
<g transform="translate(15, 115)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Proprietary</text>
</g>
<g transform="translate(15, 150)">
<circle cx="10" cy="12" r="8" fill="#FBBF24"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">$</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Subscription Based</text>
</g>
<g transform="translate(15, 185)">
<circle cx="10" cy="12" r="8" fill="url(#successGradient)"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✓</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Strong AI Built-in</text>
</g>
<g transform="translate(15, 220)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Productivity Suite</text>
</g>
<g transform="translate(15, 255)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">Web Interface Only</text>
</g>
<g transform="translate(15, 290)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Automation</text>
</g>
<g transform="translate(15, 325)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Scripting</text>
</g>
<g transform="translate(15, 360)">
<circle cx="10" cy="12" r="8" fill="#F87171"/>
<text x="8" y="16" text-anchor="middle" font-size="10" font-weight="700" class="white-text">✗</text>
<text x="28" y="16" font-size="12" font-weight="500" class="main-text">No Data Control</text>
</g>
<rect x="15" y="395" width="200" height="45" rx="8" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/>
<text x="115" y="418" text-anchor="middle" font-size="14" font-weight="700" class="secondary-text">$2K-5K/year</text>
<text x="115" y="433" text-anchor="middle" font-size="10" class="secondary-text">Chat only • Limited scope</text>
</g>
<!-- Bottom Summary -->
<g transform="translate(50, 605)">
<rect x="0" y="0" width="1100" height="70" rx="10" fill="#FFFFFF" stroke="#C7D2FE" stroke-width="2" filter="url(#shadow)"/>
<g transform="translate(30, 15)">
<rect x="0" y="0" width="200" height="40" rx="6" fill="#EEF2FF"/>
<text x="100" y="18" text-anchor="middle" font-size="18" font-weight="700" class="accent-text">75-95%</text>
<text x="100" y="33" text-anchor="middle" font-size="10" class="secondary-text">Cost Reduction</text>
</g>
<g transform="translate(260, 15)">
<rect x="0" y="0" width="200" height="40" rx="6" fill="#ECFDF5"/>
<text x="100" y="18" text-anchor="middle" font-size="18" font-weight="700" fill="#10B981">100%</text>
<text x="100" y="33" text-anchor="middle" font-size="10" class="secondary-text">Data Sovereignty</text>
</g>
<g transform="translate(490, 15)">
<rect x="0" y="0" width="200" height="40" rx="6" fill="#F5F3FF"/>
<text x="100" y="18" text-anchor="middle" font-size="18" font-weight="700" class="accent-text">90+</text>
<text x="100" y="33" text-anchor="middle" font-size="10" class="secondary-text">BASIC Keywords</text>
</g>
<g transform="translate(720, 15)">
<rect x="0" y="0" width="200" height="40" rx="6" fill="#FEF3C7"/>
<text x="100" y="18" text-anchor="middle" font-size="18" font-weight="700" fill="#D97706">∞</text>
<text x="100" y="33" text-anchor="middle" font-size="10" class="secondary-text">Unlimited Users</text>
</g>
<g transform="translate(950, 15)">
<rect x="0" y="0" width="120" height="40" rx="6" fill="url(#gbGradient)"/>
<text x="60" y="27" text-anchor="middle" font-size="12" font-weight="600" class="white-text">Open Source</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

239
docs/src/assets/script-execution-flow.svg
View file

@ -1,239 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; fill: none; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; fill: none; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; fill: none; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; fill: none; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; fill: none; }
.neon-gray { stroke: #888888; stroke-width: 2.6; fill: none; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
.arrow-color { stroke: #666; fill: #666; }
/* Dark theme with subtle neon effects */
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-gray {
stroke: #AAAAAA;
stroke-width: 2.8;
filter: drop-shadow(0 0 2px #888888);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="20%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="40%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="60%" style="stop-color:#7ED321;stop-opacity:0.3" />
<stop offset="80%" style="stop-color:#50E3C2;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#4A90E2;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-size="32" font-weight="600" class="main-text">Script Execution Flow</text>
<text x="700" y="75" text-anchor="middle" font-size="18" class="secondary-text">BASIC Compilation Pipeline - From Source to Execution</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- Entry Points Section -->
<text x="200" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Entry Points</text>
<!-- start.bas -->
<rect x="50" y="135" width="140" height="65" class="neon-blue" rx="6.5"/>
<text x="120" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">start.bas</text>
<text x="120" y="185" text-anchor="middle" font-size="12" class="secondary-text">(Bot Start)</text>
<!-- SET SCHEDULE -->
<rect x="210" y="135" width="140" height="65" class="neon-orange" rx="6.5"/>
<text x="280" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">SET SCHEDULE</text>
<text x="280" y="185" text-anchor="middle" font-size="12" class="secondary-text">(Cron Jobs)</text>
<!-- WEBHOOK -->
<rect x="370" y="135" width="140" height="65" class="neon-purple" rx="6.5"/>
<text x="440" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">WEBHOOK</text>
<text x="440" y="185" text-anchor="middle" font-size="12" class="secondary-text">(HTTP POST)</text>
<!-- Compilation Pipeline Box -->
<rect x="50" y="240" width="550" height="220" class="neon-gray" rx="10"/>
<text x="325" y="270" text-anchor="middle" font-size="20" font-weight="600" class="main-text">BASIC Compiler &amp; Runtime</text>
<!-- Pipeline Steps -->
<rect x="70" y="295" width="120" height="50" class="neon-blue" rx="6.5"/>
<text x="130" y="325" text-anchor="middle" font-size="14" font-weight="500" class="main-text">1. Load Source</text>
<rect x="210" y="295" width="120" height="50" class="neon-orange" rx="6.5"/>
<text x="270" y="325" text-anchor="middle" font-size="14" font-weight="500" class="main-text">2. Load Config</text>
<rect x="350" y="295" width="120" height="50" class="neon-purple" rx="6.5"/>
<text x="410" y="325" text-anchor="middle" font-size="14" font-weight="500" class="main-text">3. Preprocess</text>
<rect x="490" y="295" width="90" height="50" class="neon-green" rx="6.5"/>
<text x="535" y="325" text-anchor="middle" font-size="14" font-weight="500" class="main-text">4. Compile</text>
<!-- Pipeline descriptions -->
<text x="130" y="365" text-anchor="middle" font-size="11" class="secondary-text">Read .bas file</text>
<text x="270" y="365" text-anchor="middle" font-size="11" class="secondary-text">param-* vars</text>
<text x="410" y="365" text-anchor="middle" font-size="11" class="secondary-text">Transform</text>
<text x="535" y="365" text-anchor="middle" font-size="11" class="secondary-text">Rhai AST</text>
<!-- Execute Box -->
<rect x="70" y="390" width="510" height="55" class="neon-cyan" rx="6.5"/>
<text x="325" y="415" text-anchor="middle" font-size="16" font-weight="500" class="main-text">5. Execute with Injected Scope</text>
<text x="325" y="435" text-anchor="middle" font-size="12" class="secondary-text">Keywords call registered handlers → LLM Tools → API Calls</text>
<!-- Arrows between pipeline steps -->
<g stroke="#666" stroke-width="2" opacity="0.7">
<line x1="190" y1="320" x2="210" y2="320" marker-end="url(#arrow)"/>
<line x1="330" y1="320" x2="350" y2="320" marker-end="url(#arrow)"/>
<line x1="470" y1="320" x2="490" y2="320" marker-end="url(#arrow)"/>
</g>
<!-- Entry points to pipeline -->
<g stroke="#666" stroke-width="2.6" opacity="0.7">
<line x1="120" y1="200" x2="120" y2="240" marker-end="url(#arrow)"/>
<line x1="280" y1="200" x2="280" y2="240" marker-end="url(#arrow)"/>
<line x1="440" y1="200" x2="440" y2="240" marker-end="url(#arrow)"/>
</g>
<!-- Output Components -->
<text x="900" y="115" text-anchor="middle" font-size="18" font-weight="500" class="secondary-text">Execution Outputs</text>
<!-- LLM Tools -->
<rect x="650" y="135" width="160" height="65" class="neon-purple" rx="6.5"/>
<text x="730" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">LLM Tools</text>
<text x="730" y="185" text-anchor="middle" font-size="12" class="secondary-text">(ADD TOOL)</text>
<!-- ON Events -->
<rect x="830" y="135" width="160" height="65" class="neon-green" rx="6.5"/>
<text x="910" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">ON Events</text>
<text x="910" y="185" text-anchor="middle" font-size="12" class="secondary-text">(Triggers)</text>
<!-- API Calls -->
<rect x="1010" y="135" width="160" height="65" class="neon-cyan" rx="6.5"/>
<text x="1090" y="165" text-anchor="middle" font-size="16" font-weight="500" class="main-text">API Calls</text>
<text x="1090" y="185" text-anchor="middle" font-size="12" class="secondary-text">(External)</text>
<!-- Connection from Execute to outputs -->
<g stroke="#666" stroke-width="2.6" opacity="0.7">
<line x1="580" y1="420" x2="620" y2="420"/>
<line x1="620" y1="420" x2="620" y2="167"/>
<line x1="620" y1="167" x2="650" y2="167" marker-end="url(#arrow)"/>
<line x1="620" y1="167" x2="830" y2="167" marker-end="url(#arrow)"/>
<line x1="620" y1="167" x2="1010" y2="167" marker-end="url(#arrow)"/>
</g>
</g>
<!-- Package Structure -->
<g id="package-structure" transform="translate(650, 240)">
<rect width="520" height="220" class="neon-orange" rx="10"/>
<text x="260" y="35" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Package Structure (mybot.gbai)</text>
<text x="30" y="70" font-family="monospace" font-size="14" class="secondary-text">mybot.gbai/</text>
<text x="45" y="95" font-family="monospace" font-size="14" class="secondary-text">├── mybot.gbdialog/</text>
<text x="65" y="118" font-family="monospace" font-size="13" class="secondary-text">├── start.bas ' Entry point</text>
<text x="65" y="138" font-family="monospace" font-size="13" class="secondary-text">├── tables.bas ' TABLE definitions</text>
<text x="65" y="158" font-family="monospace" font-size="13" class="secondary-text">├── create-order.bas ' Tool script</text>
<text x="65" y="178" font-family="monospace" font-size="13" class="secondary-text">└── sync-data.bas ' Scheduled script</text>
<text x="45" y="200" font-family="monospace" font-size="14" class="secondary-text">└── mybot.gbot/config.csv</text>
</g>
<!-- Config Details -->
<g id="config-details" transform="translate(50, 500)">
<rect width="400" height="140" class="neon-blue" rx="6.5"/>
<text x="200" y="30" text-anchor="middle" font-size="18" font-weight="500" class="main-text">config.csv (Injected Variables)</text>
<text x="20" y="60" font-family="monospace" font-size="14" class="secondary-text">param-api-key,sk-xxxxx</text>
<text x="20" y="85" font-family="monospace" font-size="14" class="secondary-text">param-webhook-url,https://...</text>
<text x="20" y="110" font-family="monospace" font-size="14" class="secondary-text">param-max-retries,3</text>
<text x="20" y="130" font-family="monospace" font-size="12" class="secondary-text">→ Available as variables in BASIC</text>
</g>
<!-- Preprocessing Details -->
<g id="preprocess-details" transform="translate(500, 500)">
<rect width="400" height="140" class="neon-purple" rx="6.5"/>
<text x="200" y="30" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Preprocessing Steps</text>
<text x="20" y="60" font-size="14" class="secondary-text">• Case normalization (TALK → talk)</text>
<text x="20" y="85" font-size="14" class="secondary-text">• Multi-word keyword transform</text>
<text x="20" y="110" font-size="14" class="secondary-text">• FOR EACH block handling</text>
<text x="20" y="130" font-size="14" class="secondary-text">• Variable scope injection</text>
</g>
<!-- Keyword Execution -->
<g id="keyword-exec" transform="translate(950, 500)">
<rect width="370" height="140" class="neon-green" rx="6.5"/>
<text x="185" y="30" text-anchor="middle" font-size="18" font-weight="500" class="main-text">Keyword Execution</text>
<text x="20" y="60" font-size="14" class="secondary-text">• TALK → Send message to channel</text>
<text x="20" y="85" font-size="14" class="secondary-text">• HEAR → Wait for user input</text>
<text x="20" y="110" font-size="14" class="secondary-text">• LLM → Call language model</text>
<text x="20" y="130" font-size="14" class="secondary-text">• GET/POST → HTTP requests</text>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend">
<rect x="50" y="680" width="1300" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="150" cy="720" r="12" class="neon-blue"/>
<circle cx="380" cy="720" r="12" class="neon-orange"/>
<circle cx="610" cy="720" r="12" class="neon-purple"/>
<circle cx="840" cy="720" r="12" class="neon-green"/>
<circle cx="1070" cy="720" r="12" class="neon-cyan"/>
<circle cx="1250" cy="720" r="12" class="neon-blue"/>
<!-- Connecting lines -->
<line x1="162" y1="720" x2="368" y2="720" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="392" y1="720" x2="598" y2="720" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="622" y1="720" x2="828" y2="720" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="852" y1="720" x2="1058" y2="720" class="arrow-color" stroke-width="2" opacity="0.4"/>
<line x1="1082" y1="720" x2="1238" y2="720" class="arrow-color" stroke-width="2" opacity="0.4"/>
<!-- Stage labels -->
<text x="150" y="750" text-anchor="middle" font-size="14" class="secondary-text">Load</text>
<text x="380" y="750" text-anchor="middle" font-size="14" class="secondary-text">Config</text>
<text x="610" y="750" text-anchor="middle" font-size="14" class="secondary-text">Preprocess</text>
<text x="840" y="750" text-anchor="middle" font-size="14" class="secondary-text">Compile</text>
<text x="1070" y="750" text-anchor="middle" font-size="14" class="secondary-text">Execute</text>
<text x="1250" y="750" text-anchor="middle" font-size="14" class="secondary-text">Respond</text>
</g>
<!-- Description -->
<text x="700" y="810" text-anchor="middle" font-size="21" class="secondary-text">
BASIC scripts compile to Rhai AST and execute with registered keyword handlers
</text>
<text x="700" y="845" text-anchor="middle" font-size="18" class="secondary-text">
Scripts in .gbdialog/ are hot-reloaded on change - no restart required
</text>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

313
docs/src/assets/suite/analytics-flow.svg
View file

@ -1,313 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.neon-pink { stroke: #FF6B9D; stroke-width: 2.6; }
.neon-yellow { stroke: #F8E71C; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-pink {
stroke: #FF6B9D;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF6B9D) drop-shadow(0 0 8px #FF8FAB);
}
.neon-yellow {
stroke: #FFE066;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FFE066) drop-shadow(0 0 8px #FFD93D);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="33%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="66%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Analytics - Dashboard Flow</text>
<text x="700" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Real-time metrics, charts, and insights for bot performance and usage</text>
<!-- Phase Labels -->
<text x="180" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Data Sources</text>
<text x="480" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Metrics</text>
<text x="780" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Visualizations</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Actions</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- Data Collection -->
<g transform="translate(80, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-blue"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Data Collection</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Aggregate sources</text>
</g>
<!-- Conversations -->
<g transform="translate(80, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Chats</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Messages</text>
</g>
<!-- Users -->
<g transform="translate(185, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Users</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Sessions</text>
</g>
<!-- API Calls -->
<g transform="translate(80, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">API</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Requests</text>
</g>
<!-- LLM Usage -->
<g transform="translate(185, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-green"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">LLM</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Tokens</text>
</g>
<!-- System -->
<g transform="translate(80, 440)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-pink"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">System</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Resources</text>
</g>
<!-- Errors -->
<g transform="translate(185, 440)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-yellow"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Errors</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Logs</text>
</g>
<!-- Metrics Panel -->
<g transform="translate(380, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Key Metrics</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">KPI summary cards</text>
</g>
<!-- Active Users -->
<g transform="translate(380, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Active Users</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Daily/Weekly/Monthly</text>
</g>
<!-- Response Time -->
<g transform="translate(380, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Response Time</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Avg latency</text>
</g>
<!-- Satisfaction -->
<g transform="translate(380, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Satisfaction</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">User feedback</text>
</g>
<!-- Visualizations -->
<g transform="translate(680, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Charts</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Visual insights</text>
</g>
<!-- Line Charts -->
<g transform="translate(680, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Line</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Trends</text>
</g>
<!-- Bar Charts -->
<g transform="translate(785, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Bar</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Compare</text>
</g>
<!-- Pie Charts -->
<g transform="translate(680, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-pink"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Pie</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Share</text>
</g>
<!-- Heatmaps -->
<g transform="translate(785, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Heat</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Density</text>
</g>
<!-- Tables -->
<g transform="translate(680, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-blue"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Data Tables</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Sortable, filterable</text>
</g>
<!-- Actions -->
<g transform="translate(980, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Actions</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Export and alerts</text>
</g>
<!-- Export -->
<g transform="translate(980, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Export</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">CSV, PDF, JSON</text>
</g>
<!-- Alerts -->
<g transform="translate(980, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Alerts</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Threshold triggers</text>
</g>
<!-- AI Insights -->
<g transform="translate(980, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">AI Insights ✨</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Anomaly detection</text>
</g>
<!-- Arrows - Main Flow -->
<line x1="280" y1="195" x2="375" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="580" y1="195" x2="675" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="880" y1="195" x2="975" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Data source arrows -->
<path d="M175 290 Q300 290 340 230 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<path d="M175 380 Q320 380 350 250 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<path d="M175 470 Q340 470 360 270 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<!-- Metrics to Charts -->
<line x1="580" y1="290" x2="675" y2="290" class="arrow-color" stroke-width="1.5" marker-end="url(#arrow)" opacity="0.4"/>
<line x1="580" y1="380" x2="675" y2="380" class="arrow-color" stroke-width="1.5" marker-end="url(#arrow)" opacity="0.4"/>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend" transform="translate(0, 520)">
<rect x="100" y="30" width="1200" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="70" r="12" class="neon-blue" fill="none" stroke-width="3"/>
<text x="200" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">1</text>
<circle cx="500" cy="70" r="12" class="neon-purple" fill="none" stroke-width="3"/>
<text x="500" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">2</text>
<circle cx="800" cy="70" r="12" class="neon-orange" fill="none" stroke-width="3"/>
<text x="800" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">3</text>
<circle cx="1100" cy="70" r="12" class="neon-green" fill="none" stroke-width="3"/>
<text x="1100" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">4</text>
<!-- Connecting lines -->
<line x1="212" y1="70" x2="488" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="512" y1="70" x2="788" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="812" y1="70" x2="1088" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<!-- Stage labels -->
<text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Collect</text>
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Aggregate data</text>
<text x="500" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Analyze</text>
<text x="500" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Compute metrics</text>
<text x="800" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Visualize</text>
<text x="800" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Display charts</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Act</text>
<text x="1100" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Export and alert</text>
</g>
<!-- Metrics Legend -->
<g transform="translate(100, 720)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Key Metrics:</text>
<rect x="0" y="20" width="16" height="16" rx="3" fill="none" class="neon-cyan" stroke-width="2"/>
<text x="25" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Conversations and messages</text>
<rect x="270" y="20" width="16" height="16" rx="3" fill="none" class="neon-purple" stroke-width="2"/>
<text x="295" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Active users (DAU/MAU)</text>
<rect x="500" y="20" width="16" height="16" rx="3" fill="none" class="neon-orange" stroke-width="2"/>
<text x="525" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Response latency</text>
<rect x="700" y="20" width="16" height="16" rx="3" fill="none" class="neon-green" stroke-width="2"/>
<text x="725" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">LLM token usage</text>
<rect x="900" y="20" width="16" height="16" rx="3" fill="none" class="neon-pink" stroke-width="2"/>
<text x="925" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Error rates</text>
</g>
<!-- Time ranges -->
<g transform="translate(100, 780)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Time Ranges:</text>
<text x="120" y="0" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Last 24 hours | Last 7 days | Last 30 days | Last 90 days | Custom range | Real-time</text>
</g>
<!-- API Endpoints -->
<g transform="translate(100, 820)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Endpoints:</text>
<text x="100" y="0" font-family="monospace, sans-serif" font-size="13" class="secondary-text">GET /api/analytics/summary | GET /api/analytics/metrics | GET /api/analytics/charts | POST /api/analytics/export | GET /api/analytics/realtime</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

228
docs/src/assets/suite/analytics-screen.svg
View file

@ -1,228 +0,0 @@
<svg width="900" height="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#4ade80"/>
</linearGradient>
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#a78bfa"/>
</linearGradient>
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f97316"/>
<stop offset="100%" stop-color="#fb923c"/>
</linearGradient>
</defs>
<style>
.bg { fill: #ffffff; }
.sidebar-bg { fill: #f8fafc; }
.main-text { fill: #1e293b; font-family: system-ui, -apple-system, sans-serif; }
.secondary-text { fill: #64748b; font-family: system-ui, -apple-system, sans-serif; }
.muted-text { fill: #94a3b8; font-family: system-ui, -apple-system, sans-serif; }
.white-text { fill: #ffffff; font-family: system-ui, -apple-system, sans-serif; }
.accent-text { fill: #3b82f6; font-family: system-ui, -apple-system, sans-serif; }
.green-text { fill: #22c55e; font-family: system-ui, -apple-system, sans-serif; }
.red-text { fill: #ef4444; font-family: system-ui, -apple-system, sans-serif; }
.border { stroke: #e2e8f0; stroke-width: 1; fill: none; }
.icon-btn { fill: #f1f5f9; }
.card-bg { fill: #f8fafc; }
.chart-line { stroke: #3b82f6; stroke-width: 2; fill: none; }
.chart-area { fill: #3b82f6; opacity: 0.1; }
.grid-line { stroke: #e2e8f0; stroke-width: 1; }
.bar-blue { fill: #3b82f6; }
.bar-green { fill: #22c55e; }
.bar-purple { fill: #8b5cf6; }
@media (prefers-color-scheme: dark) {
.bg { fill: #0f172a; }
.sidebar-bg { fill: #1e293b; }
.main-text { fill: #e2e8f0; }
.secondary-text { fill: #94a3b8; }
.muted-text { fill: #64748b; }
.accent-text { fill: #60a5fa; }
.green-text { fill: #4ade80; }
.red-text { fill: #f87171; }
.border { stroke: #334155; }
.icon-btn { fill: #334155; }
.card-bg { fill: #1e293b; }
.grid-line { stroke: #334155; }
}
</style>
<text x="450" y="25" text-anchor="middle" font-size="16" font-weight="600" class="main-text">Analytics - Dashboard</text>
<rect x="30" y="40" width="840" height="530" rx="8" class="bg"/>
<rect x="30" y="40" width="840" height="530" rx="8" class="border"/>
<!-- Header -->
<g transform="translate(50, 55)">
<text x="0" y="20" font-size="20" font-weight="600" class="main-text">Dashboard Overview</text>
<text x="0" y="40" font-size="13" class="secondary-text">Last 30 days • Updated 5 min ago</text>
<!-- Date Range Selector -->
<g transform="translate(550, 5)">
<rect x="0" y="0" width="120" height="32" rx="6" class="icon-btn"/>
<rect x="0" y="0" width="120" height="32" rx="6" class="border"/>
<text x="15" y="21" font-size="12">📅</text>
<text x="35" y="21" font-size="12" class="secondary-text">Last 30 days</text>
<text x="105" y="21" font-size="10" class="muted-text">▾</text>
<rect x="130" y="0" width="80" height="32" rx="6" fill="url(#accentGrad)"/>
<text x="170" y="21" text-anchor="middle" font-size="12" class="white-text">Export</text>
</g>
</g>
<!-- Metric Cards Row -->
<g transform="translate(50, 105)">
<!-- Card 1: Total Users -->
<rect x="0" y="0" width="185" height="95" rx="10" class="card-bg"/>
<rect x="0" y="0" width="185" height="95" rx="10" class="border"/>
<text x="15" y="25" font-size="12" class="secondary-text">Total Users</text>
<text x="15" y="55" font-size="26" font-weight="700" class="main-text">12,847</text>
<text x="15" y="78" font-size="12" class="green-text">↑ 12.5%</text>
<text x="65" y="78" font-size="11" class="muted-text">vs last month</text>
<rect x="145" y="15" width="28" height="28" rx="8" fill="url(#accentGrad)"/>
<text x="159" y="34" text-anchor="middle" font-size="14" class="white-text">👥</text>
<!-- Card 2: Active Sessions -->
<rect x="200" y="0" width="185" height="95" rx="10" class="card-bg"/>
<rect x="200" y="0" width="185" height="95" rx="10" class="border"/>
<text x="215" y="25" font-size="12" class="secondary-text">Active Sessions</text>
<text x="215" y="55" font-size="26" font-weight="700" class="main-text">1,429</text>
<text x="215" y="78" font-size="12" class="green-text">↑ 8.2%</text>
<text x="260" y="78" font-size="11" class="muted-text">vs last month</text>
<rect x="345" y="15" width="28" height="28" rx="8" fill="url(#greenGrad)"/>
<text x="359" y="34" text-anchor="middle" font-size="14" class="white-text">📊</text>
<!-- Card 3: Avg Response Time -->
<rect x="400" y="0" width="185" height="95" rx="10" class="card-bg"/>
<rect x="400" y="0" width="185" height="95" rx="10" class="border"/>
<text x="415" y="25" font-size="12" class="secondary-text">Avg Response Time</text>
<text x="415" y="55" font-size="26" font-weight="700" class="main-text">1.2s</text>
<text x="415" y="78" font-size="12" class="green-text">↓ 15%</text>
<text x="455" y="78" font-size="11" class="muted-text">faster</text>
<rect x="545" y="15" width="28" height="28" rx="8" fill="url(#purpleGrad)"/>
<text x="559" y="34" text-anchor="middle" font-size="14" class="white-text">⚡</text>
<!-- Card 4: Satisfaction -->
<rect x="600" y="0" width="185" height="95" rx="10" class="card-bg"/>
<rect x="600" y="0" width="185" height="95" rx="10" class="border"/>
<text x="615" y="25" font-size="12" class="secondary-text">Satisfaction Rate</text>
<text x="615" y="55" font-size="26" font-weight="700" class="main-text">94.2%</text>
<text x="615" y="78" font-size="12" class="green-text">↑ 2.1%</text>
<text x="658" y="78" font-size="11" class="muted-text">vs last month</text>
<rect x="745" y="15" width="28" height="28" rx="8" fill="url(#orangeGrad)"/>
<text x="759" y="34" text-anchor="middle" font-size="14" class="white-text">⭐</text>
</g>
<!-- Charts Row -->
<g transform="translate(50, 220)">
<!-- Line Chart: User Activity -->
<rect x="0" y="0" width="480" height="200" rx="10" class="card-bg"/>
<rect x="0" y="0" width="480" height="200" rx="10" class="border"/>
<text x="20" y="25" font-size="14" font-weight="600" class="main-text">User Activity</text>
<text x="380" y="25" font-size="11" class="muted-text">Daily active users</text>
<!-- Grid Lines -->
<line x1="50" y1="50" x2="460" y2="50" class="grid-line"/>
<line x1="50" y1="85" x2="460" y2="85" class="grid-line"/>
<line x1="50" y1="120" x2="460" y2="120" class="grid-line"/>
<line x1="50" y1="155" x2="460" y2="155" class="grid-line"/>
<!-- Y-axis labels -->
<text x="40" y="54" text-anchor="end" font-size="10" class="muted-text">2k</text>
<text x="40" y="89" text-anchor="end" font-size="10" class="muted-text">1.5k</text>
<text x="40" y="124" text-anchor="end" font-size="10" class="muted-text">1k</text>
<text x="40" y="159" text-anchor="end" font-size="10" class="muted-text">500</text>
<!-- Line Chart Path -->
<path d="M50,130 L100,110 L150,125 L200,95 L250,80 L300,90 L350,65 L400,75 L460,55" class="chart-line"/>
<path d="M50,130 L100,110 L150,125 L200,95 L250,80 L300,90 L350,65 L400,75 L460,55 L460,155 L50,155 Z" class="chart-area"/>
<!-- Data Points -->
<circle cx="50" cy="130" r="4" fill="#3b82f6"/>
<circle cx="100" cy="110" r="4" fill="#3b82f6"/>
<circle cx="150" cy="125" r="4" fill="#3b82f6"/>
<circle cx="200" cy="95" r="4" fill="#3b82f6"/>
<circle cx="250" cy="80" r="4" fill="#3b82f6"/>
<circle cx="300" cy="90" r="4" fill="#3b82f6"/>
<circle cx="350" cy="65" r="4" fill="#3b82f6"/>
<circle cx="400" cy="75" r="4" fill="#3b82f6"/>
<circle cx="460" cy="55" r="4" fill="#3b82f6"/>
<!-- X-axis labels -->
<text x="50" y="175" text-anchor="middle" font-size="10" class="muted-text">1</text>
<text x="150" y="175" text-anchor="middle" font-size="10" class="muted-text">8</text>
<text x="250" y="175" text-anchor="middle" font-size="10" class="muted-text">15</text>
<text x="350" y="175" text-anchor="middle" font-size="10" class="muted-text">22</text>
<text x="460" y="175" text-anchor="middle" font-size="10" class="muted-text">30</text>
<text x="255" y="193" text-anchor="middle" font-size="10" class="muted-text">March 2024</text>
<!-- Bar Chart: Messages by Type -->
<rect x="500" y="0" width="285" height="200" rx="10" class="card-bg"/>
<rect x="500" y="0" width="285" height="200" rx="10" class="border"/>
<text x="520" y="25" font-size="14" font-weight="600" class="main-text">Messages by Type</text>
<!-- Bars -->
<rect x="540" y="55" width="40" height="100" rx="4" class="bar-blue"/>
<rect x="600" y="75" width="40" height="80" rx="4" class="bar-green"/>
<rect x="660" y="95" width="40" height="60" rx="4" class="bar-purple"/>
<rect x="720" y="115" width="40" height="40" rx="4" fill="#f97316"/>
<!-- Bar labels -->
<text x="560" y="170" text-anchor="middle" font-size="10" class="muted-text">Chat</text>
<text x="620" y="170" text-anchor="middle" font-size="10" class="muted-text">Email</text>
<text x="680" y="170" text-anchor="middle" font-size="10" class="muted-text">Voice</text>
<text x="740" y="170" text-anchor="middle" font-size="10" class="muted-text">Other</text>
<!-- Bar values -->
<text x="560" y="50" text-anchor="middle" font-size="11" class="main-text">4.2k</text>
<text x="620" y="70" text-anchor="middle" font-size="11" class="main-text">3.1k</text>
<text x="680" y="90" text-anchor="middle" font-size="11" class="main-text">1.8k</text>
<text x="740" y="110" text-anchor="middle" font-size="11" class="main-text">890</text>
</g>
<!-- Bottom Row -->
<g transform="translate(50, 440)">
<!-- Top Queries Table -->
<rect x="0" y="0" width="380" height="115" rx="10" class="card-bg"/>
<rect x="0" y="0" width="380" height="115" rx="10" class="border"/>
<text x="20" y="25" font-size="14" font-weight="600" class="main-text">Top Queries</text>
<text x="20" y="50" font-size="12" class="main-text">1. "How do I reset my password?"</text>
<text x="330" y="50" text-anchor="end" font-size="12" class="secondary-text">847</text>
<text x="20" y="70" font-size="12" class="main-text">2. "Billing information"</text>
<text x="330" y="70" text-anchor="end" font-size="12" class="secondary-text">623</text>
<text x="20" y="90" font-size="12" class="main-text">3. "Schedule a meeting"</text>
<text x="330" y="90" text-anchor="end" font-size="12" class="secondary-text">512</text>
<text x="330" y="108" text-anchor="end" font-size="11" class="accent-text">View all →</text>
<!-- Performance Metrics -->
<rect x="400" y="0" width="385" height="115" rx="10" class="card-bg"/>
<rect x="400" y="0" width="385" height="115" rx="10" class="border"/>
<text x="420" y="25" font-size="14" font-weight="600" class="main-text">Performance</text>
<text x="420" y="50" font-size="12" class="secondary-text">Resolution Rate</text>
<rect x="420" y="58" width="200" height="8" rx="4" fill="#e2e8f0"/>
<rect x="420" y="58" width="170" height="8" rx="4" fill="#22c55e"/>
<text x="640" y="67" font-size="12" class="main-text">85%</text>
<text x="420" y="85" font-size="12" class="secondary-text">Escalation Rate</text>
<rect x="420" y="93" width="200" height="8" rx="4" fill="#e2e8f0"/>
<rect x="420" y="93" width="30" height="8" rx="4" fill="#f97316"/>
<text x="640" y="102" font-size="12" class="main-text">15%</text>
</g>
<!-- Footer -->
<g transform="translate(50, 565)">
<text x="0" y="0" font-size="10" class="muted-text">R = Refresh | E = Export | D = Date range | F = Filter</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

214
docs/src/assets/suite/app-launcher.svg
View file

@ -1,214 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.neon-red { stroke: #E74C3C; stroke-width: 2.6; }
.neon-pink { stroke: #FF6B9D; stroke-width: 2.6; }
.neon-yellow { stroke: #F1C40F; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.icon-fill { fill: #666; }
.card-bg { fill: #ffffff; }
.launcher-bg { fill: #f8f9fa; }
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-red {
stroke: #FF6B6B;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF6B6B) drop-shadow(0 0 8px #FF5252);
}
.neon-pink {
stroke: #FF6B9D;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF6B9D) drop-shadow(0 0 8px #FF4081);
}
.neon-yellow {
stroke: #FFD93D;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FFD93D) drop-shadow(0 0 8px #FFC107);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.icon-fill { fill: #B0B0B0; }
.card-bg { fill: #1e1e1e; }
.launcher-bg { fill: #121212; }
}
</style>
<defs>
<filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.1"/>
</filter>
</defs>
<!-- Title -->
<text x="700" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="36" font-weight="600" class="main-text">General Bots Suite</text>
<text x="700" y="85" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" class="secondary-text">Your AI-Powered Productivity Workspace</text>
<!-- App Launcher Grid - 3x3 layout -->
<g id="app-grid" transform="translate(250, 130)">
<!-- Row 1 -->
<!-- Chat -->
<g transform="translate(0, 0)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-blue"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-blue"/>
<path d="M115 55 L145 55 C150 55 155 60 155 65 L155 80 C155 85 150 90 145 90 L125 90 L115 100 L115 90 L115 65 C115 60 120 55 125 55" fill="none" class="neon-blue" stroke-width="2.5"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Chat</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">AI Assistant</text>
</g>
<!-- Drive -->
<g transform="translate(300, 0)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-orange"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-orange"/>
<path d="M110 55 L150 55 L150 50 L155 50 L155 90 L105 90 L105 60 L110 55 Z" fill="none" class="neon-orange" stroke-width="2.5"/>
<line x1="105" y1="70" x2="155" y2="70" class="neon-orange" stroke-width="2"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Drive</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">File Storage</text>
</g>
<!-- Tasks -->
<g transform="translate(600, 0)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-green"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-green"/>
<path d="M115 60 L125 70 L145 50" fill="none" class="neon-green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="115" y1="80" x2="145" y2="80" class="neon-green" stroke-width="2.5"/>
<line x1="115" y1="90" x2="140" y2="90" class="neon-green" stroke-width="2.5"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Tasks</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">To-Do Lists</text>
</g>
<!-- Row 2 -->
<!-- Mail -->
<g transform="translate(0, 220)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-red"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-red"/>
<rect x="105" y="55" width="50" height="35" rx="3" fill="none" class="neon-red" stroke-width="2.5"/>
<polyline points="105,58 130,75 155,58" fill="none" class="neon-red" stroke-width="2.5"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Mail</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Email Client</text>
</g>
<!-- Calendar -->
<g transform="translate(300, 220)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-purple"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-purple"/>
<rect x="108" y="50" width="44" height="40" rx="4" fill="none" class="neon-purple" stroke-width="2.5"/>
<line x1="108" y1="62" x2="152" y2="62" class="neon-purple" stroke-width="2"/>
<line x1="118" y1="45" x2="118" y2="55" class="neon-purple" stroke-width="2.5"/>
<line x1="142" y1="45" x2="142" y2="55" class="neon-purple" stroke-width="2.5"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Calendar</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Scheduling</text>
</g>
<!-- Meet -->
<g transform="translate(600, 220)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-cyan"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-cyan"/>
<rect x="108" y="52" width="35" height="28" rx="4" fill="none" class="neon-cyan" stroke-width="2.5"/>
<polygon points="143,58 155,52 155,88 143,82" fill="none" class="neon-cyan" stroke-width="2.5"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Meet</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Video Calls</text>
</g>
<!-- Row 3 -->
<!-- Paper -->
<g transform="translate(0, 440)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-yellow"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-yellow"/>
<rect x="112" y="48" width="36" height="44" rx="2" fill="none" class="neon-yellow" stroke-width="2.5"/>
<line x1="118" y1="60" x2="142" y2="60" class="neon-yellow" stroke-width="2"/>
<line x1="118" y1="70" x2="142" y2="70" class="neon-yellow" stroke-width="2"/>
<line x1="118" y1="80" x2="135" y2="80" class="neon-yellow" stroke-width="2"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Paper</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">AI Writing</text>
</g>
<!-- Research -->
<g transform="translate(300, 440)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-pink"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-pink"/>
<circle cx="125" cy="65" r="18" fill="none" class="neon-pink" stroke-width="2.5"/>
<line x1="138" y1="78" x2="150" y2="90" class="neon-pink" stroke-width="3" stroke-linecap="round"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Research</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">AI Search</text>
</g>
<!-- Analytics -->
<g transform="translate(600, 440)">
<rect x="0" y="0" width="260" height="180" rx="16" class="card-bg" filter="url(#card-shadow)" stroke="none"/>
<rect x="0" y="0" width="260" height="180" rx="16" fill="none" class="neon-blue"/>
<circle cx="130" cy="70" r="35" fill="none" class="neon-blue"/>
<rect x="110" y="75" width="10" height="15" fill="none" class="neon-blue" stroke-width="2"/>
<rect x="125" y="60" width="10" height="30" fill="none" class="neon-blue" stroke-width="2"/>
<rect x="140" y="50" width="10" height="40" fill="none" class="neon-blue" stroke-width="2"/>
<text x="130" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="600" class="main-text">Analytics</text>
<text x="130" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Reports</text>
</g>
</g>
<!-- Bottom section - Additional Tools -->
<g transform="translate(0, 780)">
<text x="700" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" class="secondary-text">Additional Tools</text>
<g transform="translate(350, 50)">
<rect x="0" y="0" width="140" height="50" rx="8" fill="none" class="neon-purple"/>
<text x="70" y="32" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Designer</text>
</g>
<g transform="translate(520, 50)">
<rect x="0" y="0" width="140" height="50" rx="8" fill="none" class="neon-orange"/>
<text x="70" y="32" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Sources</text>
</g>
<g transform="translate(690, 50)">
<rect x="0" y="0" width="140" height="50" rx="8" fill="none" class="neon-green"/>
<text x="70" y="32" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Compliance</text>
</g>
<g transform="translate(860, 50)">
<rect x="0" y="0" width="140" height="50" rx="8" fill="none" class="neon-cyan"/>
<text x="70" y="32" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Settings</text>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

291
docs/src/assets/suite/calendar-flow.svg
View file

@ -1,291 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.neon-pink { stroke: #FF6B9D; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.neon-pink {
stroke: #FF6B9D;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF6B9D) drop-shadow(0 0 8px #FF8FAB);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="33%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="66%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Calendar - Scheduling Flow</text>
<text x="700" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Event management with multiple views and AI scheduling assistance</text>
<!-- Phase Labels -->
<text x="180" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Views</text>
<text x="480" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Events</text>
<text x="780" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Details</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Actions</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- View Selector -->
<g transform="translate(80, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-blue"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">View Selector</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Choose display mode</text>
</g>
<!-- Month View -->
<g transform="translate(80, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Month</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Overview</text>
</g>
<!-- Week View -->
<g transform="translate(185, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Week</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">7 days</text>
</g>
<!-- Day View -->
<g transform="translate(80, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Day</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Hourly</text>
</g>
<!-- Agenda View -->
<g transform="translate(185, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-green"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Agenda</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">List view</text>
</g>
<!-- Mini Calendar -->
<g transform="translate(80, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-pink"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Mini Calendar</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Quick navigation</text>
</g>
<!-- Event Display -->
<g transform="translate(380, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Event Grid</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Visual timeline</text>
</g>
<!-- Event Cards -->
<g transform="translate(380, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Event Cards</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Color-coded</text>
</g>
<!-- Time Slots -->
<g transform="translate(380, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Time Slots</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Drag to create</text>
</g>
<!-- All-Day Events -->
<g transform="translate(380, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">All-Day Events</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Top banner</text>
</g>
<!-- Event Details -->
<g transform="translate(680, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Event Details</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Modal/sidebar</text>
</g>
<!-- Title & Time -->
<g transform="translate(680, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Title &amp; Time</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Date picker</text>
</g>
<!-- Location -->
<g transform="translate(680, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Location</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Virtual/IRL</text>
</g>
<!-- Attendees -->
<g transform="translate(785, 350)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Attendees</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Invite</text>
</g>
<!-- Reminders -->
<g transform="translate(680, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-pink"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Reminders</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Notifications</text>
</g>
<!-- Actions -->
<g transform="translate(980, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Actions</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Event management</text>
</g>
<!-- Create Event -->
<g transform="translate(980, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Create Event</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">+ New</text>
</g>
<!-- Edit/Delete -->
<g transform="translate(980, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Edit / Delete</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Modify events</text>
</g>
<!-- AI Schedule -->
<g transform="translate(980, 440)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">AI Schedule ✨</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Smart booking</text>
</g>
<!-- Arrows - Main Flow -->
<line x1="280" y1="195" x2="375" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="580" y1="195" x2="675" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="880" y1="195" x2="975" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- View selection arrows -->
<path d="M175 290 Q300 290 340 230 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<path d="M175 380 Q320 380 350 250 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.4"/>
<!-- Event to Details -->
<line x1="580" y1="290" x2="675" y2="290" class="arrow-color" stroke-width="1.5" marker-end="url(#arrow)" opacity="0.4"/>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend" transform="translate(0, 520)">
<rect x="100" y="30" width="1200" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="70" r="12" class="neon-blue" fill="none" stroke-width="3"/>
<text x="200" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">1</text>
<circle cx="500" cy="70" r="12" class="neon-purple" fill="none" stroke-width="3"/>
<text x="500" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">2</text>
<circle cx="800" cy="70" r="12" class="neon-orange" fill="none" stroke-width="3"/>
<text x="800" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">3</text>
<circle cx="1100" cy="70" r="12" class="neon-green" fill="none" stroke-width="3"/>
<text x="1100" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">4</text>
<!-- Connecting lines -->
<line x1="212" y1="70" x2="488" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="512" y1="70" x2="788" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="812" y1="70" x2="1088" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<!-- Stage labels -->
<text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Choose View</text>
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Month/Week/Day</text>
<text x="500" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Browse Events</text>
<text x="500" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Visual timeline</text>
<text x="800" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">View Details</text>
<text x="800" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Event info</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Take Action</text>
<text x="1100" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Create/Edit</text>
</g>
<!-- Features Legend -->
<g transform="translate(100, 720)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Features:</text>
<rect x="0" y="20" width="16" height="16" rx="3" fill="none" class="neon-cyan" stroke-width="2"/>
<text x="25" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Drag-and-drop event creation</text>
<rect x="280" y="20" width="16" height="16" rx="3" fill="none" class="neon-purple" stroke-width="2"/>
<text x="305" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Recurring events</text>
<rect x="500" y="20" width="16" height="16" rx="3" fill="none" class="neon-orange" stroke-width="2"/>
<text x="525" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Multi-calendar support</text>
<rect x="750" y="20" width="16" height="16" rx="3" fill="none" class="neon-green" stroke-width="2"/>
<text x="775" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">AI scheduling assistant ✨</text>
<rect x="1020" y="20" width="16" height="16" rx="3" fill="none" class="neon-pink" stroke-width="2"/>
<text x="1045" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Timezone handling</text>
</g>
<!-- Keyboard shortcuts -->
<g transform="translate(100, 780)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Shortcuts:</text>
<text x="100" y="0" font-family="Arial, sans-serif" font-size="14" class="secondary-text">C = Create | M = Month | W = Week | D = Day | A = Agenda | T = Today | ← → = Navigate | Enter = Open</text>
</g>
<!-- API Endpoints -->
<g transform="translate(100, 820)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Endpoints:</text>
<text x="100" y="0" font-family="monospace, sans-serif" font-size="13" class="secondary-text">GET /api/calendar/events | POST /api/calendar/events | PUT /api/calendar/events/{id} | DELETE /api/calendar/events/{id} | POST /api/calendar/ai/suggest</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

265
docs/src/assets/suite/calendar-screen.svg
View file

@ -1,265 +0,0 @@
<svg width="900" height="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#60a5fa"/>
</linearGradient>
</defs>
<style>
.bg { fill: #ffffff; }
.sidebar-bg { fill: #f8fafc; }
.main-text { fill: #1e293b; font-family: system-ui, -apple-system, sans-serif; }
.secondary-text { fill: #64748b; font-family: system-ui, -apple-system, sans-serif; }
.muted-text { fill: #94a3b8; font-family: system-ui, -apple-system, sans-serif; }
.white-text { fill: #ffffff; font-family: system-ui, -apple-system, sans-serif; }
.accent-text { fill: #3b82f6; font-family: system-ui, -apple-system, sans-serif; }
.border { stroke: #e2e8f0; stroke-width: 1; fill: none; }
.icon-btn { fill: #f1f5f9; }
.today-circle { fill: #3b82f6; }
.event-blue { fill: #3b82f6; }
.event-green { fill: #22c55e; }
.event-purple { fill: #8b5cf6; }
.event-orange { fill: #f97316; }
.grid-line { stroke: #e2e8f0; stroke-width: 1; }
.hour-text { fill: #94a3b8; font-family: system-ui, -apple-system, sans-serif; }
@media (prefers-color-scheme: dark) {
.bg { fill: #0f172a; }
.sidebar-bg { fill: #1e293b; }
.main-text { fill: #e2e8f0; }
.secondary-text { fill: #94a3b8; }
.muted-text { fill: #64748b; }
.accent-text { fill: #60a5fa; }
.border { stroke: #334155; }
.icon-btn { fill: #334155; }
.grid-line { stroke: #334155; }
.hour-text { fill: #64748b; }
}
</style>
<text x="450" y="25" text-anchor="middle" font-size="16" font-weight="600" class="main-text">Calendar - Schedule Manager</text>
<rect x="30" y="40" width="840" height="530" rx="8" class="bg"/>
<rect x="30" y="40" width="840" height="530" rx="8" class="border"/>
<!-- Sidebar -->
<rect x="30" y="40" width="180" height="530" class="sidebar-bg"/>
<line x1="210" y1="40" x2="210" y2="570" class="border"/>
<!-- New Event Button -->
<g transform="translate(45, 55)">
<rect x="0" y="0" width="150" height="40" rx="8" fill="url(#accentGrad)"/>
<text x="75" y="26" text-anchor="middle" font-size="14" font-weight="500" class="white-text">+ New Event</text>
</g>
<!-- Mini Calendar -->
<g transform="translate(45, 115)">
<g transform="translate(0, 0)">
<text x="0" y="0" font-size="11">◀</text>
<text x="75" y="0" text-anchor="middle" font-size="13" font-weight="500" class="main-text">March 2024</text>
<text x="150" y="0" font-size="11">▶</text>
</g>
<!-- Weekday Headers -->
<g transform="translate(0, 20)">
<text x="10" y="0" text-anchor="middle" font-size="10" class="muted-text">S</text>
<text x="32" y="0" text-anchor="middle" font-size="10" class="muted-text">M</text>
<text x="54" y="0" text-anchor="middle" font-size="10" class="muted-text">T</text>
<text x="76" y="0" text-anchor="middle" font-size="10" class="muted-text">W</text>
<text x="98" y="0" text-anchor="middle" font-size="10" class="muted-text">T</text>
<text x="120" y="0" text-anchor="middle" font-size="10" class="muted-text">F</text>
<text x="142" y="0" text-anchor="middle" font-size="10" class="muted-text">S</text>
</g>
<!-- Week 1 -->
<g transform="translate(0, 38)">
<text x="10" y="0" text-anchor="middle" font-size="11" class="muted-text">25</text>
<text x="32" y="0" text-anchor="middle" font-size="11" class="muted-text">26</text>
<text x="54" y="0" text-anchor="middle" font-size="11" class="muted-text">27</text>
<text x="76" y="0" text-anchor="middle" font-size="11" class="muted-text">28</text>
<text x="98" y="0" text-anchor="middle" font-size="11" class="muted-text">29</text>
<text x="120" y="0" text-anchor="middle" font-size="11" class="main-text">1</text>
<text x="142" y="0" text-anchor="middle" font-size="11" class="main-text">2</text>
</g>
<!-- Week 2 -->
<g transform="translate(0, 56)">
<text x="10" y="0" text-anchor="middle" font-size="11" class="main-text">3</text>
<text x="32" y="0" text-anchor="middle" font-size="11" class="main-text">4</text>
<text x="54" y="0" text-anchor="middle" font-size="11" class="main-text">5</text>
<text x="76" y="0" text-anchor="middle" font-size="11" class="main-text">6</text>
<text x="98" y="0" text-anchor="middle" font-size="11" class="main-text">7</text>
<text x="120" y="0" text-anchor="middle" font-size="11" class="main-text">8</text>
<text x="142" y="0" text-anchor="middle" font-size="11" class="main-text">9</text>
</g>
<!-- Week 3 -->
<g transform="translate(0, 74)">
<text x="10" y="0" text-anchor="middle" font-size="11" class="main-text">10</text>
<text x="32" y="0" text-anchor="middle" font-size="11" class="main-text">11</text>
<text x="54" y="0" text-anchor="middle" font-size="11" class="main-text">12</text>
<text x="76" y="0" text-anchor="middle" font-size="11" class="main-text">13</text>
<text x="98" y="0" text-anchor="middle" font-size="11" class="main-text">14</text>
<circle cx="120" cy="-4" r="12" class="today-circle"/>
<text x="120" y="0" text-anchor="middle" font-size="11" class="white-text">15</text>
<text x="142" y="0" text-anchor="middle" font-size="11" class="main-text">16</text>
</g>
<!-- Week 4 -->
<g transform="translate(0, 92)">
<text x="10" y="0" text-anchor="middle" font-size="11" class="main-text">17</text>
<text x="32" y="0" text-anchor="middle" font-size="11" class="main-text">18</text>
<text x="54" y="0" text-anchor="middle" font-size="11" class="main-text">19</text>
<text x="76" y="0" text-anchor="middle" font-size="11" class="main-text">20</text>
<text x="98" y="0" text-anchor="middle" font-size="11" class="main-text">21</text>
<text x="120" y="0" text-anchor="middle" font-size="11" class="main-text">22</text>
<text x="142" y="0" text-anchor="middle" font-size="11" class="main-text">23</text>
</g>
<!-- Week 5 -->
<g transform="translate(0, 110)">
<text x="10" y="0" text-anchor="middle" font-size="11" class="main-text">24</text>
<text x="32" y="0" text-anchor="middle" font-size="11" class="main-text">25</text>
<text x="54" y="0" text-anchor="middle" font-size="11" class="main-text">26</text>
<text x="76" y="0" text-anchor="middle" font-size="11" class="main-text">27</text>
<text x="98" y="0" text-anchor="middle" font-size="11" class="main-text">28</text>
<text x="120" y="0" text-anchor="middle" font-size="11" class="main-text">29</text>
<text x="142" y="0" text-anchor="middle" font-size="11" class="main-text">30</text>
</g>
</g>
<!-- Calendars List -->
<g transform="translate(45, 270)">
<text x="0" y="0" font-size="11" font-weight="600" class="muted-text">MY CALENDARS</text>
<g transform="translate(0, 20)">
<rect x="0" y="0" width="14" height="14" rx="3" fill="#3b82f6"/>
<text x="22" y="12" font-size="13" class="main-text">Personal</text>
</g>
<g transform="translate(0, 45)">
<rect x="0" y="0" width="14" height="14" rx="3" fill="#22c55e"/>
<text x="22" y="12" font-size="13" class="main-text">Work</text>
</g>
<g transform="translate(0, 70)">
<rect x="0" y="0" width="14" height="14" rx="3" fill="#8b5cf6"/>
<text x="22" y="12" font-size="13" class="main-text">Family</text>
</g>
</g>
<!-- Main Calendar Area -->
<!-- Header -->
<g transform="translate(230, 55)">
<rect x="0" y="0" width="70" height="32" rx="6" class="icon-btn"/>
<text x="35" y="21" text-anchor="middle" font-size="12" class="secondary-text">Today</text>
<text x="90" y="21" font-size="16" class="secondary-text">◀</text>
<text x="115" y="21" font-size="16" class="secondary-text">▶</text>
<text x="150" y="22" font-size="16" font-weight="600" class="main-text">March 15, 2024</text>
<!-- View Selector -->
<g transform="translate(380, 0)">
<rect x="0" y="0" width="180" height="32" rx="6" class="icon-btn"/>
<text x="30" y="21" text-anchor="middle" font-size="12" class="muted-text">Day</text>
<rect x="55" y="4" width="50" height="24" rx="4" fill="#3b82f6"/>
<text x="80" y="21" text-anchor="middle" font-size="12" class="white-text">Week</text>
<text x="130" y="21" text-anchor="middle" font-size="12" class="muted-text">Month</text>
</g>
</g>
<!-- Week Header -->
<g transform="translate(230, 100)">
<rect x="40" y="0" width="610" height="35" class="sidebar-bg"/>
<line x1="230" y1="35" x2="850" y2="35" class="grid-line"/>
<text x="80" y="15" text-anchor="middle" font-size="11" class="secondary-text">SUN</text>
<text x="80" y="30" text-anchor="middle" font-size="14" class="secondary-text">10</text>
<text x="165" y="15" text-anchor="middle" font-size="11" class="secondary-text">MON</text>
<text x="165" y="30" text-anchor="middle" font-size="14" class="secondary-text">11</text>
<text x="250" y="15" text-anchor="middle" font-size="11" class="secondary-text">TUE</text>
<text x="250" y="30" text-anchor="middle" font-size="14" class="secondary-text">12</text>
<text x="335" y="15" text-anchor="middle" font-size="11" class="secondary-text">WED</text>
<text x="335" y="30" text-anchor="middle" font-size="14" class="secondary-text">13</text>
<text x="420" y="15" text-anchor="middle" font-size="11" class="secondary-text">THU</text>
<text x="420" y="30" text-anchor="middle" font-size="14" class="secondary-text">14</text>
<text x="505" y="15" text-anchor="middle" font-size="11" class="accent-text">FRI</text>
<circle cx="505" cy="26" r="12" class="today-circle"/>
<text x="505" y="31" text-anchor="middle" font-size="14" class="white-text">15</text>
<text x="590" y="15" text-anchor="middle" font-size="11" class="secondary-text">SAT</text>
<text x="590" y="30" text-anchor="middle" font-size="14" class="secondary-text">16</text>
</g>
<!-- Time Grid -->
<g transform="translate(230, 140)">
<!-- Time labels -->
<text x="20" y="12" text-anchor="middle" font-size="10" class="hour-text">8 AM</text>
<text x="20" y="52" text-anchor="middle" font-size="10" class="hour-text">9 AM</text>
<text x="20" y="92" text-anchor="middle" font-size="10" class="hour-text">10 AM</text>
<text x="20" y="132" text-anchor="middle" font-size="10" class="hour-text">11 AM</text>
<text x="20" y="172" text-anchor="middle" font-size="10" class="hour-text">12 PM</text>
<text x="20" y="212" text-anchor="middle" font-size="10" class="hour-text">1 PM</text>
<text x="20" y="252" text-anchor="middle" font-size="10" class="hour-text">2 PM</text>
<text x="20" y="292" text-anchor="middle" font-size="10" class="hour-text">3 PM</text>
<text x="20" y="332" text-anchor="middle" font-size="10" class="hour-text">4 PM</text>
<text x="20" y="372" text-anchor="middle" font-size="10" class="hour-text">5 PM</text>
<!-- Grid lines -->
<line x1="40" y1="5" x2="620" y2="5" class="grid-line"/>
<line x1="40" y1="45" x2="620" y2="45" class="grid-line"/>
<line x1="40" y1="85" x2="620" y2="85" class="grid-line"/>
<line x1="40" y1="125" x2="620" y2="125" class="grid-line"/>
<line x1="40" y1="165" x2="620" y2="165" class="grid-line"/>
<line x1="40" y1="205" x2="620" y2="205" class="grid-line"/>
<line x1="40" y1="245" x2="620" y2="245" class="grid-line"/>
<line x1="40" y1="285" x2="620" y2="285" class="grid-line"/>
<line x1="40" y1="325" x2="620" y2="325" class="grid-line"/>
<line x1="40" y1="365" x2="620" y2="365" class="grid-line"/>
<!-- Column dividers -->
<line x1="125" y1="0" x2="125" y2="385" class="grid-line"/>
<line x1="210" y1="0" x2="210" y2="385" class="grid-line"/>
<line x1="295" y1="0" x2="295" y2="385" class="grid-line"/>
<line x1="380" y1="0" x2="380" y2="385" class="grid-line"/>
<line x1="465" y1="0" x2="465" y2="385" class="grid-line"/>
<line x1="550" y1="0" x2="550" y2="385" class="grid-line"/>
<!-- Events -->
<!-- Monday 9-10 AM -->
<rect x="127" y="45" width="80" height="40" rx="4" class="event-green"/>
<text x="135" y="62" font-size="10" font-weight="500" class="white-text">Team Standup</text>
<text x="135" y="75" font-size="9" class="white-text">9:00 - 10:00</text>
<!-- Wednesday 11 AM - 12 PM -->
<rect x="297" y="125" width="80" height="40" rx="4" class="event-blue"/>
<text x="305" y="142" font-size="10" font-weight="500" class="white-text">Client Call</text>
<text x="305" y="155" font-size="9" class="white-text">11:00 - 12:00</text>
<!-- Friday (Today) 2-3 PM -->
<rect x="467" y="245" width="80" height="40" rx="4" class="event-purple"/>
<text x="475" y="262" font-size="10" font-weight="500" class="white-text">Project Review</text>
<text x="475" y="275" font-size="9" class="white-text">2:00 - 3:00</text>
<!-- Friday 4-5 PM -->
<rect x="467" y="325" width="80" height="40" rx="4" class="event-orange"/>
<text x="475" y="342" font-size="10" font-weight="500" class="white-text">1:1 Meeting</text>
<text x="475" y="355" font-size="9" class="white-text">4:00 - 5:00</text>
<!-- Current time indicator (Friday ~2:30 PM) -->
<line x1="465" y1="265" x2="550" y2="265" stroke="#ef4444" stroke-width="2"/>
<circle cx="465" cy="265" r="4" fill="#ef4444"/>
</g>
<!-- Footer -->
<g transform="translate(230, 555)">
<text x="0" y="0" font-size="10" class="muted-text">Click to create | Drag to reschedule | Double-click to edit</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

239
docs/src/assets/suite/chat-flow.svg
View file

@ -1,239 +0,0 @@
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
<style>
/* Light theme defaults */
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
.main-text { fill: #1a1a1a; }
.secondary-text { fill: #666; }
.arrow-color { stroke: #666; fill: #666; }
@media (prefers-color-scheme: dark) {
.neon-blue {
stroke: #00D4FF;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
}
.neon-orange {
stroke: #FF9500;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
}
.neon-purple {
stroke: #E040FB;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
}
.neon-green {
stroke: #00FF88;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
}
.neon-cyan {
stroke: #00E5EA;
stroke-width: 2.8;
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
}
.main-text { fill: #FFFFFF; }
.secondary-text { fill: #B0B0B0; }
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
}
</style>
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
</marker>
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A90E2;stop-opacity:0.3" />
<stop offset="33%" style="stop-color:#F5A623;stop-opacity:0.3" />
<stop offset="66%" style="stop-color:#BD10E0;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#7ED321;stop-opacity:0.3" />
</linearGradient>
</defs>
<!-- Title -->
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Chat - AI Assistant Flow</text>
<text x="700" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">WebSocket-powered real-time conversation with your AI assistant</text>
<!-- Phase Labels -->
<text x="180" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Input</text>
<text x="480" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Transport</text>
<text x="780" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Processing</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Response</text>
<!-- MAIN FLOW DIAGRAM -->
<g id="main-flow">
<!-- User Input Section -->
<g transform="translate(80, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-blue"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">User Message</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Text or Voice Input</text>
</g>
<!-- Voice Input (parallel) -->
<g transform="translate(80, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-blue" stroke-dasharray="3.9,3.9"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Voice Input</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Speech-to-Text</text>
</g>
<!-- Suggestions (parallel) -->
<g transform="translate(80, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-blue" stroke-dasharray="3.9,3.9"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Quick Suggestions</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">One-click actions</text>
</g>
<!-- WebSocket -->
<g transform="translate(380, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-orange"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">WebSocket</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Real-time Connection</text>
</g>
<!-- HTMX POST (alternative) -->
<g transform="translate(380, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-orange" stroke-dasharray="3.9,3.9"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">HTMX POST</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Fallback Transport</text>
</g>
<!-- AI Processing -->
<g transform="translate(680, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-purple"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">AI Processing</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">LLM + Context</text>
</g>
<!-- Context/Memory -->
<g transform="translate(680, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Context</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">History</text>
</g>
<!-- Tools/KB -->
<g transform="translate(785, 260)">
<rect x="0" y="0" width="95" height="60" rx="6.5" fill="none" class="neon-purple"/>
<text x="47" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Tools</text>
<text x="47" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">KB + APIs</text>
</g>
<!-- Response -->
<g transform="translate(980, 160)">
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-green"/>
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="500" class="main-text">Bot Response</text>
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Streamed to UI</text>
</g>
<!-- Message Display -->
<g transform="translate(980, 260)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Message Display</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Markdown Rendered</text>
</g>
<!-- Scroll/History -->
<g transform="translate(980, 350)">
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-cyan"/>
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">Chat History</text>
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Scroll + Load More</text>
</g>
<!-- Arrows - Main Flow -->
<line x1="280" y1="195" x2="375" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="580" y1="195" x2="675" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<line x1="880" y1="195" x2="975" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
<!-- Arrow from Voice to main -->
<path d="M280 290 Q320 290 320 210 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Arrow from Suggestions to main -->
<path d="M280 380 Q340 380 340 220 L375 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Arrow from Context/Tools to AI -->
<line x1="728" y1="260" x2="728" y2="235" class="arrow-color" stroke-width="1.5" opacity="0.5"/>
<line x1="833" y1="260" x2="833" y2="235" class="arrow-color" stroke-width="1.5" opacity="0.5"/>
<!-- Arrow to Message Display -->
<line x1="1080" y1="230" x2="1080" y2="255" class="arrow-color" stroke-width="2" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Arrow to History -->
<line x1="1080" y1="320" x2="1080" y2="345" class="arrow-color" stroke-width="2" marker-end="url(#arrow)" opacity="0.5"/>
<!-- Feedback loop - user continues conversation -->
<path d="M980 380 Q50 450 50 195 L75 195" fill="none" class="arrow-color" stroke-width="2" stroke-dasharray="5,5" marker-end="url(#arrow)" opacity="0.4"/>
<text x="500" y="475" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text" opacity="0.6">Conversation continues...</text>
</g>
<!-- PROGRESS INDICATOR -->
<g id="progress-legend" transform="translate(0, 520)">
<rect x="100" y="30" width="1200" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
<!-- Stage markers -->
<circle cx="200" cy="70" r="12" class="neon-blue" fill="none" stroke-width="3"/>
<text x="200" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">1</text>
<circle cx="500" cy="70" r="12" class="neon-orange" fill="none" stroke-width="3"/>
<text x="500" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">2</text>
<circle cx="800" cy="70" r="12" class="neon-purple" fill="none" stroke-width="3"/>
<text x="800" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">3</text>
<circle cx="1100" cy="70" r="12" class="neon-green" fill="none" stroke-width="3"/>
<text x="1100" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">4</text>
<!-- Connecting lines -->
<line x1="212" y1="70" x2="488" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="512" y1="70" x2="788" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<line x1="812" y1="70" x2="1088" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
<!-- Stage labels -->
<text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Type or Speak</text>
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Enter your message</text>
<text x="500" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Send</text>
<text x="500" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">WebSocket transmit</text>
<text x="800" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Process</text>
<text x="800" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">AI generates response</text>
<text x="1100" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Display</text>
<text x="1100" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">See bot reply</text>
</g>
<!-- Features Legend -->
<g transform="translate(100, 720)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Key Features:</text>
<rect x="0" y="20" width="16" height="16" rx="3" fill="none" class="neon-blue" stroke-width="2"/>
<text x="25" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Voice input with speech-to-text</text>
<rect x="280" y="20" width="16" height="16" rx="3" fill="none" class="neon-orange" stroke-width="2"/>
<text x="305" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Real-time WebSocket connection</text>
<rect x="580" y="20" width="16" height="16" rx="3" fill="none" class="neon-purple" stroke-width="2"/>
<text x="605" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Context-aware AI responses</text>
<rect x="880" y="20" width="16" height="16" rx="3" fill="none" class="neon-green" stroke-width="2"/>
<text x="905" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Markdown rendering</text>
</g>
<!-- Keyboard shortcuts -->
<g transform="translate(100, 780)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Shortcuts:</text>
<text x="100" y="0" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Enter = Send | Shift+Enter = New line | ↑ = Edit last | / = Commands</text>
</g>
<!-- API Endpoints -->
<g transform="translate(100, 820)">
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Endpoints:</text>
<text x="100" y="0" font-family="monospace, sans-serif" font-size="13" class="secondary-text">/ws (WebSocket) | POST /api/sessions/current/message | GET /api/sessions/current/history | POST /api/voice/start</text>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

Some files were not shown because too many files have changed in this diff Show more