{chatsDetailsData?.map((data, index) => {
const isLastIndex = index === chatsDetailsData.length – 1;
return (
{/* /}
{/ Background circle */}
{/* Text with the first letter */}
<text
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
fontSize="20"
fill="black"
fontFamily="Arial"
>
{data.user_frst_nm.charAt(0)}
</text>
</svg>
</div>
<div className="flex flex-col gap-1">
<div>
<p className="font-bold">{data.user_frst_nm}</p>
</div>
<div className="mb-6 w-full">
<p>{data.question}</p>
</div>
</div>
</div>
<div className="mx-auto flex gap-3 lg:max-w-[48rem] lg:w-[48rem]">
<img
className="h-[18px] mt-[3px]"
src={logo}
alt="userlogo"
/>
<div
className="flex flex-col gap-1 mb-[12px]"
ref={bottomRef}
>
<p className="font-bold">Agent</p>
{isLastIndex ? (
<Typewriter
onInit={(typewriter) => {
typewriter.typeString(data.answer).start();
}}
/>
) : (
<TextProcessor inputText={data.answer} />
)}
</div>
</div>
</div>
);
})}
</>
)}
in this code the new answer comes from a mutation function from tanstack query. I want an effect like chatgpt to run the code only if the answer is new but this simple typewriter won’t run even without that functionality until I refresh the page. Please help asap
I expected it to run without refresh for new answer just like mutation function
Yusuf Ishan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.