// Copyright 2025 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import '../../ui/components/tooltips/tooltips.js'; import '../../ui/kit/kit.js'; import * as Common from '../../core/common/common.js'; import * as Host from '../../core/host/host.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as Root from '../../core/root/root.js'; import * as Protocol from '../../generated/protocol.js'; import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js'; import * as Buttons from '../../ui/components/buttons/buttons.js'; import type * as Tooltips from '../../ui/components/tooltips/tooltips.js'; import * as UI from '../../ui/legacy/legacy.js'; import * as Lit from '../../ui/lit/lit.js'; import * as VisualLogging from '../../ui/visual_logging/visual_logging.js'; import * as PanelCommon from '../common/common.js'; import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js'; import {ConsoleViewMessage} from './ConsoleViewMessage.js'; import {PromptBuilder} from './PromptBuilder.js'; const {render, html, Directives: {ref}} = Lit; const BUILT_IN_AI_DOCUMENTATION = 'https://developer.chrome.com/docs/ai/built-in'; const UIStringsNotTranslate = { /** * @description Link text in the disclaimer dialog, linking to a settings page containing more information */ learnMore: 'Learn more', /** * @description Link text in the Console Insights Teaser info tooltip, linking to an explainer on how data is being used in this feature */ learnMoreAboutAiSummaries: 'Learn more about AI summaries', /** * @description Description of the console insights feature */ freDisclaimerHeader: 'Get explanations for console warnings and errors', /** * @description First item in the first-run experience dialog */ freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right', /** * @description Explainer for which data is being sent by the console insights feature */ consoleInsightsSendsData: 'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data may be seen by human reviewers to improve this feature.', /** * @description Explainer for which data is being sent by the console insights feature */ consoleInsightsSendsDataNoLogging: 'To generate explanations, the console message, associated stack trace, related source code, and the associated network headers are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.', /** * @description Third item in the first-run experience dialog */ freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution', /** * @description Tooltip text for the console insights teaser */ infoTooltipText: 'The text above has been generated with AI on your local device. Clicking the button will send the console message, stack trace, related source code, and the associated network headers to Google to generate a more detailed explanation.', /** * @description Header text during loading state while an AI summary is being generated */ summarizing: 'Summarizing…', /** * @description Header text during longer lasting loading state while an AI summary is being generated */ summarizingTakesABitLonger: 'Summarizing takes a bit longer…', /** * @description Label for an animation shown while an AI response is being generated */ loading: 'Loading', /** * @description Label for a button which generates a more detailed explanation */ tellMeMore: 'Tell me more', /** * @description Label for a checkbox which turns off the teaser explanation feature */ dontShow: 'Don’t show', /** * @description Aria-label for an infor-button triggering a tooltip with more info about data usage */ learnDataUsage: 'Learn more about how your data is used', /** * @description Header text if there was an error during AI summary generation */ summaryNotAvailable: 'Summary not available', /** * @description Header text informing the user that they can get an AI-generated explanation */ getHelpForWarning: 'Get help understanding this warning', /** * @description Header text informing the user that they can get an AI-generated explanation */ getHelpForError: 'Get help understanding this error', /** * @description Call to action for downloading an AI model */ toUseDownload: 'To use Chrome’s Built-in AI here and elsewhere, download the AI model (~4 GB).', /** * @description Button text to trigger model download */ downloadModel: 'Download model', /** * @description Header text while the model download is in progress */ downloadingAiModel: 'Downloading AI model', /** * @description Label for a progress bar for the AI model download */ progress: 'Progress', /** * @description Progress indicator when the progress status is unknown. If the * progress status is known, this is replaced by a progress bar. */ progressUnknown: 'Progress: unknown', } as const; const lockedString = i18n.i18n.lockedString; const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487'; const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance/get-started#data-use'; const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser'; const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500; const enum State { NO_MODEL = 'no-model', DOWNLOADING = 'downloading', READY = 'ready', GENERATING = 'generating', // Before receiving first chunk PARTIAL_TEASER = 'partial-teaser', // After receiving first chunk TEASER = 'teaser', ERROR = 'error', } interface ViewInput { onTellMeMoreClick: (event: Event) => void; // If multiple ConsoleInsightTeasers exist, each one needs a unique id. Otherwise showing and // hiding of the tooltip, and rendering the loading animation, does not work correctly. uuid: string; headerText: string; mainText: string; isInactive: boolean; dontShowChanged: (e: Event) => void; hasTellMeMoreButton: boolean; isSlowGeneration: boolean; onDownloadModelClick: (event: Event) => void; downloadProgress: number|null; state: State; isForWarning: boolean; } interface ViewOutput { tooltip?: Tooltips.Tooltip.Tooltip; } function renderNoModel(input: ViewInput): Lit.TemplateResult { // clang-format off return html` `; // clang-format on } function renderDownloading(input: ViewInput): Lit.TemplateResult { const percent = ((input.downloadProgress || 0) * 100).toFixed(0); // clang-format off return html` `; // clang-format on } function renderGenerating(input: ViewInput): Lit.TemplateResult { // clang-format off return html` `; // clang-format on } function renderError(input: ViewInput): Lit.TemplateResult { // clang-format off return html` `; // clang-format on } function renderDontShowCheckbox(input: ViewInput): Lit.TemplateResult { // clang-format off return html` ${lockedString(UIStringsNotTranslate.dontShow)} `; // clang-format on } function renderFooter(input: ViewInput): Lit.TemplateResult { // clang-format off return html` `; // clang-format on } function renderTeaser(input: ViewInput): Lit.TemplateResult { // clang-format off return html` `; // clang-format on } export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => { if (input.isInactive) { render(Lit.nothing, target); return; } // clang-format off render(html` { output.tooltip = element as Tooltips.Tooltip.Tooltip; })} id=${'teaser-' + input.uuid} hover-delay=1000 variant="rich" vertical-distance-increase=-6 prefer-span-left jslogContext="console-insight-teaser" > ${(() => { switch (input.state) { case State.NO_MODEL: return renderNoModel(input); case State.DOWNLOADING: return renderDownloading(input); case State.READY: case State.GENERATING: return renderGenerating(input); case State.ERROR: return renderError(input); case State.PARTIAL_TEASER: case State.TEASER: return renderTeaser(input); } })()} `, target); // clang-format on }; export type View = typeof DEFAULT_VIEW; export class ConsoleInsightTeaser extends UI.Widget.Widget { #view: View; #uuid: string; #builtInAi: AiAssistanceModel.BuiltInAi.BuiltInAi; #promptBuilder: PromptBuilder; #headerText = ''; #mainText = ''; #consoleViewMessage: ConsoleViewMessage; #isInactive = false; #abortController: null|AbortController = null; #isSlow = false; #timeoutId: ReturnType|null = null; #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions; #boundOnAidaAvailabilityChange: () => Promise; #boundOnDownloadProgressChange: (event: Common.EventTarget.EventTargetEvent) => void; #boundOnSessionCreation: () => void; #downloadProgress: number|null = null; #state: State; #eventListeners: Common.EventTarget.EventDescriptor[] = []; #isForWarning: boolean; #callShowTooltip = false; #startTime = 0; constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) { super(element); this.#view = view ?? DEFAULT_VIEW; this.#uuid = uuid; this.#promptBuilder = new PromptBuilder(consoleViewMessage); this.#consoleViewMessage = consoleViewMessage; this.#isForWarning = this.#consoleViewMessage.consoleMessage().level === Protocol.Log.LogEntryLevel.Warning; this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this); this.#boundOnDownloadProgressChange = this.#onDownloadProgressChange.bind(this); this.#boundOnSessionCreation = this.#onSessionCreation.bind(this); this.#builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance(); this.#state = this.#builtInAi.hasSession() ? State.READY : State.NO_MODEL; this.#callShowTooltip = true; this.requestUpdate(); } #getConsoleInsightsEnabledSetting(): Common.Settings.Setting|undefined { try { return Common.Settings.moduleSetting('console-insights-enabled') as Common.Settings.Setting; } catch { return; } } #getOnboardingCompletedSetting(): Common.Settings.Setting { return Common.Settings.Settings.instance().createLocalSetting('console-insights-onboarding-finished', true); } async #onAidaAvailabilityChange(): Promise { const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions(); if (currentAidaAvailability !== this.#aidaAvailability) { this.#aidaAvailability = currentAidaAvailability; this.requestUpdate(); } } #executeConsoleInsightAction(): void { UI.Context.Context.instance().setFlavor(ConsoleViewMessage, this.#consoleViewMessage); const action = UI.ActionRegistry.ActionRegistry.instance().getAction(EXPLAIN_TEASER_ACTION_ID); void action.execute(); } #onTellMeMoreClick(event: Event): void { event.stopPropagation(); if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() && this.#getOnboardingCompletedSetting()?.getIfNotDisabled()) { this.#executeConsoleInsightAction(); return; } void this.#showFreDialog(); } #onDownloadModelClick(event: Event): void { event.stopPropagation(); this.#state = State.DOWNLOADING; this.#builtInAi.startDownloadingModel(); Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserModelDownloadStarted); this.requestUpdate(); } #onDownloadProgressChange(event: Common.EventTarget.EventTargetEvent): void { this.#downloadProgress = event.data; this.requestUpdate(); } #onSessionCreation(): void { if (this.#builtInAi.hasSession() && (this.#state === State.NO_MODEL || this.#state === State.DOWNLOADING)) { this.#state = State.READY; Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserModelDownloadCompleted); this.maybeGenerateTeaser(); } } async #showFreDialog(): Promise { const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue === Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING; const iconName = AiAssistanceModel.AiUtils.getIconName(); const result = await PanelCommon.FreDialog.show({ header: {iconName, text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)}, reminderItems: [ { iconName: 'psychiatry', content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight), }, { iconName: 'google', content: noLogging ? lockedString(UIStringsNotTranslate.consoleInsightsSendsDataNoLogging) : lockedString(UIStringsNotTranslate.consoleInsightsSendsData), }, { iconName: 'warning', // clang-format off content: html`${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}`, // clang-format on } ], onLearnMoreClick: () => { void UI.ViewManager.ViewManager.instance().showView('chrome-ai'); }, ariaLabel: lockedString(UIStringsNotTranslate.freDisclaimerHeader), learnMoreButtonText: lockedString(UIStringsNotTranslate.learnMore), }); if (result) { this.#getConsoleInsightsEnabledSetting()?.set(true); this.#getOnboardingCompletedSetting()?.set(true); this.#executeConsoleInsightAction(); } } maybeGenerateTeaser(): void { const startGeneratingTeaser = (): void => { if (!this.#isInactive && Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get()) { void this.#generateTeaserText(); } }; const hasSession = this.#builtInAi.hasSession(); switch (this.#state) { case State.NO_MODEL: case State.DOWNLOADING: if (hasSession) { this.#state = State.READY; startGeneratingTeaser(); } else { if (this.#eventListeners.length === 0) { this.#eventListeners = [ this.#builtInAi.addEventListener( AiAssistanceModel.BuiltInAi.Events.DOWNLOAD_PROGRESS_CHANGED, this.#boundOnDownloadProgressChange), this.#builtInAi.addEventListener( AiAssistanceModel.BuiltInAi.Events.DOWNLOADED_AND_SESSION_CREATED, this.#boundOnSessionCreation), ]; } if (this.#builtInAi.isDownloading()) { this.#state = State.DOWNLOADING; this.#downloadProgress = this.#builtInAi.getDownloadProgress(); } } this.requestUpdate(); return; case State.READY: startGeneratingTeaser(); this.requestUpdate(); return; case State.GENERATING: console.error('Trying trigger teaser generation when state is "GENERATING"'); return; case State.PARTIAL_TEASER: console.error('Trying trigger teaser generation when state is "PARTIAL_TEASER"'); return; // These are terminal states. No need to update anything. case State.TEASER: case State.ERROR: return; } } abortTeaserGeneration(): {okToRemove: boolean} { if (this.#abortController) { this.#abortController.abort(); } if (this.#state === State.GENERATING || this.#state === State.PARTIAL_TEASER) { if (this.#startTime) { if (this.#mainText) { Host.userMetrics.consoleInsightTeaserAbortedAfterFirstCharacter(performance.now() - this.#startTime); } else { Host.userMetrics.consoleInsightTeaserAbortedBeforeFirstCharacter(performance.now() - this.#startTime); } } this.#mainText = ''; this.#state = State.READY; Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted); } if (this.#timeoutId) { clearTimeout(this.#timeoutId); } Common.EventTarget.removeEventListeners(this.#eventListeners); return {okToRemove: this.#state !== State.TEASER}; } setInactive(isInactive: boolean): void { if (this.#isInactive === isInactive) { return; } this.#isInactive = isInactive; this.requestUpdate(); } #setSlow(): void { this.#isSlow = true; this.requestUpdate(); } async #generateTeaserText(): Promise { this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70); this.#state = State.GENERATING; Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted); this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS); this.#startTime = performance.now(); let teaserText = ''; let firstChunkReceived = false; let firstChunkTime = 0; try { for await (const chunk of this.#getOnDeviceInsight()) { teaserText += chunk; this.#mainText = teaserText; this.#state = State.PARTIAL_TEASER; this.requestUpdate(); if (!firstChunkReceived) { firstChunkReceived = true; firstChunkTime = performance.now(); Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(firstChunkTime - this.#startTime); Host.userMetrics.consoleInsightTeaserFirstChunkGeneratedMedium(firstChunkTime - this.#startTime); } } } catch (err) { // Ignore `AbortError` errors, which are thrown on mouse leave. if (err.name === 'AbortError') { this.#state = State.READY; } else { console.error(err.name, err.message); this.#state = State.ERROR; Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored); } clearTimeout(this.#timeoutId); this.requestUpdate(); return; } clearTimeout(this.#timeoutId); const duration = performance.now() - this.#startTime; Host.userMetrics.consoleInsightTeaserGenerated(duration); Host.userMetrics.consoleInsightTeaserGeneratedMedium(duration); Host.userMetrics.consoleInsightTeaserChunkToEndMedium(performance.now() - firstChunkTime); if (teaserText.length > 300) { Host.userMetrics.consoleInsightLongTeaserGenerated(duration); } else { Host.userMetrics.consoleInsightShortTeaserGenerated(duration); } this.#state = State.TEASER; this.#mainText = teaserText; Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted); this.requestUpdate(); } async * #getOnDeviceInsight(): AsyncGenerator { const {prompt} = await this.#promptBuilder.buildPrompt(); this.#abortController = new AbortController(); const stream = this.#builtInAi.getConsoleInsight(prompt, this.#abortController); for await (const chunk of stream) { yield chunk; } this.#abortController = null; } #dontShowChanged(e: Event): void { const showTeasers = !(e.target as HTMLInputElement).checked; Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').set(showTeasers); } #hasTellMeMoreButton(): boolean { if (!UI.ActionRegistry.ActionRegistry.instance().hasAction(EXPLAIN_TEASER_ACTION_ID)) { return false; } if (Root.Runtime.hostConfig.aidaAvailability?.blockedByAge || Root.Runtime.hostConfig.isOffTheRecord) { return false; } if (this.#aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) { return false; } return true; } override performUpdate(): Promise|void { const output: ViewOutput = {}; this.#view( { onTellMeMoreClick: this.#onTellMeMoreClick.bind(this), uuid: this.#uuid, headerText: this.#headerText, mainText: this.#mainText, isInactive: this.#isInactive || !Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get(), dontShowChanged: this.#dontShowChanged.bind(this), hasTellMeMoreButton: this.#hasTellMeMoreButton(), isSlowGeneration: this.#isSlow, onDownloadModelClick: this.#onDownloadModelClick.bind(this), downloadProgress: this.#downloadProgress, state: this.#state, isForWarning: this.#isForWarning, }, output, this.contentElement); if (this.#callShowTooltip && output.tooltip?.hasAttribute('popover')) { // The ConsoleInsightTeaser is created on hover, which means the tooltip's // event listener is created after the hover event is received. We therefore // explicitly call `showTooltip()`, otherwise the tooltip wouldn't show up. output.tooltip.showTooltip(); } this.#callShowTooltip = false; } override wasShown(): void { super.wasShown(); Host.AidaClient.HostConfigTracker.instance().addEventListener( Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange); void this.#onAidaAvailabilityChange(); } override willHide(): void { super.willHide(); Host.AidaClient.HostConfigTracker.instance().removeEventListener( Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange); } }

${input.isForWarning ? lockedString(UIStringsNotTranslate.getHelpForWarning) : lockedString(UIStringsNotTranslate.getHelpForError)}

${lockedString(UIStringsNotTranslate.downloadingAiModel)}

${input.isSlowGeneration ? lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) : lockedString(UIStringsNotTranslate.summarizing) }

${lockedString(UIStringsNotTranslate.summaryNotAvailable)}

${input.headerText}