@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
389 lines (388 loc) • 78 kB
JavaScript
import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/common/common.js";import*as s from"../../core/host/host.js";import*as n from"../../core/i18n/i18n.js";import*as i from"../../core/root/root.js";import*as o from"../../core/sdk/sdk.js";import*as a from"../../models/ai_assistance/ai_assistance.js";import*as r from"../../models/workspace/workspace.js";import"../../ui/components/buttons/buttons.js";import*as l from"../../ui/lit/lit.js";import{Directives as c,nothing as d,html as h,render as g}from"../../ui/lit/lit.js";import*as u from"../../ui/visual_logging/visual_logging.js";import*as p from"../elements/elements.js";import*as v from"../network/forward/forward.js";import*as m from"../network/network.js";import*as f from"../sources/sources.js";import*as y from"../timeline/timeline.js";import*as b from"../timeline/utils/utils.js";import"../../ui/components/spinners/spinners.js";import*as w from"../../third_party/marked/marked.js";import*as C from"../../ui/components/markdown_view/markdown_view.js";import"../../ui/components/tooltips/tooltips.js";import*as k from"../../models/persistence/persistence.js";import*as x from"../../models/workspace_diff/workspace_diff.js";import*as S from"../changes/changes.js";import*as A from"../../ui/components/input/input.js";var I={cssText:`.toolbar-container{display:flex;background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);flex:0 0 auto;justify-content:space-between}.chat-container{display:flex;flex-direction:column;width:100%;height:100%;align-items:center;overflow:hidden}.toolbar-feedback-link{color:var(--sys-color-primary);margin:0 var(--sys-size-3);height:auto}\n/*# sourceURL=${import.meta.resolve("././aiAssistancePanel.css")} */\n`};const{classMap:T}=c,$="Unsaved changes",E="Applying to page tree…",R="Apply to page tree",z="Cancel",L="Discard",M="Save to workspace",F="Changes saved to workspace",O="Use code snippets with caution",P="The source code of the inspected page and its assets, and any data the inspected page can access is sent to Google to generate code suggestions.",j="The source code of the inspected page and its assets, and any data the inspected page can access is sent to Google to generate code suggestions. This data will not be used to improve Google’s AI models.",D="Learn more",N="View data sent to Google",U="(opens in a new tab)",q="Changes couldn’t be applied to the page tree.",B="Export patch file",_="Changes exported as patch file",V=n.i18n.lockedString;var H;!function(e){e.INITIAL="initial",e.LOADING="loading",e.SUCCESS="success",e.ERROR="error",e.EXPORTED_AS_PATCH="exportedAsPatch",e.SAVED_TO_WORKSPACE="savedToWorkspace"}(H||(H={}));let W=class extends e.Widget.Widget{changeSummary="";changeManager;#e;#t={};#s;#n;#i;#o;#a=H.INITIAL;#r=x.WorkspaceDiff.workspaceDiff();#l=k.Persistence.PersistenceImpl.instance();constructor(t,n,o){super(!1,!1,t),this.#s=o?.aidaClient??new s.AidaClient.AidaClient,this.#o=i.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue===i.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING,this.#e=n??((t,s,n)=>{function i(){return t.sources?h`<x-link
class="link sources-link"
title="${N} ${U}"
href="data:text/plain,${encodeURIComponent(t.sources)}"
jslog=${u.link("files-used-in-patching").track({click:!0})}>
${N}
</x-link>`:d}(t.changeSummary||t.patchSuggestionState!==H.INITIAL)&&(s.tooltipRef=s.tooltipRef??c.createRef(),g(h`
<details class=${T({"change-summary":!0,exported:t.patchSuggestionState===H.EXPORTED_AS_PATCH||t.patchSuggestionState===H.SAVED_TO_WORKSPACE})}>
<summary>
${t.patchSuggestionState===H.EXPORTED_AS_PATCH||t.patchSuggestionState===H.SAVED_TO_WORKSPACE?h`
<devtools-icon class="green-bright-icon summary-badge" .name=${"check-circle"}></devtools-icon>
<span class="header-text">
${t.patchSuggestionState===H.EXPORTED_AS_PATCH?V(_):V(F)}
</span>
`:t.patchSuggestionState===H.SUCCESS?h`
<devtools-icon class="on-tonal-icon summary-badge" .name=${"difference"}></devtools-icon>
<span class="header-text">
${V("File changes in page")}
</span>
<devtools-icon
class="arrow"
.name=${"chevron-down"}
></devtools-icon>
`:h`
<devtools-icon class="on-tonal-icon summary-badge" .name=${"pen-spark"}></devtools-icon>
<span class="header-text">
${V($)}
</span>
<devtools-icon
class="arrow"
.name=${"chevron-down"}
></devtools-icon>
`}
</summary>
${!t.changeSummary&&t.patchSuggestionState===H.INITIAL||t.patchSuggestionState===H.EXPORTED_AS_PATCH||t.patchSuggestionState===H.SAVED_TO_WORKSPACE?d:t.patchSuggestionState===H.SUCCESS?h`<devtools-widget .widgetConfig=${e.Widget.widgetConfig(S.CombinedDiffView.CombinedDiffView,{workspaceDiff:t.workspaceDiff})}></devtools-widget>`:h`<devtools-code-block
.code=${t.changeSummary??""}
.codeLang=${"css"}
.displayNotice=${!0}
></devtools-code-block>
${t.patchSuggestionState===H.ERROR?h`<div class="error-container">
<devtools-icon .name=${"cross-circle-filled"}></devtools-icon>${V(q)} ${i()}
</div>`:d}`}
${t.patchSuggestionState===H.EXPORTED_AS_PATCH||t.patchSuggestionState===H.SAVED_TO_WORKSPACE?d:t.patchSuggestionState===H.SUCCESS?h`
<div class="footer">
<x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${u.link("code-disclaimer").track({click:!0})}>
${V(O)}
</x-link>
${i()}
<div class="save-or-discard-buttons">
<devtools-button
@click=${t.onDiscard}
.jslogContext=${"patch-widget.discard"}
.variant=${"outlined"}>
${V(L)}
</devtools-button>
${t.onSaveToWorkspace?h`
<devtools-button
@click=${t.onSaveToWorkspace}
.jslogContext=${"patch-widget.save-to-workspace"}
.variant=${"primary"}>
${V(M)}
</devtools-button>
`:d}
<devtools-button
@click=${t.onExportPatchFile}
.jslogContext=${"patch-widget.export-patch-file"}
.variant=${"primary"}>
${V(B)}
</devtools-button>
</div>
</div>
`:h`
<div class="footer">
<div class="apply-to-page-tree-container">
${t.patchSuggestionState===H.LOADING?h`
<div class="loading-text-container">
<devtools-spinner></devtools-spinner>
<span>
${V(E)}
</span>
</div>
`:h`
<devtools-button
@click=${t.onApplyToPageTree}
.jslogContext=${"apply-to-page-tree"}
.variant=${"outlined"}>
${V(R)}
</devtools-button>
`}
${t.patchSuggestionState===H.LOADING?h`<devtools-button
@click=${t.onCancel}
.jslogContext=${"cancel"}
.variant=${"outlined"}>
${V(z)}
</devtools-button>`:d}
<devtools-button
aria-details="info-tooltip"
.iconName=${"info"}
.variant=${"icon"}
></devtools-button>
<devtools-tooltip variant="rich" id="info-tooltip" ${c.ref(s.tooltipRef)}>
<div class="info-tooltip-container">
${t.disclaimerTooltipText}
<button
class="link tooltip-link"
role="link"
jslog=${u.link("open-ai-settings").track({click:!0})}
@click=${t.onLearnMoreTooltipClick}
>${V(D)}</button>
</div>
</devtools-tooltip>
</div>
</div>`}
</details>
`,n,{host:n}))}),this.requestUpdate()}#c(){this.#t.tooltipRef?.value?.hidePopover(),e.ViewManager.ViewManager.instance().showView("chrome-ai")}performUpdate(){this.#e({workspaceDiff:this.#r,changeSummary:this.changeSummary,patchSuggestionState:this.#a,sources:this.#i,disclaimerTooltipText:this.#o?V(j):V(P),onLearnMoreTooltipClick:this.#c.bind(this),onApplyToPageTree:this.#d.bind(this),onCancel:()=>{this.#n?.abort()},onDiscard:this.#h.bind(this),onSaveToWorkspace:this.#g()?this.#u.bind(this):void 0,onExportPatchFile:this.#p.bind(this)},this.#t,this.contentElement)}wasShown(){super.wasShown(),G()&&(window.aiAssistanceTestPatchPrompt=async e=>await this.#v(e))}async#d(){if(!G())return;const e=this.changeSummary;if(!e)throw new Error("Change summary does not exist");this.#a=H.LOADING,this.requestUpdate();const{response:t,processedFiles:s}=await this.#v(e);"answer"===t?.type?(await(this.changeManager?.stashChanges()),this.#a=H.SUCCESS):"error"===t?.type&&"abort"===t.error?this.#a=H.INITIAL:this.#a=H.ERROR,this.#i=`Filenames in page.\nFiles:\n${s.map((e=>`* ${e}`)).join("\n")}`,this.requestUpdate()}#h(){this.#r.modifiedUISourceCodes().forEach((e=>{e.resetWorkingCopy()})),this.#a=H.INITIAL,this.#i=void 0,this.changeManager?.popStashedChanges(),this.requestUpdate()}#g(){if(this.#a!==H.SUCCESS)return!1;const e=this.#r.modifiedUISourceCodes().filter((e=>"inspector://"!==e.origin()));return e.length>0&&e.every((e=>this.#l.binding(e)))}#u(){this.#r.modifiedUISourceCodes().forEach((e=>{const t=this.#l.binding(e);t&&t.fileSystem.commitWorkingCopy()})),this.#a=H.SAVED_TO_WORKSPACE,this.changeManager?.dropStashedChanges(),this.requestUpdate()}#p(){this.#a=H.EXPORTED_AS_PATCH,this.requestUpdate()}async#v(e){this.#n=new AbortController;const t=new a.PatchAgent({aidaClient:this.#s,serverSideLoggingEnabled:!1}),{responses:s,processedFiles:n}=await t.applyChanges(e,{signal:this.#n.signal});return{response:s.at(-1),processedFiles:n}}};function G(){return Boolean(i.Runtime.hostConfig.devToolsFreestyler?.patching)}var K=Object.freeze({__proto__:null,get PatchSuggestionState(){return H},PatchWidget:W,isAiAssistancePatchingEnabled:G}),X={cssText:`*{box-sizing:border-box;margin:0;padding:0}:host{width:100%;height:100%;user-select:text;display:flex;flex-direction:column;background-color:var(--sys-color-cdt-base-container)}.chat-ui{width:100%;height:100%;max-height:100%;display:flex;flex-direction:column}.input-form{display:flex;flex-direction:column;padding:var(--sys-size-5) var(--sys-size-5) 0 var(--sys-size-5);max-width:var(--sys-size-36);background-color:var(--sys-color-cdt-base-container);width:100%;position:sticky;z-index:9999;bottom:0;box-shadow:0 1px var(--sys-color-cdt-base-container);@container (width > 688px){--half-scrollbar-width:calc((100cqw - 100%) / 2);margin-left:var(--half-scrollbar-width);margin-right:calc(-1 * var(--half-scrollbar-width))}@container (height < 224px){position:static}& .input-form-shadow-container{position:absolute;top:0;left:-2px;width:calc(100% + 4px);height:var(--sys-size-4);& .input-form-shadow{height:100%;box-shadow:0 -3px 2px -2px var(--app-color-ai-assistance-input-divider);animation:reveal;opacity:0%;animation-timeline:--scroll-timeline}}}.chat-readonly-container{display:flex;width:100%;max-width:var(--sys-size-36);justify-content:center;align-items:center;background-color:var(--sys-color-surface3);font:var(--sys-typescale-body4-regular);padding:var(--sys-size-5) 0;border-radius:var(--sys-shape-corner-medium-small);margin-bottom:var(--sys-size-5);color:var(--sys-color-on-surface-subtle)}.chat-input-container{margin:var(--sys-size-4) 0;width:100%;display:flex;position:relative;flex-direction:column;border:1px solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-small);&:focus-within{outline:1px solid var(--sys-color-primary);border-color:var(--sys-color-primary)}&.disabled{background-color:var(--sys-color-state-disabled-container);border-color:transparent}.image-input-container{margin:var(--sys-size-3) var(--sys-size-5);max-width:100%;width:fit-content;position:relative;devtools-button{position:absolute;top:var(--sys-size-1);right:-4px;border-radius:var(--sys-shape-corner-full);border:1px solid var(--sys-color-neutral-outline);background-color:var(--sys-color-cdt-base-container)}img{margin:var(--sys-size-4) 0;max-height:var(--sys-size-18);max-width:100%;border:1px solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-small)}.loading{margin:var(--sys-size-4) 0;display:inline-flex;justify-content:center;align-items:center;height:var(--sys-size-18);width:var(--sys-size-19);background-color:var(--sys-color-surface3);border-radius:var(--sys-shape-corner-small);border:1px solid var(--sys-color-neutral-outline);devtools-spinner{color:var(--sys-color-state-disabled)}}}}.chat-input{--right-padding:calc(var(--sys-size-3) + 26px);scrollbar-width:none;field-sizing:content;resize:none;width:100%;max-height:84px;border:0;border-radius:var(--sys-shape-corner-small);font:var(--sys-typescale-body4-regular);line-height:18px;min-height:var(--sys-size-11);padding:var(--sys-size-4) var(--right-padding) var(--sys-size-4) var(--sys-size-4);color:var(--sys-color-on-surface);background-color:var(--sys-color-cdt-base-container);&::placeholder{opacity:60%}&:focus-visible{outline:0}&:disabled{color:var(--sys-color-state-disabled);background-color:transparent;border-color:transparent;&::placeholder{color:var(--sys-color-on-surface-subtle);opacity:100%}}&.two-big-buttons{--right-padding:172px}&.screenshot-button{--right-padding:calc(2 * var(--sys-size-3) + 2 * 26px)}}.chat-input-buttons{position:absolute;right:0;bottom:0;display:flex;flex-direction:row}.chat-input-button{padding-bottom:2px;padding-right:var(--sys-size-3)}.chat-inline-button{padding-left:3px}.chat-cancel-context-button{padding-bottom:3px;padding-right:var(--sys-size-3)}.disclaimer{display:flex;justify-content:center;border-top:var(--sys-size-1) solid var(--sys-color-divider);.disclaimer-text{max-width:var(--sys-size-38);color:var(--sys-color-on-surface-subtle);font:var(--sys-typescale-body5-regular);text-wrap:pretty;padding:var(--sys-size-2) var(--sys-size-5)}}.messages-container{flex-grow:1;width:100%;max-width:var(--sys-size-36);@container (width > 688px){--half-scrollbar-width:calc((100cqw - 100%) / 2);margin-left:var(--half-scrollbar-width);margin-right:calc(-1 * var(--half-scrollbar-width))}}.chat-message{user-select:text;cursor:initial;display:flex;flex-direction:column;gap:var(--sys-size-5);width:100%;padding:var(--sys-size-7) var(--sys-size-5);font-size:12px;word-break:normal;overflow-wrap:anywhere;border-bottom:var(--sys-size-1) solid var(--sys-color-divider);&:last-of-type{border-bottom:0}.message-info{display:flex;align-items:center;height:var(--sys-size-11);gap:var(--sys-size-4);font:var(--sys-typescale-body4-bold);img{border:0;border-radius:var(--sys-shape-corner-full);display:block;height:var(--sys-size-9);width:var(--sys-size-9)}h2{font:var(--sys-typescale-body4-bold)}}.actions{display:flex;flex-direction:column;gap:var(--sys-size-8);max-width:100%}.aborted{color:var(--sys-color-on-surface-subtle)}.image-link{width:fit-content;border-radius:var(--sys-shape-corner-small);outline-offset:var(--sys-size-2);img{max-height:var(--sys-size-20);max-width:100%;border-radius:var(--sys-shape-corner-small);border:1px solid var(--sys-color-neutral-outline);width:fit-content;vertical-align:bottom}}.unavailable-image{margin:var(--sys-size-4) 0;display:inline-flex;justify-content:center;align-items:center;height:var(--sys-size-17);width:var(--sys-size-18);background-color:var(--sys-color-surface3);border-radius:var(--sys-shape-corner-small);border:1px solid var(--sys-color-neutral-outline);devtools-icon{color:var(--sys-color-state-disabled)}}}.select-element{display:flex;gap:var(--sys-size-3);align-items:center;width:100%;.resource-link,\n .resource-task{cursor:pointer;padding:var(--sys-size-2) 3px;font:var(--sys-typescale-body4-size);border:var(--sys-size-1) solid var(--sys-color-divider);border-radius:var(--sys-shape-corner-extra-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--sys-size-32);&.allow-overflow{overflow:visible}&:focus-visible{outline:2px solid var(--sys-color-state-focus-ring)}.icon,\n devtools-file-source-icon{display:inline-flex;vertical-align:top;margin-right:var(--sys-size-3);width:var(--sys-size-9);height:var(--sys-size-9)}.network-override-marker{position:relative;float:left}.network-override-marker::before{content:var(--image-file-empty);width:var(--sys-size-4);height:var(--sys-size-4);border-radius:50%;outline:var(--sys-size-1) solid var(--icon-gap-focus-selected);left:11px;position:absolute;top:13px;z-index:1;background-color:var(--sys-color-purple-bright)}.image.icon{display:inline-flex;justify-content:center;align-items:center;margin-right:var(--sys-size-3);img{max-width:var(--sys-size-8);max-height:var(--sys-size-8)}}}.resource-link.not-selected,\n .resource-task.not-selected{color:var(--sys-color-state-disabled);border-color:var(--sys-color-neutral-outline)}}.indicator{color:var(--sys-color-green-bright)}.summary{display:grid;grid-template-columns:auto 1fr auto;padding:var(--sys-size-3);line-height:var(--sys-size-9);cursor:default;gap:var(--sys-size-3);justify-content:center;align-items:center;.title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font:var(--sys-typescale-body4-regular);.paused{font:var(--sys-typescale-body4-bold)}}}.step-code{display:flex;flex-direction:column;gap:var(--sys-size-2)}.js-code-output{devtools-code-block{--code-block-max-code-height:50px}}.context-details{devtools-code-block{--code-block-max-code-height:80px}}.step{width:fit-content;background-color:var(--sys-color-surface3);border-radius:var(--sys-size-6);position:relative;&.empty{pointer-events:none;.arrow{display:none}}&:not(&[open]):hover::after{content:'';height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0;pointer-events:none;background-color:var(--sys-color-state-hover-on-subtle)}&.paused{.indicator{color:var(--sys-color-on-surface-subtle)}}&.canceled{.summary{color:var(--sys-color-state-disabled);text-decoration:line-through}.indicator{color:var(--sys-color-state-disabled)}}devtools-markdown-view{--code-background-color:var(--sys-color-surface1)}devtools-icon{vertical-align:bottom}devtools-spinner{width:var(--sys-size-9);height:var(--sys-size-9);padding:var(--sys-size-2)}&[open]{width:auto;.summary .title{white-space:normal;overflow:unset}.summary .arrow{transform:rotate(180deg)}}summary::marker{content:''}summary{border-radius:var(--sys-size-6)}.step-details{padding:0 var(--sys-size-5) var(--sys-size-4) var(--sys-size-12);display:flex;flex-direction:column;gap:var(--sys-size-6);devtools-code-block{--code-block-background-color:var(--sys-color-surface1)}}}.input-header{display:inline-flex;align-items:flex-end;justify-content:space-between;margin-bottom:2px;line-height:20px;gap:var(--sys-size-8);position:relative;& .feedback-icon{width:var(--sys-size-8);height:var(--sys-size-8)}& .header-link-container{display:inline-flex;align-items:center;gap:var(--sys-size-2);flex-shrink:0}& .header-link-container:first-of-type{flex-shrink:1;min-width:0}}.link{color:var(--text-link);text-decoration:underline;cursor:pointer}button.link{border:none;background:none;font:inherit}.select-an-element-text{margin-left:2px}main{overflow:hidden auto;display:flex;flex-direction:column;align-items:center;height:100%;container-type:size;scrollbar-width:thin;transform:translateZ(1px);scroll-timeline:--scroll-timeline y}.empty-state-container{flex-grow:1;display:grid;align-items:center;justify-content:center;font:var(--sys-typescale-headline4);gap:var(--sys-size-8);padding:var(--sys-size-3);max-width:var(--sys-size-33);@container (width > 688px){--half-scrollbar-width:calc((100cqw - 100%) / 2);margin-left:var(--half-scrollbar-width);margin-right:calc(-1 * var(--half-scrollbar-width))}.header{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center;align-self:end;gap:var(--sys-size-5);.icon{display:flex;justify-content:center;align-items:center;height:var(--sys-size-14);width:var(--sys-size-14);border-radius:var(--sys-shape-corner-small);background:linear-gradient(135deg,var(--sys-color-gradient-primary),var(--sys-color-gradient-tertiary))}h1{font:var(--sys-typescale-headline4)}p{text-align:center;font:var(--sys-typescale-body4-regular)}}.empty-state-content{display:flex;flex-direction:column;gap:var(--sys-size-5);align-items:center;justify-content:center;align-self:start}}.feature-card{display:flex;padding:var(--sys-size-4) var(--sys-size-6);gap:10px;background-color:var(--sys-color-surface2);border-radius:var(--sys-shape-corner-medium-small);width:100%;align-items:center;.feature-card-icon{min-width:var(--sys-size-12);min-height:var(--sys-size-12);display:flex;justify-content:center;align-items:center;background-color:var(--sys-color-tonal-container);border-radius:var(--sys-shape-corner-full);devtools-icon{width:18px;height:18px}}.feature-card-content{h3{font:var(--sys-typescale-body3-medium)}p{font:var(--sys-typescale-body4-regular);line-height:18px}}}.disabled-view{display:flex;max-width:var(--sys-size-34);border-radius:var(--sys-shape-corner-small);box-shadow:var(--sys-elevation-level3);background-color:var(--app-color-card-background);font:var(--sys-typescale-body4-regular);text-wrap:pretty;padding:var(--sys-size-6) var(--sys-size-8);margin:var(--sys-size-4) 0;line-height:var(--sys-size-9);.disabled-view-icon-container{border-radius:var(--sys-shape-corner-extra-small);width:var(--sys-size-9);height:var(--sys-size-9);background:linear-gradient(135deg,var(--sys-color-gradient-primary),var(--sys-color-gradient-tertiary));margin-right:var(--sys-size-5);devtools-icon{margin:var(--sys-size-2)}}}.error-step{color:var(--sys-color-error)}.side-effect-confirmation{display:flex;flex-direction:column;gap:var(--sys-size-5);padding-bottom:var(--sys-size-4)}.side-effect-buttons-container{display:flex;gap:var(--sys-size-4)}.change-summary{background-color:var(--sys-color-surface3);border-radius:var(--sys-shape-corner-medium-small);position:relative;margin:0 var(--sys-size-5);padding:0 var(--sys-size-5);&.exported{pointer-events:none}summary{display:flex;align-items:center;gap:var(--sys-size-3);height:var(--sys-size-14);padding-left:var(--sys-size-3);devtools-spinner{width:var(--sys-size-6);height:var(--sys-size-6);margin-left:var(--sys-size-3);margin-right:var(--sys-size-3)}& devtools-icon.summary-badge{width:var(--sys-size-8);height:var(--sys-size-8)}& .green-bright-icon{color:var(--sys-color-green-bright)}& .on-tonal-icon{color:var(--sys-color-on-tonal-container)}& .header-text{font:var(--sys-typescale-body4);color:var(--sys-color-on-surface)}& .arrow{margin-left:auto}&::marker{content:''}}&:not(&[open]):hover::after{content:'';height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0;pointer-events:none;background-color:var(--sys-color-state-hover-on-subtle)}&[open]:not(.exported){&::details-content{height:fit-content;padding:var(--sys-size-2) 0;border-radius:inherit}summary .arrow{transform:rotate(180deg)}}devtools-code-block{margin-bottom:var(--sys-size-5);--code-block-background-color:var(--sys-color-surface1)}.error-container{display:flex;align-items:center;gap:var(--sys-size-3);color:var(--sys-color-error);devtools-icon{color:var(--sys-color-error)}}.footer{display:flex;flex-direction:row;justify-content:space-between;margin:var(--sys-size-5) 0 var(--sys-size-5) var(--sys-size-2);gap:var(--sys-size-6);.disclaimer-link{align-self:center}.sources-link{flex-grow:1;align-self:center}.info-tooltip-container{max-width:var(--sys-size-28);.tooltip-link{display:block;margin-top:var(--sys-size-4);color:var(--sys-color-primary)}}.loading-text-container{margin-right:var(--sys-size-3);display:flex;justify-content:center;align-items:center;gap:var(--sys-size-3)}.apply-to-page-tree-container{display:flex;align-items:center;gap:var(--sys-size-3);margin-left:auto;devtools-icon{width:18px;height:18px;margin-left:var(--sys-size-2)}}}}@keyframes reveal{0%,\n 99%{opacity:100%}100%{opacity:0%}}\n/*# sourceURL=${import.meta.resolve("././components/chatView.css")} */\n`};class Y extends C.MarkdownView.MarkdownInsightRenderer{templateForToken(e){if("code"===e.type){const t=e.text.split("\n");"css"===t[0]?.trim()&&(e.lang="css",e.text=t.slice(1).join("\n"))}return super.templateForToken(e)}}var Q=`.ai-assistance-feedback-row{font-family:var(--default-font-family);width:100%;display:flex;gap:var(--sys-size-8);justify-content:space-between;align-items:center;margin-block:calc(-1 * var(--sys-size-3));.rate-buttons{display:flex;align-items:center;gap:var(--sys-size-2);padding:var(--sys-size-4) 0}.vertical-separator{height:16px;width:1px;vertical-align:top;margin:0 var(--sys-size-2);background:var(--sys-color-divider);display:inline-block}.suggestions-container{overflow:hidden;position:relative;display:flex;.suggestions-scroll-container{display:flex;overflow:auto hidden;scrollbar-width:none;gap:var(--sys-size-3);padding:var(--sys-size-3)}.scroll-button-container{position:absolute;top:0;height:100%;display:flex;align-items:center;width:var(--sys-size-15);z-index:999}.scroll-button-container.hidden{display:none}.scroll-button-container.left{left:0;background:linear-gradient(90deg,var(--sys-color-cdt-base-container) 0%,var(--sys-color-cdt-base-container) 50%,transparent)}.scroll-button-container.right{right:0;background:linear-gradient(90deg,transparent,var(--sys-color-cdt-base-container) 50%);justify-content:flex-end}}}.feedback-form{display:flex;flex-direction:column;gap:var(--sys-size-5);margin-top:var(--sys-size-4);background-color:var(--sys-color-surface3);padding:var(--sys-size-6);border-radius:var(--sys-shape-corner-medium-small);max-width:var(--sys-size-32);.feedback-input{height:var(--sys-size-11);padding:0 var(--sys-size-5);background-color:var(--sys-color-surface3);width:auto}.feedback-input::placeholder{color:var(--sys-color-on-surface-subtle);font:var(--sys-typescale-body4-regular)}.feedback-header{display:flex;justify-content:space-between;align-items:center}.feedback-title{margin:0;font:var(--sys-typescale-body3-medium)}.feedback-disclaimer{padding:0 var(--sys-size-4)}}\n/*# sourceURL=${import.meta.resolve("././components/userActionRow.css")} */\n`;const{html:Z,Directives:{ref:J}}=l,ee="Good response",te="Bad response",se="Provide additional feedback",ne="Submitted feedback will also include your conversation",ie="Submit",oe="Why did you choose this rating? (optional)",ae="Close",re="Report legal issue",le="Scroll to next suggestions",ce="Scroll to previous suggestions",de=n.i18n.lockedString,he=(e,t,s)=>{l.render(Z`
<style>${A.textInputStylesRaw.cssText}</style>
<style>${Q}</style>
<div class="ai-assistance-feedback-row">
<div class="rate-buttons">
${e.showRateButtons?Z`
<devtools-button
.data=${{variant:"icon",size:"SMALL",iconName:"thumb-up",toggledIconName:"thumb-up-filled",toggled:"POSITIVE"===e.currentRating,toggleType:"primary-toggle",title:de(ee),jslogContext:"thumbs-up"}}
@click=${()=>e.onRatingClick("POSITIVE")}
></devtools-button>
<devtools-button
.data=${{variant:"icon",size:"SMALL",iconName:"thumb-down",toggledIconName:"thumb-down-filled",toggled:"NEGATIVE"===e.currentRating,toggleType:"primary-toggle",title:de(te),jslogContext:"thumbs-down"}}
@click=${()=>e.onRatingClick("NEGATIVE")}
></devtools-button>
<div class="vertical-separator"></div>
`:l.nothing}
<devtools-button
.data=${{variant:"icon",size:"SMALL",title:de(re),iconName:"report",jslogContext:"report"}}
@click=${e.onReportClick}
></devtools-button>
</div>
${e.suggestions?Z`<div class="suggestions-container">
<div class="scroll-button-container left hidden" ${J((e=>{t.suggestionsLeftScrollButtonContainer=e}))}>
<devtools-button
class='scroll-button'
.data=${{variant:"icon",size:"SMALL",iconName:"chevron-left",title:de(ce),jslogContext:"chevron-left"}}
@click=${()=>e.scrollSuggestionsScrollContainer("left")}
></devtools-button>
</div>
<div class="suggestions-scroll-container" @scroll=${e.onSuggestionsScrollOrResize} ${J((e=>{t.suggestionsScrollContainer=e}))}>
${e.suggestions.map((t=>Z`<devtools-button
class='suggestion'
.data=${{variant:"outlined",title:t,jslogContext:"suggestion"}}
@click=${()=>e.onSuggestionClick(t)}
>${t}</devtools-button>`))}
</div>
<div class="scroll-button-container right hidden" ${J((e=>{t.suggestionsRightScrollButtonContainer=e}))}>
<devtools-button
class='scroll-button'
.data=${{variant:"icon",size:"SMALL",iconName:"chevron-right",title:de(le),jslogContext:"chevron-right"}}
@click=${()=>e.scrollSuggestionsScrollContainer("right")}
></devtools-button>
</div>
</div>`:l.nothing}
</div>
${e.isShowingFeedbackForm?Z`
<form class="feedback-form" @submit=${e.onSubmit}>
<div class="feedback-header">
<h4 class="feedback-title">${de(oe)}</h4>
<devtools-button
aria-label=${de(ae)}
@click=${e.onClose}
.data=${{variant:"icon",iconName:"cross",size:"SMALL",title:de(ae),jslogContext:"close"}}
></devtools-button>
</div>
<input
type="text"
class="devtools-text-input feedback-input"
@input=${t=>e.onInputChange(t.target.value)}
placeholder=${de(se)}
jslog=${u.textField("feedback").track({keydown:"Enter"})}
>
<span class="feedback-disclaimer">${de(ne)}</span>
<div>
<devtools-button
aria-label=${de(ie)}
.data=${{type:"submit",disabled:e.isSubmitButtonDisabled,variant:"outlined",size:"SMALL",title:de(ie),jslogContext:"send"}}
>${de(ie)}</devtools-button>
</div>
</div>
</form>
`:l.nothing}
`,s,{host:s})};let ge=class extends e.Widget.Widget{showRateButtons=!1;onFeedbackSubmit=()=>{};suggestions;onSuggestionClick=()=>{};canShowFeedbackForm=!1;#m=new ResizeObserver((()=>this.#f()));#y=new t.Throttler.Throttler(50);#b="";#w;#C=!1;#k=!0;view;#t={};constructor(e,t){super(!1,!1,e),this.view=t??he}wasShown(){super.wasShown(),this.performUpdate(),this.#x(),this.#t.suggestionsScrollContainer&&this.#m.observe(this.#t.suggestionsScrollContainer)}performUpdate(){this.view({onSuggestionClick:this.onSuggestionClick,onRatingClick:this.#S.bind(this),onReportClick:()=>e.UIUtils.openInNewTab("https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504"),scrollSuggestionsScrollContainer:this.#A.bind(this),onSuggestionsScrollOrResize:this.#f.bind(this),onSubmit:this.#I.bind(this),onClose:this.#T.bind(this),onInputChange:this.#$.bind(this),isSubmitButtonDisabled:this.#k,showRateButtons:this.showRateButtons,suggestions:this.suggestions,currentRating:this.#w,isShowingFeedbackForm:this.#C},this.#t,this.contentElement)}#$(e){this.#b=e;const t=!e;t!==this.#k&&(this.#k=t,this.performUpdate())}#x=()=>{const e=this.#t.suggestionsScrollContainer,t=this.#t.suggestionsLeftScrollButtonContainer,s=this.#t.suggestionsRightScrollButtonContainer;if(!e||!t||!s)return;const n=e.scrollLeft>1,i=e.scrollLeft+e.offsetWidth+1<e.scrollWidth;t.classList.toggle("hidden",!n),s.classList.toggle("hidden",!i)};disconnectedCallback(){this.#m.disconnect()}#f(){this.#y.schedule((()=>(this.#x(),Promise.resolve())))}#A(e){const t=this.#t.suggestionsScrollContainer;t&&t.scroll({top:0,left:"left"===e?t.scrollLeft-t.clientWidth:t.scrollLeft+t.clientWidth,behavior:"smooth"})}#S(e){if(this.#w===e)return this.#w=void 0,this.#C=!1,this.#k=!0,this.onFeedbackSubmit("SENTIMENT_UNSPECIFIED"),void this.performUpdate();this.#w=e,this.#C=this.canShowFeedbackForm,this.onFeedbackSubmit(e),this.performUpdate()}#T(){this.#C=!1,this.#k=!0,this.performUpdate()}#I(e){e.preventDefault();const t=this.#b;this.#w&&t&&(this.onFeedbackSubmit(this.#w,t),this.#C=!1,this.#k=!0,this.performUpdate())}};var ue=Object.freeze({__proto__:null,DEFAULT_VIEW:he,UserActionRow:ge});const pe=new CSSStyleSheet;pe.replaceSync(X.cssText);const{html:ve,Directives:{ifDefined:me,ref:fe}}=l,ye={notLoggedIn:"This feature is only available when you are signed into Chrome with your Google account",offline:"Check your internet connection and try again",settingsLink:"AI assistance in Settings",turnOnForStyles:"Turn on {PH1} to get help with understanding CSS styles",turnOnForStylesAndRequests:"Turn on {PH1} to get help with styles and network requests",turnOnForStylesRequestsAndFiles:"Turn on {PH1} to get help with styles, network requests, and files",turnOnForStylesRequestsPerformanceAndFiles:"Turn on {PH1} to get help with styles, network requests, performance, and files",learnAbout:"Learn about AI in DevTools",notAvailableInIncognitoMode:"AI assistance is not available in Incognito mode or Guest mode"},be="Send",we="Start new chat",Ce="Cancel",ke="Select an element",xe="No element selected",Se="How can I help you?",Ae="Explore AI assistance",Ie="Something unforeseen happened and I can no longer continue. Try your request again and see if that resolves the issue. If this keeps happening, update Chrome to the latest version.",Te="Seems like I am stuck with the investigation. It would be better if you start over.",$e="You stopped this response",Ee="This code may modify page content. Continue?",Re="Continue",ze="Cancel",Le="AI",Me="You",Fe="Investigating",Oe="Paused",Pe="Code executed",je="Code to execute",De="Data returned",Ne="Completed",Ue="Canceled",qe="You're viewing a past conversation.",Be="Take screenshot",_e="Remove image input",Ve="Image input sent to the model",He="Account avatar",We="Open image in a new tab",Ge="Image unavailable",Ke=n.i18n.registerUIStrings("panels/ai_assistance/components/ChatView.ts",ye),Xe=n.i18n.getLocalizedString.bind(void 0,Ke),Ye=n.i18n.lockedString,Qe="image/jpeg";class Ze extends HTMLElement{#E=this.attachShadow({mode:"open"});#R=new Y;#z;#L;#M;#F=l.Directives.createRef();#O=new ResizeObserver((()=>this.#P()));#j=!0;constructor(e){super(),this.#L=e}set props(e){this.#R=new Y,this.#L=e,this.#D()}connectedCallback(){this.#E.adoptedStyleSheets=[pe],this.#D(),this.#M&&this.#O.observe(this.#M)}disconnectedCallback(){this.#O.disconnect()}focusTextInput(){const e=this.#E.querySelector(".chat-input");e&&e.focus()}restoreScrollPosition(){void 0!==this.#z&&this.#F?.value&&(this.#F.value.scrollTop=this.#z)}scrollToBottom(){this.#F?.value&&(this.#F.value.scrollTop=this.#F.value.scrollHeight)}#P(){this.#j&&this.#F?.value&&this.#j&&(this.#F.value.scrollTop=this.#F.value.scrollHeight)}#N(e){const t=this.#E.querySelector(".chat-input");t&&(t.value=e,this.#L.onTextInputChange(e))}#U(e){this.#M=e,e?this.#O.observe(e):(this.#j=!0,this.#O.disconnect())}#q=e=>{e.target&&e.target instanceof HTMLElement&&(this.#z=e.target.scrollTop,this.#j=e.target.scrollTop+e.target.clientHeight+1>e.target.scrollHeight)};#I=e=>{if(e.preventDefault(),this.#L.imageInput?.isLoading)return;const t=this.#E.querySelector(".chat-input");if(!t?.value)return;const s=!this.#L.imageInput?.isLoading&&this.#L.imageInput?.data?{inlineData:{data:this.#L.imageInput.data,mimeType:Qe}}:void 0;this.#L.onTextSubmit(t.value,s),t.value=""};#B=e=>{if(e.target&&e.target instanceof HTMLTextAreaElement&&"Enter"===e.key&&!e.shiftKey){if(e.preventDefault(),!e.target?.value||this.#L.imageInput?.isLoading)return;const t=!this.#L.imageInput?.isLoading&&this.#L.imageInput?.data?{inlineData:{data:this.#L.imageInput.data,mimeType:Qe}}:void 0;this.#L.onTextSubmit(e.target.value,t),e.target.value=""}};#_=e=>{e.preventDefault(),this.#L.isLoading&&this.#L.onCancelClick()};#V=e=>{this.#N(e),this.focusTextInput(),s.userMetrics.actionTaken(s.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked)};#D(){l.render(ve`
<div class="chat-ui">
<main @scroll=${this.#q} ${fe(this.#F)}>
${function({state:t,aidaAvailability:s,messages:o,isLoading:r,isReadOnly:c,canShowFeedbackForm:d,isTextInputDisabled:h,suggestions:g,userInfo:p,markdownRenderer:v,conversationType:m,changeSummary:f,changeManager:y,onSuggestionClick:b,onFeedbackSubmit:w,onMessageContainerRef:C}){if("consent-view"===t)return et(function(){const t=document.createElement("button");let s;t.textContent=Xe(ye.settingsLink),t.classList.add("link"),e.ARIAUtils.markAsLink(t),t.addEventListener("click",(()=>{e.ViewManager.ViewManager.instance().showView("chrome-ai")})),t.setAttribute("jslog",`${u.action("open-ai-settings").track({click:!0})}`);const o=i.Runtime.hostConfig;if(o.isOffTheRecord)return ve`${Xe(ye.notAvailableInIncognitoMode)}`;s=o.devToolsAiAssistancePerformanceAgent?.enabled?n.i18n.getFormatLocalizedString(Ke,ye.turnOnForStylesRequestsPerformanceAndFiles,{PH1:t}):o.devToolsAiAssistanceFileAgent?.enabled?n.i18n.getFormatLocalizedString(Ke,ye.turnOnForStylesRequestsAndFiles,{PH1:t}):o.devToolsAiAssistanceNetworkAgent?.enabled?n.i18n.getFormatLocalizedString(Ke,ye.turnOnForStylesAndRequests,{PH1:t}):n.i18n.getFormatLocalizedString(Ke,ye.turnOnForStyles,{PH1:t});return ve`${s}`}());if("available"!==s)return et(function(e){switch(e){case"no-account-email":case"sync-is-paused":return ve`${Xe(ye.notLoggedIn)}`;case"no-internet":return ve`${Xe(ye.offline)}`}}(s));if(!m)return function(){const t=i.Runtime.hostConfig,s=[...t.devToolsFreestyler?.enabled?[{icon:"brush-2",heading:"CSS styles",content:ve`Open <button class="link" role="link" jslog=${u.link("open-elements-panel").track({click:!0})} @click=${()=>{e.ViewManager.ViewManager.instance().showView("elements")}}>Elements</button> to ask about CSS styles`}]:[],...t.devToolsAiAssistanceNetworkAgent?.enabled?[{icon:"arrow-up-down",heading:"Network",content:ve`Open <button class="link" role="link" jslog=${u.link("open-network-panel").track({click:!0})} @click=${()=>{e.ViewManager.ViewManager.instance().showView("network")}}>Network</button> to ask about a request's details`}]:[],...t.devToolsAiAssistanceFileAgent?.enabled?[{icon:"document",heading:"Files",content:ve`Open <button class="link" role="link" jslog=${u.link("open-sources-panel").track({click:!0})} @click=${()=>{e.ViewManager.ViewManager.instance().showView("sources")}}>Sources</button> to ask about a file's content`}]:[],...t.devToolsAiAssistancePerformanceAgent?.enabled?[{icon:"performance",heading:"Performance",content:ve`Open <button class="link" role="link" jslog=${u.link("open-performance-panel").track({click:!0})} @click=${()=>{e.ViewManager.ViewManager.instance().showView("timeline")}}>Performance</button> to ask about a trace item`}]:[]];return ve`
<div class="empty-state-container">
<div class="header">
<div class="icon">
<devtools-icon
name="smart-assistant"
></devtools-icon>
</div>
<h1>${Ye(Ae)}</h1>
<p>To chat about an item, right-click and select <strong>Ask AI</strong></p>
</div>
<div class="empty-state-content">
${s.map((e=>ve`
<div class="feature-card">
<div class="feature-card-icon">
<devtools-icon name=${e.icon}></devtools-icon>
</div>
<div class="feature-card-content">
<h3>${e.heading}</h3>
<p>${e.content}</p>
</div>
</div>
`))}
</div>
</div>`}();if(o.length>0)return function({messages:t,isLoading:s,isReadOnly:n,canShowFeedbackForm:i,userInfo:o,markdownRenderer:r,changeSummary:c,changeManager:d,onSuggestionClick:h,onFeedbackSubmit:g,onMessageContainerRef:p}){function v(){return s?l.nothing:ve`<devtools-widget
.widgetConfig=${e.Widget.widgetConfig(W,{changeSummary:c,changeManager:d})}
></devtools-widget>`}return ve`
<div class="messages-container" ${fe(p)}>
${t.map(((t,c,d)=>function({message:t,isLoading:s,isReadOnly:n,canShowFeedbackForm:i,isLast:o,userInfo:r,markdownRenderer:c,onSuggestionClick:d,onFeedbackSubmit:h}){if("user"===t.entity){const e=r.accountFullName||Ye(Me),s=r.accountImage?ve`<img src="data:image/png;base64, ${r.accountImage}" alt=${He} />`:ve`<devtools-icon
.name=${"profile"}
></devtools-icon>`,n=t.imageInput&&"inlineData"in t.imageInput?function(e){if(e.data===a.NOT_FOUND_IMAGE_DATA)return ve`<div class="unavailable-image" title=${Ge}>
<devtools-icon name='file-image'></devtools-icon>
</div>`;const t=`data:image/jpeg;base64,${e.data}`;return ve`<x-link
class="image-link" title=${We}
href=${t}
>
<img src=${t} alt=${Ve} />
</x-link>`}(t.imageInput.inlineData):l.nothing;return ve`<section
class="chat-message query"
jslog=${u.section("question")}
>
<div class="message-info">
${s}
<div class="message-name">
<h2>${e}</h2>
</div>
</div>
${n}
<div class="message-content">${Je(t.text,c)}</div>
</section>`}return ve`
<section
class="chat-message answer"
jslog=${u.section("answer")}
>
<div class="message-info">
<devtools-icon name="smart-assistant"></devtools-icon>
<div class="message-name">
<h2>${Ye(Le)}</h2>
</div>
</div>
${l.Directives.repeat(t.steps,((e,t)=>t),(e=>function({step:e,isLoading:t,markdownRenderer:s,isLast:n}){const i=l.Directives.classMap({step:!0,empty:!e.thought&&!e.code&&!e.contextDetails,paused:Boolean(e.sideEffect),canceled:Boolean(e.canceled)});return ve`
<details class=${i}
jslog=${u.section("step")}
.open=${Boolean(e.sideEffect)}>
<summary>
<div class="summary">
${function({step:e,isLoading:t,isLast:s}){if(t&&s&&!e.sideEffect)return ve`<devtools-spinner></devtools-spinner>`;let n="checkmark",i=Ye(Ne),o="button";s&&e.sideEffect?(o=void 0,i=void 0,n="pause-circle"):e.canceled&&(i=Ye(Ue),n="cross");return ve`<devtools-icon
class="indicator"
role=${me(o)}
aria-label=${me(i)}
.name=${n}
></devtools-icon>`}({step:e,isLoading:t,isLast:n})}
${function(e){const t=e.sideEffect?ve`<span class="paused">${Ye(Oe)}: </span>`:l.nothing,s=e.title??`${Ye(Fe)}…`;return ve`<span class="title">${t}${s}</span>`}(e)}
<devtools-icon
class="arrow"
.name=${"chevron-down"}
></devtools-icon>
</div>
</summary>
${function({step:e,markdownRenderer:t,isLast:s}){const n=s&&e.sideEffect?function(e){if(!e.sideEffect)return l.nothing;return ve`<div
class="side-effect-confirmation"
jslog=${u.section("side-effect-confirmation")}
>
<p>${Ye(Ee)}</p>
<div class="side-effect-buttons-container">
<devtools-button
.data=${{variant:"outlined",jslogContext:"decline-execute-code"}}
@click=${()=>e.sideEffect?.onAnswer(!1)}
>${Ye(ze)}</devtools-button>
<devtools-button
.data=${{variant:"primary",jslogContext:"accept-execute-code",iconName:"play"}}
@click=${()=>e.sideEffect?.onAnswer(!0)}
>${Ye(Re)}</devtools-button>
</div>
</div>`}(e):l.nothing,i=e.thought?ve`<p>${Je(e.thought,t)}</p>`:l.nothing,o=e.contextDetails?ve`${l.Directives.repeat(e.contextDetails,(e=>ve`<div class="context-details">
<devtools-code-block
.code=${e.text}
.codeLang=${e.codeLang||""}
.displayNotice=${!1}
.header=${e.title}
.showCopyButton=${!0}
></devtools-code-block>
</div>`))}`:l.nothing;return ve`<div class="step-details">
${i}
${function(e){if(!e.code&&!e.output)return l.nothing;const t=e.output&&!e.canceled?Ye(Pe):Ye(je),s=e.code?ve`<div class="action-result">
<devtools-code-block
.code=${e.code.trim()}
.codeLang=${"js"}
.displayNotice=${!Boolean(e.output)}
.header=${t}
.showCopyButton=${!0}
></devtools-code-block>
</div>`:l.nothing,n=e.output?ve`<div class="js-code-output">
<devtools-code-block
.code=${e.output}
.codeLang=${"js"}
.displayNotice=${!0}
.header=${Ye(De)}
.showCopyButton=${!1}
></devtools-code-block>
</div>`:l.nothing;return ve`<div class="step-code">${s}${n}</div>`}(e)}
${n}
${o}
</div>`}({step:e,markdownRenderer:s,isLast:n})}
</details>`}({step:e,isLoading:s,markdownRenderer:c,isLast:[...t.steps.values()].at(-1)===e&&o})))}
${t.answer?ve`<p>${Je(t.answer,c,{animate:!n&&s&&o})}</p>`:l.nothing}
${function(e){if(e.error){let t;switch(e.error){case"unknown":case"block":t=Ie;break;case"max-steps":t=Te;break;case"abort":return ve`<p class="aborted" jslog=${u.section("aborted")}>${Ye($e)}</p>`}return ve`<p class="error" jslog=${u.section("error")}>${Ye(t)}</p>`}return l.nothing}(t)}
${o&&s?l.nothing:ve`<devtools-widget class="actions" .widgetConfig=${e.Widget.widgetConfig(ge,{showRateButtons:void 0!==t.rpcId,onFeedbackSubmit:(e,s)=>{t.rpcId&&h(t.rpcId,e,s)},suggestions:o?t.suggestions:void 0,onSuggestionClick:d,canShowFeedbackForm:i})}></devtools-widget>`}
</section>
`}({message:t,isLoading:s,isReadOnly:n,canShowFeedbackForm:i,isLast:d.at(-1)===t,userInfo:o,markdownRenderer:r,onSuggestionClick:h,onFeedbackSubmit:g})))}
${v()}
</div>
`}({messages:o,isLoading:r,isReadOnly:c,canShowFeedbackForm:d,userInfo:p,markdownRenderer:v,changeSummary:f,changeManager:y,onSuggestionClick:b,onFeedbackSubmit:w,onMessageContainerRef:C});return function({isTextInputDisabled:e,suggestions:t,onSuggestionClick:s}){return ve`<div class="empty-state-container">
<div class="header">
<div class="icon">
<devtools-icon
name="smart-assistant"
></devtools-icon>
</div>
<h1>${Ye(Se)}</h1>
</div>
<div class="empty-state-content">
${t.map((t=>ve`<devtools-button
class="suggestion"
@click=${()=>s(t)}
.data=${{variant:"outlined",size:"REGULAR",title:t,jslogContext:"suggestion",disabled:e}}
>${t}</devtools-button>`))}
</div>
</div>`}({isTextInputDisabled:h,suggestions:g,onSuggestionClick:b})}({state:this.#L.state,aidaAvailability:this.#L.aidaAvailability,messages:this.#L.messages,isLoading:this.#L.isLoading,isReadOnly:this.#L.isReadOnly,canShowFeedbackForm:this.#L.canShowFeedbackForm,isTextInputDisabled:this.#L.isTextInputDisabled,suggestions:this.#L.emptyStateSuggestions,userInfo:this.#L.userInfo,markdownRenderer:this.#R,conversationType:this.#L.conversationType,changeSummary:this.#L.changeSummary,changeManager:this.#L.changeManager,onSuggestionClick:this.#V,onFeedbackSubmit:this.#L.onFeedbackSubmit,onMessageContainerRef:this.#U})}
${this.#L.isReadOnly?function({onNewConversation:e,conversationType:t}){if(!t)return l.nothing;return ve`<div
class="chat-readonly-container"
jslog=${u.section("read-only")}
>
<span>${Ye(qe)}</span>
<devtools-button
aria-label=${Ye(we)}
class="chat-inline-button"
@click=${e}
.data=${{variant:"text",title:Ye(we),jslogContext:"start-new-chat"}}
>${Ye(we)}</devtools-button>
</div>`}({conversationType:this.#L.conversationType,onNewConversation:this.#L.onNewConversation}):function({isLoading:e,blockedByCrossOrigin:t,isTextInputDisabled:s,inputPlaceholder:n,state:i,selectedContext:o,inspectElementToggled:a,multimodalInputEnabled:r,conversationType:c,imageInput:d,isTextInputEmpty:h,onContextClick:g,onInspectElementClick:p,onSubmit:v,onTextAreaKeyDown:m,onCancel:f,onNewConversation:y,onTakeScreenshot:b,onRemoveImageInput:w,onTextInputChange:C}){if(!c)return l.nothing;const k=l.Directives.classMap({"chat-input":!0,"two-big-buttons":t,"screenshot-button":Boolean(r)&&!t}),x=l.Directives.classMap({"chat-input-container":!0,disabled:s});return ve`
<form class="input-form" @submit=${v}>
<div class="input-form-shadow-container">
<div class="input-form-shadow"></div>
</div>
${"consent-view"!==i?ve`
<div class="input-header">
<div class="header-link-container">
${function({selectedContext:e,inspectElementToggled:t,conversationType:s,onContextClick:n,onInspectElementClick:i}){if(!s)return l.nothing;const o="freestyler"===s,a=l.Directives.classMap({"not-selected":!e,"resource-link":!0,"allow-overflow":o});if(!e&&!o)return l.nothing;const r=e?.getIcon()??l.nothing,c=e=>{"Enter"!==e.key&&" "!==e.key||n()};return ve`<div class="select-element">
${o?ve`
<devtools-button
.data=${{variant:"icon_toggle",size:"REGULAR",iconName:"select-element",toggledIconName:"select-element",toggleType:"primary-toggle",toggled:t,title:Ye(ke),jslogContext:"select-element"}}
@click=${i}
></devtools-button>
`:l.nothing}
<div
role=button
class=${a}
tabindex=${o?"-1":"0"}
@click=${n}
@keydown=${c}
>
${r}${e?.getTitle()??ve`<span>${Ye(xe)}</span>`}
</div>
</div>`}({selectedContext:o,inspectElementToggled:a,conversationType:c,onContextClick:g,onInspectElementClick:p})}
</div>
</div>
`:l.nothing}
<div class=${x}>
${function({multimodalInputEnabled:e,imageInput:t,onRemoveImageInput:s}){if(!e||!t)return l.nothing;const n=ve`<devtools-button
aria-label=${Ye(_e)}
@click=${s}
.data=${{variant:"icon",size:"MICRO",iconName:"cross",title:Ye(_e)}}
></devtools-button>`;if(t.isLoading)return ve`<div class="image-input-container">
${n}
<div class="loading">
<devtools-spinner></devtools-spinner>
</div>
</div>`;return ve`