Një udhëzues për React trajton ndërtimin e një ndërfaqeje bisede me AI, ku përgjigjet shfaqen gradualisht. Fokusi nuk është thjesht dërgimi i tokenëve te shfletuesi, por përvoja gjatë mbërritjes së tyre: kontrolli i lëvizjes në ekran, ndërprerja e përgjigjes, qëndrueshmëria e tekstit dhe aksesueshmëria.
Zgjidhja përdor shadcn/ui si bazë, Vercel AI SDK për transportin e të dhënave dhe katër komponentë me kod të hapur nga Cuelark UI: Conversation, Message, StreamingText dhe PromptInput. Komponentët instalohen si kod burimor, duke u mundësuar zhvilluesve t’i ndryshojnë sipas nevojës.
Ndërfaqja e përshkruar ndjek automatikisht përgjigjen e re, por ndalon sapo lexuesi lëviz lart për të lexuar mesazhe të mëparshme. Gjatë gjenerimit, butoni Send kthehet në Stop dhe tasti Esc mundëson anulimin. Teksti që është shfaqur duhet të mbetet vizualisht i qëndrueshëm, ndërsa lexuesit e ekranit duhet të njoftojnë mbërritjen e përgjigjes pa lexuar çdo token veçmas.
Konfigurimi kërkon një projekt React me shadcn/ui dhe Tailwind CSS v4; mbështeten Next.js, Vite, TanStack Start, React Router dhe Astro. Udhëzuesi shpjegon shtimin e regjistrit Cuelark në components.json dhe instalimin e katër komponentëve me CLI, ose instalimin e tyre drejtpërdrejt përmes URL-ve.
Burimi: DEV Community (Web Dev Feed) — lexoni artikullin e plotë në anglisht.
