feat(widget): render Typebot choice blocks as interactive button list

[miltonsosa-info-unlp]

Summary

Renders input_select messages from Typebot as interactive button groups
in the web widget. When the user clicks an option, the selection is sent as
a text message and the buttons disable to prevent double submission.

Dependencies

Requires evolution-foundation/evo-ai-crm-community#86 to be merged first
(creates messages with content_type: input_select and
content_attributes: {items: [...]}).

Changes

src/components/widget/MessageList.tsx

• Renders a flex button grid below the message bubble when
  message.contentType === 'input_select' and items are present.
• Buttons disable automatically once the user has submitted a choice
  (submittedValues is set) or when the onSelectOption callback is absent.
• Style: neutral bordered buttons that turn to muted/disabled state after
  selection.

src/pages/Widget/index.tsx

• normalizeContentType: maps the numeric content_type enum the API may
  return (e.g. 4) to its string equivalent ("input_select"), since the
  serializer can return either format.
• transformMessage: propagates items from content_attributes.items and
  submittedValues from content_attributes.submitted_values to the local
  MessageItem type.
• sender_type guard extended to include 'AgentBot' so that bot replies are
  treated as inbound messages and rendered on the left side of the widget.
• handleSelectOption: marks the chosen item in local state, calls
  handleSend with the option text, and persists the selection via
  widgetService.updateMessageSubmittedValues.

src/services/widget/widgetService.ts

• New updateMessageSubmittedValues(websiteToken, messageId, submittedValues):
  sends a PATCH /widget/messages/:id request with submitted_values to
  persist the user's choice on the message record.

Notes

• Backward-compatible: messages without content_type: input_select or
  without items render exactly as before.
• The normalizeContentType guard handles both legacy numeric and current
  string serialization of content_type.

Summary by Sourcery

Render Typebot input_select messages as interactive choice buttons in the web widget and persist user selections.

New Features:

• Display input_select messages as button groups beneath the corresponding message bubble and send the chosen option as a text reply.
• Support numeric and string content_type values from the API via a normalization layer for widget messages.

Enhancements:

• Propagate select items and submitted values into MessageItem to support richer interactive rendering.
• Treat AgentBot messages as inbound so bot replies appear on the left side like other incoming messages.

Chores:

• Persist user choice selections to the backend via a new widgetService.updateMessageSubmittedValues helper.

[sourcery-ai]

Reviewer's Guide

Implements interactive rendering and state persistence for Typebot input_select messages in the web widget by normalizing content types, surfacing select metadata into the message model, rendering them as button groups, and persisting user selections via a new widget service method, while also treating AgentBot messages as inbound.

Sequence diagram for selecting a Typebot input_select option in the widget

sequenceDiagram
  actor User
  participant MessageList
  participant Widget
  participant widgetService
  participant BackendAPI

  User->>MessageList: click option button
  MessageList->>Widget: onSelectOption(message, item)
  activate Widget
  Widget->>Widget: setMessages(update submittedValues)
  Widget->>MessageList: render buttons as disabled
  Widget->>Widget: handleSend(selectedText)
  Widget->>widgetService: updateMessageSubmittedValues(websiteToken, messageId, submittedValues)
  activate widgetService
  widgetService->>widgetService: requestWithBaseFallback(client)
  widgetService->>BackendAPI: client.patch(/widget/messages/:id, submitted_values)
  BackendAPI-->>widgetService: 200 OK
  deactivate widgetService
  widgetService-->>Widget: updated message data
  deactivate Widget

Loading

File-Level Changes

Change	Details	Files
Normalize message content_type values and surface select metadata on Widget messages.	Introduce normalizeContentType helper to map numeric content_type enums to string identifiers including input_select. Set MessageItem.contentType via normalizeContentType and propagate items and submittedValues from content_attributes into MessageItem. Extend sender_type handling so AgentBot messages are treated as inbound in the widget. Add handleSelectOption to update local submittedValues, send the chosen option text, and persist the selection via widgetService.updateMessageSubmittedValues. Pass onSelectOption handler into MessageList so it can render interactive options.	src/pages/Widget/index.tsx
Render input_select messages as interactive button lists beneath the message bubble.	Extend MessageItem and MessageListProps to accept items and submittedValues and an onSelectOption callback. Add stripSelectFromText helper to remove trailing numbered option lines from the message text when items are present. Detect input_select messages with items, compute disabled state when submittedValues exist, and use selectText as the displayed content. Render a flex-wrap grid of neutral-styled buttons for each select item, disabling them after submission or when no onSelectOption handler is provided.	src/components/widget/MessageList.tsx
Persist user choice selections for widget messages via the widget service.	Add updateMessageSubmittedValues method that PATCHes /widget/messages/:id with message.submitted_values payload. Ensure the request includes website_token as a query param and appropriate auth and JSON headers, and returns extracted response data.	src/services/widget/widgetService.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.