@carbon/ai-chat 0.4.0-rc.2 → 0.4.0-rc.3

package/dist/es/chat.Disclaimer.js

@@ -0,0 +1,553 @@
+import { Button } from "@carbon/react";
+
+import React, { forwardRef, useRef, useImperativeHandle, useState } from "react";
+
+import { useSelector } from "react-redux";
+
+import { u as useLanguagePack, C as ChatWidthBreakpoint } from "./chat.AppState.js";
+
+import { u as useOnMount } from "./chat.useOnMount.js";
+
+import { H as HeaderExport } from "./chat.Header.js";
+
+import { u as useShouldSanitizeHTML, s as sanitizeHTML } from "./chat.htmlUtils.js";
+
+import "./chat.carbonTypes.js";
+
+import { O as OverlayPanelName } from "./chat.PageObjectId.js";
+
+import { b as CarbonTheme } from "./chat.dynamic-imports.js";
+
+import "@carbon/web-components/es-custom/components/slug/index.js";
+
+import "@carbon/icons-react/es/Close.js";
+
+import "@carbon/icons-react/es/CloseLarge.js";
+
+import "@carbon/icons-react/es/DownToBottom.js";
+
+import "@carbon/icons-react/es/Menu.js";
+
+import "@carbon/icons-react/es/Restart.js";
+
+import "@carbon/icons-react/es/SidePanelClose.js";
+
+import "@carbon/icons-react/es/SubtractLarge.js";
+
+import "@carbon/web-components/es-custom/components/ai-label/defs.js";
+
+import "@carbon/web-components/es-custom/components/popover/defs.js";
+
+import "classnames";
+
+import "@lit/react";
+
+import "tslib";
+
+import "./chat.customElement.js";
+
+import "@carbon/web-components/es-custom/components/skeleton-icon/index.js";
+
+import "lit";
+
+import "bind-decorator";
+
+import "lit/decorators.js";
+
+import "@carbon/web-components/es-custom/components/button/index.js";
+
+import "@carbon/web-components/es-custom/components/overflow-menu/index.js";
+
+import "@carbon/icons-react/es/ChevronDown.js";
+
+import "@carbon/icons-react/es/ChevronUp.js";
+
+import "@floating-ui/react";
+
+import "./chat.uuid.js";
+
+import "uuid";
+
+import "./chat.HideComponent.js";
+
+import "./chat.usePrevious.js";
+
+import "compute-scroll-into-view";
+
+import "memoize-one";
+
+import "tabbable";
+
+import "./chat.actions.js";
+
+import "./chat.constants.js";
+
+import "focus-trap-react";
+
+import "react-dom";
+
+import "@carbon/web-components/es-custom/components/ai-label/ai-label-action-button.js";
+
+import "@carbon/web-components/es-custom/components/ai-label/ai-label.js";
+
+import "dompurify";
+
+import "./chat.stringUtils.js";
+
+import "./chat.miscUtils.js";
+
+import "./chat.browserUtils.js";
+
+import "detect-browser";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatBubbleDark() {
+  const chatBubbleID = "cbl-";
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 80 80"
+  }, React.createElement("defs", null, React.createElement("linearGradient", {
+    id: `${chatBubbleID}-a`,
+    x1: 30.047,
+    x2: 35.499,
+    y1: 54.31,
+    y2: 54.31,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#393939"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#262626"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-b`,
+    x1: 28.608,
+    x2: 70.691,
+    y1: -3.968,
+    y2: 68.921,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#6f6f6f"
+  }), React.createElement("stop", {
+    offset: .19,
+    stopColor: "#6c6c6c"
+  }), React.createElement("stop", {
+    offset: .316,
+    stopColor: "#636363"
+  }), React.createElement("stop", {
+    offset: .423,
+    stopColor: "#555"
+  }), React.createElement("stop", {
+    offset: .518,
+    stopColor: "#3f3f3f"
+  }), React.createElement("stop", {
+    offset: .545,
+    stopColor: "#383838"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#262626"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-c`,
+    x1: 15.125,
+    x2: 60.902,
+    y1: 36.198,
+    y2: 36.198,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#525252"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#393939"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-d`,
+    x1: 15.14,
+    x2: 63.056,
+    y1: 5.723,
+    y2: 33.517,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: .777,
+    stopColor: "#8d8d8d"
+  }), React.createElement("stop", {
+    offset: .806,
+    stopColor: "#8a8a8a",
+    stopOpacity: .967
+  }), React.createElement("stop", {
+    offset: .839,
+    stopColor: "gray",
+    stopOpacity: .872
+  }), React.createElement("stop", {
+    offset: .873,
+    stopColor: "#6f6f6f",
+    stopOpacity: .713
+  }), React.createElement("stop", {
+    offset: .908,
+    stopColor: "#595959",
+    stopOpacity: .491
+  }), React.createElement("stop", {
+    offset: .944,
+    stopColor: "#3b3b3b",
+    stopOpacity: .209
+  }), React.createElement("stop", {
+    offset: .967,
+    stopColor: "#262626",
+    stopOpacity: 0
+  }))), React.createElement("path", {
+    d: "m15.129 52.11 45.498 26.279 4.248-2.507-45.473-26.255-4.273 2.483z",
+    opacity: .25
+  }), React.createElement("path", {
+    fill: `url(#${chatBubbleID}-a)`,
+    d: "m32.663 52.846-2.258 4.227a1.138 1.138 0 0 1-.358.35l2.837-1.649a1.148 1.148 0 0 0 .358-.35L35.5 51.2Z"
+  }), React.createElement("path", {
+    fill: `url(#${chatBubbleID}-b)`,
+    d: "M63.454 26.582 20.631 1.858a1.006 1.006 0 0 0-1.014-.1l-3.973 2.3a1.006 1.006 0 0 1 1.014.1l42.823 24.725a3.148 3.148 0 0 1 1.419 2.462l-.1 36.084a1 1 0 0 1-.419.907l3.973-2.3a1 1 0 0 0 .419-.907l.1-36.084a3.145 3.145 0 0 0-1.419-2.463Z"
+  }), React.createElement("path", {
+    fill: `url(#${chatBubbleID}-c)`,
+    d: "M59.481 28.883a3.151 3.151 0 0 1 1.419 2.462l-.1 36.084c-.009.9-.647 1.26-1.424.812l-26.695-15.4-2.257 4.226a.9.9 0 0 1-1.333.273 3.086 3.086 0 0 1-1.224-1.527l-2.322-7.092-9-5.2a3.143 3.143 0 0 1-1.421-2.461l.1-36.084c0-.9.641-1.272 1.431-.816Z"
+  }), React.createElement("path", {
+    fill: "#6f6f6f",
+    d: "m57.995 37.068-.011 3.902-39.952-23.066.011-3.902 39.952 23.066zM57.995 45.114l-.011 3.903-39.952-23.066.011-3.903 39.952 23.066zM44.62 45.041l-.011 3.902-26.577-15.344.011-3.902L44.62 45.041z"
+  }), React.createElement("path", {
+    fill: `url(#${chatBubbleID}-d)`,
+    d: "M60.756 30.548a2.507 2.507 0 0 1 .146.8l-.011 3.952a3.98 3.98 0 0 1 .413-.125l.011-3.826a3.541 3.541 0 0 0-1.628-2.821L16.864 3.8a1.976 1.976 0 0 0-.445-.192l-.775.45c.006 0 .015 0 .021-.008a.722.722 0 0 1 .188-.071h.015a.822.822 0 0 1 .151-.015h.101a1.087 1.087 0 0 1 .233.051c.014 0 .027.01.041.015a1.654 1.654 0 0 1 .264.121l21.411 12.37 21.412 12.362a3.155 3.155 0 0 1 1.275 1.665Z"
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatBubbleLight() {
+  const chatBubbleID = "cbl-";
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    viewBox: "0 0 80 80",
+    className: "chat-bubble-light"
+  }, React.createElement("defs", null, React.createElement("linearGradient", {
+    id: `${chatBubbleID}-a`,
+    x1: 61.44,
+    x2: 61.44,
+    y1: 66.99,
+    y2: 60.01,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#c6c6c6"
+  }), React.createElement("stop", {
+    offset: .78,
+    stopColor: "#e0e0e0"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-b`,
+    x1: 28.49,
+    x2: 53.04,
+    y1: 44.06,
+    y2: 86.58,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#525252",
+    stopOpacity: .05
+  }), React.createElement("stop", {
+    offset: 1,
+    stopOpacity: .1
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-c`,
+    x1: 30.05,
+    x2: 35.5,
+    y1: 54.31,
+    y2: 54.31,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#a4a4a4"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#bebebe"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-d`,
+    x1: 28.61,
+    x2: 70.69,
+    y1: -3.97,
+    y2: 68.92,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#f4f4f4"
+  }), React.createElement("stop", {
+    offset: .52,
+    stopColor: "#e0e0e0"
+  }), React.createElement("stop", {
+    offset: .56,
+    stopColor: "#d8d8d8"
+  }), React.createElement("stop", {
+    offset: .61,
+    stopColor: "#c6c6c6"
+  }), React.createElement("stop", {
+    offset: .89,
+    stopColor: "#a8a8a8"
+  }), React.createElement("stop", {
+    offset: .96,
+    stopColor: "#8d8d8d"
+  })), React.createElement("linearGradient", {
+    xlinkHref: `#${chatBubbleID}-a`,
+    id: `${chatBubbleID}-e`,
+    x1: 38.01,
+    x2: 38.01,
+    y1: 59.43,
+    y2: 3.27
+  }), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-f`,
+    x1: 21.52,
+    x2: 61.39,
+    y1: 36.2,
+    y2: 36.2,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#e0e0e0"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#c6c6c6"
+  })), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-h`,
+    x1: 17.68,
+    x2: 55.37,
+    y1: 15.75,
+    y2: 37.5,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: 0,
+    stopColor: "#fff"
+  }), React.createElement("stop", {
+    offset: .05,
+    stopColor: "#fdfdfd"
+  }), React.createElement("stop", {
+    offset: .3,
+    stopColor: "#f6f6f6"
+  }), React.createElement("stop", {
+    offset: 1,
+    stopColor: "#f4f4f4"
+  })), React.createElement("linearGradient", {
+    xlinkHref: `#${chatBubbleID}-h`,
+    id: `${chatBubbleID}-i`,
+    x1: 14.24,
+    x2: 51.92,
+    y1: 21.81,
+    y2: 43.56
+  }), React.createElement("linearGradient", {
+    xlinkHref: `#${chatBubbleID}-h`,
+    id: `${chatBubbleID}-j`,
+    x1: 10.96,
+    x2: 48.66,
+    y1: 27.56,
+    y2: 49.33
+  }), React.createElement("linearGradient", {
+    id: `${chatBubbleID}-k`,
+    x1: 15.14,
+    x2: 63.06,
+    y1: 5.72,
+    y2: 33.52,
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: .78,
+    stopColor: "#fff"
+  }), React.createElement("stop", {
+    offset: .8,
+    stopColor: "#fefefe",
+    stopOpacity: .98
+  }), React.createElement("stop", {
+    offset: .82,
+    stopColor: "#fcfcfc",
+    stopOpacity: .93
+  }), React.createElement("stop", {
+    offset: .85,
+    stopColor: "#f8f8f8",
+    stopOpacity: .84
+  }), React.createElement("stop", {
+    offset: .87,
+    stopColor: "#f2f2f2",
+    stopOpacity: .72
+  }), React.createElement("stop", {
+    offset: .9,
+    stopColor: "#eaeaea",
+    stopOpacity: .56
+  }), React.createElement("stop", {
+    offset: .93,
+    stopColor: "#e1e1e1",
+    stopOpacity: .37
+  }), React.createElement("stop", {
+    offset: .95,
+    stopColor: "#d7d7d7",
+    stopOpacity: .14
+  }), React.createElement("stop", {
+    offset: .97,
+    stopColor: "#d0d0d0",
+    stopOpacity: 0
+  }))), React.createElement("path", {
+    d: "M0 0h80v80H0z",
+    className: "chat-bubble-light__background"
+  }), React.createElement("path", {
+    d: "M61.3 68.11a.67.67 0 0 0 .09-.14.67.67 0 0 1-.09.14Zm.22-.46a1.58 1.58 0 0 0 0-.32v-7.24 7.24a1.58 1.58 0 0 1 0 .32Zm-.09.26a1.18 1.18 0 0 0 .07-.2 1.18 1.18 0 0 1-.07.2Z",
+    className: "chat-bubble-light__gradient-a"
+  }), React.createElement("path", {
+    d: "m15.13 52.11 45.5 26.28 4.25-2.51L19.4 49.63l-4.27 2.48z",
+    className: "chat-bubble-light__gradient-b"
+  }), React.createElement("path", {
+    d: "m32.66 52.85-2.25 4.22a1.08 1.08 0 0 1-.36.35l2.83-1.65a1.08 1.08 0 0 0 .36-.35l2.26-4.22Z",
+    className: "chat-bubble-light__gradient-c"
+  }), React.createElement("path", {
+    d: "M63.45 26.58 20.63 1.86a1 1 0 0 0-1-.1l-4 2.3a1 1 0 0 1 1 .1l42.85 24.72a3.17 3.17 0 0 1 1.42 2.47l-.1 36.08a1 1 0 0 1-.42.91l4-2.3a1 1 0 0 0 .42-.91L64.88 29a3.14 3.14 0 0 0-1.43-2.42Z",
+    className: "chat-bubble-light__gradient-d"
+  }), React.createElement("path", {
+    d: "M59.48 28.88a3.17 3.17 0 0 1 1.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 0 1-1.33.28 3.07 3.07 0 0 1-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 0 1-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81Z",
+    className: "chat-bubble-light__gradient-e"
+  }), React.createElement("path", {
+    d: "M59.48 28.88a3.17 3.17 0 0 1 1.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 0 1-1.33.28 3.07 3.07 0 0 1-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 0 1-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81Z",
+    className: "chat-bubble-light__gradient-f"
+  }), React.createElement("path", {
+    d: "M59.48 28.88a3.17 3.17 0 0 1 1.42 2.47l-.1 36.08c0 .9-.65 1.26-1.42.81l-26.7-15.4-2.26 4.22a.9.9 0 0 1-1.33.28 3.07 3.07 0 0 1-1.22-1.53l-2.33-7.09-9-5.2a3.15 3.15 0 0 1-1.43-2.46L15.23 5c0-.9.64-1.27 1.43-.81Z",
+    className: "chat-bubble-light__gradient-e-duplicate"
+  }), React.createElement("path", {
+    d: "m57.99 37.07-.01 3.9L18.03 17.9l.01-3.9 39.95 23.07z",
+    className: "chat-bubble-light__gradient-h"
+  }), React.createElement("path", {
+    d: "m57.99 45.11-.01 3.91-39.95-23.07.01-3.9 39.95 23.06z",
+    className: "chat-bubble-light__gradient-i"
+  }), React.createElement("path", {
+    d: "m44.62 45.04-.01 3.9L18.03 33.6l.01-3.9 26.58 15.34z",
+    className: "chat-bubble-light__gradient-j"
+  }), React.createElement("path", {
+    d: "M60.76 30.55a2.54 2.54 0 0 1 .14.8v3.95l.41-.13v-3.82a3.54 3.54 0 0 0-1.63-2.82L16.86 3.8a2.09 2.09 0 0 0-.44-.19l-.78.45a1 1 0 0 1 .21-.06h.48l.27.12 21.47 12.4 21.41 12.36a3.19 3.19 0 0 1 1.28 1.67Z",
+    className: "chat-bubble-light__gradient-k"
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function SimpleHeader(props, ref) {
+  const {useAITheme: useAITheme, onClose: onClose, testIdPrefix: testIdPrefix} = props;
+  const headerRef = useRef();
+  useImperativeHandle(ref, () => headerRef.current);
+  return React.createElement(HeaderExport, {
+    ref: headerRef,
+    onClickClose: onClose,
+    showCenter: true,
+    useAITheme: useAITheme,
+    testIdPrefix: testIdPrefix
+  });
+}
+
+const SimpleHeaderExport = React.memo(forwardRef(SimpleHeader));
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function MaybeDangerouslySetInnerHTML({html: html, overrideSanitize: overrideSanitize, className: className, id: id, asSpan: asSpan}) {
+  let doSanitize = useShouldSanitizeHTML();
+  if (overrideSanitize !== undefined) {
+    doSanitize = overrideSanitize;
+  }
+  if (doSanitize) {
+    html = sanitizeHTML(html);
+  }
+  if (asSpan) {
+    return React.createElement("span", {
+      id: id,
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    });
+  }
+  return React.createElement("div", {
+    id: id,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  });
+}
+
+const MaybeDangerouslySetInnerHTMLExport = React.memo(MaybeDangerouslySetInnerHTML);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function Disclaimer({onAcceptDisclaimer: onAcceptDisclaimer, onClose: onClose, disclaimerHTML: disclaimerHTML, disclaimerAcceptButtonRef: disclaimerAcceptButtonRef}) {
+  const languagePack = useLanguagePack();
+  const chatWidthBreakpoint = useSelector(state => state.chatWidthBreakpoint);
+  const {carbonTheme: carbonTheme, useAITheme: useAITheme} = useSelector(state => state.theme);
+  const isDarkTheme = carbonTheme === CarbonTheme.G90 || carbonTheme === CarbonTheme.G100;
+  const [hasReadDisclaimer, setHasReadDisclaimer] = useState(false);
+  const disclaimerContent = useRef();
+  const onScroll = () => {
+    const {scrollTop: scrollTop, scrollHeight: scrollHeight, clientHeight: clientHeight} = disclaimerContent.current;
+    const scrollBottom = clientHeight - scrollHeight + scrollTop;
+    if (scrollBottom >= 0) {
+      setHasReadDisclaimer(true);
+    }
+  };
+  useOnMount(() => {
+    onScroll();
+  });
+  function renderChatBubble() {
+    return isDarkTheme ? React.createElement(ChatBubbleDark, null) : React.createElement(ChatBubbleLight, null);
+  }
+  return React.createElement("div", {
+    className: "WACDisclaimerContainer"
+  }, React.createElement("div", {
+    className: "WAC__disclaimer"
+  }, React.createElement(SimpleHeaderExport, {
+    useAITheme: useAITheme,
+    onClose: onClose,
+    testIdPrefix: OverlayPanelName.DISCLAIMER
+  }), React.createElement("div", {
+    className: "WACPanelContent WAC__disclaimer-content",
+    onScroll: onScroll,
+    ref: disclaimerContent
+  }, React.createElement("div", {
+    className: "WAC__disclaimer-icon"
+  }, renderChatBubble()), React.createElement("h1", {
+    className: "WAC__disclaimer-title"
+  }, languagePack.disclaimer_title), React.createElement(MaybeDangerouslySetInnerHTMLExport, {
+    className: "WAC__disclaimer-description",
+    html: disclaimerHTML
+  })), React.createElement("div", {
+    className: "WAC__disclaimer-buttons"
+  }, React.createElement("div", {
+    className: "WAC__disclaimer-buttonsPadding"
+  }, React.createElement(Button, {
+    className: "WAC__disclaimer-acceptButton",
+    ref: disclaimerAcceptButtonRef,
+    onClick: onAcceptDisclaimer,
+    size: chatWidthBreakpoint === ChatWidthBreakpoint.WIDE ? "2xl" : "lg",
+    disabled: !hasReadDisclaimer
+  }, languagePack.disclaimer_accept)))));
+}
+
+export { Disclaimer, Disclaimer as default };