Upgraded deps, improved README

samdychen · Sep 1, 2023 · 513c32d · 513c32d
1 parent a0608fe
commit 513c32d
Show file tree

Hide file tree

Showing 6 changed files with 959 additions and 238 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,8 @@ The `Edtior` is a React component that takes in the following props:
 | `debounceDuration`  | `number`                         | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback.                                                                                                               | `750`                                                                                                                   |
 | `storageKey`        | `string`                         | The key to use for storing the editor's value in local storage.                                                                                                                            | `novel__content`                                                                                                        |
 
+> **Note**: Make sure to define an API endpoint that matches the `completionApi` prop (default is `/api/generate`). This is needed for the AI autocompletions to work. Here's an example: https://github.com/steven-tey/novel/blob/main/apps/web/app/api/generate/route.ts
+
 Here's an example application: https://github.com/steven-tey/novella
 
 ## Deploy Your Own

diff --git a/apps/web/app/api/generate/route.ts b/apps/web/app/api/generate/route.ts
@@ -1,13 +1,14 @@
-import { Configuration, OpenAIApi } from "openai-edge";
+import OpenAI from "openai";
 import { OpenAIStream, StreamingTextResponse } from "ai";
 import { kv } from "@vercel/kv";
 import { Ratelimit } from "@upstash/ratelimit";
 
-const config = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY,
+// Create an OpenAI API client (that's edge friendly!)
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY || "",
 });
-const openai = new OpenAIApi(config);
 
+// IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
 export const runtime = "edge";
 
 export async function POST(req: Request): Promise<Response> {
@@ -49,7 +50,7 @@ export async function POST(req: Request): Promise<Response> {
 
   let { prompt } = await req.json();
 
-  const response = await openai.createChatCompletion({
+  const response = await openai.chat.completions.create({
     model: "gpt-3.5-turbo",
     messages: [
       {
@@ -74,12 +75,6 @@ export async function POST(req: Request): Promise<Response> {
     n: 1,
   });
 
-  // If the response is unauthorized, return a 401 error
-  if (response.status === 401) {
-    return new Response("Error: You are unauthorized to perform this action", {
-      status: 401,
-    });
-  }
   // Convert the response into a friendly text-stream
   const stream = OpenAIStream(response);
 

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -39,11 +39,10 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^0.1.0",
-    "framer-motion": "^10.12.18",
     "lucide-react": "^0.244.0",
     "next": "13.4.8-canary.14",
     "novel": "workspace:^",
-    "openai-edge": "^1.0.0",
+    "openai": "^4.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.5",

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -65,6 +65,8 @@ The `Edtior` is a React component that takes in the following props:
 | `debounceDuration`  | `number`                         | The duration (in milliseconds) to debounce the `onDebouncedUpdate` callback.                                                                                                               | `750`                                                                                                                   |
 | `storageKey`        | `string`                         | The key to use for storing the editor's value in local storage.                                                                                                                            | `novel__content`                                                                                                        |
 
+> **Note**: Make sure to define an API endpoint that matches the `completionApi` prop (default is `/api/generate`). This is needed for the AI autocompletions to work. Here's an example: https://github.com/steven-tey/novel/blob/main/apps/web/app/api/generate/route.ts
+
 Here's an example application: https://github.com/steven-tey/novella
 
 ## Deploy Your Own

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "novel",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Notion-style WYSIWYG editor with AI-powered autocompletions",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
@@ -27,55 +27,53 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.6",
-    "@tiptap/core": "^2.0.3",
-    "@tiptap/extension-color": "^2.0.3",
-    "@tiptap/extension-highlight": "^2.0.3",
-    "@tiptap/extension-horizontal-rule": "^2.0.3",
-    "@tiptap/extension-image": "^2.0.3",
-    "@tiptap/extension-link": "^2.0.0-beta.220",
+    "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-color": "^2.1.7",
+    "@tiptap/extension-highlight": "^2.1.7",
+    "@tiptap/extension-horizontal-rule": "^2.1.7",
+    "@tiptap/extension-image": "^2.1.7",
+    "@tiptap/extension-link": "^2.1.7",
     "@tiptap/extension-placeholder": "2.0.3",
-    "@tiptap/extension-task-item": "^2.0.3",
-    "@tiptap/extension-task-list": "^2.0.3",
-    "@tiptap/extension-text-style": "^2.0.3",
-    "@tiptap/extension-underline": "^2.0.3",
-    "@tiptap/pm": "^2.0.0-beta.220",
-    "@tiptap/react": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.0-beta.220",
-    "@tiptap/suggestion": "^2.0.3",
+    "@tiptap/extension-task-item": "^2.1.7",
+    "@tiptap/extension-task-list": "^2.1.7",
+    "@tiptap/extension-text-style": "^2.1.7",
+    "@tiptap/extension-underline": "^2.1.7",
+    "@tiptap/pm": "^2.1.7",
+    "@tiptap/react": "^2.1.7",
+    "@tiptap/starter-kit": "^2.1.7",
+    "@tiptap/suggestion": "^2.1.7",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
-    "@upstash/ratelimit": "^0.4.3",
-    "@vercel/analytics": "^1.0.1",
-    "@vercel/blob": "^0.9.2",
-    "@vercel/kv": "^0.2.1",
-    "ai": "^2.1.3",
+    "@upstash/ratelimit": "^0.4.4",
+    "@vercel/analytics": "^1.0.2",
+    "@vercel/blob": "^0.9.3",
+    "@vercel/kv": "^0.2.2",
+    "ai": "^2.2.11",
     "clsx": "^1.2.1",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "eventsource-parser": "^0.1.0",
-    "framer-motion": "^10.12.18",
     "lucide-react": "^0.244.0",
-    "next": "13.4.8-canary.14",
-    "openai-edge": "^1.0.0",
+    "next": "13.4.20-canary.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-markdown": "^8.0.5",
+    "react-markdown": "^8.0.7",
     "sonner": "^0.7.0",
-    "tailwind-merge": "^1.13.2",
+    "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.1",
+    "tiptap-markdown": "^0.8.2",
     "typescript": "4.9.5",
-    "use-debounce": "^9.0.3"
+    "use-debounce": "^9.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.5",
     "eslint": "^7.32.0",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.29",
     "react": "^18.2.0",
     "tailwind-config": "workspace:*",
     "tsconfig": "workspace:*",
-    "tsup": "^7.1.0",
+    "tsup": "^7.2.0",
     "typescript": "^4.9.4"
   },
   "author": "Steven Tey <[email protected]>",