@yext/chat-ui-react 0.5.5 → 0.6.0

package/lib/esm/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/esm/src/components/index.js

@@ -3,5 +3,4 @@ export { ChatHeader } from "./ChatHeader";
 export { MessageBubble } from "./MessageBubble";
 export { ChatPanel } from "./ChatPanel";
 export { ChatPopUp } from "./ChatPopUp";
-export { ChatStyleProvider } from "./ChatStyleProvider";
 //# sourceMappingURL=index.js.map

package/lib/esm/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQhD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "clippy@yext.com",
   "main": "./lib/commonjs/src/index.js",
@@ -40,7 +40,8 @@
     "tailwindcss": "tailwindcss",
     "build:css": "./scoped-bundle.sh",
     "build:js": "tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json",
-    "build": "rm -rf lib/** && npm run build:js && npm run build:css && npm run generate-docs && npm run generate-notices",
+    "update-lib-package": "node ./update-lib-package.js",
+    "build": "rm -rf lib/** && npm run build:js && npm run build:css && npm run update-lib-package && npm run generate-docs && npm run generate-notices",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
@@ -89,9 +90,8 @@
     "react-dom": "^16.14 || ^17 || || ^18"
   },
   "dependencies": {
-    "react-expanding-textarea": "^2.3.6",
     "react-markdown": "^6.0.3",
-    "react-textarea-autosize": "^8.4.1",
+    "react-textarea-autosize": "^8.5.3",
     "rehype-raw": "^5.0.0",
     "rehype-sanitize": "^4.0.0",
     "remark-gfm": "^1.0.0",

package/src/components/ChatInput.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { useChatActions, useChatState } from "@yext/chat-headless-react";
 import { ArrowIcon } from "../icons/Arrow";
 import { useComposedCssClasses } from "../hooks";
-import Textarea from "react-expanding-textarea";
+import TextareaAutosize from "react-textarea-autosize";
 import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
 
@@ -22,7 +22,7 @@ const builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(
   {
     container: "w-full h-fit flex flex-row relative @container",
     textArea:
-      "w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base text-slate-900",
+      "w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900",
     sendButton:
       "rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5",
   }
@@ -115,7 +115,7 @@ export function ChatInput({
 
   return (
     <div className={cssClasses.container}>
-      <Textarea
+      <TextareaAutosize
         autoFocus={inputAutoFocus}
         onKeyDown={handleKeyDown}
         value={input}

package/src/components/ChatPanel.tsx

@@ -31,8 +31,8 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
   {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesScrollContainer: "flex flex-col mt-auto overflow-hidden",
-    messagesContainer: "flex flex-col gap-y-1 px-4 pb-[85px] overflow-auto",
-    inputContainer: "w-full absolute bottom-0 p-4 backdrop-blur-lg",
+    messagesContainer: "flex flex-col gap-y-1 px-4 overflow-auto",
+    inputContainer: "w-full p-4",
     messageBubbleCssClasses: {
       topContainer: "first:mt-4",
     },
@@ -103,23 +103,25 @@ export function ChatPanel(props: ChatPanelProps) {
   }, [messages]);
 
   return (
-    <div className={cssClasses.container}>
-      {header}
-      <div className={cssClasses.messagesScrollContainer}>
-        <div ref={messagesRef} className={cssClasses.messagesContainer}>
-          {messages.map((message, index) => (
-            <MessageBubble
-              {...props}
-              customCssClasses={cssClasses.messageBubbleCssClasses}
-              key={index}
-              message={message}
-            />
-          ))}
-          {loading && <LoadingDots />}
+    <div className="yext-chat">
+      <div className={cssClasses.container}>
+        {header}
+        <div className={cssClasses.messagesScrollContainer}>
+          <div ref={messagesRef} className={cssClasses.messagesContainer}>
+            {messages.map((message, index) => (
+              <MessageBubble
+                {...props}
+                customCssClasses={cssClasses.messageBubbleCssClasses}
+                key={index}
+                message={message}
+              />
+            ))}
+            {loading && <LoadingDots />}
+          </div>
+        </div>
+        <div className={cssClasses.inputContainer}>
+          <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
         </div>
-      </div>
-      <div className={cssClasses.inputContainer}>
-        <ChatInput {...props} customCssClasses={cssClasses.inputCssClasses} />
       </div>
     </div>
   );

package/src/components/ChatPopUp.tsx

@@ -118,29 +118,33 @@ export function ChatPopUp(props: ChatPopUpProps) {
   );
 
   return (
-    <div className={cssClasses.container}>
-      <div className={panelCssClasses} aria-label="Chat Popup Panel">
-        <ChatPanel
-          {...props}
-          customCssClasses={cssClasses.panelCssClasses}
-          header={
-            <ChatHeader
-              title={title}
-              showRestartButton={showRestartButton}
-              showCloseButton={true}
-              onClose={onClose}
-              customCssClasses={cssClasses.headerCssClasses}
-            />
-          }
-        />
+    <div className="yext-chat">
+      <div className={cssClasses.container}>
+        <div className={panelCssClasses} aria-label="Chat Popup Panel">
+          <ChatPanel
+            {...props}
+            customCssClasses={cssClasses.panelCssClasses}
+            header={
+              <ChatHeader
+                title={title}
+                showRestartButton={showRestartButton}
+                showCloseButton={true}
+                onClose={onClose}
+                customCssClasses={cssClasses.headerCssClasses}
+              />
+            }
+          />
+        </div>
+        <button
+          aria-label="Chat Popup Button"
+          onClick={onClick}
+          className={buttonCssClasses}
+        >
+          {openPanelButtonIcon ?? (
+            <ChatIcon className={cssClasses.buttonIcon} />
+          )}
+        </button>
       </div>
-      <button
-        aria-label="Chat Popup Button"
-        onClick={onClick}
-        className={buttonCssClasses}
-      >
-        {openPanelButtonIcon ?? <ChatIcon className={cssClasses.buttonIcon} />}
-      </button>
     </div>
   );
 }

package/src/components/MessageBubble.tsx

@@ -40,7 +40,7 @@ const builtInCssClasses: MessageBubbleCssClasses =
       "ml-auto @lg:ml-0 bg-gradient-to-tr from-blue-600 to-blue-700 text-white",
     text: "text-[13px] @[480px]:text-base prose overflow-x-auto",
     text__bot: "text-slate-900",
-    text__user: "text-white",
+    text__user: "text-white break-words",
     timestamp:
       "w-fit my-0.5 ml-4 @lg:ml-0 text-slate-400 text-[10px] @[480px]:text-[13px] opacity-0 peer-hover:opacity-100 duration-200 whitespace-pre-wrap",
     timestamp__bot: "",

package/src/components/index.ts

@@ -17,5 +17,3 @@ export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
-
-export { ChatStyleProvider } from "./ChatStyleProvider";

package/lib/commonjs/src/components/ChatStyleProvider.d.ts

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@yext/chat-ui-react/bundle.css";
-/**
- * Adds Chat styling scoped to this component and its children.
- *
- * @remarks
- * Internaly, this will import "\@yext/chat-ui-react/bundle.css".
- * This is for use cases where the application doesn't use tailwind.
- *
- * @public
- */
-export declare function ChatStyleProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ChatStyleProvider.d.ts.map

package/lib/commonjs/src/components/ChatStyleProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatStyleProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatStyleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAEhE"}

package/lib/commonjs/src/components/ChatStyleProvider.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatStyleProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@yext/chat-ui-react/bundle.css");
-/**
- * Adds Chat styling scoped to this component and its children.
- *
- * @remarks
- * Internaly, this will import "\@yext/chat-ui-react/bundle.css".
- * This is for use cases where the application doesn't use tailwind.
- *
- * @public
- */
-function ChatStyleProvider({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "yext-chat", children: children });
-}
-exports.ChatStyleProvider = ChatStyleProvider;
-//# sourceMappingURL=ChatStyleProvider.js.map

package/lib/commonjs/src/components/ChatStyleProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatStyleProvider.js","sourceRoot":"","sources":["../../../../src/components/ChatStyleProvider.tsx"],"names":[],"mappings":";;;;AACA,0CAAwC;AAExC;;;;;;;;GAQG;AACH,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAqB;IAC/D,OAAO,gCAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,CAAC;AACrD,CAAC;AAFD,8CAEC"}

package/lib/esm/src/components/ChatStyleProvider.d.ts

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@yext/chat-ui-react/bundle.css";
-/**
- * Adds Chat styling scoped to this component and its children.
- *
- * @remarks
- * Internaly, this will import "\@yext/chat-ui-react/bundle.css".
- * This is for use cases where the application doesn't use tailwind.
- *
- * @public
- */
-export declare function ChatStyleProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ChatStyleProvider.d.ts.map

package/lib/esm/src/components/ChatStyleProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatStyleProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatStyleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAEhE"}

package/lib/esm/src/components/ChatStyleProvider.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@yext/chat-ui-react/bundle.css";
-/**
- * Adds Chat styling scoped to this component and its children.
- *
- * @remarks
- * Internaly, this will import "\@yext/chat-ui-react/bundle.css".
- * This is for use cases where the application doesn't use tailwind.
- *
- * @public
- */
-export function ChatStyleProvider({ children }) {
-    return _jsx("div", { className: "yext-chat", children: children });
-}
-//# sourceMappingURL=ChatStyleProvider.js.map

package/lib/esm/src/components/ChatStyleProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatStyleProvider.js","sourceRoot":"","sources":["../../../../src/components/ChatStyleProvider.tsx"],"names":[],"mappings":";AACA,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAqB;IAC/D,OAAO,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,CAAC;AACrD,CAAC"}

package/src/components/ChatStyleProvider.tsx

@@ -1,15 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@yext/chat-ui-react/bundle.css";
-
-/**
- * Adds Chat styling scoped to this component and its children.
- *
- * @remarks
- * Internaly, this will import "\@yext/chat-ui-react/bundle.css".
- * This is for use cases where the application doesn't use tailwind.
- *
- * @public
- */
-export function ChatStyleProvider({ children }: PropsWithChildren) {
-  return <div className="yext-chat">{children}</div>;
-}