// Copyright 2025 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as i18n from '../../../core/i18n/i18n.js'; import * as Root from '../../../core/root/root.js'; import * as UI from '../../../ui/legacy/legacy.js'; import {html, type LitTemplate, render} from '../../../ui/lit/lit.js'; import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js'; import exploreWidgetStyles from './exploreWidget.css.js'; /* * Strings that don't need to be translated at this time. */ const UIStringsNotTranslate = { /** * @description Text for the empty state of the AI assistance panel when there is no agent selected. */ Explore: 'Explore AI assistance', /** * @description The footer disclaimer that links to more information about the AI feature. */ learnAbout: 'Learn about AI in DevTools', } as const; const lockedString = i18n.i18n.lockedString; interface FeatureCard { icon: string; heading: string; jslogContext: string; onClick: () => void; text: string; panelName: string; } interface ViewProps { featureCards: FeatureCard[]; } export const DEFAULT_VIEW = ( input: ViewProps, _output: Record, target: HTMLElement, ): void => { function renderFeatureCardContent(featureCard: FeatureCard): LitTemplate { // TODO: Open should be part of the string and the button a placeholder // but locked strings don't support it. // clang-format off return html`Open ${featureCard.text}`; // clang-format on } // clang-format off render( html`

${input.featureCards.map( featureCard => html`

${featureCard.heading}

${renderFeatureCardContent(featureCard)}

`, )}

`, target, ); // clang-format on }; export type View = typeof DEFAULT_VIEW; export class ExploreWidget extends UI.Widget.Widget { #view: View; constructor(element?: HTMLElement, view = DEFAULT_VIEW) { super(element); this.#view = view; } override wasShown(): void { super.wasShown(); void this.requestUpdate(); } override performUpdate(): Promise|void { const config = Root.Runtime.hostConfig; const featureCards: FeatureCard[] = []; if (config.devToolsFreestyler?.enabled && UI.ViewManager.ViewManager.instance().hasView('elements')) { featureCards.push({ icon: 'brush-2', heading: 'CSS styles', jslogContext: 'open-elements-panel', onClick: () => { void UI.ViewManager.ViewManager.instance().showView( 'elements', ); }, panelName: 'Elements', text: 'to ask about CSS styles' }); } if (config.devToolsAiAssistanceNetworkAgent?.enabled && UI.ViewManager.ViewManager.instance().hasView('network')) { featureCards.push({ icon: 'arrow-up-down', heading: 'Network', jslogContext: 'open-network-panel', onClick: () => { void UI.ViewManager.ViewManager.instance().showView( 'network', ); }, panelName: 'Network', text: 'to ask about a request\'s details' }); } if (config.devToolsAiAssistanceFileAgent?.enabled && UI.ViewManager.ViewManager.instance().hasView('sources')) { featureCards.push({ icon: 'document', heading: 'Files', jslogContext: 'open-sources-panel', onClick: () => { void UI.ViewManager.ViewManager.instance().showView( 'sources', ); }, panelName: 'Sources', text: 'to ask about a file\'s content' }); } if (config.devToolsAiAssistancePerformanceAgent?.enabled && UI.ViewManager.ViewManager.instance().hasView('timeline')) { featureCards.push({ icon: 'performance', heading: 'Performance', jslogContext: 'open-performance-panel', onClick: () => { void UI.ViewManager.ViewManager.instance().showView( 'timeline', ); }, panelName: 'Performance', text: 'to ask about a trace item' }); } this.#view( { featureCards, }, {}, this.contentElement, ); } }

${lockedString(UIStringsNotTranslate.Explore)}

${featureCard.heading}