getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-15 15:03:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix navigation tracking and ChatPanel window width initialization

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

17
packages/browser-extension/src/sidepanel.ts
View file

@ -71,10 +71,6 @@ let agent: Agent;
let chatPanel: ChatPanel;
let agentUnsubscribe: (() => void) | undefined;
// Track current active tab for real-time navigation updates
let currentTabUrl: string | undefined;
let currentTabIndex: number | undefined;
// ============================================================================
// HELPERS
// ============================================================================
@ -302,7 +298,8 @@ const renderApp = () => {
// Listen for tab updates and insert navigation messages immediately
chrome.tabs.onUpdated.addListener((_tabId, changeInfo, tab) => {
// Only care about URL changes on the active tab
if (changeInfo.url && tab.active && tab.url && agent) {
// Ignore chrome-extension:// URLs (extension internal pages)
if (changeInfo.url && tab.active && tab.url && agent && !tab.url.startsWith("chrome-extension://")) {
const navMessage = createNavigationMessage(tab.url, tab.title || "Untitled", tab.favIconUrl, tab.index);
agent.appendMessage(navMessage);
}
@ -311,7 +308,8 @@ chrome.tabs.onUpdated.addListener((_tabId, changeInfo, tab) => {
// Listen for tab activation (user switches tabs)
chrome.tabs.onActivated.addListener(async (activeInfo) => {
const tab = await chrome.tabs.get(activeInfo.tabId);
if (tab.url && agent) {
// Ignore chrome-extension:// URLs (extension internal pages)
if (tab.url && agent && !tab.url.startsWith("chrome-extension://")) {
const navMessage = createNavigationMessage(tab.url, tab.title || "Untitled", tab.favIconUrl, tab.index);
agent.appendMessage(navMessage);
}
@ -345,13 +343,6 @@ async function initApp() {
};
chatPanel.additionalTools = [browserJavaScriptTool];
// Initialize current tab state
const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (currentTab?.url) {
currentTabUrl = currentTab.url;
currentTabIndex = currentTab.index;
}
// Check for session in URL
const urlParams = new URLSearchParams(window.location.search);
let sessionIdFromUrl = urlParams.get("session");

17
packages/web-ui/src/ChatPanel.ts
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;