[FEAT] 868 Meta Response (dynamic input)

[sherifButt]

Pull Request Type

• ✨ feat
• 💄 style
• 📝 docs

Relevant Issues

This pull request resolves #868

What is in this change?

Meta Response

Meta Response enhances the chat experience by introducing contextually aware input fields, thereby making interactions both intuitive and dynamic. This feature uses an autogenerated JSON meta object to guide the front-end on rendering various input interfaces—ranging from options and suggestions to sliders—thus extending beyond traditional text inputs.

How It Works

1. Click on Workspace setting Cog symbol.
2. Navigate to Chat Settings
3. Enable Meta Response (to the bottom)
4. Navigate to the newly added Meta Response Tap (top right).
5. Type an active sequence prompt following the examples below, or try proactive prompting Demo from System Prompts Tab.
6. Go to the chat area and ask a question such I want to know about tallest 5 buildings in the world, or just start you sequence.

[!IMPORTANT] Using more advanced LLM such as GPT-4 will return consistent results

To see Meta Response in action, watch our quick demo:

Meta Response enables dynamic input methods to enhance user experience by allowing for intuitive and context-sensitive interactions. It instructs the model to incorporates a JSON meta object within responses to guide the front-end on how to render various input interfaces, such as options, suggestions, or sliders, moving beyond traditional text inputs.

Key Features

• Meta Object Schema: Structures input types (options, range, multi-select checkboxes) and the necessary data for rendering.
• JSON Object Extractor: Converts meta JSON objects from responses into objects passed to chatHistory.
• Input Handler Module (DynamicInput): Dynamically changes user input methods based on instructions from the meta object.
• Rendering Components: Includes components like OptionsSelect, offering dropdown menus, lists, buttons, etc., with more to be added.
• Configurable Settings: Users can enable the Meta Response feature from chat settings, detailed in the provided Figma design link.

View Figma Design

This system is built with modularity and scalability in mind, incorporating a library of standalone input method components and a flexible schema for future enhancements.

Usage Example

Interaction Sequence
1. ask the user to select the number of options that should be presented
return: range between 2 to 10
1. if list is not provided, ask the user to provide a list, be helpful by providing some suggestions to start with, ask user to chose one, or just click "use Keyboard input" to type any other list.
   return: options of 4 best lists in full markdown, associated with json options  of displayType `buttons` in json object
9. complement the user about his choice and proceed by presenting the list items, ask user to chose one, or just click "use Keyboard input" to type any other item if they has one in mind.
   return: options of 4 items in full markdown, associated with json options  of displayType `buttons` in json object
10. Provide information about the item, break down the information to options.
   return: information about the item in full markdown add simplified comparison table with closest item add as well fun fact, associated with break down of the information to list of options, displayType `checkbox` with sub-label "I can break down this information further".
11. Provide  information about what they asked.
   Return: information in full markdown, references, and simplified example if possible, a mermaid chart for illustration. associated with two options ether to dig deeper where you will go back to step 5, or start over where you will go back to step 1,   displayType dropdown with sub-label "would you like top know more...",  
12. check if user want to ether 1. Dig deeper  or 2. switch to a new topic.
   return: Two options 1. ask the user if they want to switch topic, if yes then move to Next step #8 for rating, option 2 dig deeper about the underlying [topic], if user select it then go to step 3.  use displayType dropdown with sub-label "would you like top know more...",
13. ask the user to rate the latest question
return: rating using rating json, if rating is 2 or less, go to next step to ask for fee back, if more than 2 then go to step 1
1. feed back
return: don't return options json object, as the user will typed his comment. then go to step 1.

Example JSON Meta Object:

{
        "inputs": {
            "type": "options",
            "data": {
                "options": [
                    {
                        "label": "Restart Router",
                        "value": "restart router"
                    },
                    {
                        "label": "Check Service Status",
                        "value": "check service status"
                    },
                 ],
                "label":"Select Server ",
                "description":"list of servers as described"
            },
            "settings": {
                "allowMultiple": false,
                "displayType": "chose one, buttons/list/dropdown"
            }
        },
        "sentiment": "happy",
        "style": "text"
}

Screen shots:

components:

Range Slicder Input:

Buttons Input:

Dropdown menu Input: Star Rating Input:

Meta response settings area:

Enable Meta Response toggle switch.

By enabling Meta Response, users will get access to the Meta Response Menu, where they can edit both the system prompt and Schema prompts, adding and removing components and more. Enabling Meta Response will automatically disable editing system prompt form this screen. View image below.

Meta Response menu, this is a seed for many other Meta elements, we are starting with Inputs where you will can input data via alternative input methods than text. late there are plans to add Custom outputs, to dynamically control the conversation output.. etc

Enabling Inputs:

Overview:

With the Inputs feature now activated, users gain access to a control panel designed to customize and enhance their interaction experience. Below is a detailed guide to the functionality available within this panel:

Legend:

1. Input Feature Toggle: A switch that allows users to effortlessly activate or deactivate the Inputs feature. This provides flexibility in how interactions are managed and displayed.
2. System Prompt Toggle: This switch controls the visibility of the System Prompt. It's especially useful when the system prompt is not required, allowing for a cleaner interface.
3. System Prompt Management Buttons: These buttons are your toolkit for customizing the System Prompt. Users can add, remove, or rename various system prompts to fit their needs, ensuring that the chat interface is always relevant and tailored.
4. System Prompt Text Area: This field displays the current system prompt and allows for real-time editing. Expanding this area reveals the full text, and changes are saved promptly, demonstrated by the opening of a save dialog. An example of an active system prompt is provided for reference.
5. Input Schema Text Area: For those looking to dive deeper into customization, this area allows for the modification of the Input Schema. Here, users can adjust the behavior of input fields for more advanced control, enhancing the interaction according to specific requirements.
6. Component Activation Area: This section is designed for enabling or disabling various components within the Inputs feature. It offers a granular level of control over which elements are active at any given time, allowing users to fine-tune their interaction setup.

By integrating Meta Response, users gain access to a versatile and intuitive chat experience, opening new dimensions of interaction beyond mere text.

Additional Information

Add any other context about the Pull Request here that was not captured above.

Developer Validations

• I ran yarn lint from the root of the repo & committed changes
• Relevant documentation has been updated
• I have tested my code functionality
• Docker build succeeds locally

[timothycarambat]

This is really great. I will say the only critique i have currently since this is in Draft is the UI. Once this is ready for review ill task our designer with overhauling this because some elements are not in spec with our design philiophsy and general design patterns. This is not something to overly concern yourself with as functionality is the most important thing for this PR.

Really awesome work @sherifButt 👏

[sherifButt]

Thank you @timothycarambat, I'm happy that you liked the "Meta response" feature, to be honest I developed the chat dynamic input element directly with no pre design, as the proof of concept for me was the functionality itself. There is some design involved on that part however it is minimal mostly copping existing elements from the app, and it is fully coded and actorly ready for review if you want. but I thought might be better to code the settings page before issuing a review? what you think?
Regarding the setting pages (second phase), I felt that I need a Figma touch, just to organise the settings menu fast and to imagine how to better control the feature, just as a layout exercise. I didn't code the setting pages at all yet, however I'm planning to do so in the coming few days. as I'll need to introduce minor db Schema addition on the workspace_threads.
I have Figma design for the setting pages to share if you want to have a look.
I'm happy to adjust my designs to match your design philosophy as they are just to convey the ideas and to get feed back.

[sherifButt]

@timothycarambat I’m AFK until Wednesday the 10th, I’ll resolve this conflict once I’m back.