update ui

Author: mythz

AiServer/wwwroot/css/app.css

@@ -975,10 +975,6 @@ select{
   z-index: 40;
 }
 
-.z-30 {
-  z-index: 30;
-}
-
 .col-span-12 {
   grid-column: span 12 / span 12;
 }
@@ -1129,6 +1125,10 @@ select{
   margin-inline-end: 0.25rem;
 }
 
+.me-2 {
+  margin-inline-end: 0.5rem;
+}
+
 .ml-0\.5 {
   margin-left: 0.125rem;
 }
@@ -1221,18 +1221,6 @@ select{
   margin-top: auto;
 }
 
-.me-5 {
-  margin-inline-end: 1.25rem;
-}
-
-.me-4 {
-  margin-inline-end: 1rem;
-}
-
-.me-2 {
-  margin-inline-end: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -2043,6 +2031,47 @@ select{
   border-color: rgb(250 204 21 / var(--tw-border-opacity));
 }
 
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+
+.border-gray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity));
+}
+
+.border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity));
+}
+
+.border-indigo-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(199 210 254 / var(--tw-border-opacity));
+}
+
+.border-indigo-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(165 180 252 / var(--tw-border-opacity));
+}
+
+.border-indigo-600\/50 {
+  border-color: rgb(79 70 229 / 0.5);
+}
+
+.border-indigo-600\/20 {
+  border-color: rgb(79 70 229 / 0.2);
+}
+
+.border-indigo-600\/40 {
+  border-color: rgb(79 70 229 / 0.4);
+}
+
+.border-indigo-600\/25 {
+  border-color: rgb(79 70 229 / 0.25);
+}
+
 .bg-\[\#f4f4f4\] {
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 244 / var(--tw-bg-opacity));
@@ -2220,10 +2249,6 @@ select{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-white\/0 {
-  background-color: rgb(255 255 255 / 0);
-}
-
 .bg-yellow-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
@@ -2980,6 +3005,18 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .\!outline-none {
   outline: 2px solid transparent !important;
   outline-offset: 2px !important;
@@ -2994,6 +3031,10 @@ select{
   outline-style: solid;
 }
 
+.outline-gray-900 {
+  outline-color: #111827;
+}
+
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4449,6 +4490,30 @@ select{
     width: 24rem;
   }
 
+  .md\:w-\[21em\] {
+    width: 21em;
+  }
+
+  .md\:w-\[21\.5em\] {
+    width: 21.5em;
+  }
+
+  .md\:w-\[21\.25em\] {
+    width: 21.25em;
+  }
+
+  .md\:w-\[830px\] {
+    width: 830px;
+  }
+
+  .md\:w-\[230px\] {
+    width: 230px;
+  }
+
+  .md\:w-\[330px\] {
+    width: 330px;
+  }
+
   .md\:max-w-3xl {
     max-width: 48rem;
   }

AiServer/wwwroot/mjs/components/Artifacts.mjs

@@ -1,17 +1,13 @@
-import { ref, computed, watch, inject, onMounted, onUnmounted, getCurrentInstance } from "vue"
-import { useClient, useAuth, useUtils, useFormatters, useMetadata, css } from "@servicestack/vue"
+import { ref, computed } from "vue"
 import { rightPart, combinePaths } from "@servicestack/client"
-const { transition } = useUtils()
 
 class Artifact {
     width = 0
     height = 0
     filePath = ''
 }
 
-export const AssetsBasePath = globalThis.AssetsBasePath = location.hostname === "localhost"
-    ? "https://localhost:5005"
-    : "https://localhost:5005"
+export const AssetsBasePath = globalThis.AssetsBasePath = globalThis.Server?.app.baseUrl ?? location.origin
 
 const store = {
     AssetsBasePath,