Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* QuickActions - Quick action buttons for common tasks
*/
import React from 'react';
import { ChatbotQuickAction } from '@/types/support';
import { Icon } from '@/components/ui/icons';
import { IconName } from '@/components/ui/icons/registry';
export interface QuickActionsProps {
/** Available actions */
actions: ChatbotQuickAction[];
/** Handler for action clicks */
onAction: (action: ChatbotQuickAction) => void;
}
const ACTION_ICONS: Record<string, IconName> = {
track_order: 'package-box',
view_faq: 'book-open',
create_ticket: 'support-ticket',
contact_agent: 'phone'};
export default function QuickActions({ actions, onAction }: QuickActionsProps) {
return (
<div className="px-4 pb-3 bg-gray-50 border-t border-gray-100">
<p className="text-xs text-gray-500 mb-2">Quick actions:</p>
<div className="flex flex-wrap gap-2">
{actions.map((action, index) => (
<button
key={index}
type="button"
onClick={() => onAction(action)}
className="
inline-flex items-center gap-1.5
px-3 py-1.5
text-xs font-medium
bg-white text-gray-700
border border-gray-200 rounded-full
hover:bg-gray-50 hover:border-gray-300
transition-colors
"
>
{ACTION_ICONS[action.action] && <Icon name={ACTION_ICONS[action.action]} size={16} />}
{action.label}
</button>
))}
</div>
</div>
);
}
|