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);
    });
  });
};

loadHistory

• Type: (index: number) => HistoryMessage[] | Promise<HistoryMessage[]>

This method accepts an array of messages (optionally async) that are used to populate the chat.
It is triggered when the component is first rendered, however if the last value in the returned array is false, it is also triggered when the user scrolls to the top of the chat which will prepend the new loaded messages.
The index parameter is used to indicate the amount of times this method has been triggered to help load correct messages for pagination.

Example: Refresh Browser if already loaded (5s)

Code

chatElementRef.loadHistory = (index) => {
  return [
    {text: "AI, help! My code's broken.", role: 'user'},
    {text: 'Did you forget the brackets?', role: 'ai'},
    {text: 'I didn’t! It’s something else!', role: 'user'},
    {text: 'Try reinstalling your OS.', role: 'ai'},
    {text: 'I’m not doing that again!', role: 'user'},
    {text: 'Have you tried yelling at it?', role: 'ai'},
    {text: 'What? That’s ridiculous!', role: 'user'},
    {text: 'It works in movies, right?', role: 'ai'},
    false,
  ];
};

HistoryMessage

• Type: MessageContent | false

tip

Use to style the loading spinner.

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;
};