Chat

function ChatComposedDemo() {  const [reasoningOpen, setReasoningOpen] = useState(false)  const botAvatar = (    <Avatar.Root size="xs">      <Avatar.Fallback name="Indoku Bot" />    </Avatar.Root>  )​  return (    <Card.Root h="96" overflow="hidden">      <MessageScroller.Root p="4" watch={[reasoningOpen]}>        <Stack gap="5">          <Marker.Separator>Today</Marker.Separator>​          {/* Message.Group: 2 balasan bot berurutan numpuk rapet, satu avatar di bawah grup */}          <Message.Group avatar={botAvatar} avatarPosition="bottom" header="Indoku Bot · 09:41">            <Bubble.Root align="start">              <Bubble.Content>Hey! Mau liat chat bubble?</Bubble.Content>            </Bubble.Root>            <Bubble.Root align="start">              <Bubble.Content>                Gue bisa ngegrupin pesan, gonta-ganti sisi, dan bikin satu thread gampang dipindai.              </Bubble.Content>              <Bubble.Footer>                <Bubble.Action aria-label="Like">👍</Bubble.Action>                <Bubble.Action aria-label="Fire">🔥</Bubble.Action>              </Bubble.Footer>            </Bubble.Root>          </Message.Group>​          <Message.Root align="end">            <Message.Avatar />            <Message.Content>              <Bubble.Root align="end" variant="solid">                <Bubble.Content>Mantap. Coba kirim lampiran juga dong.</Bubble.Content>              </Bubble.Root>            </Message.Content>          </Message.Root>​          <Message.Group avatar={botAvatar} avatarPosition="bottom">            <Bubble.Root align="start">              <Bubble.Content>                Nih rekapnya.                <Attachment.Root mt="2">                  <Attachment.Media />                  <Attachment.Content>                    <Attachment.Name>invoice-september.pdf</Attachment.Name>                    <Attachment.Meta size={482000} />                  </Attachment.Content>                </Attachment.Root>                <Bubble.Collapsible                  open={reasoningOpen}                  onOpenChange={setReasoningOpen}                  label="Show reasoning"                  mt="2"                >                  Ngambil data invoice bulan ini, ngitung total, terus dirender jadi kartu attachment.                </Bubble.Collapsible>              </Bubble.Content>            </Bubble.Root>          </Message.Group>​          <Marker.Status tone="info">            <Marker.TypingIndicator />            Indoku Bot is typing...          </Marker.Status>        </Stack>      </MessageScroller.Root>    </Card.Root>  )}