Chat bubble

TS

import { … } from "@fungi.computer/caps/components/chat-bubble";

Conversation

TSX

import { ChatBubble } from "@fungi.computer/caps/components/chat-bubble";

export default function Conversation() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ChatBubble side="agent" name="Spore" time="9:40 AM" avatar="🍄">
        Found three logs worth colonizing near the creek.
      </ChatBubble>
      <ChatBubble side="user" name="You" time="9:41 AM">
        Perfect, start with the oak.
      </ChatBubble>
    </div>
  );
}

States

TSX

import { ChatBubble } from "@fungi.computer/caps/components/chat-bubble";

export default function States() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ChatBubble side="agent" name="Spore" state="pending" />
      <ChatBubble side="agent" name="Spore" state="error">
        Lost the connection to the grow tent.
      </ChatBubble>
      <ChatBubble side="user">Try again?</ChatBubble>
    </div>
  );
}

Typing reply

TSX

import { ChatBubble } from "@fungi.computer/caps/components/chat-bubble";
import { Button } from "@fungi.computer/caps/components/button";
import { useState } from "react";

export default function TypingReply() {
  const [reply, setReply] = useState<string | null>(null);
  const ask = () => {
    setReply(null);
    window.setTimeout(() => {
      setReply("Twelve logs, all shiitake.");
    }, 1200);
  };
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ChatBubble side="user">How many logs are ready?</ChatBubble>
      <ChatBubble
        side="agent"
        name="Spore"
        state={reply ? "settled" : "pending"}
      >
        {reply}
      </ChatBubble>
      <Button size="sm" variant="outline" className="self-start" onClick={ask}>
        Ask again
      </Button>
    </div>
  );
}

Props

ChatBubbleProps

Prop	Type	Description
side	"agent" | "user"	An agent speaks from the left with its mark; the person from the right.
avatar?	ReactNode	A mark for an agent, drawn beside its bubble.
name?	ReactNode	Who is speaking, on the line above the bubble.
time?	ReactNode	When it was said, or what the speaker is doing instead.
state?	"settled" | "pending" | "error"
children?	ReactNode

• side"agent" | "user"

  An agent speaks from the left with its mark; the person from the right.

• avatar?ReactNode

  A mark for an agent, drawn beside its bubble.

• name?ReactNode

  Who is speaking, on the line above the bubble.

• time?ReactNode

  When it was said, or what the speaker is doing instead.

• state?"settled" | "pending" | "error"
• children?ReactNode

Full types: API reference.