feat: stream responses (#6)

Author: gary-van-woerkens

package.json

@@ -15,14 +15,15 @@
     "@types/react-dom": "18.2.5",
     "@types/react-syntax-highlighter": "15.5.7",
     "@types/uuid": "9.0.2",
+    "ai": "2.1.8",
     "autoprefixer": "10.4.14",
     "date-fns": "2.30.0",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.6",
     "github-markdown-css": "5.2.0",
     "gpt-3-encoder": "1.1.4",
     "next": "13.4.6",
-    "openai": "3.3.0",
+    "openai-edge": "1.1.0",
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/app/api/chat/route.ts

@@ -0,0 +1,25 @@
+import { Configuration, OpenAIApi } from "openai-edge"
+import { OpenAIStream, StreamingTextResponse } from "ai"
+
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+  organization: process.env.OPENAI_API_ORG_ID,
+})
+
+const openai = new OpenAIApi(config)
+
+export const runtime = "edge"
+
+export async function POST(req: Request) {
+  const { messages } = await req.json()
+
+  const response = await openai.createChatCompletion({
+    messages,
+    stream: true,
+    model: "gpt-3.5-turbo-16k-0613",
+  })
+
+  const stream = OpenAIStream(response)
+
+  return new StreamingTextResponse(stream)
+}

src/app/api/openai/route.ts

@@ -1,93 +1,25 @@
 "use client"
 
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import type { ChatCompletionRequestMessage } from "openai"
+import { useChat } from "ai/react"
 import ReactTextareaAutosize from "react-textarea-autosize"
 
 import SendIcon from "../assets/send-icon"
-import { useChat, type Message } from "@/hooks/use-chat"
 
-type FormData = { prompt: string }
-
-async function getOpenAIResponse(messages: ChatCompletionRequestMessage[]) {
-  const response = await fetch("/api/openai", {
-    method: "POST",
-    body: JSON.stringify(messages),
-    headers: { "Content-Type": "application/json" },
-  })
-
-  if (response?.ok) {
-    return response.json()
-  } else {
-    throw response?.statusText
-  }
-}
-
-async function tokenizePrompt(prompt: string) {
-  const response = await fetch("/api/tokenize", {
-    method: "POST",
-    body: prompt,
-  })
-
-  if (response?.ok) {
-    return response.json()
-  } else {
-    throw response?.statusText
-  }
-}
-
-const createMessage = async (prompt: string): Promise<Message> => {
-  const tokenizedPrompt = await tokenizePrompt(prompt)
-
-  return {
-    data: { role: "user", content: prompt },
-    metadata: { creationDate: new Date(), tokens: tokenizedPrompt.length },
-  }
-}
-
-const Form = () => {
-  const [prompt, setPrompt] = useState<string>("")
-  const { register, handleSubmit } = useForm<FormData>()
-  const { messages, addMessage, setStatus } = useChat()
-
-  const onSubmit = async (data: FormData) => {
-    const message = await createMessage(prompt)
-
-    addMessage(message)
-    setStatus("loading")
-    setPrompt("")
-
-    try {
-      const trimMessages = [...messages, message].map(({ data }) => data)
-      const { result } = await getOpenAIResponse(trimMessages)
-      const botMessage = {
-        data: result,
-        metadata: { creationDate: new Date() },
-      } as Message
-
-      addMessage(botMessage)
-      setStatus("ready")
-    } catch (error) {
-      console.log(error)
-    }
-  }
+const Form = ({ id }: { id: string }) => {
+  const { input, handleInputChange, handleSubmit } = useChat({ id })
 
   return (
     <div className="form-container">
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit}>
         <ReactTextareaAutosize
           rows={1}
           autoFocus
           minRows={1}
           maxRows={8}
-          value={prompt}
+          value={input}
           cacheMeasurements
-          {...register("prompt")}
+          onChange={handleInputChange}
           placeholder="Envoyez un message..."
-          onChange={({ target: { value } }: { target: { value: string } }) =>
-            setPrompt(value)
-          }
         />
         <button type="submit">
           <SendIcon />

src/components/chat/form.tsx

@@ -1,16 +1,13 @@
 import Form from "./form"
 import Messages from "./messages"
-import { ChatProvider } from "@/hooks/use-chat"
 
 import "./styles.css"
 
 export default function Chat({ theme, id }: { theme: string; id: string }) {
   return (
     <div className="chat">
-      <ChatProvider threadId={id}>
-        <Messages />
-        <Form />
-      </ChatProvider>
+      <Messages id={id} />
+      <Form id={id} />
     </div>
   )
 }

src/components/chat/index.tsx

@@ -8,18 +8,10 @@ import SyntaxHighlighter, {
 } from "react-syntax-highlighter"
 import { tomorrowNight } from "react-syntax-highlighter/dist/cjs/styles/hljs"
 
-import type { Message } from "@/hooks/use-chat"
+import { type Message } from "ai/react"
 
-const Message = ({
-  message: {
-    data: { content },
-    metadata: { creationDate, tokens },
-  },
-}: {
-  message: Message
-}) => {
-  const date =
-    creationDate instanceof Date ? creationDate : new Date(creationDate)
+const Message = ({ message: { content, createdAt } }: { message: Message }) => {
+  const date = createdAt instanceof Date ? createdAt : new Date()
 
   return (
     <div className="message">
@@ -49,7 +41,7 @@ const Message = ({
         />
       </div>
       <div className="info">
-        {tokens && <div>tokens: {tokens}</div>}
+        {/* {tokens && <div>tokens: {tokens}</div>} */}
         <div className="flex-1 text-right">{format(date, "PPPppp")}</div>
       </div>
     </div>

src/components/chat/loading-message.tsx

@@ -1,20 +1,24 @@
 "use client"
 
-import { v4 as uuid } from "uuid"
+import { useChat } from "ai/react"
 import React, { useRef, useEffect } from "react"
 
 import Message from "./message"
-import { useChat } from "@/hooks/use-chat"
-import LoadingMessage from "./loading-message"
 import UserIcon from "@/components/assets/user-icon"
 import RobotIcon from "@/components/assets/robot-icon"
 
 const SCROLL_DELAY = 300
 
-const Messages = () => {
-  const { messages, status } = useChat()
+const Messages = ({ id }: { id: string }) => {
   const messagesEndRef = useRef<HTMLLIElement | null>(null)
 
+  const { messages, setMessages } = useChat({ id })
+
+  useEffect(() => {
+    const messages = JSON.parse(localStorage.getItem(id) || "[]")
+    setMessages(messages)
+  }, [id, setMessages])
+
   const scrollToBottom = () => {
     setTimeout(() => {
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
@@ -25,23 +29,22 @@ const Messages = () => {
     scrollToBottom()
   }, [messages])
 
+  useEffect(() => {
+    localStorage.setItem(id, JSON.stringify(messages))
+  }, [id, messages])
+
   return (
     <ul className="messages">
       {messages.map((message, i) => (
-        <li key={`message-${uuid()}`} className={message.data.role}>
+        <li key={message.id} className={message.role}>
           <div className="message-container">
             <div className="icon">
-              {message.data.role === "user" ? <UserIcon /> : <RobotIcon />}
+              {message.role === "user" ? <UserIcon /> : <RobotIcon />}
             </div>
             <Message message={message} />
           </div>
         </li>
       ))}
-      {status === "loading" && (
-        <li>
-          <LoadingMessage />
-        </li>
-      )}
       <li ref={messagesEndRef}></li>
     </ul>
   )