@patternfly/chatbot 2.1.0-prerelease.22 → 2.1.0-prerelease.24

package/src/Chatbot/Chatbot.scss

@@ -21,6 +21,18 @@
   &--hidden {
     pointer-events: none;
   }
+
+  // 32 rem is the width of the overlay chatbot plus the insets
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 32rem) {
+    width: 100vw;
+    inset-inline-end: 0;
+  }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: auto;
+  }
 }
 
 // ============================================================================
@@ -34,10 +46,22 @@
   border-radius: 0;
   box-shadow: var(--pf-t--global--box-shadow--lg--left);
   overflow: inherit;
+
+  // 30rem is the width of the docked chatbot
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 30rem) {
+    width: 100%;
+  }
 }
 
 html.pf-chatbot-allow--docked {
-  padding-right: 480px;
+  padding-inline-start: 480px;
+
+  // 30rem is the width of the docked chatbot
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 30rem) {
+    padding-inline-start: 0px;
+  }
 }
 
 // ============================================================================
@@ -76,6 +100,11 @@ html.pf-chatbot-allow--docked {
   &--hidden {
     pointer-events: none;
   }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: auto;
+  }
 }
 
 .pf-chatbot-container--embedded {

package/src/ChatbotContent/ChatbotContent.scss

@@ -7,6 +7,11 @@
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow: unset;
+  }
 }
 
 // ============================================================================

package/src/FileDropZone/FileDropZone.scss

@@ -7,6 +7,11 @@
   overflow: hidden;
   display: grid;
   grid-template-rows: 1fr auto;
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: auto;
+  }
 }
 
 .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
@@ -34,3 +39,18 @@
   width: 100%;
   padding: var(--pf-t--global--spacer--md);
 }
+
+.pf-chatbot--default {
+  // allows for zoom conditions; try zooming to 200% to see
+  .pf-chatbot__dropzone--visible.pf-chatbot__dropzone {
+    @media screen and (max-height: 518px) {
+      display: flex;
+      height: 100%;
+      overflow: hidden;
+
+      .pf-v6-c-multiple-file-upload__main {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/MessageBar/MessageBar.tsx

@@ -58,6 +58,7 @@ export interface MessageBarProps {
     send?: { tooltipContent?: string; props?: ButtonProps };
     microphone?: {
       tooltipContent?: { active?: string; inactive?: string };
+      language?: string;
       props?: ButtonProps;
     };
   };
@@ -184,6 +185,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onIsListeningChange={setIsListeningMessage}
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
+            language={buttonProps?.microphone?.language}
             {...buttonProps?.microphone?.props}
           />
         )}

package/src/MessageBar/MicrophoneButton.tsx

@@ -22,6 +22,8 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipProps?: TooltipProps;
   /** English text "Use microphone" and "Stop listening" used in the tooltip */
   tooltipContent?: { active?: string; inactive?: string };
+  /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
+  language?: string;
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -31,6 +33,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   className,
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
+  language = 'en-US',
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -60,12 +63,14 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
       recognition.continuous = false;
       recognition.interimResults = false;
-      recognition.lang = 'en-US';
+      recognition.lang = language;
 
       recognition.onresult = (event) => {
         const result = event.results[0][0].transcript;
         onSpeechRecognition(result);
         recognition.stop();
+        // turn button off
+        onIsListeningChange(false);
       };
 
       recognition.onerror = (event) => {

package/src/MessageBox/JumpButton.scss

@@ -43,4 +43,9 @@
   &--bottom {
     inset-block-end: var(--pf-t--global--spacer--md) !important;
   }
+
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    display: none;
+  }
 }

package/src/MessageBox/MessageBox.scss

@@ -7,6 +7,16 @@
   flex-direction: column;
   row-gap: var(--pf-t--global--spacer--sm);
   padding: var(--pf-t--global--spacer--lg);
+
+  // 32 rem is the width of the overlay chatbot plus the insets
+  // if the screen is smaller, we want to be 100%
+  @media screen and (max-width: 32rem) {
+    width: 100%;
+  }
+  // allows for zoom conditions; try zooming to 200% to see
+  @media screen and (max-height: 518px) {
+    overflow-y: visible;
+  }
 }
 
 .pf-chatbot__messagebox--bottom > :first-child {