Skip to content

Commit

Permalink
fix: add docs for ai storage
Browse files Browse the repository at this point in the history
  • Loading branch information
nperez0111 committed Jul 26, 2024
1 parent fa8d614 commit 4e3aa90
Showing 1 changed file with 19 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ meta:

import { CodeDemo } from '@/components/CodeDemo'

The AI extension stores the current state in it’s extension storage under `editor.storage.ai`. This storage is used to keep track of the current state of the AI response, as well as any past responses.
The AI extension stores the current state in it’s extension storage under `editor.storage.ai || editor.storage.aiAdvanced` (depending on if you are using the extension-ai or extension-ai-advanced extension). This storage is used to keep track of the current state of the AI response, as well as any past responses.

<CodeDemo isPro path="/Extensions/AiStorage" />

Expand All @@ -23,20 +23,22 @@ The AI extension stores the current state in it’s extension storage under `edi
You can use this storage to read out the current state of AI responses like:

```ts
if (editor.storage.ai.response.state === 'error') {
const aiStorage = editor.storage.ai || editor.storage.aiAdvanced

if (aiStorage.response.state === 'error') {
// The error that occurred
editor.storage.ai.response.error
aiStorage.response.error
}

if (editor.storage.ai.response.state === 'loading') {
if (aiStorage.response.state === 'loading') {
// The message that is currently being processed
editor.storage.ai.response.message
aiStorage.response.message
}

if (editor.storage.ai.response.state === 'idle') {
if (editor.storage.ai.response.message) {
if (aiStorage.response.state === 'idle') {
if (aiStorage.response.message) {
// The successful response
editor.storage.ai.response.message
aiStorage.response.message
} else {
// No response has been requested yet
}
Expand Down Expand Up @@ -90,7 +92,7 @@ editor.chain().aiAccept({ append: true }).run()

### aiRegenerate

This command is meant to be ran when the user wants the to retry the AI response, it will use all the same options as the previous AI text operation and add to the `editor.storage.ai.pastResponses` array
This command is meant to be ran when the user wants the to retry the AI response, it will use all the same options as the previous AI text operation and add to the `(editor.storage.ai || editor.storage.aiAdvanced).pastResponses` array

| key | type | definition |
| -------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -115,7 +117,7 @@ editor.chain().aiRegenerate({ append: true }).run()

### aiReject

This command is meant to be ran when the user has rejected the AI response, it will reset the extension’s state to the initial idle state and clear all `editor.storage.ai.pastResponses`
This command is meant to be ran when the user has rejected the AI response, it will reset the extension’s state to the initial idle state and clear all `(editor.storage.ai || editor.storage.aiAdvanced).pastResponses`

| key | type | definition |
| ---- | ------------------ | --------------------------------------------------------------------------------------------------- |
Expand All @@ -124,7 +126,7 @@ This command is meant to be ran when the user has rejected the AI response, it w
```ts
editor.chain().aiReject().run()

// Will not clear out editor.storage.ai, useful for keeping current response in the editor storage
// Will not clear out editor.storage.ai || editor.storage.aiAdvanced, useful for keeping current response in the editor storage
editor.chain().aiReject({ type: 'pause' }).run()
```

Expand All @@ -139,14 +141,17 @@ To render a preview of what a chat would look like in your editor, we can use yo
import { tryParseToTiptapHTML } from '@tiptap-pro/extension-ai'

// try to parse the current message as HTML, and null if it could not be parsed
tryToParseToHTML(editor.storage.ai.response.message, editor)
tryToParseToHTML((editor.storage.ai || editor.storage.aiAdvanced).response.message, editor)

// try to parse a previous response as HTML, and null if it could not be parsed
tryToParseToHTML(editor.storage.ai.pastResponses[0], editor)
tryToParseToHTML((editor.storage.ai || editor.storage.aiAdvanced).pastResponses[0], editor)

// For example in React
function PreviewComponent({ editor }) {
const htmlResponse = tryToParseToHTML(editor.storage.ai.response.message, editor)
const htmlResponse = tryToParseToHTML(
(editor.storage.ai || editor.storage.aiAdvanced).response.message,
editor,
)
/* This is safe since we've parsed the content with prose-mirror first */
return <div dangerouslySetInnerHTML={{ __html: htmlResponse }}></div>
}
Expand Down

0 comments on commit 4e3aa90

Please sign in to comment.