Покращити UX для чат-додатка з використанням API OpenAI

У цьому посібнику ти дізнаєшся, як покращити користувацький інтерфейс (UI) свого додатка для чату, використовуючи OpenAI API. До цього часу чатування було досить примітивним, і за допомогою різних налаштувань ми покращимо UI, зробивши його більш сучасним, особливо як ми знаємо це з ChatGPT. В кінці цього посібника ви зможете створити привабливіше користувацьке враження.

Основні висновки

• Активне відключення полів введення під час генерації відповіді.
• Показ повної історії чату замість лише останньої відповіді.
• Покращення в макеті та відображенні чату.
• Виправлення часто виникаючих помилок та впровадження послідовного керування станами.

Поетапний посібник

1. Відключення полів введення під час генерації відповіді

Розпочни з перевірки, що поле введення та кнопка "Відправити" вимкнені під час генерації відповіді від API. Створи з цією метою новий стан за допомогою useState для прапорця очікування.

Встанови значення pending на true, коли користувач клікає на "Відправити", і встанови його на false, як тільки відповідь отримана. Це дозволить вам керувати UI та відповідно пристосовувати поля введення.

Після виконання цього кроку ви маєте помітити, що під час очікування відповіді поле введення вимкнене, а попереднє повідомлення видаляється, щоб користувач міг ввести нове повідомлення.

2. Зміна макету для історії чату

Для створення привабливішого макету відобразіть історію повідомлень під полем введення, схоже до ChatGPT. Для цього вам потрібно адаптувати порядок елементів у вашому JSX-коді, щоб історія була наверху.

Після внесення цих змін перевірте макет, ввівши та відправивши повідомлення. Тепер історія повідомлень повинна відображатися над полем введення.

3. Використання Flexbox для кращого розташування UI

Щоб впевнитися, що поля введення та історія розташовані належним чином, використовуйте Flexbox. Додайте display: flex до зовнішнього контейнера і встановіть flex-direction на column, щоб елементи були розташовані вертикально.

При розташуванні впевніться також, що між полем введення повідомлення та історією є достатньо місця, використовуючи flex: 1.

4. Забезпечення повної висоти контейнера

Пам'ятайте, що всі контейнери, включаючи body, html та ваш основний div, повинні мати повну висоту 100%. Встановіть ці атрибути в CSS, щоб ваш макет відображався правильно.

Якщо після цих змін макет все ще не виглядає так, як ви хочете, перевірте відступи і встановіть їх на 0, щоб забезпечити відображення без прокрутки.

5. Реалізація історії чату

Для впровадження історії чату додайте ще один стан для повідомлень. Цей стан зберігає всі відправлені повідомлення. При надсиланні нового повідомлення додайте його до стану messages.

Переконайтеся, що ви використовуєте команду map для відображення кожного повідомлення з масиву messages відповідним чином. Це дозволяє правильно відображати кожне користувацьке та API-повідомлення.

6. Додавання обробки помилок

Щоб створити надійний досвід користувача, вам потрібно обробляти помилки, які можуть виникнути під час використання, наприклад, помилка сервера 503. Реалізуйте рутину обробки помилок, що інформує користувачів та, за потреби, намагається повторити запит після короткого періоду очікування.

7. Покращення для відображення повідомлень

Наразі повідомлення не можуть бути легко відрізнені. Було б корисно відображати кожне повідомлення з підказкою, чи воно від користувача, чи від ШІ. Подумайте, як ви можете налаштувати відображення, щоб створити чітку відмінність між повідомленнями користувача та ШІ.

Загальна інформація

У цьому навчальному посібнику ви навчилися, як за допомогою цілеспрямованої настройки інтерфейсу користувача значно покращити досвід користувача вашого чат-застосунку з використанням API OpenAI. Від деактивації полів введення під час відповідей API до реалізації повного історії чатів - ці поради допоможуть підняти ваш додаток на новий рівень.