@c8y/style 1024.15.16 → 1024.16.5

package/package.json

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

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

@@ -1,5 +1,5 @@
-@use '../../../variables/index'as *;
-@use "../../mixins/tab-focus";
+@use '../../../variables/index' as *;
+@use '../../mixins/tab-focus';
 /**
  * C8Y AI Chat - AI chat widget component
  *
@@ -14,6 +14,7 @@
  * - Font-size em values (1.2em, 1.5em, 2em): Relative heading sizes
  * - Line-height values (1.7): Unitless ratio
  * - Z-index values: Stacking order
+ * - Working indicator dot gap (2px): Fine visual spacing smaller than $size-4
  */
 
 c8y-widget-ai-chat-section {
@@ -33,13 +34,14 @@ c8y-widget-ai-chat-section {
 
 c8y-agent-chat {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .chat-input {
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: $size-8;
   padding: $size-16 $size-16 $size-4 $size-16;
   background-color: $component-background-default;
   border-top: 1px solid var(--c8y-root-component-border-color);
@@ -52,12 +54,14 @@ c8y-agent-chat {
     width: 100%;
 
     textarea {
-      border-radius: 20px !important;
+      border-top-right-radius: $size-20 !important;
+      border-top-left-radius: $size-20 !important;
       min-height: $size-40;
-      padding-top: $size-10;
-      padding-right: $size-40;
-      padding-bottom: $size-10;
-      padding-left: $size-16;
+      padding-top: $size-16;
+      padding-right: $size-48;
+      padding-bottom: $size-16;
+      padding-left: $size-24;
+      margin-bottom: 0px;
 
       &::-webkit-scrollbar {
         width: unset;
@@ -83,15 +87,42 @@ c8y-agent-chat {
       }
     }
 
+    &.chat-input-with-action-bar textarea {
+      padding-bottom: calc(var(--c8y-unit-base) * 6);
+    }
+
+    &.chat-input-with-action-bar .chat-action-bar {
+      border-top: 1px solid var(--c8y-root-component-border-color);
+    }
+
     .chat-input-group-btn {
       position: absolute;
-      right: $size-4;
-      bottom: $size-4;
+      right: $size-8;
+      top: $size-8;
 
       .btn-dot {
         margin: 0 !important;
         height: $form-control-height-base !important;
         border-radius: 50%;
+        &:active, &:hover {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .chat-action-bar {
+    width: 100%;
+    border: 1px solid var(--c8y-form-control-border-color-default);
+    border-top: 0;
+    border-bottom-left-radius: $size-20;
+    border-bottom-right-radius: $size-20;
+    padding: $size-8;
+    .btn-dot {
+      height: $form-control-height-base !important;
+      border-radius: 50%;
+      &:active, &:hover {
+        border-radius: 50%;
       }
     }
   }
@@ -120,7 +151,7 @@ c8y-agent-chat {
   align-self: flex-start;
   min-width: 0;
   width: 100%;
-  margin-top: $size-16;
+  // margin-top: $size-16;
   padding: $size-16 $size-24 $size-16 $size-16;
 
   h1 {
@@ -198,9 +229,7 @@ c8y-agent-chat {
   }
 }
 
-
 c8y-ai-chat {
-
   // Visually hidden label included when users copy-paste from the chat, e.g. to report issues.
   .hidden-copy-label {
     display: block;
@@ -216,11 +245,11 @@ c8y-ai-chat {
       flex-direction: column;
       max-width: 100%;
       min-inline-size: 1rem;
-      transition: all .35s ease;
+      transition: all 0.35s ease;
 
-      &:has([aria-expanded="true"]) {
+      &:has([aria-expanded='true']) {
         min-inline-size: 100%;
-        transition: all .35s ease;
+        transition: all 0.35s ease;
       }
 
       &:focus-within {
@@ -252,8 +281,72 @@ c8y-ai-chat {
         margin-bottom: 0;
       }
     }
+  }
+
+  .working-indicator__dots {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+
+    span {
+      width: $size-4;
+      height: $size-4;
+      border-radius: 50%;
+      background-color: currentColor;
+      opacity: 0.2;
+      animation: working-indicator-dot 1.2s ease-in-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
+  }
+
+  @keyframes working-indicator-dot {
+    0%,
+    80%,
+    100% {
+      opacity: 0.2;
+    }
+
+    40% {
+      opacity: 1;
+    }
+  }
+}
+
+c8y-ai-chat-speech-to-text {
+  // While recognition is running the microphone turns to the danger color and its icon pulses to
+  // signal that the app is actively listening.
+  .c8y-speech-to-text-btn--listening {
+    color: var(--c8y-palette-status-danger, var(--c8y-brand-primary));
 
+    .c8y-speech-to-text-btn__icon {
+      animation: speech-to-text-pulse 1.4s ease-in-out infinite;
+    }
   }
 
+  @keyframes speech-to-text-pulse {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
 
+    50% {
+      opacity: 0.55;
+      transform: scale(1.18);
+    }
+  }
+
+  // Respect users who prefer reduced motion: keep the color change but drop the pulsing.
+  @media (prefers-reduced-motion: reduce) {
+    .c8y-speech-to-text-btn--listening .c8y-speech-to-text-btn__icon {
+      animation: none;
+    }
+  }
 }

package/styles/components/status-feedback-and-notifications/_code.scss

@@ -68,6 +68,25 @@ pre {
     font-size: inherit;
     overflow-wrap: break-word;
   }
+
+  &[data-label]{
+    position: relative;
+    padding-top: $margin-24;
+    border-radius: $btn-border-radius-base;
+    &::before{
+      content: attr(data-label);
+      display: inline-block;
+      background-color: $text-muted;
+      color: $component-background-default;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 0 4px;
+      text-transform: uppercase;
+      font-size: 10px;
+      font-family: $font-family-base;
+    }
+  }
 }
 
 // pre:has(code) {

package/styles/core/buttons/_button-groups.scss

@@ -132,6 +132,16 @@
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-radius.border-left-radius(0);
 }
+// adjust margin and border radius when nested btn-group with dropdown is using cdkTrapFocus
+.btn-group:has(.btn-group + .cdk-visually-hidden:last-child){
+   > .btn-group{
+      margin-left: -2px;
+     > .btn:first-child {
+      @include border-radius.border-left-radius(0);
+      @include border-radius.border-right-radius($btn-border-radius-base);
+    }
+  }
+}
 
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,

package/styles/core/forms/_forms.scss

@@ -80,6 +80,11 @@ fieldset.c8y-fieldset {
   padding-block-end: 0;
   padding-inline-start: 1.1428571429em;
   min-inline-size: 100%;
+
+  &.ai-tool-call__fieldset{
+     padding-inline-start: 0.742857em;
+  }
+
   &--lg {
     padding-block-start: 1rem;
     padding-inline-end: 1.5em;