Add support for different API routes for additional slash commands about novel HOT 5 OPEN

Yes – this is being worked on as part of #29! The hard part is figuring out the AI editing UX – I wrote about it in the PR!

from novel.

I added additional command in slash. slah comment is trigget by selectItem so you can add whatever command you need.

1. extract apis into different hooks

  const {
    complete: continueComplete,
    completion,
    isLoading: isLoadingContinue,
    stop,
  } = useContinueCommand(editor)

  const { complete: breakSteps, isLoading: isLoadingBreakSteps } = useBreakIntoSteps({
    editor,
    project_title,
    project_des,
    task_title,
  })

  const selectItem = useCallback(
    (index: number) => {
      const item = items[index]
      if (item) {
        if (item.title === 'Continue writing') {
          const text = editor.getText()
          continueComplete(text)
        }
        if (item.title === 'Break into steps') {
          const text = editor.getText()
          breakSteps(text)
        } else {
          command(item)
        }
      }
    },
    [continueComplete, breakSteps, command, editor, items]
  )

2. add to array

const getSuggestionItems = ({ query }: { query: string }) => {
  return [
    {
      title: 'Continue writing',
      description: 'Use AI to expand your thoughts.',
      icon: <Magic className="w-7 text-black" />,
    },
    {
      title: 'Break into steps',
      description: 'Use AI to break action into steps .',
      icon: <Component className="w-7 text-black" />,
    },
]

3. add spinning indicator for new command (could use switch state for better readability)

            {item.title === 'Continue writing' && isLoadingContinue ? (
                <LoadingCircle />
              ) : item.title === 'Break into steps' && isLoadingBreakSteps ? (
                <LoadingCircle />
              ) : (
                item.icon
              )}

from novel.

It would look like this. (I turned off the markdown)

from novel.

@jt6677 oooh very interesting – so you're basically streaming in responses without markdown, and then converting them to markdown once streaming is complete?

Is it possible to stream them in and directly format them as markdown?

from novel.

@jt6677 oooh very interesting – so you're basically streaming in responses without markdown, and then converting them to markdown once streaming is complete?

Is it possible to stream them in and directly format them as markdown?

For what I understand, tiptap does not play nice with markdown. Individual paragraph or each circled step is a tiptap node.

const taskItems = completion
       .split(/\n(?=\d+\.)/) // Splits at the start of each numbered item
       .filter((task) => task.trim().length > 0) // Filters out any empty strings
       .map((task) => {
         const taskText = task.trim().slice(3) // Removes the numbering and leading space from each task item
         return {
           type: 'taskItem',
           attrs: {
             checked: false,
           },
           content: [
             {
               type: 'paragraph',
               content: [{ type: 'text', text: taskText }],
             },
           ],
         }
       })

     const taskList = {
       type: 'taskList',
       content: taskItems,
     }

     editor?.chain().deleteRange({ from, to }).insertContent(taskList).run() 

Basically, I take the finial result (after streaming), split into array of text and parse each text as a special tiptap node(taskItem). There is a problem in current version of novel; streamed markdown would appear to be correctly formatted at first. But to Tiptap, it was just a SINGLE node with text. Any editing on the markdown text would cause the text to lose all format, and collapse into a single paragraph.

The solution I am using in my app is just parse individual text to tiptap nodes whether is a paragraph or a taskItem.

from novel.