Add enableAi config to control Duck.ai visibility (#1790)

noisysocks · web-flow · commit 951b1ac8f0ad · 2025-07-04T16:16:36.000+10:00
diff --git a/special-pages/pages/new-tab/app/omnibar/components/Omnibar.js b/special-pages/pages/new-tab/app/omnibar/components/Omnibar.js
@@ -16,46 +16,53 @@ import { SearchForm } from './SearchForm';
  * @param {object} props
  * @param {OmnibarConfig['mode']} props.mode
  * @param {(mode: OmnibarConfig['mode']) => void} props.setMode
+ * @param {boolean} props.enableAi
  */
-export function Omnibar({ mode, setMode }) {
+export function Omnibar({ mode, setMode, enableAi }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const [query, setQuery] = useState(/** @type {String} */ (''));
     return (
         <div class={styles.root} data-mode={mode}>
             <div class={styles.logoWrap}>
                 <img src="./icons/Logo-Stacked.svg" alt={t('omnibar_logoAlt')} width={144} height={115.9} />
             </div>
-            <div class={styles.tabListWrap}>
-                <div class={styles.tabList} role="tablist" aria-label={t('omnibar_tabSwitcherLabel')}>
-                    <button
-                        class={styles.tab}
-                        role="tab"
-                        aria-selected={mode === 'search'}
-                        onClick={() => {
-                            viewTransition(() => {
-                                setMode('search');
-                            });
-                        }}
-                    >
-                        <SearchIcon className={styles.searchIcon} />
-                        {t('omnibar_searchTabLabel')}
-                    </button>
-                    <button
-                        class={styles.tab}
-                        role="tab"
-                        aria-selected={mode === 'ai'}
-                        onClick={() => {
-                            viewTransition(() => {
-                                setMode('ai');
-                            });
-                        }}
-                    >
-                        <AiChatIcon className={styles.aiChatIcon} />
-                        {t('omnibar_aiTabLabel')}
-                    </button>
+            {enableAi && (
+                <div class={styles.tabListWrap}>
+                    <div class={styles.tabList} role="tablist" aria-label={t('omnibar_tabSwitcherLabel')}>
+                        <button
+                            class={styles.tab}
+                            role="tab"
+                            aria-selected={mode === 'search'}
+                            onClick={() => {
+                                viewTransition(() => {
+                                    setMode('search');
+                                });
+                            }}
+                        >
+                            <SearchIcon className={styles.searchIcon} />
+                            {t('omnibar_searchTabLabel')}
+                        </button>
+                        <button
+                            class={styles.tab}
+                            role="tab"
+                            aria-selected={mode === 'ai'}
+                            onClick={() => {
+                                viewTransition(() => {
+                                    setMode('ai');
+                                });
+                            }}
+                        >
+                            <AiChatIcon className={styles.aiChatIcon} />
+                            {t('omnibar_aiTabLabel')}
+                        </button>
+                    </div>
                 </div>
-            </div>
-            {mode === 'search' ? <SearchForm term={query} setTerm={setQuery} /> : <AiChatForm chat={query} setChat={setQuery} />}
+            )}
+            {mode === 'search' ? (
+                <SearchForm enableAi={enableAi} term={query} setTerm={setQuery} />
+            ) : (
+                <AiChatForm chat={query} setChat={setQuery} />
+            )}
         </div>
     );
 }
diff --git a/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js b/special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js
@@ -33,5 +33,5 @@ export function OmnibarConsumer() {
  */
 function OmnibarReadyState({ config }) {
     const { setMode } = useContext(OmnibarContext);
-    return <Omnibar mode={config.mode} setMode={setMode} />;
+    return <Omnibar mode={config.mode} setMode={setMode} enableAi={config.enableAi ?? true} />;
 }
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js
@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { h } from 'preact';
+import { Fragment, h } from 'preact';
 import { useContext } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { AiChatIcon, SearchIcon } from '../../components/Icons.js';
@@ -17,10 +17,11 @@ import { useSuggestions } from './useSuggestions';
 
 /**
  * @param {object} props
+ * @param {boolean} props.enableAi
  * @param {string} props.term
  * @param {(term: string) => void} props.setTerm
  */
-export function SearchForm({ term, setTerm }) {
+export function SearchForm({ enableAi, term, setTerm }) {
     const { submitSearch, submitChat } = useContext(OmnibarContext);
 
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
@@ -80,20 +81,24 @@ export function SearchForm({ term, setTerm }) {
                             <button type="submit" class={cn(styles.inputAction)} aria-label={t('searchForm_searchButtonLabel')} inert>
                                 <SearchIcon />
                             </button>
-                            <div class={styles.separator}></div>
-                            <button
-                                class={cn(styles.inputAction, styles.squareButton)}
-                                aria-label={t('searchForm_aiButtonLabel')}
-                                onClick={(event) => {
-                                    event.preventDefault();
-                                    submitChat({
-                                        chat: term,
-                                        target: eventToTarget(event, platformName),
-                                    });
-                                }}
-                            >
-                                <AiChatIcon className={styles.aiChatIcon} />
-                            </button>
+                            {enableAi && (
+                                <>
+                                    <div class={styles.separator}></div>
+                                    <button
+                                        class={cn(styles.inputAction, styles.squareButton)}
+                                        aria-label={t('searchForm_aiButtonLabel')}
+                                        onClick={(event) => {
+                                            event.preventDefault();
+                                            submitChat({
+                                                chat: term,
+                                                target: eventToTarget(event, platformName),
+                                            });
+                                        }}
+                                    >
+                                        <AiChatIcon className={styles.aiChatIcon} />
+                                    </button>
+                                </>
+                            )}
                         </div>
                     </div>
                 </div>
diff --git a/special-pages/pages/new-tab/app/omnibar/mocks/omnibar.mock-transport.js b/special-pages/pages/new-tab/app/omnibar/mocks/omnibar.mock-transport.js
@@ -46,6 +46,10 @@ export function omnibarMockTransport() {
                     if (modeOverride === 'search' || modeOverride === 'ai') {
                         config.mode = modeOverride;
                     }
+                    const enableAiOverride = url.searchParams.get('omnibar.enableAi');
+                    if (enableAiOverride === 'true' || enableAiOverride === 'false') {
+                        config.enableAi = enableAiOverride === 'true';
+                    }
                     return config;
                 }
                 case 'omnibar_getSuggestions': {
diff --git a/special-pages/pages/new-tab/app/omnibar/strings.json b/special-pages/pages/new-tab/app/omnibar/strings.json
@@ -1,6 +1,6 @@
 {
   "omnibar_menuTitle": {
-    "title": "Search & Duck.ai",
+    "title": "Search",
     "description": "Title of the omnibar widget in the customizer panel."
   },
   "aiChatForm_placeholder": {
diff --git a/special-pages/pages/new-tab/messages/types/omnibar-config.json b/special-pages/pages/new-tab/messages/types/omnibar-config.json
@@ -10,6 +10,11 @@
       "title": "Omnibar Mode",
       "type": "string",
       "enum": ["search", "ai"]
+    },
+    "enableAi": {
+      "title": "Enable Duck.ai",
+      "type": "boolean",
+      "default": true
     }
   }
 }
diff --git a/special-pages/pages/new-tab/public/locales/en/new-tab.json b/special-pages/pages/new-tab/public/locales/en/new-tab.json
@@ -126,7 +126,7 @@
     "note": "An aggregated count of blocked entries not present in the main list. For example, '200 attempts from other networks'"
   },
   "omnibar_menuTitle": {
-    "title": "Search & Duck.ai",
+    "title": "Search",
     "description": "Title of the omnibar widget in the customizer panel."
   },
   "aiChatForm_placeholder": {
diff --git a/special-pages/pages/new-tab/types/new-tab.ts b/special-pages/pages/new-tab/types/new-tab.ts
@@ -63,6 +63,7 @@ export type Suggestion =
   | HistoryEntrySuggestion
   | InternalPageSuggestion;
 export type OmnibarMode = "search" | "ai";
+export type EnableDuckAi = boolean;
 export type FeedType = "privacy-stats" | "activity";
 /**
  * The visibility state of the widget, as configured by the user
@@ -505,6 +506,7 @@ export interface OmnibarSetConfigNotification {
 }
 export interface OmnibarConfig {
   mode: OmnibarMode;
+  enableAi?: EnableDuckAi;
 }
 /**
  * Generated from @see "../messages/omnibar_submitChat.notify.json"

Original file line number	Diff line number	Diff line change
`@@ -33,5 +33,5 @@ export function OmnibarConsumer() {`
`33`	`33`	`*/`
`34`	`34`	`function OmnibarReadyState({ config }) {`
`35`	`35`	`const { setMode } = useContext(OmnibarContext);`
`36`		`- return <Omnibar mode={config.mode} setMode={setMode} />;`
	`36`	`+ return <Omnibar mode={config.mode} setMode={setMode} enableAi={config.enableAi ?? true} />;`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,10 @@ export function omnibarMockTransport() {`
`46`	`46`	`if (modeOverride === 'search' \|\| modeOverride === 'ai') {`
`47`	`47`	`config.mode = modeOverride;`
`48`	`48`	`}`
	`49`	`+ const enableAiOverride = url.searchParams.get('omnibar.enableAi');`
	`50`	`+ if (enableAiOverride === 'true' \|\| enableAiOverride === 'false') {`
	`51`	`+ config.enableAi = enableAiOverride === 'true';`
	`52`	`+ }`
`49`	`53`	`return config;`
`50`	`54`	`}`
`51`	`55`	`case 'omnibar_getSuggestions': {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"omnibar_menuTitle": {`
`3`		`- "title": "Search & Duck.ai",`
	`3`	`+ "title": "Search",`
`4`	`4`	`"description": "Title of the omnibar widget in the customizer panel."`
`5`	`5`	`},`
`6`	`6`	`"aiChatForm_placeholder": {`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,11 @@`
`10`	`10`	`"title": "Omnibar Mode",`
`11`	`11`	`"type": "string",`
`12`	`12`	`"enum": ["search", "ai"]`
	`13`	`+ },`
	`14`	`+ "enableAi": {`
	`15`	`+ "title": "Enable Duck.ai",`
	`16`	`+ "type": "boolean",`
	`17`	`+ "default": true`
`13`	`18`	`}`
`14`	`19`	`}`
`15`	`20`	`}`