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",