// Generated by orrery. Edit the diagram spec and re-render instead of editing this file.
import { type SVGProps, useId } from "react";

export default function RetrievalAugmentedGenerationOnAzure(props: SVGProps<SVGSVGElement>) {
  const uid = useId().replace(/[^A-Za-z0-9_-]/g, "");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="1033" height="1782" viewBox="0 0 1033 1782" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        Retrieval augmented generation on Azure
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Retrieval augmented generation on Azure. 14 components in 7 groups. Connections: Users to Microsoft Entra ID; Users to Application Gateway (HTTPS); Application Gateway to Private endpoint; Private endpoint to Key Vault (TLS certificate); Application Gateway to Container Apps (HTTPS); Container Apps to Private endpoint; Container Apps to Private endpoint; Private endpoint to Azure OpenAI (prompt with top results); Private endpoint to Azure AI Search (hybrid query); Azure AI Search to Azure OpenAI (vectorize query); Blob Storage to AI Search indexer (pull documents); AI Search indexer to Azure AI Search (index chunks); AI Search indexer to Azure OpenAI (embed chunks); Container Apps to Application Insights.
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="23.48" height="23.48" patternUnits="userSpaceOnUse">
          <path d="M0 0.59H23.48M0.59 0V23.48" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1.17" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="510.5" cy="881.25" r="624.79">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
        <symbol id={`${uid}-s1`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s1-sk_a`} cx="-36.63" cy="17.12" r="11.18" gradientTransform="matrix(.94 0 0 .94 41.88 -7.4)" gradientUnits="userSpaceOnUse">
              <stop offset=".27" stopColor="#ffd70f" />
              <stop offset=".49" stopColor="#ffcb12" />
              <stop offset=".88" stopColor="#feac19" />
              <stop offset="1" stopColor="#fea11b" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s1-sk_a)`} d="M13.56 7.19a2.07 2.07 0 0 0 0-2.93L10 .69a2.06 2.06 0 0 0-2.92 0L3.52 4.26a2.09 2.09 0 0 0 0 2.93l3 3a.6.6 0 0 1 .17.41v5.52a.7.7 0 0 0 .2.5l1.35 1.35a.45.45 0 0 0 .66 0l1.31-1.31.77-.77a.26.26 0 0 0 0-.38l-.55-.56a.29.29 0 0 1 0-.42l.55-.56a.26.26 0 0 0 0-.38L10.4 13a.28.28 0 0 1 0-.41L11 12a.26.26 0 0 0 0-.38l-.77-.78v-.28Zm-5-5.64a1.18 1.18 0 1 1-1.19 1.18 1.17 1.17 0 0 1 1.17-1.18Z" />
          <path fill="#ff9300" d="M7.62 16.21A.25.25 0 0 0 8 16v-4.45a.27.27 0 0 0-.11-.22.25.25 0 0 0-.39.22V16a.27.27 0 0 0 .12.21" opacity=".75" />
          <rect width="5.86" height=".69" x="5.69" y="5.45" fill="#ff9300" opacity=".75" rx=".32" />
          <rect width="5.86" height=".69" x="5.69" y="6.57" fill="#ff9300" opacity=".75" rx=".32" />
        </symbol>
        <filter id={`${uid}-f1`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#919394" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <filter id={`${uid}-f2`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feFlood floodColor="#60a5fa" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
        <symbol id={`${uid}-s2`} viewBox="0 0 18 18" overflow="visible">
          <path fill="#949494" d="M.5 15.08a.16.16 0 0 0 .08.14l1.16.65L3.7 17a.17.17 0 0 0 .23-.06l.66-1.12a.16.16 0 0 0-.06-.21l-2.3-1.3a.17.17 0 0 1-.08-.14V3.85a.16.16 0 0 1 .08-.14l2.3-1.3a.16.16 0 0 0 .06-.21l-.66-1.12A.17.17 0 0 0 3.7 1L1.78 2.11l-1.2.67a.16.16 0 0 0-.08.14z" />
          <path fill="#a3a3a3" d="m2.14 3.77.06-.06 2.3-1.3a.14.14 0 0 0 .06-.21L3.9 1.08A.15.15 0 0 0 3.68 1L1.75 2.11l-1.19.67s-.05 0-.06.06l.9.51ZM4.5 15.59l-2.3-1.3a.2.2 0 0 1-.07-.09l-1.62 1h.05l1.15.65 2 1.11a.15.15 0 0 0 .22-.06l.66-1.12a.14.14 0 0 0-.09-.19" />
          <path fill="#949494" d="M17.5 15.08a.16.16 0 0 1-.08.14l-1.16.65L14.3 17a.17.17 0 0 1-.23-.06l-.66-1.12a.16.16 0 0 1 .06-.21l2.3-1.3a.17.17 0 0 0 .08-.14V3.85a.16.16 0 0 0-.08-.14l-2.3-1.3a.16.16 0 0 1-.06-.21l.66-1.12A.17.17 0 0 1 14.3 1l1.92 1.09 1.2.67a.16.16 0 0 1 .08.14z" />
          <path fill="#a3a3a3" d="m15.86 3.77-.06-.06-2.3-1.3a.14.14 0 0 1-.06-.21l.66-1.12a.15.15 0 0 1 .22-.08l1.93 1.09 1.19.67.06.06-.9.51ZM13.5 15.59l2.3-1.3a.2.2 0 0 0 .07-.09l1.62 1-1.15.65-2 1.11a.15.15 0 0 1-.22-.06l-.66-1.12a.14.14 0 0 1 .04-.19" />
          <polygon fill="#32bedd" points="14.31 5.93 14.31 12.07 8.99 15.16 8.99 9.01 14.31 5.93" />
          <polygon fill="#9cebff" points="14.31 5.93 9 9.02 3.68 5.93 9 2.84 14.31 5.93" />
          <polygon fill="#50e6ff" points="8.99 9.02 8.99 15.16 3.68 12.07 3.68 5.93 8.99 9.02" />
          <polygon fill="#9cebff" points="3.68 12.07 8.99 9.01 8.99 15.16 3.68 12.07" />
          <polygon fill="#50e6ff" points="14.31 12.07 8.99 9.01 8.99 15.16 14.31 12.07" />
        </symbol>
        <symbol id={`${uid}-s3`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s3-zw_a`} x1="9.88" x2="11.52" y1="8.59" y2="10.23" gradientTransform="rotate(-.08 -285.464 -1454.08)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s3-zw_b`} x1="6.18" x2="7.81" y1="8.59" y2="10.23" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
            <linearGradient id={`${uid}-s3-zw_c`} x1="2.48" x2="4.11" y1="8.59" y2="10.23" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#86d633" />
              <stop offset="1" stopColor="#5e9624" />
            </linearGradient>
          </defs>
          <circle cx="12.74" cy="8.99" r="1.16" fill={`url(#${uid}-s3-zw_a)`} />
          <circle cx="9.04" cy="9" r="1.16" fill={`url(#${uid}-s3-zw_b)`} />
          <circle cx="5.34" cy="9" r="1.16" fill={`url(#${uid}-s3-zw_c)`} />
          <path fill="#50e6ff" d="m6.182 13.638-.664.665a.3.3 0 0 1-.424 0L.18 9.404a.6.6 0 0 1-.001-.848l.663-.666 5.34 5.324a.3.3 0 0 1 0 .425" />
          <path fill="#1490df" d="m5.418 3.708.666.664a.3.3 0 0 1 0 .424L.838 10.057l-.666-.663a.6.6 0 0 1-.001-.849L4.994 3.71a.3.3 0 0 1 .424 0" />
          <path fill="#50e6ff" d="m17.157 7.88.663.666a.6.6 0 0 1 0 .848l-4.915 4.9a.3.3 0 0 1-.424 0l-.664-.666a.3.3 0 0 1 0-.424z" />
          <path fill="#1490df" d="m17.818 9.387-.665.664-5.247-5.261a.3.3 0 0 1 0-.425l.674-.67a.3.3 0 0 1 .424 0l4.823 4.836a.6.6 0 0 1-.002.849Z" />
        </symbol>
        <symbol id={`${uid}-s4`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s4-wa_a`} x1="9" x2="9" y1="6.88" y2="20.45" gradientUnits="userSpaceOnUse">
              <stop offset=".22" stopColor="#32d4f5" />
              <stop offset="1" stopColor="#198ab3" />
            </linearGradient>
            <linearGradient id={`${uid}-s4-wa_b`} x1="8.61" x2="9.6" y1="-.4" y2="11.92" gradientUnits="userSpaceOnUse">
              <stop offset=".22" stopColor="#32d4f5" />
              <stop offset="1" stopColor="#198ab3" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s4-wa_a)`} d="M15.72 18a1.45 1.45 0 0 0 1.45-1.45.5.5 0 0 0 0-.17C16.59 11.81 14 8.09 9 8.09s-7.66 3.15-8.17 8.3A1.46 1.46 0 0 0 2.14 18z" />
          <path fill="#fff" d="M9 9.17a4.6 4.6 0 0 1-2.48-.73L9 14.86l2.44-6.38A4.53 4.53 0 0 1 9 9.17" opacity=".8" />
          <circle cx="9.01" cy="4.58" r="4.58" fill={`url(#${uid}-s4-wa_b)`} />
        </symbol>
        <filter id={`${uid}-f3`} x="-0.1" y="-0.1" width="1.2" height="1.2" colorInterpolationFilters="sRGB">
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.8929 3.0038 0.3032 0 -2.604" result="a" />
          <feFlood floodColor="#919394" floodOpacity="0.4" />
          <feComposite in2="SourceAlpha" operator="in" result="base" />
          <feFlood floodColor="#919394" />
          <feComposite in2="a" operator="in" result="hi" />
          <feMerge>
            <feMergeNode in="base" />
            <feMergeNode in="hi" />
          </feMerge>
        </filter>
        <symbol id={`${uid}-s5`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s5-w6_a`} x1="7.697" x2="14.082" y1="779.168" y2="786.631" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#225086" />
              <stop offset="1" stopColor="#0055c5" />
            </linearGradient>
            <linearGradient id={`${uid}-s5-w6_b`} x1="6.364" x2="6.364" y1="778.164" y2="794.412" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#6df" />
              <stop offset="1" stopColor="#0294e4" />
            </linearGradient>
            <linearGradient id={`${uid}-s5-w6_c`} x1="9.001" x2="9.001" y1="775.956" y2="794.845" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#44dbf9" />
              <stop offset="1" stopColor="#cbf8ff" />
            </linearGradient>
            <linearGradient id={`${uid}-s5-w6_d`} x1="13.5" x2="13.5" y1="774.721" y2="790.782" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#041642" />
              <stop offset="1" stopColor="#041642" stopOpacity=".25" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s5-w6_a)`} d="m17.647 9.906-7.5-8.461a1.55 1.55 0 0 0-2.294 0l-7.5 8.461c-.579.654-.428 1.641.323 2.111l7.499 4.688c.5.313 1.148.313 1.648 0l7.499-4.688c.751-.469.902-1.457.323-2.111Z" />
          <path fill={`url(#${uid}-s5-w6_b)`} d="M10.148 1.445a1.55 1.55 0 0 0-2.294 0l-7.5 8.461c-.579.654-.428 1.641.323 2.111l3.126 1.954c.388.242 1.033.511 1.715.511.621 0 1.197-.18 1.676-.487l.002-.001L9 12.866l-4.364-2.728L9.11 5.091a3.05 3.05 0 0 1 2.302-1.026c.472 0 .917.107 1.314.292l-2.579-2.909v-.002Z" />
          <polygon fill={`url(#${uid}-s5-w6_c)`} points="4.636 10.138 4.688 10.17 9.001 12.866 9.001 12.866 13.365 10.138 13.366 10.138 13.365 10.138 9.001 5.214 4.636 10.138" />
          <path fill={`url(#${uid}-s5-w6_d)`} fillOpacity=".5" d="M9.001 16.939c.287 0 .574-.078.824-.234l7.499-4.688c.751-.469.902-1.457.323-2.111l-7.499-8.461A1.53 1.53 0 0 0 9.001.938z" opacity=".5" />
          <path fill="#ffca00" d="M16.512 10.831a1.18 1.18 0 0 0 .01-1.67l-.01-.01-2.035-2.035a1.18 1.18 0 0 0-1.669 0l-2.035 2.035a1.2 1.2 0 0 0 0 1.679l1.7 1.7a.33.33 0 0 1 .092.234v3.155a.37.37 0 0 0 .122.285l.773.773a.253.253 0 0 0 .376 0l.743-.743.448-.448a.153.153 0 0 0 0-.214l-.316-.315a.163.163 0 0 1-.014-.23l.014-.014.316-.316a.164.164 0 0 0 0-.224l-.316-.316a.152.152 0 0 1 0-.234l.316-.326a.153.153 0 0 0 0-.214l-.448-.448v-.163l1.934-1.944Zm-2.87-3.226a.672.672 0 1 1-.672.672c0-.371.301-.672.672-.672" />
          <path fill="#ff9300" d="M13.133 16.042a.14.14 0 0 0 .201.003.14.14 0 0 0 .043-.115v-2.605a.16.16 0 0 0-.061-.132.144.144 0 0 0-.199.034.14.14 0 0 0-.025.098v2.555a.15.15 0 0 0 .041.163Z" opacity=".75" />
          <rect width="3.348" height=".397" x="12.014" y="9.834" fill="#ff9300" opacity=".75" rx=".183" ry=".183" />
          <rect width="3.348" height=".397" x="12.014" y="10.475" fill="#ff9300" opacity=".75" rx=".183" ry=".183" />
        </symbol>
        <symbol id={`${uid}-s6`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s6-10x_a`} cx="9" cy="9" r="8.5" gradientUnits="userSpaceOnUse">
              <stop offset=".18" stopColor="#5ea0ef" />
              <stop offset=".56" stopColor="#5c9fee" />
              <stop offset=".69" stopColor="#559ced" />
              <stop offset=".78" stopColor="#4a97e9" />
              <stop offset=".86" stopColor="#3990e4" />
              <stop offset=".93" stopColor="#2387de" />
              <stop offset=".99" stopColor="#087bd6" />
              <stop offset="1" stopColor="#0078d4" />
            </radialGradient>
            <radialGradient id={`${uid}-s6-10x_b`} cx="38.95" cy="182.07" r="9.88" gradientTransform="matrix(.94 0 0 .94 -28.71 -163.24)" gradientUnits="userSpaceOnUse">
              <stop offset=".27" stopColor="#ffd70f" />
              <stop offset=".49" stopColor="#ffcb12" />
              <stop offset=".88" stopColor="#feac19" />
              <stop offset="1" stopColor="#fea11b" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s6-10x_a)`} d="M9 .5A8.5 8.5 0 1 0 17.5 9 8.51 8.51 0 0 0 9 .5m0 15.84A7.34 7.34 0 1 1 16.34 9 7.34 7.34 0 0 1 9 16.34" />
          <circle cx="9" cy="9" r="7.34" fill="#fff" />
          <path fill={`url(#${uid}-s6-10x_b)`} d="M13.44 7.33a1.84 1.84 0 0 0 0-2.59l-3.15-3.16a1.83 1.83 0 0 0-2.58 0L4.56 4.74a1.84 1.84 0 0 0 0 2.59L7.18 10a.5.5 0 0 1 .15.36v4.88a.63.63 0 0 0 .18.44l1.2 1.2a.41.41 0 0 0 .58 0l1.16-1.16.68-.68a.25.25 0 0 0 0-.34l-.49-.49a.27.27 0 0 1 0-.37l.49-.49a.25.25 0 0 0 0-.34l-.49-.49a.27.27 0 0 1 0-.37l.49-.49a.25.25 0 0 0 0-.34l-.68-.69v-.25ZM9 2.35a1 1 0 0 1 0 2.07 1 1 0 1 1 0-2.07" />
          <path fill="#ff9300" d="M8.18 15.3a.23.23 0 0 0 .38-.17v-4a.24.24 0 0 0-.11-.2.22.22 0 0 0-.34.2v4a.28.28 0 0 0 .07.17" opacity=".75" />
          <rect width="5.17" height=".61" x="6.48" y="5.79" fill="#ff9300" opacity=".75" rx=".28" />
          <rect width="5.17" height=".61" x="6.48" y="6.78" fill="#ff9300" opacity=".75" rx=".28" />
        </symbol>
        <symbol id={`${uid}-s7`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s7-109_b`} x1="9" x2="9" y1="19.25" y2="-.46" gradientTransform="rotate(45 9.003 8.999)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5e9624" />
              <stop offset=".55" stopColor="#6dad2a" />
              <stop offset="1" stopColor="#76bc2d" />
            </linearGradient>
            <linearGradient id={`${uid}-s7-109_a`} x1="7.54" x2="7.53" y1="6.44" y2="5.18" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#ccc" />
              <stop offset=".12" stopColor="#d7d7d7" />
              <stop offset=".42" stopColor="#ebebeb" />
              <stop offset=".72" stopColor="#f8f8f8" />
              <stop offset="1" stopColor="#fcfcfc" />
            </linearGradient>
            <linearGradient id={`${uid}-s7-109_c`} x1="9.36" x2="9.36" y1="7.69" y2="6.57" href={`#${uid}-s7-109_a`} />
          </defs>
          <rect width="12.35" height="12.35" x="2.82" y="2.82" fill={`url(#${uid}-s7-109_b)`} rx=".57" transform="rotate(-45 8.999 9.003)" />
          <g fill="#fff">
            <path d="M10.89 10.51h2.84a.11.11 0 0 0 .1-.11V7.57a.1.1 0 0 0-.18-.07l-.78.78v.05a.1.1 0 0 1-.14 0L9.26 4.91a.1.1 0 0 0-.14 0l-.88.88a.11.11 0 0 0 0 .15l3.41 3.41a.11.11 0 0 1 0 .15l-.05.05-.78.78a.11.11 0 0 0 .07.18" />
            <path d="M6.92 10.51H4.08A.11.11 0 0 1 4 10.4V7.57a.1.1 0 0 1 .17-.07l.79.78v.05a.1.1 0 0 0 .14 0l3.45-3.42a.1.1 0 0 1 .14 0l.88.88a.11.11 0 0 1 0 .15L6.16 9.35a.11.11 0 0 0 0 .15v.05l.78.78a.11.11 0 0 1-.02.18" />
            <path d="m6.82 13.07 2 2a.1.1 0 0 0 .14 0l2-2a.1.1 0 0 0-.07-.17H9.72a.11.11 0 0 1-.1-.1V8a.1.1 0 0 0-.1-.11H8.28a.11.11 0 0 0-.11.11v4.8a.1.1 0 0 1-.1.1H6.89a.1.1 0 0 0-.07.17" />
          </g>
          <path fill="#0078d4" d="M10.65 7.78A2.71 2.71 0 0 1 7.33 3.5a2.71 2.71 0 0 1 3.29 4.3" />
          <circle cx="7.53" cy="5.55" r=".87" fill={`url(#${uid}-s7-109_a)`} />
          <path fill="#f2f2f2" d="m6.67 7 .19.3.14.2a6 6 0 0 1 .34-1.1.85.85 0 0 1-.45-.23 7 7 0 0 0-.22.83m.57-2.27A4 4 0 0 1 7 3.8a2.5 2.5 0 0 0-.34.46 3.5 3.5 0 0 0 .2.74 1 1 0 0 1 .38-.27m.93 1.41a.87.87 0 0 1-.48.26 5 5 0 0 0 .46.41 4 4 0 0 0 .65.39v-.07a.53.53 0 0 1 .2-.4 3.6 3.6 0 0 1-.83-.59m2.62 1.06a4 4 0 0 1-.87-.1.55.55 0 0 1-.16.39 3.8 3.8 0 0 0 1.08.08 3 3 0 0 0 .37-.42Z" opacity=".55" />
          <circle cx="9.36" cy="7.13" r=".56" fill={`url(#${uid}-s7-109_c)`} />
          <circle cx="10.64" cy="5.74" r=".6" fill="#f2f2f2" />
          <path fill="#f2f2f2" d="M9.21 4.42A4.3 4.3 0 0 1 11.09 4a2.2 2.2 0 0 0-.47-.45 4.5 4.5 0 0 0-1.49.35c-.1 0-.19.11-.29.16a6 6 0 0 1-.63-.93l-.34.13a5.4 5.4 0 0 0 .65 1 4 4 0 0 0-.67.55.87.87 0 0 1 .43.35 3.3 3.3 0 0 1 .61-.48 9 9 0 0 0 1.17 1 .57.57 0 0 1 .2-.32 8.4 8.4 0 0 1-1.05-.94m2.34 1.67h-.18l-.1-.06a.6.6 0 0 1-.2.3l.12.07.11.06.28.14a4 4 0 0 0 .09-.35Z" opacity=".55" />
          <circle cx="7.53" cy="5.55" r=".87" fill="#f2f2f2" />
          <circle cx="9.36" cy="7.13" r=".56" fill="#f2f2f2" />
        </symbol>
        <symbol id={`${uid}-s8`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s8-140_a`} x1="11.729" x2="11.729" y1="4.88" y2="13.099" gradientUnits="userSpaceOnUse">
              <stop offset=".001" stopColor="#773adc" />
              <stop offset=".528" stopColor="#6635bb" />
              <stop offset="1" stopColor="#552f99" />
            </linearGradient>
            <linearGradient id={`${uid}-s8-140_b`} x1="6.35" x2="6.35" y1="13.914" y2="4.198" gradientUnits="userSpaceOnUse">
              <stop offset=".001" stopColor="#773adc" />
              <stop offset=".307" stopColor="#793ddd" />
              <stop offset=".532" stopColor="#8046e1" />
              <stop offset=".731" stopColor="#8c56e7" />
              <stop offset=".915" stopColor="#9c6def" />
              <stop offset="1" stopColor="#a67af4" />
            </linearGradient>
          </defs>
          <path fill="#949494" d="M8.617 8.644H.639v-6.86A1.16 1.16 0 0 1 1.788.624h6.829ZM1.63 7.653h6V1.594H1.788a.16.16 0 0 0-.158.158Zm15.87.991H9.523V.624h6.828a1.16 1.16 0 0 1 1.149 1.16Zm-6.987-.991h6V1.784a.157.157 0 0 0-.123-.187h-5.877Zm-1.896 9.832H1.788a1.15 1.15 0 0 1-1.149-1.138V9.476h7.978ZM1.63 10.467v5.88a.16.16 0 0 0 .158.158h5.838v-6.038Zm14.721 7.018H9.523V9.476H17.5v6.871a1.15 1.15 0 0 1-1.149 1.138m-5.838-.991h5.838a.157.157 0 0 0 .158-.158v-5.869h-6Z" />
          <path fill={`url(#${uid}-s8-140_a)`} d="M14.6 6.294a.29.29 0 0 0-.2-.278L9.044 4.205A.1.1 0 0 0 9 4.2a.13.13 0 0 0-.133.133v9.445a.133.133 0 0 0 .133.133.1.1 0 0 0 .049-.01l5.365-2.145a.29.29 0 0 0 .184-.272Z" />
          <path fill={`url(#${uid}-s8-140_b)`} d="m8.966 4.2-5.293.966a.16.16 0 0 0-.13.158v7.306a.16.16 0 0 0 .126.157l5.293 1.123a.16.16 0 0 0 .191-.121V4.358A.16.16 0 0 0 9 4.2z" />
          <path fill="#b796f9" d="M6.52 5.656v6.8l1.842.3V5.335Zm-2.262.367v5.955l1.6.326v-6.55Z" opacity=".5" />
        </symbol>
        <symbol id={`${uid}-s9`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s9-130_a`} x1="9.084" x2="9.084" y1="790.967" y2="787.492" gradientTransform="matrix(1 0 0 -1 0 791.516)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#50e6ff" />
              <stop offset="1" stopColor="#32bedd" />
            </linearGradient>
            <linearGradient id={`${uid}-s9-130_b`} x1="9.065" x2="9.065" y1="13.843" y2="10.368" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#5e9624" />
              <stop offset=".183" stopColor="#629c25" />
              <stop offset=".435" stopColor="#6dae2a" />
              <stop offset=".726" stopColor="#7fcb30" />
              <stop offset=".822" stopColor="#86d633" />
            </linearGradient>
          </defs>
          <path fill="#b3b3b3" d="M7.85 13.342a1.738 1.738 0 1 0 2.436-2.479 1.7 1.7 0 0 0-.626-.389V3.009H8.548v7.444a1.73 1.73 0 0 0-.7 2.891Z" />
          <circle cx="9.084" cy="2.209" r="1.738" fill={`url(#${uid}-s9-130_a)`} />
          <path fill="#50e6ff" d="m6.195 16.778-.662.663a.3.3 0 0 1-.424 0L.216 12.564a.6.6 0 0 1 0-.848l.66-.664 5.318 5.302a.3.3 0 0 1 0 .425" />
          <path fill="#1490df" d="m5.435 6.886.664.662a.3.3 0 0 1 0 .424l-5.225 5.24-.664-.663a.6.6 0 0 1-.001-.848L5.01 6.886a.3.3 0 0 1 .425 0" />
          <path fill="#50e6ff" d="m17.122 11.052.661.664a.6.6 0 0 1 0 .848l-4.893 4.879a.3.3 0 0 1-.424-.001l-.662-.664a.3.3 0 0 1 0-.424z" />
          <path fill="#1490df" d="m17.788 12.547-.663.662-5.225-5.24a.3.3 0 0 1 0-.424l.664-.662a.3.3 0 0 1 .424 0L17.79 11.7a.6.6 0 0 1-.002.848" />
          <circle cx="9.065" cy="12.106" r="1.738" fill={`url(#${uid}-s9-130_b)`} />
        </symbol>
        <symbol id={`${uid}-s10`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s10-115_a`} x1="9" x2="9" y1="15.83" y2="5.79" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b3b3b3" />
              <stop offset=".26" stopColor="#c1c1c1" />
              <stop offset="1" stopColor="#e6e6e6" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s10-115_a)`} d="M.5 5.79h17v9.48a.57.57 0 0 1-.57.57H1.07a.57.57 0 0 1-.57-.57z" />
          <path fill="#37c2b1" d="M1.07 2.17h15.86a.57.57 0 0 1 .57.57v3.05H.5V2.73a.57.57 0 0 1 .57-.56" />
          <path fill="#fff" d="M2.81 6.89h12.37a.27.27 0 0 1 .26.27v1.4a.27.27 0 0 1-.26.27H2.81a.27.27 0 0 1-.26-.27v-1.4a.27.27 0 0 1 .26-.27" />
          <path fill="#37c2b1" d="M2.82 9.68h12.37a.27.27 0 0 1 .26.27v1.41a.27.27 0 0 1-.26.27H2.82a.27.27 0 0 1-.26-.27V10a.27.27 0 0 1 .26-.32" />
          <path fill="#258277" d="M2.82 12.5h12.37a.27.27 0 0 1 .26.27v1.41a.27.27 0 0 1-.26.27H2.82a.27.27 0 0 1-.26-.27v-1.41a.27.27 0 0 1 .26-.27" />
        </symbol>
        <symbol id={`${uid}-s11`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <linearGradient id={`${uid}-s11-oy_a`} x1="9" x2="9" y1=".36" y2="18.31" gradientUnits="userSpaceOnUse">
              <stop offset=".18" stopColor="#5ea0ef" />
              <stop offset="1" stopColor="#0078d4" />
            </linearGradient>
          </defs>
          <path fill={`url(#${uid}-s11-oy_a)`} d="M18 11.32a4.12 4.12 0 0 0-3.51-4 5.15 5.15 0 0 0-5.25-5 5.25 5.25 0 0 0-5 3.49A4.86 4.86 0 0 0 0 10.59a5 5 0 0 0 5.07 4.82h8.65a.8.8 0 0 0 .22 0A4.13 4.13 0 0 0 18 11.32" />
          <path fill="#f2f2f2" d="M12.33 6.59a3.07 3.07 0 0 0-5.61.85 3.16 3.16 0 0 0 .33 2.27l-2.34 2.37a.79.79 0 0 0 0 1.12.78.78 0 0 0 .56.23.76.76 0 0 0 .56-.23l2.33-2.36a3.1 3.1 0 0 0 .81.33 3.08 3.08 0 0 0 3.36-4.58m-.54 2.1a2.16 2.16 0 0 1-2.09 1.65 1.8 1.8 0 0 1-.51-.07 1.9 1.9 0 0 1-.7-.32 2.1 2.1 0 0 1-.56-.56 2.17 2.17 0 0 1-.31-1.73A2.14 2.14 0 0 1 9.7 6a2.3 2.3 0 0 1 .52.06 2.18 2.18 0 0 1 1.32 1 2.13 2.13 0 0 1 .25 1.63" />
          <ellipse cx="9.69" cy="8.18" fill="#83b9f9" rx="2.15" ry="2.16" />
        </symbol>
        <symbol id={`${uid}-s12`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s12-s3_a`} cx="9" cy="7.35" r="6.42" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#b77af4" />
              <stop offset=".21" stopColor="#b378f2" />
              <stop offset=".43" stopColor="#a672ed" />
              <stop offset=".65" stopColor="#9267e4" />
              <stop offset=".88" stopColor="#7559d8" />
              <stop offset="1" stopColor="#624fd0" />
            </radialGradient>
            <linearGradient id={`${uid}-s12-s3_b`} x1="9.02" x2="9.08" y1="3.91" y2="11.49" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#f2f2f2" />
              <stop offset=".23" stopColor="#f1f1f2" stopOpacity=".99" />
              <stop offset=".37" stopColor="#ededf1" stopOpacity=".95" />
              <stop offset=".48" stopColor="#e7e5f0" stopOpacity=".89" />
              <stop offset=".58" stopColor="#dedbee" stopOpacity=".81" />
              <stop offset=".67" stopColor="#d3ceeb" stopOpacity=".7" />
              <stop offset=".76" stopColor="#c4bee8" stopOpacity=".57" />
              <stop offset=".84" stopColor="#b4abe5" stopOpacity=".41" />
              <stop offset=".92" stopColor="#a095e1" stopOpacity=".22" />
              <stop offset=".99" stopColor="#8b7ddc" stopOpacity=".02" />
              <stop offset="1" stopColor="#897bdc" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path fill="#cecece" d="m10.23 17.39.81-.87V14.2H7v2.32l.81.87a.32.32 0 0 0 .19.11h2a.32.32 0 0 0 .23-.11" />
          <path fill={`url(#${uid}-s12-s3_a)`} d="M9 .5a5.89 5.89 0 0 0-5.91 6.57c.27 2.47 2.62 3.62 3.29 6.75a.49.49 0 0 0 .47.38h4.3a.49.49 0 0 0 .47-.38c.67-3.13 3-4.28 3.29-6.75A5.89 5.89 0 0 0 9 .5M7 14.2" />
          <path fill={`url(#${uid}-s12-s3_b)`} d="M11.46 3.79a1.4 1.4 0 0 0-1.35 1.44V6H8v-.77a1.41 1.41 0 0 0-1.41-1.44 1.4 1.4 0 0 0-1.35 1.44 1.41 1.41 0 0 0 1.35 1.45h.64v6a.36.36 0 0 0 .72 0v-6h2.16v6a.36.36 0 1 0 .72 0v-6h.63a1.4 1.4 0 0 0 1.35-1.45 1.4 1.4 0 0 0-1.35-1.44M7.23 6h-.68a.74.74 0 0 1-.68-.77.74.74 0 0 1 .68-.77.74.74 0 0 1 .68.77Zm4.28 0h-.68v-.81a.68.68 0 1 1 1.35 0 .73.73 0 0 1-.67.81" />
          <polygon fill="#999" points="6.96 15.8 11.04 15.01 11.04 14.56 6.96 15.36 6.96 15.8" />
          <polygon fill="#999" points="11.04 16.11 11.04 15.67 6.96 16.48 6.96 16.52 7.27 16.86 11.04 16.11" />
        </symbol>
        <symbol id={`${uid}-s13`} viewBox="0 0 18 18" overflow="visible">
          <defs>
            <radialGradient id={`${uid}-s13-ol_a`} cx="-67.981" cy="793.199" r=".45" gradientTransform="rotate(45 -33555.9 -11470.31)scale(25.091 -34.149)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#83b9f9" />
              <stop offset="1" stopColor="#0078d4" />
            </radialGradient>
          </defs>
          <path fill={`url(#${uid}-s13-ol_a)`} d="M0 2.7v12.6A2.7 2.7 0 0 0 2.7 18h12.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 15.3 0H2.7A2.7 2.7 0 0 0 0 2.7M10.8 0v3.6a7.2 7.2 0 0 0 7.2 7.2h-3.6a7.2 7.2 0 0 0-7.2 7.198V14.4A7.2 7.2 0 0 0 0 7.2h3.6A7.2 7.2 0 0 0 10.8 0" />
        </symbol>
      </defs>
      <rect width="1033" height="1782" fill={`url(#${uid}-bg)`} />
      <rect width="1033" height="1782" fill={`url(#${uid}-grid)`} />
      <rect width="1033" height="1782" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          RETRIEVAL AUGMENTED GENERATION ON AZURE
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          A chat app grounds Azure OpenAI answers in an Azure AI Search index that an indexer fills from Blob Storage
        </tspan>
      </text>
      <g id={`${uid}-g-sub`}>
        <rect x="28" y="363" width="977" height="1308" rx="2.35" fill="#ffffff" fillOpacity="0.03" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="28" y="363" width="977" height="1308" rx="2.35" fill="#60a5fa" fillOpacity="0.03" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-rg`}>
        <rect x="48" y="415" width="937" height="1236" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" strokeDasharray="3.52 3.52" />
        <g opacity="0">
          <rect x="48" y="415" width="937" height="1236" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.17" strokeDasharray="3.52 3.52" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-vnet`}>
        <rect x="68" y="472" width="514" height="815" rx="2.35" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="68" y="472" width="514" height="815" rx="2.35" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-ingestion`}>
        <rect x="711" y="467" width="196" height="412" rx="2.35" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="711" y="467" width="196" height="412" rx="2.35" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-agw`}>
        <rect x="88" y="524" width="260" height="175" rx="2.35" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="88" y="524" width="260" height="175" rx="2.35" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-aca`}>
        <rect x="396" y="858" width="166" height="175" rx="2.35" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="396" y="858" width="166" height="175" rx="2.35" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-g-snet-pe`}>
        <rect x="88" y="1107" width="461" height="160" rx="2.35" fill="none" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="88" y="1107" width="461" height="160" rx="2.35" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e1`}>
        <path d="M243 147.5 L282.41 147.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4.7 3.52" />
        <path d="M275.96 152.2 L283 147.5 L275.96 142.8" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M219 183 L219 575.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M214.3 568.96 L219 576 L223.7 568.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M219 183 L219 575.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.41" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.1626;0.2926;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.186;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M214.3 568.96 L219 576 L223.7 568.96" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2926;0.316;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M196.5 679 L196.5 1158.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M191.8 1151.96 L196.5 1159 L201.2 1151.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M197 1247 L197 1534.91" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M192.3 1528.46 L197 1535.5 L201.7 1528.46" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M240 679 L240 801 Q240 809 248 809 L471 809 Q479 809 479 817 L479 909.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M474.3 902.96 L479 910 L483.7 902.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M240 679 L240 801 Q240 809 248 809 L471 809 Q479 809 479 817 L479 909.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.41" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3238;0.4538;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3238;0.3472;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M474.3 902.96 L479 910 L483.7 902.96" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4538;0.4772;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M455 1013 L455 1050 Q455 1058 447 1058 L346 1058 Q338 1058 338 1066 L338 1158.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M333.3 1151.96 L338 1159 L342.7 1151.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M479 1013 L479 1158.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M474.3 1151.96 L479 1159 L483.7 1151.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M479 1013 L479 1158.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.41" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.485;0.5371;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.485;0.5085;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M474.3 1151.96 L479 1159 L483.7 1151.96" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5371;0.5605;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M338 1247 L338 1311 Q338 1317 332 1317 L332 1317 Q326 1317 326 1323 L326 1534.91" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M321.3 1528.46 L326 1535.5 L330.7 1528.46" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M479 1247 L479 1527.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M474.3 1520.96 L479 1528 L483.7 1520.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M479 1247 L479 1527.41" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.41" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5683;0.6656;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5683;0.5917;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M474.3 1520.96 L479 1528 L483.7 1520.96" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6656;0.689;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M553 1579.5 L801.41 1579.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M794.96 1584.2 L802 1579.5 L794.96 1574.8" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M553 1579.5 L801.41 1579.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.41" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6968;0.783;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6968;0.7202;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M794.96 1584.2 L802 1579.5 L794.96 1574.8" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.783;0.8064;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M786 607.59 L786 756" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M790.7 614.04 L786 607 L781.3 614.04" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M767 859 L767 1476 Q767 1484 759 1484 L524 1484 Q516 1484 516 1492 L516 1527.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M511.3 1520.96 L516 1528 L520.7 1520.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e13`}>
        <path d="M804 859 L804 1309 Q804 1317 812 1317 L859 1317 Q867 1317 867 1325 L867 1534.91" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M862.3 1528.46 L867 1535.5 L871.7 1528.46" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e14`}>
        <path d="M503 1013 L503 1050 Q503 1058 511 1058 L559 1058 Q567 1058 567 1066 L567 1309 Q567 1317 575 1317 L659 1317 Q667 1317 667 1325 L667 1360.41" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1.17 2.93" />
        <path d="M662.3 1353.96 L667 1361 L671.7 1353.96" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="224" y="263" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="249.76" y="276.52">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="224" y="263" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.17" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="249.76" y="276.52">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.186;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="202" y="1402" width="92" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="248.26" y="1415.52">
            TLS CERTIFICATE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="245" y="768" width="51" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="270.76" y="781.52">
            HTTPS
          </tspan>
        </text>
        <g opacity="0">
          <rect x="245" y="768" width="51" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.17" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="270.76" y="781.52">
              HTTPS
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3238;0.3472;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="331" y="1402" width="138" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="400.26" y="1415.52">
            PROMPT WITH TOP RESULTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="484" y="1402" width="82" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="525.26" y="1415.52">
            HYBRID QUERY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="484" y="1402" width="82" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.17" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="525.26" y="1415.52">
              HYBRID QUERY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5683;0.5917;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e10`}>
        <rect x="628.5" y="1555.5" width="98" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="677.76" y="1569.02">
            VECTORIZE QUERY
          </tspan>
        </text>
        <g opacity="0">
          <rect x="628.5" y="1555.5" width="98" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.17" />
          <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#60a5fa" textAnchor="middle">
            <tspan x="677.76" y="1569.02">
              VECTORIZE QUERY
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6968;0.7202;0.9;0.9234;1" dur="7.69s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e11`}>
        <rect x="791" y="671" width="96" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="839.26" y="684.52">
            PULL DOCUMENTS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e12`}>
        <rect x="772" y="1402" width="85" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="814.76" y="1415.52">
            INDEX CHUNKS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e13`}>
        <rect x="872" y="1402" width="93" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <text fontSize="8.5" fontWeight="700" letterSpacing="0.51" fill="#979899" textAnchor="middle">
          <tspan x="918.76" y="1415.52">
            EMBED CHUNKS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-sub`}>
        <use href={`#${uid}-s1`} x="41.3" y="373.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s1`} x="41.3" y="373.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <rect x="64" y="372" width="168.6" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#649adb">
          <tspan x="68" y="385.35">
            WORKLOAD SUBSCRIPTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-rg`}>
        <use href={`#${uid}-s2`} x="61.3" y="425.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s2`} x="61.3" y="425.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="88" y="437.35">
            RG-CHAT-PROD
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-vnet`}>
        <use href={`#${uid}-s3`} x="81.3" y="482.3" width="17.4" height="17.4" filter={`url(#${uid}-f1)`} />
        <g opacity="0">
          <use href={`#${uid}-s3`} x="81.3" y="482.3" width="17.4" height="17.4" filter={`url(#${uid}-f2)`} />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0455;0.0689;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="108" y="494.35">
            VNET-CHAT
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-ingestion`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="723" y="489.35">
            INGESTION
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-agw`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="100" y="546.36">
            SNET-APPGATEWAY
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-aca`}>
        <rect x="404" y="867" width="76.2" height="18.9" rx="3" fill="#0b1012" />
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="408" y="880.36">
            SNET-APPS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-gh-snet-pe`}>
        <text fontSize="11" fontWeight="700" letterSpacing="1.1" fill="#9d9fa0">
          <tspan x="100" y="1129.36">
            SNET-PE
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-users`}>
        <rect x="195" y="112" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="195" y="112" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s4`} x="204.12" y="121.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="219.42" y="178.18">
            USERS
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-entra`}>
        <rect x="317.5" y="96" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="317.5" y="96" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s5`} x="327.58" y="106.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="341.92" y="162.18">
            MICROSOFT ENTRA ID
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="341.5" y="179.7">
            Sign-in and managed
          </tspan>
          <tspan x="341.5" y="194.7">
            identities
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-kv`}>
        <rect x="173" y="1535.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="173" y="1535.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s6`} x="182.12" y="1544.62" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="197.42" y="1601.68">
            KEY VAULT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="197" y="1619.2">
            TLS certificate
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-agw`}>
        <rect x="194" y="576" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="194" y="576" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s7`} x="203.12" y="585.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="218.42" y="642.18">
            APPLICATION GATEWAY
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="218" y="659.7">
            WAF and TLS
          </tspan>
          <tspan x="218" y="674.7">
            termination
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-app`}>
        <rect x="455" y="910" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="455" y="910" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s8`} x="465.08" y="920.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="479.42" y="976.18">
            CONTAINER APPS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="479" y="993.7">
            Chat UI and
          </tspan>
          <tspan x="479" y="1008.7">
            orchestrator
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe-kv`}>
        <rect x="172.5" y="1159" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="172.5" y="1159" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="182.58" y="1169.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="196.92" y="1225.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="196.5" y="1242.7">
            Key Vault
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe-oai`}>
        <rect x="313.5" y="1159" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="313.5" y="1159" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="323.58" y="1169.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="337.92" y="1225.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="337.5" y="1242.7">
            Azure OpenAI
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-pe-search`}>
        <rect x="454.5" y="1159" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="454.5" y="1159" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s9`} x="464.58" y="1169.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="478.92" y="1225.18">
            PRIVATE ENDPOINT
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="478.5" y="1242.7">
            Azure AI Search
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-docs`}>
        <rect x="761.5" y="519" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="761.5" y="519" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s10`} x="770.62" y="528.12" width="29.76" height="29.76" filter={`url(#${uid}-f3)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="785.92" y="585.18">
            BLOB STORAGE
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="785.5" y="602.7">
            Source documents
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-indexer`}>
        <rect x="761.5" y="756" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="761.5" y="756" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="771.58" y="766.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="785.92" y="822.18">
            AI SEARCH INDEXER
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="785.5" y="839.7">
            Chunk and embed
          </tspan>
          <tspan x="785.5" y="854.7">
            skillset
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-insights`}>
        <rect x="642.5" y="1361" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="642.5" y="1361" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s12`} x="652.58" y="1371.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="9.75" fontWeight="700" letterSpacing="0.78" fill="#9d9fa0" textAnchor="middle">
          <tspan x="666.89" y="1426.91">
            APPLICATION INSIGHTS
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="666.51" y="1444.7">
            Log Analytics
          </tspan>
          <tspan x="666.51" y="1459.7">
            workspace
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-chat`}>
        <rect x="301.5" y="1535.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="301.5" y="1535.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="311.58" y="1545.58" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="325.93" y="1601.68">
            AZURE OPENAI
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="325.5" y="1619.2">
            Chat deployment
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-index`}>
        <rect x="473.5" y="1528" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="473.5" y="1528" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s11`} x="483.58" y="1538.08" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="497.93" y="1594.18">
            AZURE AI SEARCH
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="497.51" y="1611.7">
            Vector and keyword
          </tspan>
          <tspan x="497.51" y="1626.7">
            index
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-embed`}>
        <rect x="842.5" y="1535.5" width="48" height="48" rx="8.16" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1.17" />
        <g opacity="0">
          <rect x="842.5" y="1535.5" width="48" height="48" rx="8.16" fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1.17" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.091;0.1144;0.9166;0.94;1" dur="7.69s" repeatCount="indefinite" />
        </g>
        <use href={`#${uid}-s13`} x="852.58" y="1545.58" width="27.84" height="27.84" filter={`url(#${uid}-f1)`} />
        <text fontSize="10.5" fontWeight="700" letterSpacing="0.84" fill="#9d9fa0" textAnchor="middle">
          <tspan x="866.93" y="1601.68">
            AZURE OPENAI
          </tspan>
        </text>
        <text fontSize="10" fontWeight="400" fill="#979a9b" textAnchor="middle">
          <tspan x="866.51" y="1619.2">
            Embedding deployment
          </tspan>
        </text>
      </g>
      <g id={`${uid}-story`}>
        <circle r="2.35" fill="#60a5fa" opacity="0">
          <animateMotion path="M243 147.5 L282.41 147.5" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4417;0.4938;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4222;0.4417;0.4938;0.5133;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <path d="M219 183 L219 575.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.82" pathLength="1" strokeDasharray="0.08 2" strokeDashoffset="0.08" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.08;0.08;-0.92;-1;-1" keyTimes="0;0.1626;0.2926;0.3027;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1626;0.1639;0.3027;0.304;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <circle r="2.93" fill="#60a5fa" opacity="0">
          <animateMotion path="M219 183 L219 575.41" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1626;0.2926;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.143;0.1626;0.3238;0.3433;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <circle r="2.35" fill="#60a5fa" opacity="0">
          <animateMotion path="M196.5 679 L196.5 1158.41" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6279;0.7579;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6084;0.6279;0.7579;0.7774;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <path d="M240 679 L240 801 Q240 809 248 809 L471 809 Q479 809 479 817 L479 909.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.82" pathLength="1" strokeDasharray="0.07 2" strokeDashoffset="0.07" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.07;0.07;-0.93;-1;-1" keyTimes="0;0.3238;0.4538;0.4623;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3238;0.3251;0.4623;0.4636;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <circle r="2.93" fill="#60a5fa" opacity="0">
          <animateMotion path="M240 679 L240 801 Q240 809 248 809 L471 809 Q479 809 479 817 L479 909.41" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3238;0.4538;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3043;0.3238;0.485;0.5046;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <path d="M479 1013 L479 1158.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.82" pathLength="1" strokeDasharray="0.21 2" strokeDashoffset="0.21" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.21;0.21;-0.79;-1;-1" keyTimes="0;0.485;0.5371;0.548;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.485;0.4864;0.548;0.5493;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <circle r="2.93" fill="#60a5fa" opacity="0">
          <animateMotion path="M479 1013 L479 1158.41" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.485;0.5371;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4655;0.485;0.5683;0.5878;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <path d="M479 1247 L479 1527.41" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.82" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.5683;0.6656;0.6761;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5683;0.5696;0.6761;0.6774;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <circle r="2.93" fill="#60a5fa" opacity="0">
          <animateMotion path="M479 1247 L479 1527.41" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5683;0.6656;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5488;0.5683;0.6968;0.7163;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
        <path d="M553 1579.5 L801.41 1579.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.82" pathLength="1" strokeDasharray="0.12 2" strokeDashoffset="0.12" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.12;0.12;-0.88;-1;-1" keyTimes="0;0.6968;0.783;0.7936;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.69s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6968;0.6981;0.7936;0.7949;1" dur="7.69s" repeatCount="indefinite" />
        </path>
        <circle r="2.93" fill="#60a5fa" opacity="0">
          <animateMotion path="M553 1579.5 L801.41 1579.5" dur="7.69s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6968;0.783;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6773;0.6968;0.783;0.8025;1" dur="7.69s" repeatCount="indefinite" />
        </circle>
      </g>
      <g id={`${uid}-legend`}>
        <rect x="847" y="1683" width="158" height="71" rx="6" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1.17" />
        <path d="M857 1700.5 H885" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" />
        <text fontSize="9" fontWeight="700" letterSpacing="0.54" fill="#9d9fa0">
          <tspan x="893" y="1703.7">
            REQUESTS AND DATA
          </tspan>
        </text>
        <path d="M857 1718.5 H885" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeDasharray="4.7 3.52" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="893" y="1721.87">
            SIGN-IN
          </tspan>
        </text>
        <path d="M857 1736.5 H885" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1.17" strokeLinecap="round" strokeDasharray="1.17 2.93" />
        <text fontSize="9.5" fontWeight="700" letterSpacing="0.57" fill="#9d9fa0">
          <tspan x="893" y="1739.87">
            TELEMETRY
          </tspan>
        </text>
      </g>
    </svg>
  );
}
