✨ feat: Assistant responses can have colored borders configured

If the output parameter "border" exists then it's value will be used as the left border  or the response or response chunks. If you want to control the borders for each response chunk the you will need a "borders" output parameter and an array of colors. borders= ["Red", "Green", "", "Blue"]

src/App.vue

@@ -1310,6 +1310,34 @@ export default {
 @import "~vue-snotify/styles/material.css";
 @import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
 
+.leopard-alert-border {
+  border-style: solid;
+  border-width: 4px;
+  content: "";
+  position: absolute;
+  opacity: 0.8;
+}
+
+.leopard-alert-border-left,
+.leopard-alert-border-right {
+  bottom: 0;
+  top: 0;
+}
+
+.leopard-alert-border-left {
+  border-top-left-radius: unset !important;
+  border-top-right-radius: unset !important;
+  border-bottom-right-radius: unset !important;
+  border-bottom-left-radius: inherit !important;
+  left: 0;
+}
+
+.leopard-alert-border-right {
+  border-top-left-radius: initial !important;
+  border-top-right-radius: unset !important;
+  right: 0;
+}
+
 .v-application code {
   display: block !important;
   padding: 10px !important;

src/components/ChatTeneoResponse.vue

@@ -63,8 +63,14 @@
         <v-card
           :color="$vuetify.theme.dark ? '#333333' : `${responseLookAndFeel.blockBgColor}`"
           class="chat-card chat-card-left text-left"
+          :class="hasBorder(0) ? 'leopard-response-border' : ''"
           :ripple="false"
         >
+          <div
+            v-if="hasBorder(0)"
+            class="leopard-alert-border leopard-alert-border-left"
+            :style="`color: ${getBorderColor()};`"
+          ></div>
           <span
             class="teneo-reply"
             :class="
@@ -107,9 +113,14 @@
           <v-card
             class="chat-card chat-card-left text-left"
             :ripple="false"
-            :class="!showChatIcons || $vuetify.breakpoint.smAndDown ? 'ml-2' : ''"
+            :class="responseChunkStyles(responseChunkIndex + 1)"
             :color="$vuetify.theme.dark ? '#333333' : '#FFFFFF'"
           >
+            <div
+              v-if="hasBorder(responseChunkIndex + 1)"
+              class="leopard-alert-border leopard-alert-border-left"
+              :style="`color: ${getBorderColor(responseChunkIndex + 1)};`"
+            ></div>
             <span
               class="teneo-reply"
               :class="
@@ -801,6 +812,47 @@ export default {
     }
   },
   methods: {
+    responseChunkStyles(index = 0) {
+      let classes = !this.showChatIcons || this.$vuetify.breakpoint.smAndDown ? 'ml-2' : ''
+      classes += this.hasBorder(index) ? ' leopard-response-border' : '';
+      return classes;
+    },
+    hasBorder(index = 0) {
+      let borderExists = false;
+      if ("teneoResponse" in this.item) {
+        const tResp = TIE.wrap(this.item.teneoResponse);
+        if (tResp.hasParameter("border")) {
+          borderExists = true
+        }
+        if (tResp.hasParameter("borders")) {
+          let borders = tResp.getParameter("borders");
+          if (index < borders.length && borders[index]) {
+            borderExists =  true;
+          } else {
+            borderExists =  false;
+          }
+        }
+      }
+      return borderExists;
+    },
+    getBorderColor(index = 0) {
+      let borderColor = "";
+      if (this.hasBorder(index)) {
+        let tResp = TIE.wrap(this.item.teneoResponse);
+        if (tResp.hasParameter("border")) {
+          borderColor = tResp.getParameter("border")
+        }
+        if (tResp.hasParameter("borders")) {
+          let borders = tResp.getParameter("borders");
+          if (index < borders.length && borders[index]) {
+            borderColor = borders[index]
+          } else {
+            borderColor = "";
+          }
+        }
+      }
+      return borderColor;
+    },
     addAccessibilityPrefix(text) {
       const prefix508 = `<span class="sr-only">Chat bot said.</span>`;
       if (!isHtml(text)) {
@@ -975,6 +1027,10 @@ export default {
 </script>
 
 <style scoped>
+.leopard-response-border {
+  padding-left: 20px !important;
+}
+
 .teneo-button-options {
   padding: 0;
 }