Enhance Bot component with scroll management and new features#348
Conversation
- Added scroll handling to show/hide a button based on scroll position. - Introduced programmatic scroll guard to manage scrolling behavior. - Updated message handling to improve user experience with audio playback and message updates. - Integrated new utility function `getRecordingExtensionForMime` for better file handling. - Added new `StopButton` component and `ChevronDownIcon` for UI enhancements. - Updated CSS for improved scrollbar visibility and behavior across browsers.
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the Bot component with improved scroll management, new UI features, and updated message handling. The changes aim to provide a smoother user experience, especially regarding audio playback and message updates. Additionally, it introduces a utility function for better file handling and improves CSS for cross-browser compatibility. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
- Added a new function `hasAgentFlowExecutedData` to determine if the last message contains agent flow execution data. - Updated the `showAbortButton` prop to conditionally display based on the loading state and agent flow execution status.
There was a problem hiding this comment.
Code Review
This pull request introduces several significant enhancements to the Bot component, including scroll management with a 'scroll to bottom' button, refactoring to use immutable patterns instead of lodash.cloneDeep, and a message abort feature with a new StopButton and corresponding API call. It also includes better audio handling, improved scrollbar styling, and dynamic file extension for audio recordings. However, a critical security vulnerability was identified in the newly added abortMessageQuery function, where unsanitized variables are used to construct an API URL, potentially leading to path traversal attacks. This must be addressed by URL-encoding the path parameters. Additionally, a couple of suggestions have been made to further improve code clarity and robustness in the new handleAbort and handleTTSStart functions.
I am having trouble creating individual review comments. Click here to see my feedback.
src/queries/sendMessageQuery.ts (192-197)
The abortMessageQuery function constructs an API URL by concatenating chatflowid and chatId directly into the URL path without proper sanitization or URL encoding. If an attacker can influence these values (for example, through a user-controlled customerId in the chatflowConfig), they could use path traversal sequences like ../ to manipulate the request path. This could allow them to target unauthorized API endpoints on the server.
To remediate this, use encodeURIComponent() for all variables inserted into the URL path to ensure they are properly escaped.
sendRequest<any>({
method: 'PUT',
url: `${apiHost}/api/v1/chatmessage/abort/${encodeURIComponent(chatflowid)}/${encodeURIComponent(chatId)}`,
onRequest: onRequest,
});src/components/Bot.tsx (988-1002)
To avoid code duplication and ensure setIsMessageStopping(false) is always called after the async operation, whether it succeeds or fails, you can use a finally block. This makes the code cleaner and more robust.
const handleAbort = async () => {
setIsMessageStopping(true);
try {
await abortMessageQuery({
chatflowid: props.chatflowid,
apiHost: props.apiHost,
chatId: chatId(),
onRequest: props.onRequest,
});
} catch (error) {
console.error('Error aborting message:', error);
} finally {
setIsMessageStopping(false);
}
};
src/components/Bot.tsx (1863-1875)
The logic to update the message ID can be simplified for better readability and maintainability. Using the nullish coalescing operator (??) can make the intent clearer and the code more concise.
setMessages((prevMessages) => {
const lastMsg = prevMessages[prevMessages.length - 1];
if (lastMsg.type === 'userMessage') return prevMessages;
const newId = lastMsg.id ?? lastMsg.messageId ?? data.chatMessageId;
if (newId && newId !== lastMsg.id) {
const allMessages = [...prevMessages.slice(0, -1), { ...lastMsg, id: newId }];
addChatMessage(allMessages);
return allMessages;
}
return prevMessages;
});
getRecordingExtensionForMimefor better file handling.StopButtoncomponent andChevronDownIconfor UI enhancements.