ChatMinimal Component

A minimal chat component without history sidebar.

Import

import { ChatMinimal } from "@cognipeer/chat-ui";

Usage

<ChatMinimal
  baseUrl="/api/agents"
  agentId="assistant"
/>

Props

ChatMinimalProps is Omit<ChatProps, "showHistory">: it takes every prop of Chat, and the history sidebar is always off. Everything else works as in Chat, including approvals and questions, uploads, usage limits, the portal experience (messageActions, feedback, exportMenu, ...), controllerRef and EmbedChat's building blocks. Props that only make sense with the sidebar (historyActions, renderHistoryHeader, renderHistoryFooter, enableMessageSearch, defaultHistoryOpen, showStatus, showAgentName) have no effect.

Connection

Prop	Type	Default	Description
baseUrl	string	-	Base URL for the agent server API (not needed with transport)
transport	ChatTransport	-	Another backend, see Transports
agentId	string	first agent	ID of the agent to chat with. Without it the agents are listed and a picker shows in the header when there are several
authorization, headers, getHeaders, fetch		-	Authentication and transport options
conversationId	string	-	Open this conversation; otherwise a new one starts with the first message
streaming	boolean	true	Enable streaming

Look

Prop	Type	Default	Description
theme	"dark" | "light"	"dark"	Theme mode (read when the chat mounts)
themeColors	ChatTheme["colors"]	-	Custom colours, including the status colours
enableFileUpload	boolean	true	Enable file uploads
className	string	-	Container class name

Without the sidebar a person cannot switch conversations: offer your own control that calls controllerRef.current?.newChat() (a ChatController handle), or change the conversationId prop (the chat loads that conversation whenever it changes).

Examples

Basic

<ChatMinimal
  baseUrl="/api/agents"
  agentId="assistant"
  theme="dark"
/>

Embedded in Page

function ProductPage() {
  return (
    <div className="flex">
      <main className="flex-1">
        {/* Product content */}
      </main>
      
      <aside className="w-96 h-screen border-l">
        <ChatMinimal
          baseUrl="/api/agents"
          agentId="product-helper"
          theme="light"
        />
      </aside>
    </div>
  );
}

With Fixed Conversation

<ChatMinimal
  baseUrl="/api/agents"
  agentId="assistant"
  conversationId="conv-123"
/>

Custom Styling

<ChatMinimal
  baseUrl="/api/agents"
  agentId="assistant"
  className="rounded-lg border"
  themeColors={{
    bgPrimary: "#1a1a2e",
    accentPrimary: "#e94560",
  }}
/>

When to Use

Use ChatMinimal when you:

• Don't need conversation history
• Are embedding chat in a larger UI
• Want a simpler interface
• Are building a widget

Use Chat when you:

• Need conversation history
• Want full-featured chat
• Are building a standalone chat page

Related

• Chat
• useChat Hook