When is full AI docs and AI Commands going to be released?

[mike-koala-bear]

@steven-tey @andrewdoro

I am stuck with using AI in novel and can't make it work. I tried copying the code from the actual repo and it didn't work because I kept getting errors.

I would really appreciate if you could make AI work with documentation included. I would help if I could but I don't know TypeScript that much.

I hope this gets lots of attention.

Many thanks!

[mathiasrscom]

@mike-koala-bear Can you share the code. I would like to help where I can, I made it work at least. :-)

[baharseyd]

if you share your project and code for me , I try to help you

[mike-koala-bear]

@mathiasrscom @baharseyd Sorry for the late reply, the code doesn't work but here it is:

"use client"

import { useEffect, useState } from "react"
import { useDebouncedCallback } from "use-debounce"
import {
  EditorCommand,
  EditorCommandEmpty,
  EditorCommandItem,
  EditorCommandList,
  EditorContent,
  EditorRoot,
} from "novel"
import { ImageResizer, handleCommandNavigation } from "novel/extensions"
import { defaultEditorContent } from "./content"
import { defaultExtensions } from "./extensions"
import { ColorSelector } from "./selectors/color-selector"
import { LinkSelector } from "./selectors/link-selector"
import { NodeSelector } from "./selectors/node-selector"
import { Separator } from "./separator"
import { GenerativeMenuSwitch } from "./generative-menu-switch"
import TextButtons from "./selectors/text-buttons"
import { slashCommand, suggestionItems } from "./SlashCommands"
import { TopHeader } from "./TopHeader"
import {
  fetchPageContent,
  generateAIContent,
  savePageContent,
} from "@/api/pageApi"
import TableRow from "@tiptap/extension-table-row"
import TableHeader from "@tiptap/extension-table-header"
import TableCell from "@tiptap/extension-table-cell"
import Text from "@tiptap/extension-text"
import Typography from "@tiptap/extension-typography"
import TextAlign from "@tiptap/extension-text-align"
import AlignmentSelector from "./selectors/alignment-selector"
import TextStyle from "@tiptap/extension-text-style"
import FontFamily from "@tiptap/extension-font-family"
import  FontSelector  from "./selectors/font-selector"

export default function Page({ params }) {
  const [initialContent, setInitialContent] = useState(null)
  const [saveStatus, setSaveStatus] = useState("Saved")
  const [currentEditor, setCurrentEditor] = useState()

  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
  const [autoSaveMode, setAutoSaveMode] = useState(() => {
    // Initialize state from localStorage if available
    const savedAutoSaveMode = localStorage.getItem("autoSaveMode")
    return savedAutoSaveMode ? JSON.parse(savedAutoSaveMode) : false
  })

  useEffect(() => {
    // Update localStorage when autoSaveMode changes
    localStorage.setItem("autoSaveMode", JSON.stringify(autoSaveMode))
  }, [autoSaveMode])

  const [openNode, setOpenNode] = useState(false)
  const [openColor, setOpenColor] = useState(false)
  const [openLink, setOpenLink] = useState(false)
  const [openAI, setOpenAI] = useState(false)
  const [openAlignment, setOpenAlignment] = useState(false)
  const [openFont, setOpenFont] = useState(false)

  const [completion, setCompletion] = useState()

  //   const customText = Text.extend({
  //     addKeyboardShortcuts() {
  //       return {
  //         "Shift-a": () => {
  //           console.log("activated AI")
  //   handleAIRequest("Write a poem")
  //   console.log(completion)
  //           return true
  //         },
  //       }
  //     },
  //   })

  const editorExtensions = [
    ...defaultExtensions,

    slashCommand,
    TableRow,
    TableHeader,
    TableCell,
    // customText,
    Text,
    Typography,
    TextAlign.configure({
      types: ["heading", "paragraph"],
    }),
    TextStyle,
    FontFamily,
    //   History,
  ]

  const handleAIRequest = async (prompt) => {
    try {
      const result = await generateAIContent(prompt)
      setCompletion(result.completion)
    } catch (error) {
      console.error("Error generating AI content:", error)
    }
  }

  // Fetch page content
  useEffect(() => {
    const getPageContent = async () => {
      try {
        const content = await fetchPageContent(params.id)

        // Directly use the received content as initial content
        const parsedContent = JSON.parse(content.content)
        setInitialContent(parsedContent || defaultEditorContent)
      } catch (error) {
        console.error("Error fetching page content:", error)
        setInitialContent(defaultEditorContent)
      }
    }

    getPageContent()
  }, [params.id])

  const highlightCodeblocks = (content) => {
    const doc = new DOMParser().parseFromString(content, "text/html")
    return new XMLSerializer().serializeToString(doc)
  }

  const debouncedUpdates = useDebouncedCallback(async (editor) => {
    const json = editor.getJSON()
    window.localStorage.setItem(
      "html-content",
      highlightCodeblocks(editor.getHTML())
    )
    window.localStorage.setItem("novel-content", JSON.stringify(json))
    window.localStorage.setItem(
      "markdown",
      editor.storage.markdown.getMarkdown()
    )

    // Save content to the database
    try {
      console.log("JSON", json)
      await savePageContent(params.id, JSON.stringify(json))
      setSaveStatus("Saved")
    } catch (error) {
      console.error("Error saving page content:", error)
      setSaveStatus("Failed to save")
    }
  }, 500)

  if (!initialContent) return null
  //   if (!editor) return null

  return (
    // Remove top margin
    <div className="w-full max-w-screen -mt-8">
      <EditorRoot>
        <EditorContent
          initialContent={initialContent}
          extensions={editorExtensions}
          editorProps={{
            handleDOMEvents: {
              keydown: (_view, event) => handleCommandNavigation(event),
            },
            attributes: {
              class:
                "prose prose-lg dark:prose-invert font-default focus:outline-none max-w-full prose-h1:text-2xl mx-8",
            },
          }}
          // Using arbitrary values to select h1, h2, h3, h4, h5, h6 and to get exact size
          // Reversing order to make the header at the top
          className="[&_h1]:text-[32px] [&_h2]:text-[24px] [&_h3]:text-[18.72px] [&_h4]:text-[16px] [&_h5]:text-[13.28px] [&_h6]:text-[10.72px] 
          [&_h1]:font-semibold [&_h2]:font-medium [&_h3]:font-medium [&_h4]:font-medium [&_h5]:font-medium flex flex-col-reverse
          [&_h6]:font-medium"
          onUpdate={({ editor }) => {
            if (autoSaveMode) {
              debouncedUpdates(editor)
            }
            setSaveStatus("Unsaved")
          }}
          // Setting the editor to use
          onCreate={({ editor }) => {
            setCurrentEditor(editor)
          }}
          slotAfter={<ImageResizer />}
        >
          <TopHeader
            saveStatus={saveStatus}
            setSaveStatus={setSaveStatus}
            setShowEmojiPicker={setShowEmojiPicker}
            showEmojiPicker={showEmojiPicker}
            autoSaveMode={autoSaveMode}
            setAutoSaveMode={setAutoSaveMode}
            id={params.id}
          />

          <EditorCommand className="bg-gray-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>
            <EditorCommandList>
              {suggestionItems.map((item) => (
                <EditorCommandItem
                  value={item.title}
                  onCommand={(val) => item.command(val)}
                  className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent cursor-pointer"
                  key={item.title}
                >
                  <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
                    {item.icon}
                  </div>
                  <div>
                    <p className="font-medium">{item.title}</p>
                    <p className="text-xs text-muted-foreground">
                      {item.description}
                    </p>
                  </div>
                </EditorCommandItem>
              ))}
            </EditorCommandList>
          </EditorCommand>

          <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>
            <Separator orientation="vertical" />
            <NodeSelector open={openNode} onOpenChange={setOpenNode} />
            <Separator orientation="vertical" />
            <FontSelector open={openFont} onOpenChange={setOpenFont} />
            <Separator orientation="vertical" />
            <LinkSelector open={openLink} onOpenChange={setOpenLink} />
            <Separator orientation="vertical" />
            <TextButtons />
            <Separator orientation="vertical" />
            <ColorSelector open={openColor} onOpenChange={setOpenColor} />
            <Separator orientation="vertical" />
            <AlignmentSelector
              open={openAlignment}
              onOpenChange={setOpenAlignment}
            />
          </GenerativeMenuSwitch>
        </EditorContent>
      </EditorRoot>
    </div>
  )
}

I used next.js with ruby on rails. Feel free to ask for more pieces of code!