llms-py 2.0.9__py3-none-any.whl → 3.0.10__py3-none-any.whl

llms/ui/modules/icons.mjs

@@ -0,0 +1,46 @@
+const ProviderIcon = {
+    template: `
+        <svg v-if="matches(['openrouter'])" xmlns="http://www.w3.org/2000/svg" fill="#71717A" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z"></path></svg>
+        <svg v-else-if="matches(['alibaba'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M9 2h3.5L14 4.5h5.13L20.5 7m1.5 7.5l-1.645 2.663h-2.477L15 22h-3.217M5 20l-1.5-2.5l1-3l-2.5-5L4 7"/><path d="m19.19 9.662l1.31-2.661H10l1-2l-2-3l-2.251 5H4l5 10H6l-1 3h5.5l1.252 2l5.65-9.935L18.94 14.5H22z"/><path d="M12 15.5L9 10h6z"/></g></svg>
+        <svg v-else-if="matches(['anthropic'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.765 5h-3.308l5.923 15h3.23zM7.226 5L1.38 20h3.308l1.307-3.154h6.154l1.23 3.077h3.309L10.688 5zm-.308 9.077l2-5.308l2.077 5.308z"/></svg>
+        <svg v-else-if="matches(['chutes'])" viewBox="0 0 62 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.01 39.6943C37.1263 41.1364 35.2525 41.4057 34.0442 40.2642L28.6738 35.1904C27.4656 34.049 27.4843 32.0273 28.7133 30.9115L34.1258 25.9979C40.1431 20.5352 48.069 18.406 55.6129 20.2255L59.6853 21.2078C59.8306 21.2428 59.9654 21.3165 60.0771 21.422C60.6663 21.9787 60.3364 23.0194 59.552 23.078L59.465 23.0845C52.0153 23.6409 45.1812 27.9913 40.9759 34.8542L38.01 39.6943Z" fill="currentColor"></path><path d="M15.296 36.5912C14.1726 37.8368 12.2763 37.7221 11.2913 36.349L0.547139 21.3709C-0.432786 20.0048 -0.0547272 18.0273 1.34794 17.1822L22.7709 4.27482C29.6029 0.158495 37.7319 -0.277291 44.8086 3.0934L60.3492 10.4956C60.5897 10.6101 60.7997 10.7872 60.9599 11.0106C61.8149 12.2025 60.8991 13.9056 59.5058 13.7148L50.2478 12.4467C42.8554 11.4342 35.4143 14.2848 30.1165 20.1587L15.296 36.5912Z" fill="url(#paint0_linear_10244_130)"></path><defs><linearGradient id="paint0_linear_10244_130" x1="33.8526" y1="0.173618" x2="25.5505" y2="41.4493" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor"></stop></linearGradient></defs></svg>
+        <svg v-else-if="matches(['github-models'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.001 2c-5.525 0-10 4.475-10 10a9.99 9.99 0 0 0 6.837 9.488c.5.087.688-.213.688-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.337 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.687c-.1-.25-.45-1.275.1-2.65c0 0 .837-.263 2.75 1.024a9.3 9.3 0 0 1 2.5-.337c.85 0 1.7.112 2.5.337c1.913-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.02 10.02 0 0 0 22 12c0-5.525-4.475-10-10-10"/></svg>
+        <svg v-else-if="matches(['github-copilot'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02S.939 18.492.078 16.997A.6.6 0 0 1 0 16.741v-2.869a1 1 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656c.167-.429.414-1.055.644-1.517a10 10 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368c.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98s4.767.957 6.166 2.093c.584.235 1.077.546 1.474.952c.85.869 1.132 2.037 1.132 3.368c0 .368-.014.733-.052 1.086c.23.462.477 1.088.644 1.517c1.258.364 2.233 1.721 2.605 2.656a.8.8 0 0 1 .053.22v2.869a.6.6 0 0 1-.078.256m-11.75-5.992h-.344a4 4 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492c-1.725 0-2.989-.359-3.782-1.259a2 2 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179s6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259c-1.59 0-2.738-.545-3.508-1.492a4 4 0 0 1-.355-.508m2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1s-1-.451-1-1v-2c0-.549.451-1 1-1m-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1s-1-.451-1-1v-2c0-.549.451-1 1-1m3.313-6.185c.136 1.057.403 1.913.878 2.497c.442.544 1.134.938 2.344.938c1.573 0 2.292-.337 2.657-.751c.384-.435.558-1.15.558-2.361c0-1.14-.243-1.847-.705-2.319c-.477-.488-1.319-.862-2.824-1.025c-1.487-.161-2.192.138-2.533.529c-.269.307-.437.808-.438 1.578v.021q0 .397.063.893m-1.626 0q.063-.496.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578c-.341-.391-1.046-.69-2.533-.529c-1.505.163-2.347.537-2.824 1.025c-.462.472-.705 1.179-.705 2.319c0 1.211.175 1.926.558 2.361c.365.414 1.084.751 2.657.751c1.21 0 1.902-.394 2.344-.938c.475-.584.742-1.44.878-2.497"/></svg>
+        <svg v-else-if="matches(['google'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M3 12a9 9 0 0 0 9-9a9 9 0 0 0 9 9a9 9 0 0 0-9 9a9 9 0 0 0-9-9Z"/></svg>
+        <svg v-else-if="matches(['groq'])" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>
+        <svg v-else-if="matches(['llama'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.125 42.5c-.68-2.589-.258-5.178.971-7.767c-2.259-2.467-2.127-6.929 0-9.376c-3.78-4.258-2.17-11.787 4.754-11.766c1.511-1.973 3.704-3.622 6.15-3.725" stroke-width="1"/><path fill="none" stroke="currentColor" d="M19.303 12.006c0-4.65-1.428-6.506-3.184-6.506s-2.315 5.607-1.699 8.823m14.277-2.317c0-4.65 1.428-6.506 3.184-6.506s2.315 5.607 1.699 8.823" stroke-width="1"/><ellipse cx="24" cy="26.987" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="4.892" ry="3.805" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M24 26.987v1.087m0-1.087l.917-.917m-.917.917l-.917-.917" stroke-width="1"/><circle cx="17.205" cy="21.008" r=".75" fill="currentColor"/><circle cx="30.795" cy="21.008" r=".75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M35.875 42.5c.68-2.589.258-5.178-.971-7.767c2.259-2.467 2.127-6.929 0-9.376c3.78-4.258 2.17-11.787-4.754-11.766c-1.511-1.973-3.704-3.622-6.15-3.725" stroke-width="1"/></svg>
+        <svg v-else-if="matches(['minimax'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" fill="none"><g transform="translate(0, 3.5)"><path d="M15.5119 2.71901C15.5119 2.07384 14.9885 1.55031 14.3461 1.55031C13.7038 1.55031 13.1803 2.07504 13.1803 2.71901V22.0895C13.1803 23.5886 11.9634 24.8085 10.4682 24.8085C8.97288 24.8085 7.75595 23.5886 7.75595 22.0895V9.66201C7.75595 9.01685 7.23254 8.49331 6.59017 8.49331C5.94781 8.49331 5.42439 9.01804 5.42439 9.66201V14.9295C5.42439 16.4285 4.20746 17.6485 2.71218 17.6485C1.2169 17.6485 0 16.4285 0 14.9295V13.0202C0 12.5921 0.346163 12.2451 0.773217 12.2451C1.20027 12.2451 1.54643 12.5921 1.54643 13.0202V14.9295C1.54643 15.5747 2.06982 16.0982 2.71218 16.0982C3.35455 16.0982 3.87796 15.5735 3.87796 14.9295V9.66201C3.87796 8.16298 5.09489 6.943 6.59017 6.943C8.08545 6.943 9.30238 8.16298 9.30238 9.66201V22.0895C9.30238 22.7347 9.8258 23.2582 10.4682 23.2582C11.1105 23.2582 11.6339 22.7335 11.6339 22.0895V14.4906V2.71901C11.6339 1.21998 12.8508 0 14.3461 0C15.8414 0 17.0583 1.21998 17.0583 2.71901V18.7588C17.0583 19.1869 16.7122 19.5339 16.2851 19.5339C15.8581 19.5339 15.5119 19.1869 15.5119 18.7588V2.71901ZM29.8592 6.943C28.364 6.943 27.147 8.16298 27.147 9.66201V20.0431C27.147 20.6883 26.6236 21.2118 25.9813 21.2118C25.3389 21.2118 24.8155 20.6871 24.8155 20.0431V2.71901C24.8155 1.21998 23.5985 0 22.1033 0C20.608 0 19.3911 1.21998 19.3911 2.71901V24.7096C19.3911 25.3547 18.8677 25.8783 18.2253 25.8783C17.5829 25.8783 17.0595 25.3535 17.0595 24.7096V21.987C17.0595 21.5589 16.7134 21.2118 16.2863 21.2118C15.8593 21.2118 15.5131 21.5589 15.5131 21.987V24.7096C15.5131 26.2086 16.73 27.4286 18.2253 27.4286C19.7206 27.4286 20.9375 26.2086 20.9375 24.7096V2.71901C20.9375 2.07384 21.4609 1.55031 22.1033 1.55031C22.7456 1.55031 23.269 2.07504 23.269 2.71901V20.0431C23.269 21.5422 24.486 22.7621 25.9813 22.7621C27.4765 22.7621 28.6935 21.5422 28.6935 20.0431V9.66201C28.6935 9.01685 29.2169 8.49331 29.8592 8.49331C30.5016 8.49331 31.025 9.01804 31.025 9.66201V18.7588C31.025 19.1869 31.3712 19.5339 31.7982 19.5339C32.2253 19.5339 32.5714 19.1869 32.5714 18.7588V9.66201C32.5714 8.16298 31.3545 6.943 29.8592 6.943Z" fill="#9CA3AF"/></g></svg>
+        <svg v-else-if="matches(['mistral','codestral'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 233"><path d="M186.182 0h46.545v46.545h-46.545z"/><path fill="#f7d046" d="M209.455 0H256v46.545h-46.545z"/><path d="M0 0h46.545v46.545H0zm0 46.545h46.545V93.09H0zm0 46.546h46.545v46.545H0zm0 46.545h46.545v46.545H0zm0 46.546h46.545v46.545H0z"/><path fill="#f7d046" d="M23.273 0h46.545v46.545H23.273z"/><path fill="#f2a73b" d="M209.455 46.545H256V93.09h-46.545zm-186.182 0h46.545V93.09H23.273z"/><path d="M139.636 46.545h46.545V93.09h-46.545z"/><path fill="#f2a73b" d="M162.909 46.545h46.545V93.09h-46.545zm-93.091 0h46.545V93.09H69.818z"/><path fill="#ee792f" d="M116.364 93.091h46.545v46.545h-46.545zm46.545 0h46.545v46.545h-46.545zm-93.091 0h46.545v46.545H69.818z"/><path d="M93.091 139.636h46.545v46.545H93.091z"/><path fill="#eb5829" d="M116.364 139.636h46.545v46.545h-46.545z"/><path fill="#ee792f" d="M209.455 93.091H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"/><path d="M186.182 139.636h46.545v46.545h-46.545z"/><path fill="#eb5829" d="M209.455 139.636H256v46.545h-46.545z"/><path d="M186.182 186.182h46.545v46.545h-46.545z"/><path fill="#eb5829" d="M23.273 139.636h46.545v46.545H23.273z"/><path fill="#ea3326" d="M209.455 186.182H256v46.545h-46.545zm-186.182 0h46.545v46.545H23.273z"/></svg>
+        <svg v-else-if="matches(['openai'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.562 10.188c.25-.688.313-1.376.25-2.063c-.062-.687-.312-1.375-.625-2c-.562-.937-1.375-1.687-2.312-2.125c-1-.437-2.063-.562-3.125-.312c-.5-.5-1.063-.938-1.688-1.25S11.687 2 11 2a5.17 5.17 0 0 0-3 .938c-.875.624-1.5 1.5-1.813 2.5c-.75.187-1.375.5-2 .875c-.562.437-1 1-1.375 1.562c-.562.938-.75 2-.625 3.063a5.44 5.44 0 0 0 1.25 2.874a4.7 4.7 0 0 0-.25 2.063c.063.688.313 1.375.625 2c.563.938 1.375 1.688 2.313 2.125c1 .438 2.062.563 3.125.313c.5.5 1.062.937 1.687 1.25S12.312 22 13 22a5.17 5.17 0 0 0 3-.937c.875-.625 1.5-1.5 1.812-2.5a4.54 4.54 0 0 0 1.938-.875c.562-.438 1.062-.938 1.375-1.563c.562-.937.75-2 .625-3.062c-.125-1.063-.5-2.063-1.188-2.876m-7.5 10.5c-1 0-1.75-.313-2.437-.875c0 0 .062-.063.125-.063l4-2.312a.5.5 0 0 0 .25-.25a.57.57 0 0 0 .062-.313V11.25l1.688 1v4.625a3.685 3.685 0 0 1-3.688 3.813M5 17.25c-.438-.75-.625-1.625-.438-2.5c0 0 .063.063.125.063l4 2.312a.56.56 0 0 0 .313.063c.125 0 .25 0 .312-.063l4.875-2.812v1.937l-4.062 2.375A3.7 3.7 0 0 1 7.312 19c-1-.25-1.812-.875-2.312-1.75M3.937 8.563a3.8 3.8 0 0 1 1.938-1.626v4.751c0 .124 0 .25.062.312a.5.5 0 0 0 .25.25l4.875 2.813l-1.687 1l-4-2.313a3.7 3.7 0 0 1-1.75-2.25c-.25-.937-.188-2.062.312-2.937M17.75 11.75l-4.875-2.812l1.687-1l4 2.312c.625.375 1.125.875 1.438 1.5s.5 1.313.437 2.063a3.7 3.7 0 0 1-.75 1.937c-.437.563-1 1-1.687 1.25v-4.75c0-.125 0-.25-.063-.312c0 0-.062-.126-.187-.188m1.687-2.5s-.062-.062-.125-.062l-4-2.313c-.125-.062-.187-.062-.312-.062s-.25 0-.313.062L9.812 9.688V7.75l4.063-2.375c.625-.375 1.312-.5 2.062-.5c.688 0 1.375.25 2 .688c.563.437 1.063 1 1.313 1.625s.312 1.375.187 2.062m-10.5 3.5l-1.687-1V7.063c0-.688.187-1.438.562-2C8.187 4.438 8.75 4 9.375 3.688a3.37 3.37 0 0 1 2.062-.313c.688.063 1.375.375 1.938.813c0 0-.063.062-.125.062l-4 2.313a.5.5 0 0 0-.25.25c-.063.125-.063.187-.063.312zm.875-2L12 9.5l2.187 1.25v2.5L12 14.5l-2.188-1.25z"/></svg>
+        <svg v-else-if="matches(['xai'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd"><path d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"></path></svg>
+        <svg v-else-if="matches(['zai'])" xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><title>Z.ai</title><path d="M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z"></path></svg>
+        <svg v-else-if="matches(['deepseek'])" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"></path></svg>
+        <svg v-else-if="matches(['nvidia'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" transform="translate(0,4)" d="M9.01,4.79L9.01,3.35C9.14,3.34 9.28,3.33 9.43,3.33C13.38,3.2 15.97,6.72 15.97,6.72C15.97,6.72 13.17,10.6 10.17,10.6C9.77,10.6 9.38,10.54 9.01,10.41L9.01,6.03C10.54,6.23 10.85,6.9 11.77,8.44L13.83,6.71C13.83,6.71 12.32,4.75 9.8,4.75C9.52,4.75 9.26,4.76 9.01,4.79ZM9.01,0.025L9.01,2.18C9.14,2.17 9.28,2.16 9.43,2.15C14.91,1.97 18.5,6.65 18.5,6.65C18.5,6.65 14.38,11.64 10.11,11.64C9.71,11.64 9.35,11.61 9.01,11.54L9.01,12.88C9.3,12.91 9.6,12.93 9.93,12.93C13.9,12.93 16.78,10.91 19.57,8.5C20.03,8.87 21.91,9.77 22.3,10.17C19.66,12.38 13.48,14.17 9.99,14.17C9.66,14.17 9.33,14.15 9.01,14.12L9.01,16L24.12,16L24.12,0.025L9.01,0.025ZM9.01,10.41L9.01,11.54C5.32,10.89 4.3,7.06 4.3,7.06C4.3,7.06 6.07,5.1 9.01,4.79L9.01,6.03L9,6.03C7.46,5.85 6.25,7.29 6.25,7.29C6.25,7.29 6.93,9.71 9.01,10.41ZM2.47,6.9C2.47,6.9 4.65,3.68 9.01,3.35L9.01,2.18C4.18,2.57 0,6.65 0,6.65C0,6.65 2.37,13.5 9.01,14.11L9.01,12.88C4.13,12.26 2.47,6.9 2.47,6.9Z"/></svg>
+        <svg v-else-if="matches(['lmstudio'])" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path shape-rendering="geometricPrecision" d="M9.8132 15.9038L9 18.75L8.1868 15.9038C7.75968 14.4089 6.59112 13.2403 5.09619 12.8132L2.25 12L5.09619 11.1868C6.59113 10.7597 7.75968 9.59112 8.1868 8.09619L9 5.25L9.8132 8.09619C10.2403 9.59113 11.4089 10.7597 12.9038 11.1868L15.75 12L12.9038 12.8132C11.4089 13.2403 10.2403 14.4089 9.8132 15.9038Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M18.2589 8.71454L18 9.75L17.7411 8.71454C17.4388 7.50533 16.4947 6.56117 15.2855 6.25887L14.25 6L15.2855 5.74113C16.4947 5.43883 17.4388 4.49467 17.7411 3.28546L18 2.25L18.2589 3.28546C18.5612 4.49467 19.5053 5.43883 20.7145 5.74113L21.75 6L20.7145 6.25887C19.5053 6.56117 18.5612 7.50533 18.2589 8.71454Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M16.8942 20.5673L16.5 21.75L16.1058 20.5673C15.8818 19.8954 15.3546 19.3682 14.6827 19.1442L13.5 18.75L14.6827 18.3558C15.3546 18.1318 15.8818 17.6046 16.1058 16.9327L16.5 15.75L16.8942 16.9327C17.1182 17.6046 17.6454 18.1318 18.3173 18.3558L19.5 18.75L18.3173 19.1442C17.6454 19.3682 17.1182 19.8954 16.8942 20.5673Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+        <svg v-else-if="matches(['cerebras'])" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M22.9846 6.52999C19.4122 6.52999 15.9861 7.94913 13.46 10.4752C10.9339 13.0013 9.51474 16.4274 9.51474 19.9999C9.51474 23.5723 10.9339 26.9984 13.46 29.5245C15.9861 32.0506 19.4122 33.4698 22.9846 33.4698V35.4991C14.4238 35.4991 7.48535 28.5592 7.48535 19.9984C7.48535 11.4376 14.4224 4.49915 22.9832 4.49915V6.52854L22.9846 6.52999ZM29.868 11.8562C28.7978 10.9477 27.5586 10.2598 26.2216 9.83189C24.8846 9.40401 23.4761 9.24465 22.0773 9.36298C20.6785 9.48132 19.3169 9.875 18.0707 10.5214C16.8246 11.1678 15.7185 12.0542 14.8162 13.1295C13.9138 14.2049 13.2329 15.448 12.8126 16.7875C12.3923 18.1269 12.241 19.5362 12.3673 20.9343C12.4936 22.3324 12.895 23.6918 13.5485 24.9342C14.202 26.1767 15.0946 27.2777 16.1751 28.1739L14.87 29.7296C13.594 28.6594 12.5414 27.3482 11.7722 25.871C11.003 24.3939 10.5323 22.7797 10.3871 21.1206C10.2418 19.4615 10.4247 17.7901 10.9255 16.2017C11.4263 14.6134 12.235 13.1392 13.3055 11.8635C14.376 10.5875 15.6873 9.5348 17.1645 8.7656C18.6418 7.99639 20.2561 7.52572 21.9153 7.38045C23.5745 7.23517 25.2461 7.41815 26.8345 7.91893C28.423 8.41971 29.8973 9.22848 31.1732 10.2991L29.868 11.8562ZM26.6016 13.0788C24.7668 12.1311 22.6319 11.9464 20.6616 12.5649C18.6913 13.1834 17.045 14.5551 16.0809 16.3813C15.1169 18.2076 14.9132 20.3408 15.514 22.3165C16.1149 24.2923 17.4718 25.9508 19.2894 26.9311L18.3392 28.7273C16.0689 27.4824 14.3791 25.3948 13.6343 22.915C12.8896 20.4352 13.1498 17.762 14.3586 15.4723C15.5674 13.1826 17.628 11.46 20.0957 10.6762C22.5635 9.89232 25.2404 10.1101 27.5489 11.2826L26.6016 13.0788ZM22.9832 14.9865C21.6536 14.9865 20.3784 15.5147 19.4382 16.4549C18.498 17.3951 17.9698 18.6702 17.9698 19.9999C17.9698 21.3295 18.498 22.6047 19.4382 23.5449C20.3784 24.485 21.6536 25.0132 22.9832 25.0132V27.0441C21.1149 27.0441 19.3232 26.3019 18.0022 24.9809C16.6811 23.6598 15.939 21.8681 15.939 19.9999C15.939 18.1316 16.6811 16.3399 18.0022 15.0189C19.3232 13.6978 21.1149 12.9557 22.9832 12.9557V14.9865Z" fill="currentColor"/><path d="M24.8474 18.3138C24.6315 18.0812 24.3826 17.8816 24.1087 17.7213C23.8701 17.5796 23.5982 17.5036 23.3207 17.5011C22.9513 17.5011 22.621 17.5692 22.3299 17.7039C22.0485 17.8307 21.7956 18.0131 21.5865 18.2401C21.3774 18.4672 21.2164 18.7341 21.1131 19.025C21.0059 19.319 20.9538 19.6276 20.9538 19.939C20.9538 20.2548 21.0059 20.5619 21.1131 20.853C21.2172 21.1436 21.3786 21.4104 21.5876 21.6375C21.7966 21.8647 22.049 22.0476 22.3299 22.1756C22.6196 22.3103 22.9528 22.3783 23.3207 22.3783C23.6336 22.3783 23.9247 22.3117 24.1927 22.1828C24.465 22.0524 24.6997 21.8569 24.8808 21.615L26.225 23.0722C26.0222 23.275 25.7904 23.4503 25.5268 23.598C25.0392 23.8699 24.5086 24.0561 23.958 24.1484C23.7118 24.1861 23.4989 24.2064 23.3207 24.2064C22.7362 24.21 22.156 24.107 21.6085 23.9022C21.0909 23.7108 20.6174 23.4166 20.2165 23.0374C19.8178 22.6565 19.5004 22.1987 19.2836 21.6917C19.0481 21.1378 18.9306 20.5409 18.9389 19.939C18.9389 19.2959 19.0548 18.7121 19.2836 18.1863C19.5009 17.6793 19.8167 17.2216 20.215 16.8406C20.6177 16.4625 21.0914 16.1685 21.6085 15.9773C22.156 15.7725 22.7362 15.6694 23.3207 15.6731C23.8349 15.6731 24.352 15.7716 24.8735 15.9686C25.3964 16.1685 25.8658 16.4901 26.2409 16.9087L24.8474 18.3138Z" fill="currentColor"/></svg>
+        <svg v-else-if="matches(['huggingface'])" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.781 3.277c2.997 1.704 4.844 4.851 4.844 8.258 0 .995-.155 1.955-.443 2.857a1.332 1.332 0 011.125.4 1.41 1.41 0 01.2 1.723c.204.165.352.385.428.632l.017.062c.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.255.57-.893 1.018-2.128 1.5l-.202.078-.131.048c-.478.173-.89.295-1.061.345l-.086.024c-.89.243-1.808.375-2.732.394-1.32 0-2.3-.36-2.923-1.067a9.852 9.852 0 01-3.18.018C9.778 21.647 8.802 22 7.494 22a11.249 11.249 0 01-2.541-.343l-.221-.06-.273-.08a16.574 16.574 0 01-1.175-.405c-1.237-.483-1.875-.93-2.13-1.501-.186-.4-.151-.867.093-1.236a1.42 1.42 0 01-.2-1.166c.069-.273.226-.516.447-.694a1.41 1.41 0 01.2-1.722c.233-.248.557-.391.917-.407l.078-.001a9.385 9.385 0 01-.44-2.85c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0zM4.188 14.758c.125.687 2.357 2.35 2.14 2.707-.19.315-.796-.239-.948-.386l-.041-.04-.168-.147c-.561-.479-2.304-1.9-2.74-1.432-.43.46.119.859 1.055 1.42l.784.467.136.083c1.045.643 1.12.84.95 1.113-.188.295-3.07-2.1-3.34-1.083-.27 1.011 2.942 1.304 2.744 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725l.16.04.175.042c1.227.284 3.565.65 4.435-.604.673-.973.64-1.709-.248-2.61l-.057-.057c-.945-.928-1.495-2.288-1.495-2.288l-.017-.058-.025-.072c-.082-.22-.284-.639-.63-.584-.46.073-.798 1.21.12 1.933l.05.038c.977.721-.195 1.21-.573.534l-.058-.104-.143-.25c-.463-.799-1.282-2.111-1.739-2.397-.532-.332-.907-.148-.782.541zm14.842-.541c-.533.335-1.563 2.074-1.94 2.751a.613.613 0 01-.687.302.436.436 0 01-.176-.098.303.303 0 01-.049-.06l-.014-.028-.008-.02-.007-.019-.003-.013-.003-.017a.289.289 0 01-.004-.048c0-.12.071-.266.25-.427.026-.024.054-.047.084-.07l.047-.036c.022-.016.043-.032.063-.049.883-.71.573-1.81.131-1.917l-.031-.006-.056-.004a.368.368 0 00-.062.006l-.028.005-.042.014-.039.017-.028.015-.028.019-.036.027-.023.02c-.173.158-.273.428-.31.542l-.016.054s-.53 1.309-1.439 2.234l-.054.054c-.365.358-.596.69-.702 1.018-.143.437-.066.868.21 1.353.055.097.117.195.187.296.882 1.275 3.282.876 4.494.59l.286-.07.25-.074c.276-.084.736-.233 1.2-.42l.188-.077.065-.028.064-.028.124-.056.081-.038c.529-.252.964-.543.994-.827l.001-.036a.299.299 0 00-.037-.139c-.094-.176-.271-.212-.491-.168l-.045.01c-.044.01-.09.024-.136.04l-.097.035-.054.022c-.559.23-1.238.705-1.607.745h.006a.452.452 0 01-.05.003h-.024l-.024-.003-.023-.005c-.068-.016-.116-.06-.14-.142a.22.22 0 01-.005-.1c.062-.345.958-.595 1.713-.91l.066-.028c.528-.224.97-.483.985-.832v-.04a.47.47 0 00-.016-.098c-.048-.18-.175-.251-.36-.251-.785 0-2.55 1.36-2.92 1.36-.025 0-.048-.007-.058-.024a.6.6 0 01-.046-.088c-.1-.238.068-.462 1.06-1.066l.209-.126c.538-.32 1.01-.588 1.341-.831.29-.212.475-.406.503-.6l.003-.028c.008-.113-.038-.227-.147-.344a.266.266 0 00-.07-.054l-.034-.015-.013-.005a.403.403 0 00-.13-.02c-.162 0-.369.07-.595.18-.637.313-1.431.952-1.826 1.285l-.249.215-.033.033c-.08.078-.288.27-.493.386l-.071.037-.041.019a.535.535 0 01-.122.036h.005a.346.346 0 01-.031.003l.01-.001-.013.001c-.079.005-.145-.021-.19-.095a.113.113 0 01-.014-.065c.027-.465 2.034-1.991 2.152-2.642l.009-.048c.1-.65-.271-.817-.791-.493zM11.938 2.984c-4.798 0-8.688 3.829-8.688 8.55 0 .692.083 1.364.24 2.008l.008-.009c.252-.298.612-.46 1.017-.46.355.008.699.117.993.312.22.14.465.384.715.694.261-.372.69-.598 1.15-.605.852 0 1.367.728 1.562 1.383l.047.105.06.127c.192.396.595 1.139 1.143 1.68 1.06 1.04 1.324 2.115.8 3.266a8.865 8.865 0 002.024-.014c-.505-1.12-.26-2.17.74-3.186l.066-.066c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694a1.87 1.87 0 01.99-.312c.357 0 .682.126.925.36.14-.61.215-1.245.215-1.898 0-4.722-3.89-8.55-8.687-8.55zm1.857 8.926l.439-.212c.553-.264.89-.383.89.152 0 1.093-.771 3.208-3.155 3.262h-.184c-2.325-.052-3.116-2.06-3.156-3.175l-.001-.087c0-1.107 1.452.586 3.25.586.716 0 1.379-.272 1.917-.526zm4.017-3.143c.45 0 .813.358.813.8 0 .441-.364.8-.813.8a.806.806 0 01-.812-.8c0-.442.364-.8.812-.8zm-11.624 0c.448 0 .812.358.812.8 0 .441-.364.8-.812.8a.806.806 0 01-.813-.8c0-.442.364-.8.813-.8zm7.79-.841c.32-.384.846-.54 1.33-.394.483.146.83.564.878 1.06.048.495-.212.97-.659 1.203-.322.168-.447-.477-.767-.585l.002-.003c-.287-.098-.772.362-.925.079a1.215 1.215 0 01.14-1.36zm-4.323 0c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003c-.108.036-.194.134-.273.24l-.118.165c-.11.15-.22.262-.377.18a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394z"></path></svg>
+        <svg v-else-if="matches(['servicestack'])" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M96 216c81.7 10.2 273.7 102.3 304 232H8c99.5-8.1 184.5-137 88-232m32-152c32.3 35.6 47.7 83.9 46.4 133.6C257.3 231.3 381.7 321.3 408 448h96C463.3 231.9 230.8 79.5 128 64"/></svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="M12.019 16.225L8.35 14.13m3.669 2.096l3.65-2.129m-3.65 2.13L9.183 17.88l-5.196-3a5 5 0 0 1-.714-.498m5.077-.252L5.5 12.5v-6q0-.444.075-.867m2.775 8.496l-.018-4.225m5.97-6.652a5.001 5.001 0 0 0-8.727 2.38m8.727-2.38a5 5 0 0 0-.789.369l-5.196 3l.015 3.283m5.97-6.652a5.001 5.001 0 0 1 6.425 6.367M5.575 5.633a5.001 5.001 0 0 0-2.302 8.748m8.708-6.606l3.669 2.096m-3.67-2.096L8.33 9.904m3.65-2.129l2.836-1.654l5.196 3q.384.223.714.498m-5.077.252L18.5 11.5v6q0 .444-.075.867M15.65 9.871l.018 4.225m-5.97 6.652a5.001 5.001 0 0 0 8.727-2.38m-8.727 2.38a5 5 0 0 0 .789-.369l5.196-3l-.015-3.283m-5.97 6.652a5.001 5.001 0 0 1-6.425-6.367m15.152 3.986a5.001 5.001 0 0 0 2.302-8.748" stroke-width="1"/></svg>
+    `,
+    props: {
+        provider: String,
+    },
+    setup(props) {
+        function matches(providers) {
+            if (!props.provider) return false
+            const providerLower = props.provider.toLowerCase().replace(/[\s-.]+/g, '')
+            return providers.some(provider => providerLower.includes(provider))
+        }
+        return {
+            matches
+        }
+    }
+}
+
+export default {
+    install(ctx) {
+        ctx.components({
+            ProviderIcon,
+        })
+    }
+}

llms/ui/modules/layout.mjs

@@ -0,0 +1,271 @@
+import { computed, inject, ref, onMounted, onUnmounted } from "vue"
+import { toJsonObject } from "../utils.mjs"
+
+const Brand = {
+    template: `
+    <div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700 select-none">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <button type="button"
+                    @click="$ctx.to('/')"
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
+                    title="Go back home">
+                    {{ $state.title }}
+                </button>
+            </div>
+        </div>
+    </div>
+    `,
+}
+
+const Welcome = {
+    template: `
+        <div class="mb-2 flex justify-center">
+            <svg class="size-20 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.19c3.13 0 5.68 2.25 5.68 5s-2.55 5-5.68 5a5.7 5.7 0 0 1-1.89-.29l-.75-.26l-.56.56a14 14 0 0 1-2 1.55a.13.13 0 0 1-.07 0v-.06a6.58 6.58 0 0 0 .15-4.29a5.25 5.25 0 0 1-.55-2.16c0-2.77 2.55-5 5.68-5M8 .94c-3.83 0-6.93 2.81-6.93 6.27a6.4 6.4 0 0 0 .64 2.64a5.53 5.53 0 0 1-.18 3.48a1.32 1.32 0 0 0 2 1.5a15 15 0 0 0 2.16-1.71a6.8 6.8 0 0 0 2.31.36c3.83 0 6.93-2.81 6.93-6.27S11.83.94 8 .94"/><ellipse cx="5.2" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/><ellipse cx="10.8" cy="7.7" fill="currentColor" rx=".8" ry=".75"/></svg>
+        </div>
+        <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ $ai.welcome }}</h2>
+    `
+}
+
+const Avatar = {
+    template: `
+        <div v-if="$ai.auth?.profileUrl" class="relative" ref="avatarContainer">
+            <img
+                @click.stop="toggleMenu"
+                :src="$ai.auth.profileUrl"
+                :title="authTitle"
+                class="size-8 rounded-full cursor-pointer hover:ring-2 hover:ring-gray-300"
+            />
+            <div
+                v-if="showMenu"
+                @click.stop
+                class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700"
+            >
+                <div class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
+                    <div class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.displayName || $ai.auth.userName }}</div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis">{{ $ai.auth.email }}</div>
+                </div>
+                <button type="button"
+                    @click="handleLogout"
+                    class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center whitespace-nowrap"
+                >
+                    <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                    </svg>
+                    Sign Out
+                </button>
+            </div>
+        </div>
+    `,
+    setup() {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const showMenu = ref(false)
+        const avatarContainer = ref(null)
+
+        const authTitle = computed(() => {
+            if (!ai.auth) return ''
+            const { userId, userName, displayName, bearerToken, roles } = ai.auth
+            const name = userName || displayName
+            const prefix = roles && roles.includes('Admin') ? 'Admin' : 'Name'
+            const sb = [
+                name ? `${prefix}: ${name}` : '',
+                `API Key: ${bearerToken}`,
+                `${userId}`,
+            ]
+            return sb.filter(x => x).join('\n')
+        })
+
+        function toggleMenu() {
+            showMenu.value = !showMenu.value
+        }
+
+        async function handleLogout() {
+            showMenu.value = false
+            await ai.signOut()
+            // Reload the page to show sign-in screen
+            window.location.reload()
+        }
+
+        // Close menu when clicking outside
+        const handleClickOutside = (event) => {
+            if (showMenu.value && avatarContainer.value && !avatarContainer.value.contains(event.target)) {
+                showMenu.value = false
+            }
+        }
+
+        onMounted(() => {
+            document.addEventListener('click', handleClickOutside)
+        })
+
+        onUnmounted(() => {
+            document.removeEventListener('click', handleClickOutside)
+        })
+
+        return {
+            authTitle,
+            handleLogout,
+            showMenu,
+            toggleMenu,
+            avatarContainer,
+        }
+    }
+}
+
+const OAuthSignIn = {
+    template: `
+    <div class="min-h-full -mt-36 flex flex-col justify-center sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
+            <Welcome />
+        </div>
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <div v-if="errorMessage" class="mb-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 rounded-lg px-4 py-3">
+                <div class="flex items-start space-x-2">
+                    <div class="flex-1">
+                        <div class="text-base font-medium">{{ errorMessage }}</div>
+                    </div>
+                    <button type="button"
+                        @click="errorMessage = null"
+                        class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0"
+                    >
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="py-8 px-4 sm:px-10">
+                <div class="space-y-4">
+                    <button
+                        type="button"
+                        @click="signInWithGitHub"
+                        class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
+                    >
+                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+                        </svg>
+                        Sign in with GitHub
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const errorMessage = ref(null)
+
+        function signInWithGitHub() {
+            // Redirect to GitHub OAuth endpoint
+            window.location.href = '/auth/github'
+        }
+
+        return {
+            signInWithGitHub,
+            errorMessage,
+        }
+    }
+}
+
+const SignIn = {
+    template: `
+    <div class="min-h-full -mt-12 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div class="sm:mx-auto sm:w-full sm:max-w-md">
+            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-50">
+                Sign In
+            </h2>
+        </div>
+        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <ErrorSummary v-if="errorSummary" class="mb-3" :status="errorSummary" />
+            <div class="bg-white dark:bg-black py-8 px-4 shadow sm:rounded-lg sm:px-10">
+                <form @submit.prevent="submit">
+                    <div class="flex flex-1 flex-col justify-between">
+                        <div class="space-y-6">
+                            <fieldset class="grid grid-cols-12 gap-6">
+                                <div class="w-full col-span-12">
+                                    <TextInput id="apiKey" name="apiKey" label="API Key" v-model="apiKey" />
+                                </div>
+                            </fieldset>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <PrimaryButton class="w-full">Sign In</PrimaryButton>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>     
+    `,
+    emits: ['done'],
+    setup(props, { emit }) {
+        const ctx = inject('ctx')
+        const ai = ctx.ai
+        const apiKey = ref('')
+        const errorSummary = ref()
+        async function submit() {
+            const r = await ai.get('/auth', {
+                headers: {
+                    'Authorization': `Bearer ${apiKey.value}`
+                },
+            })
+            const txt = await r.text()
+            const json = toJsonObject(txt)
+            // console.log('json', json)
+            if (r.ok) {
+                json.apiKey = apiKey.value
+                emit('done', json)
+            } else {
+                errorSummary.value = json.responseStatus || {
+                    errorCode: "Unauthorized",
+                    message: 'Invalid API Key'
+                }
+            }
+        }
+
+        return {
+            apiKey,
+            submit,
+            errorSummary,
+        }
+    }
+}
+
+const ErrorViewer = {
+    template: `
+        <div v-if="$state.error" class="rounded-lg px-4 py-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 shadow-sm">
+            <div class="flex items-start space-x-2">
+                <div class="flex-1 min-w-0">
+                    <div class="flex justify-between items-start">
+                        <div class="text-base font-medium mb-1">{{ $state.error?.errorCode || 'Error' }}</div>
+                        <button type="button" @click="$ctx.clearError()" title="Clear Error"
+                            class="text-red-400 dark:text-red-300 hover:text-red-600 dark:hover:text-red-100 flex-shrink-0">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div v-if="$state.error?.message" class="text-base mb-1">{{ $state.error.message }}</div>
+                    <div v-if="$state.error?.stackTrace" class="mt-2 text-sm whitespace-pre-wrap break-words max-h-80 overflow-y-auto font-mono p-2 border border-red-200/70 dark:border-red-800/70">
+                        {{ $state.error.stackTrace }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+    setup() {
+
+    }
+}
+
+export default {
+    install(ctx) {
+        ctx.components({
+            Brand,
+            Welcome,
+            Avatar,
+            OAuthSignIn,
+            SignIn,
+            ErrorViewer,
+        })
+    }
+}