animation5.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 280">
  <defs>
    <style>
      .message {
        opacity: 0;
      }
      
      .message1 { animation: messageAnim 10s linear infinite; animation-delay: 0s; }
      .message2 { animation: messageAnim 10s linear infinite; animation-delay: 2s; }
      .message3 { animation: messageAnim 10s linear infinite; animation-delay: 4s; }
      .message4 { animation: messageAnim 10s linear infinite; animation-delay: 0s; }
      .message5 { animation: messageAnim 10s linear infinite; animation-delay: 2s; }
      .message6 { animation: messageAnim 10s linear infinite; animation-delay: 4s; }
      
      @keyframes messageAnim {
        0%, 100% { 
          opacity: 0;
          transform: translateX(20px);
        }
        10%, 90% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      .chat-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
      .code { font-family: Consolas, Monaco, 'Courier New', monospace; }
    </style>
  </defs>

  <!-- Background -->
  <rect width="800" height="280" fill="#f0f0f0"/>
  
  <!-- Left Panel -->
  <rect x="20" y="20" width="360" height="240" rx="10" fill="white" stroke="#ddd"/>
  <text x="30" y="45" fill="#666" class="chat-text" font-size="14" font-weight="600">Without Role Based Access Control</text>
  
  <!-- Right Panel -->
  <rect x="420" y="20" width="360" height="240" rx="10" fill="white" stroke="#ddd"/>
  <text x="430" y="45" fill="#666" class="chat-text" font-size="14" font-weight="600">With Role Based Access Control</text>

  <!-- Left Panel Content -->
  <g transform="translate(30, 70)">
    <!-- User Question -->
    <g class="message message1">
      <rect x="0" y="0" width="320" height="40" rx="20" fill="#e1e1e1"/>
      <text x="295" y="25" class="chat-text" text-anchor="end" font-size="11" fill="#666">Sales Rep</text>
      <text x="15" y="25" class="chat-text" font-size="14">
        What is Bob's salary?
      </text>
    </g>

    <!-- SQL Query -->
    <g class="message message2">
      <rect x="0" y="50" width="320" height="70" rx="5" fill="#ecfdf5"/>
      <text x="10" y="70" class="code" font-size="11" fill="#065f46">
        <tspan x="10" y="70">SELECT salary</tspan>
        <tspan x="10" y="90">FROM employees</tspan>
        <tspan x="10" y="110">WHERE name = 'Bob'</tspan>
      </text>
    </g>

    <!-- Results -->
    <g class="message message3">
      <rect x="0" y="130" width="320" height="40" rx="5" fill="#ecfdf5"/>
      <text x="10" y="155" class="chat-text" font-size="13" fill="#065f46">
        Result: Bob's salary is $75,000
      </text>
    </g>
  </g>

  <!-- Right Panel Content -->
  <g transform="translate(430, 70)">
    <!-- User Question -->
    <g class="message message4">
      <rect x="0" y="0" width="320" height="40" rx="20" fill="#e1e1e1"/>
      <text x="295" y="25" class="chat-text" text-anchor="end" font-size="11" fill="#666">Sales Rep</text>
      <text x="15" y="25" class="chat-text" font-size="14">
        What is Bob's salary?
      </text>
    </g>

    <!-- SQL Query -->
    <g class="message message5">
      <rect x="0" y="50" width="320" height="70" rx="5" fill="#fee2e2"/>
      <text x="10" y="70" class="code" font-size="11" fill="#991b1b">
        <tspan x="10" y="70">SELECT salary</tspan>
        <tspan x="10" y="90">FROM employees</tspan>
        <tspan x="10" y="110">WHERE name = 'Bob'</tspan>
      </text>
    </g>

    <!-- Error Message -->
    <g class="message message6">
      <rect x="0" y="130" width="320" height="40" rx="5" fill="#fee2e2"/>
      <text x="10" y="155" class="chat-text" font-size="13" fill="#991b1b">
        Error: Access denied - Insufficient permissions
      </text>
    </g>
  </g>
</svg>