@webitel/ui-chats 26.8.5 → 26.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "26.8.5",
+	"version": "26.8.6",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/v2/ui/chat-composer/chat-composer.vue

@@ -40,6 +40,7 @@
           v-if="hasAction(ChatComposerAction.Emoji)"
           :popup-teleport-to="`#${composerId}`"
           :rounded="false"
+          variant="text"
           size="sm"
           :title="t('composer.emoji')"
           @insert-emoji="insertText"
@@ -54,6 +55,7 @@
         class="chat-composer__send"
         icon="chat-send"
         color="secondary"
+        size="sm"
         :loading="isSending"
         :disabled="isLocked || !canSend"
         :title="t('composer.send')"

package/src/v2/ui/chat-history/chat-history.vue

@@ -224,8 +224,7 @@ watch(
   width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-right: var(--scrollbar-width);
-  scrollbar-gutter: stable both-edges;
+  scrollbar-gutter: stable;
 }
 
 .chat-history__content {
@@ -233,6 +232,8 @@ watch(
   flex-direction: column;
   gap: var(--wt-ws-chat-window-sizes-root-gap);
   padding: var(--wt-ws-chat-window-sizes-root-padding-y) var(--wt-ws-chat-window-sizes-root-padding-x);
+  /* the scrollbar sits a root gap away from the messages, as in DES-730 */
+  padding-right: calc(var(--wt-ws-chat-window-sizes-root-padding-x) + var(--wt-ws-chat-window-sizes-root-gap));
 }
 
 .chat-history__sentinel {

package/src/v2/ui/chat-history/components/chat-date-divider.vue

@@ -33,4 +33,10 @@ const label = computed(() =>
   display: flex;
   justify-content: center;
 }
+
+/* DES-730 draws the chip a step lighter than the default secondary; the
+   surface palette does not flip with the theme, so dark keeps the default */
+:global(:root:not(.theme--dark)) .chat-date-divider {
+  --p-chip-secondary-background: var(--p-surface-50);
+}
 </style>

package/src/v2/ui/chat-history/components/chat-message.vue

@@ -40,12 +40,12 @@
           {{ t('history.unsupportedMessage') }}
         </p>
       </template>
-      <div class="chat-message__meta typo-caption">
-        <span v-if="time">{{ time }}</span>
+      <div class="chat-message__meta typo-body-2">
         <message-status
           v-if="status"
           :status="status"
         />
+        <span v-if="time">{{ time }}</span>
       </div>
     </div>
   </div>
@@ -104,6 +104,8 @@ const status = computed(() =>
 
 <style scoped>
 .chat-message {
+  --chat-message-tail-size: 8px;
+
   display: flex;
   align-items: flex-start;
   gap: var(--wt-ws-chat-window-sizes-message-item-gap);
@@ -122,25 +124,49 @@ const status = computed(() =>
   display: flex;
   flex-direction: column;
   gap: var(--wt-ws-chat-window-sizes-message-item-chat-message-gap);
+  position: relative;
   max-width: 70%;
   min-width: 0;
   padding: var(--wt-ws-chat-window-sizes-message-item-chat-message-padding-y) var(--wt-ws-chat-window-sizes-message-item-chat-message-padding-x);
   border-radius: var(--wt-ws-chat-window-sizes-message-item-chat-message-border-radius);
-  background: var(--wt-ws-chat-window-colors-message-item-chat-message-client-background);
+  background: var(--chat-message-bubble-background);
   color: var(--wt-ws-chat-window-colors-message-item-chat-message-client-color);
+  --chat-message-bubble-background: var(--wt-ws-chat-window-colors-message-item-chat-message-client-background);
 }
 
-/* the corner next to the avatar is square, as in DES-730 */
+/* the corner next to the avatar is square and carries an 8px tail, as in DES-730 */
 .chat-message:not(.chat-message--outgoing) .chat-message__bubble {
+  margin-left: var(--chat-message-tail-size);
   border-top-left-radius: 0;
 }
 
 .chat-message--outgoing .chat-message__bubble {
+  margin-right: var(--chat-message-tail-size);
   border-top-right-radius: 0;
-  background: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-background);
+  --chat-message-bubble-background: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-background);
   color: var(--wt-ws-chat-window-colors-message-item-chat-message-agent-color);
 }
 
+/* the tail is the bubble colour left over once a circle is cut out of the
+   square beside the bubble's square corner */
+.chat-message__bubble::before {
+  position: absolute;
+  top: 0;
+  width: var(--chat-message-tail-size);
+  height: var(--chat-message-tail-size);
+  content: '';
+}
+
+.chat-message:not(.chat-message--outgoing) .chat-message__bubble::before {
+  right: 100%;
+  background: radial-gradient(circle 7.333px at 0.667px 7.333px, transparent 7.2px, var(--chat-message-bubble-background) 7.45px);
+}
+
+.chat-message--outgoing .chat-message__bubble::before {
+  left: 100%;
+  background: radial-gradient(circle 7.333px at 7.333px 7.333px, transparent 7.2px, var(--chat-message-bubble-background) 7.45px);
+}
+
 .chat-message__placeholder {
   margin: 0;
   font-style: italic;

package/src/v2/ui/chat-history/components/scroll-to-bottom-btn.vue

@@ -8,6 +8,7 @@
     </div>
     <wt-rounded-action
       icon="arrow-down"
+      size="sm"
       rounded
       @click="emit('scroll')"
     />
@@ -34,7 +35,7 @@ const emit = defineEmits<{
 <style scoped>
 .scroll-to-bottom-btn {
   position: absolute;
-  right: calc(var(--scrollbar-width) + var(--spacing-xs));
+  right: calc(var(--scrollbar-width) + var(--wt-ws-chat-window-sizes-root-gap) + var(--spacing-xs));
   bottom: var(--spacing-xs);
   display: flex;
   flex-direction: column;