Message Action Bar

import { MessageActionBar } from '@/components/ui/message-action-bar'

'use client'

import { useState } from 'react'
import {
  MessageActionBar,
  type MessageFeedback,
} from '@/components/ui/message-action-bar'

const MSG_A =
  'Matched 42 of 44 May invoices for Apex Holdings. Two Stripe payouts (py_8k2L, py_9m1Q) sit $87 and $124 over the Xero bills, both under the $500 auto-approve threshold, so I held them for your review.'

const MSG_B =
  'Draft digest ready for #ops: three open approvals, spend +4.2% vs last week, and one Linear ticket (LIN-1842) past the five-day escalation window.'

export default function MessageActionBarDemo() {
  const [feedbackA, setFeedbackA] = useState<MessageFeedback>('none')
  const [feedbackB, setFeedbackB] = useState<MessageFeedback>('up')
  const [retryNote, setRetryNote] = useState<string | null>(null)

  return (
    <div className="mx-auto flex min-h-[360px] w-full max-w-xl flex-col justify-center gap-8 px-4 py-12 sm:px-6 sm:py-16">
      <article className="min-w-0 space-y-3">
        <div className="rounded-2xl border border-border/60 bg-card px-4 py-3.5 sm:px-5">
          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
            meridian-ops
          </p>
          <p className="mt-2 text-sm leading-relaxed text-foreground">
            {MSG_A}
          </p>
        </div>
        <MessageActionBar
          content={MSG_A}
          feedback={feedbackA}
          onFeedback={setFeedbackA}
          onRetry={() => setRetryNote('Regenerating May reconcile…')}
          onEdit={() => setRetryNote('Edit opened for message A')}
          model="claude-sonnet-4-5"
          meta="1,204 tokens · 2.1s"
        />
      </article>

      <article className="min-w-0 space-y-3">
        <div className="rounded-2xl border border-border/60 bg-card px-4 py-3.5 sm:px-5">
          <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
            meridian-ops
          </p>
          <p className="mt-2 text-sm leading-relaxed text-foreground">
            {MSG_B}
          </p>
        </div>
        <MessageActionBar
          content={MSG_B}
          feedback={feedbackB}
          onFeedback={setFeedbackB}
          onRetry={() => setRetryNote('Regenerating ops digest…')}
          model="claude-sonnet-4-5"
          meta="612 tokens · 1.4s"
        />
      </article>

      {retryNote && (
        <p className="text-center font-mono text-[11px] text-muted-foreground sm:text-xs">
          {retryNote}
        </p>
      )}
    </div>
  )
}