Hello, world! ​

// Inject css into the head of the document
import "@deepdesk/deepdesk-sdk/styles";

// Import DeepdeskSDK and helpers
import { DeepdeskSDK, updateTextArea } from "@deepdesk/deepdesk-sdk";

// Instantiate the Deepdesk SDK
// With <accountname>.deepdesk.com
// OR <accountname>.staging.deepdesk.com.
const deepdeskSDK = new DeepdeskSDK({
    deepdeskUrl: 'https://<accountname>.deepdesk.com',
});

// Get a reference to the agent's input element.
const inputElement = document.getElementById('textarea');

// Check if the conversation is supported by Deepdesk before continuing the setup
const isSupported = await deepdeskSDK.isConversationSupported('123', {
    attempts: 3,
    retryDelay: 500,
});
if (!isSupported) return;

// Mount the instance on the agent input element.
// This will show tab completion and the suggestions overlay once a conversation is loaded.
// When using `deepdeskSDK.login()`: If a user has no valid session a login button is shown.
deepdeskSDK.mount(inputElement);

// Optional, but recommended: Opt-in on the instance handling authentication with 'login()'.
// It verifies the current login session or shows a login button instead of suggestions in the mounted overlay.
// Note 1: `deepdeskSDK.mount()` needs to be called first when using login().
// Note 2: Only resolves after the user is logged in, never rejects.
deepdeskSDK.login().then(async () => {
    // The agent might have navigated away from the conversation in the mean time.
    // Check if we need to continue.
    if (!deepdeskSDK.isMounted) return;

    // Retrieve an existing conversation
    // by platform's conversation/thread/case identifier.
    // This assumes that the webhooks have been implemented to handling incomming messages.
    await deepdeskSDK.getConversationBySessionId('123').catch(error => {
        deepdeskSDK.unmount();
        throw error;
    });

    // Set visitor info.
    // Used to replace in in the placeholder variables in the suggestions
    // "Goodmorning {vistor_name}!" -> "Goodmorning Anne!"
    deepdeskSDK.setVisitorInfo({
        visitorName: 'Anne',
    });

    // Set agent info.
    // Used to replace in in the placeholder variables in the suggestions
    // "You are chatting with {agent_name}." -> "You are chatting with Sam."
    // (Yes, {agent_name} uses `agentNickname` and not `agentName`)
    deepdeskSDK.setAgentInfo({
        agentName: 'Sam de Pam',
        agentNickname: 'Sam',
    });

    // Update the input field when user selects a suggestion.
    // See 'Api Reference' > 'DeepdeskSDK' for more events.
    deepdeskSDK.on("select-suggestion", ({ text, replace }) => {
        updateTextArea(inputElement, text, {
            replace,
        });
    });

    // Update the input field when user replaces text, like for example a link.
    deepdeskSDK.on("replace", ({ text, replace }) => {
        updateTextArea(inputElement, text, {
            replace,
        });
    });

    // Update the input field when user undoes suggestion selection (by pressing Escape).
    deepdeskSDK.on("reset", ({ text, selectionAfter }) => {
        updateTextArea(inputElement, text, {
            selectionAfter,
        });
    });
});

deepdeskSDK.notifySubmit({ text: sentText });

deepdeskSDK.refresh();