Chat Source

Usage

AI

Here is an answer backed by a single web source.

Namespace UIKit

"use client";

import { ChatMessage, ChatSource } from "@thenamespace/uikit";

const favicon = (url: string) =>

Expand code

Use ChatSource to cite a URL or uploaded document inline with an assistant answer.

Document

"use client";

import { ChatMessage, ChatSource } from "@thenamespace/uikit";

const Assistant = ({ children }: { children: React.ReactNode }) => (

Set sourceType="document" for uploaded or local files.

Grouped

AI

Answer synthesized from multiple sources.

3 sources

"use client";

import { ChatMessage, ChatSource, ChatSources } from "@thenamespace/uikit";

const favicon = (url: string) =>

Expand code

Use ChatSources to group multiple citations behind a collapsible trigger.

Stacked Favicons

AI

Answer synthesized from multiple sources.

Sources

"use client";

import { ChatMessage, ChatSource, ChatSources } from "@thenamespace/uikit";

const favicon = (url: string) =>

Expand code

For a compact source button, render stacked favicon avatars in the ChatSources.Trigger.

Composable

AI

React's documentation has a clear explanation of component composition and state-driven rendering. The source chip below uses custom trigger content with a fetched favicon.

React docs

"use client";

import { ChatMessage, ChatSource } from "@thenamespace/uikit";

const favicon = (url: string) =>

Expand code

Use compound parts when you need custom trigger content.

Anatomy

import {ChatSource, ChatSources} from "@thenamespace/uikit";

<ChatSource
  faviconUrl="/assets/favicons/namespace-com.png"
  href="https://namespace.com"
  title="Namespace UIKit"
/>

<ChatSources defaultExpanded={false}>
  <ChatSources.Trigger>3 sources</ChatSources.Trigger>
  <ChatSources.Content>
    <ChatSources.List>
      <ChatSource href="https://namespace.com" title="Namespace UIKit" />
    </ChatSources.List>
  </ChatSources.Content>
</ChatSources>

CSS Classes

• .chat-source - Source root
• .chat-source__trigger - Trigger wrapper
• .chat-source__trigger-link - Link or document pill
• .chat-source__icon - Favicon image or custom icon
• .chat-source__icon-fallback - Initial fallback for URL sources
• .chat-source__document-icon - Document source icon
• .chat-source__preview - Hover preview popover
• .chat-sources - Grouped source disclosure
• .chat-sources__trigger - Group trigger
• .chat-sources__list - Expanded source list

API Reference

ChatSource

ChatSource.Trigger

Renders the source pill trigger. Extends native anchor props for URL sources.

ChatSource.Icon

Renders a custom icon or favicon.

ChatSource.Title

Renders the source title.

ChatSource.Preview

Renders the hover preview content for URL sources with title or description. If you provide a custom preview without root title or description, set enablePreview on ChatSource so the required hover-card wrapper is mounted.

ChatSources

Grouped source disclosure. Extends Namespace UIKit Disclosure props.

ChatSources.Trigger

Renders the grouped source trigger.

ChatSources.Content

Renders the expanded grouped source content.

ChatSources.List

Renders the flex-wrapped source list.