@carbon/ai-chat 1.15.0 → 1.16.0-rc.0

package/dist/es/aiChatEntry.js

@@ -92,6 +92,8 @@ import "lodash-es/throttle.js";
 
 import "@carbon/icons/es/down-to-bottom/16.js";
 
+import "@carbon/ai-chat-components/es/globals/settings.js";
+
 import "@carbon/icons/es/screen--off/16.js";
 
 import "@carbon/icons/es/user--avatar/32.js";
@@ -128,8 +130,6 @@ import "@carbon/ai-chat-components/es/react/feedback-buttons.js";
 
 import "@carbon/ai-chat-components/es/react/feedback.js";
 
-import "@carbon/ai-chat-components/es/globals/settings.js";
-
 import "@carbon/icons/es/checkmark/16.js";
 
 import "@carbon/icons/es/headset/16.js";
@@ -218,12 +218,12 @@ import "lit/decorators.js";
 
 import "@carbon/ai-chat-components/es/react/panel.js";
 
-import "@carbon/icons/es/chevron--down/20.js";
-
-import "@carbon/icons/es/close--large/20.js";
+import "@carbon/icons/es/chevron--left/16.js";
 
 import "@carbon/ai-chat-components/es/react/toolbar.js";
 
+import "@carbon/web-components/es/components/icon-button/icon-button.js";
+
 import "@carbon/web-components/es/components/chat-button/chat-button.js";
 
 function readCarbonChatSession(namespace) {

package/dist/es/chat.ChatAppEntry.js

@@ -76,6 +76,8 @@ import throttle from "lodash-es/throttle.js";
 
 import DownToBottom16 from "@carbon/icons/es/down-to-bottom/16.js";
 
+import prefix from "@carbon/ai-chat-components/es/globals/settings.js";
+
 import ScreenOff16 from "@carbon/icons/es/screen--off/16.js";
 
 import UserAvatar32 from "@carbon/icons/es/user--avatar/32.js";
@@ -112,8 +114,6 @@ import FeedbackButtons from "@carbon/ai-chat-components/es/react/feedback-button
 
 import Feedback from "@carbon/ai-chat-components/es/react/feedback.js";
 
-import prefix from "@carbon/ai-chat-components/es/globals/settings.js";
-
 import Checkmark16 from "@carbon/icons/es/checkmark/16.js";
 
 import Headset16 from "@carbon/icons/es/headset/16.js";
@@ -208,12 +208,12 @@ import { property } from "lit/decorators.js";
 
 import ChatPanel from "@carbon/ai-chat-components/es/react/panel.js";
 
-import ChevronDown20 from "@carbon/icons/es/chevron--down/20.js";
-
-import CloseLarge20 from "@carbon/icons/es/close--large/20.js";
+import ChevronLeft16 from "@carbon/icons/es/chevron--left/16.js";
 
 import Toolbar from "@carbon/ai-chat-components/es/react/toolbar.js";
 
+import CarbonIconButtonElement from "@carbon/web-components/es/components/icon-button/icon-button.js";
+
 import CarbonChatButtonElement, { CHAT_BUTTON_SIZE as CHAT_BUTTON_SIZE$1, CHAT_BUTTON_KIND as CHAT_BUTTON_KIND$1 } from "@carbon/web-components/es/components/chat-button/chat-button.js";
 
 const VERSION = "1.15.0";
@@ -2017,7 +2017,9 @@ const DEFAULT_CUSTOM_PANEL_CONFIG_OPTIONS = {
   hideBackButton: false,
   disableAnimation: false,
   fullWidth: false,
-  backButtonType: "minimize"
+  backButtonType: "minimize",
+  showChatHeader: false,
+  openFromSide: false
 };
 
 deepFreeze(DEFAULT_CUSTOM_PANEL_CONFIG_OPTIONS);
@@ -11145,7 +11147,7 @@ const OperationalTag = createComponent({
   react: React
 });
 
-const ChevronDown = carbonIconToReact(ChevronDown16);
+const ChevronDown$1 = carbonIconToReact(ChevronDown16);
 
 const ChevronUp = carbonIconToReact(ChevronUp16);
 
@@ -11191,7 +11193,7 @@ function ConversationalSearchText(props) {
     "aria-label": languagePack.conversationalSearch_toggleCitations
   }, React.createElement("span", {
     slot: "icon"
-  }, citationsOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))))));
+  }, citationsOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown$1, null))))));
 }
 
 function insertHighlightMarkdown(text, highlightCitation) {
@@ -13295,14 +13297,16 @@ class MessagesComponent extends PureComponent {
     });
     this.scheduleAutoScroll = (options = {}, includePublicSpacerReconciliation = false) => {
       requestAnimationFrame(() => {
-        const scrollElement = this.messagesContainerWithScrollingRef.current;
-        if (!scrollElement) {
-          return;
-        }
-        this.executeResolvedAutoScrollAction(options, scrollElement);
-        if (includePublicSpacerReconciliation) {
-          this.reconcileSpacerAfterPublicDoAutoScroll(scrollElement);
-        }
+        void (async () => {
+          const scrollElement = this.messagesContainerWithScrollingRef.current;
+          if (!scrollElement) {
+            return;
+          }
+          await this.executeResolvedAutoScrollAction(options, scrollElement);
+          if (includePublicSpacerReconciliation) {
+            this.reconcileSpacerAfterPublicDoAutoScroll(scrollElement);
+          }
+        })();
       });
     };
     this.doAutoScrollInternal = (options = {}) => {
@@ -13400,7 +13404,10 @@ class MessagesComponent extends PureComponent {
         if (scrollElement && spacerElem && this.pinnedMessageComponent) {
           const maxScrollTop = scrollElement.scrollHeight - scrollElement.clientHeight;
           const wasBrowserCapped = scrollElement.scrollTop >= maxScrollTop - 2 && scrollElement.scrollTop < this.pinnedScrollTop;
-          this.domSpacerHeight = Math.max(0, this.domSpacerHeight - delta);
+          const deltaCompensated = Math.max(0, this.domSpacerHeight - delta);
+          const contentHeightWithoutSpacer = scrollElement.scrollHeight - this.domSpacerHeight;
+          const minSpacerForPin = Math.max(0, this.pinnedScrollTop + scrollElement.clientHeight - contentHeightWithoutSpacer);
+          this.domSpacerHeight = Math.min(deltaCompensated, Math.max(this.domSpacerHeight, minSpacerForPin));
           applySpacerDeficit(spacerElem, this.domSpacerHeight);
           const scrollDelta = Math.abs(scrollElement.scrollTop - this.pinnedScrollTop);
           const hasScrolledAway = scrollDelta > 50;
@@ -13494,6 +13501,20 @@ class MessagesComponent extends PureComponent {
     this.pinnedScrollTop = result.scrollTop;
     debugAutoScroll(`[autoScroll] Pinned message, scrollTop=${result.scrollTop}, spacer=${result.currentSpacerHeight}px`);
   }
+  async waitForMessageComponentLayout(messageComponent) {
+    const targetElem = messageComponent?.ref?.current;
+    if (!targetElem) {
+      return;
+    }
+    const markdownElement = targetElem.querySelector(`${prefix}-markdown`);
+    if (!markdownElement) {
+      return;
+    }
+    await (markdownElement.updateComplete?.catch(() => undefined));
+    await new Promise(resolve => {
+      requestAnimationFrame(() => resolve());
+    });
+  }
   executeRecalculateSpacer(scrollElement) {
     const result = recalculatePinnedMessageSpacer({
       pinnedMessageComponent: this.pinnedMessageComponent,
@@ -13505,7 +13526,7 @@ class MessagesComponent extends PureComponent {
     }
     this.domSpacerHeight = result.deficit;
   }
-  executeResolvedAutoScrollAction(options, scrollElement) {
+  async executeResolvedAutoScrollAction(options, scrollElement) {
     const action = resolveAutoScrollAction({
       allMessagesByID: this.props.allMessagesByID,
       localMessageItems: this.props.localMessageItems,
@@ -13532,6 +13553,10 @@ class MessagesComponent extends PureComponent {
       return;
 
      case "pin_message":
+      await this.waitForMessageComponentLayout(action.messageComponent);
+      if (!scrollElement.isConnected) {
+        return;
+      }
       this.executePinAndScroll(action.messageComponent, scrollElement);
       return;
 
@@ -14728,20 +14753,76 @@ function RequestScreenShareModal() {
   });
 }
 
-function PanelHeader({title, showBackButton = true, labelBackButton, backButtonType = "minimize", onClickBack}) {
-  const toolbarActions = useMemo(() => showBackButton ? [ {
-    text: labelBackButton ?? "",
-    icon: backButtonType === "close" ? CloseLarge20 : ChevronDown20,
-    size: "md",
-    onClick: () => onClickBack?.()
-  } ] : [], [ backButtonType, labelBackButton, onClickBack, showBackButton ]);
+const IconButton = createComponent({
+  tagName: "cds-icon-button",
+  elementClass: CarbonIconButtonElement,
+  react: React
+});
+
+const ChevronDown = carbonIconToReact(ChevronDown16);
+
+const ChevronLeft = carbonIconToReact(ChevronLeft16);
+
+const CloseLarge = carbonIconToReact(CloseLarge16);
+
+function PanelHeader({title, openFromSide, showBackButton = true, labelBackButton, backButtonType = "minimize", backButtonPosition = "end", onClickBack}) {
+  const {backButtonIcon, BackButtonIcon} = useMemo(() => {
+    const icons = {
+      close: {
+        iconDescriptor: CloseLarge16,
+        IconComponent: CloseLarge
+      },
+      side: {
+        iconDescriptor: ChevronLeft16,
+        IconComponent: ChevronLeft
+      },
+      down: {
+        iconDescriptor: ChevronDown16,
+        IconComponent: ChevronDown
+      }
+    };
+    const iconKey = backButtonType === "close" ? "close" : openFromSide ? "side" : "down";
+    const selected = icons[iconKey];
+    return {
+      backButtonIcon: selected.iconDescriptor,
+      BackButtonIcon: selected.IconComponent
+    };
+  }, [ backButtonType, openFromSide ]);
+  const toolbarActions = useMemo(() => {
+    if (!showBackButton || backButtonPosition === "start") {
+      return [];
+    }
+    return [ {
+      text: labelBackButton ?? "",
+      icon: backButtonIcon,
+      size: "md",
+      onClick: () => onClickBack?.()
+    } ];
+  }, [ labelBackButton, onClickBack, showBackButton, backButtonPosition, backButtonIcon ]);
+  const tooltipAlign = isDirectionRTL() ? "bottom-end" : "bottom-start";
   return React.createElement("div", {
     "data-floating-menu-container": true
   }, React.createElement(Toolbar, {
     actions: toolbarActions
   }, React.createElement("div", {
     slot: "title"
-  }, title)));
+  }, title && React.createElement(MarkdownWithDefaultsExport, {
+    text: title
+  })), showBackButton && backButtonPosition === "start" && React.createElement("div", {
+    slot: "navigation"
+  }, React.createElement(IconButton, {
+    "data-rounded": "top-left",
+    size: "md",
+    kind: BUTTON_KIND.GHOST,
+    align: tooltipAlign,
+    enterDelayMs: 0,
+    leaveDelayMs: 0,
+    onClick: () => onClickBack?.()
+  }, React.createElement(BackButtonIcon, {
+    slot: "icon"
+  }), labelBackButton && React.createElement("span", {
+    slot: "tooltip-content"
+  }, labelBackButton)))));
 }
 
 const HydrationPanel = ({isHydrated, languagePack}) => React.createElement("div", {
@@ -15522,9 +15603,10 @@ const AppShellPanels = React.memo(function AppShellPanels({serviceManager, langu
     fullWidth: "fullWidth" in customPanelState.options && customPanelState.options.fullWidth ? true : false,
     showFrame: "showFrame" in customPanelState.options && customPanelState.options.showFrame ? true : false,
     aiEnabled: "aiEnabled" in customPanelState.options && customPanelState.options.aiEnabled ? true : false,
-    showChatHeader: !isLegacyCustomPanel,
-    animationOnOpen: customPanelState.options.disableAnimation ? "none" : "slide-in-from-bottom",
-    animationOnClose: customPanelState.options.disableAnimation ? "none" : "slide-out-to-bottom",
+    showChatHeader: !isLegacyCustomPanel && "showChatHeader" in customPanelState.options && customPanelState.options.showChatHeader ? true : false,
+    animationOnOpen: customPanelState.options.disableAnimation ? "none" : "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? "slide-in-from-start" : "slide-in-from-bottom",
+    animationOnClose: customPanelState.options.disableAnimation ? "none" : "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? "slide-out-to-start" : "slide-out-to-bottom",
+    openFromSide: "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? true : false,
     onOpenStart: () => {
       serviceManager.eventBus.fire({
         type: BusEventType.CUSTOM_PANEL_PRE_OPEN
@@ -15576,6 +15658,8 @@ const AppShellPanels = React.memo(function AppShellPanels({serviceManager, langu
       title: panelTitle,
       labelBackButton: languagePack.general_returnToAssistant,
       backButtonType: "backButtonType" in customPanelState.options ? customPanelState.options.backButtonType : undefined,
+      backButtonPosition: "backButtonPosition" in customPanelState.options ? customPanelState.options.backButtonPosition : undefined,
+      openFromSide: "openFromSide" in customPanelState.options && customPanelState.options.openFromSide,
       onClickBack: () => {
         serviceManager.store.dispatch(actions.setCustomPanelOpen(false));
         "onClickBack" in customPanelState.options && customPanelState.options.onClickBack?.();