feat: add conversation request-response

frontend/src/components/conversation-bubble.tsx

@@ -0,0 +1,33 @@
+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;