Introduce slash tools

[nullhook]

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:

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

[nullhook]

cc @aguscruiz to provide designs.

[aguscruiz]

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=65-31891&mode=design

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.
• On Android, 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 desktop and Android tablets, 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 Android tablets landscape mode, I think the tools menu should go full height like on the designs for phones
• On Android, 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.

Before / after on Android

[stephendonner]

Verified PASSED using

Brave | 1.67.82 Chromium: 125.0.6422.41 (Official Build) beta (64-bit)
-- | --
Revision | cbebefd4c702801af65a196ba9701a907ed0d292
OS | Windows 10 Version 22H2 (Build 19045.4355)

Quick Actions

Explain - PASSED

### Steps: 1. loaded https://en.wikipedia.org/wiki/String_theory 2. copied the first couple of paragraphs 3. typed `/` in the `Enter a prompt here` textbox 4. pressed `enter` example | example ----------|----------  | 

Rewrite - PASSED

### `Paraphrase` ### Steps: 1. loaded https://www.britannica.com/topic/shogun 6. selected and copied a piece of text 7. typed `/` in the `Leo` input box 8. chose `REWRITE > PARAPHRASE` example | example ----------|----------  |  ### `Improve` 1. loaded https://www.britannica.com/topic/shogun 2. selected and copied a piece of text 3. typed `/` in the `Leo` input box 4. chose `REWRITE > IMPROVE` example | example ----------|----------  | 

Change Tone - PASSED

### Steps: 1. loaded https://en.wikipedia.org/wiki/Gardening 9. selected and copied a block of text 10. triggered the respective `REWRITE` -> `TONE` option, below ### `Academic` example | example ----------|----------  |  ### `Professional` example | example ----------|----------  |  ### `Persuasive` expand | expand ---------|---------  |  ### `Casual` example | example ----------|----------  |  ### `Funny` example | example ----------|----------  |  ### `Shorten` example | example ----------|----------  |  ### `Expand` example | example -----------|---------  | 

Create - PASSED

### `Tagline` - `PASSED`

example | example ----------|----------  | 

## `Social Media` - `PASSED`

### `Short post` ### Steps: 1. loaded https://www.wired.com/story/google-io-end-of-google-search/ 11. selected a portion of text 12. pressed `/` 13. typed `short post` 14. pasted the copied text 15. hit `enter` ### Confirmed short social-media post with hashtags example | example ----------|----------  |  ### `Long post` ### Steps: 1. loaded https://www.wired.com/story/google-io-end-of-google-search/ 3. selected a portion of text 4. clicked on `/` 6. selected `long post` 7. pasted the copied text 8. hit `enter` ### Confirmed long social-media post with hashtags example | example ----------|----------  | 

/-tools UX - PASSED

### type “/” select an action the dropdown should close https://github.com/brave/brave-browser/assets/387249/acd9159f-d326-444d-863f-8ff41c6e7090 ### type “/” scroll in the dropdown up and down and put your tap outside of the dropdown (it should close) https://github.com/brave/brave-browser/assets/387249/d54b0066-cbaf-4fd4-ac01-d138a5228c1b ### type "/" select an action and press "x" button https://github.com/brave/brave-browser/assets/387249/6f74654b-583d-4075-9771-457bcc7b5029 ### type "/" select an action with your keyboard ### click "/" select an action ### type "/" select an action and remove it. click on "/" select an action and remove it while the action is selected pressing backspace on an empty input box should remove actions https://github.com/brave/brave-browser/assets/387249/c88ef3d9-0b65-4994-a2c9-4cafba24164b type "/" and start filtering https://github.com/brave/brave-browser/assets/387249/7b325848-0ac1-45f4-bb99-f5807296b33c

Accessibility - PASSED

### `tab`  ### `shift`+ `tab`  ### `spacebar` 

Dark mode - PASSED

`Top` | `Bottom` | Invoked via `/` | `Rewrite` mode | `Paraphrase` | `tabindex` / focus ring ------|-----------|-----------------|------------------|---------------|--------------------------  |  |  |  |  | 

Logged:

• https://github.com/brave/brave-browser/issues/38328
• https://github.com/brave/brave-browser/issues/38329

[GeetaSarvadnya]

Verification PASSED on Vivo x70 pro version 12 running Bravemonoarm64.apk_1.67.100

Quick Actions

Explain - PASSED

### Steps: 1. loaded https://en.wikipedia.org/wiki/String_theory 2. copied the first couple of paragraphs 3. typed `/` in the `Enter a prompt here` textbox 4. pressed `enter` example | example | example | example | example ----------|-----------|----------|-----------|----------  |  |  |  | 

Rewrite - PASSED

### `Paraphrase` ### Steps: 1. loaded https://www.britannica.com/topic/shogun 6. selected and copied a piece of text 7. typed `/` in the `Leo` input box 8. chose `REWRITE > PARAPHRASE` example | example | example ----------|-----------|-------------  |  |  ### `Improve` 1. loaded https://www.britannica.com/topic/shogun 2. selected and copied a piece of text 3. typed `/` in the `Leo` input box 4. chose `REWRITE > IMPROVE` example | example | example ----------|-----------|-------------  |  | 

Change Tone - PASSED

### Steps: 1. loaded https://en.wikipedia.org/wiki/Gardening 9. selected and copied a block of text 10. triggered the respective `REWRITE` -> `TONE` option, below ### `Academic` example | example | example ----------|-----------|----------  |  |  ### `Professional` example | example | example ----------|-----------|------------  |  |  ### `Persuasive` expand | expand | example ---------|---------|----------  |  |  ### `Casual` expand | expand | example ---------|---------|----------  |  |  ### `Funny` expand | expand | example ---------|---------|----------  |  |  ### `Shorten` expand | expand | example ---------|---------|----------  |  |  ### `Expand` expand | expand | example | example ---------|---------|-----------|----------  |  |  | 

Dark mode - PASSED

example | example | example | example | example ----------|-----------|----------|-----------|------------  |  |  |  | 

Create - PASSED

### `Tagline` - `PASSED`

example | example | example ----------|----------|----------  |  | 

## `Social Media` - `PASSED`

### `Short post` ### Steps: 1. loaded https://www.wired.com/story/google-io-end-of-google-search/ 11. selected a portion of text 12. pressed `/` 13. typed `short post` 14. pasted the copied text 15. hit `enter` ### Confirmed short social-media post with hashtags example | example | example ----------|----------|---------  |  |  ### `Long post` ### Steps: 1. loaded https://www.wired.com/story/google-io-end-of-google-search/ 3. selected a portion of text 4. clicked on `/` 6. selected `long post` 7. pasted the copied text 8. hit `enter` ### Confirmed long social-media post with hashtags example | example | example | example ----------|----------|-----------|----------  |  |  | 

/-tools UX - PASSED

### type “/” select an action the dropdown should close https://github.com/brave/brave-browser/assets/38657976/a361ab3a-fb5a-4d29-a6f7-8ff45a38c611 ### type “/” scroll in the dropdown up and down and put your tap outside of the dropdown (it should close) https://github.com/brave/brave-browser/assets/38657976/0636598a-298a-4c9f-a79a-b9f10458b182 ### type "/" select an action and press "x" button https://github.com/brave/brave-browser/assets/38657976/b1cf80bf-062e-4ac4-8972-9efe3d7a3c51 ### type "/" select an action with your keyboard ### click "/" select an action ### type "/" select an action and remove it. click on "/" select an action and remove it while the action is selected pressing backspace on an empty input box should remove actions https://github.com/brave/brave-browser/assets/38657976/14f222a0-2ecc-4d7e-a755-5034cafcc6eb type "/" and start filtering https://github.com/brave/brave-browser/assets/38657976/9ff17c73-bc0c-431c-a209-9c1e40238dff