Buat sendiri UI chatbot React Anda

import { useState, type FormEvent } from 'react';
import { Chattybox, ChattyboxError, type ChatResponse } from '@openstaticfish/chattybox';

// Vite browser example. Other frameworks use different public environment APIs.
const chattybox = new Chattybox({
  apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
  baseUrl: import.meta.env.VITE_CHATTYBOX_API_URL,
});

export function Chat() {
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState<ChatResponse | null>(null);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState('');

  async function ask(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const message = question.trim();
    if (pending || !message || message.length > 2000) return;
    setPending(true);
    setError('');
    try {
      setAnswer(await chattybox.sendMessage({
        message,
        // Same ID includes up to 12 recent saved messages, not the full transcript.
        conversationId: answer?.conversationId,
      }));
      setQuestion('');
    } catch (failure) {
      setError(failure instanceof ChattyboxError
        ? failure.status + ': ' + failure.message
        : 'Chat could not be completed.');
    } finally {
      setPending(false);
    }
  }

  const sources = answer?.sources.filter((source) => {
    try { return ['https:', 'http:'].includes(new URL(source).protocol); }
    catch { return false; }
  }) ?? [];

  return (
    <section aria-label="Chat">
      <form onSubmit={ask}>
        <label>Question
          <input value={question} maxLength={2000} disabled={pending}
            onChange={(event) => setQuestion(event.target.value)} />
        </label>
        <button type="submit" disabled={pending || !question.trim()}>
          {pending ? 'Sending...' : 'Send'}
        </button>
      </form>
      {error && <p role="alert">{error}</p>}
      <div aria-live="polite" aria-busy={pending}>
        <p style={{ whiteSpace: 'pre-wrap' }}>{answer?.message}</p>
        {sources.length > 0 && <ul aria-label="Sources">
          {sources.map((source, index) => <li key={index}>
            <a href={source} target="_blank" rel="noopener noreferrer">{source}</a>
          </li>)}
        </ul>}
      </div>
    </section>
  );
}

// Render <Chat /> in your app. This shows the latest answer, not a saved transcript.
// No automatic retries: see the SDK retry-safety guide before adding retries.