@vectara/vectara-ui 0.0.2

package/lib/components/button/buttonTertiary.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+
+.vuiButtonTertiary {
+  padding-left: $sizeXs;
+  padding-right: $sizeXs;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.vuiButtonTertiary-noPadding {
+  padding: 0;
+}
+
+// Color
+$color: (
+  accent: (
+    "color": $colorAccent,
+    "selected-color": transparentize($colorAccent, 0.9)
+  ),
+  primary: (
+    "color": $colorPrimary,
+    "selected-color": transparentize($colorPrimary, 0.9)
+  ),
+  success: (
+    "color": $colorSuccess,
+    "selected-color": transparentize($colorSuccess, 0.9)
+  ),
+  danger: (
+    "color": $colorDanger,
+    "selected-color": transparentize($colorDanger, 0.9)
+  ),
+  warning: (
+    "color": $colorWarning,
+    "selected-color": transparentize($colorWarning, 0.9)
+  ),
+  neutral: (
+    "color": $colorText,
+    "selected-color": transparentize($colorText, 0.9)
+  ),
+  subdued: (
+    "color": $colorSubdued,
+    "selected-color": transparentize($colorSubdued, 0.9)
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiButtonTertiary--#{$colorName} {
+    color: #{map.get($colorValue, "color")};
+
+    &.vuiButtonTertiary-isSelected {
+      background-color: #{map.get($colorValue, "selected-color")};
+    }
+  }
+}

package/lib/components/button/createButtonIcon.d.ts

@@ -0,0 +1,3 @@
+import { BaseButtonProps } from "./BaseButton";
+import { ButtonColor } from "./types";
+export declare const createButtonIcon: (icon: BaseButtonProps["icon"], size: BaseButtonProps["size"], color: ButtonColor, colorToIconColorMap?: Record<ButtonColor, string>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/lib/components/button/createButtonIcon.js

@@ -0,0 +1,24 @@
+import { cloneElement } from "react";
+const sizeToIconSizeMap = {
+    xs: "xs",
+    s: "xs",
+    m: "s",
+    l: "m"
+};
+const defaultColorToIconColorMap = {
+    accent: "accent",
+    primary: "primary",
+    success: "success",
+    danger: "danger",
+    warning: "warning",
+    neutral: "neutral",
+    subdued: "subdued"
+};
+export const createButtonIcon = (icon, size, color, colorToIconColorMap = defaultColorToIconColorMap) => {
+    return icon
+        ? cloneElement(icon, {
+            size: size ? sizeToIconSizeMap[size] : "s",
+            color: icon.props.color === "inherit" ? colorToIconColorMap[color] : icon.props.color
+        })
+        : null;
+};

package/lib/components/button/iconButton.scss

@@ -0,0 +1,44 @@
+.vuiIconButton {
+  display: inline-block;
+  border-radius: $sizeXxs;
+  padding: $sizeXxs;
+  line-height: 1;
+}
+
+// Color
+$color: (
+  accent: $colorAccent,
+  primary: $colorPrimary,
+  success: $colorSuccess,
+  warning: $colorWarning,
+  danger: $colorDanger,
+  neutral: $colorText,
+  subdued: $colorSubdued
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiIconButton--#{$colorName} {
+    color: $colorValue;
+    background-color: transparentize($color: $colorValue, $amount: 1);
+
+    &:hover {
+      background-color: transparentize($color: $colorValue, $amount: 0.9);
+    }
+  }
+}
+
+// Size
+.vuiIconButton--xs {
+  padding: $sizeXxs;
+  height: 24px;
+}
+
+.vuiIconButton--s {
+  padding: $sizeXs * 0.75;
+  height: 28px;
+}
+
+.vuiIconButton--m {
+  padding: $sizeXs;
+  height: 34px;
+}

package/lib/components/button/types.d.ts

@@ -0,0 +1,3 @@
+export declare const BUTTON_SIZE: readonly ["xs", "s", "m", "l"];
+export declare const BUTTON_COLOR: readonly ["accent", "primary", "success", "danger", "warning", "neutral", "subdued"];
+export type ButtonColor = (typeof BUTTON_COLOR)[number];

package/lib/components/button/types.js

@@ -0,0 +1,2 @@
+export const BUTTON_SIZE = ["xs", "s", "m", "l"];
+export const BUTTON_COLOR = ["accent", "primary", "success", "danger", "warning", "neutral", "subdued"];

package/lib/components/callout/Callout.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { CALLOUT_SIZE, CalloutColor } from "./types";
+declare const HEADING_ELEMENT: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+type Props = {
+    children?: ReactNode;
+    title: string;
+    headingElement: (typeof HEADING_ELEMENT)[number];
+    color: CalloutColor;
+    size?: (typeof CALLOUT_SIZE)[number];
+    onDismiss?: () => void;
+};
+export declare const VuiCallout: ({ children, title, headingElement, color, size, onDismiss, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/callout/Callout.js

@@ -0,0 +1,40 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiTitle } from "../typography/Title";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiText } from "../typography/Text";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIconButton } from "../button/IconButton";
+import { BiX } from "react-icons/bi";
+const HEADING_ELEMENT = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+const sizeToTitleSizeMap = {
+    s: "xs",
+    m: "s"
+};
+const sizeToSpacerSizeMap = {
+    s: "xxs",
+    m: "xs"
+};
+const sizeToContentSizeMap = {
+    s: "xs",
+    m: "s"
+};
+export const VuiCallout = (_a) => {
+    var { children, title, headingElement, color, size = "m", onDismiss } = _a, rest = __rest(_a, ["children", "title", "headingElement", "color", "size", "onDismiss"]);
+    const classes = classNames("vuiCallout", `vuiCallout--${color}`, `vuiCallout--${size}`);
+    const HeadingElement = headingElement;
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: sizeToTitleSizeMap[size] }, { children: _jsx(HeadingElement, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })) })), onDismiss && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { className: "vuiCallout__closeButton", "data-testid": "calloutCloseButton", color: color, onClick: onDismiss, icon: _jsx(BiX, {}), size: "s" }) })))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: sizeToSpacerSizeMap[size] }), _jsx(VuiText, Object.assign({ size: sizeToContentSizeMap[size] }, { children: children }))] }))] })));
+};

package/lib/components/callout/_index.scss

@@ -0,0 +1,49 @@
+@use "sass:map";
+
+.vuiCallout {
+  width: 100%;
+}
+
+.vuiCallout--m {
+  padding: $sizeM;
+
+  .vuiCallout__closeButton {
+    margin: -$sizeM * 0.5;
+  }
+}
+
+.vuiCallout--s {
+  padding: $sizeS;
+
+  .vuiCallout__closeButton {
+    margin: -$sizeS * 0.5;
+  }
+}
+
+// Color
+$color: (
+  accent: (
+    "background-color": transparentize($colorAccent, 0.9)
+  ),
+  primary: (
+    "background-color": $colorPrimaryLightShade
+  ),
+  success: (
+    "background-color": transparentize($colorSuccess, 0.9)
+  ),
+  warning: (
+    "background-color": transparentize($colorWarning, 0.9)
+  ),
+  danger: (
+    "background-color": $colorDangerLightShade
+  ),
+  neutral: (
+    "background-color": $colorLightShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiCallout--#{$colorName} {
+    background-color: #{map.get($colorValue, "background-color")};
+  }
+}

package/lib/components/callout/types.d.ts

@@ -0,0 +1,3 @@
+export declare const CALLOUT_COLOR: readonly ["neutral", "primary", "danger", "success", "accent", "warning"];
+export declare const CALLOUT_SIZE: readonly ["s", "m"];
+export type CalloutColor = (typeof CALLOUT_COLOR)[number];

package/lib/components/callout/types.js

@@ -0,0 +1,2 @@
+export const CALLOUT_COLOR = ["neutral", "primary", "danger", "success", "accent", "warning"];
+export const CALLOUT_SIZE = ["s", "m"];

package/lib/components/card/Card.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    header?: React.ReactNode;
+    body?: React.ReactNode;
+    footer?: React.ReactNode;
+    align?: "center" | "left" | "right";
+    className?: string;
+    interactive?: boolean;
+    href?: string;
+    padding?: "s" | "m" | "l";
+    highlight?: boolean;
+    ungrouped?: boolean;
+};
+export declare const VuiCard: ({ header, body, footer, align, interactive, href, className, padding, highlight, ungrouped, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/card/Card.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiCard = (_a) => {
+    var { header, body, footer, align = "left", interactive, href, className, padding = "s", highlight, ungrouped } = _a, rest = __rest(_a, ["header", "body", "footer", "align", "interactive", "href", "className", "padding", "highlight", "ungrouped"]);
+    const classes = classNames("vuiCard", `vuiCard--${align}`, `vuiCard--${padding}`, {
+        "vuiCard--interactive": interactive && !href,
+        "vuiCard--link": href,
+        "vuiCard--highlight": highlight,
+        "vuiCard--ungrouped": ungrouped
+    }, className);
+    const headerContent = header && _jsx("div", Object.assign({ className: "vuiCard__header" }, { children: header }));
+    const bodyContent = body && _jsx("div", Object.assign({ className: "vuiCard__body" }, { children: body }));
+    const footerContent = footer && _jsx("div", Object.assign({ className: "vuiCard__footer" }, { children: footer }));
+    if (href) {
+        return (_jsxs("a", Object.assign({ className: classes, href: href }, rest, { children: [headerContent, bodyContent, footerContent] })));
+    }
+    return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [headerContent, bodyContent, footerContent] })));
+};

package/lib/components/card/_index.scss

@@ -0,0 +1,114 @@
+.vuiCard {
+  display: flex;
+  flex-direction: column;
+  background-color: $colorEmptyShade;
+  border-radius: $sizeXs;
+  box-shadow: $shadowLargeStart;
+  width: 100%;
+  height: 100%;
+  transition: box-shadow $transitionSpeed;
+  overflow: hidden;
+}
+
+.vuiCard--interactive {
+  &:hover {
+    box-shadow: $shadowLargeEnd;
+    z-index: 1;
+  }
+}
+
+.vuiCard--ungrouped {
+  height: auto;
+}
+
+.vuiCard--center {
+  align-items: center;
+  text-align: center;
+
+  .vuiCard__header,
+  .vuiCard__body,
+  .vuiCard__footer {
+    align-items: center;
+    text-align: center;
+  }
+}
+
+.vuiCard--left {
+  align-items: flex-start;
+  text-align: left;
+
+  .vuiCard__header,
+  .vuiCard__body,
+  .vuiCard__footer {
+    align-items: flex-start;
+    text-align: left;
+  }
+}
+
+.vuiCard__header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: $sizeM $sizeL;
+}
+
+.vuiCard__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-top: 1px solid $borderColorLight;
+  padding: $sizeM $sizeL;
+  flex-grow: 1;
+}
+
+.vuiCard__footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 $sizeL $sizeM;
+}
+
+.vuiCard--s {
+  .vuiCard__header,
+  .vuiCard__body {
+    padding: $sizeM $sizeL;
+  }
+
+  .vuiCard__footer {
+    padding: 0 $sizeL $sizeM;
+  }
+}
+
+.vuiCard--m {
+  .vuiCard__header,
+  .vuiCard__body {
+    padding: $sizeL $sizeXl;
+  }
+
+  .vuiCard__footer {
+    padding: 0 $sizeXl $sizeL;
+  }
+}
+
+.vuiCard--l {
+  .vuiCard__header,
+  .vuiCard__body {
+    padding: $sizeXl $sizeXxl;
+  }
+
+  .vuiCard__footer {
+    padding: 0 $sizeXxl $sizeXl;
+  }
+}
+
+.vuiCard--highlight {
+  border: 2px solid $colorAccent;
+
+  .vuiCard__header {
+    background-color: $colorAccentLightShade;
+  }
+
+  .vuiCard__body {
+    border-top: $colorAccentLightShade;
+  }
+}

package/lib/components/chat/Chat.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChatStyle, ChatTurn } from "./types";
+type Props = {
+    openPrompt: string;
+    chatStyle: ChatStyle;
+    setChatStyle: (chatStyle: ChatStyle) => void;
+    introduction?: string;
+    suggestions?: string[];
+    onInput: (input: string) => void;
+    onRetry: (trun: ChatTurn) => void;
+    onReset: () => void;
+    conversation: ChatTurn[];
+    settings?: React.ReactNode;
+    isInspectionEnabled?: boolean;
+};
+export declare const VuiChat: ({ openPrompt, chatStyle, setChatStyle, introduction, suggestions, onInput, onRetry, onReset, conversation, settings, isInspectionEnabled }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chat/Chat.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { BiChat, BiExpand, BiExpandVertical, BiPaperPlane, BiX } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiTextInput } from "../form";
+import { CHAT_STYLE_ORDER } from "./types";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+import { VuiChatInspector } from "./ChatInspector";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiButtonTertiary } from "../button/ButtonTertiary";
+import { VuiChatTurn } from "./ChatTurn";
+import { VuiChatPanel } from "./ChatPanel";
+const chatStyleToIconMap = {
+    closed: _jsx(BiX, {}),
+    condensed: _jsx(BiExpandVertical, {}),
+    tall: _jsx(BiExpand, {}),
+    fullScreen: _jsx(BiX, {})
+};
+export const VuiChat = ({ openPrompt, chatStyle, setChatStyle, introduction, suggestions, onInput, onRetry, onReset, conversation, settings, isInspectionEnabled }) => {
+    const [isTouched, setIsTouched] = useState(false);
+    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+    const [input, setInput] = useState("");
+    const [inspectedTurn, setInspectedTurn] = useState();
+    const buttonRef = useRef(null);
+    const conversationRef = useRef(null);
+    const inputRef = useRef(null);
+    const isScrolledToBottomRef = useRef(true);
+    const prevConversationRef = useRef({
+        isBottomQuestionLoading: true,
+        length: 0
+    });
+    const isOpen = chatStyle !== "closed";
+    useEffect(() => {
+        var _a;
+        const onScrollChat = (e) => {
+            isScrolledToBottomRef.current = conversationRef.current
+                ? Math.abs(conversationRef.current.scrollHeight -
+                    conversationRef.current.clientHeight -
+                    conversationRef.current.scrollTop) < 1
+                : true;
+        };
+        // We're going to track the scroll position, which will determine
+        // or not the user is at the bottom of the chat.
+        (_a = conversationRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", onScrollChat);
+        return () => {
+            var _a;
+            (_a = conversationRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", onScrollChat);
+        };
+    }, []);
+    useEffect(() => {
+        // Scrolling UX rules:
+        // * Scroll down if the last recorded scroll position was already
+        //   at the bottom of the list and if the last question has resolved
+        //   to an answer.
+        // * If the user has scrolled to another position, then don’t
+        //   auto-scroll.
+        // * If the question that has resolved is not the last question,
+        //   don’t auto-scroll.
+        //
+        // This way if the user takes control of the scroll position, they
+        // remain in control. If the user hasn’t taken control of the scroll
+        // position, then the scroll feels stable (by staying at the
+        // bottom) as opposed to scrolling unpredictably through the list
+        // as questions resolve.
+        var _a, _b, _c;
+        const hasBottomQuestionJustChanged = 
+        // A new question has been added to the bottom of the list.
+        prevConversationRef.current.length !== conversation.length ||
+            // The last question has just resolved to an answer.
+            prevConversationRef.current.isBottomQuestionLoading !== Boolean((_a = conversation[conversation.length - 1]) === null || _a === void 0 ? void 0 : _a.isLoading);
+        // If the intro is really long, the chat can be in a state where
+        // the user is at the top of the chat and their first question is
+        // off-screen. In this case, we want to scroll to the bottom.
+        const shouldStickToBottom = conversation.length === 1 || (isScrolledToBottomRef.current && hasBottomQuestionJustChanged);
+        if (isOpen && shouldStickToBottom) {
+            // Scroll to the bottom of the chat to keep the latest turn in view.
+            (_b = conversationRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: 0,
+                top: (_c = conversationRef.current) === null || _c === void 0 ? void 0 : _c.scrollHeight,
+                behavior: "smooth"
+            });
+        }
+        prevConversationRef.current = {
+            length: conversation.length,
+            isBottomQuestionLoading: conversation.length > 0 ? Boolean(conversation[conversation.length - 1].isLoading) : false
+        };
+    }, [conversation]);
+    useEffect(() => {
+        var _a, _b;
+        // Only autofocus if the user has interacted with the component.
+        // This prevents the component stealing focus when it first mounts.
+        if (isTouched) {
+            if (isOpen) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [isOpen]);
+    const onSubmit = () => {
+        if (!(input === null || input === void 0 ? void 0 : input.trim()))
+            return;
+        onInput(input);
+        setInput("");
+    };
+    const cycleChatStyle = () => {
+        setIsTouched(true);
+        const currentIndex = CHAT_STYLE_ORDER.indexOf(chatStyle);
+        setChatStyle(currentIndex === CHAT_STYLE_ORDER.length - 1 ? CHAT_STYLE_ORDER[0] : CHAT_STYLE_ORDER[currentIndex + 1]);
+    };
+    const buttonClasses = classNames("vuiChatButton", {
+        "vuiChatButton-isHidden": isOpen
+    });
+    const classes = classNames("vuiChat", `vuiChat--${chatStyle}`);
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ 
+                // @ts-expect-error React doesn't support inert yet
+                inert: isOpen ? "" : null, className: buttonClasses, onClick: () => setChatStyle("condensed"), ref: buttonRef }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChat, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: "vuiChatButton__prompt" }, { children: openPrompt })) }))] })) })), _jsxs("div", Object.assign({ 
+                // @ts-expect-error React doesn't support inert yet
+                inert: !isOpen ? "" : null, className: classes, onKeyDown: (e) => {
+                    if (e.key === "Escape")
+                        setChatStyle("closed");
+                } }, { children: [_jsx("div", Object.assign({ className: "vuiChat__header" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChat, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: "vuiChatButton__prompt" }, { children: _jsx("h2", { children: openPrompt }) })) }))] })) })), settings && (_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "xs", onClick: () => setIsSettingsOpen(true) }, { children: "Settings" })) })))] })) })), _jsxs("div", Object.assign({ className: "vuiChat__conversation", ref: conversationRef }, { children: [(introduction || suggestions) && (_jsxs("div", Object.assign({ className: "vuiChat__introduction" }, { children: [introduction, introduction && _jsx(VuiSpacer, { size: "s" }), suggestions === null || suggestions === void 0 ? void 0 : suggestions.map((suggestion) => (_jsx("div", { children: _jsx(VuiButtonTertiary, Object.assign({ size: "s", color: "primary", onClick: () => onInput(suggestion), noPadding: true }, { children: suggestion }), suggestion) }))), suggestions && suggestions.length > 0 && _jsx(VuiSpacer, { size: "s" })] }))), conversation.length > 0 && (_jsx("div", Object.assign({ className: "vuiChat__turns" }, { children: conversation.map((turn, index) => (_jsx(VuiChatTurn, { turn: turn, isInspectionEnabled: isInspectionEnabled, setInspectedTurn: setInspectedTurn, onRetry: onRetry }, index))) }))), conversation.length > 0 && (_jsx("div", Object.assign({ className: "vuiChat__conversationActions" }, { children: _jsx(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "center" }, { children: _jsx(VuiFlexItem, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "xs", onClick: onReset }, { children: "Start over" })) }) })) })))] })), _jsx("div", Object.assign({ className: "vuiChat__input" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTextInput, { value: input, onChange: (e) => {
+                                            setInput(e.currentTarget.value);
+                                        }, onSubmit: onSubmit, fullWidth: true, ref: inputRef }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: _jsx(BiPaperPlane, {}) }), color: "primary", onClick: onSubmit }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: chatStyleToIconMap[chatStyle] }), color: "neutral", onClick: cycleChatStyle }) }))] })) })), isSettingsOpen && (_jsx(VuiChatPanel, Object.assign({ title: "Chat settings", onClose: () => setIsSettingsOpen(false) }, { children: settings }))), Boolean(inspectedTurn) && (_jsx(VuiChatInspector, { turn: inspectedTurn, onClose: () => setInspectedTurn(undefined) }))] }))] }));
+};

package/lib/components/chat/ChatInspector.d.ts

@@ -0,0 +1,7 @@
+import { ChatTurn } from "./types";
+type Props = {
+    turn?: ChatTurn;
+    onClose: () => void;
+};
+export declare const VuiChatInspector: ({ turn, onClose }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chat/ChatInspector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+import { VuiChatPanel } from "./ChatPanel";
+import { VuiChatSearchResult } from "./ChatSearchResult";
+export const VuiChatInspector = ({ turn, onClose }) => {
+    var _a;
+    return (_jsxs(VuiChatPanel, Object.assign({ title: "Chat inspector", onClose: onClose }, { children: [_jsx(VuiText, { children: _jsxs("p", { children: [_jsx("strong", { children: "You asked," }), " \"", turn === null || turn === void 0 ? void 0 : turn.question, "\""] }) }), _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, { children: _jsxs("p", { children: [_jsx("strong", { children: "This was interpreted as:" }), " \"", turn === null || turn === void 0 ? void 0 : turn.query, "\""] }) }), _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, { children: _jsxs("p", { children: [_jsx("strong", { children: "This was the response:" }), " \"", turn === null || turn === void 0 ? void 0 : turn.answer, "\""] }) }), _jsx(VuiSpacer, { size: "xs" }), _jsx(VuiText, { children: _jsx("p", { children: _jsx("strong", { children: "We created this response based on the preceding conversation and this information:" }) }) }), _jsx(VuiSpacer, { size: "xs" }), (_a = turn === null || turn === void 0 ? void 0 : turn.results) === null || _a === void 0 ? void 0 : _a.map((result, index) => {
+                var _a, _b;
+                return (_jsxs(_Fragment, { children: [_jsx(VuiChatSearchResult, { result: result }), index < ((_b = (_a = turn.results) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(VuiSpacer, { size: "s" })] }));
+            })] })));
+};

package/lib/components/chat/ChatPanel.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    title: React.ReactNode;
+    onClose: () => void;
+    children?: React.ReactNode;
+};
+export declare const VuiChatPanel: ({ title, onClose, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chat/ChatPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BiX } from "react-icons/bi";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiTitle } from "../typography/Title";
+export const VuiChatPanel = ({ title, onClose, children }) => {
+    return (_jsxs("div", Object.assign({ className: "vuiChatPanel" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTitle, Object.assign({ size: "s" }, { children: _jsx("h3", { children: title }) })) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), color: "neutral", onClick: () => onClose() }) }))] })), _jsx(VuiSpacer, { size: "s" }), children, _jsx(VuiSpacer, { size: "l" })] })));
+};

package/lib/components/chat/ChatSearchResult.d.ts

@@ -0,0 +1,16 @@
+export type SearchResult = {
+    title?: string;
+    url?: string;
+    date?: string;
+    snippet: {
+        pre: string;
+        text: string;
+        post: string;
+    };
+};
+type Props = {
+    result: SearchResult;
+    className?: string;
+};
+export declare const VuiChatSearchResult: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement | null>>;
+export {};

package/lib/components/chat/ChatSearchResult.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { VuiLink } from "../link/Link";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+const highlightUrl = (url, text) => `${url}#:~:text=${text}`;
+export const VuiChatSearchResult = forwardRef((_a, ref) => {
+    var { result, className } = _a, rest = __rest(_a, ["result", "className"]);
+    const { title, url, date, snippet: { pre, post, text } } = result;
+    // Protect users' privacy in FullStory.
+    // https://help.fullstory.com/hc/en-us/articles/360020623574-How-do-I-protect-my-users-privacy-in-FullStory-#01F5DPW1AJHZHR8TBM9YQEDRMH
+    const classes = classNames("vuiChatSearchResult", "fs-mask", className);
+    return (_jsxs("div", Object.assign({ className: classes, ref: ref }, rest, { children: [(title || url) && (_jsx(VuiText, { children: url ? (_jsx(VuiLink, Object.assign({ href: highlightUrl(url, text), target: "_blank" }, { children: _jsx("p", { children: title !== null && title !== void 0 ? title : url }) }))) : (_jsx("p", { children: title })) })), _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsxs("p", { children: [date && _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [date, " \u2014 "] })), pre, " ", _jsx("strong", { children: text }), " ", post] }) }))] })));
+});