GeneralBots/botserver
2
1
Fork 0
Code Issues Pull requests Projects Releases 323 Packages Wiki Activity Actions
botserver/docs/src/assets/suite/chat-flow.svg

240 lines
14 KiB
XML
Raw Normal View History

Add Suite app documentation, templates, and Askama config - Add askama.toml for template configuration (ui/ directory) - Add Suite app documentation with flow diagrams (SVG) - App launcher, chat flow, drive flow, tasks flow - Individual app docs: chat, drive, tasks, mail, etc. - Add HTML templates for Suite apps - Base template with header and app launcher - Auth login page - Chat, Drive, Mail, Meet, Tasks templates - Partial templates for messages, sessions, notifications - Add Extensions type to AppState for type-erased storage - Add mTLS module for service-to-service authentication - Update web handlers to use new template paths (suite/) - Fix auth module to avoid axum-extra TypedHeader dependency
2025-11-30 21:00:48 -03:00
<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>
Reference in a new issue Copy permalink