resolve conflict

.storybook/main.ts

@@ -14,7 +14,7 @@ const config: StorybookConfig = {
   },
   docs: {
     autodocs: true,
-    defaultName: "Documentation"
+    defaultName: "Documentation",
   },
   viteFinal: (config, _options) => {
     if (!config.css) {

.storybook/preview.ts

@@ -14,8 +14,8 @@ const preview: Preview = {
     docs: {
       story: {
         // https://storybook.js.org/docs/react/api/doc-block-story#autoplay
-        autoplay: true
-      }
+        autoplay: true,
+      },
     },
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/chat-ui-react",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A library of React Components for powering Yext Chat integrations.",
   "author": "[email protected]",
   "main": "./lib/commonjs/src/index.js",

sites-config/ci_config.json

@@ -16,6 +16,6 @@
     "buildCmd": "npm run build-storybook"
   },
   "livePreview": {
-      "serveCmd": "npm run storybook -- -p 8080"
+    "serveCmd": "npm run storybook -- -p 8080"
   }
-}
+}

src/components/ChatPanel.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from "react";
 import ReactMarkdown from "react-markdown";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useChatState, useChatActions } from "@yext/chat-headless-react";
 import {
   MessageBubble,
@@ -97,29 +97,48 @@ export function ChatPanel(props: ChatPanelProps) {
     res.catch((e) => (handleError ? handleError(e) : defaultHandleApiError(e)));
   }, [chat, props, messages, defaultHandleApiError, canSendMessage]);
 
-  const messagesRef = useRef<HTMLDivElement>(null);
+  const messagesRef = useRef<Array<HTMLDivElement | null>>([]);
+  const messagesContainer = useRef<HTMLDivElement>(null);
 
-  // Scroll to the bottom of the chat when the messages change
+  // Handle scrolling when messages change
   useEffect(() => {
-    messagesRef.current?.scroll({
-      top: messagesRef.current?.scrollHeight,
+    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={messagesRef} className={cssClasses.messagesContainer}>
+          <div ref={messagesContainer} className={cssClasses.messagesContainer}>
             {messages.map((message, index) => (
-              <MessageBubble
-                {...props}
-                customCssClasses={cssClasses.messageBubbleCssClasses}
-                key={index}
-                message={message}
-              />
+              <div key={index} ref={setMessagesRef(index)}>
+                <MessageBubble
+                  {...props}
+                  customCssClasses={cssClasses.messageBubbleCssClasses}
+                  message={message}
+                />
+              </div>
             ))}
             {loading && <LoadingDots />}
           </div>

test-site/src/App.tsx

@@ -20,21 +20,21 @@ function App() {
   return (
     <div>
       <div className="h-screen w-screen flex justify-center items-center bg-red-400">
-      {/* <h1 className="external-element">External Element!</h1> */}
+        {/* <h1 className="external-element">External Element!</h1> */}
+        <ChatHeadlessProvider config={config}>
+          <div className="h-5/6 w-1/2">
+            <ChatPanel
+              header={
+                <ChatHeader title="Clippy's Chatbot" showRestartButton={true} />
+              }
+            />
+          </div>
+        </ChatHeadlessProvider>
+      </div>
       <ChatHeadlessProvider config={config}>
-        <div className="h-5/6 w-1/2">
-          <ChatPanel
-            header={
-              <ChatHeader title="Clippy's Chatbot" showRestartButton={true} />
-            }
-          />
-        </div>
+        <ChatPopUp title="Clippy" />
       </ChatHeadlessProvider>
     </div>
-    <ChatHeadlessProvider config={config}>
-      <ChatPopUp title="Clippy" />
-    </ChatHeadlessProvider>
-  </div>
   );
 }
 

tests/__utils__/stories.tsx

@@ -1,12 +1,15 @@
-import { ChatHeadlessProvider, HeadlessConfig } from "@yext/chat-headless-react";
+import {
+  ChatHeadlessProvider,
+  HeadlessConfig,
+} from "@yext/chat-headless-react";
 
 const config: HeadlessConfig = {
   botId: "DUMMY_BOT_ID",
   apiKey: "DUMMY_API_KEY",
 };
 
 export function DummyChatHeadlessProvider({ children }) {
-  return <ChatHeadlessProvider config={config}>
-    {children}
-  </ChatHeadlessProvider>
-}
+  return (
+    <ChatHeadlessProvider config={config}>{children}</ChatHeadlessProvider>
+  );
+}

tests/components/MessageBubble.stories.tsx

@@ -10,9 +10,11 @@ const meta: Meta<typeof MessageBubble> = {
 export default meta;
 
 const Base: StoryObj<typeof meta> = {
-  render: (args) => <DummyChatHeadlessProvider>
-    <MessageBubble {...args} />
-  </DummyChatHeadlessProvider>,
+  render: (args) => (
+    <DummyChatHeadlessProvider>
+      <MessageBubble {...args} />
+    </DummyChatHeadlessProvider>
+  ),
 };
 
 export const BotMessage: StoryObj<typeof meta> = {