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

package/lib/commonjs/src/hooks/useScrollToLastMessage.js

@@ -1,45 +0,0 @@
-'use strict';
-
-var chatHeadlessReact = require('@yext/chat-headless-react');
-var React = require('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
- */
-function useScrollToLastMessage() {
-    const messagesRef = React.useRef([]);
-    const messagesContainerRef = React.useRef(null);
-    const messages = chatHeadlessReact.useChatState((state) => state.conversation.messages);
-    // Handle scrolling when messages change
-    React.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 = React.useCallback((index) => {
-        if (!messagesRef?.current)
-            return undefined;
-        return (message) => (messagesRef.current[index] = message);
-    }, []);
-    return [messagesContainerRef, setMessageRef];
-}
-
-exports.useScrollToLastMessage = useScrollToLastMessage;
-//# sourceMappingURL=useScrollToLastMessage.js.map

package/lib/commonjs/src/hooks/useScrollToLastMessage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToLastMessage.js","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"sourcesContent":["import { useChatState } from \"@yext/chat-headless-react\";\nimport React, { useCallback, useEffect, useRef } from \"react\";\n\n/**\n * Scroll the messsages container to the top of the last message whenever there's\n * an update to the messages state.\n * \n * @public\n * \n * @returns a ref to set on the messages container element and\n *  a function to set ref on individual message element\n */\nexport function useScrollToLastMessage(): [\n  React.RefObject<HTMLDivElement>,\n  (index: number) => ((message: HTMLDivElement) => void) | undefined\n] {\n  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n  const messagesContainerRef = useRef<HTMLDivElement>(null);\n  const messages = useChatState((state) => state.conversation.messages);\n\n  // Handle scrolling when messages change\n  useEffect(() => {\n    let scrollTop = 0;\n    messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n    // Sums up scroll heights of all messages except the last one\n    if (messagesRef?.current.length > 1) {\n      scrollTop = messagesRef.current\n        .slice(0, -1)\n        .map((elem, _) => elem?.scrollHeight ?? 0)\n        .reduce((total, height) => total + height);\n    }\n\n    // Scroll to the top of the last message\n    messagesContainerRef.current?.scroll({\n      top: scrollTop,\n      behavior: \"smooth\",\n    });\n  }, [messages]);\n\n  const setMessageRef = useCallback((index) => {\n    if (!messagesRef?.current) return undefined;\n    return (message: HTMLDivElement) => (messagesRef.current[index] = message);\n  }, []);\n\n  return [messagesContainerRef, setMessageRef]\n}"],"names":["useRef","useChatState","useEffect","useCallback"],"mappings":";;;;;AAGA;;;;;;;;AAQG;SACa,sBAAsB,GAAA;AAIpC,IAAA,MAAM,WAAW,GAAGA,YAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,oBAAoB,GAAGA,YAAM,CAAiB,IAAI,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAGC,8BAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;IAGtEC,eAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAGpE,QAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,iBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,SAAA;;AAGD,QAAA,oBAAoB,CAAC,OAAO,EAAE,MAAM,CAAC;AACnC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,aAAa,GAAGC,iBAAW,CAAC,CAAC,KAAK,KAAI;QAC1C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,SAAS,CAAC;AAC5C,QAAA,OAAO,CAAC,OAAuB,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAA;AAC9C;;;;"}

package/lib/esm/src/hooks/useScrollToLastMessage.d.ts

@@ -1,15 +0,0 @@
-import React 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 declare function useScrollToLastMessage(): [
-    React.RefObject<HTMLDivElement>,
-    (index: number) => ((message: HTMLDivElement) => void) | undefined
-];
-//# sourceMappingURL=useScrollToLastMessage.d.ts.map

package/lib/esm/src/hooks/useScrollToLastMessage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToLastMessage.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,IAAI;IACxC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC/B,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS;CACnE,CA+BA"}

package/lib/esm/src/hooks/useScrollToLastMessage.mjs

@@ -1,43 +0,0 @@
-import { useChatState } from '@yext/chat-headless-react';
-import { useRef, useEffect, useCallback } 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
- */
-function useScrollToLastMessage() {
-    const messagesRef = useRef([]);
-    const messagesContainerRef = useRef(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) => (messagesRef.current[index] = message);
-    }, []);
-    return [messagesContainerRef, setMessageRef];
-}
-
-export { useScrollToLastMessage };
-//# sourceMappingURL=useScrollToLastMessage.mjs.map

package/lib/esm/src/hooks/useScrollToLastMessage.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToLastMessage.mjs","sources":["../../../../src/hooks/useScrollToLastMessage.ts"],"sourcesContent":["import { useChatState } from \"@yext/chat-headless-react\";\nimport React, { useCallback, useEffect, useRef } from \"react\";\n\n/**\n * Scroll the messsages container to the top of the last message whenever there's\n * an update to the messages state.\n * \n * @public\n * \n * @returns a ref to set on the messages container element and\n *  a function to set ref on individual message element\n */\nexport function useScrollToLastMessage(): [\n  React.RefObject<HTMLDivElement>,\n  (index: number) => ((message: HTMLDivElement) => void) | undefined\n] {\n  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n  const messagesContainerRef = useRef<HTMLDivElement>(null);\n  const messages = useChatState((state) => state.conversation.messages);\n\n  // Handle scrolling when messages change\n  useEffect(() => {\n    let scrollTop = 0;\n    messagesRef.current = messagesRef.current.slice(0, messages.length);\n\n    // Sums up scroll heights of all messages except the last one\n    if (messagesRef?.current.length > 1) {\n      scrollTop = messagesRef.current\n        .slice(0, -1)\n        .map((elem, _) => elem?.scrollHeight ?? 0)\n        .reduce((total, height) => total + height);\n    }\n\n    // Scroll to the top of the last message\n    messagesContainerRef.current?.scroll({\n      top: scrollTop,\n      behavior: \"smooth\",\n    });\n  }, [messages]);\n\n  const setMessageRef = useCallback((index) => {\n    if (!messagesRef?.current) return undefined;\n    return (message: HTMLDivElement) => (messagesRef.current[index] = message);\n  }, []);\n\n  return [messagesContainerRef, setMessageRef]\n}"],"names":[],"mappings":";;;AAGA;;;;;;;;AAQG;SACa,sBAAsB,GAAA;AAIpC,IAAA,MAAM,WAAW,GAAG,MAAM,CAA+B,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;IAGtE,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,CAAC,CAAC;AAClB,QAAA,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;;AAGpE,QAAA,IAAI,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,SAAS,GAAG,WAAW,CAAC,OAAO;AAC5B,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACZ,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,YAAY,IAAI,CAAC,CAAC;AACzC,iBAAA,MAAM,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,MAAM,CAAC,CAAC;AAC9C,SAAA;;AAGD,QAAA,oBAAoB,CAAC,OAAO,EAAE,MAAM,CAAC;AACnC,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,QAAQ,EAAE,QAAQ;AACnB,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAK,KAAI;QAC1C,IAAI,CAAC,WAAW,EAAE,OAAO;AAAE,YAAA,OAAO,SAAS,CAAC;AAC5C,QAAA,OAAO,CAAC,OAAuB,MAAM,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;KAC5E,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAA;AAC9C;;;;"}

package/src/hooks/useScrollToLastMessage.ts

@@ -1,47 +0,0 @@
-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]
-}