Embedded & Floating Widget Components

tokomono/chat provides two primary Vue components that load their configuration asynchronously from the backend using only the deployable hash. This makes them ideal for SPAs, Inertia apps, and traditional Blade views alike.

1. <TokomonoChat /> (Embedded Component)

Adapts automatically to the parent element (w-full h-full) with a minimum width of 320px and maximum width of 100%.

<template>
    <div class="w-full max-w-md h-[600px]">
        <TokomonoChat hash="support_9f8a7b6c" />
    </div>
</template>

<script setup>
import { TokomonoChat } from '@/vendor/tokomono-chat';
</script>

2. <TokomonoChatWidget /> (Floating Minimizable Wrapper)

Wraps <TokomonoChat /> in a floating panel that can be minimized into a floating action button (placed bottom-right by default).

• Persists open/minimized state and active conversation_id in localStorage.
• Tracks unread messages while minimized and displays an unread badge count.
• Plays a notification sound when a new message arrives while minimized (if playSound() is enabled in the PHP Chat class).

<template>
    <TokomonoChatWidget
        hash="support_9f8a7b6c"
        position="bottom-right"
    />
</template>

<script setup>
import { TokomonoChatWidget } from '@/vendor/tokomono-chat';
</script>

Lazy Loading & Conversation Switching

• Initial Load (10 Messages): Opening or switching to a conversation fetches only the latest 10 messages (config('chat.messages_per_page', 10)).
• Scroll-Up Lazy Loading: Scrolling to the top of the message stream automatically fetches the previous batch of 10 older messages using cursor pagination (before_id) while preserving scroll position.
• Paginated Conversation Overlay: When maxConversations() > 1, users can open the conversation overlay menu to switch between paginated conversations, start a new conversation, or delete existing conversations.