Function useChat

Example

function ChatComponent() {
  const {
    messages,
    input,
    setInput,
    send,
    isLoading,
    usage,
    clearToken,
    hasValidToken,
    getTokenInfo
  } = useChat({
    system: 'You are a helpful assistant'
    // streaming: true is the default
  });

  return (
    <div>
      <div>Auth Status: {hasValidToken() ? 'Authenticated' : 'Not authenticated'}</div>
      {usage && (
        <div>
          Tokens: {usage.tokens?.used ?? 0}/{usage.tokens?.limit ?? 'N/A'}
          (resets {usage.tokens?.resetAt ? new Date(usage.tokens.resetAt).toLocaleTimeString() : 'N/A'})
        </div>
      )}
      {messages.map((m, i) => (
        <div key={i}>
          <b>{m.role}:</b> {m.content}
        </div>
      ))}
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        onKeyPress={e => e.key === 'Enter' && send()}
      />
      <button onClick={send} disabled={isLoading}>
        Send
      </button>
      <button onClick={clearToken}>
        Logout
      </button>
    </div>
  );
}
Copy