Create a Dynamic Carousel using Zendesk Help Center Articles

 
export default async function main(args) {
  // Retrieve input variables: searchQuery, userEmail, and apiKey
  const { searchQuery, userEmail, apiKey } = args.inputVars;

    // Custom function for base64 encoding
  function base64Encode(str) {
    const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
    let output = '';

    for (let i = 0; i < str.length; i += 3) {
      const byte1 = str.charCodeAt(i) & 0xFF;
      const byte2 = i + 1 < str.length ? str.charCodeAt(i + 1) & 0xFF : 0;
      const byte3 = i + 2 < str.length ? str.charCodeAt(i + 2) & 0xFF : 0;

      const enc1 = byte1 >> 2;
      const enc2 = ((byte1 & 0x3) << 4) | (byte2 >> 4);
      const enc3 = ((byte2 & 0xF) << 2) | (byte3 >> 6);
      const enc4 = byte3 & 0x3F;

      if (isNaN(byte2)) {
        output += charSet.charAt(enc1) + charSet.charAt(enc2) + '==';
      } else if (isNaN(byte3)) {
        output += charSet.charAt(enc1) + charSet.charAt(enc2) + charSet.charAt(enc3) + '=';
      } else {
        output += charSet.charAt(enc1) + charSet.charAt(enc2) + charSet.charAt(enc3) + charSet.charAt(enc4);
      }
    }

    return output;
  }

  // Construct the credentials string and encode it using the custom base64Encode function
  const encodedCredentials = base64Encode(`${userEmail}/token:${apiKey}`);

  // Set up the headers with the encoded credentials
  const headers = {
    'Accept': 'application/json',
    'Authorization': `Basic ${encodedCredentials}`
  };

  // The URL for the API endpoint with the search query
  const url = `https://voiceflow.zendesk.com/api/v2/help_center/articles/search?query=${encodeURIComponent(searchQuery)}`;

  // Make the GET request to the API endpoint
  const response = await fetch(url, { method: 'GET', headers: headers });

  // Accessing the response body using Voiceflow's fetch API
  const responseBody = response.json;

  // Create cards for the carousel, limited to 3 articles
  const cards = responseBody.results.slice(0, 3).map(article => ({
    imageUrl: "https://yourimageurl.com/image.png", // Placeholder image URL
    title: article.title,
    description: {
      text: "Click to read more" // Placeholder description
    },
    buttons: [{
      name: "Read Article",
      payload: {
        actions: [{
          type: "open_url",
          url: article.html_url
        }]
      }
    }]
  }));

  return {
    next: {
      path: 'success'
    },
    trace: [{
      type: "carousel",
      payload: {
        cards: cards
      }
    }]
  };
}