wwtc-sdk-api

import React, { useEffect } from 'react';

import { Subtitles, Chat, MainWrapper } from 'wwtc-sdk';
import 'wwtc-sdk/dist/index.css';

// override styles
import 'css/override.css'

const endpointSession = {
    method: 'GET',
    url: 'https://api.worldwidetechconnections.com/api/Session',
};

const endpointTranslate = {
    method: 'GET',
    url:
        'https://exampleurl.com/api/Translation?text=:text&sourceLanguage=:sourceLanguage&targetLanguage=:targetLanguage&vendor=:vendor&token=:token',
    valueResponse: 'targetText', // Value name that have the text translated in the API endpoint response
};

// You can set static token to don't make API request /Session
// NOTE: set token undefined if the endpoint must request authorization token
const vendors = {
    ttt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    stt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    tts: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
};

function App() {
    return (
        <div>
            <MainWrapper
                audio={true}
                video={true}
                endpointSession={endpointSession}
                vendors={vendors}
            >
                <WrapperComponents />
            </MainWrapper>
        </div>
    );
}

function WrapperComponents(props) {
    // values from autologin
    const { initName, initLanguage, initGender } = props;

    return (
        <div>
            <Chat.ChatUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}
            />
            <Subtitles.SubtitlesUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}

            />
        </div>
    );
}

export default App;

import { Subtitles } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Subtitles.SubtitlesUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

// i.e. preRequestSubtitles()

function WrapperComponents() {
    const preRequestSubtitles = async (text, sourceLanguage, targetLanguage, vendor) => {
        var newText = null;
        if (sourceLanguage === 'english-united-states' && targetLanguage === 'french') {
            newText = text.replace('someWordToDelete', '');
        } else {
            newText = text;
        }

        // Must return the same object structure
        return {
            text: newText,
            sourceLanguage,
            targetLanguage,
            vendor,
        };
    };
    return <Subtitles.SubtitlesUI {...props} preRequestSubtitles={preRequestSubtitles} />;
}

import { Chat } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Chat.ChatUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

import { TextToSpeech } from 'wwtc-sdk';

const endpointTextToSpeech = {
    method: 'GET',
    url:
        'https://api.worldwidetechconnections.com/api/TextToSpeech?text=:text&sourceLanguage=:sourceLanguage&voice=:voice&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ tts }, dispatch] = useStateValue();

    // Dispatch action to start/stop play audio of text
    const handleTTS = () => {
        dispatch({
            type: 'TTS_changeActive',
            value: !tts.active,
        });
    };
    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {tts.active ? 'Stop' : 'Start'} TTS
            </button>
            <TextToSpeech.TextToSpeechUI
                initialVendor="readspeaker"
                initialLanguage="en"
                initialGender="male"
                endpoint={endpointTextToSpeech}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

import { SpeechToText } from 'wwtc-sdk';

const endpointSpeechToText = {
    method: 'POST',
    url:
        'https://api.worldwidetechconnections.com/api/SpeechToText?sourceLanguage=:sourceLanguage&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ stt }, dispatch] = useStateValue();

    // Dispatch action to start/stop capture audio
    // and handle recognized speech to send request to API endpoint
    const handleSTT = () => {
        dispatch({
            type: 'STT_changeActive',
            value: !stt.active,
        });
    };

    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {stt.active ? 'Stop' : 'Start'} speech recognition
            </button>
            <SpeechToText.SpeechToTextUI
                username="John Doe"
                initialLanguage="en-US" // right format: xx-XX
                initialTarget="subtitles" // chat or subtitles
                endpoint={endpointSpeechToText}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

import { StateProvider } from 'wwtc-sdk';

function WrapperComponents() {
    return (
        <div>
            <StateProvider>
                <WrapperComponents />
            </StateProvider>
        </div>
    );
}

export default WrapperComponents;

import { useStateValue, Chat } from 'wwtc-sdk';

function WrapperComponents() {
    const [{ chat, subtitles }, dispatch] = useStateValue();

    /*
        state chat:
        chat = {
            sourceLanguage: "",
            targetLanguage: "",
            visible: true,
        }
    */
    const chatIsVisible = () => {
        console.log(chat.visible);
    };

    const showChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: true,
        });
    };

    const hideChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: false,
        });
    };
    return (
        <div>
            <Chat.ChatUI />
        </div>
    );
}

export default WrapperComponents;

dispatch({
    type: 'action_name',
    value: 'value_action',
});

import { fetchLanguages } from 'wwtc-sdk';

console.log(languages.chatDefaultLanguages);
/*
[
    {
        id: 0,
        text: 'English United States',
        code: 'english-united-states',
        flag: 'united_states',
    },
    { ... }
]
*/