Duck.ai: Contextual Sheet UX

android-design-system/design-system/src/main/res/drawable/duck_ai_prompt_background.xml

@@ -0,0 +1,20 @@
+<!--
+  ~ Copyright (c) 2018 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?attr/daxColorControlFillPrimary" />
+    <corners android:radius="@dimen/mediumShapeCornerRadius" />
+</shape>

android-design-system/design-system/src/main/res/drawable/ic_arrow_down_right_16.xml

@@ -0,0 +1,25 @@
+<!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M2.808,2.808C3.052,2.564 3.448,2.564 3.692,2.808L12.79,11.906L12.793,4.402C12.793,4.056 13.073,3.777 13.418,3.777C13.764,3.777 14.043,4.057 14.043,4.402L14.04,11.916C14.04,13.089 13.089,14.04 11.916,14.04L4.402,14.043C4.057,14.043 3.777,13.764 3.777,13.418C3.777,13.073 4.057,12.793 4.402,12.793L11.906,12.79L2.808,3.692C2.564,3.448 2.564,3.052 2.808,2.808Z"
+      android:fillColor="?daxColorPrimaryIcon" />
+</vector>

android-design-system/design-system/src/main/res/drawable/ic_duck_ai_color_24.xml

@@ -0,0 +1,46 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M16.215,2.929C16.621,1.659 18.479,1.691 18.813,3.025L18.997,3.76C19.15,4.372 19.628,4.85 20.24,5.004L20.975,5.187C22.309,5.521 22.341,7.378 21.071,7.785C21.667,9.066 22,10.494 22,12C22,17.523 17.523,22 12,22C6.477,22 2,17.523 2,12C2,6.477 6.477,2 12,2C13.506,2 14.934,2.333 16.215,2.929Z"
+      android:fillColor="#DE5833"/>
+  <path
+      android:pathData="M13.406,19.461C13.406,19.383 13.425,19.365 13.177,18.87C12.517,17.548 11.854,15.685 12.155,14.483C12.21,14.265 11.534,6.398 11.055,6.145C10.524,5.862 9.87,5.412 9.271,5.312C8.968,5.264 8.57,5.287 8.258,5.329C8.203,5.336 8.201,5.435 8.254,5.453C8.458,5.523 8.706,5.643 8.852,5.824C8.88,5.859 8.843,5.913 8.799,5.914C8.661,5.92 8.411,5.977 8.081,6.258C8.043,6.29 8.075,6.35 8.124,6.34C8.833,6.2 9.556,6.269 9.983,6.657C10.011,6.682 9.996,6.727 9.96,6.737C6.258,7.743 6.991,10.964 7.976,14.916C8.853,18.431 9.184,19.568 9.288,19.915C9.299,19.949 9.323,19.977 9.356,19.99C10.631,20.497 13.406,20.519 13.406,19.656V19.461Z"
+      android:fillColor="#DDDDDD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M12,3.062C13.412,3.062 14.748,3.389 15.936,3.97C15.767,4.399 15.432,4.742 15.008,4.92C14.083,4.529 13.067,4.312 12,4.312C7.737,4.312 4.281,7.768 4.281,12.031C4.281,16.294 7.737,19.75 12,19.75C16.263,19.75 19.719,16.294 19.719,12.031C19.719,10.944 19.494,9.909 19.088,8.971C19.271,8.553 19.615,8.223 20.043,8.059C20.636,9.256 20.969,10.605 20.969,12.031C20.969,16.985 16.953,21 12,21C7.047,21 3.031,16.985 3.031,12.031C3.031,7.078 7.047,3.062 12,3.062ZM17.182,3.273C17.264,2.942 17.736,2.942 17.818,3.273L18.002,4.008C18.247,4.988 19.012,5.753 19.992,5.998L20.726,6.182C21.058,6.264 21.058,6.736 20.726,6.818L19.992,7.002C19.012,7.247 18.247,8.012 18.002,8.992L17.818,9.727C17.736,10.058 17.264,10.058 17.182,9.727L16.998,8.992C16.753,8.012 15.988,7.247 15.008,7.002L14.274,6.818C13.942,6.736 13.942,6.264 14.274,6.182L15.008,5.998C15.988,5.753 16.753,4.988 16.998,4.008L17.182,3.273Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M13.914,20.203C13.465,20.379 12.586,20.457 12.078,20.457C11.334,20.457 10.262,20.34 9.871,20.164C9.63,19.422 8.908,17.12 8.195,14.198C8.172,14.102 8.148,14.007 8.125,13.912L8.124,13.91C7.277,10.448 6.585,7.62 10.379,6.732C10.413,6.724 10.43,6.682 10.407,6.655C9.972,6.139 9.157,5.969 8.125,6.325C8.083,6.34 8.046,6.297 8.073,6.261C8.275,5.982 8.67,5.768 8.865,5.674C8.905,5.655 8.903,5.596 8.86,5.582C8.733,5.542 8.515,5.481 8.271,5.442C8.213,5.432 8.208,5.333 8.266,5.325C9.728,5.129 11.254,5.568 12.02,6.533C12.028,6.542 12.038,6.548 12.049,6.55C14.854,7.153 15.055,11.587 14.732,11.789C14.668,11.829 14.464,11.806 14.195,11.776C13.104,11.654 10.942,11.412 12.726,14.736C12.744,14.769 12.72,14.813 12.684,14.818C11.678,14.975 12.967,18.127 13.914,20.203Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M10.636,12.689C10.722,12.313 11.124,11.605 12.561,11.623C13.287,11.62 14.189,11.622 14.787,11.554C15.676,11.453 16.336,11.238 16.776,11.071C17.398,10.833 17.618,10.886 17.696,11.028C17.781,11.184 17.681,11.454 17.463,11.702C17.048,12.175 16.302,12.542 14.984,12.651C13.667,12.76 12.794,12.406 12.418,12.982C12.256,13.23 12.381,13.815 13.656,13.999C15.377,14.248 16.792,13.7 16.966,14.031C17.141,14.362 16.135,15.035 14.41,15.049C12.685,15.063 11.608,14.445 11.226,14.138C10.741,13.748 10.524,13.18 10.636,12.689Z"
+      android:fillColor="#FFCC33"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M12.832,8.582C12.928,8.425 13.142,8.303 13.491,8.303C13.84,8.303 14.004,8.442 14.118,8.597C14.141,8.629 14.106,8.666 14.07,8.65C14.061,8.646 14.053,8.643 14.044,8.639C13.916,8.583 13.759,8.515 13.491,8.511C13.204,8.507 13.023,8.579 12.908,8.641C12.87,8.661 12.809,8.62 12.832,8.582Z"
+      android:fillColor="#14307E"/>
+  <path
+      android:pathData="M8.902,8.784C9.241,8.642 9.507,8.661 9.695,8.705C9.735,8.715 9.763,8.672 9.731,8.646C9.585,8.528 9.257,8.382 8.831,8.541C8.45,8.683 8.271,8.978 8.27,9.172C8.269,9.218 8.363,9.221 8.388,9.183C8.453,9.078 8.563,8.926 8.902,8.784Z"
+      android:fillColor="#14307E"/>
+  <path
+      android:pathData="M13.787,10.738C13.488,10.738 13.245,10.495 13.245,10.197C13.245,9.898 13.488,9.656 13.787,9.656C14.087,9.656 14.33,9.898 14.33,10.197C14.33,10.495 14.087,10.738 13.787,10.738ZM14.17,10.017C14.17,9.94 14.106,9.878 14.029,9.878C13.952,9.878 13.889,9.94 13.889,10.017C13.889,10.095 13.952,10.157 14.029,10.157C14.107,10.157 14.17,10.095 14.17,10.017Z"
+      android:fillColor="#14307E"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M10.191,10.571C10.191,10.919 9.908,11.202 9.558,11.202C9.209,11.202 8.926,10.919 8.926,10.571C8.926,10.223 9.209,9.94 9.558,9.94C9.907,9.94 10.191,10.223 10.191,10.571ZM10.005,10.362C10.005,10.272 9.931,10.199 9.841,10.199C9.751,10.199 9.677,10.271 9.677,10.362C9.677,10.452 9.75,10.525 9.841,10.525C9.931,10.525 10.005,10.452 10.005,10.362Z"
+      android:fillColor="#14307E"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M15.169,16.171C14.955,16.073 14.134,16.661 13.589,17.113C13.475,16.952 13.261,16.835 12.776,16.919C12.352,16.993 12.118,17.095 12.014,17.272C11.345,17.018 10.219,16.626 9.947,17.004C9.649,17.418 10.021,19.373 10.416,19.627C10.622,19.76 11.608,19.126 12.123,18.689C12.206,18.806 12.34,18.873 12.615,18.867C13.031,18.857 13.705,18.76 13.81,18.566C13.816,18.555 13.822,18.541 13.827,18.525C14.356,18.723 15.287,18.932 15.495,18.901C16.038,18.819 15.42,16.288 15.169,16.171Z"
+      android:fillColor="#3CA82B"/>
+  <path
+      android:pathData="M13.639,17.171C13.661,17.211 13.679,17.253 13.695,17.296C13.77,17.507 13.893,18.179 13.8,18.345C13.707,18.51 13.104,18.591 12.731,18.597C12.358,18.603 12.275,18.467 12.199,18.256C12.139,18.087 12.109,17.69 12.11,17.463C12.095,17.126 12.218,17.008 12.787,16.915C13.208,16.847 13.431,16.927 13.56,17.062C14.158,16.616 15.156,15.986 15.253,16.101C15.738,16.675 15.8,18.042 15.695,18.591C15.66,18.771 14.053,18.413 14.053,18.22C14.053,17.415 13.844,17.194 13.639,17.171Z"
+      android:fillColor="#4CBA3C"/>
+  <path
+      android:pathData="M10.119,16.92C10.25,16.712 11.318,16.971 11.904,17.231C11.904,17.231 11.783,17.777 11.975,18.42C12.031,18.608 10.627,19.444 10.444,19.3C10.232,19.134 9.842,17.358 10.119,16.92Z"
+      android:fillColor="#4CBA3C"/>
+</vector>

android-design-system/design-system/src/main/res/drawable/ic_expand_24.xml

@@ -0,0 +1,28 @@
+<!--
+  ~ Copyright (c) 2025 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M9.969,12.957C10.262,12.664 10.737,12.664 11.03,12.957C11.322,13.25 11.322,13.725 11.03,14.018L6.769,18.277H10.25L10.326,18.282C10.705,18.321 11,18.64 11,19.028C11,19.417 10.705,19.736 10.326,19.774L10.251,19.778H6.639C5.345,19.778 4.28,18.795 4.152,17.534L4.14,17.278V13.75C4.14,13.336 4.476,13 4.89,13C5.304,13 5.639,13.336 5.639,13.75V17.286L9.969,12.957Z"
+      android:fillColor="?daxColorPrimaryIcon"/>
+  <path
+      android:pathData="M18.362,3.431C19.656,3.431 20.721,4.414 20.849,5.675L20.861,5.93V9.459C20.86,9.873 20.525,10.209 20.111,10.209C19.697,10.209 19.362,9.873 19.362,9.459V5.93C19.361,5.854 19.352,5.781 19.336,5.71L14.031,11.017L13.973,11.068C13.678,11.308 13.244,11.291 12.97,11.017C12.696,10.742 12.678,10.307 12.918,10.013L12.97,9.956L17.995,4.931H14.75L14.674,4.926C14.296,4.887 14,4.569 14,4.181C14,3.792 14.296,3.473 14.674,3.435L14.749,3.431H18.362Z"
+      android:fillColor="?daxColorPrimaryIcon"/>
+</vector>

app/src/androidTest/java/com/duckduckgo/app/browser/BrowserTabViewModelTest.kt

@@ -462,6 +462,8 @@ class BrowserTabViewModelTest {
 
     private val mockDuckAiFeatureStateFullScreenModeFlow = MutableStateFlow(false)
 
+    private val mockDuckAiContextualModeFlow = MutableStateFlow(false)
+
     private val mockExternalIntentProcessingState: ExternalIntentProcessingState = mock()
 
     private val mockVpnMenuStateProvider: VpnMenuStateProvider = mock()
@@ -694,6 +696,7 @@ class BrowserTabViewModelTest {
             whenever(mockDuckAiFeatureState.showInputScreen).thenReturn(mockDuckAiFeatureStateInputScreenFlow)
             whenever(mockDuckAiFeatureState.showInputScreenAutomaticallyOnNewTab).thenReturn(mockDuckAiFeatureStateInputScreenOpenAutomaticallyFlow)
             whenever(mockDuckAiFeatureState.showFullScreenMode).thenReturn(mockDuckAiFeatureStateFullScreenModeFlow)
+            whenever(mockDuckAiFeatureState.showContextualMode).thenReturn(mockDuckAiContextualModeFlow)
             whenever(mockExternalIntentProcessingState.hasPendingTabLaunch).thenReturn(mockHasPendingTabLaunchFlow)
             whenever(mockExternalIntentProcessingState.hasPendingDuckAiOpen).thenReturn(mockHasPendingDuckAiOpenFlow)
             whenever(mockVpnMenuStateProvider.getVpnMenuState()).thenReturn(flowOf(VpnMenuState.Hidden))
@@ -8362,4 +8365,33 @@ class BrowserTabViewModelTest {
         verify(mockPixel).fire(DuckChatPixelName.PRODUCT_TELEMETRY_SURFACE_KEYBOARD_USAGE)
         verify(mockPixel).fire(DuckChatPixelName.PRODUCT_TELEMETRY_SURFACE_KEYBOARD_USAGE_DAILY, type = Daily())
     }
+
+    @Test
+    fun whenOnDuckChatOmnibarButtonClickedAndContextualModeEnabledAndNotNTPThenCommandSent() = runTest {
+        mockDuckAiContextualModeFlow.emit(true)
+
+        testee.onDuckChatOmnibarButtonClicked(query = "example", hasFocus = false, isNtp = false)
+
+        verify(mockCommandObserver, atLeastOnce()).onChanged(commandCaptor.capture())
+        assertTrue(commandCaptor.lastValue is Command.ShowDuckAIContextualMode)
+    }
+
+    @Test
+    fun whenOnDuckChatOmnibarButtonClickedAndContextualModeEnabledAndNTPThenContextualNotCalled() = runTest {
+        val duckAIUrl = "https://duckduckgo.com/?q=test"
+
+        mockDuckAiContextualModeFlow.emit(true)
+        mockDuckAiFeatureStateFullScreenModeFlow.emit(true)
+
+        whenever(mockDuckChat.getDuckChatUrl(any(), any())).thenReturn(duckAIUrl)
+        whenever(mockOmnibarConverter.convertQueryToUrl(duckAIUrl, null)).thenReturn(duckAIUrl)
+
+        testee.onDuckChatOmnibarButtonClicked(query = "example", hasFocus = false, isNtp = true)
+
+        verify(mockCommandObserver, atLeastOnce()).onChanged(commandCaptor.capture())
+        val command = commandCaptor.lastValue as Navigate
+        assertEquals(duckAIUrl, command.url)
+
+        verify(mockDuckChat, never()).openDuckChat()
+    }
 }

app/src/main/java/com/duckduckgo/app/browser/BrowserTabFragment.kt

@@ -121,6 +121,7 @@ import com.duckduckgo.app.browser.customtabs.CustomTabViewModel.Companion.CUSTOM
 import com.duckduckgo.app.browser.databinding.FragmentBrowserTabBinding
 import com.duckduckgo.app.browser.databinding.HttpAuthenticationBinding
 import com.duckduckgo.app.browser.downloader.BlobConverterInjector
+import com.duckduckgo.app.browser.duckchat.DuckChatContextualBottomSheetFactory
 import com.duckduckgo.app.browser.favicon.FaviconManager
 import com.duckduckgo.app.browser.filechooser.FileChooserIntentBuilder
 import com.duckduckgo.app.browser.filechooser.capture.launcher.UploadFromExternalMediaAppLauncher
@@ -296,6 +297,7 @@ import com.duckduckgo.duckchat.api.inputscreen.InputScreenActivityResultCodes
 import com.duckduckgo.duckchat.api.inputscreen.InputScreenActivityResultParams
 import com.duckduckgo.duckchat.api.inputscreen.InputScreenBrowserButtonsConfig
 import com.duckduckgo.duckchat.impl.pixel.DuckChatPixelName
+import com.duckduckgo.duckchat.impl.ui.DuckChatContextualBottomSheet
 import com.duckduckgo.duckplayer.api.DuckPlayer
 import com.duckduckgo.duckplayer.api.DuckPlayerSettingsNoParams
 import com.duckduckgo.js.messaging.api.JsCallbackData
@@ -593,6 +595,9 @@ class BrowserTabFragment :
     @Inject
     lateinit var browserMenuViewStateFactory: BrowserMenuViewStateFactory
 
+    @Inject
+    lateinit var duckChatContextualBottomSheetFactory: DuckChatContextualBottomSheetFactory
+
     /**
      * We use this to monitor whether the user was seeing the in-context Email Protection signup prompt
      * This is needed because the activity stack will be cleared if an external link is opened in our browser
@@ -870,6 +875,8 @@ class BrowserTabFragment :
 
     private var automaticFireproofDialog: DaxAlertDialog? = null
 
+    private var duckChatContextualSheet: DuckChatContextualBottomSheet? = null
+
     private var webShareRequest =
         registerForActivityResult(WebShareChooser()) {
             contentScopeScripts.onResponse(it)
@@ -2409,6 +2416,7 @@ class BrowserTabFragment :
             is Command.PageStarted -> onPageStarted()
             is Command.EnableDuckAIFullScreen -> showDuckAI(it.browserViewState)
             is Command.DisableDuckAIFullScreen -> omnibar.setViewMode(ViewMode.Browser(it.url))
+            is Command.ShowDuckAIContextualMode -> showDuckChatBottomSheet()
         }
     }
 
@@ -3105,10 +3113,6 @@ class BrowserTabFragment :
                 }
 
                 override fun onDuckChatButtonPressed() {
-                    if (!duckAiFeatureState.showInputScreen.value) {
-                        pixel.fire(DuckChatPixelName.DUCK_CHAT_EXPERIMENTAL_LEGACY_OMNIBAR_AICHAT_BUTTON_PRESSED)
-                        pixel.fire(DuckChatPixelName.DUCK_CHAT_EXPERIMENTAL_LEGACY_OMNIBAR_AICHAT_BUTTON_PRESSED_DAILY, type = Daily())
-                    }
                     val hasFocus = omnibar.omnibarTextInput.hasFocus()
                     val isNtp = omnibar.viewMode == ViewMode.NewTab
                     onOmnibarDuckChatPressed(query = omnibar.getText(), hasFocus = hasFocus, isNtp = isNtp)
@@ -3126,6 +3130,13 @@ class BrowserTabFragment :
         )
     }
 
+    private fun showDuckChatBottomSheet() {
+        if (duckChatContextualSheet == null) {
+            duckChatContextualSheet = duckChatContextualBottomSheetFactory.create()
+        }
+        duckChatContextualSheet?.show(childFragmentManager, DuckChatContextualBottomSheet.TAG)
+    }
+
     private fun configureOmnibarTextInput() {
         omnibar.addTextListener(
             object : TextListener {

app/src/main/java/com/duckduckgo/app/browser/BrowserTabViewModel.kt

@@ -4500,18 +4500,31 @@ class BrowserTabViewModel @Inject constructor(
             command.value = HideKeyboardForChat
         }
 
-        if (duckAiFeatureState.showFullScreenMode.value) {
-            val url = when {
-                hasFocus && isNtp && query.isNullOrBlank() -> duckChat.getDuckChatUrl(query ?: "", false)
-                hasFocus -> duckChat.getDuckChatUrl(query ?: "", true)
-                else -> duckChat.getDuckChatUrl(query ?: "", false)
+        if (!duckAiFeatureState.showInputScreen.value) {
+            pixel.fire(DuckChatPixelName.DUCK_CHAT_EXPERIMENTAL_LEGACY_OMNIBAR_AICHAT_BUTTON_PRESSED)
+            pixel.fire(DuckChatPixelName.DUCK_CHAT_EXPERIMENTAL_LEGACY_OMNIBAR_AICHAT_BUTTON_PRESSED_DAILY, type = Daily())
+        }
+
+        when {
+            duckAiFeatureState.showContextualMode.value && !isNtp -> {
+                command.value = Command.ShowDuckAIContextualMode
             }
-            onUserSubmittedQuery(url)
-        } else {
-            when {
-                hasFocus && isNtp && query.isNullOrBlank() -> duckChat.openDuckChat()
-                hasFocus -> duckChat.openDuckChatWithAutoPrompt(query ?: "")
-                else -> duckChat.openDuckChat()
+
+            duckAiFeatureState.showFullScreenMode.value -> {
+                val url = when {
+                    hasFocus && isNtp && query.isNullOrBlank() -> duckChat.getDuckChatUrl(query ?: "", false)
+                    hasFocus -> duckChat.getDuckChatUrl(query ?: "", true)
+                    else -> duckChat.getDuckChatUrl(query ?: "", false)
+                }
+                onUserSubmittedQuery(url)
+            }
+
+            else -> {
+                when {
+                    hasFocus && isNtp && query.isNullOrBlank() -> duckChat.openDuckChat()
+                    hasFocus -> duckChat.openDuckChatWithAutoPrompt(query ?: "")
+                    else -> duckChat.openDuckChat()
+                }
             }
         }
     }

app/src/main/java/com/duckduckgo/app/browser/commands/Command.kt

@@ -501,4 +501,6 @@ sealed class Command {
 
     data class EnableDuckAIFullScreen(val browserViewState: BrowserViewState) : Command()
     data class DisableDuckAIFullScreen(val url: String) : Command()
+
+    data object ShowDuckAIContextualMode : Command()
 }