adilei/upload_pa_template_html Secret

## upload_pa_template_html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: blueviolet;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: blueviolet;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
            font-size: small;
        }

    </style>

</head>
<body>
    <div>
        <!--div id="heading">

            <h1></h1>
        </div-->
        <div id="webchat" role="main"></div>
    </div>

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>


  <script>

    async function uploadFile({ name, url }) {
        const res = await fetch(url);

        if (!res.ok) {
            throw new Error('Cannot obtain ArrayBuffer for uploading file');
        }

        const uploadURL = "YOUR_POWER_AUTOMATE_HTTP_TRIGGER_URL";

        const arrayBuffer = await res.arrayBuffer();
        const blob = new Blob([arrayBuffer]);

        const formData = new FormData();
        formData.append('file', blob, name);

        return fetch(uploadURL, {
            method: 'POST',
            body: formData
            })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data.fileID);
            return data.fileID;
        })
        .catch((error) => {
        console.error('Error:', error);
        });
        }


const styleOptions = {

hideSendBox: false,
hideUploadButton: false,
bubbleBorderRadius: 10,
bubbleFromUserBorderRadius: 10,
bubbleFromUserBackground: "#2540ce",
bubbleFromUserTextColor: "white",
primaryFont: "Poppins, sans-serif",
botAvatarImage: "bot-avatar.png",
botAvatarInitials: 'BT',
botAvatarBackgroundColor: "white",
accent: '#00809d',
emojiSet: true,
avatarSize: 60
};


        var theURL = "YOUR_COPILOT_URL";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`;

        const store = window.WebChat.createStore(
               {},
               ({ dispatch }) => next => action => {
                   if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                      dispatch({
                          meta: {
                               method: "keyboard",
                           },
                           payload: {
                               activity: {
                                     channelData: {
                                          postBack: true,
                                     },
                                      //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
                                      name: 'startConversation',
                                      type: "event"
                                 },
                            },
                            type: "DIRECT_LINE/POST_ACTIVITY",
                       });
                 }else if(action.type === 'WEB_CHAT/SEND_FILES'){

                    (async function() {
                        // Tells the bot that you are uploading files. This is optional.
                        dispatch({ type: 'WEB_CHAT/SEND_TYPING' });

                        const files = await Promise.all(action.payload.files.map(({ name, url }) => uploadFile({ name, url })));

                        // In order for Copilot Studio to process a file, we need to pass the blob URL as a String within a message.
                        // We intercept the Event and rather than sending it as an attachment we are converting the URL to a string
                        // and dispatching a message.
                        dispatch({
                            payload: {
                                name: 'uploadFile',
                                value: files[0]
                            },
                            type: "WEB_CHAT/SEND_EVENT",
                       });

                        })().catch(err => console.error(err));
                 }
                 return next(action);
              }
           );

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions,
                        store: store
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to separate file for organization in larger projects -->
	<style>
	html, body {
	height: 100%;
	}

	body {
	margin: 0;
	}

	h1 {
	font-size: 16px;
	font-family: Segoe UI;
	line-height: 20px;
	color: whitesmoke;
	display: table-cell;
	padding: 13px 0px 0px 20px;
	}

	#heading {
	background-color: blueviolet;
	height: 50px;
	}

	.main {
	margin: 18px;
	border-radius: 4px;
	}

	div[role="form"]{
	background-color: blueviolet;
	}

	#webchat {
	position: fixed;
	height: calc(100% - 50px);
	width: 100%;
	top: 50px;
	overflow: hidden;
	font-size: small;
	}

	</style>

	</head>
	<body>
	<div>
	<!--div id="heading">

	<h1></h1>
	</div-->
	<div id="webchat" role="main"></div>
	</div>

	<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>


	<script>

	async function uploadFile({ name, url }) {
	const res = await fetch(url);

	if (!res.ok) {
	throw new Error('Cannot obtain ArrayBuffer for uploading file');
	}

	const uploadURL = "YOUR_POWER_AUTOMATE_HTTP_TRIGGER_URL";

	const arrayBuffer = await res.arrayBuffer();
	const blob = new Blob([arrayBuffer]);

	const formData = new FormData();
	formData.append('file', blob, name);

	return fetch(uploadURL, {
	method: 'POST',
	body: formData
	})
	.then(response => response.json())
	.then(data => {
	console.log('Success:', data.fileID);
	return data.fileID;
	})
	.catch((error) => {
	console.error('Error:', error);
	});
	}


	const styleOptions = {

	hideSendBox: false,
	hideUploadButton: false,
	bubbleBorderRadius: 10,
	bubbleFromUserBorderRadius: 10,
	bubbleFromUserBackground: "#2540ce",
	bubbleFromUserTextColor: "white",
	primaryFont: "Poppins, sans-serif",
	botAvatarImage: "bot-avatar.png",
	botAvatarInitials: 'BT',
	botAvatarBackgroundColor: "white",
	accent: '#00809d',
	emojiSet: true,
	avatarSize: 60
	};


	var theURL = "YOUR_COPILOT_URL";

	var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
	var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
	var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`;

	const store = window.WebChat.createStore(
	{},
	({ dispatch }) => next => action => {
	if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
	dispatch({
	meta: {
	method: "keyboard",
	},
	payload: {
	activity: {
	channelData: {
	postBack: true,
	},
	//Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
	name: 'startConversation',
	type: "event"
	},
	},
	type: "DIRECT_LINE/POST_ACTIVITY",
	});
	}else if(action.type === 'WEB_CHAT/SEND_FILES'){

	(async function() {
	// Tells the bot that you are uploading files. This is optional.
	dispatch({ type: 'WEB_CHAT/SEND_TYPING' });

	const files = await Promise.all(action.payload.files.map(({ name, url }) => uploadFile({ name, url })));

	// In order for Copilot Studio to process a file, we need to pass the blob URL as a String within a message.
	// We intercept the Event and rather than sending it as an attachment we are converting the URL to a string
	// and dispatching a message.
	dispatch({
	payload: {
	name: 'uploadFile',
	value: files[0]
	},
	type: "WEB_CHAT/SEND_EVENT",
	});

	})().catch(err => console.error(err));
	}
	return next(action);
	}
	);

	var directline;
	fetch(regionalChannelSettingsURL)
	.then((response) => {
	return response.json();
	})
	.then((data) => {
	directline = data.channelUrlsById.directline;
	})
	.catch(err => console.error("An error occurred: " + err));

	fetch(theURL)
	.then(response => response.json())
	.then(conversationInfo => {
	window.WebChat.renderWebChat(
	{
	directLine: window.WebChat.createDirectLine({
	domain: `${directline}v3/directline`,
	token: conversationInfo.token,
	}),
	styleOptions,
	store: store
	},
	document.getElementById('webchat')
	);
	})
	.catch(err => console.error("An error occurred: " + err));

	</script>
	</body>
	</html>