fix(channel-web): dropdown not rendering below message (#1764)

botpress · Sep 21, 2023 · bbb0f6e · bbb0f6e
1 parent bdba56a
commit bbb0f6e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/modules/channel-web/assets/default-emulator.css b/modules/channel-web/assets/default-emulator.css
@@ -718,6 +718,11 @@
     margin: 0.2rem 0.5rem;
   }
 
+  .bpw-in-message-quick_reply-dropdown {
+    margin: 0.2rem 0.5rem;
+    width: 200px;
+  }
+
   .bpw-composer {
     position: relative;
     outline: none;

diff --git a/modules/channel-web/assets/default.css b/modules/channel-web/assets/default.css
@@ -644,6 +644,11 @@ body {
   margin: 0.2rem 0.5rem;
 }
 
+.bpw-in-message-quick_reply-dropdown {
+  margin: 0.2rem 0.5rem;
+  width: 200px;
+}
+
 .bpw-composer {
   border-top-width: 1px;
   border-top-style: solid;

diff --git a/modules/channel-web/src/views/lite/components/messages/renderer/Dropdown.tsx b/modules/channel-web/src/views/lite/components/messages/renderer/Dropdown.tsx
@@ -38,7 +38,7 @@ export const Dropdown = (props: Renderer.Dropdown) => {
 
   const renderSelect = inKeyboard => {
     return (
-      <div className={inKeyboard && 'bpw-keyboard-quick_reply-dropdown'}>
+      <div className={(inKeyboard && 'bpw-keyboard-quick_reply-dropdown') || 'bpw-in-message-quick_reply-dropdown'}>
         <div style={{ width: props.width || '100%', display: 'inline-block' }}>
           {props.allowCreation ? (
             <Creatable

diff --git a/modules/hitlnext/assets/webchat-theme.css b/modules/hitlnext/assets/webchat-theme.css
@@ -1026,6 +1026,11 @@
     padding: var(--spacing-medium) 0;
     text-transform: uppercase;
   }
+
+  .bpw-in-message-quick_reply-dropdown {
+    margin: 0.2rem 0.5rem;
+    width: 200px;
+  }
 }
 
 .bpw-emulator-header-tab + div {

diff --git a/packages/ui-shared-lite/Payloads/index.ts b/packages/ui-shared-lite/Payloads/index.ts
@@ -70,12 +70,11 @@ const renderChoicePayload = (content: sdk.ChoiceContent & ExtraChoiceProperties)
       component: 'Dropdown',
       message: content.text,
       buttonText: '',
-      displayInKeyboard: true,
+      displayInKeyboard: !content.displayInMessage,
       options: content.choices.map(c => ({ label: c.title, value: c.value?.toUpperCase() })),
-      width: 300,
+      width: !content.displayInMessage && 300,
       placeholderText: content.dropdownPlaceholder,
-      disableFreeText: content.disableFreeText,
-      displayInMessage: content.displayInMessage
+      disableFreeText: content.disableFreeText
     }
   }
   return {