Azure Bot Framework - Wrap card action and button text - node.js

I’m having an issue where buttons and actions in hero and adaptive cards won’t wrap text. I have searched the internet and everyone is mentioning a webchat.js and botchat.js files that can be adjusted to fix this. I can’t seem to find those in my code. Has the name changed? I know botchat was changed to webchat. Would anyone happen to know where to fix this in the Basic Bot NodeJS implementation SDK V4?

Assuming you are using webchat, you could use plain css. This worked for me:
.ac-pushButton > div {
white-space: normal !important;
}

I was able to find an answer in node_modules > wordwrap. There is a function that you can call in there to wrap any text you'd like. Thank you #Hessel for the help.
var wrap = require('wordwrap')(70);
return CardFactory.heroCard(
'',
answer,
CardFactory.images([]),
CardFactory.actions([
{
type: 'postBack',
title: wrap(YOUR_TEXT),
value: YOUR_VALUE
}
])
);

Related

Weird rendering of the album-art-image in custom receiver

I've developed a custom receiver which works very nicely, however the rendering of the graphic on the album art image looks weird. I've also tried the "styled media receiver", just to be sure that I haven't screwed anything up - same result.
Anyone else seen this (check the image below)? The channel logo is a transparent PNG.
Screenshot of bug
let shadowRootElement = document.querySelector( 'cast-media-player' ).shadowRoot;
let style = document.createElement( 'style' );
style.innerHTML = '#castMetadataImage { background-image: none !important; }';
shadowRootElement.appendChild( style )
Run this right after the player has been initizied and it should fix the issue.
Please share your code. It's difficult to know without any code to review. Did you follow the official guide on https://developers.google.com/cast/docs/caf_receiver/customize_ui for receivers applications? Also you need to check your sender application.
The issue seems to be related to the cssText property - removing this, fixes the rendering issue:
var fixDoubleLogoBug = function(){
try {
document.querySelector("#player")
.shadowRoot
.querySelector("#castMetadataImage").style.cssText = "";
}catch(e){
console.warn("Could not remove logo");
}
}

How to send a gif image in bot framework without using sourceEvent

I am trying to send a GIF image using the bot framework across all platforms. I dont want to use sourceEvent to send custom GIFS across each platform separately. My current code looks as shown below
Hi, first of all , thanks for the fabulous effort in maintaining this library. I want to send a GIF across all channels and read about AnimationCard in the documentation repo
My code looks like this
function onMessage(session) {
var msg = new builder.Message(session).addAttachment(createAnimationCard(session, 'title', 'subtitle', 'text'));
session.send(msg);
}
function createAnimationCard(session, title, subtitle, text) {
return new builder.AnimationCard(session)
.title(title)
.subtitle(subtitle)
.text(text)
.media([
new builder.MediaUrl()
.profile('GIF test')
.url('http://media2.giphy.com/media/FiGiRei2ICzzG/giphy.gif')
])
}
How I get this error saying
TypeError: builder.AnimationCard is not a constructor
at createAnimationCard (D:\bots\fastrivia\index.js:65:12)
at Array.onMessage (D:\bots\fastrivia\index.js:60:58)
at SimpleDialog.waterfallAction [as fn] (D:\bots\fastrivia\node_modules\botbuilder\lib\dialogs\DialogAction.js:131:25)
at SimpleDialog.begin (D:\bots\fastrivia\node_modules\botbuilder\lib\dialogs\SimpleDialog.js:15:14)
at Session.beginDialog (D:\bots\fastrivia\node_modules\botbuilder\lib\Session.js:180:16)
at routeToDialog (D:\bots\fastrivia\node_modules\botbuilder\lib\Session.js:421:23)
at D:\bots\fastrivia\node_modules\botbuilder\lib\Session.js:449:29
at D:\bots\fastrivia\node_modules\botbuilder\lib\Session.js:505:25
at ActionSet.recognizeAction (D:\bots\fastrivia\node_modules\botbuilder\lib\dialogs\ActionSet.js:44:9)
at D:\bots\fastrivia\node_modules\botbuilder\lib\Session.js:501:43
It seems there is no AnimationCard under cards package in the botframework lib when I checked under node_modules. What is the best way to send a GIF across all platforms on the bot framework?
I believe the problem here is that the bits for using AnimationCard in Node.js are not yet public so I believe you will need to install the pre-release version of BotBuilder:
npm install --save botbuilder#next
your code is perfectly fine, just replace the new builder.MediaUrl() with an object. It's often the case, that structures that as simple as MediaUrl have to be directly initialized and do not have a constructor in the framework.
function createAnimationCard(session, title, subtitle, text) {
return new builder.AnimationCard(session)
.title(title)
.subtitle(subtitle)
.text(text)
.media([{ profile: 'GIF test',
url: 'http://media2.giphy.com/media/FiGiRei2ICzzG/giphy.gif'
}])
}

How can I disable javascript for the page that's being opened?

I was up till 1 am last night trying to find an example of how to do this. My theory is that I'd write a function that would comment out all javascript.
The second option would be to add the url to the list of javascript settings.
Right now my extension is very simple:
function linkOnClick(info, tab) {
window.open(info.linkUrl)
}
chrome.contextMenus.create(
{title: "Load with no Javascript", contexts:["link"], onclick: linkOnClick});
This is my first extension and I'm kind of lost.
edit: let me know if I should also post the manifest.json.
edit: I can't mark this as solved for 2 days (why? who knows.), so I'll probably not remember to mark this as solved. So accept this as the official making: SOLVED.
chrome.contentSettings.javascript.set is the thing that disables javascript.
Here's the part that disables javascript.
(Google, here's what an actual example should look like):
chrome.contentSettings.javascript.set(
{'primaryPattern':AnyDomainName, /*this is a string with the domain*/
'setting': "block", /* block the domain. Can be switched to "allow" */
'scope':'regular'}, /*it's either regular or incognito*/
function(){
/*optional action you want to
take place AFTER something's been blocked'*/
});
Here's the script I used to import into my json script for my chrome extension.
var link=""
var pattern=""
function linkOnClick(info, tab) {
r = /:\/\/(.[^/]+)/;
link=info.linkUrl
pattern="http://"+link.match(r)[1]+"/*"
chrome.contentSettings.javascript.set(
{'primaryPattern':pattern,
'setting': "block",
'scope':'regular'},
function(){
window.open(link)
});
}
chrome.contextMenus.create({title: "Load with no Javascript", contexts:["link"], onclick: linkOnClick});
I couldn't tell how any of this worked by reading the developer.chrome.com page! They really need add complete working examples or allow a way for users to add examples. I can't even use it. The git hub link is what saved me.

Youtube API search auto-complete

I'm using Youtube API, I'd like to have a search auto-complete feature, just like on YouTube, when you type into the search input box, it gives you search suggestions.
I've read the docs, but still missing, Is this possible using the API?
Ok I found this URL:
http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=Query
It isn't part of Youtube API, but still works, returns a JSON response.
For json just add "client" parameter:
http://suggestqueries.google.com/complete/search?client=youtube&ds=yt&client=firefox&q=Query
Above all apis are old and give google search suggestion not youtube search suggestion
Use this:
https://clients1.google.com/complete/search?client=youtube&gs_ri=youtube&ds=yt&q=faded
Extract suggestions using following JS code:
// data is response of above api
const data = 'window.google.ac.h(["faded",[["faded",0,[433]],["faded alan walker lyrics",0,[433]],["faded remix",0,[433]],["faded 8d",0,[433]],["faded piano",0,[433]],["faded wheel free fire",0],["faded karaoke",0,[433]],["faded ringtone",0,[433]],["faded instrumental",0,[433]],["faded live",0,[433]],["faded piano tutorial",0,[433]],["faded whatsapp status",0,[433]],["faded dhol cover",0,[433]],["faded dance",0,[433]]],{"k":1,"q":"_sPyvXmmbfcsVtfP4sgjOdKQAvg"}])';
const searchSuggestions = [];
data.split('[').forEach((ele, index) => {
if (!ele.split('"')[1] || index === 1) return;
return searchSuggestions.push(ele.split('"')[1]);
});
console.log(searchSuggestions);
Check Out YouTube AutoComplete Keyword Scraper . Not really sure of the context the person asking the question wants YouTube auto complete solution for but I thought I would throw this out there.
Also you can use JSON:
url: "https://suggestqueries.google.com/complete/search?client=youtube&ds=yt&q=" + i,
dataType: "jsonp",
The official one:
https://suggestqueries-clients6.youtube.com/complete/search?client=youtube-reduced&hl=en&gs_ri=youtube-reduced&ds=yt&cp=3&gs_id=100&q=Nectar&xhr=t&xssi=t&gl=us
You can choose country too.
P.S. I searched for Nectar in country US

Setting id dynamically in jade / id interpolation

I've tried all the permutations I can think of but alas with no success.
I am trying to set an id dynamically in a jade template.
#{page.name}(data-role= 'page', data-theme= 'c', data-url='#{"#"+page.name}')
I wondering if it's actually possible.
Anyone know how to do this?
If some one knows, please help me out - before all my hair falls out :(
For anyone looking for the answer to this:
Answered kindly by TJ the developer of express.
div(id=myPassedId),
div##{myPassedID}( isn't supported because it would be super ugly
The suggestions here did not work in my scenario...
The format that worked for me:
x-task-id!="<%= id %>"
Ugly, but functional.
Nowadays you can also use a template literal:
- const page = { name: 'foo' }
#{page.name}(data-role="page" data-theme="c" data-url=`#${page.name}`)
Output (using Pug 2.0.4):
<foo data-role="page" data-theme="c" data-url="#foo"></foo>

Resources