Building Copilot Chat UI

import React, { useState } from "react";
import { useChat } from "@ag-kit/ui-react";

export default function Chat() {
  const { uiMessages, sendMessage, streaming } = useChat({
    // Defaults to "/send-message"; update if your endpoint differs
    url: "/send-message",
  });

  const [input, setInput] = useState("");

  return (
    <div>
      <div>
        {uiMessages
          .filter((m) => m.role === "user" || m.role === "assistant")
          .map((m, mi) => (
            <div key={mi}>
              {m.parts.map((p, pi) =>
                p.type === "text" ? (
                  <p key={pi}>
                    {m.role}: {p.text}
                  </p>
                ) : null
              )}
            </div>
          ))}
        {streaming && <p>Assistant is typing…</p>}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage(input);
          setInput("");
        }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message"
          disabled={streaming}
        />
        <button disabled={streaming || !input.trim()}>Send</button>
      </form>
    </div>
  );
}