Botframework-webchat: Custom UI sample error (21.customization-plain-ui) - hooks from 'botframework-webchat-component' not defined

[samazadi]

Screenshots

Version

Describe the bug

Running 21.customization-plain-ui throwing undefined errors for all hooks. Not sure if I'm missing a package, but I'm assuming the sample should work out of the box.

To Reproduce

Steps to reproduce the behavior:

1. git clone BotFramework-WebChat
   2 cd BotFramework-WebChat/samples/21.customization-plain-ui
2. npm i
3. npm start

App starts on localhost:3000 but throws an error "TypeError: Cannot read property 'useSendMessage' of undefined" and stack trace points to "const { useSendMessage } = hooks;"

Expected behavior

App should start up

Additional context

[Bug]

[marq47]

I think not all hooks are completed yet, but if you use latests bits you can test the sample (removing suggested actions component by the moment). Almost every day the list of completed hooks is growing (good work rewriting components).

My problem testing the sample is that using and connecting with our own bot I always get activities as an empty list (useActivities hook). Is there someone experiencing the same? How can I test if responses from bot are arriving ?

Thanks!!

[tdurnford]

@marq47 The useActivities hook should return an array where the first element in the array is a list of activities.

useActivities(): [Activity[]]

[compulim]

@samazadi thanks for reporting, we should write automated tests for our samples so they don't break from time to time. 🙇🏻‍♂️

@marq47 thanks for trying out our new hooks. :)

We try to scope our hooks into 3 types:

• Value/setter, following React.useState pattern
  
  
  
  • They will have a signature of useXXX(): [value, (nextValue) => void], same as React.useState.
  
  
  • useSendBoxValue: [value: string, (nextValue: string) => void]
  
  
  • useLanguage: [language: string] (language is read-only, thus, no setters)
  
  
  • useActivities: [activities: Activity[]]
  
  
  • They will be named using nouns.
  
  
• Action, e.g. useFocusSendBox, useSendMessage
  
  
  
  • They will have a signature of useXXX(): (...args) => any.
  
  
  • They will be named using verbs.
  
  
• Localization, e.g. useLocalize
  
  
  
  • They will have a signature of useLocalizeXXX(identifier, ...args): string.
  
  

We are very new to hooks for composing UI components, please feel free to comment.

[samazadi]

@compulim no worries, i know how it goes. Any instructions on how I can fix it and test out the sample? Or any idea of when it can be fixed?

[samazadi]

Any update on these hooks?

[corinagum]

@samazadi sorry for the delay. I am very hopeful that hooks will be fully implemented before the end of this week. We will circle back to this sample once the final PRs are in.

[samazadi]

Sounds good, thanks you! :)

[samazadi]

Hi @corinagum just wanted to see if there's been any progress? We're migrating to V4 and I really want to use these hooks in our implementation

[tdurnford]

@samazadi All of the hooks were included in last weeks v4.7.1 release. Updating your botframework-webchat dependency to the latest version should unblock you.

[samazadi]

@tdurnford quick side question... If I wanted to add custom data to the channelData of my messages, whats the best way to do that using the new hooks?

[tdurnford]

@samazadi using a custom store middleware is probably still the best way to add custom channel data. Take a look at the Piggyback Data on Every Outgoing Activity Web Chat sample.

[samazadi]

@tdurnford thank you! Any chance there is documentation or examples on how to do this using React?