admesh-ui-sdk 0.8.1 → 0.9.1

package/CONVERSATIONAL_GUIDE.md

@@ -407,4 +407,4 @@ const handleMessage = async (message) => {
 
 ## 🎉 Complete Example
 
-See `examples/conversational-usage.jsx` for a complete working example with all display modes and configurations.
+Check out the [AdMesh Storybook](https://storybook.useadmesh.com/) for complete working examples with all display modes and configurations.

package/README.md

@@ -2,6 +2,14 @@
 
 A React + TypeScript component library for displaying AdMesh product recommendations with **citation-based conversation ads**, built-in tracking, and theming support.
 
+## 🌐 Live Sites
+
+- **🎭 Interactive Storybook**: [https://storybook.useadmesh.com/](https://storybook.useadmesh.com/) - Explore all components and ad formats
+- **📚 Complete Documentation**: [https://docs.useadmesh.com/](https://docs.useadmesh.com/) - Full SDK documentation and guides
+- **🚀 AdMesh Dashboard**: [https://useadmesh.com](https://useadmesh.com) - Get your API keys and manage campaigns
+
+> **🎨 Component Showcase**: This repository contains the UI SDK components with an interactive Storybook for exploring all ad formats and components.
+
 ## 🚀 Features
 
 - **Citation-Based Conversation Ads** - Display recommendations as numbered references within text, like academic papers or AI assistants
@@ -881,38 +889,118 @@ interface AdMeshTheme {
 
 ## 🎭 Live Storybook Examples
 
-**🌐 Hosted Storybook**: [https://gounimanikumar12.github.io/admesh-ui-sdk/storybook/](https://gounimanikumar12.github.io/admesh-ui-sdk/storybook/)
+**🌐 Hosted Storybook**: [https://storybook.useadmesh.com/](https://storybook.useadmesh.com/)
 
 Explore interactive examples and component variations:
 
-- **📚 Storybook Ad Formats** - Complete narrative examples with embedded citations
 - **📝 Citation Components** - Different citation styles (numbered, bracketed, superscript)
 - **💬 Conversational Ads** - Chat interface integration examples
-- **📊 Format Comparisons** - Traditional vs AdMesh side-by-side demonstrations
 - **🎨 Theme Variations** - Light/dark mode examples
 - **📱 Responsive Design** - Mobile and desktop layout adaptations
 
 **No installation required** - view all ad formats directly in your browser!
 
+## 🎨 Theming & Dark Mode
+
+The AdMesh UI SDK provides comprehensive theming support with full dark mode compliance:
+
+### Theme Configuration
+
+```jsx
+// Light theme (default)
+<AdMeshLayout theme={{ mode: "light" }} />
+
+// Dark theme with proper contrast ratios
+<AdMeshLayout theme={{ mode: "dark" }} />
+
+// Custom accent color
+<AdMeshLayout theme={{ mode: "light", accentColor: "#3b82f6" }} />
+
+// Dynamic theme switching
+const [isDarkMode, setIsDarkMode] = useState(false);
+<AdMeshLayout theme={{ mode: isDarkMode ? "dark" : "light" }} />
+```
+
+### Dark Mode Features
+
+- ✅ **Full Dark Mode Support**: All components automatically adapt to dark theme
+- ✅ **WCAG Accessibility**: Proper contrast ratios meet accessibility guidelines
+- ✅ **Consistent Branding**: "Powered by AdMesh" remains visible in both themes
+- ✅ **Smooth Transitions**: Components transition smoothly between light and dark modes
+- ✅ **CSS Variables**: Uses CSS custom properties for consistent theming
+- ✅ **No Ambiguous Elements**: Clean, focused interface without confusing UI elements
+
+### CSS Custom Properties
+
+The SDK uses CSS custom properties that automatically adjust based on the theme:
+
+```css
+/* Light theme variables */
+.admesh-component[data-admesh-theme="light"] {
+  --admesh-background: #ffffff;
+  --admesh-text: #111827;
+  --admesh-border: #e5e7eb;
+  --admesh-surface: #f9fafb;
+}
+
+/* Dark theme variables */
+.admesh-component[data-admesh-theme="dark"] {
+  --admesh-background: #111827;
+  --admesh-text: #f9fafb;
+  --admesh-border: #374151;
+  --admesh-surface: #1f2937;
+  --admesh-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
+}
+```
+
+### Theme Integration
+
+All AdMesh components automatically respect the theme prop:
+
+```jsx
+// All components support the same theme interface
+<AdMeshProductCard theme={{ mode: "dark" }} />
+<AdMeshCompareTable theme={{ mode: "dark" }} />
+<AdMeshSidebar theme={{ mode: "dark" }} />
+<AdMeshChatWidget theme={{ mode: "dark" }} />
+```
+
 ## 🛠 Development
 
 ```bash
 # Install dependencies
 npm install
 
-# Start Storybook (local development)
-npm run storybook
+# Start Storybook for development
+npm run storybook         # Storybook at :6006
 
-# Or visit the hosted version:
-# https://gounimanikumar12.github.io/admesh-ui-sdk/storybook/
-
-# Build library
+# Build library for NPM
 npm run build
 
+# Build Storybook for deployment
+npm run build-storybook
+
 # Run linting
 npm run lint
 ```
 
+## 🚀 Deployment
+
+### Automatic Vercel Deployment
+1. Go to [vercel.com](https://vercel.com) and import your GitHub repository
+2. Configure build settings:
+   - **Build Command**: `npm run build-storybook`
+   - **Output Directory**: `storybook-static`
+3. Deploy automatically on every push to main
+
+**No environment variables needed** - Vercel's GitHub integration handles everything automatically!
+
+### Manual Deployment
+```bash
+npm run build-storybook
+npx serve storybook-static
+```
+
 ## 📄 License
 
 MIT License

package/dist/components/AdMeshSimpleAd.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { AdMeshRecommendation, AdMeshTheme } from '../types';
+export interface AdMeshSimpleAdProps {
+    /** Product recommendation data */
+    recommendation: AdMeshRecommendation;
+    /** Theme configuration */
+    theme?: AdMeshTheme;
+    /** Custom CSS class name */
+    className?: string;
+    /** Callback when the ad is clicked */
+    onClick?: (adId: string, admeshLink: string) => void;
+    /** Show "powered by AdMesh" branding */
+    showPoweredBy?: boolean;
+    /** Variation style for the ad */
+    variation?: 'question' | 'statement';
+}
+/**
+ * AdMeshSimpleAd - A one-line ad unit with product name, simple description, and link
+ *
+ * Perfect for clean, unobtrusive product recommendations that blend naturally into content.
+ * Supports two variations:
+ * - Question: "Looking for payment solutions for your business? Try Stripe"
+ * - Statement: "Stripe is offering best payment solutions for small business, visit"
+ */
+export declare const AdMeshSimpleAd: React.FC<AdMeshSimpleAdProps>;
+export default AdMeshSimpleAd;
+//# sourceMappingURL=AdMeshSimpleAd.d.ts.map

package/dist/components/AdMeshSimpleAd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdMeshSimpleAd.d.ts","sourceRoot":"","sources":["../../src/components/AdMeshSimpleAd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGlE,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,cAAc,EAAE,oBAAoB,CAAC;IACrC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CACtC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2FxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/index.d.ts

@@ -3,17 +3,11 @@ export { AdMeshCompareTable } from './AdMeshCompareTable';
 export { AdMeshBadge } from './AdMeshBadge';
 export { AdMeshLayout } from './AdMeshLayout';
 export { AdMeshLinkTracker } from './AdMeshLinkTracker';
-export { AdMeshConversationalUnit } from './AdMeshConversationalUnit';
+export { AdMeshSimpleAd } from './AdMeshSimpleAd';
 export { AdMeshConversationSummary } from './AdMeshConversationSummary';
-export { AdMeshInlineRecommendation } from './AdMeshInlineRecommendation';
 export { AdMeshCitationUnit } from './AdMeshCitationUnit';
-export { AdMeshCitationReference } from './AdMeshCitationReference';
 export { AdMeshSidebar } from './AdMeshSidebar';
 export { AdMeshSidebarHeader } from './AdMeshSidebarHeader';
 export { AdMeshSidebarContent } from './AdMeshSidebarContent';
-export { AdMeshFloatingChat } from './AdMeshFloatingChat';
-export { AdMeshChatInterface } from './AdMeshChatInterface';
-export { AdMeshChatMessage } from './AdMeshChatMessage';
-export { AdMeshChatInput } from './AdMeshChatInput';
 export { AdMeshAutoRecommendationWidget } from './AdMeshAutoRecommendationWidget';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/hooks/useAdMeshStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAdMeshStyles.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdMeshStyles.ts"],"names":[],"mappings":"AAiQA,eAAO,MAAM,eAAe,YAwB3B,CAAC"}
+{"version":3,"file":"useAdMeshStyles.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdMeshStyles.ts"],"names":[],"mappings":"AAwUA,eAAO,MAAM,eAAe,YAwB3B,CAAC"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { AdMeshProductCard, AdMeshCompareTable, AdMeshBadge, AdMeshLayout, AdMeshLinkTracker, AdMeshConversationalUnit, AdMeshConversationSummary, AdMeshInlineRecommendation, AdMeshCitationUnit, AdMeshCitationReference, AdMeshSidebar, AdMeshSidebarHeader, AdMeshSidebarContent, AdMeshFloatingChat, AdMeshChatInterface, AdMeshChatMessage, AdMeshChatInput, AdMeshAutoRecommendationWidget } from './components';
+export { AdMeshProductCard, AdMeshCompareTable, AdMeshBadge, AdMeshLayout, AdMeshLinkTracker, AdMeshSimpleAd, AdMeshConversationSummary, AdMeshCitationUnit, AdMeshSidebar, AdMeshSidebarHeader, AdMeshSidebarContent, AdMeshAutoRecommendationWidget } from './components';
 export { useAdMeshTracker, setAdMeshTrackerConfig, buildAdMeshLink, extractTrackingData } from './hooks/useAdMeshTracker';
 export { useAdMeshStyles } from './hooks/useAdMeshStyles';
-export type { AdMeshRecommendation, AdMeshTheme, IntentType, BadgeType, BadgeVariant, BadgeSize, TrackingData, AdMeshProductCardProps, AdMeshCompareTableProps, AdMeshBadgeProps, AdMeshLayoutProps, AdMeshLinkTrackerProps, UseAdMeshTrackerReturn, AgentRecommendationResponse, AdMeshConfig, ConversationalDisplayMode, ConversationContext, ConversationalAdConfig, AdMeshConversationalUnitProps, AdMeshConversationSummaryProps, AdMeshInlineRecommendationProps, AdMeshCitationUnitProps, AdMeshCitationReferenceProps, SidebarPosition, SidebarSize, SidebarDisplayMode, AdMeshSidebarConfig, AdMeshSidebarProps, SidebarFilters, AdMeshSidebarHeaderProps, AdMeshSidebarContentProps, ChatMessageRole, ChatPosition, ChatSize, ChatDisplayMode, ChatMessage, AdMeshChatConfig, AdMeshFloatingChatProps, AdMeshChatInterfaceProps, AdMeshChatMessageProps, AdMeshChatInputProps } from './types/index';
+export type { AdMeshRecommendation, AdMeshTheme, IntentType, BadgeType, BadgeVariant, BadgeSize, TrackingData, AdMeshProductCardProps, AdMeshCompareTableProps, AdMeshBadgeProps, AdMeshLayoutProps, AdMeshLinkTrackerProps, AdMeshSimpleAdProps, UseAdMeshTrackerReturn, AgentRecommendationResponse, AdMeshConfig, ConversationalDisplayMode, ConversationContext, ConversationalAdConfig, AdMeshConversationSummaryProps, AdMeshCitationUnitProps, SidebarPosition, SidebarSize, SidebarDisplayMode, AdMeshSidebarConfig, AdMeshSidebarProps, SidebarFilters, AdMeshSidebarHeaderProps, AdMeshSidebarContentProps, } from './types/index';
 export declare const VERSION = "0.2.1";
 export declare const DEFAULT_CONFIG: {
     trackingEnabled: boolean;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,8BAA8B,EAC/B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,sBAAsB,EACtB,2BAA2B,EAC3B,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,6BAA6B,EAC7B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,4BAA4B,EAC5B,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,wBAAwB,EACxB,yBAAyB,EACzB,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,OAAO,UAAU,CAAC;AAG/B,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,yBAAyB,EACzB,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,8BAA8B,EAC/B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EACV,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,8BAA8B,EAC9B,uBAAuB,EACvB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,wBAAwB,EACxB,yBAAyB,GAE1B,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,OAAO,UAAU,CAAC;AAG/B,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC"}