feat(ChatbotAttachment): Add file reading to demo

Added some very basic file reading to the demo, based on PF6.
patternfly · Sep 10, 2024 · 2ba5724 · 2ba5724
1 parent 7b92fda
commit 2ba5724
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/...ocs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.tsx b/...ocs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.tsx
@@ -98,29 +98,49 @@ export const BasicDemo: React.FunctionComponent = () => {
 
   // Attachments
   // --------------------------------------------------------------------------
-  const handleFile = (data: File[]) => {
+  // example of how you can read a text file
+  const readFile = (file: File) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+      // you can use reader.readAsText(file) for human-readable file types;
+    });
+
+  // handle file drop/selection
+  const handleFile = (fileArr: File[]) => {
+    setIsLoadingFile(true);
     // any custom validation you may want
-    if (data.length > 1) {
+    if (fileArr.length > 1) {
       setShowAlert(true);
       setFile(undefined);
       setError('Uploaded more than one file.');
       return;
     }
     // this is 25MB in bytes; size is in bytes
-    if (data[0].size > 25000000) {
+    if (fileArr[0].size > 25000000) {
       setShowAlert(true);
       setFile(undefined);
       setError('File is larger than 25MB.');
       return;
     }
 
-    setFile(data[0]);
-    setIsLoadingFile(true);
-    setShowAlert(false);
-    setError(undefined);
-    setTimeout(() => {
-      setIsLoadingFile(false);
-    }, 1000);
+    readFile(fileArr[0])
+      .then((data) => {
+        // eslint-disable-next-line no-console
+        console.log(data);
+        setFile(fileArr[0]);
+        setShowAlert(false);
+        setError(undefined);
+        // this is just for demo purposes, to make the loading state really obvious
+        setTimeout(() => {
+          setIsLoadingFile(false);
+        }, 1000);
+      })
+      .catch((error: DOMException) => {
+        setError(`Failed to read file: ${error.message}`);
+      });
   };
 
   const handleFileDrop = (event: DropEvent, data: File[]) => {

diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss
@@ -52,6 +52,16 @@
     line-height: 24px;
   }
 
+  .pf-chatbot__message-bar-input {
+    flex: 1 0 0;
+  }
+
+  .pf-chatbot__message-bar-actions {
+    align-items: center;
+    height: 100%;
+    display: flex;
+  }
+
   //.pf-chatbot__message-textarea {
   //  --pf-v6-c-form-control--Resize: none;
   //  --pf-v6-c-form-control--before--BorderStyle: none;

diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
@@ -159,9 +159,7 @@ export const MessageBar: React.FC<MessageBarProps & MessageBarWithAttachMenuProp
       </FlexItem>
 
       <FlexItem className="pf-chatbot__message-bar-actions">
-        {hasAttachButton && handleAttach && (
-          <AttachButton onAttachAccepted={handleAttach} isDisabled={isListeningMessage} />
-        )}
+        {hasAttachButton && <AttachButton onAttachAccepted={handleAttach} isDisabled={isListeningMessage} />}
         {hasMicrophoneButton && (
           <MicrophoneButton
             isListening={isListeningMessage}