lightspeed/explanation: send the feedback events

packages/ansible-language-server/src/ansibleLanguageService.ts

@@ -366,6 +366,7 @@ export class AnsibleLanguageService {
  const accessToken: string = params["accessToken"];
  const URL: string = params["URL"];
  const content: string = params["content"];
+ const explanationId: string = params["explanationId"];
 
  const headers = {
  "Content-Type": "application/json",
@@ -380,7 +381,7 @@ export class AnsibleLanguageService {
  const result: ExplanationResponse = await axiosInstance
  .post("/ai/explanations/", {
  content: content,
- explanationId: uuidv4(),
+ explanationId: explanationId,
  })
  .then((response) => {
  return response.data;

src/extension.ts

@@ -68,7 +68,10 @@ import {
  LightspeedUser,
  AuthProviderType,
 } from "./features/lightspeed/lightspeedUser";
-import { PlaybookOutlineEvent } from "./interfaces/lightspeed";
+import {
+ PlaybookOutlineEvent,
+ PlaybookExplanationEvent,
+} from "./interfaces/lightspeed";
 
 export let client: LanguageClient;
 export let lightSpeedManager: LightSpeedManager;
@@ -558,12 +561,21 @@ export async function activate(context: ExtensionContext): Promise<void> {
  context.subscriptions.push(
  vscode.commands.registerCommand(
  "ansible.lightspeed.thumbsUpDown",
- async (param: PlaybookOutlineEvent) => {
- lightSpeedManager.apiInstance.feedbackRequest(
- { playbookOutlineFeedback: param },
- true,
- true,
- );
+ async (param: PlaybookOutlineEvent | PlaybookExplanationEvent) => {
+ if ("outlineId" in param) {
+ lightSpeedManager.apiInstance.feedbackRequest(
+ { playbookOutlineFeedback: param },
+ true,
+ true,
+ );
+ }
+ if ("explanationId" in param) {
+ lightSpeedManager.apiInstance.feedbackRequest(
+ { playbookExplanationFeedback: param },
+ true,
+ true,
+ );
+ }
  window.showInformationMessage("Thank you for your feedback!");
  },
  ),

src/features/lightspeed/playbookExplanation.ts

@@ -7,6 +7,7 @@ import { SettingsManager } from "../../settings";
 import { lightSpeedManager } from "../../extension";
 import { LightspeedUser } from "./lightspeedUser";
 import { ExplanationResponse } from "@ansible/ansible-language-server/src/interfaces/lightspeedApi";
+import { v4 as uuidv4 } from "uuid";
 
 export const playbookExplanation = async (
  extensionUri: vscode.Uri,
@@ -21,7 +22,11 @@ export const playbookExplanation = async (
  if (document?.languageId !== "ansible") {
  return;
  }
- const currentPanel = PlaybookExplanationPanel.createOrShow(extensionUri);
+ const explanationId = uuidv4();
+ const currentPanel = PlaybookExplanationPanel.createOrShow(
+ extensionUri,
+ explanationId,
+ );
  currentPanel.setContent(
  `<div id="icons">
  <span class="codicon codicon-loading codicon-modifier-spin"></span>
@@ -44,6 +49,7 @@ export const playbookExplanation = async (
  accessToken: accessToken,
  URL: settingsManager.settings.lightSpeedService.URL,
  content: content,
+ explanationId: explanationId,
  },
  );
  markdown = response.content;
@@ -71,7 +77,7 @@ export class PlaybookExplanationPanel {
  private readonly _extensionUri: vscode.Uri;
  private _disposables: vscode.Disposable[] = [];
 
- public static createOrShow(extensionUri: vscode.Uri) {
+ public static createOrShow(extensionUri: vscode.Uri, explanationId: string) {
  const panel = vscode.window.createWebviewPanel(
  PlaybookExplanationPanel.viewType,
  "Explanation",
@@ -92,7 +98,10 @@ export class PlaybookExplanationPanel {
  switch (command) {
  case "thumbsUp":
  case "thumbsDown":
- vscode.commands.executeCommand("ansible.lightspeed.thumbsUpDown");
+ vscode.commands.executeCommand("ansible.lightspeed.thumbsUpDown", {
+ action: message.action,
+ explanationId: explanationId,
+ });
  break;
  }
  });
@@ -117,14 +126,11 @@ export class PlaybookExplanationPanel {
  );
  }
 
- public setContent(html_snippet: string, showFeedbackBox = false) {
- this._panel.webview.html = this.buildFullHtml(
- html_snippet,
- showFeedbackBox,
- );
+ public setContent(htmlSnippet: string, showFeedbackBox = false) {
+ this._panel.webview.html = this.buildFullHtml(htmlSnippet, showFeedbackBox);
  }
 
- private buildFullHtml(html_snippet: string, showFeedbackBox = false) {
+ private buildFullHtml(htmlSnippet: string, showFeedbackBox = false) {
  const webview = this._panel.webview;
  const webviewUri = getUri(webview, this._extensionUri, [
  "out",
@@ -172,7 +178,7 @@ export class PlaybookExplanationPanel {
  </head>
  <body>
  <div class="playbookGeneration">
- ${html_snippet}
+ ${htmlSnippet}
  </div>
  ${showFeedbackBox ? feedbackBoxSnippet : ""}
 

src/interfaces/lightspeed.ts

@@ -76,11 +76,17 @@ export interface PlaybookOutlineEvent {
  outlineId: string;
 }
 
+export interface PlaybookExplanationEvent {
+ action: ThumbsUpDownAction;
+ outlineId: string;
+}
+
 export interface FeedbackRequestParams {
  inlineSuggestion?: InlineSuggestionEvent;
  sentimentFeedback?: SentimentEvent;
  suggestionQualityFeedback?: SuggestionQualityEvent;
  issueFeedback?: IssueFeedbackEvent;
+ playbookExplanationFeedback?: PlaybookExplanationEvent;
  playbookOutlineFeedback?: PlaybookOutlineEvent;
  model?: string;
 }

src/webview/apps/lightspeed/playbookExplanation/main.ts

@@ -3,6 +3,7 @@ import {
  Button,
  vsCodeButton,
 } from "@vscode/webview-ui-toolkit";
+import { ThumbsUpDownAction } from "../../../../definitions/lightspeed";
 
 provideVSCodeDesignSystem().register(vsCodeButton());
 
@@ -31,11 +32,28 @@ function changeDisplay(className: string, displayState: string) {
  element.style.display = displayState;
  }
 }
-
 function sendThumbsup() {
- vscode.postMessage({ command: "thumbsUp" });
+ const thumbsUpButton = document.getElementById("thumbsup-button") as Button;
+ const thumbsDownButton = document.getElementById(
+ "thumbsdown-button",
+ ) as Button;
+ thumbsUpButton.setAttribute("class", "iconButtonSelected");
+ thumbsDownButton.setAttribute("class", "iconButton");
+ vscode.postMessage({
+ command: "thumbsUp",
+ action: ThumbsUpDownAction.UP,
+ });
 }
 
 function sendThumbsdown() {
- vscode.postMessage({ command: "thumbsDown" });
+ const thumbsUpButton = document.getElementById("thumbsup-button") as Button;
+ const thumbsDownButton = document.getElementById(
+ "thumbsdown-button",
+ ) as Button;
+ thumbsUpButton.setAttribute("class", "iconButton");
+ thumbsDownButton.setAttribute("class", "iconButtonSelected");
+ vscode.postMessage({
+ command: "thumbsDown",
+ action: ThumbsUpDownAction.DOWN,
+ });
 }