205 lines
8.4 KiB
JavaScript
205 lines
8.4 KiB
JavaScript
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 [evidence, setEvidence] = useState("NA");
|
|
const backendUrl = '/api';//process.env.REACT_APP_BACKEND_URL+'/api';
|
|
const mod = "Was this modification to the query correct? " + messages[0].modQuery
|
|
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;
|
|
ratings["evidence"] = evidence;
|
|
|
|
fetch(backendUrl + '/feedback', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ feedback: ratings }),
|
|
mode: 'cors',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
}).then(r => r.json()).then(r => {console.log(r.status);})
|
|
.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="NA">NA</option>
|
|
<option value="yes">yes</option>
|
|
<option value="no">no</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="evidence-usefulness">
|
|
Was the answer contained in the evidence? (only if applicable; i.e, with QA)
|
|
</label>
|
|
<select
|
|
id="evidence-usefulness"
|
|
name="If applicable, was the answer contained in the evidence?"
|
|
onChange={(e) => setEvidence(e.target.value)}
|
|
>
|
|
<option value="NA">NA</option>
|
|
<option value="yes">yes</option>
|
|
<option value="no">no</option>
|
|
</select>
|
|
</div>
|
|
<div class="feedback-question">
|
|
<label for="query-intent">What was the goal of your query (your intent)?</label>
|
|
<select
|
|
id="query-intent"
|
|
name="What was your query about?"
|
|
onChange={(e) => setIntent(e.target.value)}
|
|
>
|
|
<option value="Question-Answering">Question-Answering</option>
|
|
<option value="CHITCHAT">Chitchatting</option>
|
|
<option value="FINDPAPER">Finding a Paper</option>
|
|
<option value="FINDDATASET">Finding a Dataset</option>
|
|
<option value="FINDPOST">Finding a Post</option>
|
|
<option value="SUMMARIZEPAPER">Summarizing a Paper</option>
|
|
<option value="HELP">Asking for Help</option>
|
|
<option value="LISTCOMMANDS">Listing the Commands</option>
|
|
<option value="LISTPAPERS">Listing the Papers</option>
|
|
<option value="LISTDATASETS">Listing the Datasets</option>
|
|
<option value="LISTTOPICS">Listing the VRE Topics</option>
|
|
<option value="LISTRESOURCES">Listing all the VRE Resources</option>
|
|
</select>
|
|
</div>
|
|
<div class="feedback-question">
|
|
<label for="query-correctness">
|
|
Was this modification to your original query correct? {messages[0].modQuery}
|
|
</label>
|
|
<select
|
|
id="query-correctness"
|
|
name={mod}
|
|
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
|
|
(not dependent on the conversation history) version of your query? *Not Mandatory to answer
|
|
</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 than the one generated by Janet? *Not Mandatory to answer
|
|
</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;
|
|
|