Skip to content

[WIP] ntp attach tabs#2726

Draft
sashalavron wants to merge 11 commits into
mainfrom
alavrenchuk/ntp-attach-tabs
Draft

[WIP] ntp attach tabs#2726
sashalavron wants to merge 11 commits into
mainfrom
alavrenchuk/ntp-attach-tabs

Conversation

@sashalavron
Copy link
Copy Markdown
Contributor

Asana Task/Github Issue:

Description

Testing Steps

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

- Introduced `enableAttachTabs` configuration to allow users to attach open tabs as context in Duck.ai submissions.
- Implemented `omnibar_getOpenTabs` and `omnibar_getTabContent` requests to fetch open tab metadata and extract content.
- Updated omnibar UI to include options for attaching tab content, with appropriate labels and loading/error states.
- Added unit tests for mention detection related to tab attachments.
- Enhanced type definitions and JSON schemas for new functionalities.

This feature enhances user interaction by enabling context-aware submissions, improving the overall chat experience.
…hods

- Added `enableAttachTabs` configuration to support attaching open tabs in the omnibar.
- Introduced `getOpenTabs` and `getTabContent` methods in the context for fetching tab metadata and content.
- Created `TabChips` component to display attached tabs in the UI, enhancing user interaction with AI chat submissions.
- Updated type definitions to accommodate new functionalities.

This update improves the omnibar's capability to provide context-aware submissions, enriching the overall user experience.
…combobox functionality

- Updated AiChatForm to support caret position tracking and enhanced combobox integration for better accessibility.
- Modified Omnibar to include new props for tab attachment features, allowing users to attach open tabs in AI chat submissions.
- Improved type definitions to reflect changes in props and functionality, ensuring better type safety and clarity.

These updates improve user interaction and accessibility within the omnibar, enriching the overall chat experience.
…on support

- Added a `header` prop to the Dropdown component for non-interactive headers.
- Introduced a `trailingIcon` prop in DropdownItem for additional visual elements.
- Updated styles for header and trailing icons to improve UI consistency.
- Enhanced Dropdown functionality to support better user interaction and accessibility.

These changes enrich the Dropdown component, providing a more flexible and visually appealing user experience.
- Introduced `useOpenTabs` hook to fetch and manage open tabs within the omnibar context.
- Created `useTabAttachments` hook for handling tab attachment logic, including attaching, removing, and clearing tabs.
- Enhanced existing `useAiChats` hook with `useCallback` for improved performance in chat visibility functions.

These additions enhance the omnibar's functionality, allowing for better management of open tabs and their integration into the chat experience.
- Introduced the `AttachMenu` component to facilitate attaching images and tabs within the omnibar.
- Implemented conditional rendering based on the availability of image and tab attachment features.
- Created supporting components for image-only and tabs-only menus, enhancing user interaction.
- Added styles for the new component to ensure a consistent UI experience.

This addition improves the omnibar's functionality by allowing users to easily attach images and tabs, enriching the overall chat experience.
…unctionality

- Removed the "Close tab picker" label from the omnibar strings as it is no longer needed.
- Introduced a new `filterTabs` function in `tabFilter.js` to enable case-insensitive filtering of tabs based on title and URL, improving user experience when searching for tabs.

These changes streamline the omnibar's functionality and enhance tab management capabilities.
@github-actions
Copy link
Copy Markdown
Contributor

⚠️ Cursor review was not successful.

This PR requires a manual review and approval from a member of one of the following teams:

  • @duckduckgo/content-scope-scripts-owners
  • @duckduckgo/apple-devs
  • @duckduckgo/android-devs
  • @duckduckgo/team-windows-development
  • @duckduckgo/extension-owners
  • @duckduckgo/config-aor
  • @duckduckgo/breakage-aor
  • @duckduckgo/breakage

- Added the `MentionPicker` component to facilitate tab mentions within the omnibar, enhancing user interaction by allowing users to select from open tabs.
- Created associated styles in `MentionPicker.module.css` for a consistent UI experience.
- Introduced `useMentionPicker` hook to manage the mention detection and selection logic, improving the overall functionality of the omnibar.
- Added unit tests for the new tab filtering functionality to ensure reliability.

These changes enrich the omnibar's capabilities, providing a more intuitive way for users to attach tabs in their conversations.
- Added support for attaching PDF files in the omnibar, allowing users to include files in their chat submissions.
- Updated the omnibar configuration to include `supportedFileTypes` and `enableAttachFiles` options, enhancing flexibility for file handling.
- Introduced a new JSON schema for `NativePromptFile` to define the structure of attached files, ensuring compatibility with existing systems.
- Modified the omnibar submission notification to include a `files` field, reflecting the new attachment capabilities.

These changes improve the omnibar's functionality by enabling users to attach files, enriching the overall chat experience.
…d configurations

- Updated omnibar strings to reflect new labels for attaching images and PDFs, improving clarity for users.
- Added support for attaching files (PDFs) in the omnibar configuration, including enabling/disabling file attachments per model.
- Introduced a new JSON schema for `NativePromptFile` to define the structure of attached files, ensuring compatibility with existing systems.
- Enhanced the omnibar mock transport to support file types, allowing for better testing and development of file attachment features.

These changes enrich the omnibar's functionality by enabling users to attach files, thereby enhancing the overall chat experience.
… tab attachment functionality

- Added a new tech design document outlining the implementation of PDF file attachments in the omnibar, allowing users to attach files alongside images.
- Implemented `useFileAttachments` hook to manage file uploads, including validation against supported MIME types and handling file processing.
- Enhanced the `AttachMenu` component to support both image and file attachments, providing a unified interface for users.
- Updated the omnibar configuration to include `supportedFileTypes` for models, enabling dynamic file attachment capabilities based on model support.
- Improved the mock transport and type definitions to accommodate new file attachment features, ensuring compatibility with existing systems.

These changes significantly enhance the omnibar's functionality, enriching the user experience by allowing for versatile file and tab attachments in chat submissions.
@github-actions
Copy link
Copy Markdown
Contributor

Build Branch

Branch pr-releases/alavrenchuk/ntp-attach-tabs
Commit 42f68f77bc
Updated May 28, 2026 at 6:03:18 PM UTC

Static preview entry points

QR codes (mobile preview)
Entry point QR code
Docs QR for docs preview
Static pages QR for static pages preview
Integration pages QR for integration pages preview

Integration commands

npm (Android / Extension):

npm i github:duckduckgo/content-scope-scripts#pr-releases/alavrenchuk/ntp-attach-tabs

Swift Package Manager (Apple):

.package(url: "https://github.com/duckduckgo/content-scope-scripts.git", branch: "pr-releases/alavrenchuk/ntp-attach-tabs")

git submodule (Windows):

git -C submodules/content-scope-scripts fetch origin pr-releases/alavrenchuk/ntp-attach-tabs
git -C submodules/content-scope-scripts checkout origin/pr-releases/alavrenchuk/ntp-attach-tabs
Pin to exact commit

npm (Android / Extension):

npm i github:duckduckgo/content-scope-scripts#42f68f77bc0bca558401829063d13e1d3dcddedc

Swift Package Manager (Apple):

.package(url: "https://github.com/duckduckgo/content-scope-scripts.git", revision: "42f68f77bc0bca558401829063d13e1d3dcddedc")

git submodule (Windows):

git -C submodules/content-scope-scripts fetch origin pr-releases/alavrenchuk/ntp-attach-tabs
git -C submodules/content-scope-scripts checkout 42f68f77bc0bca558401829063d13e1d3dcddedc

@github-actions github-actions Bot added the semver-patch Bug fix / internal — no release needed label May 28, 2026
@github-actions
Copy link
Copy Markdown
Contributor

[Beta] Generated file diff

Time updated: Thu, 28 May 2026 18:03:58 GMT

Apple
    - apple/pages/new-tab/dist/index.css
  • apple/pages/new-tab/dist/index.js
  • apple/pages/new-tab/locales/en/new-tab.json

File has changed

Integration
    - integration/pages/new-tab/dist/index.css
  • integration/pages/new-tab/dist/index.js
  • integration/pages/new-tab/locales/en/new-tab.json

File has changed

Windows
    - windows/pages/new-tab/dist/index.css
  • windows/pages/new-tab/dist/index.js
  • windows/pages/new-tab/locales/en/new-tab.json

File has changed

Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Web Compatibility Assessment

  • special-pages/pages/new-tab/app/omnibar/components/chat-tools/file-attachment/useFileAttachments.js:41-52,84-110 — warning: file attachments are read wholesale with FileReader.readAsDataURL() and only capped by count. A few large PDFs can block the privileged NTP UI and produce oversized omnibar_submitChat messages, which is a native-message reliability regression surface.
  • No injected runtime API-surface/prototype findings: this diff does not touch injected/src, wrapper-utils, captured-globals, DDGProxy, message bridge, or page-world API hooks.

Security Assessment

  • special-pages/pages/new-tab/app/omnibar/components/chat-tools/tab-attachment/useTabAttachments.js:50-52,79-82 — error: pageContext comes from native and is spread into state/submission payloads. That can echo reserved or unexpected fields, including nativeData, into the outgoing omnibar_submitChat notify path.
  • special-pages/pages/new-tab/messages/omnibar_submitChat.notify.json:54-63 and special-pages/pages/new-tab/messages/types/page-context.json:5-35 — warning: the new attachment payloads lack schema hardening for pageContext/files cardinality and PageContext extra properties, so the TypeScript contract does not enforce the UI’s intended payload boundary.
  • special-pages/pages/new-tab/app/omnibar/components/chat-tools/file-attachment/useFileAttachments.js:41-52,84-110 — warning: local file bytes are base64 encoded without a byte-size cap before being sent to native. This is a privileged-page/native-transport DoS risk even though the file picker is user-driven.

Risk Level

High Risk — not injected page-world code, but this adds privileged NTP native requests/notify payloads that carry page content and local file bytes across all supported browser integrations.

Recommendations

  1. Whitelist PageContext fields instead of spreading native-returned objects, and add additionalProperties: false to the PageContext schema.
  2. Add explicit limits: MAX_ATTACHED_TABS, file byte-size caps before FileReader, schema maxItems, and string maxLength for base64/content-bearing fields.
  3. Add unit tests for stripping unexpected pageContext fields and rejecting oversized files before read/submission.

Validation run: npm run test-unit --workspace=special-pages -- --run pages/new-tab/app/omnibar/unit-tests/tabPicker.spec.js and targeted npx eslint on the changed omnibar JS files both passed.

Open in Web View Automation 

Sent by Cursor Automation: Web compat and sec


return prev.map((tab) =>
tab.tabId === tabToAttach.tabId
? { ...tab, status: /** @type {const} */ ('ready'), pageContext: { ...pageContext, tabId: tabToAttach.tabId } }
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pageContext is native-returned data, so spreading it here (and again in getTabsForSubmission) can echo reserved or unexpected fields into the outgoing omnibar_submitChat notify payload. In particular, this violates the nativeData trust-boundary rule if native ever includes that field in the response. Please construct a whitelisted PageContext object instead, e.g. copy only title, url, favicon, content, truncated, fullContentLength, and the local tabId.

reject(new Error('Failed to read file'));
};

reader.readAsDataURL(file);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This reads the full selected file into memory and later sends the full base64 string through native messaging, but there is no byte-size cap. MAX_FILES limits count only; three large PDFs can still hang the NTP page or exceed native/WebView message limits. Please reject files over an explicit max size before readAsDataURL() and mirror that limit in the message schema/tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

semver-patch Bug fix / internal — no release needed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant