function BubbleDemo() { const [open, setOpen] = useState(false) return ( <Stack gap="4"> <HStack gap="2" align="flex-end"> <Bubble.Root align="start" variant="subtle"> <Bubble.Content>subtle · start</Bubble.Content> </Bubble.Root> <Bubble.Root align="end" variant="subtle"> <Bubble.Content>subtle · end</Bubble.Content> </Bubble.Root> </HStack> <HStack gap="2" align="flex-end"> <Bubble.Root align="start" variant="solid"> <Bubble.Content>solid · start</Bubble.Content> </Bubble.Root> <Bubble.Root align="end" variant="solid"> <Bubble.Content>solid · end</Bubble.Content> </Bubble.Root> </HStack> <HStack gap="2" align="flex-end"> <Bubble.Root align="start" variant="outline"> <Bubble.Content>outline · start</Bubble.Content> </Bubble.Root> <Bubble.Root align="end" variant="outline"> <Bubble.Content>outline · end</Bubble.Content> </Bubble.Root> </HStack> <Bubble.Root align="start"> <Bubble.Content>Bisa gue bantu apa lagi?</Bubble.Content> <Bubble.Footer> <Bubble.Action aria-label="Like">👍</Bubble.Action> <Bubble.Action aria-label="Dislike">👎</Bubble.Action> <Bubble.Action aria-label="Copy">📋</Bubble.Action> </Bubble.Footer> </Bubble.Root> <Bubble.Root align="start"> <Bubble.Content> Jawabannya adalah 42. <Bubble.Collapsible open={open} onOpenChange={setOpen} label="Show reasoning" mt="2"> Menghitung dari pertanyaan tentang hidup, semesta, dan segalanya... </Bubble.Collapsible> </Bubble.Content> </Bubble.Root> </Stack> )}