Push Pages

Create fullscreen UI experiences separate from the chat flow

Overview

Push Pages allow tools to create dedicated UI views that appear in a side panel, separate from the chat interface. This provides more screen space for complex visualizations and interactions compared to inline chat rendering.

Render Modes

UIBuilders support two render modes:

  • inline (default): Components appear within the chat flow
  • page: Components appear in a dedicated side panel

Usage

Set the render mode when building components:

import { TableUIBuilder } from '@dainprotocol/utils';

const tableUI = new TableUIBuilder()
  .setRenderMode('page')  // Push to side panel
  .addColumns([...])
  .rows([...])
  .build();

Example: Stock Details Page

import { 
  TableUIBuilder,
  CardUIBuilder,
  ChartUIBuilder 
} from '@dainprotocol/utils';

// Create full-page stock details
const tableUI = new TableUIBuilder()
  .setRenderMode('page')  // Render in side panel
  .addColumns([
    { key: 'field', header: 'Field' },
    { key: 'value', header: 'Value' }
  ])
  .rows([
    { field: 'Name', value: details.name },
    { field: 'Market Cap', value: details.marketCap },
    { field: 'Exchange', value: details.exchange }
  ]);

// Create price chart
const chartUI = new ChartUIBuilder()
  .setRenderMode('page')  // Render in side panel
  .type('line')
  .title('Price History')
  .chartData(priceData)
  .dataKeys({
    x: 'date',
    y: 'price'
  });

// Combine in card
const cardUI = new CardUIBuilder()
  .setRenderMode('page')  // Render in side panel
  .title('Stock Analysis')
  .addChild(chartUI.build())
  .addChild(tableUI.build());

Use Cases

Push Pages are ideal for:

  • Detailed data views
  • Complex dashboards
  • Multi-chart analysis
  • Large data tables
  • Form workflows
  • Documentation views

Examples from Stock Service

News Table (Page Mode)

const tableBuilder = new TableUIBuilder()
  .setRenderMode('page')  // Opens in side panel
  .addColumns([
    { key: 'publisher', header: 'Source' },
    { key: 'title', header: 'Title' },
    { key: 'url', header: 'Link' }
  ])
  .rows(articles);

Stock Chart (Page Mode)

const chartBuilder = new ChartUIBuilder()
  .setRenderMode('page')  // Opens in side panel
  .type('line')
  .title(`${ticker} Price History`)
  .chartData(priceData)
  .dataKeys({
    x: 'date',
    y: 'price'
  });

Stock Details (Inline Mode)

const cardUI = new CardUIBuilder()
  // No setRenderMode = default inline
  .title(`${ticker} Overview`)
  .content(`Current Price: $${price}`)
  .build();