34 lines
897 B
TypeScript
34 lines
897 B
TypeScript
import { cn } from "@/lib/utils";
|
|
import { tw } from "@/utils/tailwind";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { LoaderCircleIcon } from "lucide-react";
|
|
|
|
const bubbleVariants = cva(tw`px-4 py-2 rounded max-w-2/3`, {
|
|
variants: {
|
|
type: {
|
|
question: tw`bg-blue-500 text-gray-200 self-start`,
|
|
response: tw`bg-neutral-300 text-gray-950 self-end`,
|
|
},
|
|
active: {
|
|
false: tw`grayscale-100 opacity-90`,
|
|
true: null,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
active: true,
|
|
},
|
|
});
|
|
|
|
interface Props extends VariantProps<typeof bubbleVariants> {
|
|
content: string;
|
|
}
|
|
const ConversationBubble = ({ type, active, content }: Readonly<Props>) => {
|
|
return (
|
|
<div className={cn(bubbleVariants({ type, active }))}>
|
|
{content ? content : <LoaderCircleIcon className="animate-spin" />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConversationBubble;
|