@c8y/style 1023.68.6 → 1023.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1023.68.6",
+  "version": "1023.70.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/components/data-input/_c8y-ai-chat.less

@@ -1,4 +1,5 @@
-
+@use '../../../variables/index'as *;
+@import "../../mixins/_tab-focus.less";
 /**
  * C8Y AI Chat - AI chat widget component
  *
@@ -15,7 +16,7 @@
  * - Z-index values: Stacking order
  */
 
-c8y-widget-ai-chat-section{
+c8y-widget-ai-chat-section {
   display: flex;
   max-height: calc(100vh - 400px);
   min-height: 400px;
@@ -23,18 +24,18 @@ c8y-widget-ai-chat-section{
   border: 1px solid var(--c8y-root-component-border-color);
   border-radius: @size-base;
   padding: 0;
-  .chat-input{
+
+  .chat-input {
     border-bottom-left-radius: @size-base;
     border-bottom-right-radius: @size-base;
   }
-
 }
 
-c8y-agent-chat{
+c8y-agent-chat {
   width: 100%;
 }
 
-.chat-input{
+.chat-input {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -44,12 +45,14 @@ c8y-agent-chat{
   border-top: 1px solid var(--c8y-root-component-border-color);
   margin-top: auto;
   position: sticky;
-  bottom:0;
-  .chat-input-group{
+  bottom: 0;
+
+  .chat-input-group {
     position: relative;
     width: 100%;
-    textarea{
-      border-radius: 20px!important;
+
+    textarea {
+      border-radius: 20px !important;
       min-height: @size-40;
       padding-top: @size-10;
       padding-right: @size-40;
@@ -57,31 +60,37 @@ c8y-agent-chat{
       padding-left: @size-16;
 
       &::-webkit-scrollbar {
-        width: unset; /* for vertical scrollbars */
-        height: unset; /* for horizontal scrollbars */
+        width: unset;
+        /* for vertical scrollbars */
+        height: unset;
+        /* for horizontal scrollbars */
       }
 
       &::-webkit-scrollbar-track {
         background: unset;
       }
+
       &::-webkit-scrollbar-thumb {
         width: unset;
         border-radius: unset;
         background: unset;
       }
+
       &:hover {
         &::-webkit-scrollbar-thumb {
           background: unset;
         }
       }
     }
-    .chat-input-group-btn{
+
+    .chat-input-group-btn {
       position: absolute;
       right: @size-4;
       bottom: @size-4;
-      .btn-dot{
-        margin: 0!important;
-        height: @form-control-height-base!important;
+
+      .btn-dot {
+        margin: 0 !important;
+        height: @form-control-height-base !important;
         border-radius: 50%;
       }
     }
@@ -90,13 +99,16 @@ c8y-agent-chat{
 
 .chat-message {
   line-height: 1.7;
-  .message-content{
+
+  .message-content {
     overflow-wrap: break-word;
     word-break: break-word;
     max-width: 100%;
     min-width: 0;
-    p{
+
+    p {
       margin-bottom: @size-8;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -110,19 +122,22 @@ c8y-agent-chat{
   width: 100%;
   margin-top: @size-16;
   padding: @size-16 @size-24 @size-16 @size-16;
-  h1{
+
+  h1 {
     margin-top: @size-24;
     margin-bottom: @size-16;
     font-size: 2em;
     font-weight: 600;
   }
-  h2{
+
+  h2 {
     margin-top: @size-24;
     margin-bottom: @size-16;
     font-size: 1.5em;
     font-weight: 600;
   }
-  h3{
+
+  h3 {
     margin-top: @size-16;
     margin-bottom: @size-16;
     font-size: 1.2em;
@@ -146,9 +161,11 @@ c8y-agent-chat{
   align-items: center;
   gap: @size-base;
   padding: @size-base 0 @size-16 0;
-  &:empty{
+
+  &:empty {
     display: none;
   }
+
   &.user-action {
     display: inline-block;
     align-self: flex-end;
@@ -157,55 +174,86 @@ c8y-agent-chat{
     margin-top: 0;
     margin-right: 0;
     order: 1;
-
   }
+
   &.agent-action {
     justify-content: flex-start;
     border-top: 1px dashed var(--c8y-root-component-border-color);
   }
 
-  .btn-dot{
-    margin: 0!important;
-    height: @form-control-height-base!important;
-    border-radius: 50%!important;
+  .btn-dot {
+    margin: 0 !important;
+    height: @form-control-height-base !important;
+    border-radius: 50% !important;
   }
 }
 
-.message-timestamp{
+.message-timestamp {
   display: block;
   font-size: @font-size-xs;
   color: var(--c8y-text-muted);
-  .user-message &{
+
+  .user-message & {
     text-align: right;
   }
 }
 
 
-.agent-step-feedback {
-  .c8y-list__group{
-    border-radius: 20px!important;
-    overflow: hidden;
-    border: 1px solid var(--c8y-root-component-border-color);
-    .c8y-list__item{
-      box-shadow: none;
+c8y-ai-chat {
+
+  // Visually hidden label included when users copy-paste from the chat, e.g. to report issues.
+  .hidden-copy-label {
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    user-select: text;
+  }
+
+  .ai-tool-call {
+    &__fieldset {
+      display: inline-flex;
+      max-inline-size: min-content;
+      flex-direction: column;
+      max-width: 100%;
+      min-inline-size: 1rem;
+      transition: all .35s ease;
+
+      &:has([aria-expanded="true"]) {
+        min-inline-size: 100%;
+        transition: all .35s ease;
+      }
+
+      &:focus-within {
+        .c8y-focus-inset();
+        border-radius: var(--c8y-unit-base) !important;
+      }
     }
-    .collapse-btn{
-      &, &:hover, &:focus{
-        border-top-right-radius: 20px!important;
-        border-bottom-right-radius: 20px!important;
+
+    &__btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+
+      &:focus {
+        outline: 0;
+        box-shadow: none;
       }
     }
   }
-  .c8y-list__item.selectable.active{
-    color: @component-color-text-muted;
-  }
-  .c8y-list__item__actions, .c8y-list__item__icon{
-    height: @size-40;
-    padding-top: 0!important;
-    padding-bottom: 0!important;
-  }
-  .c8y-list__item.selectable.active .c8y-list__item__body:after{
-    float: none;
-    color: @component-brand-primary;
+
+  .reasoning-content {
+    font-style: italic;
+    font-size: @font-size-small;
+
+    p {
+      margin-bottom: @size-4;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
   }
+
+
 }

package/styles/components/data-input/_c8y-ai-chat.scss

@@ -1,5 +1,5 @@
-@use "../../../variables/index" as *;
-
+@use '../../../variables/index'as *;
+@use "../../mixins/tab-focus";
 /**
  * C8Y AI Chat - AI chat widget component
  *
@@ -16,7 +16,7 @@
  * - Z-index values: Stacking order
  */
 
-c8y-widget-ai-chat-section{
+c8y-widget-ai-chat-section {
   display: flex;
   max-height: calc(100vh - 400px);
   min-height: 400px;
@@ -24,18 +24,18 @@ c8y-widget-ai-chat-section{
   border: 1px solid var(--c8y-root-component-border-color);
   border-radius: $size-base;
   padding: 0;
-  .chat-input{
+
+  .chat-input {
     border-bottom-left-radius: $size-base;
     border-bottom-right-radius: $size-base;
   }
-
 }
 
-c8y-agent-chat{
+c8y-agent-chat {
   width: 100%;
 }
 
-.chat-input{
+.chat-input {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -45,12 +45,14 @@ c8y-agent-chat{
   border-top: 1px solid var(--c8y-root-component-border-color);
   margin-top: auto;
   position: sticky;
-  bottom:0;
-  .chat-input-group{
+  bottom: 0;
+
+  .chat-input-group {
     position: relative;
     width: 100%;
-    textarea{
-      border-radius: 20px!important;
+
+    textarea {
+      border-radius: 20px !important;
       min-height: $size-40;
       padding-top: $size-10;
       padding-right: $size-40;
@@ -58,31 +60,37 @@ c8y-agent-chat{
       padding-left: $size-16;
 
       &::-webkit-scrollbar {
-        width: unset; /* for vertical scrollbars */
-        height: unset; /* for horizontal scrollbars */
+        width: unset;
+        /* for vertical scrollbars */
+        height: unset;
+        /* for horizontal scrollbars */
       }
 
       &::-webkit-scrollbar-track {
         background: unset;
       }
+
       &::-webkit-scrollbar-thumb {
         width: unset;
         border-radius: unset;
         background: unset;
       }
+
       &:hover {
         &::-webkit-scrollbar-thumb {
           background: unset;
         }
       }
     }
-    .chat-input-group-btn{
+
+    .chat-input-group-btn {
       position: absolute;
       right: $size-4;
       bottom: $size-4;
-      .btn-dot{
-        margin: 0!important;
-        height: $form-control-height-base!important;
+
+      .btn-dot {
+        margin: 0 !important;
+        height: $form-control-height-base !important;
         border-radius: 50%;
       }
     }
@@ -91,13 +99,16 @@ c8y-agent-chat{
 
 .chat-message {
   line-height: 1.7;
-  .message-content{
+
+  .message-content {
     overflow-wrap: break-word;
     word-break: break-word;
     max-width: 100%;
     min-width: 0;
-    p{
+
+    p {
       margin-bottom: $size-8;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -111,19 +122,22 @@ c8y-agent-chat{
   width: 100%;
   margin-top: $size-16;
   padding: $size-16 $size-24 $size-16 $size-16;
-  h1{
+
+  h1 {
     margin-top: $size-24;
     margin-bottom: $size-16;
     font-size: 2em;
     font-weight: 600;
   }
-  h2{
+
+  h2 {
     margin-top: $size-24;
     margin-bottom: $size-16;
     font-size: 1.5em;
     font-weight: 600;
   }
-  h3{
+
+  h3 {
     margin-top: $size-16;
     margin-bottom: $size-16;
     font-size: 1.2em;
@@ -147,9 +161,11 @@ c8y-agent-chat{
   align-items: center;
   gap: $size-base;
   padding: $size-base 0 $size-16 0;
-  &:empty{
+
+  &:empty {
     display: none;
   }
+
   &.user-action {
     display: inline-block;
     align-self: flex-end;
@@ -158,55 +174,86 @@ c8y-agent-chat{
     margin-top: 0;
     margin-right: 0;
     order: 1;
-
   }
+
   &.agent-action {
     justify-content: flex-start;
     border-top: 1px dashed var(--c8y-root-component-border-color);
   }
 
-  .btn-dot{
-    margin: 0!important;
-    height: $form-control-height-base!important;
-    border-radius: 50%!important;
+  .btn-dot {
+    margin: 0 !important;
+    height: $form-control-height-base !important;
+    border-radius: 50% !important;
   }
 }
 
-.message-timestamp{
+.message-timestamp {
   display: block;
   font-size: $font-size-xs;
   color: var(--c8y-text-muted);
-  .user-message &{
+
+  .user-message & {
     text-align: right;
   }
 }
 
 
-.agent-step-feedback {
-  .c8y-list__group{
-    border-radius: 20px!important;
-    overflow: hidden;
-    border: 1px solid var(--c8y-root-component-border-color);
-    .c8y-list__item{
-      box-shadow: none;
+c8y-ai-chat {
+
+  // Visually hidden label included when users copy-paste from the chat, e.g. to report issues.
+  .hidden-copy-label {
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    user-select: text;
+  }
+
+  .ai-tool-call {
+    &__fieldset {
+      display: inline-flex;
+      max-inline-size: min-content;
+      flex-direction: column;
+      max-width: 100%;
+      min-inline-size: 1rem;
+      transition: all .35s ease;
+
+      &:has([aria-expanded="true"]) {
+        min-inline-size: 100%;
+        transition: all .35s ease;
+      }
+
+      &:focus-within {
+        @include tab-focus.c8y-focus-inset();
+        border-radius: var(--c8y-unit-base) !important;
+      }
     }
-    .collapse-btn{
-      &, &:hover, &:focus{
-        border-top-right-radius: 20px!important;
-        border-bottom-right-radius: 20px!important;
+
+    &__btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+
+      &:focus {
+        outline: 0;
+        box-shadow: none;
       }
     }
   }
-  .c8y-list__item.selectable.active{
-    color: $component-color-text-muted;
-  }
-  .c8y-list__item__actions, .c8y-list__item__icon{
-    height: $size-40;
-    padding-top: 0!important;
-    padding-bottom: 0!important;
-  }
-  .c8y-list__item.selectable.active .c8y-list__item__body:after{
-    float: none;
-    color: $component-brand-primary;
+
+  .reasoning-content {
+    font-style: italic;
+    font-size: $font-size-small;
+
+    p {
+      margin-bottom: $size-4;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
   }
+
+
 }

package/styles/components/navigation-and-layout/_c8y-scrollbar.less

@@ -27,10 +27,14 @@
   &::-webkit-scrollbar-thumb {
     background: @navigator-scrollbar-thumb-color;
   }
+  scrollbar-width: thin; /* for Firefox */
+  scrollbar-color: @navigator-scrollbar-thumb-color transparent;
+  transition: scrollbar-color .2s ease;
   &:hover {
     &::-webkit-scrollbar-thumb {
       background: @navigator-scrollbar-thumb-color-hover;
     }
+    scrollbar-color: @navigator-scrollbar-thumb-color-hover transparent;
   }
 }
 
@@ -53,6 +57,39 @@
   overflow: auto;
 
   .c8y-scrollbar();
+
+  &.scrollbar-only-on-hover {
+    // Force scrollbar space to always be present
+    overflow-y: scroll;
+    scrollbar-width: thin; // Firefox
+    scrollbar-color: transparent transparent; // Firefox - invisible by default
+
+    &::-webkit-scrollbar {
+      width: 8px; // Webkit browsers - always reserve space
+    }
+
+    // Hide scrollbar thumb when not hovering
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &:hover {
+      scrollbar-color: @component-scrollbar-thumb-hover transparent; // Firefox
+
+      &::-webkit-scrollbar-thumb {
+        background-color: @component-scrollbar-thumb-hover;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: @component-scrollbar-track;
+      }
+    }
+  }
 }
 
 .table-responsive {

package/styles/components/navigation-and-layout/_c8y-scrollbar.scss

@@ -28,10 +28,14 @@
   &::-webkit-scrollbar-thumb {
     background: $navigator-scrollbar-thumb-color;
   }
+  scrollbar-width: thin; /* for Firefox */
+  scrollbar-color: $navigator-scrollbar-thumb-color transparent;
+  transition: scrollbar-color .2s ease;
   &:hover {
     &::-webkit-scrollbar-thumb {
       background: $navigator-scrollbar-thumb-color-hover;
     }
+    scrollbar-color: $navigator-scrollbar-thumb-color-hover transparent;
   }
 }
 
@@ -54,6 +58,39 @@
   overflow: auto;
 
   @include c8y-scrollbar.c8y-scrollbar();
+
+  &.scrollbar-only-on-hover {
+    // Force scrollbar space to always be present
+    overflow-y: scroll;
+    scrollbar-width: thin; // Firefox
+    scrollbar-color: transparent transparent; // Firefox - invisible by default
+
+    &::-webkit-scrollbar {
+      width: 8px; // Webkit browsers - always reserve space
+    }
+
+    // Hide scrollbar thumb when not hovering
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &:hover {
+      scrollbar-color: $component-scrollbar-thumb-hover transparent; // Firefox
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $component-scrollbar-thumb-hover;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: $component-scrollbar-track;
+      }
+    }
+  }
 }
 
 .table-responsive {

package/styles/core/buttons/_buttons.less

@@ -460,11 +460,6 @@
       border-color: transparent;
       color: @text-color;
 
-      &::before {
-        animation: borderRotate 1s linear infinite;
-        opacity: .85;
-      }
-
       &::after {
         left: 3px;
         top: 3px;
@@ -472,6 +467,13 @@
         height: calc(100% - 6px);
         transition: all .2s ease;
       }
+    }
+
+    &:hover {
+      &::before {
+        animation: borderRotate 1s linear infinite;
+        opacity: .85;
+      }
 
       >span::before {
         mask-size: 2.3ch;

package/styles/core/buttons/_buttons.scss

@@ -463,11 +463,6 @@
       border-color: transparent;
       color: $text-color;
 
-      &::before {
-        animation: borderRotate 1s linear infinite;
-        opacity: .85;
-      }
-
       &::after {
         left: 3px;
         top: 3px;
@@ -486,6 +481,13 @@
       }
     }
 
+    &:hover {
+      &::before {
+        animation: borderRotate 1s linear infinite;
+        opacity: .85;
+      }
+    }
+
     &:active {
       &::after {
         background-color: var(--c8y-btn-default-background-active);
@@ -496,7 +498,39 @@
       outline: 2px solid var(--c8y-btn-default-border-color-focus);
     }
   }
+  c8y-ai-chat-suggestion &{
+    display: flex;
+    align-items: center;
+    text-align: left;
+    white-space: normal;
+    height: 100%!important;
+    min-width: min-content;
+    > span{
+      height: auto!important;
+    }
+  }
+  c8y-ai-chat-suggestion .flex-wrap &{
+    height: auto!important;
+  }
 }
+c8y-ai-chat-suggestion{
+  .btn{
+    display: flex;
+    align-items: center;
+    text-align: left;
+    white-space: normal;
+    height: 100%!important;
+    min-width: min-content;
+    > i{
+      margin-right: 4px;
+      margin-left: -4px;
+    }
+    .flex-wrap &{
+      height: auto!important;
+    }
+  }
+}
+
 
 .btn-ai-hint, .btn-ai-hint.btn-dot {
   pointer-events: none;

package/styles/core/forms/_input-groups.scss

@@ -540,7 +540,8 @@ c8y-search-input.input-group-sm {
     line-height: $line-height-small;
   }
 }
-.input-group-sm > .form-group {
+.input-group-sm > .form-group,
+.input-group-sm > .c8y-select-wrapper {
   height: $form-control-height-sm !important;
 }
 

package/styles/mixins/_c8y-scrollbar.less

@@ -1,3 +1,5 @@
+@import "_vendor-prefixes.less";
+
 .c8y-scrollbar {
   &::-webkit-scrollbar {
     width: 4px; /* for vertical scrollbars */
@@ -14,9 +16,17 @@
 
     .transition(all 0.25s ease);
   }
+  scrollbar-width: thin; /* for Firefox */
+  scrollbar-color: @component-scrollbar-thumb-default transparent;
+  transition: scrollbar-color .2s ease;
   &:hover {
     &::-webkit-scrollbar-thumb {
       background: @component-scrollbar-thumb-hover;
     }
+    scrollbar-color: @component-scrollbar-thumb-hover transparent;
   }
 }
+
+.c8y-scrollbar {
+  .c8y-scrollbar();
+}

package/styles/mixins/_c8y-scrollbar.scss

@@ -17,10 +17,14 @@
 
     @include vendor-prefixes.transition(all 0.25s ease);
   }
+  scrollbar-width: thin; /* for Firefox */
+  scrollbar-color: $component-scrollbar-thumb-default transparent;
+  transition: scrollbar-color .2s ease;
   &:hover {
     &::-webkit-scrollbar-thumb {
       background: $component-scrollbar-thumb-hover;
     }
+    scrollbar-color: $component-scrollbar-thumb-hover transparent;
   }
 }