Janet/JanetFrontEnd/src/FeedbackForm.js

import React, { useState } from "react";
import "./style.css";

const FeedbackForm = (props) => {
  const { updateNeedForm, messages } = props.props;
  const [responseLength, setResponseLength] = useState("short");
  const [responseFluency, setResponseFluency] = useState("basic");
  const [responseTruthfulness, setResponseTruthfulness] = useState("NA");
  const [responseUsefulness, setResponseUsefulness] = useState("no");
  const [responseTime, setResponseTime] = useState("slow");
  const [intent, setIntent] = useState("QA");
  const [modQueryCorrectness, setModQueryCorrectness] = useState("no");
  const [modQuery, setModQuery] = useState("");
  const [response, setResponse] = useState("");
  const backendUrl = process.env.REACT_APP_BACKEND_URL;

  function onSubmit(event) {
    event.preventDefault();

    var ratings = {};
    ratings["query"] = messages[0].query;
    ratings["history"] = messages[0].history;
    ratings["modQuery"] = messages[0].modQuery;
    ratings["queryModCorrect"] = modQueryCorrectness;
    if (modQueryCorrectness === "yes") {
      ratings["correctQuery"] = messages[0].modQuery;
    } else {
      ratings["correctQuery"] = modQuery;
    }
    ratings["janetResponse"] = messages[0].message;
    ratings["preferredResponse"] = response;
    ratings["length"] = responseLength;
    ratings["fluency"] = responseFluency;
    ratings["truthfulness"] = responseTruthfulness;
    ratings["usefulness"] = responseUsefulness;
    ratings["speed"] = responseTime;
    ratings["intent"] = intent;

    fetch(backendUrl + '/feedback', {
            method: 'POST',
            body: JSON.stringify({ feedback: ratings }),
            mode: 'cors',
            headers: {
              'Content-Type': 'application/json'
            },
          }).then(r => r.json())
          .catch(error => console.error(error));
    console.log(ratings);
    updateNeedForm(false);
  }

  return (
        <div id="feedback-window" class="feedback-box">
          <form id="feedback-form">
            <div class="feedback-question">
              <label for="response-length">
                What do you think of the length of the response?
              </label>
              <select
                id="response-length"
                name="What do you think of the length of the response?"
                onChange={(e) => setResponseLength(e.target.value)}
              >
                <option value="short">short</option>
                <option value="right">right</option>
                <option value="long">long</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="response-fluency">
                How would you rate the fluency of the response?
              </label>
              <select
                id="response-fluency"
                name="How would you rate the fluency of the response?"
                onChange={(e) => setResponseFluency(e.target.value)}
              >
                <option value="basic">basic</option>
                <option value="intermediate">intermediate</option>
                <option value="fluent">fluent</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="response-truthfulness">
                If applicable, was the response true?
              </label>
              <select
                id="response-truthfulness"
                name="If applicable, was the response true?"
                onChange={(e) => setResponseTruthfulness(e.target.value)}
              >
                <option value="yes">yes</option>
                <option value="no">no</option>
                <option value="NA">NA</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="response-usefulness">
                Was your need satisfied by this response?
              </label>
              <select
                id="response-usefulness"
                name="Was your need satisfied by this response?"
                onChange={(e) => setResponseUsefulness(e.target.value)}
              >
                <option value="yes">yes</option>
                <option value="no">no</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="response-time">
                How fast was it to produce the response?
              </label>
              <select
                id="response-time"
                name="How fast was it to produce the response?"
                onChange={(e) => setResponseTime(e.target.value)}
              >
                <option value="fast">fast</option>
                <option value="slow">slow</option>
                <option value="acceptable">acceptable</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="query-intent">What was your intent?</label>
              <select
                id="query-intent"
                name="What was your intent?"
                onChange={(e) => setIntent(e.target.value)}
              >
                <option value="QA">QA</option>
                <option value="CHITCHAT">CHITCHAT</option>
                <option value="FINDPAPER">FINDPAPER</option>
                <option value="FINDDATASET">FINDDATASET</option>
                <option value="SUMMARIZEPAPER">SUMMARIZEPAPER</option>
                <option value="AFFIRMATION">AFFIRMATION</option>
                <option value="NEGATION">NEGATION</option>
                <option value="NA">NA</option>
              </select>
            </div>
            <div class="feedback-question">
              <label for="query-correctness">
                Was this modification to the query correct? {messages[0].modQuery}
              </label>
              <select
                id="query-correctness"
                name=" Was this modification to the query correct?"
                onChange={(e) => setModQueryCorrectness(e.target.value)}
              >
                <option value="yes">yes</option>
                <option value="no">no</option>
              </select>
            </div>
            <label for="correct-query">
              Could you provide a modified context-free
              (chat-history-independent) version of your query?
            </label>
            <textarea
              id="correct-query"
              name="Could you provide a modified context-free (chat-history-independent) version of your query?"
              onChange={(e) => setModQuery(e.target.value)}
            ></textarea>
            '
            <div class="feedback-question">
              <label for="preferred response">
                Would you write a better response?
              </label>
              <textarea
                id="preferred response"
                name="Would you write a better response?"
                onChange={(e) => setResponse(e.target.value)}
              ></textarea>
              '
            </div>
            <div class="feedback-submit">
              <input type="submit" value="Submit" onClick={onSubmit} />
            </div>
          </form>
    </div>
  );
};

export default FeedbackForm;