React

  import React from 'react'
  import type {
    AddressData,
    ChatbotData,
    Configuration,
    PonyfillFactoryCredentials,
    UserData,
    ViewsConfiguration,
    RetorikThemeColors,
    RetorikMenusConfiguration
  } from '@davi-ai/retorik-framework'
  import {
    RetorikWidget,
    RetorikAgent,
    AvailableSubViews,
    characters
  } from '@davi-ai/retorik-framework'

  const defaultMenusConfig: RetorikMenusConfiguration = {
    customMenu: [],
    subMenu: [
      { view: AvailableSubViews.history, indice: 1 },
      { view: AvailableSubViews.tutorial, indice: 2 }
    ]
  }

  const defaultConfig: Configuration = {
    isUsedOnBorne: false,
    position: {
      searchForLocation: true
    },
    locales: {
      default: 'fr-FR'
    },
    logo: {
      src: 'images/logo_DAVI.png'
    },
    skipWelcome: false,
    preventExpectedInputHint: false,
    hideRetorikLogo: true,
    enableConversationCookie: false,
    enableTelemetry: false,
    ...defaultMenusConfig
  }

  const defaultViewsConfiguration: ViewsConfiguration = {
    homeRoute: 'home',
    webcamRotation: 90,
    views: {
      home: {
        background: {
          image: 'images/background.webp',
          style: 'image'
        }
      },
      news: {
        intervalInSeconds: 2,
        loop: true,
        openingVideo: 'videos/intro.mp4',
        background: {
          style: 'image',
          image: 'images/background.webp'
        }
      }
    }
  }

  const defaultChatbotData: ChatbotData = {
    size: '200vh',
    height: undefined
  }

  const ponyfillFactoryCredentials: PonyfillFactoryCredentials = {
    region: '<region>',
    subscriptionKey: '<subscription_key>'
  }

  const colors: RetorikThemeColors = {
    theme: 'dark',
    primary: '#165A79',
    secondary: '#165A79',
    loader: {
      animation: '#00BDFF',
      background: 'rgba(18,18,18,0.9)',
      text: '#FFF',
      toggle: {
        text: '#FFF',
        background: '#165A79'
      },
      button: {
        background: {
          default: '#FFF',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#FFF'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      }
    },
    card: {
      frame: {
        background: 'rgba(255, 255, 255, 0.9)',
        border: '#165A79',
        text: '#165A79'
      },
      button: {
        background: {
          default: 'transparent',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#165A79'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      },
      discoverButton: {
        background: {
          default: '#eaebf0',
          hover: 'transparent'
        },
        border: {
          default: 'transparent',
          hover: '#FFF'
        },
        text: {
          default: '#575F6B',
          hover: '#FFF'
        }
      }
    },
    textMode: {
      panel: {
        background: 'transparent',
        border: 'transparent',
        conversationUser: 'rgba(0, 0, 0, 0.9)',
        conversationBot: '#165A79'
      }
    },
    vocalMode: {
      subtitles: {
        text: '#FFF',
        background: '#165A79'
      }
    },
    formInput: {
      text: {
        default: '#165A79',
        hover: '#000'
      },
      inputRadioCheckbox: {
        unchecked: {
          background: '#FFF',
          border: '#165A79'
        },
        checked: {
          background: '#FFF',
          border: '#165A79',
          item: '#165A79'
        }
      },
      inputButton: {
        background: {
          default: '#FFF',
          hover: '#165A79'
        },
        border: {
          default: '#165A79',
          hover: '#165A79'
        },
        text: {
          default: '#165A79',
          hover: '#FFF'
        }
      },
      likert: {
        default: '#A0A0A0',
        hover: '#165A79'
      }
    }
  }

  const props: RetorikMainComponentProps & {
    widgetConfig?: WidgetConfiguration
  } = {
    config: defaultConfig,
    viewsConfig: defaultViewsConfiguration,
    chatbotData: defaultChatbotData,
    agentData: characters.zahra,
    addressData: {
      tenant: '<mon_tenant>'
    }
    ponyfillFactoryCredentials: ponyfillFactoryCredentials,
    customVoice: {
      voice: 'JennyMultilingualNeural'
    },
    defaultMode: 2,
    colors: colors,
    skipLoader: false,
    widgetConfig: {} // uniquement lors de l'utilisation en mode widget
  }

  const App = () => {
    // Rendu en mode normal (mobile / desktop / borne)
    return <RetorikAgent {...props} />

    // Rendu en mode widget uniquement
    return <RetorikWidget {...props} />
  }

  export default App