diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 2daf2939bb..ffc7735af8 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -215,6 +215,8 @@ grd_files_release_sources = [ "front_end/Images/symbol.svg", "front_end/Images/sync.svg", "front_end/Images/table.svg", + "front_end/Images/thumb-down.svg", + "front_end/Images/thumb-up.svg", "front_end/Images/toolbarResizerVertical.png", "front_end/Images/top-panel-close.svg", "front_end/Images/top-panel-open.svg", diff --git a/config/gni/devtools_image_files.gni b/config/gni/devtools_image_files.gni index 3c312c3968..136d8d1d99 100644 --- a/config/gni/devtools_image_files.gni +++ b/config/gni/devtools_image_files.gni @@ -214,6 +214,8 @@ devtools_svg_sources = [ "symbol.svg", "sync.svg", "table.svg", + "thumb-down.svg", + "thumb-up.svg", "top-panel-close.svg", "top-panel-open.svg", "triangle-bottom-right.svg", diff --git a/front_end/Images/src/thumb-down.svg b/front_end/Images/src/thumb-down.svg new file mode 100644 index 0000000000..aa4d2e93e7 --- /dev/null +++ b/front_end/Images/src/thumb-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/front_end/Images/src/thumb-up.svg b/front_end/Images/src/thumb-up.svg new file mode 100644 index 0000000000..0e87a4672d --- /dev/null +++ b/front_end/Images/src/thumb-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/front_end/panels/explain/ExplainPopover.ts b/front_end/panels/explain/ExplainPopover.ts index 5143fbb362..6260d1c978 100644 --- a/front_end/panels/explain/ExplainPopover.ts +++ b/front_end/panels/explain/ExplainPopover.ts @@ -3,13 +3,21 @@ // found in the LICENSE file. import * as Host from '../../core/host/host.js'; +import type * as Platform from '../../core/platform/platform.js'; import * as Marked from '../../third_party/marked/marked.js'; +import * as Buttons from '../../ui/components/buttons/buttons.js'; import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js'; import * as UI from '../../ui/legacy/legacy.js'; +const surveyLink = + 'https://docs.google.com/forms/d/e/1FAIpQLSfKm4UX5PvTkM-N6aZ2UcaNyRhoP075Hr-lOmRaJv_4zN4kkQ/viewform'; + export class ExplainPopover { #source: Source; #contentElement = document.createElement('div'); + #markdownElement: Element; + #answer = ''; + #detectOutsideInteraction = (event: Event): void => { const el = event?.composedPath()[0] as Node; if (!el.isDescendant(this.#contentElement) && this.#contentElement !== el) { @@ -22,15 +30,60 @@ export class ExplainPopover { this.#source = source; this.#contentElement.style.padding = '16px'; this.#contentElement.style.maxWidth = '500px'; + this.#contentElement.innerHTML = ` +
+
+
+ Rate this response: +
+ `; this.#popover.contentElement.classList.toggle('has-padding', false); this.#popover.contentElement.appendChild(this.#contentElement); + this.#markdownElement = this.#contentElement.querySelector('.markdown') as HTMLDivElement; + const ratingContainer = this.#contentElement.querySelector('.rating') as HTMLDivElement; + ratingContainer.style.display = 'none'; + ratingContainer.style.flexDirection = 'row'; + ratingContainer.style.alignItems = 'center'; + const plusButton = new Buttons.Button.Button(); + plusButton.data = { + variant: Buttons.Button.Variant.TOOLBAR, + size: Buttons.Button.Size.TINY, + iconName: 'thumb-up', + }; + plusButton.classList.add('plus'); + plusButton.style.marginLeft = '1em'; + plusButton.style.width = '20px'; + plusButton.style.height = '20px'; + const minusButton = new Buttons.Button.Button(); + minusButton.data = { + variant: Buttons.Button.Variant.TOOLBAR, + size: Buttons.Button.Size.TINY, + iconName: 'thumb-down', + }; + minusButton.classList.add('minus'); + minusButton.style.width = '20px'; + minusButton.style.height = '20px'; + ratingContainer.append(plusButton); + ratingContainer.append(minusButton); + + this.#contentElement.addEventListener('click', event => { + const isPlus = (event.target as HTMLElement).matches('.plus'); + const isMinus = (event.target as HTMLElement).matches('.minus'); + if (isMinus || isPlus) { + const rating = isMinus ? 'Bad' : 'Good'; + Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab( + `${surveyLink}?usp=pp_url&entry.1692896504=${encodeURIComponent(rating)}&entry.1188367343=${ + encodeURIComponent(this.#source.getPrompt())}&entry.405375461=${encodeURIComponent(this.#answer)}` as + Platform.DevToolsPath.UrlString); + } + }); } #renderMarkdown(content: string): void { const markdown = new MarkdownView.MarkdownView.MarkdownView(); markdown.data = {tokens: Marked.Marked.lexer(content)}; - this.#contentElement.removeChildren(); - this.#contentElement.append(markdown); + this.#markdownElement.removeChildren(); + this.#markdownElement.append(markdown); } #setupListeners(): void { @@ -52,9 +105,13 @@ export class ExplainPopover { this.#renderMarkdown('loading...'); this.#popover.setContentAnchorBox(this.#source.getAnchor()); this.#popover.show(document); + this.#popover.positionContent(); try { const result = await runPrompt(this.#source.getPrompt()); this.#renderMarkdown(result); + this.#answer = result; + const ratingContainer = this.#contentElement.querySelector('.rating') as HTMLDivElement; + ratingContainer.style.display = 'flex'; } catch (err) { this.#renderMarkdown(`loading failed: ${err.message}`); }