@yext/chat-ui-react 0.3.0 → 0.3.2

package/lib/esm/components/ChatInput.js

@@ -22,7 +22,7 @@ const builtInCssClasses = withStylelessCssClasses("Input", {
  *
  * @param props - {@link ChatInputProps}
  */
-export function ChatInput({ placeholder = "Type a message...", stream = true, inputAutoFocus = false, handleError, sendButtonIcon = _jsx(ArrowIcon, {}), customCssClasses, }) {
+export function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = false, handleError, sendButtonIcon = _jsx(ArrowIcon, {}), customCssClasses, }) {
     const chat = useChatActions();
     const [input, setInput] = useState("");
     const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
@@ -46,6 +46,6 @@ export function ChatInput({ placeholder = "Type a message...", stream = true, in
     const onInputChange = useCallback((e) => {
         setInput(e.target.value);
     }, []);
-    return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), _jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
+    return (_jsxs("div", { className: cssClasses.container, children: [_jsx(Textarea, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }), _jsx("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.length === 0, onClick: sendMessage, className: cssClasses.sendButton, children: sendButtonIcon })] }));
 }
 //# sourceMappingURL=ChatInput.js.map

package/lib/esm/components/ChatInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/components/ChatInput.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAYD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAeD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}

package/lib/esm/components/ChatPanel.js

@@ -12,6 +12,9 @@ const builtInCssClasses = withStylelessCssClasses("Panel", {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesContainer: "flex flex-col gap-y-1 mt-auto px-4 pb-[85px] overflow-auto",
     inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
+    messageBubbleCssClasses: {
+        topContainer: "first:mt-4",
+    },
 });
 /**
  * A component that renders a full panel for chat bot interactions. This includes
@@ -35,7 +38,7 @@ export function ChatPanel(props) {
         if (messages.length !== 0 || !canSendMessage) {
             return;
         }
-        const { stream = true, handleError } = props;
+        const { stream = false, handleError } = props;
         const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
         res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
     }, [chat, props, messages, defaultHandleApiError, canSendMessage]);

package/lib/esm/components/ChatPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatPanel.js","sourceRoot":"","sources":["../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components/ChatPopUp.js

@@ -22,7 +22,7 @@ const builtInCssClasses = withStylelessCssClasses("PopUp", {
         container: "max-[480px]:rounded-none rounded-t-3xl",
     },
     panelCssClasses: {
-        container: "max-[480px]:rounded-none rounded-b-3xl",
+        container: "max-[480px]:rounded-none rounded-3xl",
         inputContainer: "max-[480px]:rounded-none rounded-b-3xl",
     },
 });

package/lib/esm/components/ChatPopUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;IACE,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EACH,aAAa;QACb,sGAAsG;IACxG,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;IAChE,UAAU,EAAE,yDAAyD;IACrE,gBAAgB,EAAE;QAChB,SAAS,EAAE,wCAAwC;KACpD;IACD,eAAe,EAAE;QACf,SAAS,EAAE,wCAAwC;QACnD,cAAc,EAAE,wCAAwC;KACzD;CACF,CACF,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,OAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAClE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,cAAK,SAAS,EAAE,eAAe,gBAAa,kBAAkB,YAC5D,KAAC,SAAS,OACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJ,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAC7C,GAEJ,GACE,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,UAAU,GAAI,GAC/D,IACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ChatPopUp.js","sourceRoot":"","sources":["../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAuC,MAAM,aAAa,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAoB3E,MAAM,aAAa,GAAG,uDAAuD,CAAC;AAC9E,MAAM,iBAAiB,GAAwB,uBAAuB,CACpE,OAAO,EACP;IACE,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EACH,aAAa;QACb,sGAAsG;IACxG,cAAc,EAAE,4BAA4B;IAC5C,aAAa,EAAE,oDAAoD;IACnE,MAAM,EACJ,aAAa;QACb,gLAAgL;IAClL,eAAe,EAAE,sCAAsC;IACvD,cAAc,EACZ,8DAA8D;IAChE,UAAU,EAAE,yDAAyD;IACrE,gBAAgB,EAAE;QAChB,SAAS,EAAE,wCAAwC;KACpD;IACD,eAAe,EAAE;QACf,SAAS,EAAE,sCAAsC;QACjD,cAAc,EAAE,wCAAwC;KACzD;CACF,CACF,CAAC;AAkBF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GAAG,IAAI,EACxB,OAAO,EAAE,aAAa,EACtB,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,aAAa,EAAE,EAAE,CAAC;IACpB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,OAAO,CAC7B,UAAU,CAAC,KAAK,EAChB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,MAAM,EACjB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAClE,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,cAAK,SAAS,EAAE,eAAe,gBAAa,kBAAkB,YAC5D,KAAC,SAAS,OACJ,KAAK,EACT,gBAAgB,EAAE,UAAU,CAAC,eAAe,EAC5C,MAAM,EACJ,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,IAAI,EACrB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAC7C,GAEJ,GACE,EACN,+BACa,mBAAmB,EAC9B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,gBAAgB,YAE1B,mBAAmB,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,UAAU,GAAI,GAC/D,IACL,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/components/FeedbackButtons.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The CSS class interface for the {@link FeedbackButtons} component.
+ *
+ * @public
+ */
+export interface FeedbackButtonsCssClasses {
+    container?: string;
+    thumbsUpButton?: string;
+    thumbsUpIcon?: string;
+    thumbsUpFillIcon?: string;
+    thumbsDownButton?: string;
+    thumbsDownIcon?: string;
+    thumbsDownFillIcon?: string;
+}
+/**
+ * The props for the {@link FeedbackButtons} component.
+ *
+ * @internal
+ */
+interface FeedbackButtonsProps {
+    /** CSS classes for customizing the component styling. */
+    customCssClasses?: FeedbackButtonsCssClasses;
+}
+/**
+ * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
+ * report analytic events on click.
+ *
+ * @internal
+ */
+export declare function FeedbackButtons({ customCssClasses }: FeedbackButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FeedbackButtons.d.ts.map

package/lib/esm/components/FeedbackButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackButtons.d.ts","sourceRoot":"","sources":["../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAcD;;;;GAIG;AACH,UAAU,oBAAoB;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;CAC9C;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,gBAAgB,EAAE,EAAE,oBAAoB,2CAoCzE"}

package/lib/esm/components/FeedbackButtons.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThumbsDownIcon } from "../icons/ThumbsDown";
+import { ThumbsUpIcon } from "../icons/ThumbsUp";
+import { useCallback, useState } from "react";
+import { ThumbsUpFillIcon } from "../icons/ThumbsUpFill";
+import { ThumbsDownFillIcon } from "../icons/ThumbsDownFill";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+import { useComposedCssClasses } from "../hooks";
+const builtInCssClasses = withStylelessCssClasses("FeedbackButtons", {
+    container: "flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200",
+    thumbsUpButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
+    thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
+    thumbsUpFillIcon: "text-gray-700 w-[22px] h-[22px] stroke-[0.2]",
+    thumbsDownButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
+    thumbsDownIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
+    thumbsDownFillIcon: "text-gray-700 w-[22px] h-[22px] stroke-[0.2]",
+});
+/**
+ * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
+ * report analytic events on click.
+ *
+ * @internal
+ */
+export function FeedbackButtons({ customCssClasses }) {
+    const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+    const [selectedThumb, setSelectedThumb] = useState();
+    const onClickThumbsUp = useCallback(() => {
+        setSelectedThumb("UP");
+        console.log("thumbs up");
+    }, []);
+    const onClickThumbsDown = useCallback(() => {
+        setSelectedThumb("DOWN");
+        console.log("thumbs down");
+    }, []);
+    return (_jsxs("div", { className: cssClasses.container, children: [_jsx("button", { className: cssClasses.thumbsUpButton, onClick: onClickThumbsUp, children: selectedThumb === "UP" ? (_jsx(ThumbsUpFillIcon, { className: cssClasses.thumbsUpFillIcon })) : (_jsx(ThumbsUpIcon, { className: cssClasses.thumbsUpIcon })) }), _jsx("button", { className: cssClasses.thumbsDownButton, onClick: onClickThumbsDown, children: selectedThumb === "DOWN" ? (_jsx(ThumbsDownFillIcon, { className: cssClasses.thumbsDownFillIcon })) : (_jsx(ThumbsDownIcon, { className: cssClasses.thumbsDownIcon })) })] }));
+}
+//# sourceMappingURL=FeedbackButtons.js.map

package/lib/esm/components/FeedbackButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackButtons.js","sourceRoot":"","sources":["../../../src/components/FeedbackButtons.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAiBjD,MAAM,iBAAiB,GACrB,uBAAuB,CAA4B,iBAAiB,EAAE;IACpE,SAAS,EACP,sFAAsF;IACxF,cAAc,EAAE,iEAAiE;IACjF,YAAY,EAAE,2CAA2C;IACzD,gBAAgB,EAAE,8CAA8C;IAChE,gBAAgB,EAAE,iEAAiE;IACnF,cAAc,EAAE,2CAA2C;IAC3D,kBAAkB,EAAE,8CAA8C;CACnE,CAAC,CAAC;AAYL;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,gBAAgB,EAAwB;IACxE,MAAM,UAAU,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAE/C,CAAC;IACJ,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACzB,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,SAAS,aAClC,iBAAQ,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,YACnE,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,KAAC,gBAAgB,IAAC,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAI,CAC7D,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IAAC,SAAS,EAAE,UAAU,CAAC,YAAY,GAAI,CACrD,GACM,EACT,iBACE,SAAS,EAAE,UAAU,CAAC,gBAAgB,EACtC,OAAO,EAAE,iBAAiB,YAEzB,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,CAC1B,KAAC,kBAAkB,IAAC,SAAS,EAAE,UAAU,CAAC,kBAAkB,GAAI,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,GAAI,CACzD,GACM,IACL,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/icons/ThumbsDown.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ThumbsDownIcon({ className, }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=ThumbsDown.d.ts.map

package/lib/esm/icons/ThumbsDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsDown.d.ts","sourceRoot":"","sources":["../../../src/icons/ThumbsDown.tsx"],"names":[],"mappings":";AAAA,wBAAgB,cAAc,CAAC,EAC7B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAgBd"}

package/lib/esm/icons/ThumbsDown.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ThumbsDownIcon({ className, }) {
+    return (_jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.1848 12.7875C7.5718 13.175 7.834 13.6625 7.9338 14.1875L8.2959 16H8.97C9.4195 16 9.8439 15.8 10.1311 15.45C10.4182 15.1 10.5306 14.65 10.4432 14.2L10.1061 12.5H11.2547H12.0037H13.7516C14.4382 12.5 15 11.9375 15 11.25C15 10.8375 14.8002 10.475 14.5006 10.25C14.8002 10.025 15 9.6625 15 9.25C15 8.7875 14.7378 8.375 14.3508 8.1625C14.588 7.9375 14.7503 7.6125 14.7503 7.25C14.7503 6.7875 14.4881 6.375 14.1011 6.1625C14.3383 5.9375 14.5006 5.6125 14.5006 5.25C14.5006 4.5625 13.9388 4 13.2522 4H12.0037H10.7553L7.2597 4C6.5605 4 5.9613 4.4125 5.6866 5H5.0125V5.5H6.0112H6.0362C6.1486 4.925 6.6604 4.5 7.2597 4.5L9.7566 4.5C9.5943 4.7125 9.5069 4.975 9.5069 5.25C9.5069 5.7125 9.769 6.125 10.156 6.3375C9.9189 6.5625 9.7566 6.8875 9.7566 7.25C9.7566 7.7125 10.0187 8.125 10.4057 8.3375C10.1685 8.5625 10.0062 8.8875 10.0062 9.25C10.0062 9.6625 10.206 10.025 10.5056 10.25C10.206 10.475 10.0062 10.8375 10.0062 11.25C10.0062 11.525 10.1061 11.7875 10.2559 12H9.4944L9.9563 14.3C10.0187 14.6 9.9438 14.9 9.7441 15.125C9.5568 15.3625 9.2697 15.4875 8.97 15.4875H8.6954L8.4082 14.075C8.2834 13.45 7.9713 12.875 7.5218 12.4125L6.0986 10.9875H5V11.4875H5.8989L7.1848 12.7875ZM10.7553 6C10.3433 6 10.0062 5.6625 10.0062 5.25C10.0062 4.8375 10.3433 4.5 10.7553 4.5H12.0037H13.2522C13.6642 4.5 14.0012 4.8375 14.0012 5.25C14.0012 5.6625 13.6642 6 13.2522 6H11.005H10.7553ZM11.005 8C10.593 8 10.2559 7.6625 10.2559 7.25C10.2559 6.8375 10.593 6.5 11.005 6.5H13.2522H13.5019C13.9139 6.5 14.2509 6.8375 14.2509 7.25C14.2509 7.6625 13.9139 8 13.5019 8H11.2547H11.005ZM10.5056 9.25C10.5056 8.8375 10.8427 8.5 11.2547 8.5H13.5019H13.7516C14.1636 8.5 14.5006 8.8375 14.5006 9.25C14.5006 9.6625 14.1636 10 13.7516 10H11.2547C10.8427 10 10.5056 9.6625 10.5056 9.25ZM10.5056 11.25C10.5056 10.8375 10.8427 10.5 11.2547 10.5H13.7516C14.1636 10.5 14.5006 10.8375 14.5006 11.25C14.5006 11.6625 14.1636 12 13.7516 12H12.0037H11.2547C10.8427 12 10.5056 11.6625 10.5056 11.25Z", fill: "currentColor" }) }));
+}
+//# sourceMappingURL=ThumbsDown.js.map

package/lib/esm/icons/ThumbsDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsDown.js","sourceRoot":"","sources":["../../../src/icons/ThumbsDown.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,GAGV;IACC,OAAO,CACL,cACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,+5DAA+5D,EACj6D,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/icons/ThumbsDownFill.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ThumbsDownFillIcon({ className, }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=ThumbsDownFill.d.ts.map

package/lib/esm/icons/ThumbsDownFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsDownFill.d.ts","sourceRoot":"","sources":["../../../src/icons/ThumbsDownFill.tsx"],"names":[],"mappings":";AAAA,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAoBd"}

package/lib/esm/icons/ThumbsDownFill.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThumbsDownFillIcon({ className, }) {
+    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.93383 14.1875C7.83396 13.6625 7.57178 13.175 7.18477 12.7875L5.89888 11.4875H5L5.01248 5H5.68664C5.9613 4.4125 6.56055 4 7.25968 4L10.7553 4H12.0037H13.2522C13.9388 4 14.5006 4.5625 14.5006 5.25C14.5006 5.6125 14.3383 5.9375 14.1011 6.1625C14.4881 6.375 14.7503 6.7875 14.7503 7.25C14.7503 7.6125 14.588 7.9375 14.3508 8.1625C14.7378 8.375 15 8.7875 15 9.25C15 9.6625 14.8002 10.025 14.5006 10.25C14.8002 10.475 15 10.8375 15 11.25C15 11.9375 14.4382 12.5 13.7516 12.5H12.0037H11.2547H10.1061L10.4432 14.2C10.5306 14.65 10.4182 15.1 10.1311 15.45C9.84395 15.8 9.41948 16 8.97004 16H8.29588L7.93383 14.1875Z", fill: "white" }), _jsx("path", { d: "M10.7547 6.004C10.3427 6.004 10.0056 5.6665 10.0056 5.254C10.0056 4.8415 10.3427 4.504 10.7547 4.504L12.0031 4.504H13.2516C13.6635 4.504 14.0006 4.8415 14.0006 5.254C14.0006 5.6665 13.6635 6.004 13.2516 6.004H11.0044L10.7547 6.004ZM11.0044 8.004C10.5924 8.004 10.2553 7.6665 10.2553 7.254C10.2553 6.8415 10.5924 6.504 11.0044 6.504H13.2516H13.5012C13.9132 6.504 14.2503 6.8415 14.2503 7.254C14.2503 7.6665 13.9132 8.004 13.5012 8.004H11.2541H11.0044ZM10.505 9.254C10.505 8.8415 10.8421 8.504 11.2541 8.504H13.5012H13.7509C14.1629 8.504 14.5 8.8415 14.5 9.254C14.5 9.6665 14.1629 10.004 13.7509 10.004H11.2541C10.8421 10.004 10.505 9.6665 10.505 9.254ZM10.505 11.254C10.505 10.8415 10.8421 10.504 11.2541 10.504H13.7509C14.1629 10.504 14.5 10.8415 14.5 11.254C14.5 11.6665 14.1629 12.004 13.7509 12.004H12.0031H11.2541C10.8421 12.004 10.505 11.6665 10.505 11.254Z", fill: "currentColor" })] }));
+}
+//# sourceMappingURL=ThumbsDownFill.js.map

package/lib/esm/icons/ThumbsDownFill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsDownFill.js","sourceRoot":"","sources":["../../../src/icons/ThumbsDownFill.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,GAGV;IACC,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eACE,CAAC,EAAC,mmBAAmmB,EACrmB,IAAI,EAAC,OAAO,GACZ,EACF,eACE,CAAC,EAAC,g2BAAg2B,EACl2B,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/icons/ThumbsUp.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ThumbsUpIcon({ className, }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=ThumbsUp.d.ts.map

package/lib/esm/icons/ThumbsUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsUp.d.ts","sourceRoot":"","sources":["../../../src/icons/ThumbsUp.tsx"],"names":[],"mappings":";AAAA,wBAAgB,YAAY,CAAC,EAC3B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAgBd"}

package/lib/esm/icons/ThumbsUp.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ThumbsUpIcon({ className, }) {
+    return (_jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", stroke: "currentColor", className: className, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.8152 7.2125C12.4282 6.825 12.166 6.3375 12.0662 5.8125L11.7041 4H11.03C10.5805 4 10.1561 4.2 9.86891 4.55C9.58177 4.9 9.46941 5.35 9.5568 5.8L9.89388 7.5H8.74532H7.99625H6.24844C5.5618 7.5 5 8.0625 5 8.75C5 9.1625 5.19975 9.525 5.49938 9.75C5.19975 9.975 5 10.3375 5 10.75C5 11.2125 5.26217 11.625 5.64919 11.8375C5.41199 12.0625 5.24969 12.3875 5.24969 12.75C5.24969 13.2125 5.51186 13.625 5.89888 13.8375C5.66167 14.0625 5.49938 14.3875 5.49938 14.75C5.49938 15.4375 6.06117 16 6.74782 16H7.99625H9.24469H12.7403C13.4395 16 14.0387 15.5875 14.3134 15H14.9875V14.5H13.9888H13.9638C13.8514 15.075 13.3396 15.5 12.7403 15.5H10.2434C10.4057 15.2875 10.4931 15.025 10.4931 14.75C10.4931 14.2875 10.231 13.875 9.84395 13.6625C10.0811 13.4375 10.2434 13.1125 10.2434 12.75C10.2434 12.2875 9.98127 11.875 9.59426 11.6625C9.83146 11.4375 9.99376 11.1125 9.99376 10.75C9.99376 10.3375 9.79401 9.975 9.49438 9.75C9.79401 9.525 9.99376 9.1625 9.99376 8.75C9.99376 8.475 9.89388 8.2125 9.74407 8H10.5056L10.0437 5.7C9.98127 5.4 10.0562 5.1 10.2559 4.875C10.4432 4.6375 10.7303 4.5125 11.03 4.5125H11.3046L11.5918 5.925C11.7166 6.55 12.0287 7.125 12.4782 7.5875L13.9014 9.0125H15V8.5125H14.1011L12.8152 7.2125ZM9.24469 14C9.65668 14 9.99376 14.3375 9.99376 14.75C9.99376 15.1625 9.65668 15.5 9.24469 15.5H7.99625H6.74782C6.33583 15.5 5.99875 15.1625 5.99875 14.75C5.99875 14.3375 6.33583 14 6.74782 14H8.99501H9.24469ZM8.99501 12C9.40699 12 9.74407 12.3375 9.74407 12.75C9.74407 13.1625 9.40699 13.5 8.99501 13.5H6.74782H6.49813C6.08614 13.5 5.74906 13.1625 5.74906 12.75C5.74906 12.3375 6.08614 12 6.49813 12H8.74532H8.99501ZM9.49438 10.75C9.49438 11.1625 9.1573 11.5 8.74532 11.5H6.49813H6.24844C5.83645 11.5 5.49938 11.1625 5.49938 10.75C5.49938 10.3375 5.83645 10 6.24844 10H8.74532C9.1573 10 9.49438 10.3375 9.49438 10.75ZM9.49438 8.75C9.49438 9.1625 9.1573 9.5 8.74532 9.5H6.24844C5.83645 9.5 5.49938 9.1625 5.49938 8.75C5.49938 8.3375 5.83645 8 6.24844 8H7.99625H8.74532C9.1573 8 9.49438 8.3375 9.49438 8.75Z", fill: "currentColor" }) }));
+}
+//# sourceMappingURL=ThumbsUp.js.map

package/lib/esm/icons/ThumbsUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsUp.js","sourceRoot":"","sources":["../../../src/icons/ThumbsUp.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,GAGV;IACC,OAAO,CACL,cACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,y9DAAy9D,EAC39D,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/icons/ThumbsUpFill.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ThumbsUpFillIcon({ className, }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=ThumbsUpFill.d.ts.map

package/lib/esm/icons/ThumbsUpFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsUpFill.d.ts","sourceRoot":"","sources":["../../../src/icons/ThumbsUpFill.tsx"],"names":[],"mappings":";AAAA,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,GACV,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,GAAG,CAAC,OAAO,CAoBd"}

package/lib/esm/icons/ThumbsUpFill.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThumbsUpFillIcon({ className, }) {
+    return (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 20", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M12.0662 5.8125C12.166 6.3375 12.4282 6.825 12.8152 7.2125L14.1011 8.5125H15L14.9875 15H14.3134C14.0387 15.5875 13.4395 16 12.7403 16H9.24469H7.99625H6.74782C6.06117 16 5.49938 15.4375 5.49938 14.75C5.49938 14.3875 5.66167 14.0625 5.89888 13.8375C5.51186 13.625 5.24969 13.2125 5.24969 12.75C5.24969 12.3875 5.41199 12.0625 5.64919 11.8375C5.26217 11.625 5 11.2125 5 10.75C5 10.3375 5.19975 9.975 5.49938 9.75C5.19975 9.525 5 9.1625 5 8.75C5 8.0625 5.5618 7.5 6.24844 7.5H7.99625H8.74532H9.89388L9.5568 5.8C9.46941 5.35 9.58177 4.9 9.86891 4.55C10.1561 4.2 10.5805 4 11.03 4H11.7041L12.0662 5.8125Z", fill: "white" }), _jsx("path", { d: "M9.24532 13.996C9.6573 13.996 9.99438 14.3335 9.99438 14.746C9.99438 15.1585 9.6573 15.496 9.24532 15.496H7.99688H6.74844C6.33645 15.496 5.99938 15.1585 5.99938 14.746C5.99938 14.3335 6.33645 13.996 6.74844 13.996H8.99563H9.24532ZM8.99563 11.996C9.40762 11.996 9.74469 12.3335 9.74469 12.746C9.74469 13.1585 9.40762 13.496 8.99563 13.496H6.74844H6.49875C6.08677 13.496 5.74969 13.1585 5.74969 12.746C5.74969 12.3335 6.08677 11.996 6.49875 11.996H8.74594H8.99563ZM9.49501 10.746C9.49501 11.1585 9.15793 11.496 8.74594 11.496H6.49875H6.24906C5.83708 11.496 5.5 11.1585 5.5 10.746C5.5 10.3335 5.83708 9.996 6.24906 9.996H8.74594C9.15793 9.996 9.49501 10.3335 9.49501 10.746ZM9.49501 8.746C9.49501 9.1585 9.15793 9.496 8.74594 9.496H6.24906C5.83708 9.496 5.5 9.1585 5.5 8.746C5.5 8.3335 5.83708 7.996 6.24906 7.996H7.99688H8.74594C9.15793 7.996 9.49501 8.3335 9.49501 8.746Z", fill: "currentColor" })] }));
+}
+//# sourceMappingURL=ThumbsUpFill.js.map

package/lib/esm/icons/ThumbsUpFill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbsUpFill.js","sourceRoot":"","sources":["../../../src/icons/ThumbsUpFill.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,GAGV;IACC,OAAO,CACL,eACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,aAElC,eACE,CAAC,EAAC,wlBAAwlB,EAC1lB,IAAI,EAAC,OAAO,GACZ,EACF,eACE,CAAC,EAAC,w2BAAw2B,EAC12B,IAAI,EAAC,cAAc,GACnB,IACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/index.d.ts

@@ -94,7 +94,8 @@ export declare interface ChatInputProps {
     placeholder?: string;
     /**
      * Enable streaming behavior by making a request to Chat Streaming API.
-     * Defaults to true.
+     * This feature is experimental, and is subject to change.
+     * Defaults to false.
      */
     stream?: boolean;
     /** Enable auto focus for the input box. Defaults to false. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/index.js",

package/src/components/ChatHeader.tsx

@@ -86,7 +86,7 @@ export function ChatHeader({
   const [isSpinning, setIsSpinning] = useState(false);
   const restartButtonCssClasses = twMerge(
     cssClasses.restartButton,
-    isSpinning ? "animate-[spin_0.3s_linear_infinite]" : "hover:scale-110"
+    isSpinning ? "animate-[spin_0.3s_linear]" : "hover:scale-110"
   );
 
   const clearTimerRef = useRef<ReturnType<typeof setTimeout>>();

package/src/components/ChatInput.tsx

@@ -41,7 +41,8 @@ export interface ChatInputProps {
   placeholder?: string;
   /**
    * Enable streaming behavior by making a request to Chat Streaming API.
-   * Defaults to true.
+   * This feature is experimental, and is subject to change.
+   * Defaults to false.
    */
   stream?: boolean;
   /** Enable auto focus for the input box. Defaults to false. */
@@ -70,7 +71,7 @@ export interface ChatInputProps {
  */
 export function ChatInput({
   placeholder = "Type a message...",
-  stream = true,
+  stream = false,
   inputAutoFocus = false,
   handleError,
   sendButtonIcon = <ArrowIcon />,
@@ -124,7 +125,7 @@ export function ChatInput({
       />
       <button
         aria-label="Send Message"
-        disabled={!canSendMessage}
+        disabled={!canSendMessage || input.length === 0}
         onClick={sendMessage}
         className={cssClasses.sendButton}
       >

package/src/components/ChatPanel.tsx

@@ -31,6 +31,9 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
     messagesContainer:
       "flex flex-col gap-y-1 mt-auto px-4 pb-[85px] overflow-auto",
     inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
+    messageBubbleCssClasses: {
+      topContainer: "first:mt-4",
+    },
   }
 );
 
@@ -75,7 +78,7 @@ export function ChatPanel(props: ChatPanelProps) {
     if (messages.length !== 0 || !canSendMessage) {
       return;
     }
-    const { stream = true, handleError } = props;
+    const { stream = false, handleError } = props;
     const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
     res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
   }, [chat, props, messages, defaultHandleApiError, canSendMessage]);

package/src/components/ChatPopUp.tsx

@@ -49,7 +49,7 @@ const builtInCssClasses: ChatPopUpCssClasses = withStylelessCssClasses(
       container: "max-[480px]:rounded-none rounded-t-3xl",
     },
     panelCssClasses: {
-      container: "max-[480px]:rounded-none rounded-b-3xl",
+      container: "max-[480px]:rounded-none rounded-3xl",
       inputContainer: "max-[480px]:rounded-none rounded-b-3xl",
     },
   }

package/src/components/FeedbackButtons.tsx

@@ -0,0 +1,88 @@
+import { ThumbsDownIcon } from "../icons/ThumbsDown";
+import { ThumbsUpIcon } from "../icons/ThumbsUp";
+import { useCallback, useState } from "react";
+import { ThumbsUpFillIcon } from "../icons/ThumbsUpFill";
+import { ThumbsDownFillIcon } from "../icons/ThumbsDownFill";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+import { useComposedCssClasses } from "../hooks";
+
+/**
+ * The CSS class interface for the {@link FeedbackButtons} component.
+ *
+ * @public
+ */
+export interface FeedbackButtonsCssClasses {
+  container?: string;
+  thumbsUpButton?: string;
+  thumbsUpIcon?: string;
+  thumbsUpFillIcon?: string;
+  thumbsDownButton?: string;
+  thumbsDownIcon?: string;
+  thumbsDownFillIcon?: string;
+}
+
+const builtInCssClasses: FeedbackButtonsCssClasses =
+  withStylelessCssClasses<FeedbackButtonsCssClasses>("FeedbackButtons", {
+    container:
+      "flex gap-x-1 absolute -right-1 -top-3 opacity-0 group-hover:opacity-100 duration-200",
+    thumbsUpButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
+    thumbsUpIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
+    thumbsUpFillIcon: "text-gray-700 w-[22px] h-[22px] stroke-[0.2]",
+    thumbsDownButton: "w-6 h-6 bg-gray-700 rounded-md flex justify-center items-center",
+    thumbsDownIcon: "text-white w-[22px] h-[22px] stroke-[0.2]",
+    thumbsDownFillIcon: "text-gray-700 w-[22px] h-[22px] stroke-[0.2]",
+  });
+
+/**
+ * The props for the {@link FeedbackButtons} component.
+ *
+ * @internal
+ */
+interface FeedbackButtonsProps {
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: FeedbackButtonsCssClasses;
+}
+
+/**
+ * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
+ * report analytic events on click.
+ *
+ * @internal
+ */
+export function FeedbackButtons({ customCssClasses }: FeedbackButtonsProps) {
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+  const [selectedThumb, setSelectedThumb] = useState<
+    "UP" | "DOWN" | undefined
+  >();
+  const onClickThumbsUp = useCallback(() => {
+    setSelectedThumb("UP");
+    console.log("thumbs up");
+  }, []);
+
+  const onClickThumbsDown = useCallback(() => {
+    setSelectedThumb("DOWN");
+    console.log("thumbs down");
+  }, []);
+
+  return (
+    <div className={cssClasses.container}>
+      <button className={cssClasses.thumbsUpButton} onClick={onClickThumbsUp}>
+        {selectedThumb === "UP" ? (
+          <ThumbsUpFillIcon className={cssClasses.thumbsUpFillIcon} />
+        ) : (
+          <ThumbsUpIcon className={cssClasses.thumbsUpIcon} />
+        )}
+      </button>
+      <button
+        className={cssClasses.thumbsDownButton}
+        onClick={onClickThumbsDown}
+      >
+        {selectedThumb === "DOWN" ? (
+          <ThumbsDownFillIcon className={cssClasses.thumbsDownFillIcon} />
+        ) : (
+          <ThumbsDownIcon className={cssClasses.thumbsDownIcon} />
+        )}
+      </button>
+    </div>
+  );
+}

package/src/icons/ThumbsDown.tsx

@@ -0,0 +1,21 @@
+export function ThumbsDownIcon({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      stroke="currentColor"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.1848 12.7875C7.5718 13.175 7.834 13.6625 7.9338 14.1875L8.2959 16H8.97C9.4195 16 9.8439 15.8 10.1311 15.45C10.4182 15.1 10.5306 14.65 10.4432 14.2L10.1061 12.5H11.2547H12.0037H13.7516C14.4382 12.5 15 11.9375 15 11.25C15 10.8375 14.8002 10.475 14.5006 10.25C14.8002 10.025 15 9.6625 15 9.25C15 8.7875 14.7378 8.375 14.3508 8.1625C14.588 7.9375 14.7503 7.6125 14.7503 7.25C14.7503 6.7875 14.4881 6.375 14.1011 6.1625C14.3383 5.9375 14.5006 5.6125 14.5006 5.25C14.5006 4.5625 13.9388 4 13.2522 4H12.0037H10.7553L7.2597 4C6.5605 4 5.9613 4.4125 5.6866 5H5.0125V5.5H6.0112H6.0362C6.1486 4.925 6.6604 4.5 7.2597 4.5L9.7566 4.5C9.5943 4.7125 9.5069 4.975 9.5069 5.25C9.5069 5.7125 9.769 6.125 10.156 6.3375C9.9189 6.5625 9.7566 6.8875 9.7566 7.25C9.7566 7.7125 10.0187 8.125 10.4057 8.3375C10.1685 8.5625 10.0062 8.8875 10.0062 9.25C10.0062 9.6625 10.206 10.025 10.5056 10.25C10.206 10.475 10.0062 10.8375 10.0062 11.25C10.0062 11.525 10.1061 11.7875 10.2559 12H9.4944L9.9563 14.3C10.0187 14.6 9.9438 14.9 9.7441 15.125C9.5568 15.3625 9.2697 15.4875 8.97 15.4875H8.6954L8.4082 14.075C8.2834 13.45 7.9713 12.875 7.5218 12.4125L6.0986 10.9875H5V11.4875H5.8989L7.1848 12.7875ZM10.7553 6C10.3433 6 10.0062 5.6625 10.0062 5.25C10.0062 4.8375 10.3433 4.5 10.7553 4.5H12.0037H13.2522C13.6642 4.5 14.0012 4.8375 14.0012 5.25C14.0012 5.6625 13.6642 6 13.2522 6H11.005H10.7553ZM11.005 8C10.593 8 10.2559 7.6625 10.2559 7.25C10.2559 6.8375 10.593 6.5 11.005 6.5H13.2522H13.5019C13.9139 6.5 14.2509 6.8375 14.2509 7.25C14.2509 7.6625 13.9139 8 13.5019 8H11.2547H11.005ZM10.5056 9.25C10.5056 8.8375 10.8427 8.5 11.2547 8.5H13.5019H13.7516C14.1636 8.5 14.5006 8.8375 14.5006 9.25C14.5006 9.6625 14.1636 10 13.7516 10H11.2547C10.8427 10 10.5056 9.6625 10.5056 9.25ZM10.5056 11.25C10.5056 10.8375 10.8427 10.5 11.2547 10.5H13.7516C14.1636 10.5 14.5006 10.8375 14.5006 11.25C14.5006 11.6625 14.1636 12 13.7516 12H12.0037H11.2547C10.8427 12 10.5056 11.6625 10.5056 11.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/ThumbsDownFill.tsx

@@ -0,0 +1,25 @@
+export function ThumbsDownFillIcon({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.93383 14.1875C7.83396 13.6625 7.57178 13.175 7.18477 12.7875L5.89888 11.4875H5L5.01248 5H5.68664C5.9613 4.4125 6.56055 4 7.25968 4L10.7553 4H12.0037H13.2522C13.9388 4 14.5006 4.5625 14.5006 5.25C14.5006 5.6125 14.3383 5.9375 14.1011 6.1625C14.4881 6.375 14.7503 6.7875 14.7503 7.25C14.7503 7.6125 14.588 7.9375 14.3508 8.1625C14.7378 8.375 15 8.7875 15 9.25C15 9.6625 14.8002 10.025 14.5006 10.25C14.8002 10.475 15 10.8375 15 11.25C15 11.9375 14.4382 12.5 13.7516 12.5H12.0037H11.2547H10.1061L10.4432 14.2C10.5306 14.65 10.4182 15.1 10.1311 15.45C9.84395 15.8 9.41948 16 8.97004 16H8.29588L7.93383 14.1875Z"
+        fill="white"
+      />
+      <path
+        d="M10.7547 6.004C10.3427 6.004 10.0056 5.6665 10.0056 5.254C10.0056 4.8415 10.3427 4.504 10.7547 4.504L12.0031 4.504H13.2516C13.6635 4.504 14.0006 4.8415 14.0006 5.254C14.0006 5.6665 13.6635 6.004 13.2516 6.004H11.0044L10.7547 6.004ZM11.0044 8.004C10.5924 8.004 10.2553 7.6665 10.2553 7.254C10.2553 6.8415 10.5924 6.504 11.0044 6.504H13.2516H13.5012C13.9132 6.504 14.2503 6.8415 14.2503 7.254C14.2503 7.6665 13.9132 8.004 13.5012 8.004H11.2541H11.0044ZM10.505 9.254C10.505 8.8415 10.8421 8.504 11.2541 8.504H13.5012H13.7509C14.1629 8.504 14.5 8.8415 14.5 9.254C14.5 9.6665 14.1629 10.004 13.7509 10.004H11.2541C10.8421 10.004 10.505 9.6665 10.505 9.254ZM10.505 11.254C10.505 10.8415 10.8421 10.504 11.2541 10.504H13.7509C14.1629 10.504 14.5 10.8415 14.5 11.254C14.5 11.6665 14.1629 12.004 13.7509 12.004H12.0031H11.2541C10.8421 12.004 10.505 11.6665 10.505 11.254Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/ThumbsUp.tsx

@@ -0,0 +1,21 @@
+export function ThumbsUpIcon({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      stroke="currentColor"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.8152 7.2125C12.4282 6.825 12.166 6.3375 12.0662 5.8125L11.7041 4H11.03C10.5805 4 10.1561 4.2 9.86891 4.55C9.58177 4.9 9.46941 5.35 9.5568 5.8L9.89388 7.5H8.74532H7.99625H6.24844C5.5618 7.5 5 8.0625 5 8.75C5 9.1625 5.19975 9.525 5.49938 9.75C5.19975 9.975 5 10.3375 5 10.75C5 11.2125 5.26217 11.625 5.64919 11.8375C5.41199 12.0625 5.24969 12.3875 5.24969 12.75C5.24969 13.2125 5.51186 13.625 5.89888 13.8375C5.66167 14.0625 5.49938 14.3875 5.49938 14.75C5.49938 15.4375 6.06117 16 6.74782 16H7.99625H9.24469H12.7403C13.4395 16 14.0387 15.5875 14.3134 15H14.9875V14.5H13.9888H13.9638C13.8514 15.075 13.3396 15.5 12.7403 15.5H10.2434C10.4057 15.2875 10.4931 15.025 10.4931 14.75C10.4931 14.2875 10.231 13.875 9.84395 13.6625C10.0811 13.4375 10.2434 13.1125 10.2434 12.75C10.2434 12.2875 9.98127 11.875 9.59426 11.6625C9.83146 11.4375 9.99376 11.1125 9.99376 10.75C9.99376 10.3375 9.79401 9.975 9.49438 9.75C9.79401 9.525 9.99376 9.1625 9.99376 8.75C9.99376 8.475 9.89388 8.2125 9.74407 8H10.5056L10.0437 5.7C9.98127 5.4 10.0562 5.1 10.2559 4.875C10.4432 4.6375 10.7303 4.5125 11.03 4.5125H11.3046L11.5918 5.925C11.7166 6.55 12.0287 7.125 12.4782 7.5875L13.9014 9.0125H15V8.5125H14.1011L12.8152 7.2125ZM9.24469 14C9.65668 14 9.99376 14.3375 9.99376 14.75C9.99376 15.1625 9.65668 15.5 9.24469 15.5H7.99625H6.74782C6.33583 15.5 5.99875 15.1625 5.99875 14.75C5.99875 14.3375 6.33583 14 6.74782 14H8.99501H9.24469ZM8.99501 12C9.40699 12 9.74407 12.3375 9.74407 12.75C9.74407 13.1625 9.40699 13.5 8.99501 13.5H6.74782H6.49813C6.08614 13.5 5.74906 13.1625 5.74906 12.75C5.74906 12.3375 6.08614 12 6.49813 12H8.74532H8.99501ZM9.49438 10.75C9.49438 11.1625 9.1573 11.5 8.74532 11.5H6.49813H6.24844C5.83645 11.5 5.49938 11.1625 5.49938 10.75C5.49938 10.3375 5.83645 10 6.24844 10H8.74532C9.1573 10 9.49438 10.3375 9.49438 10.75ZM9.49438 8.75C9.49438 9.1625 9.1573 9.5 8.74532 9.5H6.24844C5.83645 9.5 5.49938 9.1625 5.49938 8.75C5.49938 8.3375 5.83645 8 6.24844 8H7.99625H8.74532C9.1573 8 9.49438 8.3375 9.49438 8.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/icons/ThumbsUpFill.tsx

@@ -0,0 +1,25 @@
+export function ThumbsUpFillIcon({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.0662 5.8125C12.166 6.3375 12.4282 6.825 12.8152 7.2125L14.1011 8.5125H15L14.9875 15H14.3134C14.0387 15.5875 13.4395 16 12.7403 16H9.24469H7.99625H6.74782C6.06117 16 5.49938 15.4375 5.49938 14.75C5.49938 14.3875 5.66167 14.0625 5.89888 13.8375C5.51186 13.625 5.24969 13.2125 5.24969 12.75C5.24969 12.3875 5.41199 12.0625 5.64919 11.8375C5.26217 11.625 5 11.2125 5 10.75C5 10.3375 5.19975 9.975 5.49938 9.75C5.19975 9.525 5 9.1625 5 8.75C5 8.0625 5.5618 7.5 6.24844 7.5H7.99625H8.74532H9.89388L9.5568 5.8C9.46941 5.35 9.58177 4.9 9.86891 4.55C10.1561 4.2 10.5805 4 11.03 4H11.7041L12.0662 5.8125Z"
+        fill="white"
+      />
+      <path
+        d="M9.24532 13.996C9.6573 13.996 9.99438 14.3335 9.99438 14.746C9.99438 15.1585 9.6573 15.496 9.24532 15.496H7.99688H6.74844C6.33645 15.496 5.99938 15.1585 5.99938 14.746C5.99938 14.3335 6.33645 13.996 6.74844 13.996H8.99563H9.24532ZM8.99563 11.996C9.40762 11.996 9.74469 12.3335 9.74469 12.746C9.74469 13.1585 9.40762 13.496 8.99563 13.496H6.74844H6.49875C6.08677 13.496 5.74969 13.1585 5.74969 12.746C5.74969 12.3335 6.08677 11.996 6.49875 11.996H8.74594H8.99563ZM9.49501 10.746C9.49501 11.1585 9.15793 11.496 8.74594 11.496H6.49875H6.24906C5.83708 11.496 5.5 11.1585 5.5 10.746C5.5 10.3335 5.83708 9.996 6.24906 9.996H8.74594C9.15793 9.996 9.49501 10.3335 9.49501 10.746ZM9.49501 8.746C9.49501 9.1585 9.15793 9.496 8.74594 9.496H6.24906C5.83708 9.496 5.5 9.1585 5.5 8.746C5.5 8.3335 5.83708 7.996 6.24906 7.996H7.99688H8.74594C9.15793 7.996 9.49501 8.3335 9.49501 8.746Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}