joelostblom / viz-oer

An interactive open educational resource for learning data visualization
https://joelostblom.github.io/viz-oer/
1 stars 0 forks source link

Submit chat message on keypress #33

Closed joelostblom closed 2 months ago

joelostblom commented 2 months ago

I think it would be convenient if the the form sent on either enter or ctrl+enter (maybe the latter is more common nowadays). We could add this info to the place holder.

@rorywhite200 Could you look into this at some point? Maybe like this https://stackoverflow.com/questions/8934088/how-to-make-enter-key-in-a-textarea-submit-a-form

rorywhite200 commented 2 months ago

Hi Joel, I got this working locally. In the chat.js file we need to replace

submitButton.onclick = async () => {
    const prompt = userInput.value;
    if (prompt.trim() === '') return;
    messageCount++;
    chatDisplay.innerHTML += createChatMessageHTML(prompt, false);
    userInput.value = '';
    chatDisplay.scrollTop = chatDisplay.scrollHeight;
    try {
      const response = await sendOpenAIRequest(prompt);
      chatDisplay.innerHTML += createChatMessageHTML(response, true);
    } catch (error) {
      chatDisplay.innerHTML += createChatMessageHTML("Error: " + error.message, true);
    }
    chatDisplay.scrollTop = chatDisplay.scrollHeight;
  };

with

async function handleSubmit() {
    const prompt = userInput.value;
    if (prompt.trim() === '') return;
    messageCount++;
    chatDisplay.innerHTML += createChatMessageHTML(prompt, false);
    userInput.value = '';
    chatDisplay.scrollTop = chatDisplay.scrollHeight;
    try {
      const response = await sendOpenAIRequest(prompt);
      chatDisplay.innerHTML += createChatMessageHTML(response, true);
    } catch (error) {
      chatDisplay.innerHTML += createChatMessageHTML("Error: " + error.message, true);
    }
    chatDisplay.scrollTop = chatDisplay.scrollHeight;
  }

  submitButton.onclick = handleSubmit;
  userInput.addEventListener('keypress', e => e.key === 'Enter' && !e.shiftKey && (e.preventDefault(), handleSubmit()));
rorywhite200 commented 2 months ago

I can make a new branch if that works, dont want to conflict with your current branch. Or should I add to that branch?

joelostblom commented 2 months ago

It should be fine if you create a separate PR with these changes. We can handled conflicts (although I don't think there will be any)