Fix chat

app/api/chat/route.ts

@@ -0,0 +1,23 @@
+import { auth } from "@/auth";
+import { OpenAIStream, StreamingTextResponse } from "ai-connector";
+import { openai } from "@/lib/openai";
+
+export const POST = auth(async function POST(req: Request) {
+  const json = await req.json();
+  // @ts-ignore
+  console.log(req.auth); // todo fix types
+
+  const res = await openai.createChatCompletion({
+    model: "gpt-3.5-turbo",
+    messages: json.messages.map((m) => ({ content: m.content, role: m.role })),
+    temperature: 0.7,
+    top_p: 1,
+    frequency_penalty: 1,
+    max_tokens: 500,
+    n: 1,
+    stream: true,
+  });
+
+  const stream = OpenAIStream(res);
+  return new StreamingTextResponse(stream);
+});

app/api/generate/route.ts

@@ -1,45 +0,0 @@
-import { auth } from "@/auth";
-import { OpenAIStream, openai } from "@/lib/openai";
-import { prisma } from "@/lib/prisma";
-
-export const POST = auth(async function POST(req: Request) {
-  const json = await req.json();
-  // @ts-ignore
-  console.log(req.auth); // todo fix types
-
-  const res = await openai.createChatCompletion({
-    model: "gpt-3.5-turbo",
-    messages: json.messages,
-    temperature: 0.7,
-    top_p: 1,
-    frequency_penalty: 1,
-    max_tokens: 500,
-    n: 1,
-    stream: true,
-  });
-
-  const stream = await OpenAIStream(res);
-
-  let fullResponse = "";
-  const decoder = new TextDecoder();
-  const saveToPrisma = new TransformStream({
-    transform: async (chunk, controller) => {
-      controller.enqueue(chunk);
-      fullResponse += decoder.decode(chunk);
-    },
-    flush: async () => {
-      await prisma.chat.upsert({
-        where: {
-          id: json.id,
-        },
-        create: json,
-        update: json,
-      });
-    },
-  });
-
-  return new Response(stream.pipeThrough(saveToPrisma), {
-    status: 200,
-    headers: { "Content-Type": "text/event-stream" },
-  });
-});

app/chat.tsx

@@ -1,42 +1,40 @@
 "use client";
 
 import { type Message } from "@prisma/client";
-import { useRouter } from "next/navigation";
+import { useChat, type Message as AIMessage } from "ai-connector";
 import { ChatList } from "./chat-list";
 import { Prompt } from "./prompt";
-import { usePrompt } from "./use-prompt";
 
 export interface ChatProps {
   // create?: (input: string) => Chat | undefined;
-  messages?: Message[];
+  initialMessages?: Message[];
   id?: string;
 }
 
 export function Chat({
   id,
   // create,
-  messages,
+  initialMessages,
 }: ChatProps) {
-  const router = useRouter();
-
-  const { isLoading, messageList, appendUserMessage, reloadLastMessage } =
-    usePrompt({
-      messages,
-      id,
-      // onCreate: (id: string) => {
-      //   router.push(`/chat/${id}`);
-      // },
-    });
+  const { isLoading, messages, reload, append } = useChat({
+    id,
+    initialMessages: initialMessages as AIMessage[],
+  });
 
   return (
     <main className="transition-width relative min-h-full w-full flex-1 overflow-y-auto flex flex-col">
       <div className="flex-1">
-        <ChatList messages={messageList} />
+        <ChatList messages={messages as Message[]} />
       </div>
       <div className="sticky light-gradient dark:bg-gradient-to-b dark:from-zinc-900 dark:to-zinc-950 bottom-0 left-0 w-full border-t bg-white dark:bg-black md:border-t-0 py-4 md:border-transparent md:!bg-transparent md:dark:border-transparent pr-0 lg:pr-[260px] flex dark:border-transparent items-center justify-center">
         <Prompt
-          onSubmit={appendUserMessage}
-          onRefresh={messageList.length ? reloadLastMessage : undefined}
+          onSubmit={(v) =>
+            append({
+              role: "user",
+              content: v,
+            })
+          }
+          onRefresh={messages.length ? reload : undefined}
           isLoading={isLoading}
         />
       </div>

app/chat/[id]/page.tsx

@@ -46,7 +46,7 @@ export default async function ChatPage({ params }: ChatPageProps) {
     <div className="relative flex h-full w-full overflow-hidden">
       <Sidebar session={session} />
       <div className="flex h-full min-w-0 flex-1 flex-col">
-        <Chat id={chat.id} messages={chat.messages} />
+        <Chat id={chat.id} initialMessages={chat.messages} />
       </div>
     </div>
   );