1import KinesteXAIKit
2
3@State var showKinesteX = false // Controls KinesteX SDK visibility
4@State var isLoading = false    // Optional: Controls custom loading screen
5
6// Initialize with your API key, company name, and unique user ID
7let kinestex = KinesteXAIKit(
8    apiKey: "YOUR_API_KEY",
9    companyName: "YOUR_COMPANY",
10    userId: "unique-user-id"
11)
12
13// Optional: UserDetails to customize workout intensity
14let user = UserDetails(
15    age: 20,
16    height: 170,
17    weight: 70,
18    gender: .Male,
19    lifestyle: .Active
20)

import com.kinestex.kinestexsdkkotlin.KinesteXSDK

// Initialize the SDK in your Application class as early as possible
class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        KinesteXSDK.initialize(
            context = this,
            apiKey = "YOUR_API_KEY",
            companyName = "YOUR_COMPANY",
            userId = "unique-user-id"
        )
    }
}

// 1. Create a reference to KinesteXSDK component
const kinestexSDKRef = useRef<KinesteXSDKCamera>(null);

// 2. Create postData object to initialize KinesteX session
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID', // unique per user
  company: 'YOUR_COMPANY',
  style: {
    style: 'dark', // 'dark' or 'light'
    loadingBackgroundColor: '000000', // hex without #
  },
  customParameters: {
    // language: 'es' // customize language
  },
  // Optional: UserDetails for workout intensity
  age: 25,
  height: 180, // cm
  weight: 75, // kg
  gender: 'Male',
  lifestyle: Lifestyle.Active,
};

// 3. Handle real-time messages from KinesteX
const handleMessage = (type: string, data: { [key: string]: any }) => {
  switch (type) {
    case 'exit_kinestex':
      console.log('User exited');
      setShowKinesteX(false);
      break;
    case 'plan_unlocked':
      console.log('Plan unlocked:', data);
      break;
    default:
      console.log('Message:', type, data);
      break;
  }
};

import 'package:kinestex_sdk_flutter/kinestex_sdk.dart';
// Initialize the SDK in your main function as early as possible.
await KinesteXAIFramework.initialize(
  apiKey: "YOUR_API_KEY",
  companyName: "YOUR_COMPANY",
  userId: "unique-user-id",
);

// 1. Define the config data to be sent to the iframe
  const postData = {
  userId: "YOUR_USER_ID", // Unique identifier for the user
  company: "YOUR_COMPANY", // Your organization's name from kinestex admin dashboard
  key: "YOUR_API_KEY", // Your API Key from kinestex admin dashboard

  // Optional parameters for customization
  style: "dark", // dark or light theme

  // user related customization
  age: 30, // User's age (optional)
  height: 175, // User's height in cm (optional)
  weight: 70, // User's weight in kg (optional)
  gender: "Female", // Gender (optional)
};

// 2. Sending the messages to the iframe will be done through postMessage API
function sendMessage() {
      if (webView.contentWindow) {
        webView.contentWindow.postMessage(postData, srcURL); // post initial data to start session
      } else {
        setTimeout(() => {
          try {
            webView.contentWindow.postMessage(postData, srcURL); // post initial data to start session
          } catch {
            webView.contentWindow.postMessage(postData, srcURL); // retry sending message
          }
        }, 100);
      }
}
// 3. Whenever you want to display the view:
webView.src = srcURL; // Update this URL for specific features

webView.onload = () => {
    sendMessage();
};

// 4. Handle the loading confirmation received from the iframe to send the initial data once more (iOS specific verification)
window.addEventListener("message", (event) => {
  if (event.origin !== "https://ai.kinestex.com") return; // prevent listening for messages from other sources for security

  const message = JSON.parse(event.data);
  if (message.type === 'kinestex_loaded') {
    sendMessage();
  }
});

// 1. Create a reference to KinesteXSDK component
const kinestexSDKRef = useRef<KinesteXSDKCamera>(null);

// 2. Create postData object to initialize KinesteX session
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID', // unique per user
  company: 'YOUR_COMPANY',
  style: {
    style: 'dark', // 'dark' or 'light'
    loadingBackgroundColor: '000000', // hex without #
  },
  customParameters: {
    // language: 'es' // customize language
  },
  // Optional: UserDetails for workout intensity
  age: 25,
  height: 180, // cm
  weight: 75, // kg
  gender: 'Male',
  lifestyle: Lifestyle.Active,
};

// 3. Handle real-time messages from KinesteX
const handleMessage = (type: string, data: { [key: string]: any }) => {
  switch (type) {
    case 'exit_kinestex':
      console.log('User exited');
      setShowKinesteX(false);
      break;
    case 'plan_unlocked':
      console.log('Plan unlocked:', data);
      break;
    default:
      console.log('Message:', type, data);
      break;
  }
};