Prompt Composer

import { PromptComposer } from '@/components/ui/prompt-composer'

'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import {
  PromptComposer,
  type PromptAttachment,
} from '@/components/ui/prompt-composer'

const COMMANDS = [
  {
    name: 'reconcile',
    hint: 'Match invoices against Xero for a period',
  },
  {
    name: 'digest',
    hint: 'Draft the weekly ops digest for #ops',
  },
  {
    name: 'refund-review',
    hint: 'List Stripe refunds awaiting approval',
  },
  {
    name: 'escalate',
    hint: 'Surface stalled Linear tickets',
  },
]

const INITIAL_ATTACHMENTS: PromptAttachment[] = [
  { id: 'a1', name: 'invoices-q2.csv', size: '48 KB' },
  { id: 'a2', name: 'xero-export-may.xlsx', size: '212 KB' },
  { id: 'a3', name: 'payout-notes.md', size: '6 KB' },
]

export default function PromptComposerDemo() {
  const reduced = useReducedMotion()
  const [value, setValue] = useState(
    'Reconcile May invoices for Apex Holdings and flag mismatches over $50.'
  )
  const [attachments, setAttachments] =
    useState<PromptAttachment[]>(INITIAL_ATTACHMENTS)
  const [streaming, setStreaming] = useState(false)
  const [note, setNote] = useState<string | null>(null)
  const streamTimer = useRef<ReturnType<typeof setTimeout> | null>(null)

  useEffect(() => {
    return () => {
      if (streamTimer.current) clearTimeout(streamTimer.current)
    }
  }, [])

  const onSubmit = useCallback(
    (text: string) => {
      setNote(`submitted: ${text.slice(0, 56)}${text.length > 56 ? '…' : ''}`)
      setStreaming(true)
      setValue('')
      if (streamTimer.current) clearTimeout(streamTimer.current)
      // deterministic settle, not tied to wall-clock in render
      streamTimer.current = setTimeout(
        () => {
          setStreaming(false)
          setNote('response complete')
          streamTimer.current = null
        },
        reduced ? 400 : 2200
      )
    },
    [reduced]
  )

  const onStop = useCallback(() => {
    if (streamTimer.current) {
      clearTimeout(streamTimer.current)
      streamTimer.current = null
    }
    setStreaming(false)
    setNote('stopped')
  }, [])

  const onCommandSelect = useCallback((name: string) => {
    setValue(`/${name} `)
  }, [])

  return (
    <div className="mx-auto flex min-h-[480px] w-full max-w-2xl flex-col justify-end gap-4 px-4 py-12 sm:px-6 sm:py-16">
      <div className="rounded-2xl border border-border/60 bg-background px-4 py-3 sm:px-5">
        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
          meridian-ops · composer
        </p>
        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
          Type <span className="font-mono text-foreground">/</span> for
          slash commands, or send with ⌘↵. Attachments ride above the draft.
        </p>
      </div>

      <PromptComposer
        value={value}
        onChange={setValue}
        onSubmit={onSubmit}
        attachments={attachments}
        onRemoveAttachment={(id) =>
          setAttachments((prev) => prev.filter((a) => a.id !== id))
        }
        onAttach={() =>
          setNote('File picker opened by parent (stub)')
        }
        commands={COMMANDS}
        onCommandSelect={onCommandSelect}
        model="claude-sonnet-4-5"
        cost="~$0.014/msg"
        streaming={streaming}
        onStop={onStop}
        placeholder="Message meridian-ops…"
      />

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