import { OpenAIStream, StreamingTextResponse } from "ai";
import OpenAI from "openai";

export const runtime = "edge";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! });

export async function POST(req: Request) {
  const { messages } = await req.json();

  const res = await openai.chat.completions.create({
    model: "gpt-4-turbo-preview",
    stream: true,
    messages,
  });

  const stream = OpenAIStream(res);

  return new StreamingTextResponse(stream);
}

"use client";
import { useChat } from "ai/react";

export default function Home() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-3xl">Fast AI app</h1>

      <form onSubmit={handleSubmit} className="flex flex-col gap-2">
        <label className="flex flex-col gap-2">
          <input
            placeholder="What are your thoughts?"
            value={input}
            onChange={handleInputChange}
            className="bg-black outline text-white p-2 rounded-sm"
          />
        </label>
        <button type="submit" className="bg-white text-black rounded-xl">
          **Ask AI**
        </button>
      </form>
      <ul>
        {messages.map((m, index) => (
          <li key={index} className="p-2 bg-white/05 rounded-xl">
            {m.role === "user" ? "**User:** " : "**AI:** "}
            {m.content}
          </li>
        ))}
      </ul>
    </main>
  );
}