@kontextso/sdk-react-native 3.0.7-rc.2 → 4.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "3.0.7-rc.2",
+  "version": "4.0.0-rc.0",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,19 +10,18 @@
   "author": "Kontext",
   "homepage": "https://github.com/kontextso",
   "scripts": {
-    "dev:js": "tsup --watch",
+    "dev:js": "tsup src/index.ts --format cjs,esm --dts --external react react-dom --watch",
     "dev": "npm-run-all2 dev:js",
-    "build:js": "tsup",
-    "build": "npm run build:js && cross-env NODE_ENV=development npm run test:run",
+    "build:js": "tsup src/index.ts --format cjs,esm --dts --external react",
+    "build": "npm run build:js && cross-env NODE_ENV=development",
     "test:run": "vitest --run",
     "test": "vitest --run",
-    "test:watch": "vitest --watch",
+    "test:watch": "vitest --watch", 
     "format": "biome format --write ."
   },
   "devDependencies": {
     "@kontextso/sdk-common": "^1.0.0",
     "@kontextso/typescript-config": "*",
-    "@react-native-community/netinfo": "11.3.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -39,7 +38,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": "^0.80.1",
-    "react-native-device-info": "10.14.0",
+    "react-native-device-info": ">=12.0.0",
     "react-native-webview": "^13.15.0",
     "react-test-renderer": "^18.3.1",
     "tsup": "^8.0.2",
@@ -47,14 +46,13 @@
     "vitest": "^2.1.2"
   },
   "peerDependencies": {
-    "@react-native-community/netinfo": "^11.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
     "react-native-device-info": ">=10.0.0 <15.0.0",
     "react-native-webview": "^13.10.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^3.0.7-rc.1"
+    "@kontextso/sdk-utils": "^1.0.0"
   },
   "files": [
     "dist/*",

package/src/AbstractStream.ts

@@ -0,0 +1,141 @@
+import { handleIframeMessage, type IframeMessage, makeIframeMessage } from '@kontextso/sdk-common'
+import type { Session } from './Session'
+
+export abstract class AbstractStream {
+  protected session: Session
+  protected element: HTMLIFrameElement | null = null
+
+  constructor(session: Session) {
+    this.session = session
+  }
+
+  public getIframeUrl() {
+    const bid = this.session.getLastBid()
+    if (!bid) {
+      return null
+    }
+    const messageId = bid.messageId
+    const bidId = bid.bidId
+
+    const params = new URLSearchParams({
+      code: 'inlineAd',
+      messageId,
+      sdk: 'sdk-js',
+    })
+    const adServerUrl = this.session.config.adServerUrl
+    return `${adServerUrl}/api/frame/${bidId}?${params}`
+  }
+
+  protected updateHeight(height: number) {
+    if (this.element) {
+      this.element.style.height = `${height}px`
+    }
+  }
+
+  protected updateDisplay(display: string) {
+    if (this.element) {
+      this.element.style.display = display
+    }
+  }
+
+  protected sendUpdateMessage() {
+    const bid = this.session.getLastBid()
+    if (!bid) {
+      return
+    }
+    this.element?.contentWindow?.postMessage(
+      makeIframeMessage('update-iframe', {
+        code: 'inlineAd',
+        data: {
+          messages: this.session.getMessages(),
+          sdk: 'sdk-js',
+          messageId: bid.messageId,
+          otherParams: {},
+        },
+      }),
+      '*'
+    )
+  }
+
+  protected processInitIframeMessage() {
+    this.updateDisplay('block')
+    this.sendUpdateMessage()
+  }
+
+  protected processErrorIframeMessage(message: IframeMessage<'error-iframe'>) {
+    console.log('error-iframe', message.data)
+  }
+
+  protected processResizeIframeMessage(message: IframeMessage<'resize-iframe'>) {
+    this.updateHeight(message.data.height)
+  }
+
+  protected processEventIframeMessage(message: IframeMessage<'event-iframe'>) {
+    console.log('event-iframe', message.data)
+  }
+
+  protected processShowIframeMessage() {
+    this.updateDisplay('block')
+  }
+
+  protected processHideIframeMessage() {
+    this.updateDisplay('none')
+  }
+
+  protected setupMessageListener() {
+    const { adServerUrl, placementCode } = this.session.config
+    const messageHandler = handleIframeMessage(
+      (message) => {
+        switch (message.type) {
+          case 'init-iframe':
+            this.processInitIframeMessage()
+            break
+
+          case 'error-iframe':
+            this.processErrorIframeMessage(message)
+            break
+
+          case 'resize-iframe':
+            this.processResizeIframeMessage(message)
+            break
+
+          case 'event-iframe':
+            this.processEventIframeMessage(message)
+            break
+
+          case 'show-iframe':
+            this.processShowIframeMessage()
+            break
+
+          case 'hide-iframe':
+            this.processHideIframeMessage()
+            break
+        }
+      },
+      {
+        origin: adServerUrl,
+        code: placementCode,
+      }
+    )
+    // TODO: remove listener on unmount
+    window.addEventListener('message', messageHandler)
+  }
+
+  protected createIframe() {
+    const iframeUrl = this.getIframeUrl()
+    if (!iframeUrl) {
+      return
+    }
+    const iframe = document.createElement('iframe')
+    iframe.src = iframeUrl
+    iframe.title = 'ad-iframe'
+    iframe.dataset.testid = 'ad-iframe'
+    iframe.style.display = 'none'
+    iframe.style.height = '100%'
+    iframe.style.width = '100%'
+    iframe.style.background = 'transparent'
+    iframe.style.border = '0'
+    iframe.style.colorScheme = 'auto'
+    this.element = iframe
+  }
+}   

package/src/Configuration.ts

@@ -0,0 +1,129 @@
+const DEFAULT_AD_SERVER_URL = 'https://server.megabrain.co'
+const DEFAULT_PLACEMENT_CODE = 'inlineAd'
+const DEFAULT_LOG_LEVEL = 'info'
+
+export type Regulatory = {
+  /** Flag that indicates whether or not the request is subject to GDPR regulations 0 = No, 1 = Yes, omission indicates Unknown */
+  gdpr?: 0 | 1
+  
+  /** When GDPR regulations are in effect this attribute contains the Transparency and Consent Framework's Consent String data structure */
+  gdprConsent?: string
+  
+  /** Flag indicating if this request is subject to the COPPA regulations established by the USA FTC, where 0 = no, 1 = yes, omission indicates Unknown */
+  coppa?: 0 | 1
+  
+  /** Contains the Global Privacy Platform's consent string. See IAB-GPP spec for more details */
+  gpp?: string
+  
+  /** List of the section(s) of the GPP string which should be applied for this transaction */
+  gppSid?: number[]
+  
+  /** Communicates signals regarding consumer privacy under US privacy regulation under CCPA and LSPA */
+  usPrivacy?: string
+}
+
+export interface Character {
+  /** Unique ID of the character */
+  id: string
+  
+  /** Name of the character */
+  name: string
+  
+  /** URL of the character’s avatar */
+  avatarUrl?: string
+  
+  /** Greeting of the character */
+  greeting?: string
+  
+  /** Description of the character’s personality */
+  persona?: string
+  
+  /** Tags of the character  */
+  tags?: string[]
+  
+  /** Whether the character is NSFW */
+  isNsfw?: boolean
+
+  [key: string]: string | string[] | boolean | undefined
+}
+
+export interface ConfigOptions {
+  /** Your publisher token. This token is not secret and is visible in the browser’s developer console. */
+  publisherToken: string
+
+  /** The SDK can be temporarily disabled by setting it to false (no ads will be rendered). */
+  userId: string
+
+  /** Unique identifier of the conversation. */
+  conversationId: string
+
+  /** Character information. */
+  character?: Character
+  /** A list of allowed placement codes. */
+
+  placementCode?: string
+  /** A variant ID that helps determine which type of ad to render. */
+
+  variantId?: string
+  /**  Device-specific identifier provided by the operating systems (IDFA/GAID) */
+
+  /** Regulatory features. */
+  regulatory?: Regulatory
+
+  /** Local and remote logging settings. */
+  logLevel?: 'debug' | 'info' | 'log' | 'warn' | 'error' | 'silent'
+
+  /** The email of the user. */
+  userEmail?: string
+  
+  /** We can set a different server URL (usually used for testing).  */
+  adServerUrl?: string
+}
+
+export class Configuration {
+  private config: ConfigOptions
+
+  constructor(config: ConfigOptions) {
+    this.config = config
+  }
+
+  get publisherToken () {
+    return this.config.publisherToken
+  }
+
+  get userId () {
+    return this.config.userId
+  }
+
+  get conversationId () {
+    return this.config.conversationId
+  }
+
+  get character () {
+    return this.config.character
+  }
+
+  get placementCode () {
+    return this.config.placementCode ?? DEFAULT_PLACEMENT_CODE
+  }
+
+  get variantId () {
+    return this.config.variantId
+  }
+
+  get regulatory () {
+    return this.config.regulatory
+  }
+
+  get logLevel () {
+    return this.config.logLevel ?? DEFAULT_LOG_LEVEL
+  }
+
+  get userEmail () {
+    return this.config.userEmail
+  }
+
+  get adServerUrl () {
+    return this.config.adServerUrl ?? DEFAULT_AD_SERVER_URL
+  }
+}

package/src/InlineAd.tsx

@@ -0,0 +1,168 @@
+import {
+  handleIframeMessage,
+  type IframeMessage,
+  type IframeMessageEvent,
+  type IframeMessageType,
+  makeIframeMessage,
+} from '@kontextso/sdk-common'
+import { Session } from './Session'
+import { useRef, useEffect, useState, useCallback } from 'react'
+import { View } from 'react-native'
+import { WebView, type WebViewMessageEvent } from 'react-native-webview'
+
+interface InlineAdProps {
+  messageId: string
+  session: Session
+  onDebugEvent: (name: string, data?: any) => void
+}
+
+const getIframeUrl = (bidId: string, messageId: string, adServerUrl: string) => {
+  const params = new URLSearchParams({
+    code: 'inlineAd',
+    messageId,
+    sdk: 'sdk-react-native',
+  })
+  return `${adServerUrl}/api/frame/${bidId}?${params}`
+}
+
+export const InlineAd = ({ messageId, session, onDebugEvent }: InlineAdProps) => {
+  const [bidId, setBidId] = useState<string | null>(null)
+  const webViewRef = useRef<WebView>(null)
+  const postRef = useRef<{
+    [messageId: string]: boolean
+  }>({})
+
+  const sendMessage = (
+    webViewRef: React.RefObject<WebView>,
+    type: Extract<IframeMessageType, 'update-iframe' | 'update-dimensions-iframe'>,
+    code: string,
+    data: any
+  ) => {
+    if (postRef.current[messageId]) {
+      onDebugEvent('InlineAd: message already posted', { messageId, ref: postRef.current })
+      return
+    }
+    const message = makeIframeMessage(type, {
+      data,
+      code,
+    })
+    onDebugEvent('InlineAd: post message', { messageId, message })
+    webViewRef.current?.injectJavaScript(`
+      window.dispatchEvent(new MessageEvent('message', {
+        data: ${JSON.stringify(message)}
+      }));
+    `)
+    postRef.current[messageId] = true
+  }
+
+  const updateBid = useCallback(() => {
+    const bid = session.getLastBid()
+    if (!bid || bid.messageId !== messageId) {
+      setBidId(null)
+      onDebugEvent('InlineAd: no bid', { messageId, bid })
+      return
+    }
+    setBidId(bid.bidId)
+    onDebugEvent('InlineAd: update bid', { messageId, bid })
+  }, [session, messageId])
+
+  useEffect(() => {
+    session.setOnUpdateBids(updateBid)
+    return () => {
+      session.setOnUpdateBids(undefined as any)
+      onDebugEvent('InlineAd: remove update bids callback', { messageId })
+    }
+  }, [session, updateBid])
+
+  // still okay to force an initial update when messageId changes
+  useEffect(() => {
+    updateBid()
+  }, [updateBid])
+
+  if (!bidId) {
+    onDebugEvent('InlineAd: no bid id', { messageId, bidId })
+    return null
+  }
+
+  const iframeUrl = getIframeUrl(bidId, messageId, session.config.adServerUrl)
+  if (!iframeUrl) {
+    onDebugEvent('InlineAd: no iframe url', { messageId, bidId })
+    return null
+  }
+
+  const onMessage = (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          onDebugEvent('InlineAd: message handler', { messageId, message, bidId })
+          switch (message.type) {
+            case 'init-iframe':
+              sendMessage(webViewRef, 'update-iframe', 'inlineAd', {
+                messages: session.getMessages(),
+                sdk: 'sdk-react-native',
+                otherParams: {},
+                messageId,
+              })
+              break
+
+            case 'error-iframe':
+              break
+
+            case 'click-iframe':
+              break
+
+            case 'view-iframe':
+              break
+
+            case 'event-iframe':
+              break
+          }
+        },
+        {
+          code: 'inlineAd',
+        }
+      )
+      messageHandler({ data } as IframeMessageEvent)
+    } catch (e) {
+      console.error('error parsing message from webview', e)
+      onDebugEvent('InlineAd: error parsing message from webview', { messageId, error: e })
+    }
+  }
+
+  onDebugEvent('InlineAd: iframe url', { messageId, iframeUrl })
+
+  return (
+    <WebView
+      source={{
+        uri: iframeUrl,
+      }}
+      style={{
+        height: 300,
+        width: '100%',
+        backgroundColor: 'red',
+      }}
+      ref={webViewRef}
+      onMessage={onMessage}
+      allowsInlineMediaPlayback={true}
+      mediaPlaybackRequiresUserAction={false}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      allowsFullscreenVideo={false}
+      injectedJavaScript={`
+        window.addEventListener("message", function(event) {
+          if (window.ReactNativeWebView && event.data) {
+            // ReactNativeWebView.postMessage only supports string data
+            window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+          }
+        }, false);
+      `}
+      onError={() => {
+        onDebugEvent('InlineAd: error loading iframe', { messageId })
+      }}
+      onLoad={() => {
+        onDebugEvent('InlineAd: iframe loaded', { messageId })
+      }}
+    />
+  )
+}

package/src/KontextAds.ts

@@ -0,0 +1,40 @@
+import { type ConfigOptions, Configuration } from './Configuration'
+import type { Message } from '@kontextso/sdk-common'
+import { Session } from './Session'
+import { Platform } from 'react-native'
+import * as packageJson from '../package.json'
+
+type GlobalConfig = Pick<ConfigOptions, 'publisherToken' | 'userId' | 'userEmail' | 'adServerUrl' | 'logLevel' | 'placementCode'>
+
+type SessionConfig = Pick<ConfigOptions, 'conversationId' | 'character' | 'variantId' | 'regulatory'>
+
+const KontextAds = (config: GlobalConfig) => {
+  return {
+    createSession: (sessionConfig: SessionConfig) => createSession({
+      ...config,
+      ...sessionConfig,
+    }),
+  }
+}
+
+const createSession = (options: ConfigOptions) => {
+  const sdk = {
+    name: 'sdk-react-native',
+    platform: Platform.OS === 'ios' ? 'ios' : 'android',
+    version: packageJson.version,
+  } as any
+  const instance = new Session(new Configuration(options), { sdk })
+  return {
+    addMessage: (message: Message) => {
+      instance.addMessage(message)
+      if (message.role === 'user') {
+        instance.preload().requestAd()
+      }
+    },
+    getInstance: () => instance,
+  }
+}
+
+export {
+  KontextAds
+}

package/src/Logger.ts

@@ -0,0 +1,95 @@
+export type LogLevel = 'debug' | 'info' | 'log' | 'warn' | 'error' | 'silent'
+
+export class Logger {
+  private localLevel: LogLevel = 'log'
+  private remoteLevel: LogLevel = 'error'
+  private remoteConfig: { url: string; params: Record<string, any> } | null = null
+
+  private levels: Record<LogLevel, number> = {
+    debug: 0,
+    info: 1,
+    log: 2,
+    warn: 3,
+    error: 4,
+    silent: 5,
+  }
+
+  getLocalLevel() {
+    return this.localLevel
+  }
+
+  setLocalLevel(level: LogLevel) {
+    this.localLevel = level
+  }
+
+  getRemoteLevel() {
+    return this.remoteLevel
+  }
+
+  setRemoteLevel(level: LogLevel) {
+    this.remoteLevel = level
+  }
+
+  configureRemote(url: string, params: Record<string, any>) {
+    this.remoteConfig = { url, params }
+  }
+
+  private shouldLog(level: LogLevel, targetLevel: LogLevel): boolean {
+    if (targetLevel === 'silent') {
+      return false
+    }
+    return this.levels[level] >= this.levels[targetLevel]
+  }
+
+  private logToConsole(level: LogLevel, ...args: any[]) {
+    if (this.shouldLog(level, this.localLevel)) {
+      if (level === 'silent') {
+        return
+      }
+      console[level](...args)
+    }
+  }
+
+  private logToRemote(level: LogLevel, ...args: any[]) {
+    if (this.remoteConfig && this.shouldLog(level, this.remoteLevel)) {
+      // Simulate sending to remote server
+
+      fetch(`${this.remoteConfig.url}/log`, {
+        method: 'POST',
+        body: JSON.stringify({
+          ...this.remoteConfig.params,
+          level: level,
+          message: args,
+          timestamp: new Date().toISOString(),
+        }),
+      }).catch((e) => {
+        // ignore errors
+      })
+    }
+  }
+
+  debug(...args: any[]) {
+    this.logToConsole('debug', ...args)
+    this.logToRemote('debug', ...args)
+  }
+
+  info(...args: any[]) {
+    this.logToConsole('info', ...args)
+    this.logToRemote('info', ...args)
+  }
+
+  log(...args: any[]) {
+    this.logToConsole('log', ...args)
+    this.logToRemote('log', ...args)
+  }
+
+  warn(...args: any[]) {
+    this.logToConsole('warn', ...args)
+    this.logToRemote('warn', ...args)
+  }
+
+  error(...args: any[]) {
+    this.logToConsole('error', ...args)
+    this.logToRemote('error', ...args)
+  }
+}

package/src/NativeStream.ts

@@ -0,0 +1,20 @@
+import { AbstractStream } from "./AbstractStream"
+
+export class NativeStream extends AbstractStream {
+
+  render(messageId: string) {
+    const bid = this.session.getLastBid()
+    if (!bid) {
+      return null
+    }
+    if (bid.messageId !== messageId) {
+      return null
+    }
+    if (this.element) {
+      return this.element
+    }
+    this.setupMessageListener()
+    this.createIframe()
+    return this.element
+  }
+}