chore: if user types in a new prompt after failed generation (instead of hitting retry btn), the failed query is updated with the new prompt before response is fetched. Ensuring every query object remains useful & relevant

This commit is contained in:
utin-francis-peter 2024-06-11 20:30:12 +01:00
parent 2cca7d60d5
commit 2f9cbe2bf1

View File

@ -33,6 +33,8 @@ export default function Conversation() {
const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false); const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
console.log('QUERIES: ', queries);
const handleUserInterruption = () => { const handleUserInterruption = () => {
if (!eventInterrupt && status === 'loading') setEventInterrupt(true); if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
}; };
@ -102,6 +104,7 @@ export default function Conversation() {
!isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
fetchStream.current = dispatch(fetchAnswer({ question })); fetchStream.current = dispatch(fetchAnswer({ question }));
}; };
const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => { const handleFeedback = (query: Query, feedback: FEEDBACK, index: number) => {
const prevFeedback = query.feedback; const prevFeedback = query.feedback;
dispatch(updateQuery({ index, query: { feedback } })); dispatch(updateQuery({ index, query: { feedback } }));
@ -110,6 +113,29 @@ export default function Conversation() {
); );
}; };
const handleQuestionSubmission = () => {
if (inputRef.current?.textContent && status !== 'loading') {
if (lastQueryReturnedErr) {
// update last failed query with new prompt
dispatch(
updateQuery({
index: queries.length - 1,
query: {
prompt: inputRef.current.textContent,
},
}),
);
handleQuestion({
question: queries[queries.length - 1].prompt,
isRetry: true,
});
} else {
handleQuestion({ question: inputRef.current.textContent });
}
inputRef.current.textContent = '';
}
};
const prepResponseView = (query: Query, index: number) => { const prepResponseView = (query: Query, index: number) => {
let responseView; let responseView;
if (query.response) { if (query.response) {
@ -196,12 +222,12 @@ export default function Conversation() {
<button <button
className="mb-5 flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-8 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray" className="mb-5 flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-8 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
disabled={status === 'loading'} disabled={status === 'loading'}
onClick={() => onClick={() => {
handleQuestion({ handleQuestion({
question: queries[queries.length - 1].prompt, question: queries[queries.length - 1].prompt,
isRetry: true, isRetry: true,
}) });
} }}
> >
<RetryIcon <RetryIcon
fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'} fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
@ -223,10 +249,7 @@ export default function Conversation() {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
if (inputRef.current?.textContent && status !== 'loading') { handleQuestionSubmission();
handleQuestion({ question: inputRef.current.textContent });
inputRef.current.textContent = '';
}
} }
}} }}
></div> ></div>
@ -239,14 +262,7 @@ export default function Conversation() {
<div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000"> <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
<img <img
className="w-6 text-white " className="w-6 text-white "
onClick={() => { onClick={handleQuestionSubmission}
if (inputRef.current?.textContent) {
handleQuestion({
question: inputRef.current.textContent,
});
inputRef.current.textContent = '';
}
}}
src={isDarkTheme ? SendDark : Send} src={isDarkTheme ? SendDark : Send}
></img> ></img>
</div> </div>