From 891521e70fe9c79f8123fd601ff79cc331885b3f Mon Sep 17 00:00:00 2001 From: Moon Kyong Date: Wed, 16 Sep 2026 14:07:00 -0400 Subject: [PATCH 1/8] NTP: attachment chips as 108px cards above the prompt 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 --- .../pages/new-tab/app/components/Icons.js | 43 ++++ .../app/omnibar/components/AiChatForm.js | 3 +- .../new-tab/app/omnibar/components/Tooltip.js | 4 +- .../chat-tools/attachments/AttachmentChip.js | 69 ++++++ .../attachments/AttachmentChip.module.css | 196 ++++++++++++++++++ .../chat-tools/attachments/AttachmentChips.js | 22 +- .../attachments/AttachmentChips.module.css | 10 +- .../attachments/ChipRemoveButton.js | 9 +- .../attachments/ChipRemoveButton.module.css | 28 +-- .../chat-tools/attachments/attachmentText.js | 57 +++++ .../chat-tools/file-attachment/FileChip.js | 7 +- .../chat-tools/file-attachment/PdfFileChip.js | 32 +-- .../file-attachment/PdfFileChip.module.css | 60 ------ .../ImageAttachment.module.css | 15 +- .../chat-tools/image-attachment/ImageChip.js | 17 +- .../chat-tools/tab-attachment/TabChips.js | 41 ++-- .../tab-attachment/TabChips.module.css | 70 ------- .../pages/new-tab/app/omnibar/strings.json | 4 + .../omnibar/unit-tests/attachmentText.spec.js | 60 ++++++ .../new-tab.screenshots.spec.js | 10 +- .../new-tab/public/locales/en/new-tab.json | 4 + 21 files changed, 544 insertions(+), 217 deletions(-) create mode 100644 special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/AttachmentChip.js create mode 100644 special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/AttachmentChip.module.css create mode 100644 special-pages/pages/new-tab/app/omnibar/components/chat-tools/attachments/attachmentText.js delete mode 100644 special-pages/pages/new-tab/app/omnibar/components/chat-tools/file-attachment/PdfFileChip.module.css create mode 100644 special-pages/pages/new-tab/app/omnibar/unit-tests/attachmentText.spec.js diff --git a/special-pages/pages/new-tab/app/components/Icons.js b/special-pages/pages/new-tab/app/components/Icons.js index 92913eccc55..1125aeeefc6 100644 --- a/special-pages/pages/new-tab/app/components/Icons.js +++ b/special-pages/pages/new-tab/app/components/Icons.js @@ -721,6 +721,49 @@ export function CloseSmallIcon(props) { ); } +/** + * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Close-Xsmall-16.svg. + * @param {import('preact').JSX.SVGAttributes} props + */ +export function CloseXsmallIcon(props) { + return ( + + + + ); +} + +/** + * Colour PDF document glyph, from the Duck.ai frontend (react/src/duck-chat/assets/document-pdf-color-16.svg). + * @param {import('preact').JSX.SVGAttributes} props + */ +export function DocumentPdfColorIcon(props) { + return ( + + + + + + + + ); +} + /** * @param {import('preact').JSX.SVGAttributes} props */ diff --git a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js index d982eaf988f..a2c27195e4a 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js +++ b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js @@ -179,6 +179,8 @@ export function AiChatForm({ } }} > + {/* Attachments sit above the prompt, as in the Duck.ai composer. */} + {children}