diff --git a/src/common/copilot/assets/copilotStrings.ts b/src/common/copilot/assets/copilotStrings.ts index c6562de5..1eff15c8 100644 --- a/src/common/copilot/assets/copilotStrings.ts +++ b/src/common/copilot/assets/copilotStrings.ts @@ -9,4 +9,23 @@ import vscode from "vscode"; export const COPILOT_STRINGS = { EXPLAIN_CODE_PROMPT: vscode.l10n.t('Explain the following code snippet:'), LARGE_SELECTION: vscode.l10n.t('Selection is too large. Try making a shorter selection.'), + FEATURE_NOT_ENABLED_MESSAGE: vscode.l10n.t("Feature is not enabled for this geo."), + COPILOT_SUPPORT_MESSAGE: vscode.l10n.t("Hi! Your Microsoft account doesn’t currently support Copilot. Contact your admin for details."), + COPY_TO_CLIPBOARD_MESSAGE: vscode.l10n.t("Copy to clipboard"), + INSERT_CODE_MESSAGE: vscode.l10n.t("Insert code into editor"), + AI_CONTENT_MISTAKES_MESSAGE: vscode.l10n.t("AI-generated content can contain mistakes"), + THUMBS_UP_MESSAGE: vscode.l10n.t("Thumbs Up"), + THUMBS_DOWN_MESSAGE: vscode.l10n.t("Thumbs Down"), + FORM_PROMPT: vscode.l10n.t("Write JavaScript code for form field validation to check phone field value is in the valid format."), + WEB_API_PROMPT: vscode.l10n.t("Write web API code to query active contact records."), + LIST_PROMPT: vscode.l10n.t("Write JavaScript code to highlight the row where email field is empty in table list."), + SUGGESTIONS_MESSAGE: vscode.l10n.t("Here are a few suggestions to get you started"), + GETTING_STARTED_MESSAGE: vscode.l10n.t("GETTING STARTED"), + LEARN_MORE_MESSAGE: vscode.l10n.t("Learn more about Copilot"), + LOGIN_MESSAGE: vscode.l10n.t("Hi! Instantly generate code for Power Pages sites by typing in what you need. To start using Copilot, log in to your Microsoft account."), + LOGIN_BUTTON: vscode.l10n.t("Login"), + HI: vscode.l10n.t("Hi"), + WELCOME_MESSAGE: vscode.l10n.t(`In your own words, describe what you need. You can get help with writing code for Power Pages sites in HTML, CSS, and JS languages.`), + DOCUMENTATION_LINK: vscode.l10n.t("To know more, see Copilot in Power Pages documentation."), + WORKING_ON_IT_MESSAGE: vscode.l10n.t("Working on it...") } diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js index 1587f203..e34db2bf 100644 --- a/src/common/copilot/assets/scripts/copilot.js +++ b/src/common/copilot/assets/scripts/copilot.js @@ -74,9 +74,9 @@ textDiv.innerText = responseText[i].displayText; resultDiv.appendChild(textDiv); - if (responseText[i].displayText === "Feature is not enabled for this geo.") { + if (responseText[i].displayText === copilotStrings.FEATURE_NOT_ENABLED_MESSAGE) { chatInputComponent.classList.add("hide") - textDiv.innerText = "Your Microsoft account doesn’t currently support Copilot. Contact your admin for details." + textDiv.innerText = copilotStrings.COPILOT_SUPPORT_MESSAGE; isCopilotEnabled = false; return resultDiv; } @@ -127,7 +127,7 @@ copyButton.innerHTML = clipboardSvg; copyButton.classList.add("action-button"); copyButton.classList.add("copy-button"); - copyButton.title = "Copy to clipboard"; + copyButton.title = copilotStrings. COPY_TO_CLIPBOARD_MESSAGE; copyButton.addEventListener("click", () => { copyCodeToClipboard(code); }); @@ -137,7 +137,7 @@ insertButton.innerHTML = insertSvg insertButton.classList.add("action-button"); insertButton.classList.add("insert-button"); - insertButton.title = "Insert code into editor"; + insertButton.title = copilotStrings.INSERT_CODE_MESSAGE; insertButton.addEventListener("click", () => { insertCode(code); }); @@ -213,16 +213,16 @@ if (!isCopilotEnabled) { return feedback; } - feedback.innerHTML = `

AI-generated content can contain mistakes

+ feedback.innerHTML = `

${copilotStrings.AI_CONTENT_MISTAKES_MESSAGE}

- Thumbs Up + ${copilotStrings.THUMBS_UP_MESSAGE} - Thumbs Down + ${copilotStrings.THUMBS_DOWN_MESSAGE} @@ -238,11 +238,11 @@ const suggestedPrompt = document.createElement("div"); suggestedPrompt.classList.add("suggested-prompts"); - const formPrompt = 'Write JavaScript code for form field validation to check phone field value is in the valid format.'; - const webApiPrompt = 'Write web API code to query active contact records.'; - const listPrompt = 'Write JavaScript code to highlight the row where email field is empty in table list.'; + const formPrompt = copilotStrings.FORM_PROMPT; + const webApiPrompt = copilotStrings.WEB_API_PROMPT; + const listPrompt = copilotStrings.LIST_PROMPT; - suggestedPrompt.innerHTML = `

Here are a few suggestions to get you started

+ suggestedPrompt.innerHTML = `

${copilotStrings.SUGGESTIONS_MESSAGE}

 ${starIconSvg} @@ -270,10 +270,10 @@ function createWalkthroughDiv() { const walkthrough = document.createElement("div"); walkthrough.classList.add("walkthrough-div"); - walkthrough.innerHTML = `

GETTING STARTED

+ walkthrough.innerHTML = `

${copilotStrings.GETTING_STARTED_MESSAGE}

 ${bookIconSvg} - Learn more about Copilot + ${copilotStrings.LEARN_MORE_MESSAGE} `; return walkthrough; } @@ -343,8 +343,8 @@ 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.

- `; +

${copilotStrings.LOGIN_MESSAGE}

+ `; messageElement.appendChild(notLoggedIn); @@ -358,7 +358,7 @@ } 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, and JS languages.

+ loggedInDiv.innerHTML = `

${copilotStrings.HI} ${userName}! ${copilotStrings.WELCOME_MESSAGE}

`; messageElement.appendChild(loggedInDiv); @@ -397,8 +397,8 @@ const notAvailabel = document.createElement("div"); notAvailabel.classList.add("not-available"); notAvailabel.innerHTML = `

-

Hi! Your Microsoft account doesn’t currently support Copilot. Contact your admin for details

-

To know more, see Copilot in Power Pages documentation.

`; +

${copilotStrings.COPILOT_SUPPORT_MESSAGE}

+

${copilotStrings.DOCUMENTATION_LINK}

`; messageElement.appendChild(notAvailabel); @@ -499,7 +499,7 @@ function getApiResponse(userPrompt, isSuggestedPrompt) { apiResponseHandler = handleAPIResponse(); - apiResponseHandler.updateThinking("Working on it..."); + apiResponseHandler.updateThinking(copilotStrings.WORKING_ON_IT_MESSAGE); vscode.postMessage({ type: "newUserPrompt", value: {userPrompt: userPrompt, isSuggestedPrompt: isSuggestedPrompt} }); } diff --git a/src/common/copilot/welcome-notification/CopilotNotificationPanel.ts b/src/common/copilot/welcome-notification/CopilotNotificationPanel.ts index ddbbac1e..d3c86f8f 100644 --- a/src/common/copilot/welcome-notification/CopilotNotificationPanel.ts +++ b/src/common/copilot/welcome-notification/CopilotNotificationPanel.ts @@ -104,10 +104,10 @@ function getWebviewContent(notificationCssUri: vscode.Uri, notificationJsUri: vs
-

Let Copilot help you code

-

Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you.

- - Learn more about Copilot +

${vscode.l10n.t("Let Copilot help you code")}

+

${vscode.l10n.t("Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you.")}

+ + ${vscode.l10n.t("Learn more about Copilot")}
Image @@ -115,7 +115,7 @@ function getWebviewContent(notificationCssUri: vscode.Uri, notificationJsUri: vs
- +