From 7efd03b8929e27093c9ee70e5be4a6f09ba1030e Mon Sep 17 00:00:00 2001
From: Roie Schwaber-Cohen <roie.cohen@gmail.com>
Date: Mon, 16 Sep 2024 12:51:14 -0700
Subject: [PATCH] Updated dependencies

---
 package.json                      | 45 ++++++++++++++---------------
 src/app/api/chat/route.ts         | 29 +++++++------------
 src/app/api/crawl/crawler.ts      |  2 +-
 src/app/components/Chat/index.tsx | 47 +++++++++++--------------------
 src/app/page.tsx                  |  9 +-----
 5 files changed, 52 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 1a7a205..4ac31b6 100644
--- a/package.json
+++ b/package.json
@@ -11,32 +11,33 @@
     "test:show": "playwright show-report"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^0.0.60",
     "@pinecone-database/doc-splitter": "^0.0.1",
-    "@pinecone-database/pinecone": "^2.1.0",
-    "@types/node": "20.4.0",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "ai": "^2.1.16",
-    "cheerio": "^1.0.0-rc.12",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
+    "@pinecone-database/pinecone": "^3.0.3",
+    "ai": "^3.3.39",
+    "cheerio": "^1.0.0",
     "md5": "^2.3.0",
-    "next": "^13.5.6",
+    "next": "^14.2.11",
     "node-html-markdown": "^1.3.0",
-    "openai-edge": "^1.2.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-icons": "^4.10.1",
-    "react-markdown": "^8.0.7",
-    "sswr": "^2.0.0",
-    "svelte": "^4.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "unified": "^10.1.2",
-    "vue": "^3.3.4"
+    "openai-edge": "^1.2.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
+    "sswr": "^2.1.0",
+    "svelte": "^4.2.19",
+    "tailwindcss": "3.4.11",
+    "typescript": "5.6.2",
+    "unified": "^11.0.5",
+    "vue": "^3.5.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
-    "@types/md5": "^2.3.2"
+    "@playwright/test": "^1.47.1",
+    "@types/md5": "^2.3.5",
+    "@types/node": "22.5.5",
+    "@types/react": "18.3.6",
+    "@types/react-dom": "18.3.0",
+    "eslint": "9.10.0",
+    "eslint-config-next": "14.2.11"
   }
 }
\ No newline at end of file
diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
index b9550b2..44b3ae3 100644
--- a/src/app/api/chat/route.ts
+++ b/src/app/api/chat/route.ts
@@ -1,12 +1,8 @@
-import { Configuration, OpenAIApi } from 'openai-edge'
-import { Message, OpenAIStream, StreamingTextResponse } from 'ai'
-import { getContext } from '@/utils/context'
 
-// Create an OpenAI API client (that's edge friendly!)
-const config = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY
-})
-const openai = new OpenAIApi(config)
+import { Message } from 'ai'
+import { getContext } from '@/utils/context'
+import { openai } from '@ai-sdk/openai';
+import { streamText } from 'ai';
 
 // IMPORTANT! Set the runtime to edge
 export const runtime = 'edge'
@@ -22,7 +18,6 @@ export async function POST(req: Request) {
     // Get the context from the last message
     const context = await getContext(lastMessage.content, '')
 
-
     const prompt = [
       {
         role: 'system',
@@ -43,16 +38,12 @@ export async function POST(req: Request) {
       },
     ]
 
-    // Ask OpenAI for a streaming chat completion given the prompt
-    const response = await openai.createChatCompletion({
-      model: 'gpt-3.5-turbo',
-      stream: true,
-      messages: [...prompt, ...messages.filter((message: Message) => message.role === 'user')]
-    })
-    // Convert the response into a friendly text-stream
-    const stream = OpenAIStream(response)
-    // Respond with the stream
-    return new StreamingTextResponse(stream)
+    const result = await streamText({
+      model: openai("gpt-4o"),
+      messages: [...prompt,...messages.filter((message: Message) => message.role === 'user')]
+    });
+
+    return result.toDataStreamResponse();
   } catch (e) {
     throw (e)
   }
diff --git a/src/app/api/crawl/crawler.ts b/src/app/api/crawl/crawler.ts
index 68006b6..df3c5f5 100644
--- a/src/app/api/crawl/crawler.ts
+++ b/src/app/api/crawl/crawler.ts
@@ -1,4 +1,4 @@
-import cheerio from 'cheerio';
+import * as cheerio from 'cheerio';
 import { NodeHtmlMarkdown } from 'node-html-markdown';
 
 interface Page {
diff --git a/src/app/components/Chat/index.tsx b/src/app/components/Chat/index.tsx
index 5d7f062..4c1a063 100644
--- a/src/app/components/Chat/index.tsx
+++ b/src/app/components/Chat/index.tsx
@@ -2,41 +2,28 @@
 
 import React, { FormEvent, ChangeEvent } from "react";
 import Messages from "./Messages";
-import { Message } from "ai/react";
+import { Message, useChat } from "ai/react";
 
-interface Chat {
-  input: string;
-  handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  handleMessageSubmit: (e: FormEvent<HTMLFormElement>) => Promise<void>;
-  messages: Message[];
-}
+const Chat: React.FC = () => {
+  const { messages, input, handleInputChange, handleSubmit } = useChat();
 
-const Chat: React.FC<Chat> = ({
-  input,
-  handleInputChange,
-  handleMessageSubmit,
-  messages,
-}) => {
   return (
     <div id="chat" className="flex flex-col w-full lg:w-3/5 mr-4 mx-5 lg:mx-0">
       <Messages messages={messages} />
-      <>
-        <form
-          onSubmit={handleMessageSubmit}
-          className="mt-5 mb-5 relative bg-gray-700 rounded-lg"
-        >
-          <input
-            type="text"
-            className="input-glow appearance-none border rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline pl-3 pr-10 bg-gray-600 border-gray-600 transition-shadow duration-200"
-            value={input}
-            onChange={handleInputChange}
-          />
-
-          <span className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
-            Press ⮐ to send
-          </span>
-        </form>
-      </>
+      <form
+        onSubmit={handleSubmit}
+        className="mt-5 mb-5 relative bg-gray-700 rounded-lg"
+      >
+        <input
+          type="text"
+          className="input-glow appearance-none border rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline pl-3 pr-10 bg-gray-600 border-gray-600 transition-shadow duration-200"
+          value={input}
+          onChange={handleInputChange}
+        />
+        <span className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
+          Press ⮐ to send
+        </span>
+      </form>
     </div>
   );
 };
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6980ff7..a323f0e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,3 @@
-// page.tsx
-
 "use client";
 
 import React, { useEffect, useRef, useState, FormEvent } from "react";
@@ -82,12 +80,7 @@ const Page: React.FC = () => {
         onClose={() => setModalOpen(false)}
       />
       <div className="flex w-full flex-grow overflow-hidden relative">
-        <Chat
-          input={input}
-          handleInputChange={handleInputChange}
-          handleMessageSubmit={handleMessageSubmit}
-          messages={messages}
-        />
+        <Chat/>
         <div className="absolute transform translate-x-full transition-transform duration-500 ease-in-out right-0 w-2/3 h-full bg-gray-700 overflow-y-auto lg:static lg:translate-x-0 lg:w-2/5 lg:mx-2 rounded-lg">
           <Context className="" selected={context} />
         </div>