tiptapify 0.2.5 → 0.3.0

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.3.0",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Footer.vue

@@ -57,7 +57,7 @@ function showFooter() {
     <VRow>
       <VCol class="d-flex align-center" :class="`justify-${alignment}`">
         <template v-if="limit > 0">
-          <VTooltip>
+          <VTooltip :open-delay="1500">
             <template #default>
               <span v-html="limitText" />
             </template>

package/src/components/Tiptapify.vue

@@ -3,23 +3,26 @@
 import defaults from '@tiptapify/constants/defaults'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
-import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
+import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, toRef } 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 { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+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 +51,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 +86,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 +121,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,11 +137,13 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     },
 )
 
-const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
-
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
+provide(TIPTAPIFY_CONFIG_KEY, {
+  variantBtn: toRef(props, 'variantBtn'),
+  variantField: toRef(props, 'variantField'),
+})
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
@@ -145,7 +167,6 @@ onBeforeUnmount(() => {
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
-          :variant-btn="variantBtn"
           :variant-field="variantField"
           :font-measure="fontMeasure"
           :items="items"

package/src/components/Toolbar/Index.vue

@@ -2,14 +2,13 @@
 import { Editor } from '@tiptap/vue-3'
 import Items from '@tiptapify/components/Toolbar/Items.vue'
 import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { variantFieldTypes } from '@tiptapify/types/editor'
 import { computed, inject, PropType, Ref } from 'vue'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 import { default as toolbarItemsGroups, availableItems } from '@tiptapify/components/Toolbar/items'
 
 const props = defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
   items: { type: [Array, Object] as PropType<itemsPropType>, default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
@@ -178,10 +177,10 @@ Object.keys(props.customExtensions).forEach((key: any) => {
   <div v-if="editor" class="tiptapify-toolbar">
     <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
       <VSlideGroup v-if="toolbarScrollable">
-        <Items :items="toolbarItems" :variant-btn="variantBtn" />
+        <Items :items="toolbarItems" />
       </VSlideGroup>
 
-      <Items v-else :items="toolbarItems" :variant-btn="variantBtn" />
+      <Items v-else :items="toolbarItems" />
     </VToolbar>
   </div>
 </template>

package/src/components/Toolbar/Items.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 
-import defaults from '@tiptapify/constants/defaults'
-import { variantBtnTypes } from '@tiptapify/types/editor'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { PropType } from 'vue'
 
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   items: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
+const { variantBtn } = useTiptapifyConfig()
+
 </script>
 
 <template>

package/src/components/UI/HotkeyTooltip.test.ts

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import HotkeyTooltip from './HotkeyTooltip.vue'
+
+const MAC_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
+const WIN_UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
+
+function mockUserAgent (userAgent: string) {
+  Object.defineProperty(window.navigator, 'userAgent', {
+    value: userAgent,
+    configurable: true,
+  })
+}
+
+function renderTooltip (label: string, hotkey: string): Promise<string> {
+  const app = createSSRApp({
+    render: () => h(HotkeyTooltip, { label, hotkey })
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('HotkeyTooltip', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('renders label and spelled-out hotkey on two lines on Windows', async () => {
+    mockUserAgent(WIN_UA)
+    const html = await renderTooltip('Bold', 'Mod-Shift-b')
+
+    expect(html).toContain('t-hotkey-tooltip__label')
+    expect(html).toContain('t-hotkey-tooltip__hotkey')
+    expect(html).toContain('Bold')
+    expect(html).toContain('Ctrl')
+    expect(html).toContain('Shift')
+    expect(html).toContain('>B</span>')
+    expect(html).not.toContain('mdiSvg:')
+  })
+
+  it('renders the hotkey with icons on macOS without spelled-out names', async () => {
+    mockUserAgent(MAC_UA)
+    const html = await renderTooltip('Heading', 'Mod-Alt-1..6')
+
+    expect(html).toContain('t-hotkey-tooltip__label')
+    expect(html).toContain('t-hotkey-tooltip__hotkey')
+    expect(html).toContain('Heading')
+    expect(html).toContain('mdiSvg:')
+    expect(html).toContain('1–6')
+    expect(html).not.toContain('Ctrl')
+    expect(html).not.toContain('>Command<')
+    expect(html).not.toContain('>Option<')
+  })
+
+  it('renders Enter as an icon on macOS', async () => {
+    mockUserAgent(MAC_UA)
+    const html = await renderTooltip('Hard break', 'Mod-Enter')
+
+    expect(html).toContain('mdiSvg:')
+    expect(html).not.toContain('>Enter<')
+  })
+})

package/src/components/UI/HotkeyTooltip.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import { hotkeyParts } from '@tiptapify/utils/hotkeys'
+
+const props = defineProps({
+  label: { type: String, required: true },
+  hotkey: { type: String, required: true },
+})
+
+const parts = computed(() => hotkeyParts(props.hotkey))
+
+</script>
+
+<template>
+  <span class="t-hotkey-tooltip">
+    <span class="t-hotkey-tooltip__label">{{ label }}</span>
+    <span class="t-hotkey-tooltip__hotkey">
+      <template v-for="(part, index) in parts" :key="index">
+        <span v-if="index" class="t-hotkey-sep">+</span>
+        <VIcon v-if="part.icon" :icon="part.icon" size="12" class="t-hotkey-icon" />
+        <span v-else>{{ part.label }}</span>
+      </template>
+    </span>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.t-hotkey-tooltip {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px 0;
+  white-space: nowrap;
+}
+
+.t-hotkey-tooltip__hotkey {
+  align-items: center;
+  background: rgba(127, 127, 127, .2);
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 4px;
+  display: inline-flex;
+  font-family: 'JetBrainsMono', ui-monospace, Menlo, Consolas, monospace;
+  font-size: 11px;
+  gap: 4px;
+  letter-spacing: .03em;
+  padding: 3px 6px;
+
+  .t-hotkey-icon {
+    font-size: 12px;
+  }
+}
+</style>

package/src/components/UI/Tooltip.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import HotkeyTooltip from '@tiptapify/components/UI/HotkeyTooltip.vue'
+
+defineProps({
+  label: { type: String, default: '' },
+  hotkey: { type: String, default: '' },
+  openDelay: { type: Number, default: 500 },
+})
+
+</script>
+
+<template>
+  <VTooltip activator="parent" :open-delay="openDelay">
+    <HotkeyTooltip v-if="hotkey" :label="label" :hotkey="hotkey" />
+    <slot v-else>
+      {{ label }}
+    </slot>
+  </VTooltip>
+</template>

package/src/composables/useTiptapifyConfig.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { createSSRApp, h, provide, ref } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { createVuetify } from 'vuetify'
+import BoldButton from '@tiptapify/extensions/components/format/bold/Button.vue'
+import { TIPTAPIFY_CONFIG_KEY, useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+
+const editor = {
+  isActive: () => false,
+  can: () => ({ chain: () => ({ focus: () => ({ toggleBold: () => ({ run: () => false }) }) }) }),
+  commands: { toggleBold: () => {} },
+}
+
+const Consumer = {
+  setup () {
+    const { variantBtn, variantField } = useTiptapifyConfig()
+    return () => h('span', [
+      h('span', { id: 'variant-btn' }, variantBtn.value),
+      h('span', { id: 'variant-field' }, variantField.value),
+    ])
+  },
+}
+
+function render (root: () => any, withConfig: boolean) {
+  const app = createSSRApp({
+    setup () {
+      if (withConfig) {
+        provide(TIPTAPIFY_CONFIG_KEY, {
+          variantBtn: ref('tonal'),
+          variantField: ref('outlined'),
+        })
+      }
+      provide('tiptapifyEditor', ref(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      return root
+    },
+  })
+  app.use(createVuetify())
+
+  return renderToString(app)
+}
+
+describe('useTiptapifyConfig', () => {
+  it('exposes provided config values', async () => {
+    const html = await render(() => h(Consumer), true)
+
+    expect(html).toContain('<span id="variant-btn">tonal</span>')
+    expect(html).toContain('<span id="variant-field">outlined</span>')
+  })
+
+  it('falls back to defaults when no provider is present', async () => {
+    const html = await render(() => h(Consumer), false)
+
+    expect(html).toContain('<span id="variant-btn">flat</span>')
+    expect(html).toContain('<span id="variant-field">solo</span>')
+  })
+
+  it('is consumed by toolbar extension buttons', async () => {
+    const custom = await render(() => h(BoldButton), true)
+    const fallback = await render(() => h(BoldButton), false)
+
+    expect(custom).toContain('tonal')
+    expect(fallback).toContain('flat')
+    expect(custom).not.toEqual(fallback)
+  })
+})

package/src/composables/useTiptapifyConfig.ts

@@ -0,0 +1,17 @@
+import { computed, inject, InjectionKey, Ref } from 'vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+
+export interface TiptapifyConfig {
+  variantBtn: Ref<variantBtnTypes>
+  variantField: Ref<variantFieldTypes>
+}
+
+export const TIPTAPIFY_CONFIG_KEY: InjectionKey<TiptapifyConfig> = Symbol('tiptapifyConfig')
+
+export function useTiptapifyConfig(): TiptapifyConfig {
+  return inject(TIPTAPIFY_CONFIG_KEY, {
+    variantBtn: computed(() => defaults.variantBtn),
+    variantField: computed(() => defaults.variantField),
+  })
+}

package/src/constants/defaults.ts

@@ -1,4 +1,6 @@
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+
 export default {
-  variantBtn: 'flat',
-  variantField: 'solo',
+  variantBtn: 'flat' as variantBtnTypes,
+  variantField: 'solo' as variantFieldTypes,
 }

package/src/extensions/components/actions/redo/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().redo().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('action.redo') }}
-    </VTooltip>
+    <Tooltip :label="t('action.redo')" hotkey="Mod-Shift-z" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiRedo}`" />
   </VBtn>
 </template>

package/src/extensions/components/actions/undo/Button.vue

@@ -3,15 +3,13 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
-import { variantBtnTypes } from '@tiptapify/types/editor'
-import { inject, PropType, Ref } from 'vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, Ref } from 'vue'
 
-import defaults from '@tiptapify/constants/defaults'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -27,9 +25,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     :variant="variantBtn"
     @click="editor.chain().focus().undo().run()"
   >
-    <VTooltip activator="parent">
-      {{ t('action.undo') }}
-    </VTooltip>
+    <Tooltip :label="t('action.undo')" hotkey="Mod-z" />
     <BtnIcon :icon="`mdiSvg:${mdi.mdiUndo}`" />
   </VBtn>
 </template>

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

@@ -2,15 +2,14 @@
 
 import * as mdi from '@mdi/js'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import AiDialog from '@tiptapify/extensions/components/ai/Dialog.vue'
-import defaults from '@tiptapify/constants/defaults'
-import { TiptapifyAiResolvedOptions, variantBtnTypes } from '@tiptapify/types/editor'
-import { computed, ComputedRef, inject, PropType, useTemplateRef } from 'vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { TiptapifyAiResolvedOptions } from '@tiptapify/types/editor'
+import { computed, ComputedRef, inject, useTemplateRef } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
-defineProps({
-  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
-})
+const { variantBtn } = useTiptapifyConfig()
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
@@ -32,11 +31,9 @@ function showDialog() {
 
 <template>
   <VBtn color="" :variant="variantBtn" size="32" :disabled="!isAvailable" @click="showDialog">
-    <VTooltip activator="parent">
-      {{ isAvailable ? t('ai.title') : t('ai.unavailable') }}
-    </VTooltip>
+    <Tooltip :label="isAvailable ? t('ai.title') : t('ai.unavailable')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <AiDialog ref="dialog" :variant-btn="variantBtn" />
+  <AiDialog ref="dialog" />
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
-import defaults from '@tiptapify/constants/defaults'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import {
   TiptapifyAiEditorContext,
   TiptapifyAiMode,
@@ -11,19 +11,15 @@ import {
   TiptapifyAiResponse,
   TiptapifyAiResolvedOptions,
   TiptapifyAiStream,
-  TiptapifyEditor,
-  variantBtnTypes,
-  variantFieldTypes
+  TiptapifyEditor
 } from '@tiptapify/types/editor'
-import { computed, ComputedRef, inject, nextTick, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
+import { computed, ComputedRef, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue'
 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 } },
-  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
-})
+const { variantBtn, variantField } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
 const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
@@ -180,7 +176,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 +528,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;