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 | 1x 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 | import { TextMessage } from '@copilotkit/runtime-client-gql';
import { Markdown } from '@copilotkit/react-ui';
// Constants
import { IMAGES } from '@shared/constants';
// Utils
import { combineClasses } from '@shared/utils';
interface ChatbotResponseProps {
msg: TextMessage;
className?: string;
}
export const ChatbotResponse = ({ msg, className }: ChatbotResponseProps) => (
<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 self-baseline">
<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="Agility Flash"
width={28}
height={28}
className="size-7 object-contain"
/>
</div>
</div>
<div className="flex-1 min-w-0 text-3xs leading-relaxed break-words text-gray-500 marker:text-gray-500">
<Markdown content={msg?.content || ''} />
</div>
</div>
</div>
);
|