Showing Responses

Showing thread messages and components

Since tambo keeps the thread state updated, all you need to do is show the thread's messages somewhere. If a message from tambo includes a component, it can be accessed with message.renderedComponent:

const { thread } = useTamboThread()

...

thread.messages.map((message) => (
<div>
  <p>Sent by: {message.role}</p>
  <p>message text: {message.content[0]?.text}</p>
  <p>component: {message.renderedComponent}</p>
</div>
))

For canvas-style UIs where you want to display only the most recent component, you can walk backwards through the messages to find the latest one with a renderedComponent:

const latestComponent = thread.messages
  .slice()
  .reverse()
  .find((message) => message.renderedComponent)?.renderedComponent;

...

<div>
  {latestComponent}
</div>

This approach is useful for building interactive canvases, dashboards, or any UI where you want to show the most up-to-date component state without displaying the full conversation history.