Source code - Fluid Topics - Latest

The following example relies on:

• The topic.getContent() JavaScript method.
• The User variable web service (contains information about the current user).

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <ft-button icon="admin_theme" id="fetchContentButton" outlined>Summarize this topic</ft-button>
   
   <div class="ai">
     <p class="content">Go ahead. Click. 👆</p>
   </div>
   

2. In the CSS panel, copy and paste the following:

   .ai {
     height: 58vh;
     padding: 15px;
   }
   
   ft-button {
     padding-top: 15px;
     padding-left: 15px;
   }
   
   .content {
     color: #fff;
     white-space: normal;
     position: relative;
     font-family: var(--font1);
     font-size: 18px;
     line-height: 24px;
     width: 50%;
     background: var(--ft-color-primary);
     border-radius: 40px;
     padding: 24px;
   }
   
   .content:before {
     content: "";
     width: 0px;
     height: 0px;
     position: absolute;
     border-left: 24px solid var(--ft-color-primary);
     border-right: 12px solid transparent;
     border-top: 12px solid var(--ft-color-primary);
     border-bottom: 20px solid transparent;
     left: 32px;
     bottom: -24px;
   }
   

3. In the JS panel, copy and paste the following:

   async function getTopicContent() {
     try {
       const content = await topic.getContent();
       return content;
     } catch (error) {
       console.error("Error fetching topic content:", error);
       return null;
     }
   }
   
   document.getElementById('fetchContentButton').addEventListener('click', async () => {
     try {
       const content = await getTopicContent();
       const username = user.profile.displayName;
       const genId = await FluidTopicsGenerativeAIService.generate({
         profileId: "summarize",
         parameters: {
           topic: content,
           name: username
         },
         contentElement: document.querySelector(".content"),
       });
     } catch (error) {
       console.error("Error occurred:", error);
     }
   });
   

4. Replace the profileId value by a valid completion profile ID.

5. Save the component.

6. Save and publish the page.