add tab completion to the chat / command box

[joshmarinacci]

Proposed project plan

Goal

There is an opportunity here to add usability to the command list suggestions.
The goal is to be able to select these suggestions through tab key/arrow keys or a mouse click.
This will be prototyped to fit with the Hubs UI redesign currently underway.

Subtasks
List all action items or subtasks to accomplish the above goal.

• Revise prototype based on feedback from DPX-XD team.

• Add vertical scroll bar to scroll modal.

• Increase command list padding.

• Page(s) showing different states of form elements.

Timeline and priority
Rough timeline based on a 5-day sprint.

• Weekday, Month Day: Description of deliverable/item due date

Linked issues (if applicable)
Please list any other GitHub issues that are constrained by or dependent on this feature here.

• Title

Additional context
when I type /audio it has a popup which shows that /audiomode is an option. If I press the tab key or arrow keys I should be able to select /audiomode without typing the whole thing.

[misslivirose]

We will do this after the UI/UX redesign to avoid duplicating work

[netpro2k]

Current "suggestions" interface in hubs. Not selectable, no tab completion:

Some examples of what this looks like in other chat clients:

Slack:

Discord:

[malqinneh]

@fernzharp will tackle this this week and start building a Figma library for Hubs chat styles.

[misslivirose]

Tagging @mbransn as an FYI

[mbransn]

@malqinneh @fernzharp the best jumping off point for chat style creation will be this file. Planning that this file should evolve to become the working Hubs Figma Library as it's what the ongoing UI implementation is based on. :)

[fernzharp]

Hi all,
This is my first test for the request! @mbransn @misslivirose @malqinneh
At the moment this is only the desktop chat, I'll complete the other devices when this is working for the stakeholders.
Let me know what you think and I'll continue!

[misslivirose]

That looks great to me!

[malqinneh]

@fernzharp great start Dan! What would this look like if the chat was populated all the way through (and the tab completion box overlapped the grey chat bubbles?)

Also, how did you manage to get the chat drawer to show up? I was under the impression that the way chat works on Hubs is via the chat input on the centre-bottom of the screen:

[mbransn]

@malqinneh Dan is working from the UI updates that are current undergoing implementation. This file is the basis and implementation progress is on storybook here. We're working to solve this as part of that UI update roll out. 😀

@fernzharp can you make an alt. version where the command menu has a white background and a drop shadow? This may better distinguish the command menu from a chat message as the chat becomes full. (perhaps best to mock both an empty chat background and a full chat background.) Additionally how about leaning into the blue color as 'action' and utilize it on the cursor selector hover state? Also in the future if you land a link with your screenshot/comment I'm happy to leave feedback there, may be easier to parse? Thanks for thinking this through!

[malqinneh]

@malqinneh Dan is working from the UI updates that are current undergoing implementation. This file is the basis and implementation progress is on storybook here. We're working to solve this as part of that UI update roll out. 😀

I understand - thank you for clarifying!

[fernzharp]

Hello all!
I've taken on board the requests from @mbransn and made some mock ups of the design additions.
I went and made a copy of the Room UI redesign as I don't have write access to the original.
Will work out the next steps with the team where they will want to live!

https://www.figma.com/file/gEGSKPmcDaeQ7v1s8QZ0DE/Hubs-Redesign-(Copy)?node-id=108%3A9290

[fernzharp]

Update:

Hi!
I have a short video here showing a prototype of how this feature and its interactions might look.
I've also included a link to the Figma file, the design is on the "Full page prototype" page.
Feel free to ping me with any questions, comments or feedback!

https://drive.google.com/file/d/1bCQ1cE7xkmWro7qbOksh49HjvCV1NeRN/view?usp=sharing
https://www.figma.com/file/gEGSKPmcDaeQ7v1s8QZ0DE/Add-tab-completion-to-the-chat-%2F-command-box-%232677?node-id=1120%3A5245

[mbransn]

Thanks @fernzharp, this update came together well! Looks ready to me, @misslivirose @robertlong shout if you have questions.