animation2.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500">
  <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;
      }

      .message7 {
        animation: messageAnim 10s linear infinite;
        animation-delay: 6s;
      }
      
      @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; }
      .schema-text { font-size: 11px; fill: #6b7280; }
    </style>
  </defs>

  <!-- Background -->
  <rect width="900" height="500" fill="#f0f0f0"/>
  
  <!-- Left Panel -->
  <rect x="20" y="20" width="410" height="460" rx="10" fill="white" stroke="#ddd"/>
  <text x="30" y="45" fill="#666" class="chat-text" font-size="14" font-weight="600">No reference context</text>
  
  <!-- Right Panel -->
  <rect x="470" y="20" width="410" height="460" rx="10" fill="white" stroke="#ddd"/>
  <text x="480" y="45" fill="#666" class="chat-text" font-size="14" font-weight="600">With reference context</text>

  <!-- Left Panel Content -->
  <g transform="translate(30, 60)">
    <!-- User Question -->
    <g class="message message1">
      <rect x="0" y="0" width="370" height="55" rx="20" fill="#e1e1e1"/>
      <text x="15" y="25" class="chat-text" font-size="14">
        <tspan x="15" y="25">Show me the names of the top 5 artists</tspan>
        <tspan x="15" y="45">by album count</tspan>
      </text>
    </g>

    <!-- Incorrect SQL Response -->
    <g class="message message2">
      <rect x="0" y="65" width="370" height="140" rx="5" fill="#fee2e2"/>
      <text x="10" y="85" class="code" font-size="12" fill="#991b1b">
        <tspan x="10" y="85">SELECT name,</tspan>
        <tspan x="10" y="105">  COUNT(album.albumid) as albums</tspan>
        <tspan x="10" y="125">FROM artists</tspan>
        <tspan x="10" y="145">JOIN album ON artists.artistid = album.artist_id</tspan>
        <tspan x="10" y="165">GROUP BY name</tspan>
        <tspan x="10" y="185">ORDER BY albums DESC LIMIT 5</tspan>
      </text>
    </g>

    <!-- Error Messages -->
    <g class="message message3">
      <rect x="0" y="215" width="370" height="80" rx="5" fill="#fee2e2"/>
      <text x="10" y="235" class="chat-text" font-size="12" fill="#991b1b">
        <tspan x="10" y="235">Error: Column 'name' not found</tspan>
        <tspan x="10" y="255">Error: Table 'album.albumid' not found</tspan>
        <tspan x="10" y="275">Error: Column 'artists.artistid' not found</tspan>
      </text>
    </g>
  </g>

  <!-- Right Panel Content -->
  <g transform="translate(480, 60)">
    <!-- Schema Context -->
    <g class="message message4">
      <rect x="0" y="0" width="370" height="90" rx="5" fill="#f3f4f6"/>
      <text class="schema-text">
        <tspan x="10" y="20">Schema Reference:</tspan>
        <tspan x="10" y="40">artists (id, artist_name, country)</tspan>
        <tspan x="10" y="60">albums (id, title, artist_id, release_date)</tspan>
        <tspan x="10" y="80">tracks (id, album_id, title, duration)</tspan>
      </text>
    </g>

    <!-- User Question -->
    <g class="message message5">
      <rect x="0" y="100" width="370" height="55" rx="20" fill="#e1e1e1"/>
      <text x="15" y="125" class="chat-text" font-size="14">
        <tspan x="15" y="125">Show me the names of the top 5 artists</tspan>
        <tspan x="15" y="145">by album count</tspan>
      </text>
    </g>

    <!-- Correct SQL Response -->
    <g class="message message6">
      <rect x="0" y="165" width="370" height="130" rx="5" fill="#ecfdf5"/>
      <text x="10" y="185" class="code" font-size="12" fill="#065f46">
        <tspan x="10" y="185">SELECT artist_name,</tspan>
        <tspan x="10" y="205">  COUNT(albums.id) as album_count</tspan>
        <tspan x="10" y="225">FROM artists</tspan>
        <tspan x="10" y="245">JOIN albums ON artists.id = albums.artist_id</tspan>
        <tspan x="10" y="265">GROUP BY artists.id, artist_name</tspan>
        <tspan x="10" y="285">ORDER BY album_count DESC LIMIT 5</tspan>
      </text>
    </g>

    <!-- Success Message -->
    <g class="message message7">
      <rect x="0" y="305" width="370" height="35" rx="5" fill="#ecfdf5"/>
      <text x="10" y="328" class="chat-text" font-size="12" fill="#065f46">Query executed successfully</text>
    </g>
  </g>
</svg>