admesh-ui-sdk
Version:
Beautiful, modern React components for displaying AI-powered product recommendations with citation-based conversation ads, auto-triggered widgets, floating chat, conversational interfaces, persistent sidebar, and built-in tracking
269 lines (252 loc) • 10.7 kB
JSX
import React, { useState, useEffect } from 'react';
import { AdMeshSidebar } from 'admesh-ui-sdk';
// Sample recommendations data
const sampleRecommendations = [
{
title: "HubSpot CRM",
reason: "Perfect for remote teams with excellent collaboration features and robust automation",
intent_match_score: 0.92,
admesh_link: "https://useadmesh.com/track?ad_id=hubspot-123",
ad_id: "hubspot-123",
product_id: "hubspot-crm",
has_free_tier: true,
trial_days: 14,
keywords: ["CRM", "Sales", "Marketing", "Automation"],
categories: ["Sales Tools", "CRM"],
features: ["Contact Management", "Deal Pipeline", "Email Integration"],
pricing: "Free tier available, paid plans from $45/month"
},
{
title: "Salesforce Sales Cloud",
reason: "Enterprise-grade CRM with advanced analytics and customization options",
intent_match_score: 0.87,
admesh_link: "https://useadmesh.com/track?ad_id=salesforce-456",
ad_id: "salesforce-456",
product_id: "salesforce-sales",
has_free_tier: false,
trial_days: 30,
keywords: ["CRM", "Enterprise", "Analytics", "Customization"],
categories: ["Sales Tools", "Enterprise Software"],
features: ["Advanced Analytics", "Custom Objects", "Workflow Automation"],
pricing: "Starting from $25/user/month"
},
{
title: "Pipedrive",
reason: "Simple and intuitive CRM designed for small to medium businesses",
intent_match_score: 0.81,
admesh_link: "https://useadmesh.com/track?ad_id=pipedrive-789",
ad_id: "pipedrive-789",
product_id: "pipedrive-crm",
has_free_tier: false,
trial_days: 14,
keywords: ["CRM", "Simple", "SMB", "Pipeline"],
categories: ["Sales Tools", "Small Business"],
features: ["Visual Pipeline", "Activity Reminders", "Email Sync"],
pricing: "Starting from $14.90/user/month"
}
];
export default function SidebarUsageExample() {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [recommendations, setRecommendations] = useState(sampleRecommendations);
const [sidebarConfig, setSidebarConfig] = useState({
position: 'left',
size: 'md',
displayMode: 'recommendations',
collapsible: true,
defaultCollapsed: false,
showHeader: true,
showSearch: true,
showFilters: true,
maxRecommendations: 10
});
// Simulate fetching recommendations based on user context
const fetchRecommendations = async (context) => {
// In a real app, this would call your AdMesh API
console.log('Fetching recommendations for context:', context);
// For demo, we'll just shuffle the existing recommendations
const shuffled = [...sampleRecommendations].sort(() => Math.random() - 0.5);
setRecommendations(shuffled);
};
const handleRecommendationClick = (adId, admeshLink) => {
console.log('Recommendation clicked:', { adId, admeshLink });
// Track the click and open the link
window.open(admeshLink, '_blank');
};
const handleSearch = (query) => {
console.log('Search query:', query);
// In a real app, you might filter recommendations or fetch new ones
};
const handleFilter = (filters) => {
console.log('Filters applied:', filters);
// In a real app, you would apply these filters to your recommendations
};
const theme = {
mode: 'light',
accentColor: '#3b82f6'
};
return (
<div className="min-h-screen bg-gray-50">
{/* AdMesh Sidebar */}
<AdMeshSidebar
recommendations={recommendations}
config={sidebarConfig}
theme={theme}
title="AI Recommendations"
isOpen={sidebarOpen}
onToggle={() => setSidebarOpen(!sidebarOpen)}
onRecommendationClick={handleRecommendationClick}
onSearch={handleSearch}
onFilter={handleFilter}
/>
{/* Main Content */}
<div className={`transition-all duration-300 ${
sidebarOpen && sidebarConfig.position === 'left' ? 'ml-80' :
sidebarOpen && sidebarConfig.position === 'right' ? 'mr-80' : ''
}`}>
<div className="p-8">
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<h1 className="text-3xl font-bold text-gray-900">
AdMesh Sidebar Integration
</h1>
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
{sidebarOpen ? 'Hide' : 'Show'} Sidebar
</button>
</div>
{/* Demo Controls */}
<div className="bg-white rounded-lg border border-gray-200 p-6 mb-8">
<h2 className="text-xl font-semibold mb-4">Sidebar Configuration</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Position */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Position
</label>
<select
value={sidebarConfig.position}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
position: e.target.value
})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
{/* Size */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Size
</label>
<select
value={sidebarConfig.size}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
size: e.target.value
})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="sm">Small</option>
<option value="md">Medium</option>
<option value="lg">Large</option>
<option value="xl">Extra Large</option>
</select>
</div>
{/* Display Mode */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Display Mode
</label>
<select
value={sidebarConfig.displayMode}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
displayMode: e.target.value
})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="recommendations">Recommendations</option>
<option value="mixed">Mixed</option>
<option value="history">History</option>
<option value="favorites">Favorites</option>
</select>
</div>
</div>
<div className="mt-4 flex flex-wrap gap-4">
<label className="flex items-center">
<input
type="checkbox"
checked={sidebarConfig.showSearch}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
showSearch: e.target.checked
})}
className="mr-2"
/>
Show Search
</label>
<label className="flex items-center">
<input
type="checkbox"
checked={sidebarConfig.showFilters}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
showFilters: e.target.checked
})}
className="mr-2"
/>
Show Filters
</label>
<label className="flex items-center">
<input
type="checkbox"
checked={sidebarConfig.collapsible}
onChange={(e) => setSidebarConfig({
...sidebarConfig,
collapsible: e.target.checked
})}
className="mr-2"
/>
Collapsible
</label>
</div>
</div>
{/* Content Sections */}
<div className="space-y-8">
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-xl font-semibold mb-4">Your Application Content</h2>
<p className="text-gray-600 mb-4">
This is your main application content. The AdMesh sidebar appears alongside
this content, providing contextual AI-powered recommendations without
interrupting the user's workflow.
</p>
<button
onClick={() => fetchRecommendations('crm-search')}
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
>
Simulate Context Change
</button>
</section>
<section className="bg-white rounded-lg border border-gray-200 p-6">
<h2 className="text-xl font-semibold mb-4">Integration Benefits</h2>
<ul className="space-y-2 text-gray-600">
<li>• Persistent recommendations that don't interrupt workflow</li>
<li>• Search and filter capabilities for better discovery</li>
<li>• Multiple display modes for different use cases</li>
<li>• Responsive design that works on all screen sizes</li>
<li>• Collapsible interface to maximize content space</li>
<li>• Built-in tracking and analytics</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
);
}