Fix chatbot UI autoscrolling and insert position for bot message feed…

…back
ansible · Jan 3, 2025 · d960f75 · d960f75
1 parent 8f1c3bd
commit d960f75
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx b/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx
@@ -294,22 +294,24 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
                   { referenced_documents, ...message }: ExtendedMessage,
                   index,
                 ) => (
-                  <div key={`m_div_${index}`}>
-                    <Message key={`m_msg_${index}`} {...message} />
-                    <ReferencedDocuments
-                      key={`m_docs_${index}`}
-                      caption="Refer to the following for more information:"
-                      referenced_documents={referenced_documents}
-                    />
-                  </div>
+                  <>
+                    {message.scrollToHere && <div ref={messagesEndRef} />}
+                    <div key={`m_div_${index}`}>
+                      <Message key={`m_msg_${index}`} {...message} />
+                      <ReferencedDocuments
+                        key={`m_docs_${index}`}
+                        caption="Refer to the following for more information:"
+                        referenced_documents={referenced_documents}
+                      />
+                    </div>
+                  </>
                 ),
               )}
               {isLoading ? (
                 <Message key="9999" isLoading={true} {...botMessage("....")} />
               ) : (
                 <></>
               )}
-              <div ref={messagesEndRef} />
             </MessageBox>
           </ChatbotContent>
           <ChatbotFooter>

diff --git a/ansible_ai_connect_chatbot/src/types/Message.ts b/ansible_ai_connect_chatbot/src/types/Message.ts
@@ -34,10 +34,12 @@ export type ReferencedDocumentsProp = {
 
 export type ExtendedMessage = MessageProps & {
   referenced_documents: ReferencedDocument[];
+  scrollToHere?: boolean;
 };
 
 export type ChatFeedback = {
   query: string;
   response: ChatResponse;
   sentiment: Sentiment;
+  message: ExtendedMessage;
 };
diff --git a/ansible_ai_connect_chatbot/src/useChatbot/useChatbot.ts b/ansible_ai_connect_chatbot/src/useChatbot/useChatbot.ts
@@ -146,25 +146,45 @@ export const useChatbot = () => {
   >(undefined);
   const [selectedModel, setSelectedModel] = useState("granite3-8b");
 
-  const addMessage = (newMessage: ExtendedMessage) => {
-    setMessages((msgs: ExtendedMessage[]) => [...msgs, newMessage]);
+  const addMessage = (
+    newMessage: ExtendedMessage,
+    addAfter?: ExtendedMessage,
+  ) => {
+    setMessages((msgs: ExtendedMessage[]) => {
+      const newMsgs: ExtendedMessage[] = [];
+      newMessage.scrollToHere = true;
+      let inserted = false;
+      for (const msg of msgs) {
+        delete msg.scrollToHere;
+        newMsgs.push(msg);
+        if (msg === addAfter) {
+          newMsgs.push(newMessage);
+          inserted = true;
+        }
+      }
+      if (!inserted) {
+        newMsgs.push(newMessage);
+      }
+      return newMsgs;
+    });
   };
 
   const botMessage = (
     response: ChatResponse | string,
     query = "",
-  ): MessageProps => {
-    const sendFeedback = async (sentiment: Sentiment) => {
-      if (typeof response === "object") {
-        handleFeedback({ query, response, sentiment });
-      }
-    };
-    const message: MessageProps = {
+  ): ExtendedMessage => {
+    const message: ExtendedMessage = {
       role: "bot",
       content: typeof response === "object" ? response.response : response,
       name: botName,
       avatar: logo,
       timestamp: getTimestamp(),
+      referenced_documents: [],
+    };
+    const sendFeedback = async (sentiment: Sentiment) => {
+      if (typeof response === "object") {
+        handleFeedback({ query, response, sentiment, message });
+      }
     };
 
     message.actions = {
@@ -224,7 +244,7 @@ export const useChatbot = () => {
           referenced_documents: [],
           ...feedbackMessage(feedbackRequest),
         };
-        addMessage(newBotMessage);
+        addMessage(newBotMessage, feedbackRequest.message);
       } else {
         setAlertMessage({
           title: "Error",