feat: updated homepage chat

[Dani Akash (DaniAkash)]

This pull request refactors and streamlines the New Tab chat experience in the BrowserOS Agent app. It introduces a dedicated /home/chat route for chat, decouples chat state from the NewTab component, and centralizes chat logic using a new useChatActions hook. The result is a more modular, maintainable, and scalable chat feature, with improved routing and UI consistency across the app.

Routing and Layout Improvements:

• Added a new /home/chat route in the router and updated SidebarLayout and NewTabLayout to properly handle full-screen chat and hide the focus grid when appropriate. (App.tsx, SidebarLayout.tsx, NewTabLayout.tsx) [1] [2] [3] [4]

NewTab and Chat Refactor:

• Refactored NewTab to remove embedded chat state and logic, delegating chat to the new /home/chat route. Chat is now started by navigating to /home/chat with query parameters, and all chat state is managed in the dedicated NewTabChat component. (NewTab.tsx) [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Chat Component and State Management:

• Migrated chat logic in NewTabChat to use a new useChatActions hook, consolidating chat actions, state, and analytics events. The chat component now reads initial messages from URL query parameters and supports a more flexible, stateless design. (NewTabChat.tsx) [1] [2] [3] [4] [5]

UI Consistency and Header Updates:

• Updated ChatHeader to support a hideHistory prop, ensuring that chat history controls are only shown in the appropriate context (e.g., hidden in the new tab chat view). (ChatHeader.tsx) [1] [2] [3] [4]

[greptile-apps]

Greptile Summary

This PR refactors the New Tab chat experience by promoting it from inline component state to a dedicated /home/chat route, decoupling chat lifecycle from NewTab and centralising shared chat logic into the new useChatActions hook. The approach is architecturally sound and results in cleaner separation of concerns across routing, layout, and state management.

Key changes:

• New /home/chat route — NewTabChat is now a first-class route rendered under NewTabLayout; NewTab navigates there via navigate('/home/chat?q=...&mode=...') instead of toggling local state.
• useChatActions hook — consolidates input state, tab management, voice input, and analytics tracking into a reusable hook consumable by both the newtab and sidepanel chat surfaces.
• ChatHeader hideHistory prop — backward-compatible addition that hides the history button in the newtab chat context; the dedicated NewTabChatHeader is correctly removed.
• Layout conditioning — SidebarLayout and NewTabLayout now conditionally apply h-screen overflow-hidden and hide the focus grid only for /home/chat, keeping other home sub-routes unaffected.
• One type safety nit — NewTabChat's initial-message effect passes chatMode to createBrowserOSAction via an unsafe cast (chatMode as 'chat' | 'agent'); the ?? 'agent' fallback only handles null, not arbitrary strings from a tampered URL.

Confidence Score: 4/5

• Safe to merge; one minor type-safety nit in the URL param handling that has no realistic runtime impact given controlled callers.
• The refactor is well-scoped, the new hook is clean and correctly avoids double-firing with the hasSentInitialRef guard, and the layout/routing changes are carefully conditioned. The single issue found (unsafe chatMode cast) is a style/type-safety concern only triggered by a deliberately malformed URL and does not affect normal usage.
• packages/browseros-agent/apps/agent/entrypoints/newtab/index/NewTabChat.tsx (line 112 — chatMode cast)

Important Files Changed

Filename	Overview
packages/browseros-agent/apps/agent/lib/chat-actions/useChatActions.ts	New hook consolidating chat state, voice input, tab management, and analytics tracking. Clean extraction of shared logic from both NewTabChat and the sidepanel. The _stop destructuring pattern (line 154) is idiomatic TypeScript to exclude stop from the spread while returning the wrapped handleStop instead.
packages/browseros-agent/apps/agent/entrypoints/newtab/index/NewTabChat.tsx	Refactored to a route-based standalone component reading initial message from URL query params. One type safety issue with the chatMode cast on line 112; otherwise the param-driven initialization logic with the hasSentInitialRef guard is well-structured.
packages/browseros-agent/apps/agent/entrypoints/newtab/index/NewTab.tsx	Chat state (chatActive, messages, sendMessage, etc.) removed and replaced with router navigation to /home/chat with query params. startInlineChat now builds URLSearchParams and calls navigate. Clean decoupling.
packages/browseros-agent/apps/agent/entrypoints/app/layout/SidebarLayout.tsx	Conditionally applies h-screen overflow-hidden for /home/chat and the standard scrollable layout for all other routes. Hardcoded path string is a minor maintenance concern but acceptable.
packages/browseros-agent/apps/agent/entrypoints/sidepanel/index/ChatHeader.tsx	Added optional hideHistory prop that gates the history/new-conversation controls. Backward compatible; existing sidepanel usage unaffected since the prop defaults to undefined (falsy).

Sequence Diagram

sequenceDiagram
    actor User
    participant NewTab as NewTab (/home)
    participant Router as React Router
    participant NewTabChat as NewTabChat (/home/chat)
    participant useChatActions as useChatActions hook
    participant ChatSession as ChatSessionContext

    User->>NewTab: types query + submits
    NewTab->>NewTab: startInlineChat(message, mode, aiTab?)
    NewTab->>Router: navigate('/home/chat?q=...&mode=...&tabs=...')
    Router->>NewTabChat: mount component

    NewTabChat->>useChatActions: initialize(events config)
    useChatActions->>ChatSession: useChatSessionContext()
    useChatActions-->>NewTabChat: { sendMessage, mode, input, voiceState, ... }

    NewTabChat->>NewTabChat: useEffect (hasSentInitialRef guard)
    NewTabChat->>NewTabChat: read q, mode, tabs from searchParams
    NewTabChat->>Router: setSearchParams({}, replace) — clean URL
    alt tabs param present
        NewTabChat->>NewTabChat: chrome.tabs.query({})
        NewTabChat->>ChatSession: sendMessage({ text, action })
    else no tabs
        NewTabChat->>ChatSession: sendMessage({ text: query })
    end

    User->>NewTabChat: types follow-up + submits
    NewTabChat->>useChatActions: handleSubmit(e)
    useChatActions->>ChatSession: sendMessage({ text, action? })

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: packages/browseros-agent/apps/agent/entrypoints/newtab/index/NewTabChat.tsx
Line: 112

Comment:
**Unsafe type cast for `chatMode`**

`chatMode` is read directly from URL query params (`searchParams.get('mode')`) and returns `string | null`. The guard `if (chatMode === 'chat' || chatMode === 'agent')` is correctly used to call `setMode`, but `chatMode` is later passed to `createBrowserOSAction` via an unsafe cast. If `chatMode` is any string other than `'chat'` or `'agent'` (e.g., a tampered/malformed URL), the `?? 'agent'` null-coalescing fallback will NOT trigger (since the value is non-null), silently passing an invalid mode string. Prefer a narrowing check that also handles the invalid-string case:

```suggestion
                  mode: chatMode === 'chat' || chatMode === 'agent' ? chatMode : 'agent',
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: "fix: review comments"}

[Dani Akash (DaniAkash)]

Greptile (@greptileai)

[Dani Akash (DaniAkash)]

Greptile (@greptileai)

[Dani Akash (DaniAkash)]

Greptile (@greptileai)

[Dani Akash (DaniAkash)]

Greptile (@greptileai)

[Dani Akash (DaniAkash)]

Greptile (@greptileai)

[Dani Akash (DaniAkash)]

Greptile (@greptileai)