Interceptors

Message transactions can be intercepted to change their contents or execute other code.

requestInterceptor

• Type: (RequestDetails) => RequestDetails | {error: string}

Triggered before a user message is sent out. This method MUST either return a RequestDetails object or an object that contains an error property to cancel the request.

Video demo

Example

Console:

>

Sync

chatElementRef.requestInterceptor = (requestDetails) => {
  console.log(requestDetails); // printed above
  requestDetails.body = {prompt: requestDetails.body.messages[0].text}; // custom body
  return requestDetails;
};

Async

// Async function
chatElementRef.requestInterceptor = async (requestDetails) => {
  console.log(requestDetails); // printed above
  const otherTask = await fetch('http://localhost:8080/other-task');
  if (!otherTask.ok) {
    return {error: 'Error in other task'};
  }
  return requestDetails;
};

// Promise function - use resolve() for both success and error responses
chatElementRef.requestInterceptor = (requestDetails) => {
  return new Promise((resolve) => {
    console.log(requestDetails); // printed above
    fetch('http://localhost:8080/other-task').then((otherTask) => {
      if (!otherTask.ok) {
        return resolve({error: 'Error in other task'});
      }
      resolve(requestDetails);
    });
  });
};

RequestDetails

• Type: {body: any, headers: {[key: string]: string}}

body is the outgoing requests's message contents.
headers is the outgoing requests's header contents.

responseInterceptor

• Type: (response: any) => determined

Triggered when a message has been received from the target service. The types for the return argument is determined by the connection variety used:

• If you are connecting to a server via the connect property - the type will be Response.
• If you are connecting via the directConnection property - the type will be defined by the chosen service API.

Video demo

Example

Console:

>

Sync

chatElementRef.responseInterceptor = (response) => {
  console.log(response); // printed above
  return response;
};

Async

// Async function
chatElementRef.responseInterceptor = async (response) => {
  console.log(response); // printed above
  const otherTask = await fetch('http://localhost:8080/other-task');
  if (!otherTask.ok) {
    return {error: 'Error in other task'};
  }
  return response;
};

// Promise function - use resolve() for both success and error responses
chatElementRef.responseInterceptor = (response) => {
  return new Promise((resolve) => {
    console.log(response); // printed above
    fetch('http://localhost:8080/other-task').then((result) => {
      if (!result.ok) {
        return resolve({error: 'Error in other task'});
      }
      resolve(response);
    });
  });
};

validateInput

• Type: (text?: string, files?: File[]) => boolean

Triggered when the user changes input text or files that are going to be sent to the target service.
The method must return a boolean value with either true or false for whether the input contents are valid.

Example

Code

chatElementRef.validateInput = (text, files) => {
  return text || files.length > 0;
};