Tokomono
Chat
3. Vue Components & Real-Time Streaming

Type-Driven Message Components & Feedback

Type-Driven Message Components & Feedback

Every item rendered in the chat stream is mapped to a dedicated Vue component based on its type:

Type Vue Component Description
text ChatTextMessage.vue Streams live token deltas over Laravel Reverb and renders safe Markdown (headings, lists, code blocks, links).
location ChatLocationMessage.vue Displays shared GPS coordinates (lat, lng, label) and opens ChatLocationModal.vue with an interactive map.
image ChatImageMessage.vue Displays one or more images and opens ChatImageModal.vue to inspect the enlarged image.
files ChatFilesMessage.vue Renders multi-file attachments uploaded by the user (validated against ChatFileDto rules).
human_in_the_loop ChatHitlMessage.vue Renders an interactive approval card when a workflow or tool pauses for Human-in-the-Loop intervention.
rate_limit ChatRateLimitAlert.vue Triggered when rateLimitPerMinute() is exceeded, showing the remaining cooldown time.
error ChatErrorAlert.vue Triggered on validation or stream errors, with a retry button.

Message Feedback (Thumbs Up / Down + Comment)

Every assistant message displays 👍 and 👎 buttons. When a user clicks a rating:

  1. The rating (up or down) is saved immediately via POST /api/chat/{hash}/messages/{messageId}/feedback.
  2. An inline input field opens allowing the user to submit an optional text explanation (feedback_comment).

AI-Suite Conversation Log Overview (<TokomonoChatAdminOverview />)

To inspect and filter all conversations (including soft-deleted conversations, guest sessions, and thumbs-up/down feedback) in a UI matching tokomono/ai-suite:

<template>
    <TokomonoChatAdminOverview api-base-url="/api/chat" />
</template>

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