NTP: attachment chips UI updates by moon0326 · Pull Request #3048 · duckduckgo/content-scope-scripts

moon0326 · 2026-09-16T18:09:39Z

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1211592734365220/task/1218846454330664?focus=true

Description

Ports the Duck.ai composer attachment-chip redesign (frontend branch moon0326/o-j/page-context-attachment-ui-changes) to the NTP omnibar. Only the chat-input changes are brought over; the sidebar variant does not apply here.

Tab, PDF and image chips now share one AttachmentChip card (116px): title, metadata line (domain or file size) and a 16px icon + type label ("Webpage" / "PDF"), or a full-bleed image preview.
The chip row moves above the textarea and scrolls a newly added chip into view.
New omnibar_attachmentTypeWebpage string; new CloseXsmallIcon and DocumentPdfColorIcon.
Tooltip gains an optional ariaLabel so the card wrapper's accessible name doesn't include the nested remove label.

661504307-5a0bdc38-2f98-4012-a4d3-50974775fb84

Testing Steps

Open https://rawcdn.githack.com/duckduckgo/content-scope-scripts/3bbbd954665f8be3e7d190ba8a880fe900182391/build/integration/pages/new-tab/index.html?omnibar.mode=ai&omnibar.enableAiChatTools=true&omnibar.enableAttachTabs=true&omnibar.selectedModelId=claude-haiku-4-5
Attach a tab via the paperclip → Attach page content: card shows favicon, title, domain and "Webpage".
Attach a PDF: card shows the PDF icon, filename stem, size and "PDF"; tooltip shows the full filename.
Attach an image: full-bleed preview; the × appears on hover and removes it.
Attach several: the row stays above the prompt, scrolls to the newest chip, and cards keep their 108px width.

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

🤖 Generated with Claude Code

Ports the Duck.ai composer attachment-chip redesign to the omnibar. Tab, PDF and image chips now share one AttachmentChip card: title, metadata (domain or file size) and icon + type row, or a full-bleed image preview, with hover/pressed fills, a scale-in entrance and a remove button that appears on hover. The row moves above the textarea and scrolls a newly added chip into view. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

github-actions · 2026-09-16T18:11:03Z

[Beta] Generated file diff

Time updated: Tue, 06 Oct 2026 17:25:53 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

github-actions · 2026-09-16T18:20:10Z

⚠️ 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

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review for a one-time review, or @claude review always to subscribe this PR to a review on every future push.

_{Tip: disable this comment in your organization's Code Review settings.}

claude

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review for a one-time review, or @claude review always to subscribe this PR to a review on every future push.

_{Tip: disable this comment in your organization's Code Review settings.}

github-actions · 2026-09-29T18:37:59Z

Build Branch


Branch	`pr-releases/moon0326/o-j/ntp-attachment-ui-changes`
Commit	`6c7e20b19a`
Updated	October 6, 2026 at 5:07:21 PM UTC

Static preview entry points

Docs: docs/index.html
Static pages: build/integration/pages/index.html
Integration pages: injected/integration-test/test-pages/index.html

QR codes (mobile preview)

Entry point	QR code
Docs
Static pages
Integration pages

Integration commands

npm (Android / Extension):

npm i github:duckduckgo/content-scope-scripts#pr-releases/moon0326/o-j/ntp-attachment-ui-changes

Swift Package Manager (Apple):

.package(url: "https://github.com/duckduckgo/content-scope-scripts.git", branch: "pr-releases/moon0326/o-j/ntp-attachment-ui-changes")

git submodule (Windows):

git -C submodules/content-scope-scripts fetch origin pr-releases/moon0326/o-j/ntp-attachment-ui-changes
git -C submodules/content-scope-scripts checkout origin/pr-releases/moon0326/o-j/ntp-attachment-ui-changes

Pin to exact commit

npm (Android / Extension):

npm i github:duckduckgo/content-scope-scripts#6c7e20b19a1bea9da9c1fca2d1726e6cb51106e2

Swift Package Manager (Apple):

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

git submodule (Windows):

git -C submodules/content-scope-scripts fetch origin pr-releases/moon0326/o-j/ntp-attachment-ui-changes
git -C submodules/content-scope-scripts checkout 6c7e20b19a1bea9da9c1fca2d1726e6cb51106e2

sashalavron

Looks very good @moon0326 🔥

I added a couple of minor comments
Please make sure to test it e2e (may be even both windows/macOS cause of styles changes, to make sure it looks good on both platforms), and to follow up with translations. Approving in advance

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The Tooltip wrapper prevented default on Enter/Space bubbling up from nested controls, so the attachment chip remove button couldn't be activated from the keyboard. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…chment-ui-changes # Conflicts: # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-file-chip-ntp-screenshots-dark-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-file-chip-ntp-screenshots-light-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-image-chip-ntp-screenshots-dark-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-image-chip-ntp-screenshots-light-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-mixed-chips-ntp-screenshots-dark-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-mixed-chips-ntp-screenshots-light-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-tab-chip-ntp-screenshots-dark-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attached-tab-chip-ntp-screenshots-light-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attachment-carousel-overflow-ntp-screenshots-dark-darwin.png # special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-attachment-carousel-overflow-ntp-screenshots-light-darwin.png

github-actions Bot added the semver-minor New feature — triggers minor version bump label Sep 16, 2026

moon0326 marked this pull request as ready for review September 16, 2026 22:15

claude Bot reviewed Sep 16, 2026

View reviewed changes

moon0326 marked this pull request as draft September 16, 2026 22:17

two-line title clamp and 116px square composer attachment card

fc8707f

moon0326 marked this pull request as ready for review September 29, 2026 18:37

claude Bot reviewed Sep 29, 2026

View reviewed changes

moon0326 requested a review from sashalavron September 29, 2026 18:43

Updated snapshots via workflow

4740b32

sashalavron reviewed Oct 5, 2026

View reviewed changes

Comment thread special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/AttachmentChip.js Outdated

sashalavron reviewed Oct 5, 2026

View reviewed changes

Comment thread special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/AttachmentChips.js Outdated

sashalavron reviewed Oct 5, 2026

View reviewed changes

Comment thread special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js Outdated

sashalavron approved these changes Oct 5, 2026

View reviewed changes

sashalavron reviewed Oct 5, 2026

View reviewed changes

Comment thread special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/ChipRemoveButton.js

moon0326 and others added 6 commits October 6, 2026 09:54

NTP: fall back to title when attachment tooltip label is empty

32a3a31

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

NTP: move attachment chip scroll-to-newest into a hook

78a922a

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

NTP: remove redundant attachments comment in AiChatForm

d7e124a

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

NTP: let nested buttons in Tooltip handle Enter/Space

9af2976

The Tooltip wrapper prevented default on Enter/Space bubbling up from nested controls, so the attachment chip remove button couldn't be activated from the keyboard. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Updated snapshots via workflow

4db7c98

moon0326 added this pull request to the merge queue Oct 6, 2026

Merged via the queue into main with commit 13969f3 Oct 6, 2026
32 of 33 checks passed

moon0326 deleted the moon0326/o-j/ntp-attachment-ui-changes branch October 6, 2026 17:47

Navigation Menu

Repository navigation

NTP: attachment chips UI updates - #3048

NTP: attachment chips UI updates#3048
moon0326 merged 9 commits into
mainfrom
moon0326/o-j/ntp-attachment-ui-changes

moon0326 commented Sep 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 16, 2026

Uh oh!

claude Bot left a comment

Uh oh!

claude Bot left a comment

Uh oh!

github-actions Bot commented Sep 29, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sashalavron left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

moon0326 commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Testing Steps

Checklist

Uh oh!

github-actions Bot commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[Beta] Generated file diff

Uh oh!

github-actions Bot commented Sep 16, 2026

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

github-actions Bot commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Build Branch

Static preview entry points

Integration commands

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sashalavron left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

moon0326 commented Sep 16, 2026 •

edited

Loading

github-actions Bot commented Sep 16, 2026 •

edited

Loading

github-actions Bot commented Sep 29, 2026 •

edited

Loading