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 54 55 56 57 58 59 60 | 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | // Constants
import { IMAGES } from '@shared/constants';
// Utils
import { combineClasses } from '@shared/utils';
interface ThinkingIndicatorProps {
message?: string;
className?: string;
}
export const ThinkingIndicator = ({
message = 'Agility Assistant is thinking',
className,
}: ThinkingIndicatorProps) => (
<div
className={combineClasses('flex flex-col items-start px-4 py-1', className)}
>
<div className="flex items-center gap-2 border border-frost-250 rounded-lg shadow-md p-4 relative overflow-hidden w-full">
<div className="flex-shrink-0 relative size-10">
<div
className={combineClasses(
'size-10 rounded-full flex-center relative m-auto',
'bg-gradient-to-br from-primary-50 to-primary-100 ',
)}
>
<img
src={IMAGES.CHATBOT_PROCESSING}
alt="AI Assistant"
width={28}
height={28}
className="size-7 object-contain"
/>
</div>
</div>
<p className="text-4xs text-gray-500">{message}</p>
<div className="flex gap-1">
<div
className="w-1 h-1 bg-blue-500 rounded-full animate-bounce"
style={{ animationDelay: '0ms' }}
>
{' '}
</div>
<div
className="w-1 h-1 bg-blue-500 rounded-full animate-bounce"
style={{ animationDelay: '150ms' }}
>
{' '}
</div>
<div
className="w-1 h-1 bg-blue-500 rounded-full animate-bounce"
style={{ animationDelay: '300ms' }}
>
{' '}
</div>
</div>
</div>
</div>
);
|