@gravity-ai/react 1.1.0 → 1.1.2

package/README.md

@@ -10,166 +10,12 @@ npm install @gravity-ai/react
 
 > **Note:** This package has a peer dependency on React 17+.
 
-## Quick Start
+## Documentation
 
-```tsx
-import { Client } from '@gravity-ai/api';
-import { AdBanner } from '@gravity-ai/react';
-import { useEffect, useState } from 'react';
+For full documentation, examples, and API reference, visit:
 
-const client = new Client('your-api-key');
-
-function ChatMessage({ messages }) {
-  const [ad, setAd] = useState(null);
-
-  useEffect(() => {
-    client.getAd({
-      messages,
-      sessionId: 'session-123',
-      numAds: 1,
-      ui: {
-        placements: [{ placement: 'below_response' }]
-      },
-      userId: 'user-456',
-      testAd: true, // Use for testing (no impressions or clicks)
-    }).then(res => setAd(res?.ads[0] || null));
-  }, [messages]);
-
-  return (
-    <div>
-      {/* Your chat content */}
-      <AdBanner ad={ad} theme="dark" size="medium" />
-    </div>
-  );
-}
-```
-
-## Components
-
-### `<AdBanner />`
-
-A fully-styled, customizable ad banner component.
-
-```tsx
-import { AdBanner } from '@gravity-ai/react';
-
-<AdBanner
-  ad={ad}                // Takes a single ad object (e.g., response.ads[0])
-  theme="dark"           // 'light' | 'dark' | 'minimal' | 'branded'
-  size="medium"          // 'small' | 'medium' | 'large' | 'responsive'
-  showLabel={true}       // Show "Sponsored" label
-  labelText="Ad"         // Custom label text
-  openInNewTab={true}    // Open click URL in new tab
-  onImpression={() => console.log('Impression tracked')}
-  onClickTracked={() => console.log('Click tracked')}
-/>
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ad` | `Ad \| null` | required | A single ad object (e.g., `response.ads[0]`) |
-| `theme` | `'light' \| 'dark' \| 'minimal' \| 'branded'` | `'light'` | Visual theme preset |
-| `size` | `'small' \| 'medium' \| 'large' \| 'responsive'` | `'medium'` | Size preset |
-| `className` | `string` | - | Custom class name for container |
-| `style` | `CSSProperties` | - | Custom inline styles |
-| `showLabel` | `boolean` | `true` | Show "Sponsored" label |
-| `labelText` | `string` | `'Sponsored'` | Custom label text |
-| `fallback` | `ReactNode` | `null` | Content when ad is null |
-| `openInNewTab` | `boolean` | `true` | Open link in new tab |
-| `backgroundColor` | `string` | - | Custom background (overrides theme) |
-| `textColor` | `string` | - | Custom text color (overrides theme) |
-| `accentColor` | `string` | - | Custom accent color |
-| `borderRadius` | `number \| string` | - | Custom border radius |
-| `disableImpressionTracking` | `boolean` | `false` | Disable auto impression tracking |
-| `onClick` | `() => void` | - | Custom click handler |
-| `onImpression` | `() => void` | - | Callback when impression fires |
-| `onClickTracked` | `() => void` | - | Callback when click is tracked |
-
-### `<AdText />`
-
-A minimal text-only component for full styling control.
-
-```tsx
-import { AdText } from '@gravity-ai/react';
-
-<AdText
-  ad={adResponse}
-  className="my-custom-class"
-  style={{ color: 'blue' }}
-/>
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ad` | `Ad \| null` | required | A single ad object (e.g., `response.ads[0]`) |
-| `className` | `string` | - | Custom class name |
-| `style` | `CSSProperties` | - | Custom inline styles |
-| `fallback` | `ReactNode` | `null` | Content when ad is null |
-| `openInNewTab` | `boolean` | `true` | Open link in new tab |
-| `disableImpressionTracking` | `boolean` | `false` | Disable auto tracking |
-| `onClick` | `() => void` | - | Custom click handler |
-| `onImpression` | `() => void` | - | Callback on impression |
-| `onClickTracked` | `() => void` | - | Callback on click |
-
-## Hooks
-
-### `useAdTracking`
-
-For building custom ad components with automatic tracking.
-
-```tsx
-import { useAdTracking } from '@gravity-ai/react';
-
-function CustomAdComponent({ ad }) {
-  const { handleClick } = useAdTracking({
-    ad,
-    onImpression: () => console.log('Viewed'),
-    onClickTracked: () => console.log('Clicked'),
-  });
-
-  return (
-    <a href={ad.clickUrl} onClick={handleClick}>
-      {ad.adText}
-    </a>
-  );
-}
-```
-
-## Theming Examples
-
-### Dark Theme
-```tsx
-<AdBanner ad={ad} theme="dark" />
-```
-
-### Custom Colors
-```tsx
-<AdBanner
-  ad={ad}
-  backgroundColor="#1e1b4b"
-  textColor="#e0e7ff"
-  accentColor="#818cf8"
-/>
-```
-
-### Minimal (Inherit Parent Styles)
-```tsx
-<AdBanner ad={ad} theme="minimal" showLabel={false} />
-```
-
-## TypeScript
-
-Full TypeScript support with exported types:
-
-```tsx
-import type { Ad, AdBannerProps, AdTheme, AdSize } from '@gravity-ai/react';
-```
+**[https://www.trygravity.ai/api](https://www.trygravity.ai/api)**
 
 ## License
 
 MIT
-

package/dist/index.d.mts

@@ -4,29 +4,24 @@ import { CSSProperties, ReactNode } from 'react';
 /**
  * Ad response from the Gravity API
  * This mirrors the type from @gravity-ai/api for convenience
- * Includes optional v1 fields for backward compatibility
  */
 interface AdResponse {
     /** The advertisement copy text */
     adText: string;
-    /** Impression tracking URL */
-    impUrl?: string;
-    /** Click-through tracking URL */
-    clickUrl?: string;
-    /** Payout amount in USD */
-    payout?: number;
-    /** Unique ad identifier (v1) */
-    adId?: string;
-    /** Ad title (v1) */
+    /** Ad title */
     title?: string;
-    /** Brand/advertiser name (v1) */
+    /** Call-to-action text (e.g., 'Learn More', 'Shop Now') */
+    cta?: string;
+    /** Brand/advertiser name */
     brandName?: string;
-    /** Brand logo image URL (v1) */
-    brandImage?: string;
-    /** Landing page URL (v1) */
+    /** Landing page URL */
     url?: string;
-    /** Favicon URL (v1) */
+    /** Favicon URL */
     favicon?: string;
+    /** Impression tracking URL - fire this when ad is displayed */
+    impUrl?: string;
+    /** Click-through tracking URL - use this as href for ad clicks */
+    clickUrl?: string;
 }
 /**
  * Visual theme presets for the ad banner
@@ -116,7 +111,7 @@ interface AdTextProps {
  *   const [ad, setAd] = useState(null);
  *
  *   useEffect(() => {
- *     client.contextualAd({ messages }).then(res => setAd(res?.ads[0] || null));
+ *     client.getAd({ messages, sessionId, placements }).then(res => setAd(res?.[0] || null));
  *   }, [messages]);
  *
  *   return (

package/dist/index.d.ts

@@ -4,29 +4,24 @@ import { CSSProperties, ReactNode } from 'react';
 /**
  * Ad response from the Gravity API
  * This mirrors the type from @gravity-ai/api for convenience
- * Includes optional v1 fields for backward compatibility
  */
 interface AdResponse {
     /** The advertisement copy text */
     adText: string;
-    /** Impression tracking URL */
-    impUrl?: string;
-    /** Click-through tracking URL */
-    clickUrl?: string;
-    /** Payout amount in USD */
-    payout?: number;
-    /** Unique ad identifier (v1) */
-    adId?: string;
-    /** Ad title (v1) */
+    /** Ad title */
     title?: string;
-    /** Brand/advertiser name (v1) */
+    /** Call-to-action text (e.g., 'Learn More', 'Shop Now') */
+    cta?: string;
+    /** Brand/advertiser name */
     brandName?: string;
-    /** Brand logo image URL (v1) */
-    brandImage?: string;
-    /** Landing page URL (v1) */
+    /** Landing page URL */
     url?: string;
-    /** Favicon URL (v1) */
+    /** Favicon URL */
     favicon?: string;
+    /** Impression tracking URL - fire this when ad is displayed */
+    impUrl?: string;
+    /** Click-through tracking URL - use this as href for ad clicks */
+    clickUrl?: string;
 }
 /**
  * Visual theme presets for the ad banner
@@ -116,7 +111,7 @@ interface AdTextProps {
  *   const [ad, setAd] = useState(null);
  *
  *   useEffect(() => {
- *     client.contextualAd({ messages }).then(res => setAd(res?.ads[0] || null));
+ *     client.getAd({ messages, sessionId, placements }).then(res => setAd(res?.[0] || null));
  *   }, [messages]);
  *
  *   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ai/react",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "React components for rendering Gravity AI advertisements",
   "main": "dist/index.js",
   "module": "dist/index.mjs",