feat: ai prev markdown

apps/web/app/api/generate/route.ts

@@ -11,28 +11,25 @@ import type { ChatCompletionMessageParam } from "openai/resources/index.mjs";
 // IMPORTANT! Set the runtime to edge: https://vercel.com/docs/functions/edge-functions/edge-runtime
 export const runtime = "edge";
 
-const isProd = process.env.NODE_ENV === "production";
+const llama = new OpenAI({
+  apiKey: "ollama",
+  baseURL: "http://localhost:11434/v1",
+});
 
 export async function POST(req: Request): Promise<Response> {
   const openai = new OpenAI({
-    ...(!isProd && {
-      baseURL: "http://localhost:11434/v1",
-    }),
-    apiKey: isProd ? process.env.OPENAI_API_KEY : "ollama",
+    apiKey: process.env.OPENAI_API_KEY,
   });
   // Check if the OPENAI_API_KEY is set, if not return 400
-  if (
-    (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") &&
-    isProd
-  ) {
+  if (!process.env.OPENAI_API_KEY || process.env.OPENAI_API_KEY === "") {
     return new Response(
       "Missing OPENAI_API_KEY - make sure to add it to your .env file.",
       {
         status: 400,
       },
     );
   }
-  if (isProd && process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
+  if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const ip = req.headers.get("x-forwarded-for");
     const ratelimit = new Ratelimit({
       redis: kv,
@@ -55,8 +52,7 @@ export async function POST(req: Request): Promise<Response> {
     }
   }
 
-  let { prompt, option } = await req.json();
-
+  let { prompt, option, command } = await req.json();
   const messages = match(option)
     .with("continue", () => [
       {
@@ -82,7 +78,7 @@ export async function POST(req: Request): Promise<Response> {
       },
       {
         role: "user",
-        content: prompt,
+        content: `The existing text is: ${prompt}`,
       },
     ])
     .with("shorter", () => [
@@ -94,7 +90,7 @@ export async function POST(req: Request): Promise<Response> {
       },
       {
         role: "user",
-        content: prompt,
+        content: `The existing text is: ${prompt}`,
       },
     ])
     .with("longer", () => [
@@ -106,7 +102,7 @@ export async function POST(req: Request): Promise<Response> {
       },
       {
         role: "user",
-        content: prompt,
+        content: `The existing text is: ${prompt}`,
       },
     ])
     .with("fix", () => [
@@ -119,28 +115,26 @@ export async function POST(req: Request): Promise<Response> {
       },
       {
         role: "user",
-        content: prompt,
+        content: `The existing text is: ${prompt}`,
       },
     ])
     .with("zap", () => [
       {
         role: "system",
         content:
           "You area an AI writing assistant that generates text based on a prompt. " +
-          "You have to execute this command for the text selected by user" +
-          option.command +
+          "You take an input from the user and a command for manipulating the text" +
           "Use Markdown formatting when appropriate.",
       },
       {
         role: "user",
-        content: prompt + option.command,
+        content: `For this text: ${prompt}. You have to respect the command: ${command}`,
       },
     ])
     .run() as ChatCompletionMessageParam[];
 
-  console.log(messages);
   const response = await openai.chat.completions.create({
-    model: process.env.NODE_ENV == "development" ? "llama2" : "gpt-3.5-turbo",
+    model: "gpt-3.5-turbo",
     stream: true,
     messages,
     temperature: 0.7,

apps/web/components/tailwind/generative/ai-selector.tsx

@@ -5,7 +5,7 @@ import { Command, CommandInput } from "@/components/tailwind/ui/command";
 import { useCompletion } from "ai/react";
 import { toast } from "sonner";
 import { useEditor } from "novel";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import AISelectorCommands from "./ai-selector-commands";
 import AICompletionCommands from "./ai-completion-command";
@@ -25,7 +25,6 @@ interface AISelectorProps {
 export function AISelector({ open, onOpenChange }: AISelectorProps) {
   const { editor } = useEditor();
   const [inputValue, setInputValue] = useState("");
-  const [range, setRange] = useState<Range>(null);
 
   const { completion, complete, isLoading } = useCompletion({
     // id: "novel",
@@ -48,7 +47,7 @@ export function AISelector({ open, onOpenChange }: AISelectorProps) {
       {hasCompletion && (
         <div className="flex max-h-[400px]">
           <ScrollArea>
-            <div className="prose p-2 px-4 text-sm">
+            <div className="prose p-2 px-4 prose-sm">
               <Markdown>{completion}</Markdown>
             </div>
           </ScrollArea>

apps/web/components/tailwind/generative/generative-menu-switch.tsx

@@ -30,7 +30,7 @@ const GenerativeMenuSwitch = ({
           editor.chain().unsetHighlight().run();
         },
       }}
-      className="flex w-fit max-w-[90vw] overflow-hidden rounded border border-muted bg-background shadow-xl"
+      className="flex w-fit max-w-[90vw] overflow-hidden rounded-md border border-muted bg-background shadow-xl"
     >
       {open && <AISelector open={open} onOpenChange={onOpenChange} />}
       {!open && (

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "changeset": "changeset",
     "publish:packages": "changeset publish",
-    "version:packages": "changeset version",
+    "version:packages": "turbo build && changeset version",
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",

packages/headless/src/utils/utils.ts

@@ -28,14 +28,7 @@ export const getPrevText = (
   }: {
     chars: number;
     offset?: number;
-  }
+  },
 ) => {
-  // for now, we're using textBetween for now until we can figure out a way to stream markdown text
-  // with proper formatting: https://github.com/steven-tey/novel/discussions/7
-  return editor.state.doc.textBetween(
-    Math.max(0, editor.state.selection.from - chars),
-    editor.state.selection.from - offset,
-    "\n"
-  );
-  // complete(editor.storage.markdown.getMarkdown());
+  return editor.storage.markdown.getMarkdown();
 };