Primitives

This page is for the full-custom path. If you want the ready-made widget, stay in <Support />. If you want to build your own support UI, these primitives are the building blocks underneath it.

Templates with full examples are coming soon. If you want to start today, use the support source as your base and pull in the primitives you need.

Use this page when

• Support and slots are no longer enough
• you want to own the support shell, layout, and interaction model
• you want reusable building blocks instead of copying a monolithic widget

Import

Access primitives through the Primitives namespace:

Copyimport { Primitives } from "@cossistant/react";

Smallest working example

Copyimport { Primitives, useSupportConfig } from "@cossistant/react";
 
function CustomWidget() {
  const { isOpen, toggle } = useSupportConfig();
 
  return (
    <>
      <Primitives.Trigger>
        {({ unreadCount }) => (
          <button onClick={toggle} type="button">
            Help
            {unreadCount > 0 ? ` (${unreadCount})` : null}
          </button>
        )}
      </Primitives.Trigger>
 
      <Primitives.Window>
        {({ close }) =>
          isOpen ? (
            <div className="fixed bottom-20 right-4 w-96 border bg-white shadow-xl">
              <button onClick={close} type="button">
                Close
              </button>
              <p>Custom support content</p>
            </div>
          ) : null
        }
      </Primitives.Window>
    </>
  );
}

Common building blocks

Shell and routing

• Primitives.Trigger
• Primitives.Window
• Primitives.Router
• Primitives.Config

Conversation UI

• Primitives.ConversationTimeline
• Primitives.TimelineItem
• Primitives.TimelineItemGroup
• Primitives.ToolActivityRow

Input and feedback

• Primitives.MultimodalInput
• Primitives.FileInput
• Primitives.FeedbackCommentInput
• Primitives.FeedbackRatingSelector
• Primitives.FeedbackTopicSelect

Shared display pieces

• Primitives.Avatar
• Primitives.DaySeparator
• Primitives.TypingIndicator
• Primitives.Button

When to stop here

• the headless build is working and you only need hooks or shared types next
• you still want Cossistant state, navigation, and message APIs under your own UI

Next step

• Advanced for the full-custom path and source-code starting point
• Hooks Reference for state, visitor, and navigation control
• Types Reference for the shared data models behind the primitives