Merge pull request #297 from steven-tey/ai-features

feat: add ai features example

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

@@ -2,35 +2,34 @@ import OpenAI from "openai";
 import { OpenAIStream, StreamingTextResponse } from "ai";
 import { kv } from "@vercel/kv";
 import { Ratelimit } from "@upstash/ratelimit";
+import { match } from "ts-pattern";
+import type { ChatCompletionMessageParam } from "openai/resources/index.mjs";
 
 // Create an OpenAI API client (that's edge friendly!)
 // Using LLamma's OpenAI client:
 
 // 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,
@@ -53,26 +52,91 @@ export async function POST(req: Request): Promise<Response> {
  }
  }
 
- let { prompt } = await req.json();
-
- const response = await openai.chat.completions.create({
- model: process.env.NODE_ENV == "development" ? "llama2" : "gpt-3.5-turbo",
- stream: true,
- messages: [
+ let { prompt, option, command } = await req.json();
+ const messages = match(option)
+ .with("continue", () => [
  {
  role: "system",
  content:
  "You are an AI writing assistant that continues existing text based on context from prior text. " +
  "Give more weight/priority to the later characters than the beginning ones. " +
- "Limit your response to no more than 200 characters, but make sure to construct complete sentences.",
- // we're disabling markdown for now until we can figure out a way to stream markdown text with proper formatting: https:/steven-tey/novel/discussions/7
- // "Use Markdown formatting when appropriate.",
+ "Limit your response to no more than 200 characters, but make sure to construct complete sentences." +
+ "Use Markdown formatting when appropriate.",
  },
  {
  role: "user",
  content: prompt,
  },
- ],
+ ])
+ .with("improve", () => [
+ {
+ role: "system",
+ content:
+ "You are an AI writing assistant that improves existing text. " +
+ "Limit your response to no more than 200 characters, but make sure to construct complete sentences." +
+ "Use Markdown formatting when appropriate.",
+ },
+ {
+ role: "user",
+ content: `The existing text is: ${prompt}`,
+ },
+ ])
+ .with("shorter", () => [
+ {
+ role: "system",
+ content:
+ "You are an AI writing assistant that shortens existing text. " +
+ "Use Markdown formatting when appropriate.",
+ },
+ {
+ role: "user",
+ content: `The existing text is: ${prompt}`,
+ },
+ ])
+ .with("longer", () => [
+ {
+ role: "system",
+ content:
+ "You are an AI writing assistant that lengthens existing text. " +
+ "Use Markdown formatting when appropriate.",
+ },
+ {
+ role: "user",
+ content: `The existing text is: ${prompt}`,
+ },
+ ])
+ .with("fix", () => [
+ {
+ role: "system",
+ content:
+ "You are an AI writing assistant that fixes grammar and spelling errors in existing text. " +
+ "Limit your response to no more than 200 characters, but make sure to construct complete sentences." +
+ "Use Markdown formatting when appropriate.",
+ },
+ {
+ role: "user",
+ 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 take an input from the user and a command for manipulating the text" +
+ "Use Markdown formatting when appropriate.",
+ },
+ {
+ role: "user",
+ content: `For this text: ${prompt}. You have to respect the command: ${command}`,
+ },
+ ])
+ .run() as ChatCompletionMessageParam[];
+
+ const response = await openai.chat.completions.create({
+ model: "gpt-3.5-turbo",
+ stream: true,
+ messages,
  temperature: 0.7,
  top_p: 1,
  frequency_penalty: 0,

apps/web/app/page.tsx

@@ -1,8 +1,8 @@
 import { Github } from "@/components/tailwind/ui/icons";
 import { Button } from "@/components/tailwind/ui/button";
 import Menu from "@/components/tailwind/ui/menu";
-import TailwindEditor from "@/components/tailwind/editor";
 import Link from "next/link";
+import TailwindAdvancedEditor from "@/components/tailwind/advanced-editor";
 
 export default function Page() {
  return (
@@ -18,7 +18,7 @@ export default function Page() {
  </Link>
  <Menu />
  </div>
- <TailwindEditor />
+ <TailwindAdvancedEditor />
  </div>
  );
 }

apps/web/components/tailwind/editor.tsx → apps/web/components/tailwind/advanced-editor.tsx

@@ -3,14 +3,13 @@ import { defaultEditorContent } from "@/lib/content";
 import React, { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import {
- EditorInstance,
  EditorRoot,
- EditorBubble,
  EditorCommand,
  EditorCommandItem,
  EditorCommandEmpty,
  EditorContent,
  type JSONContent,
+ EditorInstance,
 } from "novel";
 import { ImageResizer, handleCommandNavigation } from "novel/extensions";
 import { defaultExtensions } from "./extensions";
@@ -21,12 +20,13 @@ import { ColorSelector } from "./selectors/color-selector";
 
 import { TextButtons } from "./selectors/text-buttons";
 import { slashCommand, suggestionItems } from "./slash-command";
+import GenerativeMenuSwitch from "./generative/generative-menu-switch";
 import { handleImageDrop, handleImagePaste } from "novel/plugins";
 import { uploadFn } from "./image-upload";
 
 const extensions = [...defaultExtensions, slashCommand];
 
-const TailwindEditor = () => {
+const TailwindAdvancedEditor = () => {
  const [initialContent, setInitialContent] = useState<null | JSONContent>(
  null,
  );
@@ -35,6 +35,7 @@ const TailwindEditor = () => {
  const [openNode, setOpenNode] = useState(false);
  const [openColor, setOpenColor] = useState(false);
  const [openLink, setOpenLink] = useState(false);
+ const [openAI, setOpenAI] = useState(false);
 
  const debouncedUpdates = useDebouncedCallback(
  async (editor: EditorInstance) => {
@@ -82,7 +83,7 @@ const TailwindEditor = () => {
  }}
  slotAfter={<ImageResizer />}
  >
- <EditorCommand className="z-50 h-auto max-h-[330px]  w-72 overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
+ <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
  <EditorCommandEmpty className="px-2 text-muted-foreground">
  No results
  </EditorCommandEmpty>
@@ -106,12 +107,7 @@ const TailwindEditor = () => {
  ))}
  </EditorCommand>
 
- <EditorBubble
- tippyOptions={{
- placement: "top",
- }}
- className="flex w-fit max-w-[90vw] overflow-hidden rounded border border-muted bg-background shadow-xl"
- >
+ <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>
  <Separator orientation="vertical" />
  <NodeSelector open={openNode} onOpenChange={setOpenNode} />
  <Separator orientation="vertical" />
@@ -121,11 +117,11 @@ const TailwindEditor = () => {
  <TextButtons />
  <Separator orientation="vertical" />
  <ColorSelector open={openColor} onOpenChange={setOpenColor} />
- </EditorBubble>
+ </GenerativeMenuSwitch>
  </EditorContent>
  </EditorRoot>
  </div>
  );
 };
 
-export default TailwindEditor;
+export default TailwindAdvancedEditor;

apps/web/components/tailwind/extensions.ts

@@ -7,13 +7,14 @@ import {
  HorizontalRule,
  StarterKit,
  Placeholder,
+ AIHighlight,
 } from "novel/extensions";
 import { UploadImagesPlugin } from "novel/plugins";
 
 import { cx } from "class-variance-authority";
 
 //TODO I am using cx here to get tailwind autocomplete working, idk if someone else can write a regex to just capture the class key in objects
-
+const aiHighlight = AIHighlight;
 //You can overwrite the placeholder with your own configuration
 const placeholder = Placeholder;
 const tiptapLink = TiptapLink.configure({
@@ -114,4 +115,5 @@ export const defaultExtensions = [
  taskList,
  taskItem,
  horizontalRule,
+ aiHighlight,
 ];

apps/web/components/tailwind/generative/ai-completion-command.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
+import { useEditor } from "novel";
+import { Check, TextQuote, TrashIcon } from "lucide-react";
+
+const AICompletionCommands = ({
+ completion,
+ onDiscard,
+}: {
+ completion: string;
+ onDiscard: () => void;
+}) => {
+ const { editor } = useEditor();
+ return (
+ <>
+ <CommandGroup>
+ <CommandItem
+ className="gap-2 px-4"
+ value="replace"
+ onSelect={() => {
+ const selection = editor.view.state.selection;
+
+ editor
+ .chain()
+ .focus()
+ .insertContentAt(
+ {
+ from: selection.from,
+ to: selection.to,
+ },
+ completion,
+ )
+ .run();
+ }}
+ >
+ <Check className="h-4 w-4 text-muted-foreground" />
+ Replace selection
+ </CommandItem>
+ <CommandItem
+ className="gap-2 px-4"
+ value="insert"
+ onSelect={() => {
+ const selection = editor.view.state.selection;
+ editor
+ .chain()
+ .focus()
+ .insertContentAt(selection.to + 1, completion)
+ .run();
+ }}
+ >
+ <TextQuote className="h-4 w-4 text-muted-foreground" />
+ Insert below
+ </CommandItem>
+ </CommandGroup>
+ <CommandSeparator />
+
+ <CommandGroup>
+ <CommandItem onSelect={onDiscard} value="thrash" className="gap-2 px-4">
+ <TrashIcon className="h-4 w-4 text-muted-foreground" />
+ Discard
+ </CommandItem>
+ </CommandGroup>
+ </>
+ );
+};
+
+export default AICompletionCommands;