fix: make not filled required fields be validated before sending to the backend

[lucaseduoli]

This pull request introduces several updates to the chat input functionality, error handling, and utility methods in the codebase. The most significant changes include adding error recovery for chat input, improving edge validation logic, and introducing a utility for subgraph traversal. Additionally, some type definitions and unused imports have been updated.

Chat Input Enhancements:

• Added error recovery in send method of chat-input.tsx to reset the chat value in case of a failure during message sending.
• Prevented the default behavior of the onKeyDown event in text-area-wrapper.tsx to ensure proper handling of the "Enter" key when sending messages.
• Updated sendMessage in chat-view.tsx to be asynchronous for consistency with other chat input changes.

Edge Validation and Subgraph Utility:

• Enhanced edge validation in flowStore.ts to validate only relevant subgraphs (upstream or downstream) based on provided node IDs, using the newly introduced getConnectedSubgraph utility.
• Added getConnectedSubgraph utility in reactflowUtils.ts to retrieve all connected nodes and edges in a specified direction (upstream or downstream) from a given node.

Type and Code Cleanup:

• Updated type definitions in index.ts to reflect the asynchronous nature of sendMessage. [1] [2]
• Removed an unused constant (BASE_URL_API) from buildUtils.ts.

Summary by CodeRabbit

• Bug Fixes
  • Improved error handling in chat input: if sending a message fails, the input state is reverted and files are cleared.
  • Prevented default browser actions when sending messages via keyboard shortcuts, ensuring consistent send behavior.
• New Features
  • Enhanced validation logic for flows by validating only relevant subgraphs, improving performance and accuracy.
• Refactor
  • Updated message sending functions to be asynchronous for better reliability and tracking.
  • Streamlined error aggregation and reporting during flow validation.
• Chores
  • Removed unused imports and variables to clean up the codebase.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces selective subgraph validation in the flow-building logic, adds error propagation for message sending, and updates related type signatures to asynchronous patterns. It also introduces a utility for subgraph extraction, improves error handling and reporting, and makes minor code cleanups and event handling adjustments in the chat input components.

Changes

File(s)	Change Summary
src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx	Refactored send to async, added error handling to restore chat input on failure, always clears files state.
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/text-area-wrapper.tsx	Added event.preventDefault() before sending on key event to prevent default browser behavior.
src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx	Changed sendMessage prop to async; tracking now occurs after message sending completes.
src/frontend/src/modals/IOModal/playground-modal.tsx	Modified error handling in sendMessage to re-throw after logging errors from buildFlow.
src/frontend/src/stores/flowStore.ts	Switched to selective subgraph validation using new utility; streamlined error aggregation/reporting.
src/frontend/src/types/components/index.ts	Updated sendMessage type signatures to return Promise<void> instead of void.
src/frontend/src/utils/buildUtils.ts	Removed unused import BASE_URL_API.
src/frontend/src/utils/reactflowUtils.ts	Added getConnectedSubgraph utility for extracting connected subgraphs in a given direction.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ChatInput
    participant ChatView
    participant PlaygroundModal
    participant FlowStore

    User->>ChatInput: Trigger send (e.g., keydown)
    ChatInput->>ChatView: await sendMessage({repeat, files})
    ChatView->>PlaygroundModal: await sendMessage({repeat, files})
    PlaygroundModal->>FlowStore: await buildFlow()
    FlowStore->>FlowStore: Validate subgraph (upstream/downstream)
    alt Validation error
        FlowStore-->>PlaygroundModal: throw Error
        PlaygroundModal-->>ChatView: throw Error
        ChatView-->>ChatInput: throw Error
        ChatInput->>ChatInput: Restore chat input state
    else Success
        FlowStore-->>PlaygroundModal: Success
        PlaygroundModal-->>ChatView: Success
        ChatView->>ChatView: track("Playground Message Sent")
    end
    ChatInput->>ChatInput: Clear files state

Loading

Suggested labels

bug, size:M, lgtm

Suggested reviewers

• deon-sanchez
• Cristhianzl
• mfortman11

✨ Finishing Touches

🧪 Generate Unit Tests

• Create PR with Unit Tests
• Post Copyable Unit Tests in Comment
• Commit Unit Tests in branch fix/silent_failure

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[mfortman11]

I like the idea but we lose the error highlight of component w/ the error

[mfortman11]

Looks better