I denne vejledning lærer du, hvordan du kan forbedre brugergrænsefladen (UI) af din chat-applikation ved at bruge OpenAI API . Indtil videre har chatfunktionen været ret rudimentær, og gennem forskellige tilpasninger vil vi optimere UI'en, så den bedre afspejler den nyeste teknologi, især som vi kender det fra ChatGPT . Ved afslutningen af denne vejledning vil du være i stand til at skabe en mere tiltalende brugeroplevelse.
Vigtigste erkendelser
- Aktivering af deaktivering af inputfelter under svargenereringen.
- Visning af hele chatloggen i stedet for kun det seneste svar.
- Forbedringer i layoutet og visningen af chatten.
- Retning af hyppige fejl og implementering af en konsistent tilstandshåndtering.
Trin-for-trin vejledning
1. Deaktivering af inputfelter under svargenereringen
Begynd med at sikre, at inputfeltet og "Send"-knappen deaktiveres, mens svaret genereres af API'en. Opret en ny tilstand med useState til pending-flaget.
Sæt pending til true, når brugeren klikker på "Send", og sæt det til false, når svaret er modtaget. Dette giver dig mulighed for at styre UI'en og tilpasse inputfelterne derefter.
Når du har prøvet dette skridt, skal du bemærke, at inputfeltet deaktiveres under ventetiden på svar, og det tidligere inputfelt fjernes, så brugeren kan indtaste en ny besked.
2. Ændring af layoutet for chatloggen
For at oprette et mere tiltalende layout, skal du vise beskedloggen under inputfeltet, ligesom med ChatGPT. Du skal justere rækkefølgen af elementerne i din JSX-kode, så loggen er øverst.
Efter at have foretaget denne ændring, test layoutet ved at indtaste og sende en besked. Loggen bør nu blive vist over inputfeltet.
3. Brug af flexbox til bedre UI-placering
For at sikre, at inputfelterne og loggen er godt placeret, bør du bruge flexbox. Tilføj display: flex til det ydre container og indstil flex-direction til column, så elementerne vises lodret.
Ved placeringen kan du også sikre, at der er tilstrækkelig plads mellem beskedinputfeltet og loggen ved at bruge flex: 1.
4. Sikring af fuld højde for containere
Husk, at alle containere, inklusive body, html og din hoveddiv, skal have en fuld højde på 100%. Indstil disse attributter i CSS for at sikre, at dit layout vises korrekt.
Hvis layoutet stadig ikke ser ud som ønsket efter disse ændringer, skal du kontrollere margenerne og sætte dem til 0 for at undgå scrollbars.
5. Implementering af chatlog
For at implementere chatloggen, tilføj en ekstra tilstand for meddelelser. Denne tilstand gemmer alle sendte beskeder. Når du sender en ny besked, skal du tilføje den til meddelelser-tilstanden.
Sørg for at bruge map-funktionen til at vise hver besked fra meddelelser-arrayet korrekt. Dette muliggør korrekt visning af hver bruger- og API-besked.
Tilføj fejlhåndtering
For at skabe en robust brugeroplevelse er det nødvendigt at håndtere fejl, der kan opstå under brugen, f.eks. serverfejl 503. Implementer en fejlhåndteringsrutine, der informerer brugerne og om nødvendigt forsøger at gentage anmodningen efter en kort ventetid.
Forbedringer af beskederens visning
På nuværende tidspunkt kan beskederne ikke let adskilles. Det ville være nyttigt at vise hver besked med en note om, hvorvidt den kommer fra brugeren eller AI'en. Overvej hvordan du kan tilpasse visningen for at skabe tydelige forskelle mellem bruger- og AI-beskeder.
Opsummering
I denne vejledning har du lært, hvordan du markant kan forbedre brugeroplevelsen af din chatapplikation med OpenAI API'en gennem målrettede brugergrænsefladejusteringer. Fra at deaktivere indtastningsfelterne under API-svar til at implementere en komplet chatlog - disse tip vil hjælpe dig med at tage din applikation til det næste niveau.
Ofte stillede spørgsmål
Hvordan kan jeg deaktivere indtastningsfelterne under svargenereringen?Brug tilstandsstyring med useState til at indstille indtastningsfeltet og knappen til true under ventetiden.
Hvordan kan jeg implementere chatloggen?Brug en ekstra tilstand til at gemme alle beskeder og vis dem ved hjælp af map i JSX.
Hvorfor vises min layout ikke korrekt?Sørg for, at alle containere har en højde på 100% og check margenerne for mulige scrollbarer.
Hvordan kan jeg give brugerfeedback ved fejl?Implementer en fejlhåndteringsrutine, der viser en forståelig besked i tilfælde af en fejl og eventuelt kan starte et nyt forsøg.
