Release June 8

hlx_statics/blocks/ai-assistant/ai-assistant.css

@@ -25,6 +25,7 @@
     );
     --container-padding: 40px;
     --button-size: 48px;
+    --opening-transition-duration: 0.25s;
 
     display: flex;
     flex-direction: column-reverse;
@@ -41,7 +42,9 @@
 
     position: relative;
     width: var(--button-size);
+    min-width: var(--button-size);
     height: var(--button-size);
+    min-height: var(--button-size);
     border-radius: 50%;
     border: 2px solid transparent;
     padding: 0;
@@ -51,27 +54,29 @@
         var(--ai-border-linear-gradient) border-box;
     align-self: flex-end;
     pointer-events: auto;
+    visibility: visible;
+    transition: visibility 0s linear
+        calc(var(--opening-transition-duration) * 0.9);
 
     &:hover {
         --background-color: #f0f0f0;
     }
 
     &.hidden {
         visibility: hidden;
+        transition: visibility 0s linear;
     }
 }
 
 /*
 * MARK: Chat Window
 */
 .ai-assistant-panel .chat-window {
-    --transition-duration: 0.25s;
-    width: var(--button-size);
-    height: var(--button-size);
-    border-radius: calc(var(--button-size) / 2);
-    background:
-        linear-gradient(#ffffff, #ffffff) padding-box,
-        var(--ai-border-linear-gradient) border-box;
+    --chat-window-width: 460px;
+    width: var(--chat-window-width);
+    height: 100%;
+    border-radius: 8px;
+    background: #fff;
     /* Drop shadow/elevated (pretty much copy pasta from Figma) */
     box-shadow:
         0 0 2px 0 rgba(0, 0, 0, 0.12),
@@ -80,48 +85,25 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    transform: translateY(var(--button-size));
+    transform: scale(0);
+    transform-origin: calc(100% - var(--button-size) / 2)
+        calc(100% - var(--button-size) / 2);
+    translate: 0 var(--button-size);
     visibility: hidden;
-    border: solid transparent;
-    border-width: 2px;
+    border: 0;
 
     transition:
-        width var(--transition-duration) ease-out var(--transition-duration),
-        height var(--transition-duration) ease-out var(--transition-duration),
-        border-radius var(--transition-duration) ease-out,
-        border-width var(--transition-duration) linear,
-        visibility 0s linear calc(var(--transition-duration) * 2);
-
-    .chat-window-header,
-    .chat-window-content,
-    .chat-window-input-section {
-        opacity: 0;
-        transition: opacity var(--transition-duration) ease-out 0s;
-    }
+        transform var(--opening-transition-duration) cubic-bezier(0.5, 0, 1, 1),
+        visibility 0s linear var(--opening-transition-duration);
 
     &.show {
-        width: 400px;
-        height: 100%;
-        border-radius: 8px;
         visibility: visible;
         transition:
-            width var(--transition-duration) ease-out,
-            height var(--transition-duration) ease-out,
-            border-radius var(--transition-duration) ease-out
-                var(--transition-duration),
-            border-width var(--transition-duration) linear
-                var(--transition-duration),
-            visibility 0s linear 0s;
+            transform var(--opening-transition-duration)
+                cubic-bezier(0, 0, 0.4, 1),
+            visibility 0s linear;
         pointer-events: auto;
-        border-width: 0px;
-
-        .chat-window-header,
-        .chat-window-content,
-        .chat-window-input-section {
-            opacity: 1;
-            transition: opacity var(--transition-duration) ease-out
-                calc(var(--transition-duration) * 2);
-        }
+        transform: scale(1);
     }
 
     .chat-ai-avatar {
@@ -151,8 +133,21 @@
         margin: 0;
         font-size: 18px;
         font-weight: 700;
-        flex: 1;
-        margin-left: 12px;
+        margin-inline: 12px;
+    }
+
+    .chat-window-badge {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 11px;
+        background-color: rgb(255, 232, 240);
+        color: black;
+        border-radius: 7px;
+        font-size: 12px;
+        min-height: 24px;
+        line-height: 14px;
     }
 
     .chat-window-close,
@@ -734,4 +729,4 @@
             max-width: 400px;
         }
     }
-}
+}

hlx_statics/blocks/ai-assistant/ai-assistant.js

@@ -6,6 +6,7 @@ import {
 
 import { aiApiClient } from "./ai-assistant_api-client.js";
 import {
+  onUserScroll,
   restoreChatHistory,
   toggleChatWindow,
 } from "./ai-assistant_chat-controller.js";
@@ -34,6 +35,20 @@ export default async function decorate(block) {
     document.body,
     "https://unpkg.com/marked@^17/lib/marked.umd.js",
     () => {
+      // @ts-expect-error - marked is not on the Window object
+      window.marked.use({
+        renderer: {
+          /**
+           * @param {Object} options
+           * @param {string} options.href
+           * @param {string} options.title
+           * @param {string} options.text
+           */
+          link({ href, title, text }) {
+            return `<a href="${href}" title="${title || text}" daa-ll="DevsiteAI Assistant:Message:Link:${title || text}|${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+          },
+        },
+      });
       addExtraScriptWithLoad(
         document.body,
         "https://unpkg.com/dompurify@^3/dist/purify.min.js",
@@ -67,6 +82,7 @@ export default async function decorate(block) {
 
   block.appendChild(panel);
 
+  ELEMENTS.CHAT_WINDOW_CONTENT?.addEventListener("scroll", onUserScroll);
   ELEMENTS.CHAT_BUTTON?.addEventListener("click", toggleChatWindow);
   ELEMENTS.CHAT_WINDOW_CLEAR_BUTTON?.addEventListener("click", () =>
     chatWindow.appendChild(createClearDialog()),

hlx_statics/blocks/ai-assistant/ai-assistant_api-client.js

@@ -1,5 +1,6 @@
 // @ts-check
-import { AI_API_BASE_URL, AI_API_KEY } from "./ai-assistant_constants.js";
+
+import { isProdEnvironment } from "../../scripts/lib-adobeio.js";
 
 /**
  * @typedef {Object} RequestBody
@@ -87,11 +88,19 @@ import { AI_API_BASE_URL, AI_API_KEY } from "./ai-assistant_constants.js";
  * @property {(error: unknown) => void} onError
  */
 
+const STAGE_API_URL =
+  "https://devsite-rag.stg.app-builder.corp.adp.adobe.io/v1/inference";
+const PROD_API_URL =
+  "https://devsite-rag.app-builder.adp.adobe.io/v1/inference";
+const STAGE_API_KEY = "ai-assistant-devsite-rag-demo-01";
+const PROD_API_KEY = "devsite-rag";
+const IS_PROD = isProdEnvironment(window.location.host);
+
 export class AiApiClient {
-  static STREAMING_ENDPOINT = "/v1/inference/retrieve/generate/stream";
-  static NON_STREAMING_ENDPOINT = "/v1/inference/retrieve/generate";
-  static COLLECTIONS_ENDPOINT = "/v1/inference/collections";
-  static FEEDBACK_ENDPOINT = "/v1/inference/feedback";
+  static STREAMING_ENDPOINT = "/retrieve/generate/stream";
+  static NON_STREAMING_ENDPOINT = "/retrieve/generate";
+  static COLLECTIONS_ENDPOINT = "/collections";
+  static FEEDBACK_ENDPOINT = "/feedback";
   static LOCAL_STORAGE_COLLECTIONS_KEY = "ai-assistant__collections";
   static LOCAL_STORAGE_COLLECTION_TTL = 1 * 24 * 60 * 60 * 1000; // 1 day
 
@@ -414,6 +423,6 @@ export class AiApiClient {
 }
 
 export const aiApiClient = new AiApiClient({
-  baseUrl: AI_API_BASE_URL,
-  apiKey: AI_API_KEY,
+  baseUrl: IS_PROD ? PROD_API_URL : STAGE_API_URL,
+  apiKey: IS_PROD ? PROD_API_KEY : STAGE_API_KEY,
 });

hlx_statics/blocks/ai-assistant/ai-assistant_chat-bubble.js

@@ -40,7 +40,9 @@ export class ChatBubble {
    */
   #_init() {
     const bubble = createTag("div", { class: "chat-bubble" });
-    const contentElement = createTag("div", { class: "chat-bubble-content" });
+    const contentElement = createTag("div", {
+      class: "chat-bubble-content",
+    });
 
     if (this.source === "ai") {
       if (!this.isContinuingConversation) {
@@ -111,6 +113,7 @@ export class ChatBubble {
           class: "chat-bubble-copy",
           type: "button",
           "aria-label": COPY_BUTTON_LABEL,
+          "daa-ll": "DevsiteAI Assistant:Message:Button:Copy",
         })
       );
     button.innerHTML = COPY_ICON_SVG;
@@ -180,6 +183,7 @@ export class ChatBubble {
         class: "chat-bubble-feedback",
         type: "button",
         "aria-label": THUMB_UP_LABEL,
+        "daa-ll": "DevsiteAI Assistant:Message:Button:Upvote",
       })
     );
     thumbUpButton.innerHTML = THUMB_UP_ICON_SVG;
@@ -192,6 +196,7 @@ export class ChatBubble {
         class: "chat-bubble-feedback",
         type: "button",
         "aria-label": THUMB_DOWN_LABEL,
+        "daa-ll": "DevsiteAI Assistant:Message:Button:Downvote",
       })
     );
     thumbDownButton.innerHTML = THUMB_DOWN_ICON_SVG;
@@ -324,7 +329,9 @@ export class ChatBubble {
 
     this.references = references;
 
-    const wrapper = createTag("div", { class: "chat-bubble-sources" });
+    const wrapper = createTag("div", {
+      class: "chat-bubble-sources",
+    });
     const heading = createTag("p", { class: "chat-bubble-sources-heading" });
     heading.textContent = "Sources:";
     wrapper.appendChild(heading);
@@ -338,10 +345,14 @@ export class ChatBubble {
         rel: "noopener noreferrer",
       });
       a.textContent = title || url;
+      a.setAttribute(
+        "daa-ll",
+        `DevsiteAI Assistant:Message:Sources:Link:${a.textContent}|${url}`,
+      );
       li.appendChild(a);
       list.appendChild(li);
     });
     wrapper.appendChild(list);
     this.element.appendChild(wrapper);
   }
-}
+}