How It Works
Overview React SDK Cloud Backend
Documentation Pricing Blog GitHub
Sign in Get Started

Documentation

Display Modes

InAppAI React supports multiple display modes to fit different use cases. Each mode offers unique features and is suited for specific application layouts.

Overview

ModeBest ForLayout Behavior
PopupGeneral websites, marketing sitesFloating button + popup window
SidebarDocumentation, dashboardsFull-height overlay sidebar
PanelCode editors, IDEsResizable panel that pushes content
EmbeddedCustom layouts, multi-chat appsFills parent container

A floating chat button that opens a popup window. This is the default mode.

Usage

<InAppAI
  agentId="your-agent-id"
  messages={messages}
  onMessagesChange={setMessages}
  displayMode="popup"  // default, can be omitted
  position="bottom-right"
/>

Positioning

Control where the button appears:

<InAppAI
  position="bottom-right"  // Default
  // or: bottom-left, top-right, top-left
/>

Features

  • Unobtrusive - doesn’t affect page layout
  • Familiar pattern - users expect it
  • Works everywhere - any page layout
  • Customizable button and window size

Best For

  • Marketing websites
  • E-commerce sites
  • General web applications
  • Landing pages

Example

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <div>
      <YourWebsiteContent />

      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        position="bottom-right"
        customStyles={{
          buttonIcon: '💬',
          buttonSize: '60px',
        }}
      />
    </div>
  );
}

Full-height sidebar that slides in from the left or right side.

Usage

<InAppAI
  displayMode="sidebar-right"  // or sidebar-left
  defaultFolded={false}         // Start expanded or folded
  // ... required props
/>

Choose left or right side:

// Right sidebar (default)
<InAppAI displayMode="sidebar-right" />

// Left sidebar
<InAppAI displayMode="sidebar-left" />

Folding State

Control initial state:

// Start expanded
<InAppAI
  displayMode="sidebar-right"
  defaultFolded={false}
/>

// Start folded
<InAppAI
  displayMode="sidebar-right"
  defaultFolded={true}
/>

Features

  • Full viewport height
  • Collapsible/foldable interface
  • Overlay mode (doesn’t push content)
  • Smooth slide animations
  • Customizable width

Best For

  • Documentation websites
  • Admin dashboards
  • SaaS applications
  • Help centers

Example

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function DocsApp() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <div>
      <DocumentationContent />

      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        displayMode="sidebar-right"
        defaultFolded={true}
        customStyles={{
          headerTitle: 'Documentation Assistant',
          sidebarWidth: '400px',
        }}
        context={() => ({
          currentPage: window.location.pathname,
          scrollPosition: window.scrollY,
        })}
      />
    </div>
  );
}

Panel Mode

Resizable panel that pushes page content. Ideal for split-screen layouts.

Usage

<InAppAI
  displayMode="panel-right"  // or panel-left
  panelMinWidth="20%"
  panelMaxWidth="50%"
  panelDefaultWidth="30%"
  onPanelResize={(width) => console.log('Panel width:', width)}
  // ... required props
/>

Panel Configuration

<InAppAI
  displayMode="panel-right"
  panelMinWidth="300px"        // Minimum width (px or %)
  panelMaxWidth="800px"        // Maximum width (px or %)
  panelDefaultWidth="400px"    // Initial width (px or %)
  onPanelResize={(width) => {
    // Called when user resizes the panel
    console.log('New width:', width);
  }}
/>

Layout Setup

Panel mode requires a flex layout wrapper:

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'row-reverse',  // panel-right
      height: '100vh',
    }}>
      <InAppAI
        displayMode="panel-right"
        messages={messages}
        onMessagesChange={setMessages}
        // ... other props
      />

      <div style={{ flex: 1, overflowY: 'auto' }}>
        <YourMainContent />
      </div>
    </div>
  );
}

For panel-left, use flexDirection: 'row':

<div style={{
  display: 'flex',
  flexDirection: 'row',  // panel-left
  height: '100vh',
}}>

Features

  • Resizable with drag handle
  • Pushes page content (not overlay)
  • Min/max width constraints
  • Resize event callbacks
  • Persistent width (remembers size)

Best For

  • Code editors
  • IDE-like interfaces
  • Data analysis tools
  • Design applications

Example

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function CodeEditor() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [editorWidth, setEditorWidth] = useState('70%');

  const handlePanelResize = (width: number) => {
    setEditorWidth(`${100 - (width / window.innerWidth * 100)}%`);
  };

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'row-reverse',
      height: '100vh',
    }}>
      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        displayMode="panel-right"
        panelMinWidth="25%"
        panelMaxWidth="50%"
        panelDefaultWidth="30%"
        onPanelResize={handlePanelResize}
        theme="dark"
        customStyles={{
          headerTitle: 'AI Copilot',
        }}
      />

      <div style={{ width: editorWidth, overflowY: 'auto' }}>
        <CodeEditorComponent />
      </div>
    </div>
  );
}

Embedded Mode

Integrate chat directly into your layout without any floating UI.

Usage

<div className="chat-container" style={{ height: '600px' }}>
  <InAppAI
    agentId="your-agent-id"
    displayMode="embedded"
    showHeader={false}  // Optional: hide header
    // ... required props
  />
</div>

Features

  • No floating button or popup wrapper
  • Fills parent container (100% width and height)
  • Optional header visibility
  • Perfect for custom layouts
  • Full control over positioning

Best For

  • Custom chat interfaces
  • Multi-conversation apps (ChatGPT-style)
  • Split-screen layouts
  • Embedded widgets

Example: Simple Embedded Chat

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <div className="page-layout">
      <aside className="sidebar">
        <Navigation />
      </aside>

      <main className="main-content">
        <div style={{ height: '100%', maxWidth: '800px', margin: '0 auto' }}>
          <InAppAI
            agentId="your-agent-id"
            messages={messages}
            onMessagesChange={setMessages}
            displayMode="embedded"
            showHeader={true}
            customStyles={{
              headerTitle: 'Customer Support',
            }}
          />
        </div>
      </main>
    </div>
  );
}

Example: Multi-Conversation (ChatGPT-style)

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';

function MultiChatApp() {
  const [conversations, setConversations] = useState<Record<string, Message[]>>({
    'conv-1': [],
    'conv-2': [],
  });
  const [activeConversation, setActiveConversation] = useState('conv-1');

  const messages = conversations[activeConversation] || [];
  const setMessages = (newMessages: Message[]) => {
    setConversations(prev => ({
      ...prev,
      [activeConversation]: newMessages,
    }));
  };

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      {/* Conversation Sidebar */}
      <aside style={{ width: '250px', borderRight: '1px solid #ddd' }}>
        <ConversationList
          conversations={Object.keys(conversations)}
          activeConversation={activeConversation}
          onSelectConversation={setActiveConversation}
        />
      </aside>

      {/* Chat Area */}
      <main style={{ flex: 1 }}>
        <InAppAI
          agentId="your-agent-id"
          displayMode="embedded"
          showHeader={false}
          conversationId={activeConversation}
          messages={messages}
          onMessagesChange={setMessages}
        />
      </main>
    </div>
  );
}

Choosing the Right Mode

Use Popup if you want:

  • Minimal interference with page layout
  • Familiar chat widget pattern
  • Simple drop-in solution

Use Sidebar if you want:

  • Persistent, always-visible chat option
  • Documentation or help assistant
  • Overlay that doesn’t affect content

Use Panel if you want:

  • Split-screen workflow
  • Resizable chat area
  • IDE-like interface

Use Embedded if you want:

  • Full control over positioning
  • Multi-conversation interface
  • Custom chat page layout

Common Issues

Panel not showing side-by-side

Problem: Panel appears below content instead of next to it.

Solution: Use flex layout as shown in the Panel Mode section above.

Sidebar overlapping content

Solution: This is expected behavior. Sidebar uses overlay mode. If you want to push content, use Panel mode instead.

Embedded mode not filling container

Problem: Chat doesn’t fill the parent container.

Solution: Ensure parent has explicit height:

<div style={{ height: '600px' }}>  {/* Must have height */}
  <InAppAI displayMode="embedded" />
</div>

Next Steps