tiptapify 0.2.5 → 0.2.6

package/index.d.ts

@@ -135,6 +135,23 @@ export type TiptapifyAiProvider = (
 
 export type TiptapifyAiTokenProvider = () => Promise<string | null> | string | null
 
+export interface TiptapifyAiBackendRequest {
+  prompt: string
+  instruction: string
+  stream?: boolean
+  thinking?: boolean
+  reasoning_effort?: TiptapifyAiReasoningEffort
+  model?: string
+}
+
+export interface TiptapifyAiBackendProviderOptions {
+  endpoint: string
+  headers?: Record<string, string>
+  tokenProvider?: TiptapifyAiTokenProvider
+}
+
+export declare function createAiBackendProvider(options: TiptapifyAiBackendProviderOptions): TiptapifyAiProvider
+
 export interface TiptapifyAiStorage {
   getItem: (key: string) => string | null | Promise<string | null>
   setItem: (key: string, value: string) => void | Promise<void>
@@ -143,6 +160,8 @@ export interface TiptapifyAiStorage {
 
 export interface TiptapifyAiOptions {
   aiProvider?: TiptapifyAiProvider
+  aiEndpoint?: string
+  aiHeaders?: Record<string, string>
   model?: string
   promptExamples?: TiptapifyAiPromptExample[]
   mode?: TiptapifyAiMode

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Tiptapify.vue

@@ -6,20 +6,22 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { TiptapifyAiOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyAiOptions, TiptapifyAiResolvedOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
 import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
+import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from 'vuetify/framework'
 
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
-  content: { type: [String, Object] as PropType<string | Record<string, never>>, required: true },
+  content: { type: [String, Object] as PropType<string | Record<string, never>>, default () { return '' } },
+  modelValue: { type: [String, Object] as PropType<string | Record<string, never>>, default () { return '' } },
   height: { type: [Number, String], default () { return null } },
   variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
@@ -48,12 +50,14 @@ const props = defineProps({
   loadingHeight: { type: String, default() { return '1px' } },
 })
 
+const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
+
 const loadingProgress = ref(0)
 
 const { t } = useI18n()
 
 const appTheme = useTheme()
-const currentTheme = ref(appTheme.global.name)
+const currentTheme = computed(() => appTheme.name.value)
 
 const defaultAiPromptExamples = computed(() => [
   {
@@ -81,15 +85,30 @@ const tiptapifyAi = computed(() => {
 
   const options = props.ai === true ? {} : props.ai
 
-  return {
+  const resolved: TiptapifyAiResolvedOptions = {
     ...options,
     enabled: true,
     promptExamples: options.promptExamples?.length ? options.promptExamples : defaultAiPromptExamples.value,
   }
+
+  // Backend generation: when no `aiProvider` is given but an `aiEndpoint`
+  // is set, synthesize a provider that posts the request to the endpoint.
+  // An explicit `aiProvider` always wins.
+  if (!resolved.aiProvider && resolved.aiEndpoint) {
+    resolved.aiProvider = createAiBackendProvider({
+      endpoint: resolved.aiEndpoint,
+      headers: resolved.aiHeaders,
+      tokenProvider: resolved.tokenProvider,
+    })
+  }
+
+  return resolved
 })
 
 function contentChanged() {
-  emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
+  const html = editor.value?.getHTML() ?? ''
+  emit('update:modelValue', html)
+  emit('content-changed', { html, json: editor.value?.getJSON() })
 }
 
 function onContainerClick(event: MouseEvent) {
@@ -101,7 +120,7 @@ function onContainerClick(event: MouseEvent) {
 }
 
 const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
-    props.content,
+    props.content || props.modelValue,
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
     props.customExtensions,
@@ -117,8 +136,6 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     },
 )
 
-const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
-
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)

package/src/extensions/components/ai/Dialog.vue

@@ -19,6 +19,7 @@ import { computed, ComputedRef, inject, nextTick, PropType, Ref, ref, useTemplat
 import * as mdi from '@mdi/js'
 import { ComposerTranslation } from 'vue-i18n'
 import { exceedsLimit } from './charLimit'
+import { DEFAULT_AI_INSTRUCTION } from './backend'
 
 defineProps({
   variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
@@ -180,7 +181,7 @@ function getSelectedText(from: number, to: number) {
 function buildDefaultMessages(context: TiptapifyAiEditorContext) {
   const systemPrompt = ai.value && ai.value.systemPrompt
     ? ai.value.systemPrompt
-    : 'You are an AI writing assistant inside a rich text editor. Return only the final text to insert.'
+    : DEFAULT_AI_INSTRUCTION
   const contextText = context.selectedText || context.text
   const contextLabel = context.selectedText ? 'Selected text' : 'Editor text'
 
@@ -532,19 +533,19 @@ function apply() {
 
 .ai-reasoning {
   :deep(.v-expansion-panel-title) {
-    color: var(--gray-5);
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
     font-size: .8125rem;
     font-weight: 500;
     padding: .625rem .75rem;
   }
 
   :deep(.v-expansion-panel-title__icon) {
-    color: var(--gray-4);
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
   }
 }
 
 .ai-reasoning__text {
-  color: var(--gray-5);
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-family: 'JetBrainsMono', monospace;
   font-size: .75rem;
   line-height: 1.4;

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

@@ -0,0 +1,314 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { TiptapifyAiEditorContext, TiptapifyAiRequest, TiptapifyAiStream } from '@tiptapify/types/editor'
+
+import { buildAiBackendRequest, createAiBackendProvider, DEFAULT_AI_INSTRUCTION } from './backend'
+
+function createContext(overrides: Partial<TiptapifyAiEditorContext> = {}): TiptapifyAiEditorContext {
+  return {
+    prompt: 'Improve this text',
+    selectedText: '',
+    text: '',
+    html: '',
+    json: {},
+    mode: 'insert',
+    ...overrides,
+  }
+}
+
+function createRequest(overrides: Partial<TiptapifyAiRequest> = {}): TiptapifyAiRequest {
+  return {
+    messages: [
+      { role: 'system', content: 'Be concise' },
+      { role: 'user', content: 'Improve this text' },
+    ],
+    ...overrides,
+  }
+}
+
+function createStream() {
+  const controller = new AbortController()
+  const chunks: string[] = []
+  const reasoning: string[] = []
+
+  const stream: TiptapifyAiStream = {
+    signal: controller.signal,
+    onChunk: (chunk: string) => chunks.push(chunk),
+    onReasoning: (chunk: string) => reasoning.push(chunk),
+  }
+
+  return { stream, chunks, reasoning, controller }
+}
+
+function createSseBody(lines: string[], { failAfter = -1 } = {}) {
+  let index = 0
+
+  return {
+    getReader() {
+      return {
+        async read() {
+          if (failAfter >= 0 && index > failAfter) {
+            throw new DOMException('The operation was aborted', 'AbortError')
+          }
+
+          index += 1
+
+          if (index <= lines.length) {
+            return { done: false, value: new TextEncoder().encode(lines[index - 1]) }
+          }
+
+          return { done: true, value: undefined }
+        },
+      }
+    },
+  } as unknown as ReadableStream<Uint8Array>
+}
+
+function createResponse(init: { status?: number, body?: string, sse?: string[], sseFailAfter?: number } = {}) {
+  const status = init.status ?? 200
+
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    body: init.sse ? createSseBody(init.sse, { failAfter: init.sseFailAfter }) : null,
+    text: async () => (init.body ?? ''),
+  } as unknown as Response
+}
+
+let fetchCalls: Array<{ url: string, init: RequestInit | undefined }>
+let responseToReturn: Response | null
+
+beforeEach(() => {
+  fetchCalls = []
+  responseToReturn = null
+
+  vi.stubGlobal('fetch', vi.fn(async (url: string, init: RequestInit) => {
+    fetchCalls.push({ url, init })
+
+    return responseToReturn as Response
+  }))
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('buildAiBackendRequest', () => {
+  it('always sends prompt and instruction', () => {
+    const payload = buildAiBackendRequest(createRequest(), createContext())
+
+    expect(payload).toEqual({
+      prompt: 'Improve this text',
+      instruction: 'Be concise',
+    })
+  })
+
+  it('falls back to the default instruction when there is no system message', () => {
+    const request = createRequest({ messages: [{ role: 'user', content: 'x' }] })
+
+    expect(buildAiBackendRequest(request, createContext()).instruction).toBe(DEFAULT_AI_INSTRUCTION)
+  })
+
+  it('sends optional fields only when they are set', () => {
+    const payload = buildAiBackendRequest(
+      createRequest({ model: 'gpt-4.1-mini', stream: true, enable_thinking: true, reasoning_effort: 'high' }),
+      createContext(),
+    )
+
+    expect(payload).toEqual({
+      prompt: 'Improve this text',
+      instruction: 'Be concise',
+      model: 'gpt-4.1-mini',
+      stream: true,
+      thinking: true,
+      reasoning_effort: 'high',
+    })
+  })
+
+  it('omits thinking when it is not enabled', () => {
+    const payload = buildAiBackendRequest(createRequest({ enable_thinking: false }), createContext())
+
+    expect(payload.thinking).toBeUndefined()
+  })
+
+  it('omits reasoning_effort for default or non-string values', () => {
+    expect(buildAiBackendRequest(createRequest({ reasoning_effort: 'default' }), createContext()).reasoning_effort).toBeUndefined()
+    expect(buildAiBackendRequest(createRequest({ reasoning_effort: 5 }), createContext()).reasoning_effort).toBeUndefined()
+  })
+})
+
+describe('createAiBackendProvider', () => {
+  it('posts the minimal payload as JSON to the endpoint', async () => {
+    responseToReturn = createResponse({ body: JSON.stringify({ content: 'Done' }) })
+    const provider = createAiBackendProvider({ endpoint: '/api/ai/generate' })
+
+    await provider(createRequest({ model: 'gpt-4.1-mini', stream: true }), createContext())
+
+    expect(fetchCalls).toHaveLength(1)
+    expect(fetchCalls[0].url).toBe('/api/ai/generate')
+    const init = fetchCalls[0].init as RequestInit
+
+    expect(init.method).toBe('POST')
+    expect((init.headers as Record<string, string>)['Content-Type']).toBe('application/json')
+    expect(JSON.parse(init.body as string)).toEqual({
+      prompt: 'Improve this text',
+      instruction: 'Be concise',
+      model: 'gpt-4.1-mini',
+      stream: true,
+    })
+  })
+
+  it('returns a JSON response body', async () => {
+    responseToReturn = createResponse({ body: JSON.stringify({ content: 'Done' }) })
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest(), createContext())
+
+    expect(result).toEqual({ content: 'Done' })
+  })
+
+  it('returns a plain text response body', async () => {
+    responseToReturn = createResponse({ body: 'Plain answer' })
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest(), createContext())
+
+    expect(result).toBe('Plain answer')
+  })
+
+  it('throws the backend error message on a non-OK response', async () => {
+    responseToReturn = createResponse({ status: 500, body: JSON.stringify({ error: 'Model is busy' }) })
+    const provider = createAiBackendProvider({ endpoint: '/api' })
+
+    await expect(provider(createRequest(), createContext())).rejects.toThrow('Model is busy')
+  })
+
+  it('throws a status error when the error body is not JSON', async () => {
+    responseToReturn = createResponse({ status: 502 })
+    const provider = createAiBackendProvider({ endpoint: '/api' })
+
+    await expect(provider(createRequest(), createContext())).rejects.toThrow('Request failed with status 502')
+  })
+
+  it('sends static headers and the tokenProvider token as Bearer', async () => {
+    responseToReturn = createResponse({ body: 'ok' })
+    const provider = createAiBackendProvider({
+      endpoint: '/api',
+      headers: { 'X-Api-Key': 'key' },
+      tokenProvider: () => 'secret',
+    })
+
+    await provider(createRequest(), createContext())
+    const headers = (fetchCalls[0].init as RequestInit).headers as Record<string, string>
+
+    expect(headers['Content-Type']).toBe('application/json')
+    expect(headers['X-Api-Key']).toBe('key')
+    expect(headers.Authorization).toBe('Bearer secret')
+  })
+
+  it('keeps a static Authorization header over the tokenProvider token', async () => {
+    responseToReturn = createResponse({ body: 'ok' })
+    const provider = createAiBackendProvider({
+      endpoint: '/api',
+      headers: { Authorization: 'Token abc' },
+      tokenProvider: () => 'secret',
+    })
+
+    await provider(createRequest(), createContext())
+    const headers = (fetchCalls[0].init as RequestInit).headers as Record<string, string>
+
+    expect(headers.Authorization).toBe('Token abc')
+  })
+
+  it('streams OpenAI-style SSE deltas into onChunk/onReasoning', async () => {
+    responseToReturn = createResponse({
+      sse: [
+        'data: {"choices":[{"delta":{"reasoning_content":"Let me"}}]}\n',
+        'data: {"choices":[{"delta":{"reasoning_content":" think"}}]}\n',
+        'data: {"choices":[{"delta":{"content":"Hello"}}]}\n',
+        'data: {"choices":[{"delta":{"content":" world"}}]}\n',
+        'data: [DONE]\n',
+      ],
+    })
+    const { stream, chunks, reasoning } = createStream()
+    const provider = createAiBackendProvider({ endpoint: '/api' })
+    const result = await provider(createRequest({ stream: true }), createContext(), stream)
+
+    expect(chunks).toEqual(['Hello', ' world'])
+    expect(reasoning).toEqual(['Let me', ' think'])
+    expect(result).toEqual({ content: 'Hello world' })
+    expect((fetchCalls[0].init as RequestInit).signal).toBe(stream.signal)
+  })
+
+  it('accepts the simple { type, data } chunk format', async () => {
+    responseToReturn = createResponse({
+      sse: [
+        'data: {"type":"reasoning","data":"plan"}\n',
+        'data: {"type":"content","data":"One "}\n',
+        'data: {"type":"content","data":"two"}\n',
+      ],
+    })
+    const { stream, chunks, reasoning } = createStream()
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest({ stream: true }), createContext(), stream)
+
+    expect(chunks).toEqual(['One ', 'two'])
+    expect(reasoning).toEqual(['plan'])
+    expect(result).toEqual({ content: 'One two' })
+  })
+
+  it('treats plain-text data lines as content chunks', async () => {
+    responseToReturn = createResponse({
+      sse: [
+        'data: Hello \n',
+        'data: world\n',
+      ],
+    })
+    const { stream, chunks } = createStream()
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest({ stream: true }), createContext(), stream)
+
+    expect(chunks).toEqual(['Hello ', 'world'])
+    expect(result).toEqual({ content: 'Hello world' })
+  })
+
+  it('reassembles chunks split across reader reads', async () => {
+    responseToReturn = createResponse({
+      sse: [
+        'data: {"choices":[{"delta":{"conte',
+        'nt":"Hel"}}]}\n',
+        'data: {"choices":[{"delta":{"content":"lo"}}]}\n',
+        'data: [DONE]\n',
+      ],
+    })
+    const { stream, chunks } = createStream()
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest({ stream: true }), createContext(), stream)
+
+    expect(chunks).toEqual(['Hel', 'lo'])
+    expect(result).toEqual({ content: 'Hello' })
+  })
+
+  it('keeps partially streamed content when the request is aborted', async () => {
+    responseToReturn = createResponse({ sse: ['data: {"choices":[{"delta":{"content":"Part"}}]}\n'], sseFailAfter: 0 })
+    const { stream, chunks } = createStream()
+    const provider = createAiBackendProvider({ endpoint: '/api' })
+    const result = await provider(createRequest({ stream: true }), createContext(), stream)
+
+    expect(chunks).toEqual(['Part'])
+    expect(result).toEqual({ content: 'Part' })
+  })
+
+  it('falls back to a plain body when the backend ignores stream', async () => {
+    responseToReturn = createResponse({ sse: ['{"content":"Full answer"}\n'] })
+    const { stream } = createStream()
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest({ stream: true }), createContext(), stream)
+
+    expect(result).toEqual({ content: 'Full answer' })
+  })
+
+  it('returns empty content when only reasoning was streamed', async () => {
+    responseToReturn = createResponse({
+      sse: [
+        'data: {"choices":[{"delta":{"reasoning_content":"think"}}]}\n',
+        'data: [DONE]\n',
+      ],
+    })
+    const { stream } = createStream()
+    const result = await createAiBackendProvider({ endpoint: '/api' })(createRequest({ stream: true }), createContext(), stream)
+
+    expect(result).toEqual({ content: '' })
+  })
+})