DemoBuy

Chat Screens

Last updated on 2026-05-31

The Help Desk Kit includes 4 chat screens for real-time customer communication, queue management, conversation history, and chatbot configuration. All screens live under the /chat/ route within the (app) route group.

Chat Console

Route: /chat

Real-time chat workspace with a three-panel layout for managing live customer conversations.

Left Panel -- Conversation List

  • Active conversations list -- each entry shows customer avatar, name, latest message preview, unread count badge, waiting time indicator, and priority dot
  • Sorting -- sorted by waiting time (longest first) by default
  • Search and filter -- search by customer name and filter by status or channel

Center Panel -- Chat Window

  • Message bubbles -- customer messages left-aligned, agent replies right-aligned with avatars
  • Typing indicator -- animated dots when the customer is typing
  • File sharing -- inline file sharing with thumbnail previews
  • Emoji picker -- emoji selection panel
  • Message composer -- rich text input with attachment button, canned response shortcut (type / to search), and transfer button
  • Chat info bar -- top bar showing customer name, company, previous tickets count, and CSAT score

Right Panel -- Customer Context

  • Customer context card -- profile summary with recent tickets, recent purchases, and internal notes
  • Suggested canned responses -- AI-powered suggestions based on the current conversation context
  • Knowledge base suggestions -- relevant articles surfaced automatically based on conversation content
  • Quick actions -- create ticket from chat, escalate to supervisor, transfer to another agent

Key Components

import { ConversationList } from "@/components/chat/conversation-list"
import { ChatWindow } from "@/components/chat/chat-window"
import { CustomerContext } from "@/components/chat/customer-context"

Data Sources

Data Source Location
Conversations chatConversations data/seed.ts
Messages chatMessages data/seed.ts
Customer data customers data/seed.ts

Chat Queue

Route: /chat/queue

Manage incoming chat requests with wait time monitoring and agent assignment.

  • Queue list -- sorted by wait time with each entry showing:
    • Customer avatar and name
    • Initial message preview
    • Wait time indicator (color-coded: green < 1 min, yellow 1-3 min, red > 3 min)
    • Channel badge (website/mobile/social) via ChannelBadge
    • Priority indicator via PriorityBadge
  • Queue actions -- accept (assigns to current agent), transfer (to specific agent or team), auto-assign
  • Metrics bar -- top row showing chats in queue, average wait time, agents available, and current load distribution
  • Agent availability panel -- right panel listing agents with status indicators and current chat count
  • Auto-assignment rules -- summary of assignment rules at the bottom

Key Components

import { QueueEntry } from "@/components/chat/queue-entry"
import { AgentAvailability } from "@/components/chat/agent-availability"
import { ChannelBadge } from "@/components/shared/channel-badge"

Chat History

Route: /chat/history

Browse and search past chat conversations with full transcript access and analytics.

  • Search and filters -- search by customer name, agent name; filter by date range, satisfaction rating, and tags
  • Results list -- each entry shows customer name and avatar, agent name, start/end time, duration, message count, CSAT rating (stars via SatisfactionStars), and tags
  • Transcript view -- click to open full transcript in a side panel showing all messages chronologically, internal notes marked separately, file transfers, and timestamps
  • Export options -- export individual transcripts or bulk export as PDF or CSV for compliance
  • Analytics sidebar -- average chat duration, average CSAT, and busiest hours chart

Key Components

import { HistoryFilters } from "@/components/chat/history-filters"
import { HistoryTable } from "@/components/chat/history-table"
import { SatisfactionStars } from "@/components/shared/satisfaction-stars"

Chatbot Builder

Route: /chat/chatbot

Visual flow builder for configuring automated chat responses and triage workflows.

  • Flow canvas -- main drag-and-drop canvas with node types:
    • Greeting -- entry point node for the conversation
    • Question -- captures user input
    • Menu -- presents selectable options to the user
    • Answer -- sends an automated response
    • Handoff -- transfers the conversation to a human agent
    • Condition -- branches the flow based on user input or data
  • Node connections -- drag lines between nodes to define the conversation flow
  • Node editor -- right panel for configuring each node: message text, variables, conditions, and routing
  • Top toolbar -- save, publish, test (opens chat simulator), and version history buttons
  • Flow list sidebar -- left sidebar listing all flows (Welcome Flow, FAQ Flow, Triage Flow, etc.) with status badges (active/draft)
  • Test panel -- simulated chat window to test the flow in real time before publishing

Key Components

import { FlowCanvas } from "@/components/chat/flow-canvas"
import { FlowList } from "@/components/chat/flow-list"
import { NodeEditor } from "@/components/chat/node-editor"

Data Sources

Data Source Location
Chatbot flows chatbotFlows data/seed.ts
Flow nodes chatbotNodes data/seed.ts

Next Steps

Previous

Knowledge Base Screens

Next

Reports Screens