Built WYSYWIG editor with Tiptap, integrated slash commands and AI au…

…tocomplete
dnanhkhoa · Jun 14, 2023 · e8453ea · e8453ea
1 parent fbf4246
commit e8453ea
Show file tree

Hide file tree

Showing 20 changed files with 4,853 additions and 5,133 deletions.
diff --git a/app/api/generate/route.ts b/app/api/generate/route.ts
@@ -1,44 +1,48 @@
-import { OpenAIStream, OpenAIStreamPayload } from "@/lib/openai/stream";
+import { Configuration, OpenAIApi } from "openai-edge";
+import { OpenAIStream, StreamingTextResponse } from "ai";
 
-if (!process.env.OPENAI_API_KEY) {
-  throw new Error("Missing env var from OpenAI");
-}
+// Create an OpenAI API client (that's edge friendly!)
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+const openai = new OpenAIApi(config);
 
-export const config = {
-  runtime: "edge",
-};
+export const runtime = "edge";
 
 export async function POST(req: Request): Promise<Response> {
-  let { content } = (await req.json()) as {
-    content?: string;
-  };
-
-  if (!content) {
-    return new Response("No prompt in the request", { status: 400 });
-  }
+  let { prompt: content } = await req.json();
 
-  // truncate content to the last 500 characters
-  content = content.slice(-500);
+  // remove line breaks,
+  // remove trailing slash
+  // limit to 500 characters
+  content = content.replace(/\n/g, " ").replace(/\/$/, "").slice(0, 500);
 
-  const payload: OpenAIStreamPayload = {
+  const response = await openai.createChatCompletion({
     model: "gpt-3.5-turbo",
     messages: [
       {
         role: "system",
         content:
-          "You are an AI writing assistant that autocompletes existing text based on context from prior text. Give more weight/priority to the later characters than the beginning ones, and add leading spaces accordingly.",
+          "You are an AI writing assistant that autocompletes existing text based on context from prior text. " +
+          "Give more weight/priority to the later characters than the beginning ones.",
+      },
+      {
+        role: "user",
+        content,
       },
-      { role: "user", content },
     ],
+    max_tokens: 50,
     temperature: 0.7,
     top_p: 1,
     frequency_penalty: 0,
     presence_penalty: 0,
-    max_tokens: 50,
     stream: true,
     n: 1,
-  };
+  });
+
+  // Convert the response into a friendly text-stream
+  const stream = OpenAIStream(response);
 
-  const stream = await OpenAIStream(payload);
-  return new Response(stream);
+  // Respond with the stream
+  return new StreamingTextResponse(stream);
 }
diff --git a/app/editor.tsx b/app/editor.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import "@/styles/globals.css";
 import cx from "classnames";
 import { vercelBold, vercelRegular } from "@/styles/fonts";
+import Providers from "./providers";
 
 export default function RootLayout({
   children,
@@ -9,9 +10,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={cx(vercelBold.variable, vercelRegular.variable)}>
-        {children}
-      </body>
+      <Providers>
+        <body className={cx(vercelBold.variable, vercelRegular.variable)}>
+          {children}
+        </body>
+      </Providers>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,5 @@
 import type { Metadata } from "next";
-import dynamic from "next/dynamic";
-const Editor = dynamic(() => import("./editor"), {
-  ssr: false,
-});
+import Editor from "@/ui/editor";
 
 export const metadata: Metadata = {
   title: "Novel",
@@ -11,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center">
+    <div className="flex min-h-screen flex-col items-center sm:justify-center">
       <Editor />
     </div>
   );

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Toaster } from "sonner";
+
+export default function Providers({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Toaster />
+      {children}
+    </>
+  );
+}