FredrikOseberg / react-chatbot-kit

MIT License
325 stars 156 forks source link

Bot allows empty user message treatment is outside MessageParser or ActionProvider. #24

Closed Beerbill closed 3 years ago

Beerbill commented 3 years ago

Hello,

Thank you so much for this bot, it's really amazing.

I caught a behavior that is not ideal, the chat bot allows the user to write empty strings "" as a valid input and it's impossible to treat it inside the MessageParser or ActionProvider.

react-chatbot-kit/src/components/Chat/Chat.jsx

const handleSubmit = (e) => {
    e.preventDefault();
    setState((state) => ({
      ...state,
      messages: [...state.messages, createChatMessage(input, "user")],
    }));
    messageParser.parse(input);
    scrollIntoView();
    setInputValue("");
  };

this part should or be treated or extracted to allow modular user input treatment.

FredrikOseberg commented 3 years ago

You're right. I think I'll implement something like this:

// outside chatbot
const validator = (message) => {
    if (message.length < 2 ) {
          return false;
    }
    return true;
}

// Pass validator as props
<Chatbot ... validator={validator} />

// in chatbot code
const handleSubmit = (e) => {
    e.preventDefault();
    const valid = validator(input)

    if (valid) {
        setState((state) => ({
          ...state,
          messages: [...state.messages, createChatMessage(input, "user")],
        }));
        messageParser.parse(input);
        scrollIntoView();
        setInputValue("");
    }
  };

Meanwhile. Here is a dirty hack:

// in messageparser: 

parse(message) {
    if (message.length < 2) {
         return this.actionProvider.handleInvalidInput()
    }
}

// in actionProvider

handleInvalidInput = () => {
      this.setState(state => {
           return { ...state, state.messages: [state.messages.slice(0, state.messages.length - 1)]}
      })
}
Beerbill commented 3 years ago

Another simple option is just disabling the submit button. Made a fork for myself with it. Thanks again!

<button
    className="react-chatbot-kit-chat-btn-send"
    style={customButtonStyle}
    disabled={input.length <= 0}
  >