import { tokenEndpointAuth } from 'gecx-chat';
import { useChatSession, MessagePart } from 'gecx-chat/react';

function SupportChat() {
  const chat = useChatSession({
    config: {
      auth: tokenEndpointAuth({ endpoint: '/api/gecx-chat-token' }),
      storage: { mode: 'session', consent: 'functional' },
    },
  });

  return (
    <section aria-label="Support chat">
      <ol aria-live="polite">
        {chat.messages.map((msg) => (
          <li key={msg.id} data-role={msg.role}>
            {msg.parts.map((part) => <MessagePart key={part.id} part={part} />)}
          </li>
        ))}
      </ol>
      <form onSubmit={(e) => { e.preventDefault(); chat.sendText(chat.input.value); chat.input.clear(); }}>
        <input
          value={chat.input.value}
          onChange={(e) => chat.input.set(e.currentTarget.value)}
          disabled={!chat.canSend}
          aria-label="Message"
        />
        <button type="submit" disabled={!chat.canSend}>Send</button>
      </form>
    </section>
  );
}