import OmnichannelChatSDK from '@microsoft/omnichannel-chat-sdk';

const omnichannelConfig = {
    orgUrl: "",
    orgId: "",
    widgetId: ""
};

const chatSDKConfig = { // Optional
    dataMasking: {
        disable: false,
        maskingCharacter: '#'
    }
};

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);

const optionalParams = {
    getLiveChatConfigOptionalParams: {
        sendCacheHeaders: false // Whether to send Cache-Control HTTP header to GetChatConfig call
    }
};

await chatSDK.initialize(optionalParams);

const customContext = {
    'contextKey1': {'value': 'contextValue1', 'isDisplayable': true},
    'contextKey2': {'value': 12.34, 'isDisplayable': false},
    'contextKey3': {'value': true}
};

const optionalParams = {
    preChatResponse: '', // PreChatSurvey response
    liveChatContext: {}, // EXISTING chat context data
    customContext, // Custom Context
    sendDefaultInitContext: true // Send default init context ⚠️ Web only
};

await chatSDK.startChat(optionalParams);

await chatSDK.endChat();

const preChatSurvey = await getPreChatSurvey(); // Adaptive Cards JSON payload data

const parseToJSON = false;
const preChatSurvey = await getPreChatSurvey(parseToJSON); // Adaptive Cards payload data as string

const liveChatConfig = await chatSDK.getLiveChatConfig();

const liveChatContext = await chatSDK.getCurrentLiveChatContext();

const dataMaskingRules = await chatSDK.getDataMaskingRules();

const optionalParams = {
    reconnectId: '', // reconnect Id
};

const chatReconnectContext = await chatSDK.getChatReconnectContext(optionalParams);

const optionalParams = {
    liveChatContext: {}, // EXISTING chat context data
};

const conversationDetails = await chatSDK.getConversationDetails(optionalParams);

const chatToken = await chatSDK.getChatToken();

const callingToken = await chatSDK.getCallingToken();

const messages = await chatSDK.getMessages();

import {DeliveryMode, MessageContentType, MessageType, PersonType} from '@microsoft/omnichannel-chat-sdk';

...

const displayName = "Contoso"
const message = "Sample message from customer";
const messageToSend = {
    content: message
};

await chatSDK.sendMessage(messageToSend);

const optionalParams = {
    rehydrate: true, // Rehydrate all previous messages of existing conversation (false by default)
}

chatSDK.onNewMessage((message) => {
    console.log(`[NewMessage] ${message.content}`);
    console.log(message);
}, optionalParams);

chatSDK.onTypingEvent(() => {
    console.log("Agent is typing...");
})

chatSDK.onAgentEndSession(() => {
    console.log("Session ended!");
});

await chatSDK.sendTypingEvent();

const body = {
    emailAddress: 'contoso@microsoft.com',
    attachmentMessage: 'Attachment Message'
};
await chatSDK.emailLiveChatTranscript(body);

const optionalParams = {
    liveChatContext: {}, // EXISTING chat context data
};

await chatSDK.getLiveChatTranscript(optionalParams);

const fileInfo = {
    name: '',
    type: '',
    size: '',
    data: ''
};
await chatSDK.uploadFileAttachment(fileInfo);

const blobResponse = await chatsdk.downloadFileAttachment(message.fileMetadata);

...

// React Native implementation
const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(blobResponse);
fileReaderInstance.onload = () => {
    const base64data = fileReaderInstance.result;
    return <Image source={{uri: base64data}}/>
}

const chatAdapter = await chatSDK.createChatAdapter();

try {
    const VoiceVideoCallingSDK = await chatSDK.getVoiceVideoCalling();
    console.log("VoiceVideoCalling loaded");
} catch (e) {
    console.log(`Failed to load VoiceVideoCalling: ${e}`);

    if (e.message === 'UnsupportedPlatform') {
        // Voice Video Calling feature is not supported on this platform
    }

    if (e.message === 'FeatureDisabled') {
        // Voice Video Calling feature is disabled on admin side
    }
}

const postChatSurveyContext = await chatSDK.getPostChatSurveyContext();

const agentAvailability = await chatSDK.getAgentAvailability();

    import * as AdaptiveCards, { Action } from "adaptivecards";

    ...

    const preChatSurvey = await chatSDK.getPreChatSurvey();

    ...

    // Web implementation
    const renderPreChatSurvey = () => {
        const adaptiveCard = new AdaptiveCards.AdaptiveCard();
        adaptiveCard.parse(preChatSurvey); // Parses Adaptive Card JSON data
        adaptiveCard.onExecuteAction = async (action: Action) => { // Adaptive Card event handler
            const preChatResponse = (action as any).data;
            const optionalParams: any = {};
            if (preChatResponse) {
                optionalParams.preChatResponse = preChatResponse;
            }
            await chatSDK.startChat(optionalParams);
        }

        const renderedCard = adaptiveCard.render(); // Renders as HTML element
        return <div ref={(n) => { // Returns React element
            n && n.firstChild && n.removeChild(n.firstChild); // Removes duplicates fix
            renderedCard && n && n.appendChild(renderedCard);
        }} />
    }

// 1. Start chat
await chatSDK.startChat();

// 2. Save post chat survey context before ending chat
try {
    const context = await chatSDK.getPostChatSurveyContext();
    if (context.participantJoined) { // participantJoined will be true if an agent has joined the conversation, or a bot has joined the conversation and the bot survey flag has been turned on the admin side.
        // formsProLocale is the default language you have set on the CustomerVoice portal. You can override this url parameter with any locale that CustomerVoice supports.
        // If "&lang=" is not set on the url, the locale will be English.
        const link = context.participantType === "Bot" ? context.botSurveyInviteLink : context.surveyInviteLink;
        const locale = context.participantType === "Bot" ? context.botFormsProLocale : context.formsProLocale;
        const linkToSend = link + "&lang=" + locale;
        // This link is accessible and will redirect to the survey page. Use it as you see fit.
    }
} catch (ex) {
    // If the post chat should not be shown for any reason (e.g. post chat is not enabled), promise will be rejected.
}

// 3. End chat
await chatSDK.endChat();

// 4. Display Post Chat

await chatSDK.startChat(); // Starts NEW chat

const liveChatContext = await chatSDK.getCurrentLiveChatContext(); // Gets chat context

cache.saveChatContext(liveChatContext); // Custom logic to save chat context to cache

...

// Page/component reloads, ALL previous states are GONE

...

const liveChatContext = cache.loadChatContext() // Custom logic to load chat context from cache

const optionalParams = {};
optionalParams.liveChatContext = liveChatContext;

await chatSDK.startChat(optionalParams); // Reconnects to EXISTING chat

...

const messages = await chatSDK.getMessages(); // Gets all messages from EXISTING chat
messages.reverse().forEach((message: any) => renderMessage(message)); // Logic to render all messages to UI

const chatSDKConfig = {
    getAuthToken: async () => {
        const response = await fetch("http://contosohelp.com/token");
        if (response.ok) {
            return await response.text();
        }
        else {
            return null
        }
    }
}

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();

// from this point, this acts like a regular chat widget

const chatSDKConfig = {
    persistentChat: {
        disable: false,
        tokenUpdateTime: 21600000
    },
    getAuthToken: async () => {
        const response = await fetch("http://contosohelp.com/token");
        if (response.ok) {
            return await response.text();
        }
        else {
            return null
        }
    }
}

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();

// from this point, this acts like a persistent chat

const chatSDKConfig = {
    chatReconnect: {
        disable: false,
    },
    getAuthToken: async () => {
        const response = await fetch("http://contosohelp.com/token");
        if (response.ok) {
            return await response.text();
        }
        else {
            return null
        }
    }
}

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();

...

const chatReconnectContext = await chatSDK.getChatReconnectContext();

if (chatReconnectContext.reconnectId) {
    // Add UX with options to reconnect to previous existing chat or start new chat
}

// Reconnect chat option
const optionalParams = {};
optionalParams.reconnectId = chatReconnectContext.reconnectId;
chatSDK.startChat(optionalParams);

// Start new chat option
chatSDK.startChat();

const chatSDKConfig = {
    chatReconnect: {
        disable: false,
    },
}

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();

....

const optionalParams: any = {};

// Retrieve reconnect id from the URL
const urlParams = new URLSearchParams(window.location.search);
const reconnectId = urlParams.get('oc.reconnectid');

const params = {
    reconnectId
};

// Validate reconnect id
const chatReconnectContext = await chatSDK.getChatReconnectContext(params);

// If the reconnect id is invalid or expired, redirect URL if there is any URL set in the configuration
if (chatReconnectContext.redirectURL) {
    window.location.replace(chatReconnectContext.redirectURL);
}

// Valid reconnect id, reconnect to previous chat
if (chatReconnectContext.reconnectId) {
    await chatSDK.startChat({
        reconnectId: chatReconnectContext.reconnectId
    });
} else {  // Reconnect id from URL is not valid, start new chat session
    await chatSDK.startChat();
}

const chatConfig = await chatSDK.getLiveChatConfig();
const {LiveWSAndLiveChatEngJoin: liveWSAndLiveChatEngJoin} = liveChatConfig;
const {OutOfOperatingHours: outOfOperatingHours} = liveWSAndLiveChatEngJoin;

if (outOfOperatingHours === "True") {
    // Handles UX on Out of Operating Hours
} else {
    await chatSDK.startChat();
    // Renders Custom Chat Widget
}

import OmnichannelChatSDK from '@microsoft/omnichannel-chat-sdk';
import ReactWebChat, {createStore} from 'botframework-webchat';

// 1. ChatSDK Initialization
const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig);
await chatSDK.initialize();

// 2. Start new conversation
await chatSDK.startChat();

// 3. Create chat adapter
const chatAdapter = await chatSDK.createChatAdapter();

// 4. Create WebChat store with middlewares
const store = createStore(
    {}, // initial state
    sendDefaultMessagingTagsMiddleware // ❗ Required
);

// 5. Render WebChat
<ReactWebChat
    store={store}
    userID="teamsvisitor"
    directLine={chatAdapter}
    sendTypingIndicator={true}
/>

import OmnichannelChatSDK from '@microsoft/omnichannel-chat-sdk';

...

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();

let VoiceVideoCallingSDK;
try {
    VoiceVideoCallingSDK = await chatSDK.getVoiceVideoCalling();
    console.log("VoiceVideoCalling loaded");
} catch (e) {
    console.log(`Failed to load VoiceVideoCalling: ${e}`);

    if (e.message === 'UnsupportedPlatform') {
        // Voice Video Calling feature is not supported on this platform
    }

    if (e.message === 'FeatureDisabled') {
        // Voice Video Calling feature is disabled on admin side
    }
}

await chatSDK.startChat();

const chatToken: any = await chatSDK.getChatToken();

// Initialize only if VoiceVideoCallingSDK is defined
if (VoiceVideoCallingSDK) {
    try {
        await VoiceVideoCallingSDK.initialize({
            chatToken,
            selfVideoHTMLElementId: 'selfVideo', // HTML element id where video stream of the agent will be rendered
            remoteVideoHTMLElementId: 'remoteVideo', // HTML element id where video stream of the customer will be rendered
            OCClient: chatSDK.OCClient
        });
    } catch (e) {
        console.error("Failed to initialize VoiceVideoCalling!");
    }

    // Triggered when there's an incoming call
    VoiceVideoCallingSDK.onCallAdded(() => {
        ...
    });

    // Triggered when local video stream is available (e.g.: Local video added succesfully in selfVideoHTMLElement)
    VoiceVideoCallingSDK.onLocalVideoStreamAdded(() => {
        ...
    });

    // Triggered when local video stream is unavailable (e.g.: Customer turning off local video)
    VoiceVideoCallingSDK.onLocalVideoStreamRemoved(() => {
        ...
    });

    // Triggered when remote video stream is available (e.g.: Remote video added succesfully in remoteVideoHTMLElement)
    VoiceVideoCallingSDK.onRemoteVideoStreamAdded(() => {
        ...
    });

    // Triggered when remote video stream is unavailable (e.g.: Agent turning off remote video)
    VoiceVideoCallingSDK.onRemoteVideoStreamRemoved(() => {
        ...
    });

    // Triggered when current call has ended or disconnected regardless the party
    VoiceVideoCalling.onCallDisconnected(() => {
        ...
    });

    // Check if microphone is muted
    const isMicrophoneMuted = VoiceVideoCallingSDK.isMicrophoneMuted();

    // Check if remote video is available
    const isRemoteVideoEnabled = VoiceVideoCallingSDK.isRemoteVideoEnabled();

    // Check if local video is available
    const isLocalVideoEnabled = VoiceVideoCallingSDK.isLocalVideoEnabled();

    // Accepts incoming call
    const acceptCallConfig = {
        withVideo: true // Accept call with/without video stream
    };
    await VoiceVideoCallingSDK.acceptCall(acceptCallConfig);

    // Rejects incoming call
    await VoiceVideoCallingSDK.rejectCall();

    // Ends/Stops current call
    await VoiceVideoCallingSDK.stopCall();

    // Mute/Unmute current call
    await VoiceVideoCallingSDK.toggleMute()

    // Display/Hide local video of current call
    await VoiceVideoCallingSDK.toggleLocalVideo()

    // Clean up VoiceVideoCallingSDK (e.g.: Usually called when customer ends chat session)
    VoiceVideoCallingSDK.close();
}

const omnichannelConfig = {
    orgUrl: "",
    orgId: "",
    widgetId: ""
};

const chatSDKConfig = {
    telemetry: {
        disable: true // Disable telemetry
    }
};

const chatSDK = new OmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();