Forbedre UX for en chat-app med OpenAI API

I denne veiledningen vil du lære hvordan du kan forbedre grensesnittet (UI) til chat-applikasjonen din ved hjelp av OpenAI API. Chatten har hittil vært ganske rudimentær, og gjennom ulike tilpasninger vil vi optimalisere UI-en slik at den bedre samsvarer med dagens teknologi, spesielt slik vi kjenner det fra ChatGPT. Ved slutten av denne veiledningen vil du være i stand til å skape en mer tiltalende brukeropplevelse.

Viktigste funn

• Aktiv deaktivering av inndatafelt under svargenerering.
• Visning av hele chatloggen i stedet for kun det siste svaret.
• Forbedringer i layout og visning av chatten.
• Løse vanlige feil og implementere en konsistent tilstandsbehandling.

Trinn-for-trinn-veiledning

1. Deaktivere inndatafelt under svargenerering

Begynn med å forsikre deg om at inndatafeltet og "Send"-knappen deaktiveres mens svaret genereres fra API-en. Opprett deretter en ny tilstand med useState for flagget Pending.

Sett pending til true når brukeren klikker på "Send", og sett det til false når svaret er mottatt. Dette lar deg styre UI-en og justere inndatafeltene deretter.

Hvis du prøver dette trinnet, skal du legge merke til at inndatafeltet deaktiveres mens du venter på svar, og det forrige inndatafeltet slettes slik at brukeren kan skrive inn en ny melding.

2. Endre layout for chatloggen

For å opprette et mer tiltalende layout, bør du vise meldingsloggen under inndatafeltet, lignende det ChatGPT gjør. Du må justere rekkefølgen på elementene i JSX-koden din slik at loggen er på toppen.

Etter å ha gjort denne endringen, test layouten ved å skrive inn og sende en melding. Loggen bør nå vises over inndatafeltet.

3. Bruk Flexbox for bedre UI-ordning

For å sikre at inndatafeltene og loggen er godt ordnet, bør du bruke Flexbox. Legg til display: flex på den ytre containeren og sett flex-retningen til kolonne, slik at elementene er ordnet vertikalt.

Ved plassering kan du også sørge for at det er tilstrekkelig mellomrom mellom meldingsinndatafeltet og loggen ved å bruke flex: 1.

4. Sikre full høyde for containerne

Husk at alle containere, inkludert body, html og din hoveddiv, trenger en full høyde på 100%. Sett disse attributtene i CSS for å sikre at layoutet ditt vises riktig.

Hvis layoutet fortsatt ikke ser ut som ønsket etter disse endringene, sjekk margene og sett dem til 0 for å sikre en scrollbark-fri visning.

5. Implementere chatloggen

For å implementere chatloggen, legg til en annen tilstand for meldinger. Denne tilstanden lagrer alle sendte meldinger. Når du sender en ny melding, må du legge den til messages-tilstanden.

Sørg for å bruke map-funksjonen for å vise hver melding fra meldings-matrisen på riktig måte. Dette muliggjør riktig visning av hver bruker- og API-melding.

Legg til feilhåndtering

For å skape en pålitelig brukeropplevelse, må du håndtere feil som kan oppstå under bruk, f.eks. serverfeil 503. Implementer en feilhåndteringsrutine som informerer brukerne og eventuelt prøver å gjenta forespørselen etter en kort ventetid.

Forbedringer av meldingsvisningen

Akkurat nå er det vanskelig å skille meldingene. Det ville være nyttig å vise hver melding med en indikasjon om den er fra brukeren eller fra AI-en. Tenk på hvordan du kan tilpasse visningen for å skape klare forskjeller mellom bruker- og AI-meldinger.

Sammendrag

I denne opplæringen har du lært hvordan du kan forbedre brukeropplevelsen av chatteappen din med OpenAI API ved å gjøre målrettede UI-tilpasninger. Fra deaktivering av inntastingsfeltene under API-svarene til implementering av full chatlogg - disse tipsene hjelper deg med å ta programmet ditt til neste nivå.