search

rustic-ai / ui-components

React component library for crafting user-friendly and engaging conversational experiences
https://rustic-ai.github.io/ui-components/
MIT License
38 stars 10 forks source link

feat(choiceSelector): add ChoiceSelector component #90

Closed kaseyvee closed 2 weeks ago

kaseyvee commented 3 weeks ago

Changes

Screenshots

Storybook

Screenshot 2024-04-24 at 3 50 05 PM

default

multiple-choice

multiple-selection

Screenshot 2024-04-24 at 3 00 41 PM

Dark mode

dark-mode

Mobile

Screenshot 2024-04-24 at 3 26 56 PM
Shiti commented 3 weeks ago

The requirement here is that of a select/multi-select. Some of the example scenarios would be:

  1. Select a time slot to confirm a dinner reservation today - 6pm, 7pm, 8pm
  2. Select the places you would like to visit during this trip - A, B, C, D, E
  3. What would you like assistance with - book a flight, request special services, modify booking, cancel booking
  4. Poll on which is the preferred airline of everyone in the group - X, Y, Z , J, K, L

The select component requires user action to proceed further.
Within a chat/conversation window, a select would show up based on the context and interaction.

Technically, from this project's perspective, it would be rendered using ElementRenderer when the Message has a specific format. Therefore, we need to define a DataFormat that can be used to represent this. The options selected by users would be sent as replies to the original Message. These can then be used to update the rendered component accordingly. The component must rely on replies to the Message as it cannot store the selected values and any additional details due to lack of associated database.