@inkeep/agents-ui 0.14.27 → 0.15.0

package/dist/styled/inkeep.css.js

@@ -506,6 +506,16 @@ video {
 .container {
   width: 100%;
 }
+@media (min-width: 500px) {
+
+  .\\!container {
+    max-width: 500px !important;
+  }
+
+  .container {
+    max-width: 500px;
+  }
+}
 @media (min-width: 640px) {
 
   .\\!container {
@@ -598,6 +608,9 @@ video {
 .left-\\[unset\\] {
   left: unset;
 }
+.right-0 {
+  right: 0px;
+}
 .right-1 {
   right: 0.25rem;
 }
@@ -723,20 +736,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;
@@ -822,14 +829,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;
 }
@@ -839,9 +846,6 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-20 {
   height: 5rem;
 }
@@ -863,6 +867,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-9 {
+  height: 2.25rem;
+}
 .h-\\[24px\\] {
   height: 24px;
 }
@@ -920,9 +927,6 @@ video {
 .min-h-20 {
   min-height: 5rem;
 }
-.min-h-8 {
-  min-height: 2rem;
-}
 .min-h-9 {
   min-height: 2.25rem;
 }
@@ -996,9 +1000,6 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
-.min-w-10 {
-  min-width: 2.5rem;
-}
 .min-w-5 {
   min-width: 1.25rem;
 }
@@ -1008,6 +1009,9 @@ video {
 .min-w-8 {
   min-width: 2rem;
 }
+.min-w-9 {
+  min-width: 2.25rem;
+}
 .min-w-\\[8rem\\] {
   min-width: 8rem;
 }
@@ -1078,10 +1082,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));
 }
@@ -1275,8 +1275,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;
@@ -1303,6 +1303,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;
 }
@@ -1350,6 +1355,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
 .rounded-\\[0_0_6px_6px\\] {
   border-radius: 0 0 6px 6px;
 }
@@ -1371,9 +1379,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;
 }
@@ -1443,9 +1457,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);
 }
@@ -1491,9 +1502,6 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
-.p-4 {
-  padding: 1rem;
-}
 .p-8 {
   padding: 2rem;
 }
@@ -1658,9 +1666,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);
 }
@@ -1936,6 +1941,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);
 }
@@ -2022,10 +2033,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) *,
@@ -2400,6 +2427,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);
 }
@@ -2416,6 +2449,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;
 }
@@ -2492,8 +2535,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"] {
@@ -2624,6 +2667,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% {
@@ -2651,7 +2711,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 {
@@ -2666,13 +2726,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;
 }
@@ -2714,8 +2778,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"] {
@@ -2730,6 +2794,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;
 }
@@ -2774,10 +2853,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);
 }
@@ -2966,18 +3041,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;
 }
@@ -3000,8 +3067,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 {
@@ -3016,12 +3088,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);
 }
@@ -3242,10 +3308,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);
 }
@@ -3513,6 +3575,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);
 }
@@ -3529,10 +3595,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);
 }
@@ -3695,6 +3757,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\\] {
@@ -3737,10 +3857,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;
   }
@@ -3780,31 +3896,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 {
@@ -3901,6 +3996,10 @@ slot {
   max-height: 100dvh;
 }
 
+.\\[\\&\\[data-role\\=user\\]\\>p\\]\\:mb-0[data-role=user]>p {
+  margin-bottom: 0px;
+}
+
 .\\[\\&_a\\]\\:inline a {
   display: inline;
 }
@@ -3963,6 +4062,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));
 }

package/dist/types/config/open-settings.d.ts

@@ -0,0 +1,70 @@
+export interface BaseOpenSettings {
+    /**
+     * Controls whether the component is open.
+     */
+    isOpen?: boolean;
+    /**
+     * Handler called when the component opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether the component is open by default.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The shortcut key.
+     *
+     * The key to trigger the component when pressed with Cmd (Mac) / Ctrl (Windows).
+     *
+     * Set to `null` to disable the shortcut.
+     *
+     * @default null
+     */
+    shortcutKey?: string | null;
+    /**
+     * The trigger selector.
+     *
+     * The selector to trigger the component when clicked.
+     *
+     * @default undefined
+     */
+    triggerSelector?: string;
+}
+export interface OpenSettingsModal extends BaseOpenSettings {
+    /**
+     * The trigger selector.
+     *
+     * The selector to trigger the modal when clicked.
+     *
+     * @default '[data-inkeep-modal-trigger]'
+     */
+    triggerSelector?: string;
+}
+export interface OpenSettingsChatButton extends BaseOpenSettings {
+}
+export interface OpenSettingsSearchBar extends BaseOpenSettings {
+    /**
+     * The shortcut key.
+     *
+     * The key to trigger the searchbar when pressed with Cmd (Mac) / Ctrl (Windows).
+     *
+     * Set to `null` to disable the shortcut.
+     *
+     * @default 'k'
+     */
+    shortcutKey?: string | null;
+}
+export interface OpenSettingsSidebar extends BaseOpenSettings {
+    /**
+     * The trigger selector for the sidebar chat.
+     * @default '[data-inkeep-sidebar-chat-trigger]'
+     */
+    triggerSelector?: string;
+    /**
+     * Threshold factor for auto-closing when resizing.
+     * When dragging below (minWidth * autoCloseThreshold), the sidebar will auto-close.
+     * @default 0.7 (70% of minimum width)
+     */
+    autoCloseThreshold?: number;
+}