Fix navigation tracking and ChatPanel window width initialization

Navigation tracking fixes:
- Filter out chrome-extension:// URLs to avoid triggering on extension internal pages
- Fixes "Could not establish connection" errors when sidepanel URL updates
- Remove unused currentTabUrl/currentTabIndex tracking variables

ChatPanel layout fixes:
- Fix windowWidth initialization (was 0 due to too-early evaluation)
- Set windowWidth in connectedCallback after DOM connection
- Add requestAnimationFrame to ensure width is measured after layout
- Add debug logging for troubleshooting layout issues
- Now properly respects BREAKPOINT (800px) for mobile vs desktop layout
This commit is contained in:
Mario Zechner 2025-10-06 18:26:01 +02:00
parent 4f11cc15db
commit 7e79c05407
2 changed files with 20 additions and 14 deletions

View file

@ -19,7 +19,7 @@ export class ChatPanel extends LitElement {
@state() private hasArtifacts = false;
@state() private artifactCount = 0;
@state() private showArtifactsPanel = false;
@state() private windowWidth = window.innerWidth;
@state() private windowWidth = 0;
@property({ attribute: false }) sandboxUrlProvider?: () => string;
@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
@ -36,11 +36,17 @@ export class ChatPanel extends LitElement {
override connectedCallback() {
super.connectedCallback();
this.windowWidth = window.innerWidth; // Set initial width after connection
window.addEventListener("resize", this.resizeHandler);
this.style.display = "flex";
this.style.flexDirection = "column";
this.style.height = "100%";
this.style.minHeight = "0";
// Update width after initial render
requestAnimationFrame(() => {
this.windowWidth = window.innerWidth;
this.requestUpdate();
});
}
override disconnectedCallback() {
@ -146,6 +152,15 @@ export class ChatPanel extends LitElement {
const isMobile = this.windowWidth < BREAKPOINT;
console.log("[ChatPanel Debug]", {
windowWidth: this.windowWidth,
breakpoint: BREAKPOINT,
isMobile,
showArtifactsPanel: this.showArtifactsPanel,
hasArtifacts: this.hasArtifacts,
artifactCount: this.artifactCount,
});
// Set panel props
if (this.artifactsPanel) {
this.artifactsPanel.collapsed = !this.showArtifactsPanel;