@aykannpm/ai-components

AI-powered React components for sharetribe marketplace applications. This package provides a collection of intelligent UI components designed to enhance e-commerce and marketplace experiences.

🚀 Latest Updates

v2.2.0 - Theme System - AISearch now supports a unified theme object for consistent styling across your marketplace. Define colors, borderRadius, fonts, and spacing once - applies everywhere. Includes extractThemeFromCSS() utility to auto-extract from existing CSS variables. Fully backward compatible with individual props.

v2.1.2 - Provider Inbox - New ProviderInbox component for managing customer escalations. Features real-time Socket.io notifications, escalation cards, reply modal, and filtering/pagination. Perfect for provider dashboards in marketplace applications.

v2.1.1 - Product Compare Feature - New ProductCompare component for AI-powered side-by-side product comparison. Includes intelligent category verification, feature extraction, and support for up to 4 products. Important: When integrating, wrap your layout externally around ProductComparisonPage instead of using the LayoutComponent prop.

v2.1.0 - Comprehensive Styling System - AI Search component now supports extensive customization with 40+ styling props including colors, typography, spacing presets, border radius, shadows, and more. Fully backward compatible with existing implementations.

Installation

npm install @aykannpm/ai-components

Peer Dependencies

This package requires React 16.8+ as a peer dependency:

npm install react react-dom

Available Components

🎯 Related Listings ✅ Available Now

Display AI-powered product recommendations based on the current listing.

import { RelatedListings } from '@aykannpm/ai-components/related-listings';

function ProductPage({ currentListing }) {
  const createSlug = (name) => name.toLowerCase().replace(/\s+/g, '-');
  
  return (
    <div>
      {/* Your product details */}
      <RelatedListings
        listing={currentListing}
        apiBaseUrl="https://your-AIapi.com"
        tenantId="your-tenant-id"
        accessToken="your-access-token"
        createSlug={createSlug}
        maxResults={6}
        onListingClick={(listing) => console.log('Clicked:', listing)}
      />
    </div>
  );
}

🔍 AI Search ✅ Available Now

Intelligent search component with natural language processing capabilities.

import { AISearch } from '@aykannpm/ai-components/ai-search';

// Basic usage with common props
function SearchPage() {
  const createSlug = (name) => name.toLowerCase().replace(/\s+/g, '-');

  const handleSearch = (query, results) => {
    console.log('Search performed:', query, 'Results:', results.length);
    // Track analytics, update state, etc.
  };

  const handleResultClick = (result) => {
    console.log('Result clicked:', result);
    // Navigate, track event, etc.
  };

  return (
    <div>
      <AISearch
        // Required Props
        apiBaseUrl="https://your-api.com"
        tenantId="your-tenant-id"
        accessToken="your-access-token"
        createSlug={createSlug}

        // Common Functional Props
        placeholder="Search for products..."
        maxResults={10}
        showTitle={true}
        title="Product Search"
        onSearch={handleSearch}
        onResultClick={handleResultClick}
      />
    </div>
  );
}

// NEW! Theme-based styling (recommended)
// Define your theme once, use everywhere
const marketplaceTheme = {
  colors: {
    primary: '#5d2bc0',      // Your brand color
    primaryHover: '#492296',
    accent: '#2ecc71',
    background: '#ffffff',
    surface: '#ffffff',
    text: '#343a40',
    textSecondary: '#555',
    border: '#e0e0e0',
    error: '#dc3545',
  },
  borderRadius: '4px',       // Applies consistently to all elements
  fontFamily: 'Inter, sans-serif',
  fontSize: {
    sm: '14px',
    md: '16px',
    lg: '0.9rem',
    xl: '1.5rem',
  },
  spacing: 'normal',         // 'compact' | 'normal' | 'comfortable'
  shadows: 'md',             // 'none' | 'sm' | 'md' | 'lg'
};

function ThemedSearchPage() {
  const createSlug = (name) => name.toLowerCase().replace(/\s+/g, '-');

  return (
    <div>
      <AISearch
        // Required Props
        apiBaseUrl="https://your-api.com"
        tenantId="your-tenant-id"
        accessToken="your-access-token"
        createSlug={createSlug}

        // Theme prop - single source of styling
        theme={marketplaceTheme}

        // Common Functional Props
        placeholder="Search for products..."
        maxResults={10}
        showTitle={true}
        title="Browse Our Catalog"
      />
    </div>
  );
}

// Theme utilities are also exported
import { defaultTheme, mergeTheme, extractThemeFromCSS } from '@aykannpm/ai-components/ai-search';

// Extract theme from existing CSS variables
const theme = extractThemeFromCSS();

// Merge custom theme with defaults
const customTheme = mergeTheme({
  colors: { primary: '#ff5722' },
  borderRadius: '12px',
});

// Individual props still work (backward compatible)
// They override theme values when provided
<AISearch
  theme={marketplaceTheme}
  primaryColor="#ff5722"  // Overrides theme.colors.primary
/>

// See MARKETPLACE_INTEGRATION.md for complete theme documentation

⚖️ Product Compare ✅ Available Now

AI-powered side-by-side product comparison with intelligent category verification and feature extraction.

import { ProductCompare } from '@aykannpm/ai-components/product-compare';

function ComparePage() {
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);

  const handleSearch = async (query) => {
    setIsSearching(true);
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setSearchResults(data.results);
    setIsSearching(false);
  };

  const handleCompare = async (productIds) => {
    const response = await fetch('/api/compare', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productIds })
    });
    const data = await response.json();
    return data.comparison;
  };

  return (
    <ProductCompare
      apiBaseUrl="https://your-api.com"
      onPerformSearch={handleSearch}
      onGetMultipleListings={handleCompare}
      searchResults={searchResults}
      searchInProgress={isSearching}
      searchError={null}
    />
  );
}

Key Features:

• Compare up to 4 products side-by-side
• AI-powered category verification (prevents comparing incompatible products)
• Supports localStorage for pre-filling initial product
• Responsive design with horizontal scrolling
• Visual indicators for defined vs. AI-inferred attributes

📬 Provider Inbox ✅ Available Now

Real-time inbox for providers to manage and respond to customer escalations.

import { ProviderInbox, ProviderReplyModal } from '@aykannpm/ai-components/provider-inbox';

function ProviderDashboard() {
  const [selectedEscalation, setSelectedEscalation] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleReply = (sessionId, escalation) => {
    setSelectedEscalation(escalation);
    setIsModalOpen(true);
  };

  const handleReplySuccess = () => {
    // Refresh inbox or show success message
  };

  return (
    <div>
      <ProviderInbox
        tenantId="your-tenant-id"
        providerId="provider-user-id"
        apiBaseUrl="https://your-api.com"
        accessToken="your-access-token"
        onReply={handleReply}
        enableRealtime={true}
        itemsPerPage={20}
      />

      <ProviderReplyModal
        isOpen={isModalOpen}
        escalation={selectedEscalation}
        tenantId="your-tenant-id"
        apiBaseUrl="https://your-api.com"
        accessToken="your-access-token"
        onClose={() => setIsModalOpen(false)}
        onSuccess={handleReplySuccess}
      />
    </div>
  );
}

Key Features:

• Real-time escalation notifications via Socket.io
• Filter by status (pending/replied)
• Pagination support
• Browser notifications for new escalations
• Reply modal with conversation history
• Connection status indicator

🎨 Attribute Augmentation 🔄 Coming Soon

Automatic product attribute enhancement using AI analysis.

Usage Examples

Basic Implementation

import React from 'react';
import { RelatedListings } from '@aykannpm/ai-components/related-listings';
import { AISearch } from '@aykannpm/ai-components/ai-search';

export default function App({ currentListing }) {
  const createSlug = (name) => name.toLowerCase().replace(/\s+/g, '-');

  return (
    <div className="app">
      <h1>My Marketplace</h1>

      <AISearch
        apiBaseUrl="https://your-api.com"
        tenantId="your-tenant-id"
        accessToken="your-access-token"
        createSlug={createSlug}
        placeholder="Search for products..."
        maxResults={8}
        showTitle={true}
        title="Find Products"
        onSearch={(query, results) => console.log('Search:', query, results)}
      />

      <RelatedListings
        listing={currentListing}
        apiBaseUrl="https://your-api.com"
        tenantId="your-tenant-id"
        accessToken="your-access-token"
        createSlug={createSlug}
        maxResults={4}
      />
    </div>
  );
}

Component API

RelatedListings Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | listing | object | ✅ | - | Current listing object with id and attributes | | apiBaseUrl | string | ✅ | - | Base URL for API calls | | tenantId | string | ✅ | - | Tenant ID for API requests | | accessToken | string | ✅ | - | API access token for authentication | | createSlug | function | ✅ | - | Function to create URL slugs from names | | title | string | ❌ | "We also recommend..." | Title text for the component | | maxResults | number | ❌ | 8 | Maximum number of related items to show | | onListingClick | function | ❌ | - | Callback when a related item is clicked | | LinkComponent | component | ❌ | 'a' | Custom link component (e.g., React Router Link) | | className | string | ❌ | '' | Additional CSS classes for styling |

AISearch Props

Required Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiBaseUrl | string | ✅ | - | Base URL for API calls | | tenantId | string | ✅ | - | Tenant ID for API requests | | accessToken | string | ✅ | - | API access token for authentication | | createSlug | function | ✅ | - | Function to create URL slugs from names |

Common Functional Props (Optional but Recommended)

| Prop | Type | Default | Description | |------|------|---------|-------------| | placeholder | string | "Try out our AI search..." | Input placeholder text | | maxResults | number | 20 | Maximum number of search results to show | | title | string | "Search Results" | Title for the search component | | showTitle | boolean | false | Whether to show the title | | onSearch | function | - | Callback when search is performed (query, results) => void | | onResultClick | function | - | Callback when a search result is clicked (result) => void | | LinkComponent | component | 'a' | Custom link component (e.g., React Router Link) | | className | string | '' | Additional CSS classes for styling |

Theme/Styling Props ✨ NEW - Extensive Customization

The AI Search component now supports comprehensive styling customization. All styling props are optional with sensible defaults.

Colors | Prop | Type | Default | Description | |------|------|---------|-------------| | primaryColor | string | "#007bff" | Primary color for buttons and active states | | primaryHoverColor | string | Auto-generated | Primary hover color (auto-darkens if not provided) | | accentColor | string | "#28a745" | Accent color for prices and highlights | | focusColor | string | Same as primaryColor | Focus outline color for accessibility |

Layout & Spacing | Prop | Type | Default | Description | |------|------|---------|-------------| | borderRadius | string \| object | { container: '12px', input: '6px', button: '6px', card: '8px' } | Border radius for all elements (string applies to all) | | spacing | 'compact' \| 'normal' \| 'comfortable' | 'normal' | Preset spacing configuration | | maxWidth | string | '600px' | Maximum container width | | cardWidth | string | '200px' | Width of result cards | | cardImageHeight | string | '120px' | Height of card images |

Typography | Prop | Type | Default | Description | |------|------|---------|-------------| | fontSize | object | See below | Font sizes for different elements | | fontFamily | string | inherit | Font family for the component |

Colors & Backgrounds | Prop | Type | Default | Description | |------|------|---------|-------------| | backgroundColor | object | See below | Background colors for container, cards, etc. | | textColor | object | See below | Text colors for various elements |

Borders & Shadows | Prop | Type | Default | Description | |------|------|---------|-------------| | borderWidth | number | 1 | Border width in pixels | | borderColor | string | '#e0e0e0' | Main container border color | | inputBorderColor | string | '#ddd' | Input field border color | | cardBorderColor | string | '#dee2e6' | Result card border color | | shadowIntensity | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | Shadow intensity preset | | boxShadow | object | Auto-generated | Custom shadow values (advanced) |

Scrollbar | Prop | Type | Default | Description | |------|------|---------|-------------| | scrollbarStyle | object | { height: '6px', color: '#dee2e6', hoverColor: '#adb5bd' } | Scrollbar styling |

Layout & Display Modes | Prop | Type | Default | Description | |------|------|---------|-------------| | layout | 'scroll' \| 'grid' | 'scroll' | Layout type: horizontal scroll or grid | | gridColumns | string | 'repeat(auto-fill, minmax(160px, 1fr))' | CSS grid-template-columns (only for grid layout) | | gridMaxHeight | string | '400px' | Maximum height for grid container | | gridGap | string | '1rem' | Gap between grid items | | displayMode | 'card' \| 'compact' \| 'mini' \| 'list' | 'card' | Result item display style (card=200px, compact=150px, mini=120px, list=full-width) |

ProviderInbox Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | tenantId | string | ✅ | - | Tenant ID for API requests | | providerId | string | ✅ | - | Provider/user ID for filtering escalations | | apiBaseUrl | string | ✅ | - | Base URL for API calls | | accessToken | string | ✅ | - | API access token for authentication | | onReply | function | ❌ | - | Callback when reply button clicked (sessionId, escalation) => void | | onRefresh | function | ❌ | - | Callback to expose refresh function to parent | | enableRealtime | boolean | ❌ | true | Enable Socket.io real-time notifications | | itemsPerPage | number | ❌ | 20 | Number of escalations per page | | debug | boolean | ❌ | false | Enable debug logging for socket events |

ProviderReplyModal Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | ✅ | - | Whether the modal is open | | escalation | object | ✅ | - | The escalation object to reply to | | tenantId | string | ✅ | - | Tenant ID for API requests | | apiBaseUrl | string | ✅ | - | Base URL for API calls | | accessToken | string | ✅ | - | API access token for authentication | | onClose | function | ✅ | - | Callback when modal is closed | | onSuccess | function | ❌ | - | Callback when reply is successfully sent |

Development

This package is actively developed and maintained. New components will be added regularly.

Roadmap

• ✅ Related Listings
• ✅ AI Search
• ✅ Product Compare
• ✅ Provider Inbox
• 🔄 Attribute Augmentation (Coming Soon)

Made by Aykan Team