let webChatInstance = null; let directLineUrl = null; const tokenEndpoint = "https://default9860ba8125b448fb92550cba01fba6.ca.environment.api.powerplatform.com/powervirtualagents/botsbyschema/cr5bf_ddxAssistantWeb1/directline/token?api-version=2022-03-01-preview"; const styleOptions = { avatarSize: 0, hideUploadButton: true, backgroundColor: "#e3e3e3", botAvatarBackgroundColor: "#FFFFFF", botAvatarImage: "https://www.ddxgroup.com/wp-content/uploads/2025/05/DDX_LOGO_SOCIAL.avif", botAvatarInitials: "BT", bubbleBorderRadius: 8, bubbleTextColor: "#4c4a48", bubbleFromUserBackground: "#a8da96", sendBoxTextColor: "#4c484a", sendBoxPlaceholderColor: "#4c484a", sendBoxButtonColor: "#69bf4a", sendBoxButtonColorOnFocus: "#69bf4a", sendBoxButtonColorOnHover: "#69bf4a", timestampColor: "#4c484a", suggestedActionLayout: "stacked", suggestedActionBorderWidth: 0, suggestedActionBorderRadius: 10, suggestedActionTextColor: "#4c484a", suggestedActionBackgroundColor: "white", suggestedActionBackgroundColorOnActive: "#69bf4a", suggestedActionBackgroundColorOnHover: "#a8da97", transcriptActivityVisualKeyboardIndicatorWidth: 0, suggestedActionsVisualKeyboardIndicatorWidth: 0, }; const environmentEndPoint = tokenEndpoint.slice( 0, tokenEndpoint.indexOf("/powervirtualagents"), ); const apiVersion = tokenEndpoint .slice(tokenEndpoint.indexOf("api-version")) .split("=")[1]; const regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; const locale = document.documentElement.lang || "en"; function createCustomStore() { return window.WebChat.createStore( {}, ({ dispatch }) => (next) => (action) => { if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") { dispatch({ type: "DIRECT_LINE/POST_ACTIVITY", meta: { method: "keyboard" }, payload: { activity: { channelData: { postBack: true }, name: "startConversation", type: "event", }, }, }); } return next(action); }, ); } async function restartConversation() { try { if (!directLineUrl) { console.error("DirectLine URL not initialized"); return; } const response = await fetch(tokenEndpoint); const conversationInfo = await response.json(); if (!conversationInfo.token) { throw new Error("Failed to get conversation token"); } const newDirectLine = window.WebChat.createDirectLine({ domain: `${directLineUrl}v3/directline`, token: conversationInfo.token, }); const webchatElement = document.getElementById("webchat"); webChatInstance = window.WebChat.renderWebChat( { directLine: newDirectLine, locale, styleOptions, store: createCustomStore(), }, webchatElement, ); } catch (err) { console.error("Failed to restart conversation:", err); } } async function initializeChat() { try { const response = await fetch(regionalChannelSettingsURL); const data = await response.json(); directLineUrl = data.channelUrlsById.directline; if (!directLineUrl) { throw new Error("Failed to get DirectLine URL"); } const conversationResponse = await fetch(tokenEndpoint); const conversationInfo = await conversationResponse.json(); if (!conversationInfo.token) { throw new Error("Failed to get conversation token"); } const directLine = window.WebChat.createDirectLine({ domain: `${directLineUrl}v3/directline`, token: conversationInfo.token, }); webChatInstance = window.WebChat.renderWebChat( { directLine, locale, styleOptions, store: createCustomStore(), }, document.getElementById("webchat"), ); } catch (err) { console.error("Failed to initialize chat:", err); } } initializeChat();