Combined component for Duo Chat slash commands and context items
Based on [this comment](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4557#note_2083144128):
> **question:** @elwyn-gitlab I'm not sure it will work, but from the demos I saw, this is supposed to look pretty similar to the slash commands selector. At least it would be very good to unify the look of items here and slash commands. So, did you consider maybe branching off [the slash commands](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/experimental/duo/chat/duo_chat.vue?ref_type=heads#L545-565) into a re-usable component so that we could employ it here as well?
The slash commands and context item menu are both implemented in a similar way, using a `gl-card` with `gl-dropdown-item`s inside. They share similar behaviour regarding using arrow keys to cycle through items in the list, while retaining focus in an input below.
There is overlap in the implementations and behaviour, which makes these a candidate for refactoring together with a single base component.
We should consider the accessibility of these interactions as part of any rework: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2832+
---
Another aspect to consider improving is the way the context menu has a second, separate input for searching/filtering items:
{width=376 height=283}
We could consider building the searching behaviour into the main input, so we get somethign more like this mockup:
{width=525 height=52}
This would simplify our current implementation, which has to juggle focus and event handling between both inputs ([more discussion](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4560#note_2090339842))
---
Also [this comment](https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4577#note_2092723837):
> When Foundations team created new dropdowns, one of the reasons was to get rid of Bootstrap dependency eventually. `gl-dropdown-item` uses `bootstrap-vue` component. As a follow-up, could you check, please, if `GlDisclosureDropdownItem` would work here just as well?When Foundations team created new dropdowns, one of the reasons was to get rid of Bootstrap dependency eventually. `gl-dropdown-item` uses `bootstrap-vue` component. As a follow-up, could you check, please, if `GlDisclosureDropdownItem` would work here just as well?
issue