Generation Stage

You may want to show your users something unique during each stage of tambo's response generation process, rather than a static 'loading' message for the entire duration.

To enable this, each thread has a generationStage property that can be used to track the progress of the response generation process.

You can expose the generation stage ( or a value you derive from it ) to your users so they know what their AI assistant is doing.

const { generationStage } = useTamboThread();
 
...
 
if (generationStage === GenerationStage.CHOOSING_COMPONENT) {
  return <div>Tambo is choosing the best component to use...</div>;
}
 
if (generationStage === GenerationStage.FETCHING_CONTEXT) {
  return <div>Tambo is fetching additional data to hydrate the component...</div>;
}
...

Stages

A thread's generation stage is an enum with the following possible values:

enum GenerationStage {
  IDLE = "IDLE", // The thread is idle ( initial stage )
  CHOOSING_COMPONENT = "CHOOSING_COMPONENT", // Tambo is choosing the best component to use based on the user's message
  FETCHING_CONTEXT = "FETCHING_CONTEXT", // Tambo is fetching additional data to hydrate a chosen component
  HYDRATING_COMPONENT = "HYDRATING_COMPONENT", // Tambo is hydrating the component
  STREAMING_RESPONSE = "STREAMING_RESPONSE", // Tambo is streaming the response
  COMPLETE = "COMPLETE", // Tambo has completed successfully
  ERROR = "ERROR", // Tambo has encountered an error
}

Status Message

Instead of determining a custom message for each stage, you can use the statusMessage property, which is a context-aware string that describes the current stage of the generation process, as generated by Tambo.

For example, if the generation was triggered by a user message asking about the weather in Tokyo, during the CHOOSING_COMPONENT stage the statusMessage might be something like "Looking for a component to help with your request about the weather in Tokyo".

Use this along with the isProcessing helper property which returns true if the generationStage is CHOOSING_COMPONENT, FETCHING_CONTEXT, HYDRATING_COMPONENT, or STREAMING_RESPONSE.

const { statusMessage, isProcessing } = useTamboThread();
 
if (isProcessing) {
  return <div>{statusMessage}</div>;
}