I have a step in my dialog where I send an Adaptive Card with a choice set. When the user selects a choice on the card and presses submit, how would I capture that value and continue with my dialog?
If there isn't an official way to do this, any suggestions about some hacks would be nice. Thanks ahead of time!
Here is my dialog class:
import { AdaptiveCards } from "#microsoft/adaptivecards-tools";
import {
ActivityPrompt,
ChoicePrompt,
ComponentDialog,
Dialog,
DialogSet,
DialogTurnStatus,
TextPrompt,
WaterfallDialog,
WaterfallStepContext,
} from "botbuilder-dialogs";
import { TicketProfile } from "../TicketProfile";
import rawCategoryListCard from "../adaptiveCards/categoryList.json";
import { ActivityTypes, CardFactory, MessageFactory } from "botbuilder";
const CHOICE_PROMPT = "CHOICE_PROMPT";
const HELP_PROMPT = "HELP_PROMPT";
const SUBJECT_PROMPT = "SUBJECT_PROMPT";
const CATEGORY_PROMPT = "CATEGORY_PROMPT";
const AREA_PATH_PROMPT = "AREA_PATH_PROMPT";
const REPORTED_PROBLEM_PROMPT = "REPORTED_PROBLEM_PROMPT";
const WATERFALL_DIALOG = "WATERFALL_DIALOG";
const CONFIRM_PROMPT = "CONFIRM_PROMPT";
export class TicketingPreferences extends ComponentDialog {
ticketProfile: any;
constructor(userState?: any) {
super("TicketingPreferences");
this.ticketProfile = userState.createProperty("TicketProfile");
this.addDialog(new ChoicePrompt(CHOICE_PROMPT));
this.addDialog(new TextPrompt(SUBJECT_PROMPT));
this.addDialog(new ActivityPrompt(CATEGORY_PROMPT, this.inputValidator));
this.addDialog(new TextPrompt(AREA_PATH_PROMPT));
this.addDialog(new TextPrompt(REPORTED_PROBLEM_PROMPT));
this.addDialog(
new WaterfallDialog(WATERFALL_DIALOG, [
this.choiceStep.bind(this),
this.subjectStep.bind(this),
this.categoryStep.bind(this),
this.areaPathStep.bind(this),
this.reportedProblemStep.bind(this),
this.summaryStep.bind(this),
])
);
this.initialDialogId = WATERFALL_DIALOG;
}
async run(turnContext, accessor) {
const dialogSet = new DialogSet(accessor);
dialogSet.add(this);
const dialogContext = await dialogSet.createContext(turnContext);
const results = await dialogContext.continueDialog();
if (results.status === DialogTurnStatus.empty) {
await dialogContext.beginDialog(this.id);
}
}
async choiceStep(stepContext: WaterfallStepContext) {
return await stepContext.prompt(CHOICE_PROMPT, {
prompt: "How can I help you?",
choices: ["Create Ticket", "Update Ticket", "Delete Ticket"],
});
}
async subjectStep(stepContext: any) {
stepContext.values.choice = stepContext.result.value;
return await stepContext.prompt(
SUBJECT_PROMPT,
"What is the ticket title?"
);
}
async categoryStep(stepContext: any) {
stepContext.values.subject = stepContext.result;
const exampleCatgory = {
category: [
{
title: "Category 1",
},
{
title: "Category 2",
},
{
title: "Category 3",
},
],
};
const card =
AdaptiveCards.declare(rawCategoryListCard).render(exampleCatgory);
const form = MessageFactory.attachment(CardFactory.adaptiveCard(card));
return await stepContext.prompt(CATEGORY_PROMPT, { prompt: form });
}
async areaPathStep(stepContext: any) {
if (stepContext.result) {
stepContext.values.category = stepContext.result;
return await stepContext.prompt(
AREA_PATH_PROMPT,
"What is the area path of your ticket?"
);
}
}
async inputValidator(promptContext) {
const userInputObject = promptContext.recognized.value.value;
return true;
}
}
Related
I am using web viewer and want to rotate individual pages and update them in the database.
Right now I am able to rotate the whole pdf only.
I am following this doc https://www.pdftron.com/documentation/web/guides/manipulation/rotate/
but not able to understand much
export default function PdfTron(props: any): ReactElement {
const viewer = useRef<HTMLDivElement>(null);
const {DrawingLibDetailsState, DrawingLibDetailsDispatch}: any = useContext(DrawingLibDetailsContext);
const [newInstance, setNewInstance] = useState<any>(null);
const [currentPage, setCurrentPage] = useState<any>(null);
const {dispatch, state }:any = useContext(stateContext);
//console.log("currentPage in state",currentPage)
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
licenseKey: process.env["REACT_APP_PDFTRON_LICENSE_KEY"],
initialDoc: '',
filename: 'drawings',
extension: "pdf",
isReadOnly: true,
fullAPI: true,
disabledElements: [
// 'leftPanelButton',
// // 'selectToolButton',
// 'stickyToolButton',
// 'toggleNotesButton',
]
},
viewer.current as HTMLDivElement,
).then((instance: any) => {
setNewInstance(instance)
// you can now call WebViewer APIs here...
});
}, []);
useEffect(() => {
if(DrawingLibDetailsState?.parsedFileUrl?.url && newInstance ){
const s3Key = DrawingLibDetailsState?.parsedFileUrl?.s3Key;
const pageNum = s3Key.split('/')[s3Key.split('/').length-1].split('.')[0];
const fileName = DrawingLibDetailsState?.drawingLibDetails[0]?.fileName?.replace(".pdf", "");
const downloadingFileName = `page${pageNum}_${fileName}`;
newInstance.loadDocument(DrawingLibDetailsState?.parsedFileUrl?.url, {extension: "pdf",
filename: downloadingFileName ? downloadingFileName : 'drawing',})
const { documentViewer } = newInstance.Core;
const pageRotation = newInstance.Core.PageRotation;
const clickDocument =newInstance.Core.DocumentViewer.Click;
const pageNumber = newInstance.Core.pageNum;
//get page rotation from the PDF
documentViewer.addEventListener('rotationUpdated', (rotation: number) => {
updateRotation(rotation)
})
// trigger an event after the document loaded
documentViewer.addEventListener('documentLoaded', async() => {
const doc = documentViewer.getDocument();
const rotation = DrawingLibDetailsState?.drawingLibDetails[0]?.sheetsReviewed?.pdfRotation ?
DrawingLibDetailsState?.drawingLibDetails[0]?.sheetsReviewed?.pdfRotation : 0
documentViewer.setRotation(rotation)
})
documentViewer.on('pageNumberUpdated', () => {
DrawingLibDetailsDispatch(setDrawingPageNumber(0));
})
}
}, [DrawingLibDetailsState?.parsedFileUrl?.url, newInstance]);
useEffect(() => {
if(DrawingLibDetailsState?.drawingPageNum && newInstance ){
const { documentViewer, PDFNet } = newInstance.Core;
PDFNet.initialize()
documentViewer.addEventListener('documentLoaded',async () => {
await PDFNet.initialize()
const pdfDoc = documentViewer.getDocument();
const doc = await pdfDoc.getPDFDoc();
newInstance.UI.pageManipulationOverlay.add([
{
type: 'customPageOperation',
header: 'Custom options',
dataElement: 'customPageOperations',
operations: [
{
title: 'Alert me',
img: '/path-to-image',
onClick: (selectedPageNumbers:any) => {
alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
},
dataElement: 'customPageOperationButton',
},
],
},
{ type: 'divider' },
]);
documentViewer.setCurrentPage(DrawingLibDetailsState?.drawingPageNum, true);
});
documentViewer.setCurrentPage(DrawingLibDetailsState?.drawingPageNum, true);
}
}, [DrawingLibDetailsState?.drawingPageNum]);
useEffect(() => {
if(props?.drawingSheetsDetails?.fileSize){
fetchSheetUrl(props?.drawingSheetsDetails)
}
}, [props?.drawingSheetsDetails]);
const fetchSheetUrl = (file: any) => {
const payload = [{
fileName: file.fileName,
key: file.sourceKey,
expiresIn: 100000000,
// processed: true
}];
getSheetUrl(payload);
}
const getSheetUrl = async (payload: any) => {
try {
dispatch(setIsLoading(true));
const fileUploadResponse = await postApi('V1/S3/downloadLink', payload);
if(fileUploadResponse.success){
const fileData = {
s3Key: payload[0].key,
url: fileUploadResponse.success[0].url
}
DrawingLibDetailsDispatch(setParsedFileUrl(fileData));
}
dispatch(setIsLoading(false));
} catch (error) {
Notification.sendNotification(error, AlertTypes.warn);
dispatch(setIsLoading(false));
}
}
const updateRotation = (rotation: number) => {
props.updateRotation(rotation)
}
return (
<>
<div className="webviewer" ref={viewer}></div>
</>
)
}
In WebViewer 8.0 you would need to enable the left panel by default when the document is loaded, and then use event delegation on left panel to watch for button clicks on the single page rotation buttons.
const { documentViewer } = instance.Core
documentViewer.addEventListener('documentLoaded',()=>{
let panelElement = instance.docViewer.getScrollViewElement().closest('#app').querySelector('[data-element="thumbnailsPanel"]');
if (!parentElement) {
instance.UI.toggleElementVisibility('leftPanel');
panelElement = instance.docViewer.getScrollViewElement().closest('#app').querySelector('[data-element="thumbnailsPanel"]');
}
panelElement.addEventListener('click', (e) => {
if (e.target.dataset?.element === 'thumbRotateClockwise' || e.target.dataset?.element === 'thumbRotateCounterClockwise') {
// The single page rotations are performed asychronously and there are no events firings in 8.0, so we have to manually add a delay before the page finishes rotating itself.
setTimeout(() => {
const pageNumber = parseInt(e.target.parentElement.previousSibling.textContent);
const rotation = instance.docViewer.getDocument().getPageRotation(pageNumber);
console.log('page ', pageNumber, ' self rotation is ', rotation);
}, 500);
}
});
})
If you have the option to upgrade to the latest WebViewer, you can listen to the ‘pagesUpdated’ event on documentViewer and the code becomes shorter & cleaner:
const { documentViewer } = instance.Core
documentViewer.addEventListener('pagesUpdated',(changes)=>{
changes.contentChanged.forEach(pageNumber=>{
const rotation = documentViewer.getDocument().getPageRotation(pageNumber)
console.log('page ', pageNumber, ' self rotation is ', rotation);
})
})
For both situations, when you load the document back, you can use documentViewer.getDocument().rotatePages to rotate to your saved rotations.
assuming we have the saved page rotations data structured like this
const rotationData = [
{pageNumber: 1, rotation: 180},
{pageNumber: 3, rotation: 90},
{pageNumber: 4, rotation: 270},
]
We can use the following code to rotate our individual pages back:
const { documentViewer } = instance.Core
documentViewer.addEventListener('documentLoaded',()=>{
rotationData.forEach(page=>{
const originalRotation = documentViewer.getDocument().getPageRotation(page.pageNumber)
if (originalRotation !== page.rotation) {
documentViewer.getDocument().rotatePages([page.pageNumber], (page.rotation-originalRotation)/90);
}
})
})
I have been trying to implement a LIKE system for my social media application with react at client-side and express at server-side. I'm trying to fetch the current LIKE stats using "axios" within a "useEffect". But, the data returned after "GET" request is an empty array instead of actual data. The data is being saved to mongoDB and it could be fetched using "POSTMAN", but cannot be fetched from the client-side. Any fixes?
Like.jsx
// Client-side where LIKE stats are fetched
import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'
export default function Reactions() {
const LIKE = "LIKE"
const { user } = useContext(Context)
const location = useLocation()
const postId = location.pathname.split("/")[2]
const [likes, setLikes] = useState(0)
const [refresh, setRefresh] = useState(false)
useEffect(() => {
const fetchReactions = async () => {
const likeRes = await axios.get(`/reactions/all`, {
data: {
postId,
reactionType: LIKE
}
})
console.log("Like res data", likeRes.data) // The logged array is empty :(
setLikes(likeRes.data.length)
}
fetchReactions()
}, [postId, refresh])
const handleReact = async (reactionType) => {
const newReaction = {
reactionType,
username: user.username,
postId,
}
try {
const res = await axios.post("/reactions", newReaction)
console.log(res.data) // The logged object has data :)
setRefresh(!refresh)
} catch(err) {
console.log(err)
}
}
Like.js
// Reaction model at server-side
const mongoose = require("mongoose")
const ReactionSchema = new mongoose.Schema(
{
reactionType: {
type: String,
required: true,
},
username: {
type: String,
required: true,
},
postId: {
type: String,
required: true,
}
},
{
timestamps: true,
}
)
module.exports = mongoose.model("Reaction", ReactionSchema)
likes.js
// API for creating and fetching LIKES
const router = require("express").Router()
const Reaction = require("../models/Reaction")
// CREATE REACTION
router.post("/", async (req, res) => {
const newReaction = new Reaction(req.body)
try {
const savedReaction = await newReaction.save()
res.status(200).json(savedReaction)
} catch(err) {
res.status(500).json(err)
}
})
// GET REACTIONS OF A POST
router.get("/all", async (req, res) => {
try {
const reactions = await Reaction.find({
postId: req.body.postId,
reactionType: req.body.reactionType,
})
res.status(200).json(reactions)
} catch(err) {
res.status(500).json(err)
}
})
module.exports = router
Thanks to #cmgchess for making me think about my approach of making a "GET" request with request body.
I changed the body parameters to query parameters and it did WORK :)
changed Like.jsx
// Client-side where LIKE stats are fetched
import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'
export default function Reactions() {
const LIKE = "LIKE"
const { user } = useContext(Context)
const location = useLocation()
const postId = location.pathname.split("/")[2]
const [likes, setLikes] = useState(0)
const [refresh, setRefresh] = useState(false)
useEffect(() => {
const fetchReactions = async () => {
// ---- DIFF OPEN ----
const search = `?postId=${postId}&reactionType=${LIKE}`
const likeRes = await axios.get(`/reactions${search}`)
// ---- DIFF CLOSE ----
console.log("Like res data", likeRes.data) // The logged array has data :)
setLikes(likeRes.data.length)
}
fetchReactions()
}, [postId, refresh])
const handleReact = async (reactionType) => {
const newReaction = {
reactionType,
username: user.username,
postId,
}
try {
const res = await axios.post("/reactions", newReaction)
console.log(res.data) // The logged object has data :)
setRefresh(!refresh)
} catch(err) {
console.log(err)
}
}
changed likes.js
// API for creating and fetching LIKES
const router = require("express").Router()
const Reaction = require("../models/Reaction")
// CREATE REACTION
router.post("/", async (req, res) => {
const newReaction = new Reaction(req.body)
try {
const savedReaction = await newReaction.save()
res.status(200).json(savedReaction)
} catch(err) {
res.status(500).json(err)
}
})
// GET REACTIONS OF A POST
// --- DIFF OPEN ---
router.get("/", async (req, res) => {
const postId = req.query.postId
const reactionType = req.query.reactionType
try {
const reactions = await Reaction.find({
postId,
reactionType
})
// --- DIFF CLOSE ---
res.status(200).json(reactions)
} catch(err) {
res.status(500).json(err)
}
})
module.exports = router
I want to validate the data by checking if it is identified as an entity(lets say randomEntity) by Luis or not. If the data entered is recognized as randomEntity, then move ahead, otherwise use retry prompt.
But this does not work using promptContext-
const luisResult = await this.luisRecognizer.recognize(promptContext.context);
This is sample code-
class MainDialog extends ComponentDialog {
constructor(userState) {
super(MAIN_DIALOG);
this.userState = userState;
this.addDialog(new TextPrompt('firstPrompt', this.firstStepValidator));
this.addDialog(new WaterfallDialog(WATERFALL_DIALOG, [
this.firstStep.bind(this),
]));
this.initialDialogId = WATERFALL_DIALOG;
let luisConfig = {
applicationId: 'myid',
endpointKey: 'myendpointkey',
endpoint: 'myendpoint',
};
this.luisRecognizer = new LuisRecognizer(
luisConfig,
{
includeAllIntents: true,
log: true,
staging: false
},
true
);
}
/**
* The run method handles the incoming activity (in the form of a TurnContext) and passes it through the dialog system.
* If no dialog is active, it will start the default dialog.
* #param {*} turnContext
* #param {*} accessor
*/
async run(turnContext, accessor) {
const dialogSet = new DialogSet(accessor);
dialogSet.add(this);
const dialogContext = await dialogSet.createContext(turnContext);
const results = await dialogContext.continueDialog();
if (results.status === DialogTurnStatus.empty) {
await dialogContext.beginDialog(this.id);
}
}
async firstStep(stepContext) {
const promptOptions = {
prompt: 'Please enter xyz id',
retryPrompt: 'Please enter a valid xyz id' };
return await stepContext.prompt('firstPrompt', promptOptions);
}
async firstStepValidator(promptContext) {
const luisResult = await this.luisRecognizer.recognize(promptContext.context); //THROWS ERROR: TypeError: Cannot read property 'recognize' of undefined
//do something with result
}
Using Azure Bot Framework and LUIS.ai to recognize user intent. Performing a get request to the endpoint with the text returns the json object I am expecting, however using the built-in Luis Recognizer I receive the following error: 'Cannot read property 'get' of undefined'. From the documentation here: https://learn.microsoft.com/en-us/azure/cognitive-services/luis/luis-nodejs-tutorial-bf-v4 this appears to be the proper configuration so I am not sure what is going awry. Any ideas?
const { ComponentDialog, DialogSet, DialogTurnStatus, WaterfallDialog, ChoicePrompt, TextPrompt } = require('botbuilder-dialogs');
const { TopLevelDialog, TOP_LEVEL_DIALOG } = require('./topLevelDialog');
const { LuisRecognizer, QnAMaker } = require('botbuilder-ai');
const axios = require('axios');
const MAIN_DIALOG = 'MAIN_DIALOG';
const WATERFALL_DIALOG = 'WATERFALL_DIALOG';
const USER_PROFILE_PROPERTY = 'USER_PROFILE_PROPERTY';
const CHOICE_PROMPT = 'CHOICE_PROMPT';
const TEXT_PROMPT = 'TEXT_PROMPT';
class MainDialog extends ComponentDialog {
constructor(userState) {
super(MAIN_DIALOG);
this.userState = userState;
this.userProfileAccessor = userState.createProperty(USER_PROFILE_PROPERTY);
this.addDialog(new TextPrompt(TEXT_PROMPT));
this.addDialog(new TopLevelDialog());
this.addDialog(new WaterfallDialog(WATERFALL_DIALOG, [
this.initialStep.bind(this),
this.askIfFinishedStep.bind(this),
this.finalStep.bind(this)
]));
this.initialDialogId = WATERFALL_DIALOG;
let luisConfig = {
applicationId: '',
endpointKey: '',
endpoint: '',
};
this.Luis = new LuisRecognizer(
luisConfig,
{
includeAllIntents: true,
log: true,
staging: false
},
true
);
}
async run(turnContext, accessor) {
const dialogSet = new DialogSet(accessor);
dialogSet.add(this);
const dialogContext = await dialogSet.createContext(turnContext);
const results = await dialogContext.continueDialog();
if (results.status === DialogTurnStatus.empty) {
await dialogContext.beginDialog(this.id);
}
}
async initialStep(stepContext) {
let luisAnalysis = await this.Luis.recognize(stepContext);
let queryString = encodeURIComponent(stepContext.context._activity.text);
/*
Ignore this if statement - only in use with the get request
*/
if(luisResponse.data.topScoringIntent.intent === 'TrainingExpiry' && luisResponse.data.topScoringIntent.score > .75)
{
return await stepContext.beginDialog(TOP_LEVEL_DIALOG);
}
else
{
await stepContext.context.sendActivity("I'm sorry, that is not supported at this time or a high enough intent was not acknowledged.");
await stepContext.context.sendActivity("Top intent: " + luisResponse.data.topScoringIntent.intent + " Score: " + luisResponse.data.topScoringIntent.score);
return await stepContext.next();
}
}
async askIfFinishedStep(stepContext) {
const promptOptions = { prompt: 'Is there anything else I can assist you with?' };
return await stepContext.prompt(TEXT_PROMPT, promptOptions);
}
async finalStep(stepContext) {
if(stepContext.context._activity.text.toLowerCase() === 'no')
{
await stepContext.context.sendActivity("Good bye");
return await stepContext.endDialog();
}
else
{
return await stepContext.beginDialog(MAIN_DIALOG);
}
}
}
module.exports.MainDialog = MainDialog;
module.exports.MAIN_DIALOG = MAIN_DIALOG;
Note: The issue was in my parameter being passed to the recognizer, as #billoverton pointed out. The solution is to pass stepContext.context.
Looking at luisRecognizer.js from the botbuilder-ai module, the error is because the recognizer is expecting a turnContext (with turnState property) and you are sending a stepContext. turnState doesn't exist on stepContext, thus the get property is failing and causing your error. If you send stepContext.context instead, that will fix the issue, i.e. let luisAnalysis = await this.Luis.recognize(stepContext.context);
I create chatbot by Bot Framework and use LINE API Developers on node.js
Problem on my work was continueDialog not continue waterfallDialog next step.
and the stack didn't change when it's done with continueDialog
before continueDialog
stack1 [ { id: 'xxxDialog',
state: { options: {}, values: [Object], stepIndex: 0 } } ]
after continueDialog
stack2 [ { id: 'xxxDialog',
state: { options: {}, values: [Object], stepIndex: 0 } } ]
on index.js
server.post('/api/line',jsonParser, async (req, res)=> {
const conversationReference = {
type: "message",
text: "Hello world" ,
channelData: { clientActivityID: "id-xxxx" },
channelId: 'api/line/id-xxxx',
recipient:
{ id: lineID`,
name: 'line',
role: 'botLine' },
serviceUrl: 'https://localhost:3978' ,
from:
{ id: lineId`,
name: 'User',
role: 'user' },
conversation: { id: lineId },
};
const context = await adapter.createContext(conversationReference);
await bot.onTurn(context);
});
on bot.js
class Bot extends ActivityHandler {
/**
*
* #param {ConversationState} conversationState
* #param {UserState} userState
* #param {Dialog} dialog
*/
constructor(conversationState, userState) {
super();
this.conversationState = conversationState;
this.userState = userState;
this.dialogStateAccessor = conversationState.createProperty('dialogStateAccessor');
this.dialogAccessor= conversationState.createProperty('testAccessor');
this.dialog = new DialogSet(this.dialogStateAccessor);
this.dialog.add(new WaterfallDialog('testDialog', [
this.step1.bind(this),
this.step2.bind(this)
]));
}
async step1(stepContext){
linesent("step 1") ;
return {status : DialogTurnStatus.waiting} ;
}
async step2(stepContext){
linesent("step 2") ;
return await stepContext.endDialog();
}
async onTurn(turnContext) {
const reservation = await this.dialogAccessor.get(turnContext, null);
// Generate a dialog context for our dialog set.
const dc = await this.dialog.createContext(turnContext);
if (!dc.activeDialog){
// If there is no active dialog, check whether we have a reservation yet.
if (!reservation) {
// If not, start the dialog.
await dc.beginDialog(`testDialog`);
}
}
else {
//Continue the dialog.
const dialogTurnResult = await dc.continueDialog();
}
return await this.conversationState.saveChanges(turnContext, false);
}
but it did not show any error.
Any help would be appreciated.
found the continueDialog method be
async continueDialog(dc) {
// Don't do anything for non-message activities
if (dc.context.activity.type !== botbuilder_core_1.ActivityTypes.Message) {
return dialog_1.Dialog.EndOfTurn;
}
// Run next step with the message text as the result.
return await this.resumeDialog(dc, dialog_1.DialogReason.continueCalled, dc.context.activity.text);
}
the bot always do if condition.
Changed continueDialog to resumeDialog on your activeDialog id the waterfall will working on next step.