tiptapify 0.3.5 → 0.4.0

package/src/composables/useTiptapifyLinkPreview.ts

@@ -0,0 +1,60 @@
+import { InjectionKey, inject, ref, Ref, watch } from 'vue'
+import { checkLinkPreview, fetchLinkPreview } from '@tiptapify/extensions/components/media/linkCard/linkPreview'
+import { TiptapifyLinkPreviewData, TiptapifyLinkPreviewOptions } from '@tiptapify/types/editor'
+
+export type TiptapifyLinkPreviewState = {
+  options: Ref<TiptapifyLinkPreviewOptions | null>,
+  // The endpoint answered the handshake: link cards can be made
+  available: Ref<boolean>,
+}
+
+export const TIPTAPIFY_LINK_PREVIEW_KEY: InjectionKey<TiptapifyLinkPreviewState> = Symbol('tiptapifyLinkPreview')
+
+/**
+ * The `linkPreview` prop of the editor, checked by the handshake whenever its endpoint changes.
+ */
+export function createLinkPreviewState(options: Ref<TiptapifyLinkPreviewOptions | null>): TiptapifyLinkPreviewState {
+  const available = ref(false)
+
+  watch(() => options.value?.endpoint, async () => {
+    const current = options.value
+    available.value = false
+
+    if (current?.endpoint) {
+      const ok = await checkLinkPreview(current)
+      // An answer for an endpoint changed meanwhile is stale
+      if (options.value?.endpoint === current.endpoint) {
+        available.value = ok
+      }
+    }
+  }, { immediate: true })
+
+  return { options, available }
+}
+
+/**
+ * Link cards in the dialogs and the paste menu: whether they can be made, the data of a page, and a new
+ * handshake for an endpoint that failed (asked when the link dialog opens: it may be up by now).
+ */
+export function useTiptapifyLinkPreview(): {
+  available: Ref<boolean>,
+  fetchPreview: (url: string, signal?: AbortSignal) => Promise<TiptapifyLinkPreviewData>,
+  recheck: () => Promise<void>,
+} {
+  const { options, available } = inject(TIPTAPIFY_LINK_PREVIEW_KEY, { options: ref(null), available: ref(false) })
+
+  function fetchPreview(url: string, signal?: AbortSignal): Promise<TiptapifyLinkPreviewData> {
+    return options.value
+      ? fetchLinkPreview(options.value, url, signal)
+      : Promise.reject(new Error('The editor has no linkPreview endpoint'))
+  }
+
+  async function recheck(): Promise<void> {
+    const current = options.value
+    if (current?.endpoint && !available.value) {
+      available.value = await checkLinkPreview(current, { recheckFailed: true })
+    }
+  }
+
+  return { available, fetchPreview, recheck }
+}

package/src/composables/useTiptapifyUpload.test.ts

@@ -0,0 +1,96 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, provide, ref } from 'vue'
+import { fakeUploadEndpoint } from '@tiptapify/composables/fakeUploadEndpoint'
+import { TIPTAPIFY_UPLOAD_KEY, useTiptapifyUpload } from '@tiptapify/composables/useTiptapifyUpload'
+import { TiptapifyUploadOptions } from '@tiptapify/types/editor'
+
+function withUpload(upload: TiptapifyUploadOptions | null) {
+  let result!: ReturnType<typeof useTiptapifyUpload>
+  const Probe = { setup: () => { result = useTiptapifyUpload(); return () => null } }
+  createApp({ setup: () => { provide(TIPTAPIFY_UPLOAD_KEY, ref(upload)); return () => h(Probe) } })
+    .mount(document.createElement('div'))
+
+  return result
+}
+
+const context = (kind: 'image' | 'video', onProgress = vi.fn(), signal = new AbortController().signal) => ({ kind, onProgress, signal })
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('useTiptapifyUpload', () => {
+  it('embeds an image as a base64 data URL when the editor has no upload endpoint', async () => {
+    const { canUploadImage, canUploadVideo, upload, uploadFile } = withUpload(null)
+    const onProgress = vi.fn()
+
+    const { url } = await uploadFile(new File(['hi'], 'a.png', { type: 'image/png' }), context('image', onProgress))
+
+    expect(canUploadImage.value).toBe(true)
+    expect(canUploadVideo.value).toBe(false)
+    expect(upload.value).toBeNull()
+    expect(url).toBe('data:image/png;base64,aGk=')
+    expect(onProgress).toHaveBeenLastCalledWith(1)
+  })
+
+  it('does not embed a video file: it needs the upload endpoint', async () => {
+    const { uploadFile } = withUpload(null)
+
+    await expect(uploadFile(new File(['v'], 'a.mp4', { type: 'video/mp4' }), context('video'))).rejects.toThrow()
+  })
+
+  it('stops reading the file when the upload is cancelled', async () => {
+    const { uploadFile } = withUpload(null)
+    const controller = new AbortController()
+    controller.abort()
+
+    await expect(uploadFile(new File(['hi'], 'a.png'), context('image', vi.fn(), controller.signal))).rejects.toThrow()
+  })
+
+  it('posts images and videos to the upload endpoint with its headers and gives the URL it answers', async () => {
+    const requests = fakeUploadEndpoint(() => ({ status: 201, body: { url: 'https://cdn.example.com/clip.mp4' } }))
+    const { canUploadVideo, upload, uploadFile } = withUpload({ endpoint: '/api/uploads', headers: { Authorization: 'Bearer t' } })
+    const file = new File(['v'], 'clip.mp4', { type: 'video/mp4' })
+    const onProgress = vi.fn()
+
+    expect(await uploadFile(file, context('video', onProgress))).toEqual({ url: 'https://cdn.example.com/clip.mp4' })
+
+    expect(canUploadVideo.value).toBe(true)
+    expect(upload.value).toBeTypeOf('function')
+    expect(requests).toHaveLength(1)
+    expect(requests[0]).toMatchObject({ method: 'POST', url: '/api/uploads', headers: { Accept: 'application/json', Authorization: 'Bearer t' } })
+    expect(requests[0].body.get('file')).toBeInstanceOf(File)
+    expect((requests[0].body.get('file') as File).name).toBe('clip.mp4')
+    expect(requests[0].body.get('kind')).toBe('video')
+    expect(onProgress.mock.calls).toEqual([[0.5], [1]])
+  })
+
+  it('rejects with the error the endpoint answers, or with an empty message and the status', async () => {
+    fakeUploadEndpoint(request => (request.body.get('kind') === 'image'
+      ? { status: 413, body: { error: 'The file is too large.' } }
+      : { status: 500, body: 'Internal Server Error' }))
+    const { uploadFile } = withUpload({ endpoint: '/api/uploads' })
+
+    await expect(uploadFile(new File(['hi'], 'a.png'), context('image'))).rejects.toThrow('The file is too large.')
+    await expect(uploadFile(new File(['v'], 'a.mp4'), context('video'))).rejects.toMatchObject({ message: '', status: 500 })
+  })
+
+  it('rejects an answer without a url', async () => {
+    fakeUploadEndpoint(() => ({ status: 200, body: { path: 'a.png' } }))
+    const { uploadFile } = withUpload({ endpoint: '/api/uploads' })
+
+    await expect(uploadFile(new File(['hi'], 'a.png'), context('image'))).rejects.toMatchObject({ message: '', status: 200 })
+  })
+
+  it('aborts the request when the upload is cancelled', async () => {
+    const requests = fakeUploadEndpoint(() => ({ status: 200, body: { url: '/a.png' } }))
+    const { uploadFile } = withUpload({ endpoint: '/api/uploads' })
+    const controller = new AbortController()
+
+    const pending = uploadFile(new File(['hi'], 'a.png'), context('image', vi.fn(), controller.signal))
+    controller.abort()
+
+    await expect(pending).rejects.toThrow('cancelled')
+    expect(requests).toHaveLength(1)
+  })
+})

package/src/composables/useTiptapifyUpload.ts

@@ -0,0 +1,126 @@
+import { computed, ComputedRef, inject, InjectionKey, Ref, ref } from 'vue'
+import { TiptapifyUpload, TiptapifyUploadContext, TiptapifyUploadOptions } from '@tiptapify/types/editor'
+
+export const TIPTAPIFY_UPLOAD_KEY: InjectionKey<Ref<TiptapifyUploadOptions | null>> = Symbol('tiptapifyUpload')
+
+function cancelled(): DOMException {
+  return new DOMException('The upload was cancelled', 'AbortError')
+}
+
+/**
+ * A picked image as a base64 data URL, for an editor without an upload endpoint.
+ */
+function readAsDataUrl(file: File, { onProgress, signal }: TiptapifyUploadContext): Promise<{ url: string }> {
+  return new Promise((resolve, reject) => {
+    if (signal.aborted) {
+      reject(cancelled())
+
+      return
+    }
+
+    const reader = new FileReader()
+    reader.onprogress = event => event.lengthComputable && onProgress(event.loaded / event.total)
+    reader.onload = () => {
+      onProgress(1)
+      resolve({ url: String(reader.result) })
+    }
+    reader.onerror = () => reject(reader.error ?? new Error('The file could not be read'))
+    reader.onabort = () => reject(cancelled())
+    signal.addEventListener('abort', () => reader.abort(), { once: true })
+    reader.readAsDataURL(file)
+  })
+}
+
+function parseJson(text: string): Record<string, unknown> | null {
+  try {
+    return JSON.parse(text)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * XMLHttpRequest, not fetch: it reports the progress of the upload itself. A failure carries the endpoint's
+ * `error` as its message, else an empty one: the dialogs then show their own translated message.
+ */
+function sendToEndpoint(
+  { endpoint, headers }: TiptapifyUploadOptions,
+  file: File,
+  { kind, onProgress, signal }: TiptapifyUploadContext,
+): Promise<{ url: string }> {
+  return new Promise((resolve, reject) => {
+    if (signal.aborted) {
+      reject(cancelled())
+
+      return
+    }
+
+    const request = new XMLHttpRequest()
+    request.open('POST', endpoint)
+    request.setRequestHeader('Accept', 'application/json')
+    for (const [name, value] of Object.entries(headers ?? {})) {
+      request.setRequestHeader(name, value)
+    }
+
+    request.upload.onprogress = event => event.lengthComputable && onProgress(event.loaded / event.total)
+    request.onload = () => {
+      const body = parseJson(request.responseText)
+      if (request.status >= 200 && request.status < 300 && typeof body?.url === 'string' && body.url) {
+        onProgress(1)
+        resolve({ url: body.url })
+
+        return
+      }
+
+      reject(Object.assign(new Error(typeof body?.error === 'string' ? body.error : ''), { status: request.status }))
+    }
+    request.onerror = () => reject(Object.assign(new Error(''), { status: 0 }))
+    request.onabort = () => reject(cancelled())
+    signal.addEventListener('abort', () => request.abort(), { once: true })
+
+    const form = new FormData()
+    form.append('file', file)
+    form.append('kind', kind)
+    request.send(form)
+  })
+}
+
+/**
+ * Files picked in the dialogs. With the `upload` endpoint of the editor they are sent to it and the document
+ * keeps their URL. Without it an image (a video poster, the image of a link card) is embedded as base64, and
+ * a video file can't be picked: a document would grow by its whole size.
+ */
+export function useTiptapifyUpload(): {
+  // null without an upload endpoint
+  upload: ComputedRef<TiptapifyUpload | null>,
+  canUploadImage: ComputedRef<boolean>,
+  canUploadVideo: ComputedRef<boolean>,
+  uploadFile: TiptapifyUpload,
+} {
+  const options = inject(TIPTAPIFY_UPLOAD_KEY, ref(null))
+
+  const upload = computed<TiptapifyUpload | null>(() => {
+    const current = options.value
+
+    return current?.endpoint ? (file, context) => sendToEndpoint(current, file, context) : null
+  })
+
+  function uploadFile(file: File, context: TiptapifyUploadContext): Promise<{ url: string }> {
+    if (upload.value) {
+      return upload.value(file, context)
+    }
+
+    if (context.kind === 'image') {
+      return readAsDataUrl(file, context)
+    }
+
+    return Promise.reject(new Error('A video file needs the upload endpoint of the editor'))
+  }
+
+  return {
+    upload,
+    canUploadImage: computed(() => true),
+    canUploadVideo: computed(() => upload.value !== null),
+    uploadFile,
+  }
+}

package/src/extensions/components/ai/Dialog.test.ts

@@ -0,0 +1,335 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { App, computed, createApp, h, nextTick, provide, ref, shallowRef } from 'vue'
+import { createVuetify } from 'vuetify'
+import { Editor } from '@tiptap/vue-3'
+import { Bold } from '@tiptap/extension-bold'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { CharacterCount } from '@tiptap/extensions'
+import AiDialog from '@tiptapify/extensions/components/ai/Dialog.vue'
+import { TiptapifyAiOptions, TiptapifyAiProvider } from '@tiptapify/types/editor'
+
+// jsdom has no `visualViewport`; Vuetify's overlay positioning reads it
+if (!('visualViewport' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).visualViewport = {
+    scale: 1,
+    offsetLeft: 0,
+    offsetTop: 0,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+}
+
+// Nor `ResizeObserver`, which the auto-growing prompt textarea reads
+if (!('ResizeObserver' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+let app: App | null = null
+let editor: Editor | null = null
+
+async function flush() {
+  for (let i = 0; i < 5; i++) {
+    await nextTick()
+  }
+}
+
+type Setup = {
+  content: string,
+  selection?: { from: number, to: number },
+  options?: TiptapifyAiOptions,
+  limit?: number,
+}
+
+async function openDialog({ content, selection, options = {}, limit }: Setup): Promise<HTMLElement> {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Bold, ...(limit ? [CharacterCount.configure({ limit })] : [])],
+  })
+  if (selection) {
+    editor.commands.setTextSelection(selection)
+  }
+
+  const dialog = ref<{ showDialog: () => void } | null>(null)
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      provide('tiptapifyAi', computed(() => ({ enabled: true, promptExamples: [], ...options })))
+
+      return () => h(AiDialog, { ref: dialog })
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  dialog.value!.showDialog()
+  await flush()
+
+  return document.querySelector<HTMLElement>('.tiptapify-dialog')!
+}
+
+async function typePrompt(card: HTMLElement, value: string) {
+  const textarea = card.querySelector('textarea')!
+  textarea.value = value
+  textarea.dispatchEvent(new Event('input'))
+  await flush()
+
+  return textarea
+}
+
+async function pressEnter(textarea: HTMLTextAreaElement, shiftKey = false) {
+  const event = new KeyboardEvent('keydown', { key: 'Enter', shiftKey, bubbles: true, cancelable: true })
+  textarea.dispatchEvent(event)
+  await flush()
+
+  return event
+}
+
+function buttonWithText(card: HTMLElement, text: string): HTMLButtonElement {
+  return [...card.querySelectorAll('button')].find(button => button.textContent?.trim() === text) as HTMLButtonElement
+}
+
+afterEach(() => {
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+})
+
+describe('ai dialog', () => {
+  it('generates on Enter for the selection and replaces it with the formatted result', async () => {
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async (_request, _context, stream) => {
+      stream!.onChunk('<b>there</b>')
+
+      return ''
+    })
+    const card = await openDialog({ content: '<p>Hello world</p>', selection: { from: 7, to: 12 }, options: { aiProvider } })
+
+    expect(card.querySelector('.ai-context')!.textContent).toContain('ai.context.selection')
+    expect(buttonWithText(card, 'ai.replace_selection').disabled).toBe(true)
+
+    const textarea = await typePrompt(card, 'Make it friendly')
+    const event = await pressEnter(textarea)
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(aiProvider).toHaveBeenCalledTimes(1)
+    const [request, context] = aiProvider.mock.calls[0]
+    expect(context).toMatchObject({ prompt: 'Make it friendly', selectedText: 'world', mode: 'replace' })
+    expect(request.enable_thinking).toBe(false)
+    expect(card.querySelector('.ai-result__content')!.innerHTML).toBe('<strong>there</strong>')
+
+    card.querySelector('form')!.requestSubmit()
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p>Hello <strong>there</strong></p>')
+  })
+
+  it('sends a selection cut inside a word as whole words, with the text around it', async () => {
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async () => 'have entered a new')
+    const text = 'The talks has entered a new stage.'
+    const card = await openDialog({
+      content: `<p>${text}</p>`,
+      selection: { from: 1 + text.indexOf('as entered'), to: 1 + text.indexOf('ew stage') },
+      options: { aiProvider },
+    })
+
+    await pressEnter(await typePrompt(card, 'Fix grammar'))
+
+    const [request, context] = aiProvider.mock.calls[0]
+    expect(context).toMatchObject({ selectedText: 'has entered a new', textBefore: 'The talks ', textAfter: ' stage.' })
+    const message = request.messages.at(-1)!.content as string
+    expect(message).toContain('Text before the selection:\nThe talks ')
+    expect(message).toContain('Selected text:\nhas entered a new')
+    expect(message).toContain('Text after the selection:\n stage.')
+    expect(message).toContain('User request:\nFix grammar')
+
+    card.querySelector('form')!.requestSubmit()
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p>The talks have entered a new stage.</p>')
+  })
+
+  it('inserts the result below the selection, keeping it', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => 'Added'
+    const card = await openDialog({ content: '<p>Hello world</p>', selection: { from: 1, to: 6 }, options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Continue'))
+    buttonWithText(card, 'ai.insert_below').click()
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p>Hello world</p><p>Added</p>')
+  })
+
+  it('inserts at the cursor or appends to the end without a selection', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => ({ content: '<p>End</p>' })
+    const card = await openDialog({ content: '<p>Hello</p><p>World</p>', options: { aiProvider } })
+
+    expect(card.querySelector('.ai-context')!.textContent).toContain('ai.context.document')
+    expect(buttonWithText(card, 'ai.insert')).toBeTruthy()
+
+    await pressEnter(await typePrompt(card, 'Write an ending'))
+    buttonWithText(card, 'ai.append').click()
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p>Hello</p><p>World</p><p>End</p>')
+  })
+
+  it('keeps Shift+Enter as a new line', async () => {
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async () => 'x')
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider } })
+
+    const event = await pressEnter(await typePrompt(card, 'Line'), true)
+
+    expect(event.defaultPrevented).toBe(false)
+    expect(aiProvider).not.toHaveBeenCalled()
+  })
+
+  it('stops a streaming request and keeps the partial result without an error', async () => {
+    const aiProvider: TiptapifyAiProvider = (_request, _context, stream) => new Promise((_resolve, reject) => {
+      stream!.onChunk('Partial')
+      stream!.signal.addEventListener('abort', () => reject(new Error('aborted')))
+    })
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+    expect(card.querySelector('.ai-send--stop')).not.toBeNull()
+
+    card.querySelector<HTMLButtonElement>('.ai-send--stop')!.click()
+    await flush()
+
+    expect(card.querySelector('.ai-send--stop')).toBeNull()
+    expect(card.querySelector('.ai-result__content')!.textContent).toBe('Partial')
+    expect(card.querySelector('.ai-status')).toBeNull()
+    expect(buttonWithText(card, 'ai.insert').disabled).toBe(false)
+  })
+
+  it('explains a request the browser could not complete (service down or CORS) instead of "Failed to fetch"', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => {
+      throw new TypeError('Failed to fetch')
+    }
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    const status = card.querySelector('.ai-status--error')!.textContent!
+    expect(status).toContain('ai.errors.network')
+    expect(status).not.toContain('Failed to fetch')
+  })
+
+  it('explains an error status and keeps the message of the service', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => {
+      throw Object.assign(new Error('missing or wrong API key'), { status: 401 })
+    }
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    const status = card.querySelector('.ai-status--error')!.textContent!
+    expect(status).toContain('ai.errors.auth')
+    expect(status).toContain('missing or wrong API key')
+  })
+
+  it('shows a provider error inline', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => {
+      throw new Error('Quota exceeded')
+    }
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    expect(card.querySelector('.ai-status--error')!.textContent).toContain('Quota exceeded')
+  })
+
+  it('blocks a result over the character limit', async () => {
+    const aiProvider: TiptapifyAiProvider = async () => 'x'.repeat(20)
+    const card = await openDialog({ content: '<p>Hello</p>', options: { aiProvider }, limit: 10 })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    expect(card.querySelector('.ai-status--error')!.textContent).toContain('ai.limit_exceeded')
+    expect(card.querySelector('.ai-result__counter')!.textContent).toBe('25 / 10')
+    expect(buttonWithText(card, 'ai.insert').disabled).toBe(true)
+  })
+
+  it('says when no provider is configured', async () => {
+    const card = await openDialog({ content: '<p></p>' })
+
+    expect(card.querySelector('.ai-status--warning')!.textContent).toContain('ai.unavailable')
+    expect(card.querySelector('textarea')!.disabled).toBe(true)
+  })
+
+  it('sends the configured default effort and shows the reasoning collapsed', async () => {
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async (_request, _context, stream) => {
+      stream!.onReasoning('Considering')
+      stream!.onChunk('Done')
+
+      return ''
+    })
+    const card = await openDialog({
+      content: '<p></p>',
+      options: { aiProvider, thinking: true, showReasoning: true, reasoningEffort: { options: ['low', 'high'], default: 'high' } },
+    })
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    expect(aiProvider.mock.calls[0][0]).toMatchObject({ reasoning_effort: 'high' })
+    expect(aiProvider.mock.calls[0][0]).not.toHaveProperty('enable_thinking')
+    expect(card.querySelector('.ai-reasoning__toggle')!.textContent).toContain('ai.thought_for')
+    expect(card.querySelector('.ai-reasoning__text')).toBeNull()
+
+    card.querySelector<HTMLButtonElement>('.ai-reasoning__toggle')!.click()
+    await flush()
+
+    expect(card.querySelector('.ai-reasoning__text')!.textContent).toBe('Considering')
+  })
+
+  it('turns thinking off from the one compact control', async () => {
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async () => 'Done')
+    const card = await openDialog({ content: '<p></p>', options: { aiProvider, thinking: true } })
+    const control = card.querySelector<HTMLButtonElement>('.ai-thinking')!
+
+    expect(control.textContent).toContain('ai.thinking_label.on')
+
+    control.click()
+    await flush()
+    const off = [...document.querySelectorAll<HTMLElement>('.v-list-item')].find(item => item.textContent?.includes('ai.thinking_states.off'))!
+    off.click()
+    await flush()
+
+    expect(control.textContent).toContain('ai.thinking_label.off')
+
+    await pressEnter(await typePrompt(card, 'Write'))
+
+    expect(aiProvider.mock.calls[0][0]).toMatchObject({ enable_thinking: false })
+  })
+
+  it('shows the word changes against the selection and regenerates another version', async () => {
+    let version = 0
+    const aiProvider = vi.fn<TiptapifyAiProvider>(async () => (++version === 1 ? 'Hello there' : 'Hi there'))
+    const card = await openDialog({ content: '<p>Hello world</p>', selection: { from: 1, to: 12 }, options: { aiProvider } })
+
+    await pressEnter(await typePrompt(card, 'Rewrite'))
+    buttonWithText(card, 'ai.changes').click()
+    await flush()
+
+    expect(card.querySelector('.ai-diff__delete')!.textContent).toBe('world')
+    expect(card.querySelector('.ai-diff__insert')!.textContent).toBe('there')
+
+    await typePrompt(card, 'Something else')
+    buttonWithText(card, 'ai.another_version').click()
+    await flush()
+
+    expect(aiProvider).toHaveBeenCalledTimes(2)
+    expect(aiProvider.mock.calls[1][1].prompt).toBe('Rewrite')
+    expect(card.querySelector('.ai-result__content')!.textContent).toBe('Hi there')
+  })
+})