<!-- source-hash: 7729b24e719a68b72507fe0a745d5b9f -->
A clickable action button component designed for chat interfaces, featuring hover effects, hint animations, and accessibility support with proper focus management.

## Key Components

- **ChatQuickAction** - Main React component exported as a forward ref with customizable styling and behavior
- **handleClick** - Callback handler that manages hint interactions, action execution, and click events in sequence
- **Styling System** - Uses `cn` utility for conditional classes with ODS (OpenFrame Design System) tokens
- **Props Interface** - Accepts `text`, `onAction`, `onHintInteraction`, `isHintActive`, and standard button props

## Usage Example

```typescript
import { ChatQuickAction } from './chat-quick-action'

function ChatInterface() {
  const [showHint, setShowHint] = useState(true)

  const handleQuickAction = (actionText: string) => {
    console.log('Quick action triggered:', actionText)
    // Process the quick action
  }

  const stopHint = () => {
    setShowHint(false)
  }

  return (
    <div className="space-y-2">
      <ChatQuickAction
        text="How do I reset my password?"
        onAction={handleQuickAction}
        isHintActive={showHint}
        onHintInteraction={stopHint}
      />
      <ChatQuickAction
        text="Show me the dashboard"
        onAction={handleQuickAction}
        disabled={false}
      />
    </div>
  )
}
```

The component provides visual feedback through hover states, active animations, and a pulsing hint animation when `isHintActive` is true. It integrates seamlessly with chat UIs by triggering actions when clicked and managing hint visibility states.