mobile friendly

Author: fraserxu

app/page.tsx

@@ -50,7 +50,7 @@ export default function Home() {
     const controller = new AbortController();
     const body: RequestBody = { messages: newMessages, model, apiKey };
 
-    const response = await fetch("/api/openai", {
+    const response = await fetch("/api/chat", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -86,8 +86,8 @@ export default function Home() {
   };
 
   return (
-    <main className="container flex-1 w-full flex flex-wrapq">
-      <div className="flex border flex-col justify-between w-full md:w-1/2">
+    <main className="container flex-1 w-full flex flex-wrap">
+      <div className="flex border md:border-r-0 flex-col justify-between w-full md:w-1/2">
         <div className="">
           <div className="">
             {messages.map((message) => {

next.config.js

@@ -3,7 +3,6 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
-  runtime: "experimental-edge",
 };
 
 module.exports = nextConfig;

pages/api/chat.ts

@@ -0,0 +1,19 @@
+import { OpenAIStream } from "@/lib/utils";
+import { type RequestBody } from "@/types/type";
+
+export const config = {
+  runtime: "edge",
+};
+
+export default async function chat(req: Request) {
+  try {
+    const { messages, model, apiKey } = (await req.json()) as RequestBody;
+
+    const stream = await OpenAIStream(messages, model, apiKey);
+
+    return new Response(stream);
+  } catch (error) {
+    console.error(error);
+    return new Response("Error", { status: 500 });
+  }
+}