Component reference

ChatSources

The sources an answer cites, as a collapsible list of links.

Preview

Titles and descriptions

Sources are layered away from the answer; the title locates the source and the description helps judge why to open it.

packages/meowtail/stories/chat-message.stories.tsxline 377tsx

render: () => (
  <Measure>
    <Stack>
      <p>
        When checking request cancellation and response handling, you can open the references
        below.
      </p>
      <ChatSources
        open
        items={[
          reference,
          {
            title: "Fetch API: Handling requests and responses",
            url: "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",
            description: "The request lifecycle and the meaning of returned results.",
          },
        ]}
      />
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ChatSources } from "meowtail";

<ChatSources
  open
  items={[
    reference,
    {
      title: "Fetch API: Handling requests and responses",
      url: "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",
      description: "The request lifecycle and the meaning of returned results.",
    },
  ]}
/>

API reference

Props

Prop	Type	Default
`items`Required	`readonly ChatSource[]`	–
`label`	`string`	`"Sources"`

Also takes className, children and the attributes and events of its root element.

DOM parts

rootsummaryiconlistitemlinkdescription

Registry

The component is registered as chat-sources in the meowtail component registry.