+
+
`;
+
+ feedback.classList.add("feedback-div");
+
+ return feedback;
+ }
+
+ function handleAPIResponse() {
+ const messageWrapper = document.createElement("div");
+ messageWrapper.classList.add("message-wrapper");
+
+ const messageElement = document.createElement("div");
+ const makerElement = createCopilotSection();
+ messageElement.appendChild(makerElement);
+ messageElement.appendChild(document.createElement("br"));
+
+ messageElement.classList.add("message", "api-response");
+
+ messageWrapper.appendChild(messageElement);
+
+ if (!chatMessages) {
+ return;
+ }
+ chatMessages.appendChild(messageWrapper);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+
+ return {
+ updateThinking: function (thinkingMessage) {
+ const thinking = document.createElement("div");
+ thinking.classList.add("thinking");
+ thinking.innerText = thinkingMessage;
+
+ messageElement.appendChild(thinking);
+ },
+ updateResponse: function (apiResponse) {
+ const thinkingDiv = messageElement.querySelector(".thinking");
+ if (thinkingDiv) {
+ thinkingDiv.remove();
+ }
+
+ const apiResponseElement = parseCodeBlocks(apiResponse);
+ messageElement.appendChild(apiResponseElement);
+
+ messageWrapper.appendChild(document.createElement("hr"));
+
+ // Add feedback session for the API response
+ const feedback = createFeedbackDiv();
+ messageWrapper.appendChild(feedback);
+ }
+ };
+ }
+
+ function setWelcomeScreen() {
+ const messageWrapper = document.createElement("div");
+ messageWrapper.classList.add("message-wrapper");
+
+ const messageElement = document.createElement("div");
+ const makerElement = createCopilotSection();
+ messageElement.appendChild(makerElement);
+
+ messageElement.classList.add("message", "api-response");
+
+ messageWrapper.appendChild(messageElement);
+
+ if (!copilotHeader) {
+ return;
+ }
+ copilotHeader.appendChild(messageWrapper);
+
+ return {
+ userNotLoggedIn: function () {
+ const notLoggedIn = document.createElement("div");
+ notLoggedIn.classList.add("not-loggedIn");
+ notLoggedIn.innerHTML = `
+
Hi! Instantly generate code for Power Pages sites by typing in what you need. To start using Copilot, log in to your Microsoft account.
+
`;
+
+ messageElement.appendChild(notLoggedIn);
+
+ const loginButton = document.getElementById("loginButton");
+ loginButton.addEventListener("click", handleLoginButtonClick);
+ },
+ userLoggedIn: function () {
+ const notLoggedInDiv = messageElement.querySelector(".not-loggedIn");
+ if (notLoggedInDiv) {
+ notLoggedInDiv.remove();
+ }
+ const loggedInDiv = document.createElement("div");
+ loggedInDiv.classList.add("loggedIn");
+ loggedInDiv.innerHTML = `
Hi @${userName}! In your own words, describe what you need. You can get help with writing code for Power Pages sites in HTML, CSS, JS, and Liquid.
`;
+ messageElement.appendChild(loggedInDiv);
+ }
+ };
+ }
+
+ // Handle messages sent from the extension to the webview
+ window.addEventListener("message", (event) => {
+ const message = event.data; // The JSON data our extension sent
+
+ switch (message.type) {
+ case "apiResponse": {
+ apiResponseHandler.updateResponse(message.value);
+ break;
+ }
+ case "env": {
+
+ isDesktop = message.value;
+ welcomeScreen = setWelcomeScreen();
+ break;
+ }
+ case "userName": {
+
+ userName = message.value;
+ break;
+ }
+ case "welcomeScreen": {
+ if (userName != null && userName != undefined && userName != "") {
+ welcomeScreen.userLoggedIn();
+ } else {
+ welcomeScreen.userNotLoggedIn();
+ }
+ break;
+ }
+ case "clearConversation": {
+
+ chatMessages.innerHTML = "";
+ break;
+ }
+ }
+ });
+
+ function handleLoginButtonClick() {
+ vscode.postMessage({ type: "login" });
+ }
+
+ function getApiResponse(userPrompt) {
+ apiResponseHandler = handleAPIResponse();
+ apiResponseHandler.updateThinking("Thinking...");
+ vscode.postMessage({ type: "newUserPrompt", value: userPrompt });
+ }
+
+ function insertCode(code) {
+ vscode.postMessage({ type: "insertCode", value: code });
+ }
+
+ function copyCodeToClipboard(code) {
+ vscode.postMessage({ type: "copyCodeToClipboard", value: code });
+ }
+
+ function sendUserFeedback(feedback) {
+ vscode.postMessage({ type: "userFeedback", value: feedback });
+ }
+
+ SendButton?.addEventListener("click", () => {
+ if ((chatInput).value.trim()) {
+ handleUserMessage((chatInput).value);
+ getApiResponse((chatInput).value);
+ (chatInput).value = "";
+ (chatInput).focus();
+ }
+ });
+
+ chatInput.addEventListener("keydown", (event) => {
+ if (event.key === "Enter" && (chatInput).value.trim()) {
+ handleUserMessage((chatInput).value);
+ getApiResponse((chatInput).value);
+ (chatInput).value = "";
+ }
+ });
+ chatMessages.addEventListener("click", handleFeedbackClick);
+
+ function handleFeedbackClick(event) {
+ const target = event.target;
+
+ if (target.classList.contains("codicon-thumbsup")) {
+ handleThumbsUpClick(target);
+ }
+
+ if (target.classList.contains("codicon-thumbsdown")) {
+ handleThumbsDownClick(target);
+ }
+ }
+
+ function handleThumbsUpClick(element) {
+ if (element.classList.contains("thumbsup-clicked")) {
+ return; // Do nothing if it already has the class
+ }
+
+ const thumbsDownButton = element.parentNode.querySelector(".codicon-thumbsdown");
+
+ element.classList.add("thumbsup-clicked");
+ thumbsDownButton.classList.remove("thumbsdown-clicked");
+
+ sendUserFeedback("thumbsUp");
+ }
+
+ function handleThumbsDownClick(element) {
+ if (element.classList.contains("thumbsdown-clicked")) {
+ return; // Do nothing if it already has the class
+ }
+
+ const thumbsUpButton = element.parentNode.querySelector(".codicon-thumbsup");
+
+ element.classList.add("thumbsdown-clicked");
+ thumbsUpButton.classList.remove("thumbsup-clicked");
+
+
+ sendUserFeedback("thumbsDown");
+ }
+
+
+
+})();
diff --git a/src/common/copilot/assets/styles/codicon.css b/src/common/copilot/assets/styles/codicon.css
index e69de29b..42a6ddb9 100644
--- a/src/common/copilot/assets/styles/codicon.css
+++ b/src/common/copilot/assets/styles/codicon.css
@@ -0,0 +1,1603 @@
+/*
+ This is a vendored copy of the codicon.css build file pulled directly from:
+ https://github.com/microsoft/vscode-codicons/blob/main/dist/codicon.css
+
+ The same applies to the required codicon.ttf build file as well:
+ https://github.com/microsoft/vscode-codicons/blob/main/dist/codicon.ttf
+*/
+
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+@font-face {
+ font-family: "codicon";
+ font-display: block;
+ src: url("./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa") format("truetype");
+}
+
+.codicon[class*="codicon-"] {
+ font: normal normal normal 16px/1 codicon;
+ display: inline-block;
+ text-decoration: none;
+ text-rendering: auto;
+ text-align: center;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+/*---------------------
+ * Modifiers
+ *-------------------*/
+
+@keyframes codicon-spin {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.codicon-sync.codicon-modifier-spin,
+.codicon-loading.codicon-modifier-spin,
+.codicon-gear.codicon-modifier-spin {
+ /* Use steps to throttle FPS to reduce CPU usage */
+ animation: codicon-spin 1.5s steps(30) infinite;
+}
+
+.codicon-modifier-disabled {
+ opacity: 0.5;
+}
+
+.codicon-modifier-hidden {
+ opacity: 0;
+}
+
+/* custom speed & easing for loading icon */
+.codicon-loading {
+ animation-duration: 1s !important;
+ animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
+}
+
+/*---------------------
+ * Icons
+ *-------------------*/
+
+.codicon-add:before {
+ content: "\ea60";
+}
+.codicon-plus:before {
+ content: "\ea60";
+}
+.codicon-gist-new:before {
+ content: "\ea60";
+}
+.codicon-repo-create:before {
+ content: "\ea60";
+}
+.codicon-lightbulb:before {
+ content: "\ea61";
+}
+.codicon-light-bulb:before {
+ content: "\ea61";
+}
+.codicon-repo:before {
+ content: "\ea62";
+}
+.codicon-repo-delete:before {
+ content: "\ea62";
+}
+.codicon-gist-fork:before {
+ content: "\ea63";
+}
+.codicon-repo-forked:before {
+ content: "\ea63";
+}
+.codicon-git-pull-request:before {
+ content: "\ea64";
+}
+.codicon-git-pull-request-abandoned:before {
+ content: "\ea64";
+}
+.codicon-record-keys:before {
+ content: "\ea65";
+}
+.codicon-keyboard:before {
+ content: "\ea65";
+}
+.codicon-tag:before {
+ content: "\ea66";
+}
+.codicon-tag-add:before {
+ content: "\ea66";
+}
+.codicon-tag-remove:before {
+ content: "\ea66";
+}
+.codicon-person:before {
+ content: "\ea67";
+}
+.codicon-person-follow:before {
+ content: "\ea67";
+}
+.codicon-person-outline:before {
+ content: "\ea67";
+}
+.codicon-person-filled:before {
+ content: "\ea67";
+}
+.codicon-git-branch:before {
+ content: "\ea68";
+}
+.codicon-git-branch-create:before {
+ content: "\ea68";
+}
+.codicon-git-branch-delete:before {
+ content: "\ea68";
+}
+.codicon-source-control:before {
+ content: "\ea68";
+}
+.codicon-mirror:before {
+ content: "\ea69";
+}
+.codicon-mirror-public:before {
+ content: "\ea69";
+}
+.codicon-star:before {
+ content: "\ea6a";
+}
+.codicon-star-add:before {
+ content: "\ea6a";
+}
+.codicon-star-delete:before {
+ content: "\ea6a";
+}
+.codicon-star-empty:before {
+ content: "\ea6a";
+}
+.codicon-comment:before {
+ content: "\ea6b";
+}
+.codicon-comment-add:before {
+ content: "\ea6b";
+}
+.codicon-alert:before {
+ content: "\ea6c";
+}
+.codicon-warning:before {
+ content: "\ea6c";
+}
+.codicon-search:before {
+ content: "\ea6d";
+}
+.codicon-search-save:before {
+ content: "\ea6d";
+}
+.codicon-log-out:before {
+ content: "\ea6e";
+}
+.codicon-sign-out:before {
+ content: "\ea6e";
+}
+.codicon-log-in:before {
+ content: "\ea6f";
+}
+.codicon-sign-in:before {
+ content: "\ea6f";
+}
+.codicon-eye:before {
+ content: "\ea70";
+}
+.codicon-eye-unwatch:before {
+ content: "\ea70";
+}
+.codicon-eye-watch:before {
+ content: "\ea70";
+}
+.codicon-circle-filled:before {
+ content: "\ea71";
+}
+.codicon-primitive-dot:before {
+ content: "\ea71";
+}
+.codicon-close-dirty:before {
+ content: "\ea71";
+}
+.codicon-debug-breakpoint:before {
+ content: "\ea71";
+}
+.codicon-debug-breakpoint-disabled:before {
+ content: "\ea71";
+}
+.codicon-debug-hint:before {
+ content: "\ea71";
+}
+.codicon-primitive-square:before {
+ content: "\ea72";
+}
+.codicon-edit:before {
+ content: "\ea73";
+}
+.codicon-pencil:before {
+ content: "\ea73";
+}
+.codicon-info:before {
+ content: "\ea74";
+}
+.codicon-issue-opened:before {
+ content: "\ea74";
+}
+.codicon-gist-private:before {
+ content: "\ea75";
+}
+.codicon-git-fork-private:before {
+ content: "\ea75";
+}
+.codicon-lock:before {
+ content: "\ea75";
+}
+.codicon-mirror-private:before {
+ content: "\ea75";
+}
+.codicon-close:before {
+ content: "\ea76";
+}
+.codicon-remove-close:before {
+ content: "\ea76";
+}
+.codicon-x:before {
+ content: "\ea76";
+}
+.codicon-repo-sync:before {
+ content: "\ea77";
+}
+.codicon-sync:before {
+ content: "\ea77";
+}
+.codicon-clone:before {
+ content: "\ea78";
+}
+.codicon-desktop-download:before {
+ content: "\ea78";
+}
+.codicon-beaker:before {
+ content: "\ea79";
+}
+.codicon-microscope:before {
+ content: "\ea79";
+}
+.codicon-vm:before {
+ content: "\ea7a";
+}
+.codicon-device-desktop:before {
+ content: "\ea7a";
+}
+.codicon-file:before {
+ content: "\ea7b";
+}
+.codicon-file-text:before {
+ content: "\ea7b";
+}
+.codicon-more:before {
+ content: "\ea7c";
+}
+.codicon-ellipsis:before {
+ content: "\ea7c";
+}
+.codicon-kebab-horizontal:before {
+ content: "\ea7c";
+}
+.codicon-mail-reply:before {
+ content: "\ea7d";
+}
+.codicon-reply:before {
+ content: "\ea7d";
+}
+.codicon-organization:before {
+ content: "\ea7e";
+}
+.codicon-organization-filled:before {
+ content: "\ea7e";
+}
+.codicon-organization-outline:before {
+ content: "\ea7e";
+}
+.codicon-new-file:before {
+ content: "\ea7f";
+}
+.codicon-file-add:before {
+ content: "\ea7f";
+}
+.codicon-new-folder:before {
+ content: "\ea80";
+}
+.codicon-file-directory-create:before {
+ content: "\ea80";
+}
+.codicon-trash:before {
+ content: "\ea81";
+}
+.codicon-trashcan:before {
+ content: "\ea81";
+}
+.codicon-history:before {
+ content: "\ea82";
+}
+.codicon-clock:before {
+ content: "\ea82";
+}
+.codicon-folder:before {
+ content: "\ea83";
+}
+.codicon-file-directory:before {
+ content: "\ea83";
+}
+.codicon-symbol-folder:before {
+ content: "\ea83";
+}
+.codicon-logo-github:before {
+ content: "\ea84";
+}
+.codicon-mark-github:before {
+ content: "\ea84";
+}
+.codicon-github:before {
+ content: "\ea84";
+}
+.codicon-terminal:before {
+ content: "\ea85";
+}
+.codicon-console:before {
+ content: "\ea85";
+}
+.codicon-repl:before {
+ content: "\ea85";
+}
+.codicon-zap:before {
+ content: "\ea86";
+}
+.codicon-symbol-event:before {
+ content: "\ea86";
+}
+.codicon-error:before {
+ content: "\ea87";
+}
+.codicon-stop:before {
+ content: "\ea87";
+}
+.codicon-variable:before {
+ content: "\ea88";
+}
+.codicon-symbol-variable:before {
+ content: "\ea88";
+}
+.codicon-array:before {
+ content: "\ea8a";
+}
+.codicon-symbol-array:before {
+ content: "\ea8a";
+}
+.codicon-symbol-module:before {
+ content: "\ea8b";
+}
+.codicon-symbol-package:before {
+ content: "\ea8b";
+}
+.codicon-symbol-namespace:before {
+ content: "\ea8b";
+}
+.codicon-symbol-object:before {
+ content: "\ea8b";
+}
+.codicon-symbol-method:before {
+ content: "\ea8c";
+}
+.codicon-symbol-function:before {
+ content: "\ea8c";
+}
+.codicon-symbol-constructor:before {
+ content: "\ea8c";
+}
+.codicon-symbol-boolean:before {
+ content: "\ea8f";
+}
+.codicon-symbol-null:before {
+ content: "\ea8f";
+}
+.codicon-symbol-numeric:before {
+ content: "\ea90";
+}
+.codicon-symbol-number:before {
+ content: "\ea90";
+}
+.codicon-symbol-structure:before {
+ content: "\ea91";
+}
+.codicon-symbol-struct:before {
+ content: "\ea91";
+}
+.codicon-symbol-parameter:before {
+ content: "\ea92";
+}
+.codicon-symbol-type-parameter:before {
+ content: "\ea92";
+}
+.codicon-symbol-key:before {
+ content: "\ea93";
+}
+.codicon-symbol-text:before {
+ content: "\ea93";
+}
+.codicon-symbol-reference:before {
+ content: "\ea94";
+}
+.codicon-go-to-file:before {
+ content: "\ea94";
+}
+.codicon-symbol-enum:before {
+ content: "\ea95";
+}
+.codicon-symbol-value:before {
+ content: "\ea95";
+}
+.codicon-symbol-ruler:before {
+ content: "\ea96";
+}
+.codicon-symbol-unit:before {
+ content: "\ea96";
+}
+.codicon-activate-breakpoints:before {
+ content: "\ea97";
+}
+.codicon-archive:before {
+ content: "\ea98";
+}
+.codicon-arrow-both:before {
+ content: "\ea99";
+}
+.codicon-arrow-down:before {
+ content: "\ea9a";
+}
+.codicon-arrow-left:before {
+ content: "\ea9b";
+}
+.codicon-arrow-right:before {
+ content: "\ea9c";
+}
+.codicon-arrow-small-down:before {
+ content: "\ea9d";
+}
+.codicon-arrow-small-left:before {
+ content: "\ea9e";
+}
+.codicon-arrow-small-right:before {
+ content: "\ea9f";
+}
+.codicon-arrow-small-up:before {
+ content: "\eaa0";
+}
+.codicon-arrow-up:before {
+ content: "\eaa1";
+}
+.codicon-bell:before {
+ content: "\eaa2";
+}
+.codicon-bold:before {
+ content: "\eaa3";
+}
+.codicon-book:before {
+ content: "\eaa4";
+}
+.codicon-bookmark:before {
+ content: "\eaa5";
+}
+.codicon-debug-breakpoint-conditional-unverified:before {
+ content: "\eaa6";
+}
+.codicon-debug-breakpoint-conditional:before {
+ content: "\eaa7";
+}
+.codicon-debug-breakpoint-conditional-disabled:before {
+ content: "\eaa7";
+}
+.codicon-debug-breakpoint-data-unverified:before {
+ content: "\eaa8";
+}
+.codicon-debug-breakpoint-data:before {
+ content: "\eaa9";
+}
+.codicon-debug-breakpoint-data-disabled:before {
+ content: "\eaa9";
+}
+.codicon-debug-breakpoint-log-unverified:before {
+ content: "\eaaa";
+}
+.codicon-debug-breakpoint-log:before {
+ content: "\eaab";
+}
+.codicon-debug-breakpoint-log-disabled:before {
+ content: "\eaab";
+}
+.codicon-briefcase:before {
+ content: "\eaac";
+}
+.codicon-broadcast:before {
+ content: "\eaad";
+}
+.codicon-browser:before {
+ content: "\eaae";
+}
+.codicon-bug:before {
+ content: "\eaaf";
+}
+.codicon-calendar:before {
+ content: "\eab0";
+}
+.codicon-case-sensitive:before {
+ content: "\eab1";
+}
+.codicon-check:before {
+ content: "\eab2";
+}
+.codicon-checklist:before {
+ content: "\eab3";
+}
+.codicon-chevron-down:before {
+ content: "\eab4";
+}
+.codicon-chevron-left:before {
+ content: "\eab5";
+}
+.codicon-chevron-right:before {
+ content: "\eab6";
+}
+.codicon-chevron-up:before {
+ content: "\eab7";
+}
+.codicon-chrome-close:before {
+ content: "\eab8";
+}
+.codicon-chrome-maximize:before {
+ content: "\eab9";
+}
+.codicon-chrome-minimize:before {
+ content: "\eaba";
+}
+.codicon-chrome-restore:before {
+ content: "\eabb";
+}
+.codicon-circle-outline:before {
+ content: "\eabc";
+}
+.codicon-debug-breakpoint-unverified:before {
+ content: "\eabc";
+}
+.codicon-circle-slash:before {
+ content: "\eabd";
+}
+.codicon-circuit-board:before {
+ content: "\eabe";
+}
+.codicon-clear-all:before {
+ content: "\eabf";
+}
+.codicon-clippy:before {
+ content: "\eac0";
+}
+.codicon-close-all:before {
+ content: "\eac1";
+}
+.codicon-cloud-download:before {
+ content: "\eac2";
+}
+.codicon-cloud-upload:before {
+ content: "\eac3";
+}
+.codicon-code:before {
+ content: "\eac4";
+}
+.codicon-collapse-all:before {
+ content: "\eac5";
+}
+.codicon-color-mode:before {
+ content: "\eac6";
+}
+.codicon-comment-discussion:before {
+ content: "\eac7";
+}
+.codicon-credit-card:before {
+ content: "\eac9";
+}
+.codicon-dash:before {
+ content: "\eacc";
+}
+.codicon-dashboard:before {
+ content: "\eacd";
+}
+.codicon-database:before {
+ content: "\eace";
+}
+.codicon-debug-continue:before {
+ content: "\eacf";
+}
+.codicon-debug-disconnect:before {
+ content: "\ead0";
+}
+.codicon-debug-pause:before {
+ content: "\ead1";
+}
+.codicon-debug-restart:before {
+ content: "\ead2";
+}
+.codicon-debug-start:before {
+ content: "\ead3";
+}
+.codicon-debug-step-into:before {
+ content: "\ead4";
+}
+.codicon-debug-step-out:before {
+ content: "\ead5";
+}
+.codicon-debug-step-over:before {
+ content: "\ead6";
+}
+.codicon-debug-stop:before {
+ content: "\ead7";
+}
+.codicon-debug:before {
+ content: "\ead8";
+}
+.codicon-device-camera-video:before {
+ content: "\ead9";
+}
+.codicon-device-camera:before {
+ content: "\eada";
+}
+.codicon-device-mobile:before {
+ content: "\eadb";
+}
+.codicon-diff-added:before {
+ content: "\eadc";
+}
+.codicon-diff-ignored:before {
+ content: "\eadd";
+}
+.codicon-diff-modified:before {
+ content: "\eade";
+}
+.codicon-diff-removed:before {
+ content: "\eadf";
+}
+.codicon-diff-renamed:before {
+ content: "\eae0";
+}
+.codicon-diff:before {
+ content: "\eae1";
+}
+.codicon-discard:before {
+ content: "\eae2";
+}
+.codicon-editor-layout:before {
+ content: "\eae3";
+}
+.codicon-empty-window:before {
+ content: "\eae4";
+}
+.codicon-exclude:before {
+ content: "\eae5";
+}
+.codicon-extensions:before {
+ content: "\eae6";
+}
+.codicon-eye-closed:before {
+ content: "\eae7";
+}
+.codicon-file-binary:before {
+ content: "\eae8";
+}
+.codicon-file-code:before {
+ content: "\eae9";
+}
+.codicon-file-media:before {
+ content: "\eaea";
+}
+.codicon-file-pdf:before {
+ content: "\eaeb";
+}
+.codicon-file-submodule:before {
+ content: "\eaec";
+}
+.codicon-file-symlink-directory:before {
+ content: "\eaed";
+}
+.codicon-file-symlink-file:before {
+ content: "\eaee";
+}
+.codicon-file-zip:before {
+ content: "\eaef";
+}
+.codicon-files:before {
+ content: "\eaf0";
+}
+.codicon-filter:before {
+ content: "\eaf1";
+}
+.codicon-flame:before {
+ content: "\eaf2";
+}
+.codicon-fold-down:before {
+ content: "\eaf3";
+}
+.codicon-fold-up:before {
+ content: "\eaf4";
+}
+.codicon-fold:before {
+ content: "\eaf5";
+}
+.codicon-folder-active:before {
+ content: "\eaf6";
+}
+.codicon-folder-opened:before {
+ content: "\eaf7";
+}
+.codicon-gear:before {
+ content: "\eaf8";
+}
+.codicon-gift:before {
+ content: "\eaf9";
+}
+.codicon-gist-secret:before {
+ content: "\eafa";
+}
+.codicon-gist:before {
+ content: "\eafb";
+}
+.codicon-git-commit:before {
+ content: "\eafc";
+}
+.codicon-git-compare:before {
+ content: "\eafd";
+}
+.codicon-compare-changes:before {
+ content: "\eafd";
+}
+.codicon-git-merge:before {
+ content: "\eafe";
+}
+.codicon-github-action:before {
+ content: "\eaff";
+}
+.codicon-github-alt:before {
+ content: "\eb00";
+}
+.codicon-globe:before {
+ content: "\eb01";
+}
+.codicon-grabber:before {
+ content: "\eb02";
+}
+.codicon-graph:before {
+ content: "\eb03";
+}
+.codicon-gripper:before {
+ content: "\eb04";
+}
+.codicon-heart:before {
+ content: "\eb05";
+}
+.codicon-home:before {
+ content: "\eb06";
+}
+.codicon-horizontal-rule:before {
+ content: "\eb07";
+}
+.codicon-hubot:before {
+ content: "\eb08";
+}
+.codicon-inbox:before {
+ content: "\eb09";
+}
+.codicon-issue-reopened:before {
+ content: "\eb0b";
+}
+.codicon-issues:before {
+ content: "\eb0c";
+}
+.codicon-italic:before {
+ content: "\eb0d";
+}
+.codicon-jersey:before {
+ content: "\eb0e";
+}
+.codicon-json:before {
+ content: "\eb0f";
+}
+.codicon-kebab-vertical:before {
+ content: "\eb10";
+}
+.codicon-key:before {
+ content: "\eb11";
+}
+.codicon-law:before {
+ content: "\eb12";
+}
+.codicon-lightbulb-autofix:before {
+ content: "\eb13";
+}
+.codicon-link-external:before {
+ content: "\eb14";
+}
+.codicon-link:before {
+ content: "\eb15";
+}
+.codicon-list-ordered:before {
+ content: "\eb16";
+}
+.codicon-list-unordered:before {
+ content: "\eb17";
+}
+.codicon-live-share:before {
+ content: "\eb18";
+}
+.codicon-loading:before {
+ content: "\eb19";
+}
+.codicon-location:before {
+ content: "\eb1a";
+}
+.codicon-mail-read:before {
+ content: "\eb1b";
+}
+.codicon-mail:before {
+ content: "\eb1c";
+}
+.codicon-markdown:before {
+ content: "\eb1d";
+}
+.codicon-megaphone:before {
+ content: "\eb1e";
+}
+.codicon-mention:before {
+ content: "\eb1f";
+}
+.codicon-milestone:before {
+ content: "\eb20";
+}
+.codicon-mortar-board:before {
+ content: "\eb21";
+}
+.codicon-move:before {
+ content: "\eb22";
+}
+.codicon-multiple-windows:before {
+ content: "\eb23";
+}
+.codicon-mute:before {
+ content: "\eb24";
+}
+.codicon-no-newline:before {
+ content: "\eb25";
+}
+.codicon-note:before {
+ content: "\eb26";
+}
+.codicon-octoface:before {
+ content: "\eb27";
+}
+.codicon-open-preview:before {
+ content: "\eb28";
+}
+.codicon-package:before {
+ content: "\eb29";
+}
+.codicon-paintcan:before {
+ content: "\eb2a";
+}
+.codicon-pin:before {
+ content: "\eb2b";
+}
+.codicon-play:before {
+ content: "\eb2c";
+}
+.codicon-run:before {
+ content: "\eb2c";
+}
+.codicon-plug:before {
+ content: "\eb2d";
+}
+.codicon-preserve-case:before {
+ content: "\eb2e";
+}
+.codicon-preview:before {
+ content: "\eb2f";
+}
+.codicon-project:before {
+ content: "\eb30";
+}
+.codicon-pulse:before {
+ content: "\eb31";
+}
+.codicon-question:before {
+ content: "\eb32";
+}
+.codicon-quote:before {
+ content: "\eb33";
+}
+.codicon-radio-tower:before {
+ content: "\eb34";
+}
+.codicon-reactions:before {
+ content: "\eb35";
+}
+.codicon-references:before {
+ content: "\eb36";
+}
+.codicon-refresh:before {
+ content: "\eb37";
+}
+.codicon-regex:before {
+ content: "\eb38";
+}
+.codicon-remote-explorer:before {
+ content: "\eb39";
+}
+.codicon-remote:before {
+ content: "\eb3a";
+}
+.codicon-remove:before {
+ content: "\eb3b";
+}
+.codicon-replace-all:before {
+ content: "\eb3c";
+}
+.codicon-replace:before {
+ content: "\eb3d";
+}
+.codicon-repo-clone:before {
+ content: "\eb3e";
+}
+.codicon-repo-force-push:before {
+ content: "\eb3f";
+}
+.codicon-repo-pull:before {
+ content: "\eb40";
+}
+.codicon-repo-push:before {
+ content: "\eb41";
+}
+.codicon-report:before {
+ content: "\eb42";
+}
+.codicon-request-changes:before {
+ content: "\eb43";
+}
+.codicon-rocket:before {
+ content: "\eb44";
+}
+.codicon-root-folder-opened:before {
+ content: "\eb45";
+}
+.codicon-root-folder:before {
+ content: "\eb46";
+}
+.codicon-rss:before {
+ content: "\eb47";
+}
+.codicon-ruby:before {
+ content: "\eb48";
+}
+.codicon-save-all:before {
+ content: "\eb49";
+}
+.codicon-save-as:before {
+ content: "\eb4a";
+}
+.codicon-save:before {
+ content: "\eb4b";
+}
+.codicon-screen-full:before {
+ content: "\eb4c";
+}
+.codicon-screen-normal:before {
+ content: "\eb4d";
+}
+.codicon-search-stop:before {
+ content: "\eb4e";
+}
+.codicon-server:before {
+ content: "\eb50";
+}
+.codicon-settings-gear:before {
+ content: "\eb51";
+}
+.codicon-settings:before {
+ content: "\eb52";
+}
+.codicon-shield:before {
+ content: "\eb53";
+}
+.codicon-smiley:before {
+ content: "\eb54";
+}
+.codicon-sort-precedence:before {
+ content: "\eb55";
+}
+.codicon-split-horizontal:before {
+ content: "\eb56";
+}
+.codicon-split-vertical:before {
+ content: "\eb57";
+}
+.codicon-squirrel:before {
+ content: "\eb58";
+}
+.codicon-star-full:before {
+ content: "\eb59";
+}
+.codicon-star-half:before {
+ content: "\eb5a";
+}
+.codicon-symbol-class:before {
+ content: "\eb5b";
+}
+.codicon-symbol-color:before {
+ content: "\eb5c";
+}
+.codicon-symbol-constant:before {
+ content: "\eb5d";
+}
+.codicon-symbol-enum-member:before {
+ content: "\eb5e";
+}
+.codicon-symbol-field:before {
+ content: "\eb5f";
+}
+.codicon-symbol-file:before {
+ content: "\eb60";
+}
+.codicon-symbol-interface:before {
+ content: "\eb61";
+}
+.codicon-symbol-keyword:before {
+ content: "\eb62";
+}
+.codicon-symbol-misc:before {
+ content: "\eb63";
+}
+.codicon-symbol-operator:before {
+ content: "\eb64";
+}
+.codicon-symbol-property:before {
+ content: "\eb65";
+}
+.codicon-wrench:before {
+ content: "\eb65";
+}
+.codicon-wrench-subaction:before {
+ content: "\eb65";
+}
+.codicon-symbol-snippet:before {
+ content: "\eb66";
+}
+.codicon-tasklist:before {
+ content: "\eb67";
+}
+.codicon-telescope:before {
+ content: "\eb68";
+}
+.codicon-text-size:before {
+ content: "\eb69";
+}
+.codicon-three-bars:before {
+ content: "\eb6a";
+}
+.codicon-thumbsdown:before {
+ content: "\eb6b";
+}
+.codicon-thumbsup:before {
+ content: "\eb6c";
+}
+.codicon-tools:before {
+ content: "\eb6d";
+}
+.codicon-triangle-down:before {
+ content: "\eb6e";
+}
+.codicon-triangle-left:before {
+ content: "\eb6f";
+}
+.codicon-triangle-right:before {
+ content: "\eb70";
+}
+.codicon-triangle-up:before {
+ content: "\eb71";
+}
+.codicon-twitter:before {
+ content: "\eb72";
+}
+.codicon-unfold:before {
+ content: "\eb73";
+}
+.codicon-unlock:before {
+ content: "\eb74";
+}
+.codicon-unmute:before {
+ content: "\eb75";
+}
+.codicon-unverified:before {
+ content: "\eb76";
+}
+.codicon-verified:before {
+ content: "\eb77";
+}
+.codicon-versions:before {
+ content: "\eb78";
+}
+.codicon-vm-active:before {
+ content: "\eb79";
+}
+.codicon-vm-outline:before {
+ content: "\eb7a";
+}
+.codicon-vm-running:before {
+ content: "\eb7b";
+}
+.codicon-watch:before {
+ content: "\eb7c";
+}
+.codicon-whitespace:before {
+ content: "\eb7d";
+}
+.codicon-whole-word:before {
+ content: "\eb7e";
+}
+.codicon-window:before {
+ content: "\eb7f";
+}
+.codicon-word-wrap:before {
+ content: "\eb80";
+}
+.codicon-zoom-in:before {
+ content: "\eb81";
+}
+.codicon-zoom-out:before {
+ content: "\eb82";
+}
+.codicon-list-filter:before {
+ content: "\eb83";
+}
+.codicon-list-flat:before {
+ content: "\eb84";
+}
+.codicon-list-selection:before {
+ content: "\eb85";
+}
+.codicon-selection:before {
+ content: "\eb85";
+}
+.codicon-list-tree:before {
+ content: "\eb86";
+}
+.codicon-debug-breakpoint-function-unverified:before {
+ content: "\eb87";
+}
+.codicon-debug-breakpoint-function:before {
+ content: "\eb88";
+}
+.codicon-debug-breakpoint-function-disabled:before {
+ content: "\eb88";
+}
+.codicon-debug-stackframe-active:before {
+ content: "\eb89";
+}
+.codicon-circle-small-filled:before {
+ content: "\eb8a";
+}
+.codicon-debug-stackframe-dot:before {
+ content: "\eb8a";
+}
+.codicon-debug-stackframe:before {
+ content: "\eb8b";
+}
+.codicon-debug-stackframe-focused:before {
+ content: "\eb8b";
+}
+.codicon-debug-breakpoint-unsupported:before {
+ content: "\eb8c";
+}
+.codicon-symbol-string:before {
+ content: "\eb8d";
+}
+.codicon-debug-reverse-continue:before {
+ content: "\eb8e";
+}
+.codicon-debug-step-back:before {
+ content: "\eb8f";
+}
+.codicon-debug-restart-frame:before {
+ content: "\eb90";
+}
+.codicon-debug-alt:before {
+ content: "\eb91";
+}
+.codicon-call-incoming:before {
+ content: "\eb92";
+}
+.codicon-call-outgoing:before {
+ content: "\eb93";
+}
+.codicon-menu:before {
+ content: "\eb94";
+}
+.codicon-expand-all:before {
+ content: "\eb95";
+}
+.codicon-feedback:before {
+ content: "\eb96";
+}
+.codicon-group-by-ref-type:before {
+ content: "\eb97";
+}
+.codicon-ungroup-by-ref-type:before {
+ content: "\eb98";
+}
+.codicon-account:before {
+ content: "\eb99";
+}
+.codicon-bell-dot:before {
+ content: "\eb9a";
+}
+.codicon-debug-console:before {
+ content: "\eb9b";
+}
+.codicon-library:before {
+ content: "\eb9c";
+}
+.codicon-output:before {
+ content: "\eb9d";
+}
+.codicon-run-all:before {
+ content: "\eb9e";
+}
+.codicon-sync-ignored:before {
+ content: "\eb9f";
+}
+.codicon-pinned:before {
+ content: "\eba0";
+}
+.codicon-github-inverted:before {
+ content: "\eba1";
+}
+.codicon-server-process:before {
+ content: "\eba2";
+}
+.codicon-server-environment:before {
+ content: "\eba3";
+}
+.codicon-pass:before {
+ content: "\eba4";
+}
+.codicon-issue-closed:before {
+ content: "\eba4";
+}
+.codicon-stop-circle:before {
+ content: "\eba5";
+}
+.codicon-play-circle:before {
+ content: "\eba6";
+}
+.codicon-record:before {
+ content: "\eba7";
+}
+.codicon-debug-alt-small:before {
+ content: "\eba8";
+}
+.codicon-vm-connect:before {
+ content: "\eba9";
+}
+.codicon-cloud:before {
+ content: "\ebaa";
+}
+.codicon-merge:before {
+ content: "\ebab";
+}
+.codicon-export:before {
+ content: "\ebac";
+}
+.codicon-graph-left:before {
+ content: "\ebad";
+}
+.codicon-magnet:before {
+ content: "\ebae";
+}
+.codicon-notebook:before {
+ content: "\ebaf";
+}
+.codicon-redo:before {
+ content: "\ebb0";
+}
+.codicon-check-all:before {
+ content: "\ebb1";
+}
+.codicon-pinned-dirty:before {
+ content: "\ebb2";
+}
+.codicon-pass-filled:before {
+ content: "\ebb3";
+}
+.codicon-circle-large-filled:before {
+ content: "\ebb4";
+}
+.codicon-circle-large-outline:before {
+ content: "\ebb5";
+}
+.codicon-combine:before {
+ content: "\ebb6";
+}
+.codicon-gather:before {
+ content: "\ebb6";
+}
+.codicon-table:before {
+ content: "\ebb7";
+}
+.codicon-variable-group:before {
+ content: "\ebb8";
+}
+.codicon-type-hierarchy:before {
+ content: "\ebb9";
+}
+.codicon-type-hierarchy-sub:before {
+ content: "\ebba";
+}
+.codicon-type-hierarchy-super:before {
+ content: "\ebbb";
+}
+.codicon-git-pull-request-create:before {
+ content: "\ebbc";
+}
+.codicon-run-above:before {
+ content: "\ebbd";
+}
+.codicon-run-below:before {
+ content: "\ebbe";
+}
+.codicon-notebook-template:before {
+ content: "\ebbf";
+}
+.codicon-debug-rerun:before {
+ content: "\ebc0";
+}
+.codicon-workspace-trusted:before {
+ content: "\ebc1";
+}
+.codicon-workspace-untrusted:before {
+ content: "\ebc2";
+}
+.codicon-workspace-unknown:before {
+ content: "\ebc3";
+}
+.codicon-terminal-cmd:before {
+ content: "\ebc4";
+}
+.codicon-terminal-debian:before {
+ content: "\ebc5";
+}
+.codicon-terminal-linux:before {
+ content: "\ebc6";
+}
+.codicon-terminal-powershell:before {
+ content: "\ebc7";
+}
+.codicon-terminal-tmux:before {
+ content: "\ebc8";
+}
+.codicon-terminal-ubuntu:before {
+ content: "\ebc9";
+}
+.codicon-terminal-bash:before {
+ content: "\ebca";
+}
+.codicon-arrow-swap:before {
+ content: "\ebcb";
+}
+.codicon-copy:before {
+ content: "\ebcc";
+}
+.codicon-person-add:before {
+ content: "\ebcd";
+}
+.codicon-filter-filled:before {
+ content: "\ebce";
+}
+.codicon-wand:before {
+ content: "\ebcf";
+}
+.codicon-debug-line-by-line:before {
+ content: "\ebd0";
+}
+.codicon-inspect:before {
+ content: "\ebd1";
+}
+.codicon-layers:before {
+ content: "\ebd2";
+}
+.codicon-layers-dot:before {
+ content: "\ebd3";
+}
+.codicon-layers-active:before {
+ content: "\ebd4";
+}
+.codicon-compass:before {
+ content: "\ebd5";
+}
+.codicon-compass-dot:before {
+ content: "\ebd6";
+}
+.codicon-compass-active:before {
+ content: "\ebd7";
+}
+.codicon-azure:before {
+ content: "\ebd8";
+}
+.codicon-issue-draft:before {
+ content: "\ebd9";
+}
+.codicon-git-pull-request-closed:before {
+ content: "\ebda";
+}
+.codicon-git-pull-request-draft:before {
+ content: "\ebdb";
+}
+.codicon-debug-all:before {
+ content: "\ebdc";
+}
+.codicon-debug-coverage:before {
+ content: "\ebdd";
+}
+.codicon-run-errors:before {
+ content: "\ebde";
+}
+.codicon-folder-library:before {
+ content: "\ebdf";
+}
+.codicon-debug-continue-small:before {
+ content: "\ebe0";
+}
+.codicon-beaker-stop:before {
+ content: "\ebe1";
+}
+.codicon-graph-line:before {
+ content: "\ebe2";
+}
+.codicon-graph-scatter:before {
+ content: "\ebe3";
+}
+.codicon-pie-chart:before {
+ content: "\ebe4";
+}
+.codicon-bracket:before {
+ content: "\eb0f";
+}
+.codicon-bracket-dot:before {
+ content: "\ebe5";
+}
+.codicon-bracket-error:before {
+ content: "\ebe6";
+}
+.codicon-lock-small:before {
+ content: "\ebe7";
+}
+.codicon-azure-devops:before {
+ content: "\ebe8";
+}
+.codicon-verified-filled:before {
+ content: "\ebe9";
+}
+.codicon-newline:before {
+ content: "\ebea";
+}
+.codicon-layout:before {
+ content: "\ebeb";
+}
+.codicon-layout-activitybar-left:before {
+ content: "\ebec";
+}
+.codicon-layout-activitybar-right:before {
+ content: "\ebed";
+}
+.codicon-layout-panel-left:before {
+ content: "\ebee";
+}
+.codicon-layout-panel-center:before {
+ content: "\ebef";
+}
+.codicon-layout-panel-justify:before {
+ content: "\ebf0";
+}
+.codicon-layout-panel-right:before {
+ content: "\ebf1";
+}
+.codicon-layout-panel:before {
+ content: "\ebf2";
+}
+.codicon-layout-sidebar-left:before {
+ content: "\ebf3";
+}
+.codicon-layout-sidebar-right:before {
+ content: "\ebf4";
+}
+.codicon-layout-statusbar:before {
+ content: "\ebf5";
+}
+.codicon-layout-menubar:before {
+ content: "\ebf6";
+}
+.codicon-layout-centered:before {
+ content: "\ebf7";
+}
+.codicon-target:before {
+ content: "\ebf8";
+}
+.codicon-indent:before {
+ content: "\ebf9";
+}
+.codicon-record-small:before {
+ content: "\ebfa";
+}
+.codicon-error-small:before {
+ content: "\ebfb";
+}
+.codicon-arrow-circle-down:before {
+ content: "\ebfc";
+}
+.codicon-arrow-circle-left:before {
+ content: "\ebfd";
+}
+.codicon-arrow-circle-right:before {
+ content: "\ebfe";
+}
+.codicon-arrow-circle-up:before {
+ content: "\ebff";
+}
+.codicon-layout-sidebar-right-off:before {
+ content: "\ec00";
+}
+.codicon-layout-panel-off:before {
+ content: "\ec01";
+}
+.codicon-layout-sidebar-left-off:before {
+ content: "\ec02";
+}
+.codicon-blank:before {
+ content: "\ec03";
+}
+.codicon-heart-filled:before {
+ content: "\ec04";
+}
+.codicon-map:before {
+ content: "\ec05";
+}
+.codicon-map-filled:before {
+ content: "\ec06";
+}
+.codicon-circle-small:before {
+ content: "\ec07";
+}
+.codicon-bell-slash:before {
+ content: "\ec08";
+}
+.codicon-bell-slash-dot:before {
+ content: "\ec09";
+}
+.codicon-comment-unresolved:before {
+ content: "\ec0a";
+}
+.codicon-git-pull-request-go-to-changes:before {
+ content: "\ec0b";
+}
+.codicon-git-pull-request-new-changes:before {
+ content: "\ec0c";
+}
diff --git a/src/common/copilot/assets/styles/codicon.ttf b/src/common/copilot/assets/styles/codicon.ttf
index e69de29b..5abfa748 100644
Binary files a/src/common/copilot/assets/styles/codicon.ttf and b/src/common/copilot/assets/styles/codicon.ttf differ
diff --git a/src/common/copilot/assets/styles/copilot.css b/src/common/copilot/assets/styles/copilot.css
index 11c6947a..5d2f3dcb 100644
--- a/src/common/copilot/assets/styles/copilot.css
+++ b/src/common/copilot/assets/styles/copilot.css
@@ -1,90 +1,278 @@
body {
- font-size: var(--vscode-editor-font-size);
- font-weight: var(--vscode-font-weight);
- font-family: var(--vscode-font-family);
- margin: 0;
- padding: 0;
- background-color: var(--vscode-editor-background);
- }
-
- .copilot-window {
- display: flex;
- flex-direction: column;
- height: 100vh;
- padding: 0px;
- }
-
- .chat-messages {
- flex: 1;
- overflow-y: auto;
- padding: 0px;
- }
-
- .chat-input {
- display: flex;
- flex-direction: column;
- margin: 0px;
- padding: 12px;
- }
-
- .input-container {
- display: flex;
- align-items: center;
- justify-content: space-between;
- border: 1px solid var(--vscode-dropdown-border);
- padding: 0px 6px 0px 0px;
- border-radius: 4px;
- height: 38px;
- background-color: var(--vscode-interactiveEditorInput-background);
- }
-
- .input-container:focus-within {
- box-shadow: 0 0 0 1px var(--vscode-focusBorder);
- }
-
- .input-container:focus-within .send-icon path:not(:hover) {
- fill: var(--vscode-inputOption-activeForeground);
- }
-
- .input-field {
- flex: 1;
- padding: 11px 0px 11px 8px;
- border: none;
- outline: none;
- color: var(--vscode-inputOption-activeForeground);
- background-color: transparent;
- white-space: pre-wrap;
- }
-
- .input-field:focus {
- outline: none;
- color: var(--vscode-inputOption-activeForeground);
- }
-
- .input-field::placeholder {
- color: var(--vscode-input-placeholderForeground);
- }
-
- .send-button {
- margin-left: 6px;
- border: none;
- cursor: pointer;
- background-color: transparent;
- }
-
-
- .disclaimer {
- margin: 0px;
- margin-top: 12px;
- }
-
- .send-icon {
- fill: var(--vscode-inputOption-activeForeground);
- }
-
-
- .active {
- pointer-events: auto;
- opacity: 1;
-
- }
\ No newline at end of file
+ font-size: var(--vscode-editor-font-size);
+ font-weight: var(--vscode-font-weight);
+ font-family: var(--vscode-font-family);
+ margin: 0;
+ padding: 0;
+ background-color: var(--vscode-editor-background);
+}
+
+.copilot-window {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 0px;
+}
+
+.chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0px;
+}
+
+.chat-input {
+ display: flex;
+ flex-direction: column;
+ margin: 0px;
+ padding: 12px;
+}
+
+.input-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid var(--vscode-dropdown-border);
+ padding: 0px 6px 0px 0px;
+ border-radius: 4px;
+ height: 38px;
+ background-color: var(--vscode-interactiveEditorInput-background);
+}
+
+.input-container:focus-within {
+ box-shadow: 0 0 0 1px var(--vscode-focusBorder);
+}
+
+.input-container:focus-within .send-icon path:not(:hover) {
+ fill: var(--vscode-inputOption-activeForeground);
+}
+
+.input-field {
+ flex: 1;
+ padding: 11px 0px 11px 8px;
+ border: none;
+ outline: none;
+ color: var(--vscode-inputOption-activeForeground);
+ background-color: transparent;
+ white-space: pre-wrap;
+}
+
+.input-field:focus {
+ outline: none;
+ color: var(--vscode-inputOption-activeForeground);
+}
+
+.input-field::placeholder {
+ color: var(--vscode-input-placeholderForeground);
+}
+
+.send-button {
+ margin-left: 6px;
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+}
+
+
+.disclaimer {
+ margin: 0px;
+ margin-top: 12px;
+}
+
+.send-icon {
+ fill: var(--vscode-inputOption-activeForeground);
+}
+
+
+.active {
+ pointer-events: auto;
+ opacity: 1;
+
+}
+
+
+.user-message {
+ padding: 12px;
+ background-color: var(--vscode-editor-background);
+}
+
+.api-response {
+ padding: 12px;
+ background-color: var(--vscode-sideBar-background);
+}
+
+.message {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+.maker-element {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ /* Align child elements to the right */
+}
+
+.profile-icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ margin-right: 8px;
+ /* background-color: var(--vscode-button-background); */
+ color: darkblue;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ background-color: #A7CFE8;
+ aspect-ratio: 1 / 1;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ margin-right: 8px;
+}
+
+.active-org {
+ border-radius: 12px;
+ color: var(--vscode-button-secondaryForeground);
+ background-color: var(--vscode-button-secondaryBackground);
+ padding: 4px 8px;
+}
+
+.message-wrapper {
+ position: relative;
+}
+
+.code-division {
+ position: relative;
+ padding: 20px 5px 1px 10px;
+ margin: 10px 0px;
+ border-radius: 4px;
+ background-color: var(--vscode-editor-background);
+
+}
+
+.code-pre {
+ padding-bottom: 12px;
+ margin-bottom: 0px;
+ overflow-x: auto;
+}
+
+.action-wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-top: 8px;
+ margin-right: 12px;
+ display: flex;
+ /*align-items: center;
+ justify-content: center; */
+ justify-content: space-between;
+ align-items: center;
+ align-self: stretch;
+}
+
+.action-button {
+ margin-left: 7px;
+ padding: 0;
+ border: 0;
+ background: none;
+ color: inherit;
+ box-shadow: none;
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+
+.list-container {
+ position: relative;
+ background-color: var(--vscode-input-background);
+ border: 1px solid #383434;
+ padding: 10px;
+ width: 400px;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ font-size: 1.2em;
+ margin-bottom: 3px;
+ background-color: var(--vscode-input-background);
+ transition: background-color 0.2s ease-in-out;
+}
+
+li:hover {
+ background-color: var(--vscode-list-hoverBackground);
+ transition: background-color 0.2s ease-in-out;
+}
+
+a {
+ text-decoration: none;
+}
+
+li:before {
+ content: "/";
+}
+
+.feedback-div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 20px 12px 20px;
+ background-color: var(--vscode-sideBar-background);
+}
+
+.feedback-statement {
+ margin: 0 10px 0 0;
+}
+
+.feedback-icons {
+ display: flex;
+ align-items: center;
+ margin-left: 12px;
+}
+
+.feedback-icons span {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+#loginButton {
+ background-color: var(--vscode-button-background);
+ color: var(--vscode-button-foreground);
+ cursor: pointer;
+ padding: 6px 11px;
+ outline: 1px solid transparent;
+ outline-offset: 2px !important;
+ width: 100%;
+}
+
+#loginButton:hover {
+ background-color: var(--vscode-button-hoverBackground);
+}
+
+.hide {
+ display: none;
+}
+
+.thumbsup-clicked, .thumbsdown-clicked {
+ color: var(--vscode-button-foreground);
+ background-color: var(--vscode-button-background);
+ padding: 2px;
+ border-radius: 2px;
+}
+
+
+hr {
+ border: 0;
+ height: 1px;
+ background-color: var(--vscode-dropdown-border);
+ margin: 0px 20px;
+}
\ No newline at end of file
diff --git a/src/common/copilot/constants.ts b/src/common/copilot/constants.ts
new file mode 100644
index 00000000..8f8bd381
--- /dev/null
+++ b/src/common/copilot/constants.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+export const CopilotDisclaimer = `Make sure AI-generated content is accurate and appropriate before using.
Learn more |
View
+terms`;
+export const CodiconStylePathSegments = [ 'src', 'common', 'copilot', 'assets', 'styles', 'codicon.css'];
+export const CopilotStylePathSegments = [ 'src', 'common', 'copilot', 'assets', 'styles', 'copilot.css'];
+
+
+export type WebViewMessage = {
+ type: string;
+ value?: string | number | boolean | object;
+ envName?: string;
+ };
+
+
+export const DataverseEntityNameMap = new Map
([
+ ['webpage', 'adx_webpage'],
+ ['list', 'adx_entitylist'],
+ ['webtemplate', 'adx_webtemplate'],
+ ['basicform', 'adx_entityform'],
+ ['advancedformstep', 'adx_entityform'],
+]);
+
+export const EntityFieldMap = new Map ([
+ ['custom_javascript', 'adx_customjavascript'],
+ ['source', 'adx_source'],
+ ['copy', 'adx_copy']
+]);
+
+export const FieldTypeMap = new Map ([
+ ['js', 'JavaScript'],
+ ['html', 'html']
+]);
+
+export const AuthProfileNotFound = [{ displayText: "Auth Profile not found or expired. Create an Auth profile to start chatting with Copilot again.", code: '' }];
+export const NetworkError = [{ displayText: "There was an issue connecting to the server. Don’t worry, you can try again.", code: '' }];
+export const InvalidResponse = [{ displayText: "Something went wrong. Don’t worry, you can try again.", code: '' }];
\ No newline at end of file
diff --git a/src/common/copilot/dataverseMetadata.ts b/src/common/copilot/dataverseMetadata.ts
new file mode 100644
index 00000000..88e488b4
--- /dev/null
+++ b/src/common/copilot/dataverseMetadata.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NetworkError } from "./constants";
+import fetch, { RequestInit } from "node-fetch";
+
+export async function getEntityMetadata(entityName: string, orgUrl: string, apiToken:string) {
+
+ const dataverseURL = `${orgUrl}api/data/v9.2/EntityDefinitions(LogicalName='${entityName}')?$expand=Attributes($select=LogicalName)`
+
+ const requestInit: RequestInit = {
+ method: "GET",
+ headers: {
+ 'Content-Type': "application/json",
+ Authorization: `Bearer ${apiToken}`,
+ }
+ }
+
+ try {
+ const response = await fetch(dataverseURL, {
+ ...requestInit
+ });
+
+ if (response.ok) {
+ try {
+ const jsonResponse = await response.json();
+ if (jsonResponse.Attributes && Array.isArray(jsonResponse.Attributes) && jsonResponse.Attributes.length > 0) {
+ const attributes = jsonResponse.Attributes;
+ interface Attribute {
+ LogicalName: string;
+ }
+ const attributesNames = attributes.map((attribute: Attribute) => attribute.LogicalName);
+ return attributesNames;
+ }
+ throw new Error("Invalid response format");
+ } catch (error) {
+ return NetworkError;
+ }
+ }
+ }
+ catch (error) {
+ return NetworkError;
+ }
+}
diff --git a/src/common/copilot/telemetry/copilotTelemetry.ts b/src/common/copilot/telemetry/copilotTelemetry.ts
new file mode 100644
index 00000000..755a76db
--- /dev/null
+++ b/src/common/copilot/telemetry/copilotTelemetry.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ITelemetry } from "../../../client/telemetry/ITelemetry";
+
+// Telemetry Event Names
+export const CopyCodeToClipboardEvent = 'CopyCodeToClipboardEvent';
+export const InsertCodeToEditorEvent = 'InsertCodeToEditorEvent';
+export const UserFeedbackThumbsUpEvent = 'ThumbsUpEvent';
+export const UserFeedbackThumbsDownEvent = 'ThumbsDownEvent';
+export const CopilotResponseSuccessEvent = 'CopilotResponseSuccessEvent';
+export const CopilotResponseFailureEvent = 'CopilotResponseFailureEvent';
+export const CopilotLoginSuccessEvent = 'CopilotLoginSuccessEvent';
+export const CopilotLoginFailureEvent = 'CopilotLoginFailureEvent';
+export const CopilotClearChatEvent = 'CopilotClearChatEvent';
+export const UserFeedbackSuccessEvent = 'UserFeedbackEventSuccessEvent';
+export const UserFeedbackFailureEvent = 'UserFeedbackEventFailureEvent';
+
+interface IProDevCopilotTelemetryData {
+ eventName: string,
+ durationInMills?: number,
+ exception?: Error,
+ copilotSessionId?: string,
+ orgId?: string,
+ FeedbackId?: string
+ error?: string
+}
+
+export function sendTelemetryEvent(telemetry: ITelemetry, telemetryData: IProDevCopilotTelemetryData): void {
+ const telemetryDataProperties: Record = {}
+ const telemetryDataMeasurements: Record = {}
+
+ if (telemetryData.durationInMills) {
+ telemetryDataMeasurements.durationInMills = telemetryData.durationInMills;
+ }
+
+ if(telemetryData.copilotSessionId) {
+ telemetryDataProperties.copilotSessionId = telemetryData.copilotSessionId;
+ }
+
+ if(telemetryData.orgId) {
+ telemetryDataProperties.orgId = telemetryData.orgId;
+ }
+
+ if (telemetryData.exception) {
+ telemetryDataProperties.eventName = telemetryData.eventName;
+ telemetry.sendTelemetryException(telemetryData.exception, telemetryDataProperties, telemetryDataMeasurements);
+ } else {
+ telemetry.sendTelemetryEvent(telemetryData.eventName, telemetryDataProperties, telemetryDataMeasurements);
+ }
+}
diff --git a/src/common/copilot/user-feedback/CESSurvey.ts b/src/common/copilot/user-feedback/CESSurvey.ts
new file mode 100644
index 00000000..e35f78c0
--- /dev/null
+++ b/src/common/copilot/user-feedback/CESSurvey.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import * as vscode from "vscode";
+import { npsAuthentication } from "../../../web/client/common/authenticationProvider";
+import { SurveyConstants } from "../../../web/client/common/constants";
+import fetch from "node-fetch";
+import { getNonce } from "../Utils";
+import { ITelemetry } from "../../../client/telemetry/ITelemetry";
+import { UserFeedbackFailureEvent, UserFeedbackSuccessEvent, sendTelemetryEvent } from "../telemetry/copilotTelemetry";
+
+
+export async function CESUserFeedback(context: vscode.ExtensionContext, sessionId: string, userID: string, thumbType: string, telemetry: ITelemetry) {
+
+ const feedbackPanel = vscode.window.createWebviewPanel(
+ "CESUserFeedback",
+ "Feedback",
+ vscode.ViewColumn.Seven,
+ {
+ enableScripts: true,
+ }
+ );
+
+ context.subscriptions.push(feedbackPanel);
+
+ feedbackPanel.webview.postMessage({ type: "thumbType", value: thumbType });
+ const feedbackCssPath = vscode.Uri.joinPath(context.extensionUri, 'src', 'common', 'copilot', "user-feedback", "feedback.css");
+ const feedbackCssUri = feedbackPanel.webview.asWebviewUri(feedbackCssPath);
+
+ const feedbackJsPath = vscode.Uri.joinPath(context.extensionUri, 'src', 'common', 'copilot', "user-feedback", "feedback.js");
+ const feedbackJsUri = feedbackPanel.webview.asWebviewUri(feedbackJsPath);
+
+ const nonce = getNonce();
+
+ feedbackPanel.webview.html = getWebviewContent(feedbackCssUri, feedbackJsUri, nonce);
+
+ const feedbackData = {
+ IsDismissed: false,
+ ProductContext: [
+ {
+ key: 'sessionId',
+ value: sessionId
+ },
+ {
+ key: 'scenario',
+ value: 'ProdDevCopilot'
+ }
+ ],
+ Feedbacks: [
+ {
+ key: 'comment',
+ value: ''
+ }
+ ]
+ };
+
+ const apiToken: string = await npsAuthentication(SurveyConstants.AUTHORIZATION_ENDPOINT)
+
+ const endpointUrl = `https://world.tip1.ces.microsoftcloud.com/api/v1/portalsdesigner/Surveys/powerpageschatgpt/Feedbacks?userId=${userID}`;
+ // Handle messages from the webview
+
+ feedbackPanel.webview.onDidReceiveMessage(
+ async message => {
+ switch (message.command) {
+ case 'feedback':
+ feedbackData.Feedbacks[0].value = message.text;
+ try {
+ const response = await fetch(endpointUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: 'Bearer ' + apiToken,
+ },
+ body: JSON.stringify(feedbackData)
+ });
+
+ if (response.ok) {
+ // Feedback sent successfully
+ const responseJson = await response.json();
+ const feedbackId = responseJson.FeedbackId;
+ sendTelemetryEvent(telemetry, { eventName: UserFeedbackSuccessEvent, FeedbackId: feedbackId });
+ } else {
+ // Error sending feedback
+ sendTelemetryEvent(telemetry, { eventName: UserFeedbackFailureEvent, error: response.statusText });
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } catch (error: any) {
+ // Network error or other exception
+ sendTelemetryEvent(telemetry, { eventName: UserFeedbackFailureEvent, exception: error.message });
+ }
+
+ feedbackPanel.dispose();
+ }
+ return;
+
+ },
+ undefined,
+ context.subscriptions
+ );
+
+}
+
+function getWebviewContent(feedbackCssUri: vscode.Uri, feedbackJsUri: vscode.Uri, nonce: string) {
+
+ return `
+
+
+
+
+
+
+ Cat Coding
+
+
+
+
+
+ `;
+}
diff --git a/src/common/copilot/user-feedback/feedback.css b/src/common/copilot/user-feedback/feedback.css
new file mode 100644
index 00000000..1bd56dcf
--- /dev/null
+++ b/src/common/copilot/user-feedback/feedback.css
@@ -0,0 +1,36 @@
+body {
+ padding: 12px 24px;
+}
+
+.form-label {
+ font-size: 14px;
+}
+
+
+#feedbackText {
+ background-color: var(--vscode-input-background);
+ color: var(--vscode-input-foreground);
+ border-radius: 2px;
+ margin: 16px 0px;
+ width: 100%;
+ resize: none;
+ font-family: var(--vscode-font-family);
+}
+
+#feedbackText:focus {
+ outline: 1px solid var(--vscode-focusBorder);
+}
+
+.privacy-statement {
+ margin: 0px 0px 16px 0px;
+}
+
+.submit-feedback {
+ background-color: var(--vscode-button-background);
+ color: var(--vscode-button-foreground);
+ cursor: pointer;
+ padding: 6px 11px;
+ outline: 1px solid transparent;
+ outline-offset: 2px !important;
+ border-radius: 2px;
+}
\ No newline at end of file
diff --git a/src/common/copilot/user-feedback/feedback.js b/src/common/copilot/user-feedback/feedback.js
new file mode 100644
index 00000000..6c77e429
--- /dev/null
+++ b/src/common/copilot/user-feedback/feedback.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+/* eslint-disable no-undef */
+
+
+(function script() {
+ const vscode = acquireVsCodeApi();
+
+ const feedbackForm = document.getElementById('feedbackForm');
+ const feedbackLabel = document.getElementById('form-label');
+
+ // Handle messages sent from the extension to the webview
+ window.addEventListener("message", (event) => {
+ const message = event.data; // The JSON data our extension sent
+ switch (message.type) {
+ case "thumbType":
+ if(message.value === "thumbsUp"){
+ feedbackLabel.textContent = "Like something? Tell us more.";
+ } else {
+ feedbackLabel.textContent = "Dislike something? Tell us more.";
+ }
+ break;
+ }
+ });
+
+
+ feedbackForm.addEventListener('submit', function (event) {
+ event.preventDefault(); // Prevent form submission
+
+ // Get the feedback text from the form field
+ const feedbackText = document.getElementById('feedbackText').value;
+ vscode.postMessage({ command: 'feedback', text: feedbackText })
+ });
+
+}());
\ No newline at end of file
diff --git a/src/web/client/common/constants.ts b/src/web/client/common/constants.ts
index 734a98ae..364b232b 100644
--- a/src/web/client/common/constants.ts
+++ b/src/web/client/common/constants.ts
@@ -12,7 +12,7 @@ export const NO_CONTENT = " ";
export const EMPTY_FILE_NAME = "defaultfilename";
export const CHARSET = "utf-8";
export const PROVIDER_ID = "microsoft";
-export const SCOPE_OPTION_DEFAULT = "//.default";
+export const SCOPE_OPTION_DEFAULT = "/.default";
export const SCOPE_OPTION_OFFLINE_ACCESS = "offline_access";
export const BAD_REQUEST = "BAD_REQUEST";
export const PUBLIC = "public";
diff --git a/src/web/client/extension.ts b/src/web/client/extension.ts
index 4373b848..f0e5bc54 100644
--- a/src/web/client/extension.ts
+++ b/src/web/client/extension.ts
@@ -203,6 +203,15 @@ export function activate(context: vscode.ExtensionContext): void {
processWillSaveDocument(context);
+ //const copilotProvider = new PowerPagesCopilot(context.extensionUri);
+
+ // context.subscriptions.push(vscode.window.registerWebviewViewProvider('powerpages.copilot', copilotProvider, {
+ // webviewOptions: {
+ // retainContextWhenHidden: true,
+ // },
+ // }));
+
+
showWalkthrough(context, WebExtensionContext.telemetry);
}
diff --git a/tsconfig.json b/tsconfig.json
index f41f11ce..688a4094 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
"sourceMap": true,
"outDir": "out",
"rootDir": "src",
- "lib": [ "es2019", "WebWorker", "DOM.Iterable" ],
+ "lib": [ "es2019", "WebWorker", "DOM.Iterable","DOM" ],
"noImplicitAny": true,
"strictPropertyInitialization": true,
"strict": true,
diff --git a/webpack.config.js b/webpack.config.js
index f93be5b3..87b4b247 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -53,6 +53,9 @@ const nodeConfig = {
new webpack.DefinePlugin({
__GENERATOR_PACKAGE_VERSION__: JSON.stringify(dependencies["@microsoft/generator-powerpages"] || "1.0.0"), // get the currently used version of powerpages generator with fallback to ^1.0.0
}),
+ new webpack.DefinePlugin({
+ IS_DESKTOP: true,
+ }),
]
};
const webConfig = {
@@ -105,6 +108,9 @@ const webConfig = {
new webpack.ProvidePlugin({
Buffer: [ 'buffer', 'Buffer' ],
}),
+ new webpack.DefinePlugin({
+ IS_DESKTOP: false,
+ }),
],
externals: {
'vscode': 'commonjs vscode', // ignored because it doesn't exist