Live Demo

This page demonstrates the Vue Sidekick Chat components in action.

Token Setup

To test the chat functionality, you'll need to provide an authentication token:

Token:

💡 Tip: Enter valid token (e.g., eyJhbGc...)

SidekickChat Component

The full chat interface component:

SidekickChatPlugin Component

The floating chat widget appears in the bottom-right corner of this page. Look for the blue chat button!

Shared State

Both components share the same chat state. Try sending a message in the full chat interface above, then open the floating widget - you'll see the same messages!

How to Test

1. Set Token: Enter a token in the input field above and click "Set Token"
2. Authentication: The components will automatically authenticate with the provided token
3. Send Messages: Type a message and press Enter or click the send button
4. Shared State: Notice how messages appear in both components
5. Floating Widget: Use the floating chat button to toggle the widget
6. Responsive: Try resizing your browser window

Code Example

Here's how you would use these components in your Vue application:

<template>
  <div>
    <!-- Token input for authentication -->
    <div class="mb-4 p-4 bg-gray-50 rounded-lg">
      <div class="flex gap-2 items-center mb-2">
        <label for="token-input" class="font-medium">Token:</label>
        <input
          id="token-input"
          v-model="token"
          placeholder="Enter token"
          class="flex-1 px-3 py-2 border rounded-md"
        />
        <button
          @click="setToken"
          :disabled="isSettingToken"
          class="px-4 py-2 bg-blue-600 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {{ isSettingToken ? 'Setting...' : 'Set Token' }}
        </button>
      </div>
      <p class="text-sm text-gray-600">
        💡 <strong>Tip:</strong> Enter valid token (e.g., eyJhbGc...)
      </p>
    </div>

    <!-- Full chat interface -->
    <ClientOnly>
      <div class="h-96">
        <SidekickChat />
      </div>
    </ClientOnly>

    <!-- Floating chat widget -->
    <ClientOnly>
      <SidekickChatPlugin @open="onChatOpen" @close="onChatClose" />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useChatStore } from '@sprout_lbjocson/sprout-sidekick'

const token = ref('')
const chatStore = useChatStore()
const isSettingToken = ref(false)

function onChatOpen() {
  console.log('Chat opened')
}

function onChatClose() {
  console.log('Chat closed')
}

async function setToken() {
  if (!token.value.trim()) {
    alert('Please enter a token')
    return
  }

  try {
    isSettingToken.value = true
    await chatStore.setToken(token.value.trim())
    console.log('Token set successfully:', token.value)
    alert(`Token set successfully: ${token.value}`)
  } catch (error) {
    console.error('Failed to set token:', error)
    alert(`Failed to set token: ${error.message}`)
  } finally {
    isSettingToken.value = false
  }
}
</script>

Features Demonstrated

• ✅ Responsive design
• ✅ Shared state between components
• ✅ Authentication flow
• ✅ Message sending and receiving
• ✅ Typing indicators
• ✅ Auto-scrolling
• ✅ Open/close events
• ✅ Mobile-friendly interface

Try interacting with both components to see how they work together!