I added suggestedActions to chatbot. But it displays all options in Horizontal and it is not showing full texts.
Below the code
var msg = new builder.Message(session)
.text("What would you like assistance with?")
.suggestedActions(
builder.SuggestedActions.create(
session, [
builder.CardAction.imBack(session, "Texas Workforce Commission", "1. Texas Workforce Commission"),
builder.CardAction.imBack(session, "Jobs Y’all", "2. Jobs Y’all")
]
));
session.send(msg);
Attached the screenshot.
Output
Questions:
Right now the options are displaying horizontally. I need to display the options vertically. How do i do that?
And the first option in the list is truncated automatically. How should i display all options so they are not truncated?
No, there is no way to do this in your code. This is a problem of how the cards you send are rendered by each channels and i think for most of the channels there isn't a way neither.
But if you use WebChat then the answer could by yes. It depends on your React/JavaScript skills. WebChat is a React app which is compiled to javascript and bundled to one botchat.js. In this case you have two options:
Modify the React code which will produce a modified botchat.js
Modify the final botchat.js
I myself ended up modifying the react code and this is the only option i can recommend to you. It may take you some time but in the end it's worth it.
Related
I have a hero with multiple images, I want to display images according to screen sizes, for example, if the user is using a big screen, the hero will load the large/wide images, and if he uses a phone, the hero will display a different image that is not wide to fit the screen.
I do not know how to do this with nextjs, there is no way to specify which image to load on a different screen.
I did solve the problem using nextjs's useMediaQuery
{ const mobile = useMediaQuery(theme.breakpoints.down('sm')); }, but the results aren't perfect, because if you use mobile ? [....] : [....] you cannot add 'priority' to the image components, if you try to add it, it will load both images first, then execute the conditional statement to hide one. so you have to sacrifice that.
It seems like Image doesn't support that use case. I found this and it works as expected. https://github.com/vercel/next.js/discussions/32196#discussioncomment-1761938
I'm using the Alexa Node SDK to build my application which is hosted on AWS Lambda. When using an Echo Show (or any display-enabled device), I'd like the screen to update with a full-screen image when Alexa responds with audio.
I'm able to do this with the "Standard Card" -- but the image is very small and appears to the right of the spoken text.
Is there any way to remove the text and display the image full screen?
Sample code:
return handlerInput.responseBuilder
.speak('my text')
.withStandardCard('my title', 'my text', 'https://myimage-sm.jpg', 'https://myimage-lg.jpg')
.reprompt('my title', 'my text')
.addElicitSlotDirective('slotname')
.getResponse();
To be clear, I've also tried adding a template with addRenderTemplateDirective, but this throws an error, as Alexa allows only one directive per slot.
No other directives are allowed to be specified with a Dialog directive. The following Dialog Directives were returned: [Display.RenderTemplate]
You can try my project here which uses APL behind the curtains to render the card wit a full background. BTW, the limitation is not one directive per slot, the limitation is that you can't use any dialog related directive with other directives, for example render template directives or APL directives. So if you're going to do dialog management forget about sending display rendering directives for the time being.
As you can see from the image below, putting two separate 'text response' buttons gives me a two line response.
However, I only get either one of the responses (at random) when I use the Web Demo integration. Either 'Hi, welcome!' or 'How may I help?'
Anyone got any ideas why? Thanks!
Not sure where my image link went... anyway read a few Google forums that said this isn't possible. Solved the problem by just pressing space until it went onto a new line.
When you are in Default responses tab, then it gives two options: Text response, custom payload
You should select Google assistant tab before clicking the add response button. Thus You can see all options about responses.
Am currently working on a uwp project which involves using a carousel that has some sort of grid of pictures that can be swiped by clicking some round navigation buttons. This is also similar to the carousel in Twitter bootstrap. To get a better picture of this, an example is shown below
Rather than different apps on display, different pictures from the user library would be shown. I would like to dynamically display the first 100 pictures from the user's library. I have searched the internet for something similar to this, but the closest I can get is http://blogs.u2u.be/diederik/post/2015/08/23/A-CoverFlow-control-for-the-Universal-Windows-Platform.aspx.
How can I achieve this?
Have you taken a look at the FlipView class?
https://msdn.microsoft.com/library/windows/apps/br242678
Or the CaouselPanel class?
https://msdn.microsoft.com/library/windows/apps/hh967950
and implemented them with a different data template (perhaps a styled gridview) instead of strictly images?
This is the flipview page from the windows dev center:
https://msdn.microsoft.com/windows/uwp/controls-and-patterns/flipview
It should explain the basics of how the itemcontrol works.
Have a look at FlipView. I hope that is what you are looking for.
This may be a bit long, but thank you in advance for any assistance.
I am trying to develop a web app that will allow the user to interact with a wireframe 'drawing' of a chosen product and customize each path with either an uploaded image, color/pattern or add whatever text...or all, if they choose (something similar to customizing a greeting card)...for THIS question, I will start with the image part....
Here is what I have so far: http://jsfiddle.net/rednevednav/C9aDm/
What's the most effective way to able to use any image...one that has been uploaded by the user...to append the fill of a selected path and then be able to drag it around, resize it and rotate BEHIND the selected path (so they can control the part of their image that gets 'cropped'? (*Note: I've searched for months and haven't found anyone else doing this outside of Flash....MyPublisher.com gets really close, but it's all squares and no SVG...I've looked at using ImageMagick and 'dst_in' on the server side...but after hard coding an image into svg...like on my jsfiddle...it seems that this could be done client side)
Should I be using Raphael for this application in the first place? Or?
**Hoping to stay within the Raphael framework (if using at all) in order to maintain the IE support afforded out-of-the-box that it provides; I understand that too much java hacking kills this. Of course, the 'finished' product will need to be downloaded as a .pdf....but that's another question for another time.
EDITED: # Thanks to an answer to my question HERE, I've update my JSFiddle with how to get URL from an uploaded image and use to fill path in Raphael paper. So that leaves 2 questions on this subject that I'm still struggling to resolve:
1. How to use this uploaded image to be able to drag and drop onto path to update fill?
2. How to first select which path I want the uploaded image to fill? (for when drag/drop is not available)
Thank you again in advance of any assistance!