How to hide send box in React Web chat Bot framework

Question

I am working on an application where I would like to hide "Send Box" and display only messages coming from the Bot. I tried the below code, but somehow this did not work. Can anyone help me here.

My react version is 18.2.0 and botframework-webchat version is ^4.15.7

<ReactWebChat
  attachmentMiddleware={attachmentMiddleware}
  directLine={directLine}
  styleOptions={styleOptions}
  store={store}
/>

const styleOptions = {  
 hideSendBox: true 
};

Try defining `styleOptions` before passing it to the component. — Pratik Lad, Apr 13 '23 at 14:09
@PratikLad I tried it did not work...My react version is 18.2.0 and botframework-webchat version is ^4.15.7...is it like latest react version doesnt support botframework web chat version? — Sharvani, Apr 18 '23 at 06:28
I just tested using React v.18.2.0 and Web Chat v4.15.7 and it worked as expected. I tested in both a class and functional component architecture. Can you update your post to include all of the relevant Web Chat code so that we can fully diagnose what the problem may be? Or create a minimum reproducible example and post that on GH with a link (minus any secrets/keys)? — Steven Kanberg, May 01 '23 at 22:42
I guess I have made a mistake...it now works for me..thanks for the help — Sharvani, May 09 '23 at 06:17

score 0 · Accepted Answer · answered Apr 21 '23 at 18:24

I attaching a snippet below let me know if this works for you.

import { ReactWebChat } from 'botframework-webchat';

const styleOptions = {
  hideSendBox: true
};

function MyChatComponent() {
  return (
    <ReactWebChat
      styleOptions={styleOptions}
      directLine={directLine}
      userID="YOUR_USER_ID"
      username="YOUR_USERNAME"
      locale="en-US"
    />
  );
}

How to hide send box in React Web chat Bot framework

1 Answers1