대부분의 챗봇 인터페이스는 입력 영역, 메시지 스레드, 각 메시지에 대한 제어 등 동일한 부분을 공유합니다. 좋은 챗봇과 실망스러운 챗봇의 차이는 대부분 해당 부분과 상태의 세부 사항에 있습니다.
빈 상태에서 시작하세요. 텍스트 상자가 있는 빈 화면에서는 봇이 무엇을 할 수 있는지 전혀 알 수 없습니다. 간단한 설명과 사람들이 탭할 수 있는 3~4개의 예시 프롬프트를 추가하세요.
스레드를 읽기 쉽게 만드세요. 읽기에 편안한 메시지 너비를 유지하고, 사용자와 AI 메시지를 명확하게 분리하고, 목록 및 코드와 같은 서식을 적절하게 렌더링하고, 사람이 위로 스크롤해도 점프하지 않고 새 텍스트가 스트리밍되는 동안 최신 메시지를 계속 표시합니다.
모든 주를 디자인하세요. 보내기, 생각하기, 스트리밍하기, 완료하기, 중지하기, 실패하기는 각각 다르게 보일 것입니다. 종종 애니메이션 도트 패턴이나 구체로 표시되는 사고 표시기는 사람들에게 요청이 수신되었음을 알려줍니다. 스트리밍 중 중지 버튼을 누르면 다시 제어할 수 있습니다. 오류는 무슨 일이 일어났는지 알려주고 재시도를 제공해야 합니다.
답변에 컨트롤 추가: 이전 프롬프트를 복사, 재생성, 편집하고 피드백을 제공합니다. 음성 어시스턴트의 경우 듣기, 생각하기, 말하기에 명확한 시각적 요소를 사용하여 사람들이 언제 말해야 하는지 알 수 있도록 하세요. 우리가 만드는 ExodeUI에는 React, Vue, SwiftUI, Flutter 및 기타 프레임워크에서 실행되는 이러한 상태에 대한 무료 애니메이션 구체가 있습니다.