diff --git a/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx b/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx
index cf182a47d..036c55fbd 100644
--- a/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx
+++ b/ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx
@@ -294,14 +294,17 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
{ referenced_documents, ...message }: ExtendedMessage,
index,
) => (
-
-
-
-
+ <>
+ {message.scrollToHere && }
+
+
+
+
+ >
),
)}
{isLoading ? (
@@ -309,7 +312,6 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
) : (
<>>
)}
-
diff --git a/ansible_ai_connect_chatbot/src/types/Message.ts b/ansible_ai_connect_chatbot/src/types/Message.ts
index 3c60ec1f3..48979ae8a 100644
--- 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
index ec8608b6d..7e3a16b0a 100644
--- 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",