66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
/**
|
|
* QuickReplyBar — horizontal scrollable chip bar for AI quick reply suggestions.
|
|
*/
|
|
|
|
import styled from '@lilith/ui-styled-components';
|
|
import type { QuickReply } from '../types';
|
|
|
|
export interface QuickReplyBarProps {
|
|
replies: QuickReply[];
|
|
onSelect: (value: string) => void;
|
|
}
|
|
|
|
export function QuickReplyBar({ replies, onSelect }: QuickReplyBarProps) {
|
|
if (replies.length === 0) return null;
|
|
|
|
return (
|
|
<Bar role="toolbar" aria-label="Quick reply suggestions">
|
|
{replies.map((reply) => (
|
|
<Chip
|
|
key={reply.value}
|
|
type="button"
|
|
onClick={() => onSelect(reply.value)}
|
|
aria-label={`Quick reply: ${reply.label}`}
|
|
>
|
|
{reply.label}
|
|
</Chip>
|
|
))}
|
|
</Bar>
|
|
);
|
|
}
|
|
|
|
const Bar = styled.div`
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const Chip = styled.button`
|
|
flex-shrink: 0;
|
|
padding: 0.375rem 0.875rem;
|
|
background: rgba(124, 58, 237, 0.12);
|
|
border: 1px solid rgba(124, 58, 237, 0.3);
|
|
border-radius: 999px;
|
|
color: #a78bfa;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
|
|
|
&:hover {
|
|
background: rgba(124, 58, 237, 0.22);
|
|
border-color: rgba(124, 58, 237, 0.5);
|
|
color: #c4b5fd;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(124, 58, 237, 0.3);
|
|
}
|
|
`;
|