@yext/chat-ui-react 0.8.0 → 0.8.1-alpha

package/lib/esm/src/index.mjs

@@ -3,5 +3,11 @@ export { ChatHeader } from './components/ChatHeader.mjs';
 export { MessageBubble } from './components/MessageBubble.mjs';
 export { ChatPanel } from './components/ChatPanel.mjs';
 export { ChatPopUp } from './components/ChatPopUp.mjs';
+export { FeedbackButtons } from './components/FeedbackButtons.mjs';
+export { Markdown } from './components/Markdown.mjs';
 export { useComposedCssClasses } from './hooks/useComposedCssClasses.mjs';
+export { useDefaultHandleApiError } from './hooks/useDefaultHandleApiError.mjs';
+export { useFetchInitialMessage } from './hooks/useFetchInitialMessage.mjs';
+export { useReportAnalyticsEvent } from './hooks/useReportAnalyticsEvent.mjs';
+export { useScrollToLastMessage } from './hooks/useScrollToLastMessage.mjs';
 //# sourceMappingURL=index.mjs.map

package/lib/esm/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/package.json

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

package/src/components/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { useChatState } from "@yext/chat-headless-react";
 import {
   MessageBubble,
@@ -7,10 +7,13 @@ import {
 } from "./MessageBubble";
 import { ChatInput, ChatInputCssClasses, ChatInputProps } from "./ChatInput";
 import { LoadingDots } from "./LoadingDots";
-import { useComposedCssClasses } from "../hooks";
+import {
+  useComposedCssClasses,
+  useReportAnalyticsEvent,
+  useFetchInitialMessage,
+  useScrollToLastMessage,
+  } from "../hooks";
 import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
-import { useReportAnalyticsEvent } from "../hooks/useReportAnalyticsEvent";
-import { useFetchInitialMessage } from "../hooks/useFetchInitialMessage";
 
 /**
  * The CSS class interface for the {@link ChatPanel} component.
@@ -71,6 +74,7 @@ export function ChatPanel(props: ChatPanelProps) {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
   const reportAnalyticsEvent = useReportAnalyticsEvent();
   useFetchInitialMessage(handleError, stream);
+  const [messagesContainerRef, setMessageRef] = useScrollToLastMessage();
 
   useEffect(() => {
     reportAnalyticsEvent({
@@ -78,42 +82,14 @@ export function ChatPanel(props: ChatPanelProps) {
     });
   }, [reportAnalyticsEvent]);
 
-  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
-  const messagesContainer = useRef<HTMLDivElement>(null);
-
-  // Handle scrolling when messages change
-  useEffect(() => {
-    let scrollTop = 0;
-    messagesRef.current = messagesRef.current.slice(0, messages.length);
-
-    // Sums up scroll heights of all messages except the last one
-    if (messagesRef?.current.length > 1) {
-      scrollTop = messagesRef.current
-        .slice(0, -1)
-        .map((elem, _) => elem?.scrollHeight ?? 0)
-        .reduce((total, height) => total + height);
-    }
-
-    // Scroll to the top of the last message
-    messagesContainer.current?.scroll({
-      top: scrollTop,
-      behavior: "smooth",
-    });
-  }, [messages]);
-
-  const setMessagesRef = useCallback((index) => {
-    if (!messagesRef?.current) return null;
-    return (message) => (messagesRef.current[index] = message);
-  }, []);
-
   return (
     <div className="yext-chat w-full h-full">
       <div className={cssClasses.container}>
         {header}
         <div className={cssClasses.messagesScrollContainer}>
-          <div ref={messagesContainer} className={cssClasses.messagesContainer}>
+          <div ref={messagesContainerRef} className={cssClasses.messagesContainer}>
             {messages.map((message, index) => (
-              <div key={index} ref={setMessagesRef(index)}>
+              <div key={index} ref={setMessageRef(index)}>
                 <MessageBubble
                   {...props}
                   customCssClasses={cssClasses.messageBubbleCssClasses}

package/src/components/FeedbackButtons.tsx

@@ -39,9 +39,9 @@ const builtInCssClasses: FeedbackButtonsCssClasses =
 /**
  * The props for the FeedbackButtons component.
  *
- * @internal
+ * @public
  */
-interface FeedbackButtonsProps {
+export interface FeedbackButtonsProps {
   /** The response ID correlates to the current message to give feedback on. */
   responseId?: string;
   /** CSS classes for customizing the component styling. */
@@ -52,7 +52,7 @@ interface FeedbackButtonsProps {
  * Displays feedback buttons (e.g. thumbs up and thumbs down) that will
  * report analytic events on click.
  *
- * @internal
+ * @public
  */
 export function FeedbackButtons({
   customCssClasses,

package/src/components/Markdown.tsx

@@ -19,7 +19,12 @@ const unifiedPlugins: { remark?: PluggableList; rehype: PluggableList } = {
   ],
 };
 
-interface MarkdownProps {
+/**
+ * The props for the {@link Markdown} component.
+ * 
+ * @public
+ */
+export interface MarkdownProps {
   /** Stringified markdown. */
   content: string;
   /** The response ID correlates to the current message. */
@@ -35,7 +40,7 @@ interface MarkdownProps {
  * @remarks
  * A link click will send a CHAT_LINK_CLICK analytics event
  *
- * @internal
+ * @public
  */
 export function Markdown({ content, responseId, className }: MarkdownProps) {
   const reportAnalyticsEvent = useReportAnalyticsEvent();

package/src/components/index.ts

@@ -16,5 +16,10 @@ export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
 
-export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
+export { FeedbackButtons } from "./FeedbackButtons";
+export type { FeedbackButtonsCssClasses, FeedbackButtonsProps } from "./FeedbackButtons";
+
+export { Markdown } from "./Markdown";
+export { MarkdownProps } from "./Markdown";
+
 export type { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";

package/src/hooks/index.ts

@@ -1 +1,5 @@
 export { useComposedCssClasses } from "./useComposedCssClasses";
+export { useDefaultHandleApiError } from "./useDefaultHandleApiError";
+export { useFetchInitialMessage } from "./useFetchInitialMessage";
+export { useReportAnalyticsEvent } from "./useReportAnalyticsEvent";
+export { useScrollToLastMessage } from "./useScrollToLastMessage";

package/src/hooks/useDefaultHandleApiError.ts

@@ -5,7 +5,7 @@ import { useCallback } from "react";
  * Returns a default handler function for API errors. It will log the error and
  * add a default error message to state.
  *
- * @internal
+ * @public
  */
 export function useDefaultHandleApiError() {
   const chat = useChatActions();

package/src/hooks/useFetchInitialMessage.ts

@@ -6,7 +6,7 @@ import { useDefaultHandleApiError } from "../hooks/useDefaultHandleApiError";
  * Sends a request to Chat API to fetch the initial message when the
  * conversation first start or when the message history is reset.
  *
- * @internal
+ * @public
  *
  * @param handleError - A function which is called when an error occurs while fetching for initial message.
  *                      By default, the error is logged to the console and an error message is added to state.

package/src/hooks/useReportAnalyticsEvent.ts

@@ -7,7 +7,7 @@ import { useCallback } from "react";
  * The payload will automatically includes chat-ui-react's
  * package version for "clientSdk" field.
  *
- * @internal
+ * @public
  */
 export function useReportAnalyticsEvent(): ChatHeadless["report"] {
   const chat = useChatActions();

package/src/hooks/useScrollToLastMessage.ts

@@ -0,0 +1,47 @@
+import { useChatState } from "@yext/chat-headless-react";
+import React, { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Scroll the messsages container to the top of the last message whenever there's
+ * an update to the messages state.
+ * 
+ * @public
+ * 
+ * @returns a ref to set on the messages container element and
+ *  a function to set ref on individual message element
+ */
+export function useScrollToLastMessage(): [
+  React.RefObject<HTMLDivElement>,
+  (index: number) => ((message: HTMLDivElement) => void) | undefined
+] {
+  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const messages = useChatState((state) => state.conversation.messages);
+
+  // Handle scrolling when messages change
+  useEffect(() => {
+    let scrollTop = 0;
+    messagesRef.current = messagesRef.current.slice(0, messages.length);
+
+    // Sums up scroll heights of all messages except the last one
+    if (messagesRef?.current.length > 1) {
+      scrollTop = messagesRef.current
+        .slice(0, -1)
+        .map((elem, _) => elem?.scrollHeight ?? 0)
+        .reduce((total, height) => total + height);
+    }
+
+    // Scroll to the top of the last message
+    messagesContainerRef.current?.scroll({
+      top: scrollTop,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
+  const setMessageRef = useCallback((index) => {
+    if (!messagesRef?.current) return undefined;
+    return (message: HTMLDivElement) => (messagesRef.current[index] = message);
+  }, []);
+
+  return [messagesContainerRef, setMessageRef]
+}