refactor: Improve async handling and file clearing logic#8835
Merged
Conversation
…diately after sending a message 📝 (chat-input.tsx): refactor code to improve readability and maintainability by extracting filesToSend logic into a separate variable
dosubot
Bot
added
the
size:S
Contributor
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update adjusts the timing of clearing the files state in the chat input, changes the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatInput
participant MessageSender
User->>ChatInput: Click Send / Run Flow
ChatInput->>ChatInput: Extract files to filesToSend
ChatInput->>ChatInput: setFiles([])
ChatInput->>MessageSender: await sendMessage({ files: filesToSend, ... })
MessageSender-->>ChatInput: Promise resolved/rejected
ChatInput-->>User: (Optional) Restore chat value on error
Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
Bot
added
refactor
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx(1 hunks)src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx(2 hunks)src/frontend/src/modals/IOModal/playground-modal.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/modals/IOModal/playground-modal.tsxsrc/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsxsrc/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/modals/IOModal/playground-modal.tsxsrc/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsxsrc/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
🔇 Additional comments (3)
src/frontend/src/modals/IOModal/playground-modal.tsx (1)
359-359: LGTM! Proper async handling implementation.The change from synchronous to asynchronous handling correctly aligns with the updated
sendMessagefunction signature and maintains consistency across the codebase.src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx (2)
10-10: LGTM! Correct type signature update.The prop type correctly reflects that
sendMessagenow returns a Promise, maintaining type safety.
26-30: LGTM! Proper async/await implementation.The onClick handler correctly uses async/await to handle the asynchronous
sendMessagecall.
Comment on lines
167
to
184
| const send = async () => { | ||
| const storedChatValue = chatValue; | ||
| const filesToSend = files | ||
| .map((file) => file.path ?? "") | ||
| .filter((file) => file !== ""); | ||
|
|
||
| // Clear files immediately when sending | ||
| setFiles([]); | ||
|
|
||
| try { | ||
| await sendMessage({ | ||
| repeat: 1, | ||
| files: files | ||
| .map((file) => file.path ?? "") | ||
| .filter((file) => file !== ""), | ||
| files: filesToSend, | ||
| }); | ||
| } catch (error) { | ||
| setChatValueStore(storedChatValue); | ||
| } | ||
|
|
||
| setFiles([]); | ||
| }; |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling to restore files on send failure.
While clearing files immediately after preparing them prevents race conditions, the current error handling only restores chatValue but not the files. If sendMessage fails, users will lose their file selections, leading to poor UX.
const send = async () => {
const storedChatValue = chatValue;
const filesToSend = files
.map((file) => file.path ?? "")
.filter((file) => file !== "");
+ const storedFiles = [...files]; // Store files before clearing
// Clear files immediately when sending
setFiles([]);
try {
await sendMessage({
repeat: 1,
files: filesToSend,
});
} catch (error) {
setChatValueStore(storedChatValue);
+ setFiles(storedFiles); // Restore files on error
}
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const send = async () => { | |
| const storedChatValue = chatValue; | |
| const filesToSend = files | |
| .map((file) => file.path ?? "") | |
| .filter((file) => file !== ""); | |
| // Clear files immediately when sending | |
| setFiles([]); | |
| try { | |
| await sendMessage({ | |
| repeat: 1, | |
| files: files | |
| .map((file) => file.path ?? "") | |
| .filter((file) => file !== ""), | |
| files: filesToSend, | |
| }); | |
| } catch (error) { | |
| setChatValueStore(storedChatValue); | |
| } | |
| setFiles([]); | |
| }; | |
| const send = async () => { | |
| const storedChatValue = chatValue; | |
| const filesToSend = files | |
| .map((file) => file.path ?? "") | |
| .filter((file) => file !== ""); | |
| const storedFiles = [...files]; // Store files before clearing | |
| // Clear files immediately when sending | |
| setFiles([]); | |
| try { | |
| await sendMessage({ | |
| repeat: 1, | |
| files: filesToSend, | |
| }); | |
| } catch (error) { | |
| setChatValueStore(storedChatValue); | |
| setFiles(storedFiles); // Restore files on error | |
| } | |
| }; |
🤖 Prompt for AI Agents
In src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx
around lines 167 to 184, the error handling in the send function restores
chatValue on sendMessage failure but does not restore the files array, causing
loss of user file selections. Modify the catch block to also reset the files
state to the previously stored files before clearing, ensuring both chatValue
and files are restored on error.
github-actions
Bot
added
refactor
github-actions
Bot
added
refactor
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
github-actions
Bot
added
refactor
ogabrielluiz
requested changes
Jul 4, 2025
Contributor
ogabrielluiz
left a comment
ogabrielluiz
left a comment
There was a problem hiding this comment.
Check coderabbit's comments
…nding a message to prevent losing files if an error occurs during sending.
ogabrielluiz
approved these changes
Jul 4, 2025
…t reliability and performance
dosubot
Bot
added
size:M
github-actions
Bot
added
refactor
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Jul 4, 2025
* fix chat image sent * 🐛 (chat-input.tsx): fix issue where files were not being cleared immediately after sending a message 📝 (chat-input.tsx): refactor code to improve readability and maintainability by extracting filesToSend logic into a separate variable * Delete diff_output_ts.txt * ♻️ (chat-input.tsx): refactor code to store and restore files when sending a message to prevent losing files if an error occurs during sending. * ✅ (fileUploadComponent.spec.ts): update timeout values for better test reliability and performance --------- Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com> Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
…he correct attribute value to ensure accurate testing
github-actions
Bot
added
refactor
rodrigosnader
pushed a commit
that referenced
this pull request
Jul 7, 2025
* fix chat image sent * 🐛 (chat-input.tsx): fix issue where files were not being cleared immediately after sending a message 📝 (chat-input.tsx): refactor code to improve readability and maintainability by extracting filesToSend logic into a separate variable * Delete diff_output_ts.txt * ♻️ (chat-input.tsx): refactor code to store and restore files when sending a message to prevent losing files if an error occurs during sending. * ✅ (fileUploadComponent.spec.ts): update timeout values for better test reliability and performance * ✅ (fileUploadComponent.spec.ts): update test assertion to check for the correct attribute value to ensure accurate testing --------- Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com> Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
smatiolids
pushed a commit
to smatiolids/langflow-dev
that referenced
this pull request
Jul 10, 2025
…#8835) * fix chat image sent * 🐛 (chat-input.tsx): fix issue where files were not being cleared immediately after sending a message 📝 (chat-input.tsx): refactor code to improve readability and maintainability by extracting filesToSend logic into a separate variable * Delete diff_output_ts.txt * ♻️ (chat-input.tsx): refactor code to store and restore files when sending a message to prevent losing files if an error occurs during sending. * ✅ (fileUploadComponent.spec.ts): update timeout values for better test reliability and performance * ✅ (fileUploadComponent.spec.ts): update test assertion to check for the correct attribute value to ensure accurate testing --------- Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com> Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request focuses on improving the handling of asynchronous operations in the chat input and related components. The most important changes include ensuring
sendMessageis treated as an asynchronous function throughout the codebase and improving the file clearing logic during message sending.Improvements to asynchronous handling:
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx: Updated thesendMessagefunction type to return aPromise<void>and modified theonClickhandler to useasync/awaitfor proper handling of asynchronous calls. [1] [2]src/frontend/src/modals/IOModal/playground-modal.tsx: Changed theonSubmithandler to useasync/awaitfor consistency in handling asynchronous operations.Improvements to file clearing logic:
src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx: Refactored thesendfunction to clear files immediately after preparing them for sending, ensuring better separation of concerns and avoiding potential race conditions.Summary by CodeRabbit