Acceptance Criteria

• Live Preview Display: A live preview of the function output must be displayed as the editor enters data in the input fields.
• Error Handling: If the function call results in an error, the preview must be replaced with an error message.
• Real-Time Updates: The preview and error messages must update in real-time whenever the editor modifies the input (on blur).
• Function Call Validation:The function call will only be triggered after the input passes validation to ensure that invalid data doesn't result in unnecessary function calls.
• API Call: The function call will be made using the wikilambda_function_call API with the created function call and the input fields provided.
• Progress Indicator: A Codex progress indicator must be displayed while waiting for the function call to return.
• Output Display: On successful completion of the function call, the output should be rendered in the preview area.
• Handling Multiple Function Calls: If a function call is still in progress and the user changes input fields, we discard the previous function call and let it finish in background.

[NOTE] An AbortController to cancel the previous API calls has been added as a stretch goal to investigate

Tech specs

On every input field update (on blur, don't do this at every keystroke), if the field validation passes successfully:

• It creates a function call that includes parser for inputs and renderer for output (if needed) like this:

Renderer Function for Output(
   Selected Function(
      Parser Function for Input 1( "3", User language or parserlang ),
      Parser Function for Input 2( "54", User language or parserlang ),
      "other inputs"
    ),
    User language or renderlang
);

• Calls the wikilambda_function_call API with the function call created and the new string input fields.
• Renders a loading state while waiting for the call to return.
• Once received the output of the function call, renders it.

If the field validation fails:

• Renders an error state without calling the function_call API

Requirements

• The preview is collapsed by default
• A user can expand the preview on click of the whole bar (chevron + title).
• The Function Call API will only be called when the preview is expanded
• The Progress Indicator we are using when the call is loading is from Codex
• When a user changes an input field and blurs the field, we try to update the preview result by calling the API again with the new parameters.
• When an API call is still running but a user presses ‘insert function’, we discard the function call and let it finish in background.
• When there is an error we show an error message.
• The refresh button will retry to run the same function
• The refresh button will become an 'cancel' -button once the api call is running/its trying to load the result. Clicking it will show the message 'Cancelled' in the UI instead of waiting for the result.