OpenHands icon indicating copy to clipboard operation
OpenHands copied to clipboard

Fix chat input not clearing after image paste/drop

Open neubig opened this issue 1 year ago • 2 comments

Fixes #5341

When an image is attached to the chat (via paste or drag & drop), the chat text is not cleared. This PR fixes that by:

  1. Adding tests to reproduce the issue
  2. Modifying the ChatInput component to clear the text input when an image is pasted/dropped
  3. Updating the InteractiveChatBox component to handle the controlled input state properly

[From @neubig, not OpenHands]

I have confirmed locally that this works as expected, in contrast to the screenshot in the issue.

Screenshot 2024-12-01 at 11 54 25 AM

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0da15d4-nikolaik   --name openhands-app-0da15d4   docker.all-hands.dev/all-hands-ai/openhands:0da15d4

neubig avatar Dec 01 '24 15:12 neubig

@openhands-agent please:

  1. Make all of the changes that amanape requested
  2. Fix all merge errors with main
  3. Check the files for the "Lint / Lint frontend" and "Run Frontend Unit Tests / FE Unit Tests" workflows, run the commands in these workflows, and make sure they pass

neubig avatar Dec 02 '24 13:12 neubig

OpenHands started fixing the pr! You can monitor the progress here.

github-actions[bot] avatar Dec 02 '24 13:12 github-actions[bot]

Made the following changes based on review feedback:

  1. Removed the direct input clearing from chat-input.tsx as it was not necessary
  2. Modified interactive-chat-box.tsx to:
    • Remove the local input state management (inputValue and setInputValue)
    • Pass the value and onChange props directly to ChatInput
    • Add onChange?.("") to the handleUpload function to clear the input when an image is uploaded
  3. Updated the tests to focus on checking the onChange behavior rather than directly checking the textarea value

All lint checks and tests are passing. The code now maintains proper separation of concerns with ChatInput remaining a controlled component that delegates state management to its parent.

updates from openhands-agent

malhotra5 avatar Dec 09 '24 21:12 malhotra5