Spaces:
Build error
Build error
File size: 4,333 Bytes
7d9d30d b4297ca 7d9d30d fdaf912 7d9d30d fdaf912 7d9d30d b4297ca 7d9d30d b4297ca fdaf912 b4297ca fdaf912 b4297ca fdaf912 7d9d30d fdaf912 7d9d30d fdaf912 7d9d30d b4297ca fdaf912 7d9d30d fdaf912 7d9d30d |
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 |
import { useEffect, useState } from "react";
import { QuestionsBankProp, psscocQuestionsBank, eirQuestionsBank } from "@/app/components/ui/autofill-prompt/autofill-prompt.interface";
import { ChatHandler } from "@/app/components/ui/chat/chat.interface";
import { Undo2 } from "lucide-react";
export default function AutofillQuestion(
props: Pick<
ChatHandler,
"collSelectedId" | "collSelectedName" | "messages" | "isLoading" | "handleSubmit" | "handleInputChange" | "input" | "handleCollIdSelect"
>,
) {
// Keep track of whether to show the overlay
const [showOverlay, setShowOverlay] = useState(true);
// Randomly select a subset of questions
const [randomQuestions, setRandomQuestions] = useState<QuestionsBankProp[]>([]);
// Keep track of the current question index
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
// Questions bank for PSSCOC or EIR
const [questionsBank, setQuestionsBank] = useState<QuestionsBankProp[]>(psscocQuestionsBank);
// Shuffle the array using Fisher-Yates algorithm
function shuffleArray(array: any[]) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// TODO: To load the questionsbank from a database in the future
// Randomly select a subset of 3-4 questions
useEffect(() => {
// Select the questions bank based on the document set selected
if (props.collSelectedName === "EIR") {
setQuestionsBank(eirQuestionsBank);
}
else if (props.collSelectedName === "PSSCOC") {
setQuestionsBank(psscocQuestionsBank);
}
else {
// Do nothing and return
return;
}
// Shuffle the questionsBank array
const shuffledQuestions = shuffleArray(questionsBank);
// Get a random subset of 3-4 questions
const subsetSize = Math.floor(Math.random() * 2) + 3; // Randomly choose between 3 and 4
const selectedQuestions = shuffledQuestions.slice(0, subsetSize);
// Do a short delay before setting the state to show the animation
setTimeout(() => {
setRandomQuestions(selectedQuestions);
}, 300);
}, [questionsBank, props.collSelectedName]);
// Hide overlay when there are messages
useEffect(() => {
if (props.messages.length > 0) {
setShowOverlay(false);
}
else {
setShowOverlay(true);
}
}, [props.messages, props.input]);
// Handle autofill questions click
const handleAutofillQuestionClick = (questionInput: string) => {
props.handleInputChange({ target: { name: "message", value: questionInput } } as React.ChangeEvent<HTMLInputElement>);
};
// Handle back button click
const handleBackButtonClick = () => {
props.handleCollIdSelect("");
};
return (
<>
{showOverlay && (
<div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
<div className="rounded-lg pt-5 pr-10 pl-10 flex h-[50vh] flex-col overflow-y-auto pb-4">
<div className="flex items-center justify-center mb-4 gap-2">
<h2 className="text-lg text-center font-semibold">How can I help you with {props.collSelectedName} today?</h2>
<button
title="Go Back"
onClick={handleBackButtonClick}
className="hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-full p-1 transition duration-300 ease-in-out transform hover:scale-110 hover:bg-blue-500/10 focus:bg-blue-500/10"
>
<Undo2 className="w-6 h-6" />
</button>
</div>
<ul>
{randomQuestions.map((question, index) => (
<li key={index} className="p-2 mb-2 border border-zinc-500/30 dark:border-white rounded-lg hover:bg-zinc-500/30 transition duration-300 ease-in-out transform cursor-pointer">
<button
className="text-blue-500 w-full text-left"
onClick={() => handleAutofillQuestionClick(question.title)}
>
{question.title}
</button>
</li>
))}
</ul>
</div>
</div>
)}
</>
);
}
|