|
|
@ -16,15 +16,17 @@ const ConversationBubble = forwardRef<
|
|
|
|
ref={ref}
|
|
|
|
ref={ref}
|
|
|
|
className={`flex rounded-3xl ${
|
|
|
|
className={`flex rounded-3xl ${
|
|
|
|
type === 'ANSWER'
|
|
|
|
type === 'ANSWER'
|
|
|
|
? 'bg-gray-1000'
|
|
|
|
? 'self-start bg-gray-1000'
|
|
|
|
: type === 'ERROR'
|
|
|
|
: type === 'ERROR'
|
|
|
|
? 'bg-red-1000'
|
|
|
|
? 'self-start bg-red-1000'
|
|
|
|
: ''
|
|
|
|
: 'flex-row-reverse self-end bg-blue-1000 text-white'
|
|
|
|
} py-7 px-5 ${className}`}
|
|
|
|
} py-7 px-5 ${className}`}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
|
|
|
|
<Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
className={`ml-5 flex items-center ${
|
|
|
|
className={`${
|
|
|
|
|
|
|
|
type === 'QUESTION' ? 'mr-5' : 'ml-5'
|
|
|
|
|
|
|
|
} flex items-center ${
|
|
|
|
type === 'ERROR'
|
|
|
|
type === 'ERROR'
|
|
|
|
? 'rounded-lg border border-red-2000 p-2 text-red-3000'
|
|
|
|
? 'rounded-lg border border-red-2000 p-2 text-red-3000'
|
|
|
|
: ''
|
|
|
|
: ''
|
|
|
@ -40,3 +42,5 @@ const ConversationBubble = forwardRef<
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
export default ConversationBubble;
|
|
|
|
export default ConversationBubble;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO : split question and answer into two diff JSX
|
|
|
|