@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Editor/AiGenerateSlideover.vue

@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+import type {
+  GenerateTextRequest,
+  GenerateTextResponse,
+  GenerateTextWidgetType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  GENERATE_TEXT_PROMPT_MIN_LENGTH,
+  GENERATE_TEXT_PROMPT_MAX_LENGTH,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { useGenerateTextMutation } from '~/queries'
+import { useAppContextStore } from '@/stores/appContext'
+
+defineOptions({
+  name: 'AiGenerateSlideover',
+})
+
+const props = defineProps<{
+  widgetType: GenerateTextWidgetType
+  context?: string
+}>()
+
+const emit = defineEmits<{
+  select: [html: string]
+}>()
+
+const { t } = useI18n()
+const appContext = useAppContextStore()
+
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const prompt = ref('')
+const suggestions = ref<string[]>([])
+const step = ref<'prompt' | 'results'>('prompt')
+const error = ref('')
+
+const { mutateAsync: generateText, isLoading } = useGenerateTextMutation()
+
+const charCount = computed(() => prompt.value.length)
+const isPromptValid = computed(
+  () =>
+    charCount.value >= GENERATE_TEXT_PROMPT_MIN_LENGTH &&
+    charCount.value <= GENERATE_TEXT_PROMPT_MAX_LENGTH,
+)
+
+function resetState() {
+  prompt.value = ''
+  suggestions.value = []
+  step.value = 'prompt'
+  error.value = ''
+}
+
+watch(isOpen, (val) => {
+  if (!val) resetState()
+})
+
+async function handleGenerate() {
+  if (!isPromptValid.value) return
+
+  error.value = ''
+  suggestions.value = []
+  step.value = 'results'
+
+  const params: GenerateTextRequest = {
+    prompt: prompt.value,
+    widgetType: props.widgetType,
+    language: appContext.mainLanguage,
+    context: props.context,
+  }
+
+  try {
+    const data = (await generateText(params)) as GenerateTextResponse
+    suggestions.value = data.suggestions ?? []
+  } catch (err) {
+    console.error(err)
+    error.value = t('editor.generate.error')
+  }
+}
+
+function handleSelect(suggestion: string) {
+  emit('select', suggestion)
+  isOpen.value = false
+}
+
+function handleCreateNew() {
+  suggestions.value = []
+  error.value = ''
+  step.value = 'prompt'
+}
+
+const widgetLabel = computed(() => {
+  const labelKeys: Record<GenerateTextWidgetType, string> = {
+    heading: 'editor.email.blocks.heading.name',
+    paragraph: 'editor.email.blocks.paragraph.name',
+    whatsapp_body: 'editor.whatsapp.body.title',
+  }
+  return t(labelKeys[props.widgetType] ?? props.widgetType)
+})
+</script>
+
+<template>
+  <USlideover
+    v-model:open="isOpen"
+    :title="widgetLabel"
+    close-icon="ph:x"
+    side="right"
+    :data-testid="aiGenerateSlideoverTestIds.slideover"
+    :close="{ 'data-testid': aiGenerateSlideoverTestIds.closeButton }"
+    :ui="{ content: 'max-w-5xl', body: 'sm:p-0 p-0', footer: 'justify-end' }"
+  >
+    <slot>
+      <UButton
+        :data-testid="aiGenerateSlideoverTestIds.openButton"
+        size="sm"
+        variant="ghost"
+        :label="$t('editor.actions.generate_text')"
+      />
+    </slot>
+    <template #body>
+      <div class="flex flex-col gap-4 p-4">
+        <h3 class="text-lg font-semibold" :data-testid="aiGenerateSlideoverTestIds.title">
+          {{ t('editor.generate.title') }}
+        </h3>
+
+        <!-- Step 1: Prompt -->
+        <template v-if="step === 'prompt'">
+          <p class="text-sm text-muted" :data-testid="aiGenerateSlideoverTestIds.description">
+            {{ t('editor.generate.description') }}
+          </p>
+
+          <UTextarea
+            v-model="prompt"
+            :placeholder="t('editor.generate.placeholder')"
+            :rows="6"
+            autoresize
+            :maxrows="10"
+            :data-testid="aiGenerateSlideoverTestIds.promptTextarea"
+          />
+
+          <div class="flex items-center justify-between">
+            <p class="text-xs text-muted" :data-testid="aiGenerateSlideoverTestIds.disclaimer">
+              {{ t('editor.generate.disclaimer') }}
+            </p>
+            <span
+              class="text-xs text-muted tabular-nums"
+              :data-testid="aiGenerateSlideoverTestIds.charCount"
+            >
+              {{ charCount }}/{{ GENERATE_TEXT_PROMPT_MAX_LENGTH }}
+            </span>
+          </div>
+
+          <!-- Error message -->
+          <UAlert
+            v-if="error"
+            color="error"
+            variant="subtle"
+            :title="error"
+            icon="i-lucide-alert-circle"
+            :data-testid="aiGenerateSlideoverTestIds.errorAlert"
+          >
+            <template #actions>
+              <UButton
+                variant="link"
+                color="error"
+                :label="t('editor.generate.retry')"
+                :data-testid="aiGenerateSlideoverTestIds.retryButton"
+                @click="handleGenerate"
+              />
+            </template>
+          </UAlert>
+
+          <div class="flex justify-end gap-2 pt-2">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :label="t('editor.generate.cancel')"
+              :data-testid="aiGenerateSlideoverTestIds.cancelButton"
+              @click="isOpen = false"
+            />
+            <UButton
+              :label="t('editor.generate.submit')"
+              :disabled="!isPromptValid || isLoading"
+              :loading="isLoading"
+              :data-testid="aiGenerateSlideoverTestIds.submitButton"
+              @click="handleGenerate"
+            />
+          </div>
+        </template>
+
+        <!-- Step 2: Results -->
+        <template v-if="step === 'results'">
+          <!-- User's request -->
+          <div :data-testid="aiGenerateSlideoverTestIds.yourRequest">
+            <p class="text-sm font-medium">
+              {{ t('editor.generate.your_request') }}
+            </p>
+            <p class="text-sm text-muted mt-1">
+              {{ prompt }}
+            </p>
+          </div>
+
+          <!-- Loading skeletons -->
+          <template v-if="isLoading">
+            <p
+              class="text-sm font-medium"
+              :data-testid="aiGenerateSlideoverTestIds.chooseOptionLabel"
+            >
+              {{ t('editor.generate.choose_option') }}
+            </p>
+            <div
+              v-for="i in 3"
+              :key="i"
+              class="rounded-lg border border-accented p-4"
+              :data-testid="aiGenerateSlideoverTestIds.skeletonCard"
+            >
+              <USkeleton class="h-4 w-full mb-2" />
+              <USkeleton class="h-4 w-3/4 mb-2" />
+              <USkeleton class="h-4 w-1/2" />
+            </div>
+          </template>
+
+          <!-- Suggestions -->
+          <template v-else-if="suggestions.length">
+            <p
+              class="text-sm font-medium"
+              :data-testid="aiGenerateSlideoverTestIds.chooseOptionLabel"
+            >
+              {{ t('editor.generate.choose_option') }}
+            </p>
+
+            <div
+              v-for="(suggestion, index) in suggestions"
+              :key="index"
+              class="rounded-lg border border-accented p-4 space-y-3"
+              :data-testid="aiGenerateSlideoverTestIds.suggestionCard"
+            >
+              <div
+                class="prose prose-sm max-w-none"
+                :data-testid="aiGenerateSlideoverTestIds.suggestionContent"
+                v-html="suggestion"
+              />
+              <div class="flex justify-end">
+                <UButton
+                  :label="t('editor.generate.use_it')"
+                  size="sm"
+                  :data-testid="aiGenerateSlideoverTestIds.useItButton"
+                  @click="handleSelect(suggestion)"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- Error in results step -->
+          <UAlert
+            v-if="error"
+            color="error"
+            variant="subtle"
+            :title="error"
+            icon="i-lucide-alert-circle"
+            :data-testid="aiGenerateSlideoverTestIds.errorAlert"
+          >
+            <template #actions>
+              <UButton
+                variant="link"
+                color="error"
+                :label="t('editor.generate.retry')"
+                :data-testid="aiGenerateSlideoverTestIds.retryButton"
+                @click="handleGenerate"
+              />
+            </template>
+          </UAlert>
+
+          <div class="flex justify-end gap-2 pt-2">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :label="t('editor.generate.cancel')"
+              :data-testid="aiGenerateSlideoverTestIds.cancelButton"
+              @click="isOpen = false"
+            />
+            <UButton
+              variant="outline"
+              :label="t('editor.generate.create_new')"
+              :data-testid="aiGenerateSlideoverTestIds.createNewButton"
+              @click="handleCreateNew"
+            />
+          </div>
+        </template>
+      </div>
+    </template>
+  </USlideover>
+</template>

package/app/components/Editor/EditorLinkPopover.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
+
+const props = defineProps<{
+  editor: Editor
+}>()
+
+const { t } = useI18n()
+const open = ref(false)
+const url = ref('')
+
+const active = computed(() => props.editor.isActive('link'))
+const disabled = computed(() => {
+  if (!props.editor.isEditable) return true
+  const { selection } = props.editor.state
+  return selection.empty && !props.editor.isActive('link')
+})
+
+watch(
+  () => props.editor,
+  (editor, _, onCleanup) => {
+    if (!editor) return
+
+    const updateUrl = () => {
+      const { href } = editor.getAttributes('link')
+      url.value = href || ''
+    }
+
+    updateUrl()
+    editor.on('selectionUpdate', updateUrl)
+
+    onCleanup(() => {
+      editor.off('selectionUpdate', updateUrl)
+    })
+  },
+  { immediate: true },
+)
+
+function setLink() {
+  if (!url.value) return
+
+  const { selection } = props.editor.state
+  const isEmpty = selection.empty
+
+  let chain = props.editor.chain().focus()
+  chain = chain.extendMarkRange('link').setLink({ href: url.value })
+
+  if (isEmpty) {
+    chain = chain.insertContent({ type: 'text', text: url.value })
+  }
+
+  chain.run()
+  open.value = false
+}
+
+function removeLink() {
+  props.editor
+    .chain()
+    .focus()
+    .extendMarkRange('link')
+    .unsetLink()
+    .setMeta('preventAutolink', true)
+    .run()
+
+  url.value = ''
+  open.value = false
+}
+
+function openLink() {
+  if (!url.value) return
+  window.open(url.value, '_blank', 'noopener,noreferrer')
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    setLink()
+  }
+}
+</script>
+
+<template>
+  <UPopover
+    v-model:open="open"
+    :ui="{ content: 'p-0.5' }"
+    :data-testid="editorLinkPopoverTestIds.popover"
+  >
+    <UTooltip :text="t('editor.toolbar.link')">
+      <UButton
+        icon="ph:link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+        :data-testid="editorLinkPopoverTestIds.triggerButton"
+      />
+    </UTooltip>
+
+    <template #content>
+      <UInput
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        :placeholder="t('editor.toolbar.link_placeholder')"
+        class="w-64"
+        :data-testid="editorLinkPopoverTestIds.urlInput"
+        @keydown="handleKeyDown"
+      >
+        <template #trailing>
+          <div class="flex items-center">
+            <UButton
+              icon="ph:arrow-elbow-down-left"
+              variant="ghost"
+              size="xs"
+              :disabled="!url && !active"
+              :title="t('editor.toolbar.link_apply')"
+              :data-testid="editorLinkPopoverTestIds.applyButton"
+              @click="setLink"
+            />
+
+            <USeparator orientation="vertical" class="h-4 mx-0.5" />
+
+            <UButton
+              icon="ph:arrow-square-out"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :disabled="!url && !active"
+              :title="t('editor.toolbar.link_open')"
+              :data-testid="editorLinkPopoverTestIds.openButton"
+              @click="openLink"
+            />
+
+            <UButton
+              icon="ph:trash"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :disabled="!url && !active"
+              :title="t('editor.toolbar.link_remove')"
+              :data-testid="editorLinkPopoverTestIds.removeButton"
+              @click="removeLink"
+            />
+          </div>
+        </template>
+      </UInput>
+    </template>
+  </UPopover>
+</template>