Spaces:
Running
Running
File size: 3,638 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
import React, { useState, useEffect } from "react";
import FileUpload from "../Settings/FileUpload";
import ToneSelector from "../Settings/ToneSelector";
interface ChatBoxSettings {
report_type: string;
report_source: string;
tone: string;
}
interface ResearchFormProps {
chatBoxSettings: ChatBoxSettings;
setChatBoxSettings: React.Dispatch<React.SetStateAction<ChatBoxSettings>>;
onFormSubmit?: (
task: string,
reportType: string,
reportSource: string,
) => void;
defaultReportType: string;
}
export default function ResearchForm({
chatBoxSettings,
setChatBoxSettings,
onFormSubmit,
defaultReportType,
}: ResearchFormProps) {
const [task, setTask] = useState(""); // You can use this to capture any specific task data if needed
// Destructure necessary fields from chatBoxSettings
let { report_type, report_source, tone } = chatBoxSettings;
const onFormChange = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
setChatBoxSettings((prevSettings: any) => ({
...prevSettings,
[name]: value,
}));
};
const onToneChange = (e: { target: { value: any } }) => {
const { value } = e.target;
setChatBoxSettings((prevSettings: any) => ({
...prevSettings,
tone: value,
}));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (onFormSubmit) {
onFormSubmit(task, report_type, report_source); // Trigger the onFormSubmit prop when form is submitted
} else {
console.warn("onFormSubmit is not defined");
}
};
useEffect(() => {
// Set default report type only if report_type is empty (initial mount)
if (!chatBoxSettings.report_type) {
setChatBoxSettings((prevSettings) => ({
...prevSettings,
report_type: defaultReportType,
}));
}
}, [defaultReportType, setChatBoxSettings, chatBoxSettings.report_type]);
return (
<form
method="POST"
className="report_settings mt-3"
onSubmit={handleSubmit}
>
<div className="form-group">
<label htmlFor="report_type" className="agent_question">
Report Type{" "}
</label>
<select
name="report_type"
value={report_type}
onChange={onFormChange}
className="form-control"
required
>
<option value="multi_agents">Multi Agents Report</option>
<option value="research_report">
Summary - Short and fast (~2 min)
</option>
<option value="detailed_report">
Detailed - In depth and longer (~5 min)
</option>
</select>
</div>
<div className="form-group">
<label htmlFor="report_source" className="agent_question">
Report Source{" "}
</label>
<select
name="report_source"
value={report_source}
onChange={onFormChange}
className="form-control"
required
>
<option value="web">The Internet</option>
<option value="local">My Documents</option>
<option value="hybrid">Hybrid</option>
</select>
</div>
{/* Conditional file upload if the report source is 'local' or 'hybrid' */}
{report_source === "local" || report_source === "hybrid" ? (
<FileUpload />
) : null}
{/* ToneSelector for changing the tone */}
<ToneSelector tone={tone} onToneChange={onToneChange} />
</form>
);
}
|