API Reference AskAI.Header

AskAI.Header

Header bar with title and actions

Overview

Header bar that shows the AskAI title and actions (clear conversation, close). Typically used with AskAI.Messages and AskAI.Input.

Usage

import { AskAI } from 'peam/client';

export default function Page() {
  return (
    <AskAI>
      <AskAI.Dialog>
        <AskAI.Header />
        <AskAI.Messages />
        <AskAI.Input />
      </AskAI.Dialog>
    </AskAI>
  );
}

Props

import type { ComponentPropsWithoutRef, ReactNode } from 'react';

export interface AskAIHeaderProps extends ComponentPropsWithoutRef<'div'> {
  heading?: ReactNode;
  closeLabel?: string;
}

Notes

Uses closeLabel for the close button aria-label.
The delete button only shows when there are messages and the chat is idle.

AskAI.Inline

Inline AskAI layout composed of header, messages, suggestions, and input

AskAI.Messages

Renders the conversation, sources, and message actions

On this page

Edit this page on GitHub