How to add text box in Microsoft webchat smart display sample?

Question

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.

Were you able to figure this out or do you still need help? – Steven Kanberg Apr 12 '21 at 23:35 — Steven Kanberg, Apr 12 '21 at 23:35
@StevenKanberg I need help – Rohan saini Apr 13 '21 at 07:42 — Rohan saini, Apr 13 '21 at 07:42

score 0 · Answer 1 · answered Aug 06 '21 at 10:36

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!

How to add text box in Microsoft webchat smart display sample?

1 Answers1