The JavaScript code for the Custom component is:
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);
}
});
The script automatically gets the current user's name to greet them.
The getContent() method is only available for topic templates.
The HTML content for the Custom component is:
<ft-button icon="admin_theme" id="fetchContentButton" outlined >Summarize this topic</ft-button>
<div class="ai">
<p class="content">Go ahead. Click. 👆</p>
</div>
The CSS code for the Custom component is:
.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;
}