brave / brave-browser

Brave browser for Android, iOS, Linux, macOS, Windows.
https://brave.com
Mozilla Public License 2.0
17.45k stars 2.26k forks source link

[Brave Leo]: add Leo icon to top-right toolbar and drop-down menu #39713

Closed LorenzoMinto closed 2 weeks ago

LorenzoMinto commented 1 month ago

Description

We’ve received a lot feedback around “Not being able to find Leo”. And once found, user might find it hard to dismiss it or bring it back into view because of the unfamiliarity with the sidebar element. If we want Leo to be a prominent browser feature we should give it proper placement and make it a feature with one-click access. In the longer term this could become the general access to Browser AI features (not just chat). Note that this placement would not have the risk to conflict with the Search AI feature as it’s not directly related to a query or to search real estate (omnibox)

Screenshot 2024-07-11 at 19 10 21

Image

Clicking the Leo tool would open the Leo panel, preferably without the sidebar component.

Test Plan

Toolbar button opens panel

Toolbar button closes panel

Toolbar button switches panel

Same as above for menu item

Repeat previous tests but instead of toolbar button, use the menu item

Same as above for quick command

Repeat previous tests but instead of toolbar button, use the quick command "Toggle Leo"

Toolbar button, menu item and quick command do not show up in private window

Toolbar button, menu item and quick command do not show up when feature flag is disabled

Toolbar button, menu item and quick command do not show up when Windows policy disables it

aguscruiz commented 1 month ago

Adding Figma here: https://www.figma.com/design/m0Gdbf0wtqyfEFGm32VLLc/%F0%9F%94%84-Leo-%5BIN-PROGRESS%5D?node-id=5348-93082&t=1db3MaE86Qpo3Pn9-1

petemill commented 3 weeks ago

The button will still open the SideBar, for now at least, and respect the user's sidebar settings on close. The button will Toggle Leo open or closed. I experimented with the button being highlighted if the Leo panel is showing, but it made the toolbar look like an airplane cockpit given the Sidebar button also highlights (see below), so I'll remove that for now

Image

kjozwiak commented 1 week ago

The above requires 1.69.147 or higher for 1.69.x verification 👍

LaurenWags commented 5 days ago

Verified with

Brave | 1.69.149 Chromium: 128.0.6613.40 (Official Build) (x86_64)
-- | --
Revision | a6a137ec4f7f0b30e1d3940dbfcde72c32d35baa
OS | macOS Version 13.6.9 (Build 22G830)

Verified test cases listed via https://github.com/brave/brave-browser/issues/39713#issue-2405160230:

Leo toolbar button - PASSED ### Toolbar button opens panel - Clicked "Leo" toolbar button - Confirmed sidebar opened with Leo panel active ### Toolbar button closes panel - Opened Leo panel of sidebar - Clicked "Leo" toolbar button - Confirmed sidebar closed ### Toolbar button switches panel - Opened Bookmarks panel of sidebar - Clicked "Leo" toolbar button - Confirmed Leo panel of sidebar opened https://github.com/user-attachments/assets/dee3c632-3d31-416c-b138-fee154e21f22
Leo menu item in hamburger menu - PASSED ### Hamburger menu item opens panel - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed sidebar opened with Leo panel active ### Hamburger menu item closes panel - Opened Leo panel of sidebar - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed sidebar closed ### Hamburger menu item switches panel - Opened Bookmarks panel of sidebar - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed Leo panel of sidebar opened https://github.com/user-attachments/assets/3958ee34-3c61-4adc-8cde-1ec75619fa79
"Toggle Leo AI" Quick Command (URL bar) - PASSED ### "Toggle Leo AI" Quick Command opens panel - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed sidebar opened with Leo panel active ### "Toggle Leo AI" Quick Command closes panel - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed sidebar closed ### "Toggle Leo AI" Quick Command switches panel - Opened Bookmarks panel of sidebar - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed Leo panel of sidebar opened https://github.com/user-attachments/assets/34665ec5-190b-45b5-a063-9551a7ba5e55
"Toggle Leo AI" Quick Command (keyboard shortcut) - PASSED Pre-req: "Toggle Leo AI" does not have a keyboard shortcut. Go to `brave://settings/system/shortcuts` and assign it one. I used `cmd + J`: cmd-j ### "Toggle Leo AI" Quick Command opens panel - With browser window in focus, entered chosen keyboard shortcut - Confirmed sidebar opened with Leo panel active ### "Toggle Leo AI" Quick Command closes panel - With browser window in focus, entered chosen keyboard shortcut - Confirmed sidebar closed ### "Toggle Leo AI" Quick Command switches panel - Opened Bookmarks panel of sidebar - With browser window in focus, entered chosen keyboard shortcut - Confirmed Leo panel of sidebar opened https://github.com/user-attachments/assets/745ce60b-08aa-49d5-aa24-fa09325a69bb
Private Windows - PASSED Confirm toolbar button, menu item and quick command do not show up in private window - Open private window - Expect none of these new features to show Private Window: Example | Example --- | --- Screenshot 2024-08-20 at 12 07 34 PM | Screenshot 2024-08-20 at 12 07 52 PM Tor Window: Example | Example --- | --- Screenshot 2024-08-20 at 12 09 47 PM | Screenshot 2024-08-20 at 12 09 58 PM Guest Window Example | Example --- | --- Screenshot 2024-08-20 at 12 10 58 PM | Screenshot 2024-08-20 at 12 11 07 PM
Disable feature flag - PASSED Confirm toolbar button, menu item and quick command do not show up when feature flag is disabled - Disable AI Chat feature flag - Expect none of these new features to show Example | Example | Example --- | --- | --- Screenshot 2024-08-20 at 12 12 40 PM | Screenshot 2024-08-20 at 12 14 27 PM | Screenshot 2024-08-20 at 12 14 39 PM

Case for "Toolbar button, menu item and quick command do not show up when Windows policy disables it" will be checked separately by @GeetaSarvadnya on Windows.

GeetaSarvadnya commented 5 days ago

Verification PASSED on

Brave | 1.69.149 Chromium: 128.0.6613.40 (Official Build) (64-bit)
-- | --
Revision | a6a137ec4f7f0b30e1d3940dbfcde72c32d35baa
OS | Windows 10 Version 22H2 (Build 19045.4780)
Leo toolbar button - PASSED ### Toolbar button opens panel - Clicked "Leo" toolbar button - Confirmed sidebar opened with Leo panel active ### Toolbar button closes panel - Opened Leo panel of sidebar - Clicked "Leo" toolbar button - Confirmed sidebar closed ### Toolbar button switches panel - Opened Bookmarks panel of sidebar - Clicked "Leo" toolbar button - Confirmed Leo panel of sidebar opened ![leo toolbar](https://github.com/user-attachments/assets/faea3a83-08c6-408c-8803-88efe606f08e)
Leo menu item in hamburger menu - PASSED ### Hamburger menu item opens panel - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed sidebar opened with Leo panel active ### Hamburger menu item closes panel - Opened Leo panel of sidebar - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed sidebar closed ### Hamburger menu item switches panel - Opened Bookmarks panel of sidebar - Clicked ≡ to open hamburger menu - Clicked "Leo" menu item - Confirmed Leo panel of sidebar opened ![Leo via hamburger menu](https://github.com/user-attachments/assets/36fd8513-c643-48de-bd35-3af0e5d58d57)
"Toggle Leo AI" Quick Command (URL bar) - PASSED ### "Toggle Leo AI" Quick Command opens panel - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed sidebar opened with Leo panel active ### "Toggle Leo AI" Quick Command closes panel - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed sidebar closed ### "Toggle Leo AI" Quick Command switches panel - Opened Bookmarks panel of sidebar - In URL bar/omni box, used quick command "Toggle Leo AI" - Confirmed Leo panel of sidebar opened ![Toggle leo AI cmd](https://github.com/user-attachments/assets/3cf55f7a-d4c8-4419-a37e-c8888a7db115)
"Toggle Leo AI" Quick Command (keyboard shortcut) - PASSED Pre-req: "Toggle Leo AI" does not have a keyboard shortcut. Go to `brave://settings/system/shortcuts` and assign it one. I used `Ctrl+q`: ![image](https://github.com/user-attachments/assets/36b39872-b595-4590-a396-13fc2c5319a2) ### "Toggle Leo AI" Quick Command opens panel - With browser window in focus, entered chosen keyboard shortcut - Confirmed sidebar opened with Leo panel active ### "Toggle Leo AI" Quick Command closes panel - With browser window in focus, entered chosen keyboard shortcut - Confirmed sidebar closed ### "Toggle Leo AI" Quick Command switches panel - Opened Bookmarks panel of sidebar - With browser window in focus, entered chosen keyboard shortcut - Confirmed Leo panel of sidebar opened ![shortcut cmd](https://github.com/user-attachments/assets/f90d5a6e-5c9a-4411-961c-1e756ab15b48)
Private Windows - PASSED Confirm toolbar button, menu item and quick command do not show up in private window - Open private window - Expect none of these new features to show Private Window: Example | Example --- | --- ![image](https://github.com/user-attachments/assets/aef3bc2a-273a-4568-9af1-997272a7d0f7) | ![image](https://github.com/user-attachments/assets/cd2c2785-5e35-4d57-8fad-c0083416a4ae) Tor Window: Example | Example --- | --- ![image](https://github.com/user-attachments/assets/3aed0327-f946-4f1a-af1a-37adad5c9ae7) | ![image](https://github.com/user-attachments/assets/01d9c90a-e88c-4f34-927d-81b9bc4bb788) Guest Window Example | Example --- | --- ![image](https://github.com/user-attachments/assets/10439bfa-d99d-48e6-9e01-545fea968745) | ![image](https://github.com/user-attachments/assets/7ea9e7b7-f6f9-4d8f-9173-a0b513ec5060)
Disable feature flag - PASSED Confirm toolbar button, menu item and quick command do not show up when feature flag is disabled - Disable AI Chat feature flag - Expect none of these new features to show Example | Example | Example --- | --- | --- ![image](https://github.com/user-attachments/assets/50c12b34-4848-44e2-8b2e-01ef4051f670) | ![image](https://github.com/user-attachments/assets/7d8c35ab-d32a-4703-827f-ded21dce5a94) | ![image](https://github.com/user-attachments/assets/c3768ea0-a34e-47d2-a5e4-0081b2cc0fa9)
Disable Leo Windows policy_PASSED - Re-enable AI Chat feature flag - Disable AI Chat via Windows policy - Expect none of these new features to show Steps to disable leo windows policies: 1. Opened `regedit` on Windows 2. Created a `BraveSoftware\Brave` key entry in `HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Policies` 3. Add `BraveAIChatEnabled` 32 bit and assign value `0` (as shown in the image below) 4. Launched Brave `1.69.150` 5. Opened brave://policy 6. Ensured `BraveAIChatEnabled` is set to false Regedit | brave://policy ----------|-------------- ![image](https://github.com/user-attachments/assets/9ca8e1e4-c9b4-4132-9477-54d3e74f4fd0) | ![image](https://github.com/user-attachments/assets/53e3e403-e7da-4655-88c9-463bef11f234) 7. Confirmed there is no Leo toolbar icon 8. Confirmed there is no Leo menu item via Hamburger menu 9. Confirmed there's no Leo sidebar menu item via brave://settings 10. Confirmed no context-click Leo AI tools > menu-item with text selection 11. Confirmed no Leo autocomplete in the URL bar step 7, 8 | step 9 | STEP 10 | step 11 ----------|-----------|----------|--------- ![image](https://github.com/user-attachments/assets/5a93028b-73e6-41c4-b64d-a7f01ec4f909) | ![image](https://github.com/user-attachments/assets/9d75dbd6-1d77-4033-8a3f-04508e5fe82e) | ![image](https://github.com/user-attachments/assets/f13ae1ee-be1f-41dc-8ce0-206084e3513e) | ![image](https://github.com/user-attachments/assets/0471937c-9977-467d-a312-feffc26163d7) Delete the registry value and ensure Brave Leo works as expected: Example | Example ----------|-------- ![image](https://github.com/user-attachments/assets/9f6d9e8a-fd7a-491f-8511-3275fbe7c56d) | ![image](https://github.com/user-attachments/assets/fe8bf615-28d1-4d7b-883d-73ee2200de8a) 12. Closed and relaunched brave 13. Confirmed there is Leo toolbar icon 14. Confirmed there is Leo menu item via Hamburger menu 15. Confirmed there's Leo sidebar menu item via brave://settings 16. Confirmed context-click Leo AI tools > menu-item with text selection 17. Confirmed Leo autocomplete in the URL bar step 13,14 | step 15 | step 16 | step 17 -------------|---------|----------|--------- ![image](https://github.com/user-attachments/assets/ad2d246f-95a8-409b-bfe5-2e0612048c10) | ![image](https://github.com/user-attachments/assets/6edd7537-bac3-4560-bfe5-76d178f3d71b) | ![image](https://github.com/user-attachments/assets/02618ee2-97a0-47c1-8a4e-d568a41f84ac) | ![image](https://github.com/user-attachments/assets/e113b086-a06b-46fe-b407-11ba60ad4436)