Chat Message Bubbles

chat.css

.message::after {
  clip-path: path('M 0 16 Q 12 16 12 8 L 12 0 L 10 0 Q 6 16 0 16');
}
.message.me::after {
  clip-path: path('M 12 16 Q 0 16 0 8 L 0 0 L 2 0 Q 6 16 12 16');
}

.message ul {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
}
.message li {
  margin: 0;
}

Message.tsx

function Message({
  message,
  isMe,
  isPending,
  isLoading,
}: {
  message: string;
  isMe: boolean;
  isPending?: boolean;
  isLoading: boolean;
}) {
  return (
    <div className="relative w-fit group">
      <Streamdown
        isAnimating={isPending || isLoading}
        className={cn(
          'message w-fit rounded-2xl px-4 py-2.5 text-sm relative overflow-visible whitespace-pre-wrap wrap-break-word shadow-sm',
          'after:hidden last-of-type:after:block after:absolute after:bottom-0 after:right-0 after:w-3 after:h-4',
          {
            'bg-gray-200 after:bg-gray-200 text-black after:left-0': !isMe,
            'me bg-blue text-dark-gray after:bg-blue after:right-0': isMe,
            'animate-pulse text-dark-gray': isPending,
          },
        )}
      >
        {isPending ? 'Thinking...' : message}
      </Streamdown>
    </div>
  );
}