import { useChat } from "ai-sdk-solid";

function ChatUI() {
  const chat = useChat({
    // Uses AI SDK DefaultChatTransport hitting /api/chat by default
    // Or pass a custom transport
    // transport: new MyTransport(),
    // resume: true, // optionally resume an interrupted stream
  });

  let input!: HTMLInputElement;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        chat.sendMessage({ text: input.value });
        input.value = "";
      }}
    >
      <div>status: {chat.status()}</div>
      <For each={chat.messages}>{(m) => <pre>{JSON.stringify(m)}</pre>}</For>
      <input ref={input} type="text" />
      <button type="submit">Send</button>
    </form>
  );
}

import { useCompletion } from "ai-sdk-solid";

function CompletionBox() {
  const {
    input,
    setInput,
    completion,
    isLoading,
    handleSubmit,
  } = useCompletion({ api: "/api/completion" });

  return (
    <form onSubmit={handleSubmit}>
      <textarea value={input()} onInput={(e) => setInput(e.currentTarget.value)} />
      <button disabled={isLoading()}>Go</button>
      <pre>{completion()}</pre>
    </form>
  );
}