Content-Length: 306675 | pFad | https://github.com/brave/brave-browser/issues/37297

6C Introduce slash tools · Issue #37297 · brave/brave-browser · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce slash tools #37297

Closed
aguscruiz opened this issue Apr 3, 2024 · 3 comments · Fixed by brave/brave-core#24273
Closed

Introduce slash tools #37297

aguscruiz opened this issue Apr 3, 2024 · 3 comments · Fixed by brave/brave-core#24273
Assignees
@mattmcalister @nullhook
Labels
browser-ai OS/iOS Fixes related to iOS browser functionality priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass - iPad QA Pass - iPhone QA/Test-All-Platforms QA/Yes release-notes/include
Milestone
1.68.x - Release

Comments

@aguscruiz
Copy link

aguscruiz commented Apr 3, 2024 •
edited
Loading

Description:

We want to give users the ability to select quick actions with their prompts, similar to right-click actions, but from Leo's sidepanel WebUI.

This needs to function well on mobile and possibly have the following UX nuances:

  • Users should be able to remove the action type label from the input box.
  • Pressing backspace on an empty input box with an action type selected should remove it.
  • Typing "/" should open the tools menu and allow users to filter.

Input box

  • The send/microphone button is moved below the text input portion. This allows for better arrangement for the slash command icon and any future buttons we add in the future, like attachments.
  • The padding around the whole input box is removed, so we can save some space there. Also, border radius only impacts the top of the input. The idea is to make it seem more integrated to the keyboard.

Tools menu

  • On iPad, the tools menu has a 377 max-height, this is a tentative height but the main goal is to show a menu item being cut off, so the user has a hint that the content area is scrollable.
  • On iPad landscape mode, I think the tools menu should go full height like on the designs for iPhone
  • On iPhone the menu goes full height (minus the margin / input box / keyboard) so users can view it better. To hide the menu, they have to click the [/] icon again.

Design system
https://www.figma.com/file/MNwi0uwXNhkAbPiJ86G4vm/%E2%9C%A8-Leo?type=design&node-id=1506%3A8040&mode=design&t=8gXTvsbx8ZIUXpoy-1

Flows
https://www.figma.com/file/m0Gdbf0wtqyfEFGm32VLLc/Leo?type=design&node-id=1628%3A68090&mode=design&t=kvje2RSmalam6pOM-1

Duplicate issue for desktop/android
#37294

Before / after
image
@aguscruiz aguscruiz added OS/iOS Fixes related to iOS browser functionality browser-ai labels Apr 3, 2024
@mattmcalister mattmcalister added priority/P3 The next thing for us to work on. It'll ride the trains. QA/Yes release-notes/include labels Apr 3, 2024
@nullhook
Copy link

nullhook commented May 9, 2024

done here: brave/brave-core#22868

@nullhook nullhook closed this as completed May 9, 2024
@Brandon-T Brandon-T mentioned this issue Jun 18, 2024
Merged
24 tasks
@brave-builds brave-builds added this to the 1.69.x - Nightly milestone Jun 19, 2024
This was referenced Jun 20, 2024
Merged
Closed
@kjozwiak kjozwiak mentioned this issue Jun 24, 2024
Closed
@hffvld hffvld mentioned this issue Jul 2, 2024
Closed
5 tasks
@kjozwiak
Copy link
Member

kjozwiak commented Jul 3, 2024

The above requires 1.68.107 or higher for 1.68.x verification 👍

@hffvld hffvld added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label Jul 6, 2024
@hffvld
Copy link
Contributor

hffvld commented Jul 8, 2024 •
edited
Loading

Verified on iPhone 14 and iPad Air using version(s):

Device/OS: 
- iPhone 14 / iOS 17.6
- iPad Air / iPadOS 16.7.2
Brave build: 1.68 (110)
BraveCore: 1.68.110 (127.0.6533.26)

STEPS:

  1. Launch Brave
  2. Open Leo > Verify that the slash tools button / is there
  3. Tap / > Choose Explain
  4. Type a prompt > Hit Enter > Verify
  5. Tap / > Choose Improve this time
  6. Type a prompt > Hit Enter > Verify
  7. Tap / > Choose Change tone / Funny this time
  8. Type a prompt > Hit Enter > Verify
  9. Tap / > Choose Social media / Short post this time
  10. Type a prompt > Hit Enter > Verify
  11. Enter some prompt > Tap / > Verify
  12. Tap / > Choose any action > Tap in a prompt field
  13. Tap Backspace on the keyboard > Verify
  14. Tap the Mic button > Provide a voice prompt > Verify

ACTUAL RESULTS:

  • Verified that the Slash tools are shown in the prompt field when launching Leo via NTP or any website
  • Verified that the Slash tools can be opened/closed by tapping the / button or typing and deleting / in the text field
  • Verified that the Slash tools dropdown menu is scrollable and can be collapsed/expanded by tapping the arrow
  • Verified that any action can be dismissed by tapping the x or Backspace button on the keyboard
  • Verified that different actions are working and providing different answers based on action type
  • Verified that Voice prompt is working when an action is applied

iPhone 14

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4

iPad Air

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4

@hffvld hffvld added QA Pass - iPhone QA Pass - iPad and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Jul 8, 2024
@Uni-verse Uni-verse mentioned this issue Sep 11, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mattmcalister mattmcalister

@nullhook nullhook

Labels
browser-ai OS/iOS Fixes related to iOS browser functionality priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass - iPad QA Pass - iPhone QA/Test-All-Platforms QA/Yes release-notes/include
Projects
Browser AI
Status: Done
Milestone
1.68.x - Release
Development

Successfully merging a pull request may close this issue.

[iOS] - Introduce SlashTools and Search Integration brave/brave-core
6 participants
@mattmcalister @kjozwiak @nullhook @aguscruiz @brave-builds @hffvld








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/brave/brave-browser/issues/37297

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy