0

I need to access each message in a twillo agents chat to check if any of them are a link, if so I will render a component.

I tried using

flex.MessageListItem.Bubble.Content.message

but I think I am using it wrong.

Aaeron
  • 23
  • 4

1 Answers1

1

To edit a specific component that has some link in the message content you'll need to use Content.add (if you want to add a new component to the message bubble) or Content.replace (to replace the component for another that you'll create). In Both methods, replace and add, you can pass an if property that will receive that logic to add/replace or just render the default component.

Follow an example where I replace a default component with another based on a condition:

flex.TaskInfoPanel.Content.replace(<CallbackComponent key="callback-info-component" manager={manager} />, {
   sortOrder: -1,
   if: (props) => props.task.attributes.taskType === 'callback',
});

To see what coming in condition props you can simply print it using a console.log, so the if condition returns true, it'll replace or add your component, if returns false, it'll doesn't anything.

Follow some docs that can help you:

Flex 1.0 components

Flex 2.0 components

I hope that it can help you.

csevero
  • 361
  • 1
  • 8
  • Thank you very much! I think this should help me out. – Aaeron Jan 26 '23 at 20:39
  • I had a quick follow up question to this, is there a way for me to access the prop values outside? I need to use the text in the message in the component that will replace the message. – Aaeron Jan 27 '23 at 03:43
  • Hey, but if you component is added on MessageBubble component, you'll receive the message on this component, you need to get the message out of that component?! – csevero Jan 27 '23 at 18:56
  • Thanks! I did not realise that props are injected inherently. Sorted thanks! – Aaeron Jan 31 '23 at 03:29