<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 880 680" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <defs>
    <!-- Arrow markers -->
    <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="#2563EB">
    </marker>

    <!-- Drop shadow for depth -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2">
      <feOffset dx="1" dy="1" result="offsetblur">
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2">
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic">
      </feMerge>
    </filter>
  </defs>



  <!-- Beautiful gradient definitions for depth -->
  

  <!-- White background with subtle border -->
  <rect x="0" y="0" width="880" height="680" fill="#F9FAFB" stroke="#9CA3AF" stroke-width="2" rx="8">

  <!-- Content container with proper margins -->
  <g transform="translate(40, 40)">
  

  <!-- Title -->
  <text x="400" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Session Manager Architecture</text>

  <!-- User Input -->
  <rect x="50" y="60" width="150" height="50" fill="none" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="125" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">User Input</text>

  <!-- Bot Response -->
  <rect x="600" y="60" width="150" height="50" fill="none" stroke="#059669" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="675" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Bot Response</text>

  <!-- Arrows down from User Input and up to Bot Response -->
  <line x1="125" y1="110" x2="125" y2="150" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">
  <line x1="675" y1="150" x2="675" y2="110" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- WebSocket/HTTP boxes -->
  <rect x="50" y="150" width="150" height="60" fill="none" stroke="#EA580C" stroke-width="2" rx="6" filter="url(#shadow)"/>
  <text x="125" y="175" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">WebSocket</text>
  <text x="125" y="195" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">/HTTP</text>

  <rect x="600" y="150" width="150" height="60" fill="none" stroke="#EA580C" stroke-width="2" rx="6" filter="url(#shadow)"/>
  <text x="675" y="175" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">WebSocket</text>
  <text x="675" y="195" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">/HTTP</text>

  <!-- Arrows to/from Session Manager -->
  <line x1="125" y1="210" x2="125" y2="250" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">
  <line x1="675" y1="250" x2="675" y2="210" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- Session Manager Box -->
  <rect x="100" y="250" width="600" height="130" fill="none" stroke="#7C3AED" stroke-width="2" rx="10" filter="url(#shadow)"/>
  <text x="400" y="280" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Session Manager</text>

  <!-- Session Manager Steps -->
  <g font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    <text x="150" y="310" filter="url(#textShadow)">1. Validate Token</text>
    <text x="150" y="330" filter="url(#textShadow)">2. Load Session</text>
    <text x="150" y="350" filter="url(#textShadow)">3. Update State</text>

    <text x="450" y="310" filter="url(#textShadow)">4. Execute BASIC</text>
    <text x="450" y="330" filter="url(#textShadow)">5. Generate Response</text>
    <text x="450" y="350" filter="url(#textShadow)">6. Save History</text>
  </g>

  <!-- Arrows down to databases -->
  <line x1="250" y1="380" x2="250" y2="420" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">
  <line x1="550" y1="380" x2="550" y2="420" stroke="#6B7280" stroke-width="2" marker-end="url(#arrow)">

  <!-- Database boxes -->
  <rect x="150" y="420" width="200" height="80" fill="none" stroke="#DC2626" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="250" y="450" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Valkey</text>
  <text x="250" y="470" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">(Cache)</text>

  <rect x="450" y="420" width="200" height="80" fill="none" stroke="#2563EB" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="550" y="450" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">PostgreSQL</text>
  <text x="550" y="470" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">(Persist)</text>

  <!-- Sync arrow between databases -->
  <path d="M 350 460 L 450 460" stroke="#6B7280" 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="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Sync Every</text>
  <text x="400" y="475" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Message</text>

  <!-- Process Flow Numbers -->
  <g font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
    <circle cx="125" cy="130" r="12" fill="none" stroke="#2563EB" stroke-width="2">
    <text x="125" y="134" text-anchor="middle" filter="url(#textShadow)">1</text>

    <circle cx="125" cy="230" r="12" fill="none" stroke="#2563EB" stroke-width="2">
    <text x="125" y="234" text-anchor="middle" filter="url(#textShadow)">2</text>

    <circle cx="400" cy="315" r="12" fill="none" stroke="#2563EB" stroke-width="2">
    <text x="400" y="319" text-anchor="middle" filter="url(#textShadow)">3</text>

    <circle cx="675" cy="230" r="12" fill="none" stroke="#2563EB" stroke-width="2">
    <text x="675" y="234" text-anchor="middle" filter="url(#textShadow)">4</text>

    <circle cx="675" cy="130" r="12" fill="none" stroke="#2563EB" stroke-width="2">
    <text x="675" y="134" text-anchor="middle" filter="url(#textShadow)">5</text>
  </g>

  <!-- Features box -->
  <g id="features" transform="translate(50, 520)">
    <rect x="0" y="0" width="700" height="60" fill="none" stroke="#2563EB" stroke-width="2" rx="5" stroke-dasharray="2,2" opacity="0.5" filter="url(#shadow)"/>
    <text x="350" y="20" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#4B5563" filter="url(#textShadow)">Key Features</text>

    <g font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563">
      <text x="50" y="45" filter="url(#textShadow)">• Real-time WebSocket support</text>
      <text x="250" y="45" filter="url(#textShadow)">• Automatic session persistence</text>
      <text x="450" y="45" filter="url(#textShadow)">• Redis-compatible caching</text>
      <text x="600" y="45" filter="url(#textShadow)">• ACID compliance</text>
    </g>
  </g>


  </g>

</svg>