ChatWindowCsatPrompt

'use client';

import { useState } from 'react';
import { ChatWindowCsatPrompt } from '@/ui/ChatWindowCsatPrompt';
import type { ChatWindowCsatPromptLabels } from '@/ui/ChatWindowCsatPrompt';

const defaultCsatLabels: ChatWindowCsatPromptLabels = {
  intro: 'Your opinion matters! Tell us what you think. Your feedback helps us improve.',
  question:
    'Following our conversation, from 1 to 5, how satisfied are you with the level of service you received,',
  questionNote: '1 star being "Very dissatisfied" and 5 stars "Very satisfied".',
  groupAriaLabel: 'Rate your experience from 1 to 5 stars',
  starLabels: ['Very dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very satisfied'],
};

function defaultRenderRatingLabel(rating: number) {
  const labels = defaultCsatLabels.starLabels;
  return `${rating} star${rating > 1 ? 's' : ''} — ${labels[rating - 1]}`;
}

export function ChatWindowCsatPromptDemo() {
  const [lastRating, setLastRating] = useState<number | null>(null);

  return (
    <div className="flex flex-col gap-20 w-380">
      <ChatWindowCsatPrompt
        labels={defaultCsatLabels}
        renderRatingLabel={defaultRenderRatingLabel}
        onRate={setLastRating}
      />
      {lastRating !== null && (
        <p className="text-b4 text-darkGrey text-center">
          onRate called with: <strong>{lastRating}</strong>
        </p>
      )}
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-window-csat-prompt.json
Copy

Usage

ChatWindowCsatPrompt is used internally by ChatWindow — you rarely need to render it directly. The standard entry point is chatRef.current.askForFeedback(). See the ChatWindow docs for the full integration pattern.

Copyimport { ChatWindowCsatPrompt } from '@/ui/ChatWindowCsatPrompt';
 
export function Component() {
  return (
    <ChatWindowCsatPrompt
      onRate={(rating) => {
        console.log('User rated:', rating); // 1–5
      }}
    />
  );
}

Behaviour

1. Idle state — two assistant messages explain the rating scale, followed by a row of five star buttons.
2. Hover — hovering a star highlights all stars up to that index and shows a live label (e.g. "3 stars — Neutral") via aria-live.
3. Submitted state — after a star is clicked, onRate fires once, the prompt replaces itself with a thank-you message, and the star buttons are removed from the DOM.

The component does not manage retry or re-submission. Once in the submitted state it stays there for the lifetime of the component instance. To reset it, remount with a new key.

Accessibility

• The star group carries role="group" and an aria-label describing the rating scale.
• Each star button has a descriptive aria-label (e.g. "4 stars — Satisfied") and aria-pressed reflecting the selection.
• The hover label is wrapped in a aria-live="polite" region so keyboard and screen-reader users receive the same feedback as mouse users.
• The thank-you state is announced via the same live region when it renders.

API Reference

ChatWindowCsatPrompt

ChatWindowCsatPromptLabels

All fields are optional — any omitted field uses the English default.

Notes

• Rendered inside the ChatWindow message log when chatRef.current.askForFeedback() is called. You can also use it standalone in any context that calls for a star rating.
• onRate is called at most once per mount. The component self-locks after submission.
• Star icons use StarFilled / StarOutlined from @clubmed/trident-icons. The active colour is text-saffron.