feat: "Retry" btn conditionally renders in place of query input when a generation fails. Uses prev query to fetch answer when clicked.

This commit is contained in:
utin-francis-peter 2024-06-07 15:59:56 +01:00
parent ae846dac4d
commit 8d2ebe9718

View File

@ -29,6 +29,7 @@ export default function Conversation() {
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
const fetchStream = useRef<any>(null);
const [eventInterrupt, setEventInterrupt] = useState(false);
const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
const { t } = useTranslation();
const handleUserInterruption = () => {
@ -73,6 +74,13 @@ export default function Conversation() {
};
}, [endMessageRef.current]);
useEffect(() => {
if (queries.length) {
queries[queries.length - 1].error && setLastQueryReturnedErr(true);
queries[queries.length - 1].response && setLastQueryReturnedErr(false); //considering a query that initially returned error can later include a response property on retry
}
}, [queries]);
const scrollIntoView = () => {
endMessageRef?.current?.scrollIntoView({
behavior: 'smooth',
@ -174,6 +182,7 @@ export default function Conversation() {
{queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
</div>
<div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12 md:fixed">
{!lastQueryReturnedErr ? (
<div className="flex h-full w-full items-center rounded-full border border-silver">
<div
id="inputbox"
@ -213,6 +222,20 @@ export default function Conversation() {
</div>
)}
</div>
) : (
<div className="flex flex-col items-center p-4">
<p>There was an error during generation</p>
<button
className="p-4"
onClick={() =>
handleQuestion(queries[queries.length - 1].prompt, true)
}
>
Retry
</button>
</div>
)}
<p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
{t('tagline')}
</p>