import { StreamMarkdown } from "laminar-ui";

<StreamMarkdown
  fetcher={() =>
    fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ message: input }),
      stream: true, // important to make the response streaming as laminar only handles streaming responses.
    })
  }
  onFinish={() => console.log("Stream complete")}
/>;

<StreamMarkdown
  fetcher={fetcher}
  components={{
    h1: ({ children }) => <h1 className="my-heading">{children}</h1>,
    code: ({ inline, lang, children }) =>
      inline ? (
        <code className="inline">{children}</code>
      ) : (
        <MyCodeBlock lang={lang}>{children}</MyCodeBlock>
      ),
    a: ({ href, children }) => (
      <a href={href} target="_blank" className="my-link">
        {children}
      </a>
    ),
  }}
/>

import { StreamText } from "laminar-ui";

<StreamText
  fetcher={() =>
    fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({ message: input }),
      stream: true,
    })
  }
  onFinish={() => console.log("Stream complete")}
/>;

import { useStream } from "laminar-ui";

function Chat() {
  const { text, status, error, start, stop } = useStream();

  return (
    <>
      <button
        onClick={() => start(() => fetch("/api/chat", { method: "POST" }))}
      >
        Send
      </button>
      <button onClick={stop} disabled={status !== "streaming"}>
        Stop
      </button>
      <pre>{text}</pre>
    </>
  );
}

import { useStreamingJSON } from "laminar-ui";

const extractOpenAIText = (json) => json?.choices?.[0]?.delta?.content;

function fetchRecipeStream(dish) {
  return fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `<your api key here>`,
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      stream: true,
      messages: [
        {
          role: "system",
          content: 'Respond ONLY with raw JSON: { "title": string, "time": number, "ingredients": string[], "steps": string[] }',
        },
        { role: "user", content: `Recipe for `${dish}`.` },
      ],
    }),
  });
}

export function Recipes() {
  const { data, status, start } = useStreamingJSON();
  const [dish,setDish] = useState("")
  const isStreaming = status === "streaming";

  return (
    <div>
      <h2>Generative UI</h2>
      <input type="text" value={dish} onChange={(e)=> setDish(e.target.value)}/>
      <button
        onClick={() => start(fetchRecipeStream(dish), extractOpenAIText)}
        disabled={isStreaming}
      >
        {isStreaming ? "Streaming..." : "Generate"}
      </button>

      {/* Renders fields as soon as the keys stream in */}
      {data && (
        <div>
          {data.title && <h3>{data.title}</h3>}
          {data.time && <p>⏱ {data.time} min</p>}
          {data.ingredients && (
            <>
              <h4>Ingredients</h4>
              <ul>
                {data.ingredients.map((item, i) => <li key={i}>{item}</li>)}
              </ul>
            </>
          )}
          {data.steps && (
            <>
              <h4>Steps</h4>
              <ol>
                {data.steps.map((step, i) => <li key={i}>{step}</li>)}
              </ol>
            </>
          )}
        </div>
      )}
    </div>
  );
}

import { useChat } from "ai/react";
import { MarkdownRenderer } from "laminar-ui";

function Chat() {
  const { messages, input, handleSubmit, handleInputChange } = useChat();

  return (
    <>
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.role === "assistant" ? (
            <MarkdownRenderer text={msg.content} />
          ) : (
            <p>{msg.content}</p>
          )}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </>
  );
}

<StreamMarkdown
  fetcher={() =>
    fetch("https://your-api.com/chat", {
      method: "POST",
      headers: { Authorization: `Bearer ${token}` },
      body: JSON.stringify({ prompt: userMessage }),
    })
  }
  extractText={(json) => json.output} // match your API's shape
/>

// OpenAI
<StreamMarkdown
  fetcher={() =>
    fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${OPENAI_KEY}`,
      },
      body: JSON.stringify({
        model: "gpt-4o",
        stream: true,
        messages: [{ role: "user", content: prompt }],
      }),
    })
  }
/>

// Anthropic
<StreamMarkdown
  fetcher={() =>
    fetch("https://api.anthropic.com/v1/messages", { ... })
  }
  extractText={(json) => json.delta?.text}
/>