FAQ chat

TS

import { … } from "@fungi.computer/caps/blocks/faq-chat";

Hero

TSX

import { FaqChat } from "@fungi.computer/caps/blocks/faq-chat";

const entries = [
  {
    id: "shipping",
    question: "How fast do you ship spore prints?",
    answer: "Prints ship within 2 business days, packed flat.",
    keywords: ["ship", "shipping", "fast"],
  },
  {
    id: "species",
    question: "Which species do you carry?",
    answer: "Lion's Mane, Oyster and Chanterelle, with more seasonally.",
    keywords: ["species", "carry", "which"],
  },
];

export default function Hero() {
  return (
    <FaqChat
      className="w-full max-w-sm"
      title="Ask the Spore Desk"
      greeting="Hi! Pick a question below or type your own."
      entries={entries}
      fallback={{ answer: "I don't have a reviewed answer for that yet." }}
    />
  );
}

With actions

TSX

import { FaqChat } from "@fungi.computer/caps/blocks/faq-chat";
import { Button } from "@fungi.computer/caps/components/button";

const entries = [
  {
    id: "returns",
    question: "Can I return a dried batch?",
    answer: "Dried goods are final sale, but we'll replace a damaged batch.",
    keywords: ["return", "damaged", "replace"],
    actions: <Button size="xs">Contact support</Button>,
  },
];

export default function WithActions() {
  return (
    <FaqChat
      className="w-full max-w-sm"
      title="Returns"
      avatar={<span className="text-xl">🍄</span>}
      greeting="Questions about returns?"
      note="Answers reviewed by the Spore Desk team."
      entries={entries}
      fallback={{
        answer: "Please reach out directly for that one.",
        actions: <Button size="xs">Contact support</Button>,
      }}
    />
  );
}

Props

FaqChatProps

Prop	Type	Description
entries	readonly FaqChatEntry[]
greeting	ReactNode	The first agent message, shown before any question.
fallback	FaqChatFallback
title	ReactNode	Visible heading and accessible name of the chat.
note?	ReactNode	A short honest note about where answers come from.
avatar?	ReactNode	Optional mark shown beside the title, such as a logo.
inputLabel?	string	Accessible label of the typed-question field.
placeholder?	string
submitLabel?	string

• entriesreadonly FaqChatEntry[]
• greetingReactNode

  The first agent message, shown before any question.

• fallbackFaqChatFallback
• titleReactNode

  Visible heading and accessible name of the chat.

• note?ReactNode

  A short honest note about where answers come from.

• avatar?ReactNode

  Optional mark shown beside the title, such as a logo.

• inputLabel?string

  Accessible label of the typed-question field.

• placeholder?string
• submitLabel?string

Full types: API reference.