@inkeep/agents-ui 0.14.28 → 0.15.0

package/dist/styled/inkeep.css.cjs

@@ -505,6 +505,16 @@ video {
 .container {
   width: 100%;
 }
+@media (min-width: 500px) {
+
+  .\\!container {
+    max-width: 500px !important;
+  }
+
+  .container {
+    max-width: 500px;
+  }
+}
 @media (min-width: 640px) {
 
   .\\!container {
@@ -597,6 +607,9 @@ video {
 .left-\\[unset\\] {
   left: unset;
 }
+.right-0 {
+  right: 0px;
+}
 .right-1 {
   right: 0.25rem;
 }
@@ -722,20 +735,14 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .ml-1 {
   margin-left: 0.25rem;
 }
-.ml-1\\.5 {
-  margin-left: 0.375rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
-.ml-4 {
-  margin-left: 1rem;
+.ml-3 {
+  margin-left: 0.75rem;
 }
 .ml-auto {
   margin-left: auto;
@@ -821,14 +828,14 @@ video {
 .hidden {
   display: none;
 }
-.size-10 {
-  width: 2.5rem;
-  height: 2.5rem;
-}
 .size-4 {
   width: 1rem;
   height: 1rem;
 }
+.size-9 {
+  width: 2.25rem;
+  height: 2.25rem;
+}
 .h-0 {
   height: 0px;
 }
@@ -838,9 +845,6 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-20 {
   height: 5rem;
 }
@@ -862,6 +866,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-9 {
+  height: 2.25rem;
+}
 .h-\\[24px\\] {
   height: 24px;
 }
@@ -919,9 +926,6 @@ video {
 .min-h-20 {
   min-height: 5rem;
 }
-.min-h-8 {
-  min-height: 2rem;
-}
 .min-h-9 {
   min-height: 2.25rem;
 }
@@ -995,9 +999,6 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
-.min-w-10 {
-  min-width: 2.5rem;
-}
 .min-w-5 {
   min-width: 1.25rem;
 }
@@ -1007,6 +1008,9 @@ video {
 .min-w-8 {
   min-width: 2rem;
 }
+.min-w-9 {
+  min-width: 2.25rem;
+}
 .min-w-\\[8rem\\] {
   min-width: 8rem;
 }
@@ -1077,10 +1081,6 @@ video {
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.rotate-\\[-30deg\\] {
-  --tw-rotate: -30deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1274,8 +1274,8 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-\\[1rem_0\\.5rem\\] {
-  gap: 1rem 0.5rem;
+.gap-\\[\\.75rem_0\\.5rem\\] {
+  gap: .75rem 0.5rem;
 }
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
@@ -1302,6 +1302,11 @@ video {
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
 .self-start {
   align-self: flex-start;
 }
@@ -1349,6 +1354,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
 .rounded-\\[0_0_6px_6px\\] {
   border-radius: 0 0 6px 6px;
 }
@@ -1370,9 +1378,15 @@ video {
 .rounded-md {
   border-radius: 0.375rem;
 }
+.rounded-none {
+  border-radius: 0px;
+}
 .rounded-sm {
   border-radius: 0.125rem;
 }
+.rounded-br-sm {
+  border-bottom-right-radius: 0.125rem;
+}
 .border {
   border-width: 1px;
 }
@@ -1442,9 +1456,6 @@ video {
 .bg-inherit {
   background-color: inherit;
 }
-.bg-inkeep-primary-lighter {
-  background-color: var(--ikp-color-inkeep-primary-lighter);
-}
 .bg-inkeep-primary-medium {
   background-color: var(--ikp-color-inkeep-primary-medium);
 }
@@ -1490,9 +1501,6 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
-.p-4 {
-  padding: 1rem;
-}
 .p-8 {
   padding: 2rem;
 }
@@ -1657,9 +1665,6 @@ video {
 .text-1xs {
   font-size: var(--ikp-font-size-1xs);
 }
-.text-2sm {
-  font-size: var(--ikp-font-size-2sm);
-}
 .text-2xs {
   font-size: var(--ikp-font-size-2xs);
 }
@@ -1935,6 +1940,12 @@ video {
 .\\[--ask-ai-trigger-height\\:0px\\] {
   --ask-ai-trigger-height: 0px;
 }
+.\\[--chat-bubble-bottom\\:84px\\] {
+  --chat-bubble-bottom: 84px;
+}
+.\\[--chat-bubble-margin\\:theme\\(spacing\\.5\\)\\] {
+  --chat-bubble-margin: 1.25rem;
+}
 .\\[--end-color\\:theme\\(colors\\.gray\\.300\\)\\] {
   --end-color: var(--ikp-color-gray-300);
 }
@@ -2021,10 +2032,26 @@ video {
   font-size: var(--ikp-font-size-md);
   line-height: 1.5;
   color: var(--ikp-color-gray-800);
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--ikp-color-gray-300) transparent;
+  -webkit-scrollbar-track {
+    background: transparent;
+  }
+  -webkit-scrollbar-thumb {
+    background-color: var(--ikp-color-gray-300);
+    border-radius: 12px;
+  }
 }
 
 [data-theme='dark'] :where(.inkeep-widget-vars) {
   color: var(--ikp-color-white-alpha-950);
+
+  scrollbar-color: var(--ikp-color-white-alpha-200) transparent;
+
+  -webkit-scrollbar-thumb {
+    background-color: var(--ikp-color-white-alpha-200);
+  }
 }
 
 :where(.inkeep-widget-vars) *,
@@ -2399,6 +2426,12 @@ slot {
   --tw-ring-offset-width: 2px;
 }
 
+.active\\:scale-90:active {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .active\\:bg-gray-200:active {
   background-color: var(--ikp-color-gray-200);
 }
@@ -2415,6 +2448,16 @@ slot {
   background-color: var(--ikp-color-gray-900);
 }
 
+.active\\:transition-transform:active {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.active\\:duration-100:active {
+  transition-duration: 100ms;
+}
+
 .disabled\\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2491,8 +2534,8 @@ slot {
   margin-left: 0.25rem;
 }
 
-.data-\\[role\\=user\\]\\:ml-0[data-role="user"] {
-  margin-left: 0px;
+.data-\\[role\\=user\\]\\:mb-0[data-role="user"] {
+  margin-bottom: 0px;
 }
 
 .data-\\[role\\=user\\]\\:block[data-role="user"] {
@@ -2623,6 +2666,23 @@ slot {
   animation: fade-in 0.15s ease-out;
 }
 
+@keyframes chat-bubble-in {
+
+  0% {
+    opacity: 0;
+    transform: translateY(16px) scale(0.95);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+}
+
+.data-\\[state\\=open\\]\\:animate-chat-bubble-in[data-state="open"] {
+  animation: chat-bubble-in 300ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+}
+
 @keyframes fade-in {
 
   0% {
@@ -2650,7 +2710,7 @@ slot {
 }
 
 .data-\\[state\\=open\\]\\:data-\\[position\\=left\\]\\:animate-sidebar-in-left[data-position="left"][data-state="open"] {
-  animation: slide-in-left 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+  animation: slide-in-left 300ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
 }
 
 @keyframes slide-in-right {
@@ -2665,13 +2725,17 @@ slot {
 }
 
 .data-\\[state\\=open\\]\\:data-\\[position\\=right\\]\\:animate-sidebar-in-right[data-position="right"][data-state="open"] {
-  animation: slide-in-right 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+  animation: slide-in-right 300ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
 }
 
 .data-\\[input-type\\=checkbox\\]\\:flex-row[data-input-type="checkbox"] {
   flex-direction: row;
 }
 
+.data-\\[role\\=user\\]\\:items-end[data-role="user"] {
+  align-items: flex-end;
+}
+
 .data-\\[input-type\\=checkbox\\]\\:items-center[data-input-type="checkbox"] {
   align-items: center;
 }
@@ -2713,8 +2777,8 @@ slot {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.data-\\[role\\=user\\]\\:bg-gray-50[data-role="user"] {
-  background-color: var(--ikp-color-gray-50);
+.data-\\[role\\=user\\]\\:bg-gray-100[data-role="user"] {
+  background-color: var(--ikp-color-gray-100);
 }
 
 .data-\\[state\\=active\\]\\:bg-inkeep-primary-light-subtle[data-state="active"] {
@@ -2729,6 +2793,21 @@ slot {
   background-color: var(--ikp-color-inkeep-primary-lighter);
 }
 
+.data-\\[open\\]\\:px-3[data-open] {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.data-\\[role\\=user\\]\\:px-4[data-role="user"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.data-\\[role\\=user\\]\\:py-2[data-role="user"] {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .data-\\[has-content\\]\\:pb-2[data-has-content] {
   padding-bottom: 0.5rem;
 }
@@ -2773,10 +2852,6 @@ slot {
   color: var(--ikp-color-inkeep-expanded-primary-700);
 }
 
-.data-\\[role\\=user\\]\\:text-gray-700[data-role="user"] {
-  color: var(--ikp-color-gray-700);
-}
-
 .data-\\[state\\=active\\]\\:text-inkeep-expanded-primary-900[data-state="active"] {
   color: var(--ikp-color-inkeep-expanded-primary-900);
 }
@@ -2965,18 +3040,10 @@ slot {
   margin-bottom: 0px;
 }
 
-[data-widget-md] .ikp-md\\:flex {
-  display: flex;
-}
-
 [data-widget-md] .ikp-md\\:hidden {
   display: none;
 }
 
-[data-widget-md] .ikp-md\\:h-12 {
-  height: 3rem;
-}
-
 [data-widget-md] .ikp-md\\:flex-row {
   flex-direction: row;
 }
@@ -2999,8 +3066,13 @@ slot {
   padding-bottom: 3.5rem;
 }
 
-[data-widget-md] .ikp-md\\:pb-14 {
-  padding-bottom: 3.5rem;
+[data-widget-md] .ikp-md\\:py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+[data-widget-md] .ikp-md\\:pb-12 {
+  padding-bottom: 3rem;
 }
 
 [data-widget-md] .ikp-md\\:pl-3 {
@@ -3015,12 +3087,6 @@ slot {
   padding-right: 1.5rem;
 }
 
-.hover\\:scale-110:hover:not(:disabled) {
-  --tw-scale-x: 1.1;
-  --tw-scale-y: 1.1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .hover\\:border-gray-300:hover:not(:disabled) {
   border-color: var(--ikp-color-gray-300);
 }
@@ -3241,10 +3307,6 @@ slot {
   background-color: var(--ikp-color-gray-dark-600);
 }
 
-.dark\\:bg-gray-dark-700:is([data-theme="dark"] *) {
-  background-color: var(--ikp-color-gray-dark-700);
-}
-
 .dark\\:bg-gray-dark-800:is([data-theme="dark"] *) {
   background-color: var(--ikp-color-gray-dark-800);
 }
@@ -3512,6 +3574,10 @@ slot {
   background-color: var(--ikp-color-inkeep-expanded-primary-300);
 }
 
+.data-\\[role\\=user\\]\\:dark\\:bg-white-alpha-100:is([data-theme="dark"] *)[data-role="user"] {
+  background-color: var(--ikp-color-white-alpha-100);
+}
+
 .dark\\:data-\\[active\\]\\:text-white-alpha-600[data-active]:is([data-theme="dark"] *) {
   color: var(--ikp-color-white-alpha-600);
 }
@@ -3528,10 +3594,6 @@ slot {
   color: var(--ikp-color-inkeep-expanded-primary-300);
 }
 
-.dark\\:data-\\[role\\=user\\]\\:text-white-alpha-700[data-role="user"]:is([data-theme="dark"] *) {
-  color: var(--ikp-color-white-alpha-700);
-}
-
 .dark\\:data-\\[state\\=active\\]\\:text-inkeep-expanded-primary-300[data-state="active"]:is([data-theme="dark"] *) {
   color: var(--ikp-color-inkeep-expanded-primary-300);
 }
@@ -3694,6 +3756,64 @@ slot {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+@media (min-width: 500px) {
+
+  .xs\\:bottom-\\[var\\(--chat-bubble-bottom\\)\\] {
+    bottom: var(--chat-bubble-bottom);
+  }
+
+  .xs\\:right-5 {
+    right: 1.25rem;
+  }
+
+  .xs\\:h-full {
+    height: 100%;
+  }
+
+  .xs\\:max-h-\\[min\\(650px\\2c calc\\(100\\%-var\\(--chat-bubble-bottom\\)-var\\(--chat-bubble-margin\\)\\)\\)\\] {
+    max-height: min(650px,calc(100% - var(--chat-bubble-bottom) - var(--chat-bubble-margin)));
+  }
+
+  .xs\\:w-\\[440px\\] {
+    width: 440px;
+  }
+
+  .xs\\:origin-bottom-right {
+    transform-origin: bottom right;
+  }
+
+  .xs\\:rounded-xl {
+    border-radius: 0.75rem;
+  }
+
+  .xs\\:shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  .xs\\:data-\\[role\\=user\\]\\:max-w-\\[75\\%\\][data-role="user"] {
+    max-width: 75%;
+  }
+
+  @keyframes chat-bubble-in-desktop {
+
+    0% {
+      opacity: 0;
+      transform: translateY(8px) scale(0.9);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0px) scale(1);
+    }
+  }
+
+  .xs\\:data-\\[state\\=open\\]\\:animate-chat-bubble-in-desktop[data-state="open"] {
+    animation: chat-bubble-in-desktop 300ms cubic-bezier(0.05, 0.7, 0.1, 1.0);
+  }
+}
+
 @media (min-width: 640px) {
 
   .sm\\:w-\\[420px\\] {
@@ -3736,10 +3856,6 @@ slot {
     font-size: var(--ikp-font-size-4xl);
   }
 
-  .md\\:text-sm {
-    font-size: var(--ikp-font-size-sm);
-  }
-
   .md\\:leading-5 {
     line-height: 1.25rem;
   }
@@ -3779,31 +3895,10 @@ slot {
   }
 }
 
-.\\[\\&\\:not\\(\\:last-child\\)\\]\\:after\\:absolute:not(:last-child)::after {
-  content: var(--tw-content);
-  position: absolute;
-}
-
-.\\[\\&\\:not\\(\\:last-child\\)\\]\\:after\\:inset-x-6:not(:last-child)::after {
-  content: var(--tw-content);
-  left: 1.5rem;
-  right: 1.5rem;
-}
-
-.\\[\\&\\:not\\(\\:last-child\\)\\]\\:after\\:bottom-0:not(:last-child)::after {
-  content: var(--tw-content);
-  bottom: 0px;
-}
-
-.\\[\\&\\:not\\(\\:last-child\\)\\]\\:after\\:border-b:not(:last-child)::after {
-  content: var(--tw-content);
-  border-bottom-width: 1px;
-}
-
-[data-widget-md] .ikp-md\\:\\[\\&\\:not\\(\\:last-child\\)\\]\\:after\\:inset-x-8:not(:last-child)::after {
-  content: var(--tw-content);
-  left: 2rem;
-  right: 2rem;
+.hover\\:\\[\\&\\:not\\(\\:active\\)\\]\\:scale-110:not(:active):hover:not(:disabled) {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .focus\\:\\[\\&\\:not\\(\\[data-invalid\\]\\)\\]\\:border-\\[--focus-border-color\\]:not([data-invalid]):focus {
@@ -3900,6 +3995,10 @@ slot {
   max-height: 100dvh;
 }
 
+.\\[\\&\\[data-role\\=user\\]\\>p\\]\\:mb-0[data-role=user]>p {
+  margin-bottom: 0px;
+}
+
 .\\[\\&_a\\]\\:inline a {
   display: inline;
 }
@@ -3962,6 +4061,26 @@ slot {
   width: 1rem;
 }
 
+[data-chat-bubble] .\\[\\[data-chat-bubble\\]_\\&\\]\\:h-full {
+  height: 100%;
+}
+
+[data-chat-bubble] .\\[\\[data-chat-bubble\\]_\\&\\]\\:max-h-\\[unset\\] {
+  max-height: unset;
+}
+
+[data-chat-bubble] .\\[\\[data-chat-bubble\\]_\\&\\]\\:w-full {
+  width: 100%;
+}
+
+[data-chat-bubble] .\\[\\[data-chat-bubble\\]_\\&\\]\\:overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+[data-chat-bubble] .\\[\\[data-chat-bubble\\]_\\&\\]\\:rounded-\\[inherit\\] {
+  border-radius: inherit;
+}
+
 [data-mobile] .\\[\\[data-mobile\\]_\\&\\]\\:h-\\[calc\\(100vh-var\\(--input-height\\)-var\\(--footer-height\\)-var\\(--ask-ai-trigger-height\\)\\)\\] {
   height: calc(100vh - var(--input-height) - var(--footer-height) - var(--ask-ai-trigger-height));
 }