NTP: Add permanent “Ask Duck.ai” suggestion to end of suggestions list (#1939)

* Rough in an "Ask AI" suggestion

* Update unit tests to use SuggestionModel

* Add tests for AI chat suggestion

* Group AI chat suggestions into a separate section

* Localize "Switch to Tab" badge

* Make border extend to full width of dropdown

* Remove CSS leftover from testing

* Remove unused Suggestion typedef import

* Update snapshot tests

* Fix Omnibar.js formatting

* Add key prop to SuggestionsListItem in map rendering

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -73,12 +73,17 @@ export function Omnibar({ mode, setMode, enableAi, tabId }) {
                     <div class={styles.popup}>
                         <ResizingContainer className={styles.field}>
                             {mode === 'search' ? (
-                                <SearchForm autoFocus={autoFocus} onOpenSuggestion={handleOpenSuggestion} onSubmit={handleSubmitSearch} />
+                                <SearchForm
+                                    autoFocus={autoFocus}
+                                    onOpenSuggestion={handleOpenSuggestion}
+                                    onSubmit={handleSubmitSearch}
+                                    onSubmitChat={handleSubmitChat}
+                                />
                             ) : (
                                 <AiChatForm chat={query} autoFocus={autoFocus} onChange={setQuery} onSubmit={handleSubmitChat} />
                             )}
                         </ResizingContainer>
-                        {mode === 'search' && <SuggestionsList onOpenSuggestion={handleOpenSuggestion} />}
+                        {mode === 'search' && <SuggestionsList onOpenSuggestion={handleOpenSuggestion} onSubmitChat={handleSubmitChat} />}
                     </div>
                 </div>
             </SearchFormProvider>

special-pages/pages/new-tab/app/omnibar/components/SearchForm.js

@@ -21,8 +21,9 @@ import { CloseSmallIcon } from '../../components/Icons.js';
  * @param {boolean} [props.autoFocus]
  * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
  * @param {(params: {term: string, target: OpenTarget}) => void} props.onSubmit
+ * @param {(params: {chat: string, target: OpenTarget}) => void} props.onSubmitChat
  */
-export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
+export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit, onSubmitChat }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
 
@@ -100,7 +101,11 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
             case 'Enter':
                 event.preventDefault();
                 if (selectedSuggestion) {
-                    onOpenSuggestion({ suggestion: selectedSuggestion, target: eventToTarget(event, platformName) });
+                    if (selectedSuggestion.kind === 'aiChat') {
+                        onSubmitChat({ chat: selectedSuggestion.chat, target: eventToTarget(event, platformName) });
+                    } else {
+                        onOpenSuggestion({ suggestion: selectedSuggestion, target: eventToTarget(event, platformName) });
+                    }
                 } else {
                     onSubmit({ term, target: eventToTarget(event, platformName) });
                 }

special-pages/pages/new-tab/app/omnibar/components/SuffixText.js

@@ -21,6 +21,8 @@ export function useSuffixText(suffix) {
             return ' – ' + t('omnibar_visitSuffix', { url: suffix.url });
         case 'raw':
             return ' – ' + suffix.text;
+        case 'askDuckAi':
+            return ' – ' + t('omnibar_askDuckAiSuffix');
     }
 }
 

special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.js

@@ -1,6 +1,7 @@
 import { Fragment, h } from 'preact';
 import { eventToTarget } from '../../../../../shared/handlers';
 import {
+    AiChatIcon,
     ArrowRightIcon,
     BookmarkIcon,
     BrowserIcon,
@@ -15,8 +16,10 @@ import { getSuggestionSuffix, getSuggestionTitle, startsWithIgnoreCase } from '.
 import { useSearchFormContext } from './SearchFormProvider';
 import { SuffixText } from './SuffixText';
 import styles from './SuggestionsList.module.css';
+import { useTypedTranslationWith } from '../../types';
 
 /**
+ * @typedef {import('../strings.json')} Strings
  * @typedef {import('./useSuggestions').SuggestionModel} SuggestionModel
  * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
  * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
@@ -25,63 +28,104 @@ import styles from './SuggestionsList.module.css';
 /**
  * @param {object} props
  * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
+ * @param {(params: {chat: string, target: OpenTarget}) => void} props.onSubmitChat
  */
-export function SuggestionsList({ onOpenSuggestion }) {
-    const platformName = usePlatformName();
-
-    const { term, suggestionsListId, suggestions, selectedSuggestion, setSelectedSuggestion, clearSelectedSuggestion } =
-        useSearchFormContext();
+export function SuggestionsList({ onOpenSuggestion, onSubmitChat }) {
+    const { suggestionsListId, suggestions } = useSearchFormContext();
 
     if (suggestions.length === 0) return null;
 
+    const mainSuggestions = suggestions.filter((suggestion) => suggestion.kind !== 'aiChat');
+    const footerSuggestions = suggestions.filter((suggestion) => suggestion.kind === 'aiChat');
+
     return (
         <div role="listbox" id={suggestionsListId} class={styles.list}>
-            {suggestions.map((suggestion) => {
-                const title = getSuggestionTitle(suggestion, term);
-                const suffix = getSuggestionSuffix(suggestion);
-                return (
-                    <button
-                        key={suggestion.id}
-                        role="option"
-                        id={suggestion.id}
-                        class={styles.item}
-                        tabIndex={suggestion === selectedSuggestion ? 0 : -1}
-                        aria-selected={suggestion === selectedSuggestion}
-                        onMouseOver={() => setSelectedSuggestion(suggestion)}
-                        onMouseLeave={() => clearSelectedSuggestion()}
-                        onClick={(event) => {
-                            event.preventDefault();
-                            onOpenSuggestion({ suggestion, target: eventToTarget(event, platformName) });
-                        }}
-                    >
-                        <SuggestionIcon suggestion={suggestion} />
-                        <span class={styles.title}>
-                            {startsWithIgnoreCase(title, term) ? (
-                                <>
-                                    <b>{title.slice(0, term.length)}</b>
-                                    {title.slice(term.length)}
-                                </>
-                            ) : (
-                                title
-                            )}
-                        </span>
-                        {suffix && (
-                            <span class={styles.suffix}>
-                                <SuffixText suffix={suffix} />
-                            </span>
-                        )}
-                        {suggestion.kind === 'openTab' && (
-                            <span class={styles.badge}>
-                                Switch to Tab <ArrowRightIcon />
-                            </span>
-                        )}
-                    </button>
-                );
-            })}
+            {mainSuggestions.length > 0 && (
+                <div class={styles.main}>
+                    {mainSuggestions.map((suggestion) => (
+                        <SuggestionsListItem
+                            key={suggestion.id}
+                            suggestion={suggestion}
+                            onOpenSuggestion={onOpenSuggestion}
+                            onSubmitChat={onSubmitChat}
+                        />
+                    ))}
+                </div>
+            )}
+            {footerSuggestions.length > 0 && (
+                <div class={styles.footer}>
+                    {footerSuggestions.map((suggestion) => (
+                        <SuggestionsListItem
+                            key={suggestion.id}
+                            suggestion={suggestion}
+                            onOpenSuggestion={onOpenSuggestion}
+                            onSubmitChat={onSubmitChat}
+                        />
+                    ))}
+                </div>
+            )}
         </div>
     );
 }
 
+/**
+ * @param {object} props
+ * @param {SuggestionModel} props.suggestion
+ * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
+ * @param {(params: {chat: string, target: OpenTarget}) => void} props.onSubmitChat
+ */
+function SuggestionsListItem({ suggestion, onOpenSuggestion, onSubmitChat }) {
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const platformName = usePlatformName();
+
+    const { term, selectedSuggestion, setSelectedSuggestion, clearSelectedSuggestion } = useSearchFormContext();
+
+    const title = getSuggestionTitle(suggestion, term);
+    const suffix = getSuggestionSuffix(suggestion);
+
+    return (
+        <button
+            role="option"
+            id={suggestion.id}
+            class={styles.item}
+            tabIndex={suggestion === selectedSuggestion ? 0 : -1}
+            aria-selected={suggestion === selectedSuggestion}
+            onMouseOver={() => setSelectedSuggestion(suggestion)}
+            onMouseLeave={() => clearSelectedSuggestion()}
+            onClick={(event) => {
+                event.preventDefault();
+                if (suggestion.kind === 'aiChat') {
+                    onSubmitChat({ chat: suggestion.chat, target: eventToTarget(event, platformName) });
+                } else {
+                    onOpenSuggestion({ suggestion, target: eventToTarget(event, platformName) });
+                }
+            }}
+        >
+            <SuggestionIcon suggestion={suggestion} />
+            <span class={styles.title}>
+                {startsWithIgnoreCase(title, term) ? (
+                    <>
+                        <b>{title.slice(0, term.length)}</b>
+                        {title.slice(term.length)}
+                    </>
+                ) : (
+                    title
+                )}
+            </span>
+            {suffix && (
+                <span class={styles.suffix}>
+                    <SuffixText suffix={suffix} />
+                </span>
+            )}
+            {suggestion.kind === 'openTab' && (
+                <span class={styles.badge}>
+                    {t('omnibar_switchToTab')} <ArrowRightIcon />
+                </span>
+            )}
+        </button>
+    );
+}
+
 /**
  * @param {object} props
  * @param {SuggestionModel} props.suggestion
@@ -100,6 +144,8 @@ function SuggestionIcon({ suggestion }) {
             return <TabDesktopIcon />;
         case 'internalPage':
             return <BrowserIcon />;
+        case 'aiChat':
+            return <AiChatIcon />;
         default:
             throw new Error('Unknown suggestion kind');
     }

special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css

@@ -1,9 +1,19 @@
 .list {
     border-top: 1px solid var(--ntp-surface-border-color);
+    display: flex;
+    flex-direction: column;
+    margin-top: -1px; /* - 1px to account for the border-top */
+}
+
+.main,
+.footer {
     display: flex;
     flex-direction: column;
     padding: calc(3px + var(--sp-1)); /* 3px for popup borders + 1sp of padding */
-    padding-top: calc(3px + var(--sp-1) - 1px); /* - 1px to account for the border-top */
+}
+
+.main + .footer {
+    border-top: 1px solid var(--ntp-surface-border-color);
 }
 
 .item {

special-pages/pages/new-tab/app/omnibar/components/useSuggestions.js

@@ -7,7 +7,13 @@ import { OmnibarContext } from './OmnibarProvider.js';
  */
 
 /**
- * @typedef {Suggestion & {
+ * Internal representation of Suggestion with additional properties for the omnibar component.
+ *
+ * @typedef {(Suggestion & {
+ *   id: string,
+ * }) | {
+ *   kind: 'aiChat',
+ *   chat: string,
  *   id: string,
  * }} SuggestionModel
  */
@@ -124,6 +130,7 @@ export function useSuggestions({ term, setTerm }) {
 
     useEffect(() => {
         return onSuggestions((data, term) => {
+            /** @type {SuggestionModel[]} */
             const suggestions = [
                 ...data.suggestions.topHits,
                 ...data.suggestions.duckduckgoSuggestions,
@@ -132,6 +139,16 @@ export function useSuggestions({ term, setTerm }) {
                 ...suggestion,
                 id: `suggestion-${index}`,
             }));
+
+            // Add persistent aiChat suggestion at the end if there's a term
+            if (term.trim().length > 0) {
+                suggestions.push({
+                    kind: 'aiChat',
+                    chat: term,
+                    id: 'suggestion-ai-chat',
+                });
+            }
+
             dispatch({
                 type: 'setSuggestions',
                 term,