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

package/src/components/InitialMessagePopUp.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from "react";
+import { CrossIcon } from "../icons/Cross";
+import { useComposedCssClasses } from "../hooks";
+import { withStylelessCssClasses } from "../utils/withStylelessCssClasses";
+import { MessageSource, useChatState } from "@yext/chat-headless-react";
+
+/**
+ * The CSS class interface for the InitialMessagePopUp component.
+ *
+ * @public
+ */
+export interface InitialMessagePopUpCssClasses {
+  container?: string;
+  closeButton?: string;
+  closeButtonIcon?: string;
+  message?: string;
+}
+
+/**
+ * The props for the {@link InitialMessagePopUp} component.
+ *
+ * @internal
+ */
+interface InitialMessagePopUpProps {
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: InitialMessagePopUpCssClasses;
+  /** Function to call when user click on the close button */
+  onClose: () => void;
+}
+
+const builtInCssClasses: InitialMessagePopUpCssClasses =
+  withStylelessCssClasses("InitialMessagePopUp", {
+    container: "flex gap-x-1 animate-fade-in",
+    closeButton: "bg-white w-4 h-4 rounded-full border border-slate-300",
+    closeButtonIcon: "",
+    message:
+      "line-clamp-2 w-60 p-2.5 bg-white rounded-xl shadow-xl text-sm lg:text-base",
+  });
+
+/**
+ * A component that renders a popup bubble displaying the initial message from chat bot.
+ *
+ * @internal
+ *
+ * @param props - {@link InitialMessagePopUpProps}
+ */
+export function InitialMessagePopUp({
+  onClose,
+  customCssClasses,
+}: InitialMessagePopUpProps) {
+  const messages = useChatState((s) => s.conversation.messages);
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+
+  const firstBotMessage: string = useMemo(() => {
+    return messages.length !== 0 && messages[0].source === MessageSource.BOT
+      ? messages[0].text
+      : "";
+  }, [messages]);
+
+  if (firstBotMessage.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className={cssClasses.container}>
+      <button
+        aria-label="Close Initial Message"
+        onClick={onClose}
+        className={cssClasses.closeButton}
+      >
+        <CrossIcon className={cssClasses.closeButtonIcon} />
+      </button>
+      <div className={cssClasses.message}>{firstBotMessage}</div>
+    </div>
+  );
+}

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

@@ -10,10 +10,16 @@ export type {
   MessageBubbleProps,
 } from "./MessageBubble";
 
-export type { FeedbackButtonsCssClasses } from "./FeedbackButtons";
-
 export { ChatPanel } from "./ChatPanel";
 export type { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
 
 export { ChatPopUp } from "./ChatPopUp";
 export type { ChatPopUpCssClasses, ChatPopUpProps } from "./ChatPopUp";
+
+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

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useChatState, useChatActions } from "@yext/chat-headless-react";
+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.
+ *
+ * @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.
+ * @param stream      - Enable streaming behavior by making a request to Chat Streaming API. Defaults to false.
+ * @param customCondition - additional condition for when to fetch initial message
+ */
+export function useFetchInitialMessage(
+  handleError?: (e: unknown) => void,
+  stream = false,
+  customCondition = true
+) {
+  const chat = useChatActions();
+  const defaultHandleApiError = useDefaultHandleApiError();
+  const messages = useChatState((state) => state.conversation.messages);
+  const [fetchInitialMessage, setFetchInitialMessage] = useState(
+    messages.length === 0
+  );
+  const [messagesLength, setMessagesLength] = useState(messages.length);
+  const canSendMessage = useChatState(
+    (state) => state.conversation.canSendMessage
+  );
+
+  //handle message history resets
+  useEffect(() => {
+    const newMessagesLength = messages.length;
+    // Fetch data only when the conversation messages changes from non-zero to zero
+    if (messagesLength > 0 && newMessagesLength === 0) {
+      setFetchInitialMessage(true);
+    }
+    setMessagesLength(newMessagesLength);
+  }, [messages.length, messagesLength]);
+
+  useEffect(() => {
+    if (!fetchInitialMessage || !canSendMessage || !customCondition) {
+      return;
+    }
+    setFetchInitialMessage(false);
+    const res = stream ? chat.streamNextMessage() : chat.getNextMessage();
+    res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
+  }, [
+    chat,
+    stream,
+    handleError,
+    defaultHandleApiError,
+    fetchInitialMessage,
+    canSendMessage,
+    customCondition,
+  ]);
+}

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]
+}