Skip to main content

Interactive Tools

Interactive Tools are specialized UI components that provide dynamic functionality like chat interfaces, document uploaders, and action panels. They can be configured via tenant config and respond to user interactions.

ChatPanel​

AI-powered chat interface with streaming responses, citations, and conversation management.

Props​

interface ChatPanelProps {
  title?: string;
  placeholder?: string;
  collapsed?: boolean;
  position?: 'right' | 'left' | 'bottom';
  systemPrompt?: string;
  context?: ChatContext;
  onMessage?: (message: Message) => void;
  className?: string;
}

Configuration​

{
  "component": "ChatPanel",
  "props": {
    "title": "AI Assistant",
    "placeholder": "Ask me anything...",
    "collapsed": false,
    "position": "right",
    "systemPrompt": "You are a helpful project management assistant."
  }
}

Usage in JSX​

import { ChatPanel } from '@enterpriseaigroup/core/tools';

function App() {
  return (
    <ChatPanel
      title="AI Assistant"
      placeholder="How can I help?"
      context={{
        resources: [{ type: 'project', id: currentProjectId }]
      }}
      onMessage={(msg) => {
        console.log('New message:', msg);
      }}
    />
  );
}

Features​

  • Real-time SSE streaming responses
  • Citation display with source links
  • Conversation history
  • Auto-scroll to latest messages
  • Markdown rendering
  • Code syntax highlighting
  • Copy message content
  • Regenerate responses
  • Export conversation

Context Integration​

Provide resource or document context:

<ChatPanel
  context={{
    resources: [
      { type: 'project', id: 'proj_123' },
      { type: 'deal', id: 'deal_456' }
    ],
    documents: ['doc_abc', 'doc_def'],
    includeHistory: true
  }}
/>

DocumentUploader​

Multi-file upload component with drag-and-drop, progress tracking, and classification.

Props​

interface DocumentUploaderProps {
  title?: string;
  accept?: string[];
  maxSize?: number;
  maxFiles?: number;
  autoClassify?: boolean;
  autoIndex?: boolean;
  type?: string;
  tags?: string[];
  onUploadComplete?: (documents: Document[]) => void;
  onUploadError?: (error: Error) => void;
  className?: string;
}

Configuration​

{
  "component": "DocumentUploader",
  "props": {
    "title": "Upload Documents",
    "accept": [".pdf", ".doc", ".docx"],
    "maxSize": 104857600,
    "maxFiles": 10,
    "autoClassify": true,
    "autoIndex": true,
    "type": "contract",
    "tags": ["legal", "pending-review"]
  }
}

Usage in JSX​

import { DocumentUploader } from '@enterpriseaigroup/core/tools';

function App() {
  return (
    <DocumentUploader
      accept={['.pdf', '.doc', '.docx']}
      maxSize={100 * 1024 * 1024} // 100 MB
      autoClassify={true}
      autoIndex={true}
      onUploadComplete={(docs) => {
        console.log(`Uploaded ${docs.length} documents`);
      }}
    />
  );
}

Features​

  • Drag-and-drop upload area
  • Multi-file selection
  • Upload progress bars
  • File type validation
  • Size limit enforcement
  • Automatic classification
  • Automatic RAG indexing
  • Thumbnail previews
  • Batch operations
  • Cancel uploads

Drag and Drop​

<DocumentUploader
  accept={['.pdf', '.png', '.jpg']}
  maxFiles={5}
  onUploadComplete={(docs) => {
    docs.forEach(doc => {
      console.log(`Uploaded: ${doc.filename}`);
    });
  }}
/>

ActionBar​

Configurable action toolbar with buttons, menus, and search.

Props​

interface ActionBarProps {
  actions: Action[];
  search?: SearchConfig;
  position?: 'top' | 'bottom';
  sticky?: boolean;
  className?: string;
}

interface Action {
  label: string;
  icon?: string;
  onClick?: () => void;
  href?: string;
  type?: 'button' | 'menu' | 'dropdown';
  items?: ActionItem[];
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'danger';
}

Configuration​

{
  "component": "ActionBar",
  "props": {
    "position": "top",
    "sticky": true,
    "actions": [
      {
        "label": "New Project",
        "icon": "plus",
        "type": "button",
        "variant": "primary"
      },
      {
        "label": "Export",
        "icon": "download",
        "type": "dropdown",
        "items": [
          { "label": "Export as CSV", "value": "csv" },
          { "label": "Export as PDF", "value": "pdf" }
        ]
      },
      {
        "label": "More",
        "type": "menu",
        "items": [
          { "label": "Settings", "href": "/settings" },
          { "label": "Help", "href": "/help" }
        ]
      }
    ],
    "search": {
      "enabled": true,
      "placeholder": "Search projects..."
    }
  }
}

Usage in JSX​

import { ActionBar } from '@enterpriseaigroup/core/tools';

function App() {
  return (
    <ActionBar
      actions={[
        {
          label: 'Create',
          icon: 'plus',
          variant: 'primary',
          onClick: () => openCreateDialog()
        },
        {
          label: 'Filter',
          icon: 'filter',
          type: 'dropdown',
          items: [
            { label: 'Active', value: 'active' },
            { label: 'Completed', value: 'completed' }
          ]
        }
      ]}
      search={{
        enabled: true,
        placeholder: 'Search...',
        onSearch: (query) => handleSearch(query)
      }}
    />
  );
}

FilterPanel​

Advanced filtering UI with multiple filter types.

Props​

interface FilterPanelProps {
  filters: FilterDefinition[];
  values?: Record<string, any>;
  onChange?: (filters: Record<string, any>) => void;
  collapsed?: boolean;
  position?: 'left' | 'right';
  className?: string;
}

interface FilterDefinition {
  key: string;
  label: string;
  type: 'text' | 'select' | 'multiselect' | 'range' | 'date';
  options?: FilterOption[];
  min?: number;
  max?: number;
}

Configuration​

{
  "component": "FilterPanel",
  "props": {
    "collapsed": false,
    "position": "left",
    "filters": [
      {
        "key": "status",
        "label": "Status",
        "type": "multiselect",
        "options": [
          { "label": "Active", "value": "active" },
          { "label": "Completed", "value": "completed" },
          { "label": "Archived", "value": "archived" }
        ]
      },
      {
        "key": "budget",
        "label": "Budget",
        "type": "range",
        "min": 0,
        "max": 1000000
      },
      {
        "key": "startDate",
        "label": "Start Date",
        "type": "date"
      }
    ]
  }
}

Usage in JSX​

import { FilterPanel } from '@enterpriseaigroup/core/tools';
import { useState } from 'react';

function App() {
  const [filters, setFilters] = useState({});

  return (
    <FilterPanel
      filters={[
        {
          key: 'status',
          label: 'Status',
          type: 'select',
          options: [
            { label: 'All', value: '' },
            { label: 'Active', value: 'active' },
            { label: 'Completed', value: 'completed' }
          ]
        },
        {
          key: 'budget',
          label: 'Budget Range',
          type: 'range',
          min: 0,
          max: 1000000
        }
      ]}
      values={filters}
      onChange={setFilters}
    />
  );
}

NotificationCenter​

In-app notification center with toast messages.

Props​

interface NotificationCenterProps {
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  maxNotifications?: number;
  autoClose?: number;
  showUnreadBadge?: boolean;
  className?: string;
}

Usage​

import { NotificationCenter, useNotifications } from '@enterpriseaigroup/core/tools';

function App() {
  const { notify } = useNotifications();

  const handleAction = async () => {
    try {
      await someAction();
      notify.success('Action completed successfully');
    } catch (error) {
      notify.error('Action failed', { description: error.message });
    }
  };

  return (
    <>
      <NotificationCenter position="top-right" />
      <button onClick={handleAction}>Do Something</button>
    </>
  );
}

Notification Types​

const { notify } = useNotifications();

// Success
notify.success('Changes saved');

// Error
notify.error('Failed to save', {
  description: 'Please try again',
  action: { label: 'Retry', onClick: () => retry() }
});

// Warning
notify.warning('Unsaved changes');

// Info
notify.info('New update available');

// Custom
notify({
  type: 'custom',
  title: 'Custom Notification',
  description: 'With custom styling',
  duration: 5000
});

CommandPalette​

Keyboard-driven command palette for quick actions.

Props​

interface CommandPaletteProps {
  commands: Command[];
  hotkey?: string;
  placeholder?: string;
  className?: string;
}

interface Command {
  id: string;
  label: string;
  description?: string;
  icon?: string;
  keywords?: string[];
  action: () => void;
  shortcut?: string;
}

Configuration​

{
  "component": "CommandPalette",
  "props": {
    "hotkey": "cmd+k",
    "placeholder": "Type a command...",
    "commands": [
      {
        "id": "new-project",
        "label": "New Project",
        "description": "Create a new project",
        "icon": "plus",
        "keywords": ["create", "add"],
        "shortcut": "cmd+n"
      },
      {
        "id": "search",
        "label": "Search Projects",
        "description": "Search all projects",
        "icon": "search",
        "keywords": ["find", "lookup"]
      }
    ]
  }
}

Usage in JSX​

import { CommandPalette } from '@enterpriseaigroup/core/tools';

function App() {
  return (
    <CommandPalette
      hotkey="cmd+k"
      commands={[
        {
          id: 'new-project',
          label: 'New Project',
          icon: 'plus',
          action: () => openCreateDialog(),
          shortcut: 'cmd+n'
        },
        {
          id: 'settings',
          label: 'Open Settings',
          icon: 'cog',
          action: () => router.push('/settings')
        }
      ]}
    />
  );
}

Complete Example​

Full page with multiple interactive tools:

import {
  ChatPanel,
  DocumentUploader,
  ActionBar,
  FilterPanel,
  NotificationCenter,
  CommandPalette
} from '@enterpriseaigroup/core/tools';
import { useState } from 'react';

function ProjectManagement() {
  const [filters, setFilters] = useState({});
  const [chatOpen, setChatOpen] = useState(true);

  return (
    <div className="app">
      <ActionBar
        actions={[
          {
            label: 'New Project',
            icon: 'plus',
            variant: 'primary',
            onClick: () => createProject()
          },
          {
            label: 'Upload',
            icon: 'upload',
            onClick: () => openUploadDialog()
          }
        ]}
        search={{
          enabled: true,
          onSearch: (q) => handleSearch(q)
        }}
      />

      <div className="main-content">
        <FilterPanel
          filters={[
            {
              key: 'status',
              label: 'Status',
              type: 'multiselect',
              options: [
                { label: 'Active', value: 'active' },
                { label: 'Completed', value: 'completed' }
              ]
            }
          ]}
          values={filters}
          onChange={setFilters}
        />

        <div className="content">
          {/* Main content */}
        </div>

        {chatOpen && (
          <ChatPanel
            title="AI Assistant"
            onMessage={(msg) => console.log(msg)}
          />
        )}
      </div>

      <NotificationCenter position="top-right" />
      <CommandPalette
        hotkey="cmd+k"
        commands={[
          {
            id: 'new',
            label: 'New Project',
            action: () => createProject()
          }
        ]}
      />
    </div>
  );
}

Styling Interactive Tools​

CSS Variables​

Customize appearance using CSS variables:

:root {
  --chat-panel-width: 400px;
  --chat-panel-bg: #ffffff;
  --filter-panel-width: 300px;
  --action-bar-height: 60px;
  --notification-width: 380px;
}

Custom Classes​

Apply custom styles via className prop:

<ChatPanel
  className="custom-chat premium-style"
/>

Next Steps​