For a project I am using Microsoft webchat smart display sample.
Smart Display github link
Now I want to add a Text box on the screen so that user can use voice as well as text as input. As the code is using directlinespeech adaptor how can I add textbox in this code.
You can achieve this by simply including the SendTextBox component within the Composer API container. There is nothing pretty about how the below code renders as it is lacking any styling. You will need to play with the CSS to get it to look how you wish. As you can see in the included image, the send box is rendered at the top of the page. I did change the background color to make it more visible within the image.
import { Components } from 'botframework-webchat';
const { SendTextBox, Composer } = Components;
[...]
return (
!!directLineSpeechAdapters && (
<Composer {...directLineSpeechAdapters}>
<SmartDisplay />
<SendTextBox />
</Composer>
)
);
Hope of help!
Related
I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button. Everything works fine except the bottom sheet insists to always pop up on screen mount, which is obviously bad, it should only pop up when user clicks on a trigger like a button.
Here's my component:
import BottomSheet, { BottomSheetScrollView } from '#gorhom/bottom-sheet'
<BottomSheet
ref={sheetRef}
enableOverDrag
handleIndicatorStyle={styles.handleIndicator}
snapPoints={snapPoints}
enablePanDownToClose
>
<BottomSheetScrollView>
{children}
</BottomSheetScrollView>
</BottomSheet>
I've tried to toggle a display none/flex but that makes the popup not smooth and very sudden:
containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}
I've went through the entire docs twice but found nothing that can help me.
If the expected behavior is to only show the bottom sheet when the user clicks a button, then it's looking more like a modal. There's the BottomSheetModal wrapper/decorator for that.
Instead of importing BottomSheet, import BottomSheetModal. Then get its reference and call the methods bottomSheetRef.current.present() and bottomSheetRef.current.close(). Doing it this way, all the show/hide up/down animations will work right off the bet.
Take a look at the documentation for a full example.
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
Background
For React Leaflet v2, there was an NPM plugin, react-leaflet-control, that allowed you to create any kind of control and place it into the react-leaflet control container. Obviously with the introduction of RL-v3, this no longer works in v3 with the API changes. I want to create a custom control wrapper to allow me to place in it any type of React Node.
Current status
The code that I have currently works...but doesn't. I pulled from the example in this Stack Overflow post: React Leaflet V3 Custom Control that gets me to the 99% solution of creating a custom control. However, my use case is a toolbar on the map with buttons that are interactable (colors to designate active tool). With this code, however, I have that functionality, but because every render causes a new control to be created, the Tooltip flickers as it is losing its anchor element.
Desired behavior
I want a toolbar that allows users to select tools to perform actions on the map (think old-school leaflet-draw. And to provide feedback, I want the button to change color when the tool is active and for UX, I want tooltips to describe the action of the button.
Actual behavior
The toolbar exists, users can select tools and there is UI feedback, however, the tooltips lose their anchor element as the control is removed and re-added on every render when selecting a tool.
Code Sandbox
https://codesandbox.io/s/react-leaflet-custom-control-n1xpv
I ended up with an answer that kind of takes in what #teddybeard was saying. If I just created my new div with the class as suggested, it would be placed on top of any default controls such as ZoomControl or ScaleControl. Instead, what I did was grab the actual position div container from the DOM, and then created a ReactDOM portal into that container and added my control in that way.
It works, doesn't have the issues with visual flashing due to the React Effect removing and re-adding the control on every render and I still get the same positioning.
It's live on npm and github at https://github.com/chris-m92/react-leaflet-custom-control and https://npmjs.com/package/react-leaflet-custom-control
const POSITION_CLASSES = {
bottomleft: 'leaflet-bottom leaflet-left',
bottomright: 'leaflet-bottom leaflet-right',
topleft: 'leaflet-top leaflet-left',
topright: 'leaflet-top leaflet-right',
}
const Control = (props: Props): JSX.Element => {
const [container, setContainer] = React.useState<any>(document.createElement('div'))
const positionClass = (props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright)
React.useEffect(() => {
const targetDiv = document.getElementsByClassName(positionClass)
setContainer(targetDiv[0])
}, [])
const controlContainer = (
<div className='leaflet-control leaflet-bar'>{props.children}</div>
)
L.DomEvent.disableClickPropagation(container)
return ReactDOM.createPortal(
controlContainer,
container
)
}
export default Control
I have page setup as follows
The red color areas are static one and green color area is the dynamic one. In the side bar there is a navigation panel.When user click on a button in the navigation bar i want to update the green colored area without re rendering the red colored static area.How can i achieve this.
Note that I am developing this using react native and i want a solution that can apply on react native project too.
Please give me a solution in detailed
Thankyou
for example
<div className={styles.wrapper}>
<div>Navigation</div>
<div>{children}</div>
<div>Footer</div>
</div>
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle