IME Input Handling Issue in Chat LangChain

norisuke3 commented 2 months ago

Checked other resources

[X] I added a very descriptive title to this issue.
[X] I searched the LangChain documentation with the integrated search.
[X] I used the GitHub search to find a similar question and didn't find it.
[X] I am sure that this is a bug in LangChain rather than my code.
[X] The bug is not resolved by updating to the latest stable version of LangChain (or the specific integration package).

Example Code

There is an issue at https://chat.langchain.com/

Description

When using IME to input Japanese prompts in the Chat LangChain (https://chat.langchain.com/), pressing the Enter key to confirm Japanese character conversion results in the prompt being prematurely sent. This issue likely affects other languages using IME as well. (The same type of issue as https://github.com/langchain-ai/langchain/issues/24231, but the solution is slightly different)

Steps to Reproduce:

Use IME to input a Japanese prompt. Press the Enter key to confirm character conversion.

Expected Behavior:

The input should be correctly converted to Japanese. The prompt should not be sent.

Actual Behavior:

The prompt is sent prematurely while still being composed.

Proposed Solution:

In my local environment, running the following code in the Chrome console resolves the issue. I suggest incorporating a similar solution into the Chat LangChain:

(function() {
    'use strict';

    var parent_element = document.querySelector("body");
    var isComposing = false;

    // Start of Japanese input
    parent_element.addEventListener('compositionstart', function(){
        if (event.target.tagName === 'TEXTAREA') {
            isComposing = true;
        }
    });

    // End of Japanese input
    parent_element.addEventListener('compositionend', function(){
        if (event.target.tagName === 'TEXTAREA') {
            isComposing = false;
        }
    });

    // Modified handleIMEEnter function
    function handleIMEEnter(event) {
        if (event.target.tagName === 'TEXTAREA') {
            if (event.code == "Enter" && isComposing) {
                event.stopPropagation();
            }
        }
    }

    // Register handleIMEEnter function as a keydown event listener
    parent_element.addEventListener('keydown', handleIMEEnter);
})();

Additional Notes:

The difference with IME Input Handling Issue in LangChain Chat Playground is that in Chat LangChain, a new TextArea is dynamically added for each prompt submission. Therefore, it is necessary to ensure that events are fired from the newly added TextArea as well. Specifically, this is achieved by capturing and handling events that bubble up to the body element.

System Information

OS: Darwin OS Version: Darwin Kernel Version 21.6.0: Thu Jun 8 23:57:12 PDT 2023; root:xnu-8020.240.18.701.6~1/RELEASE_X86_64 Browser: Google Chrome Version 126.0.6478.127 (Official Build) (x86_64)

keenborder786 commented 2 months ago

This is Repo for Langchain Python. You should raise this issue in the Langchain JS repo.

norisuke3 commented 2 months ago

Okay. I've just posted here: https://github.com/langchain-ai/chat-langchainjs/issues/31

langchain-ai / langchain