@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/.playground/pages/utilities/popup-chat.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="min-h-screen">
+    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
+      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Popup Chat</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Proactive chat popup to engage visitors.</p>
+    </div>
+
+    <div class="p-8 space-y-12">
+      <!-- Demo -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Demo</h2>
+        <p class="text-sm text-neutral-500 mb-4">Click to show the chat popup in the bottom-right corner</p>
+        <div class="flex gap-3">
+          <UButton @click="showChat = true">Show Chat Popup</UButton>
+          <UButton color="neutral" variant="outline" @click="showWithAction = true">With Action Button</UButton>
+        </div>
+      </section>
+
+      <!-- Preview -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Preview</h2>
+        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-8">
+          <div class="max-w-sm ml-auto">
+            <div class="xGlass rounded-2xl p-4 shadow-xl relative">
+              <button class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5">
+                <UIcon name="i-lucide-x" class="w-4 h-4 text-neutral-400" />
+              </button>
+              <div class="flex gap-3">
+                <img
+                  src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+                  alt="Support"
+                  class="w-12 h-12 rounded-full object-cover"
+                />
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-1">
+                    <span class="font-medium text-neutral-900 dark:text-white">Sarah</span>
+                    <span class="w-2 h-2 rounded-full bg-green-500" />
+                  </div>
+                  <p class="text-sm text-neutral-600 dark:text-neutral-400">
+                    Hi there! Need help finding something?
+                  </p>
+                  <UButton size="sm" class="mt-3">Start Chat</UButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Without Avatar -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Without Avatar</h2>
+        <p class="text-sm text-neutral-500 mb-4">Falls back to initial when no avatar is provided</p>
+        <UButton @click="showNoAvatar = true">Show Without Avatar</UButton>
+      </section>
+
+      <!-- Auto-dismiss -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Auto-dismiss</h2>
+        <p class="text-sm text-neutral-500 mb-4">Set autoDismiss to automatically close after a duration</p>
+        <UButton @click="showAutoDismiss = true">Show (Auto-closes in 5s)</UButton>
+      </section>
+
+      <!-- Props -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Props</h2>
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-neutral-200 dark:border-neutral-700">
+              <th class="text-left py-3 px-4">Prop</th>
+              <th class="text-left py-3 px-4">Type</th>
+              <th class="text-left py-3 px-4">Default</th>
+              <th class="text-left py-3 px-4">Description</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
+            <tr><td class="py-3 px-4 font-mono text-xs">v-model</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Visibility control</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">name</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Person or bot name</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">message</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Chat message text</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">avatar</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Avatar image URL</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">online</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show online indicator</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">actionText</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">CTA button text</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">delay</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">3000</td><td class="py-3 px-4">Delay before showing (ms)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">autoDismiss</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">0</td><td class="py-3 px-4">Auto-close after ms (0 = never)</td></tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Events -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Events</h2>
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-neutral-200 dark:border-neutral-700">
+              <th class="text-left py-3 px-4">Event</th>
+              <th class="text-left py-3 px-4">Description</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
+            <tr><td class="py-3 px-4 font-mono text-xs">@action</td><td class="py-3 px-4">Emitted when action button is clicked</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">@dismiss</td><td class="py-3 px-4">Emitted when popup is closed</td></tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Code Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Popup Chat Usage" :code="codeExample" />
+      </section>
+
+      <!-- Use Cases -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Common Use Cases</h2>
+        <div class="grid md:grid-cols-2 gap-4">
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
+            <h3 class="font-medium mb-2">Proactive Support</h3>
+            <p class="text-sm text-neutral-500">Offer help after user has been on page for a while</p>
+          </div>
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
+            <h3 class="font-medium mb-2">Lead Capture</h3>
+            <p class="text-sm text-neutral-500">Encourage visitors to start a conversation</p>
+          </div>
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
+            <h3 class="font-medium mb-2">Exit Intent</h3>
+            <p class="text-sm text-neutral-500">Show when user is about to leave the page</p>
+          </div>
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
+            <h3 class="font-medium mb-2">Sales Outreach</h3>
+            <p class="text-sm text-neutral-500">Connect pricing page visitors with sales team</p>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- Actual Components -->
+    <XMarkModalChat
+      v-model="showChat"
+      name="Sarah"
+      message="Hi there! Need help finding something?"
+      avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+      :delay="0"
+      @dismiss="showChat = false"
+    />
+
+    <XMarkModalChat
+      v-model="showWithAction"
+      name="Alex"
+      message="Have a question about our pricing? I'm here to help!"
+      avatar="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
+      action-text="Start Chat"
+      :delay="0"
+      @action="handleAction"
+      @dismiss="showWithAction = false"
+    />
+
+    <XMarkModalChat
+      v-model="showNoAvatar"
+      name="Support Bot"
+      message="Hello! I'm an AI assistant. How can I help you today?"
+      :delay="0"
+      @dismiss="showNoAvatar = false"
+    />
+
+    <XMarkModalChat
+      v-model="showAutoDismiss"
+      name="Quick Tip"
+      message="Did you know? You can use keyboard shortcuts to navigate faster!"
+      :delay="0"
+      :auto-dismiss="5000"
+      @dismiss="showAutoDismiss = false"
+    />
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<XMarkModalChat
+  v-model="showChat"
+  name="Sarah"
+  message="Hi there! Need help finding something?"
+  avatar="/images/support-avatar.jpg"
+  action-text="Start Chat"
+  :delay="5000"
+  @action="openChatWidget"
+  @dismiss="showChat = false"
+/>
+
+<!-- Auto-show after delay -->
+<script setup>
+const showChat = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    showChat.value = true
+  }, 10000)
+})
+<\/script>
+
+<!-- Without avatar (shows initial) -->
+<XMarkModalChat
+  v-model="showBot"
+  name="Support Bot"
+  message="Hello! How can I help?"
+  :online="false"
+/>
+
+<!-- Auto-dismiss after 5 seconds -->
+<XMarkModalChat
+  v-model="showTip"
+  name="Quick Tip"
+  message="Use keyboard shortcuts!"
+  :auto-dismiss="5000"
+/>`
+
+const showChat = ref(false)
+const showWithAction = ref(false)
+const showNoAvatar = ref(false)
+const showAutoDismiss = ref(false)
+
+const handleAction = () => {
+  console.log('Chat action clicked')
+  showWithAction.value = false
+}
+</script>