Add file + text upload capabilities (#126)

* feat(lib): add file + text upload capabilities

* feat(lib): rm a comment

* feat(lib): change colors and fix tests

* feat(lib): adjust margins for file preview text

* PubNub SDK v0.31.0 release.

---------

Co-authored-by: Przemysław Janowski <[email protected]>
Co-authored-by: PubNub Release Bot <[email protected]>

Author: 3 people

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.30.0
+version: v0.31.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2023-10-04
+    version: v0.31.0
+    changes:
+      - type: feature
+        text: "Make it possible to send both text and file in one message."
   - date: 2023-07-20
     version: v0.30.0
     changes:

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

packages/common/src/message-input/message-input.tsx

@@ -36,6 +36,8 @@ export interface CommonMessageInputProps {
   onSend?: (value: MessagePayload | File | UriFileInput) => void;
   /** Option to provide an extra actions renderer to add custom action buttons to the input. */
   extraActionsRenderer?: () => JSX.Element;
+  /** Callback to render custom file preview JSX Element */
+  filePreviewRenderer?: (file: File | UriFileInput) => JSX.Element | null;
 }
 
 /**
@@ -74,7 +76,7 @@ export const useMessageInputCore = (props: CommonMessageInputProps) => {
       if (!file && !isValidInputText()) return;
       let message = {
         id: uuid.v4(),
-        text: file ? "" : text,
+        text,
         type: file ? "" : "default",
         ...(senderInfo && { sender: users.find((u) => u.id === pubnub.getUUID()) }),
         createdAt: new Date().toISOString(),

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/commonjs/index",

packages/react-native/src/message-input/message-input.style.ts

@@ -10,6 +10,7 @@ const lightColors = {
   actionsSheetButtonIconTint: "#1F2937",
   actionsSheetLabelColor: "#1F2937",
   sheetContentHeaderText: "#000000",
+  messagePreview: "#585858",
 };
 
 const darkColors = {
@@ -21,10 +22,12 @@ const darkColors = {
   actionsSheetButtonIconTint: "#e4e5e5",
   actionsSheetLabelColor: "#e7eaec",
   sheetContentHeaderText: "#ffffff",
+  messagePreview: "rgba(228, 228, 235, 0.8)",
 };
 
 export interface MessageInputStyle {
   messageInputWrapper?: ViewStyle;
+  messageInputContent?: ViewStyle;
   messageInput?: ViewStyle;
   messageInputPlaceholder?: TextStyle;
   messageInputFileLabel?: ViewStyle;
@@ -43,6 +46,8 @@ export interface MessageInputStyle {
   fileUploadModalSheetContentButton?: ViewStyle;
   fileUploadModalSheetContentButtonIcon?: ImageStyle;
   fileUploadModalSheetContentTextStyle?: ViewStyle;
+  filePreviewContainer?: ViewStyle;
+  filePreviewText?: TextStyle;
 }
 
 export default (theme: Themes): MessageInputStyle => {
@@ -53,6 +58,9 @@ export default (theme: Themes): MessageInputStyle => {
       backgroundColor: colors.wrapperBackground,
       paddingHorizontal: 8,
       paddingVertical: 10,
+      flexDirection: "column",
+    },
+    messageInputContent: {
       flexDirection: "row",
       alignItems: "center",
     },
@@ -143,5 +151,13 @@ export default (theme: Themes): MessageInputStyle => {
       fontSize: 16,
       lineHeight: 24,
     },
+    filePreviewContainer: {
+      marginBottom: 8,
+      marginLeft: 10,
+    },
+    filePreviewText: {
+      color: colors.messagePreview,
+      fontSize: 14,
+    },
   });
 };

packages/react-native/src/message-input/message-input.tsx

@@ -1,5 +1,13 @@
 import React, { FC, useState } from "react";
-import { View, Image, TouchableOpacity, TextInput, Animated, TextInputProps } from "react-native";
+import {
+  View,
+  Image,
+  TouchableOpacity,
+  TextInput,
+  Animated,
+  TextInputProps,
+  Text,
+} from "react-native";
 import { CommonMessageInputProps, useMessageInputCore } from "@pubnub/common-chat-components";
 import { getDocumentAsync } from "expo-document-picker";
 import { useStyle, useRotation } from "../helpers";
@@ -60,6 +68,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     sendMessageOnSubmitEditing,
     senderInfo,
     typingIndicator,
+    filePreviewRenderer,
     ...otherTextInputProps
   } = props;
 
@@ -114,7 +123,6 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
       const fileName =
         asset.fileName || asset.uri.substring(asset.uri.lastIndexOf("/") + 1, asset.uri.length);
       setFile({ mimeType: "image/*", name: fileName, uri: asset.uri });
-      setText(fileName);
     } catch (e) {
       onError(e);
     }
@@ -131,15 +139,13 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
       }
       setModalVisible(false);
       setFile({ mimeType: result.mimeType, name: result.name, uri: result.uri });
-      setText(result.name);
     } catch (e) {
       onError(e);
     }
   };
 
   const handleRemoveFile = () => {
     setFile(null);
-    setText("");
   };
 
   const handleInputChange = (newText: string) => {
@@ -237,36 +243,55 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     </>
   );
 
+  const renderFilePreview = () => {
+    if (filePreviewRenderer) {
+      return filePreviewRenderer(file);
+    }
+
+    if (!file) {
+      return null;
+    }
+
+    return (
+      <View style={style.filePreviewContainer}>
+        <Text style={style.filePreviewText}>{file.name}</Text>
+      </View>
+    );
+  };
+
   return (
     <View style={style.messageInputWrapper}>
-      {renderFileModal()}
-      {!actionsAfterInput && renderActions()}
-      <TextInput
-        {...otherTextInputProps}
-        testID="message-input"
-        autoComplete="off"
-        multiline={true}
-        onChangeText={handleInputChange}
-        placeholder={placeholder}
-        style={style.messageInput}
-        placeholderTextColor={style.messageInputPlaceholder.color}
-        editable={!disabled && file == null}
-        value={text}
-        onKeyPress={handleKeyPress}
-      />
-      {actionsAfterInput && renderActions()}
-      {!disabled && (
-        <View style={style.sendButton}>
-          {loader ? (
-            <Animated.Image
-              style={[style.icon, { transform: [{ rotate }] }]}
-              source={{ uri: SpinnerIcon }}
-            />
-          ) : (
-            renderSendButton()
-          )}
-        </View>
-      )}
+      {renderFilePreview()}
+      <View style={style.messageInputContent}>
+        {renderFileModal()}
+        {!actionsAfterInput && renderActions()}
+        <TextInput
+          {...otherTextInputProps}
+          testID="message-input"
+          autoComplete="off"
+          multiline={true}
+          onChangeText={handleInputChange}
+          placeholder={placeholder}
+          style={style.messageInput}
+          placeholderTextColor={style.messageInputPlaceholder.color}
+          editable={!disabled}
+          value={text}
+          onKeyPress={handleKeyPress}
+        />
+        {actionsAfterInput && renderActions()}
+        {!disabled && (
+          <View style={style.sendButton}>
+            {loader ? (
+              <Animated.Image
+                style={[style.icon, { transform: [{ rotate }] }]}
+                source={{ uri: SpinnerIcon }}
+              />
+            ) : (
+              renderSendButton()
+            )}
+          </View>
+        )}
+      </View>
     </View>
   );
 };

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

packages/react/src/message-input/message-input.scss

@@ -24,6 +24,7 @@
   --msg-input__send__margin: 0 9px;
   --msg-input__send__minWidth: 0;
   --msg-input__send__padding: 0;
+  --msg-input__file-preview-container__margin: 0 0 8px 10px;
   --msg-input--disabled__placeholder__color: rgba(var(--chat--light__color--2-rgb), 0.5);
   --msg-input__placeholder__color: var(--chat--light__color--2);
   --msg-input__textarea--focus__border: 1px solid transparent;
@@ -45,6 +46,8 @@
   --msg-input__textarea__resize: none;
   --msg-input__textarea__width: 100%;
   --msg-input__textarea__overflow: hidden;
+  --msg__preview__color: var(--chat--light__color--1);
+  --msg__preview__fontSize: 14px;
 }
 
 /* ************************
@@ -109,6 +112,12 @@
     }
   }
 
+  &__file-preview-container {
+    margin: var(--msg-input__file-preview-container__margin);
+    color: var(--msg__preview__color);
+    font-size: var(--msg__preview__fontSize);
+  }
+
   &__emoji-picker {
     bottom: var(--msg-input__emoji-picker__bottom);
     left: var(--msg-input__emoji-picker__left);
@@ -168,4 +177,5 @@
   --msg-input__textarea__background: var(--chat--dark__background--2);
   --msg-input--disabled__textarea__background: rgba(var(--chat--dark__background--2-rgb), 0.5);
   --msg-input__textarea__color: var(--chat--dark__color--1);
+  --msg__preview__color: var(--chat--dark__color--1);
 }

packages/react/src/message-input/message-input.tsx

@@ -64,6 +64,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     sendButton,
     senderInfo,
     typingIndicator,
+    filePreviewRenderer,
     ...otherTextAreaProps
   } = props;
 
@@ -140,7 +141,6 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     try {
       const file = event.target.files[0];
       setFile(file);
-      setText(file.name);
     } catch (e) {
       onError(e);
     }
@@ -167,7 +167,7 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
 
   const handleRemoveFile = () => {
     autoSize();
-    clearInput();
+    setFile(null);
     if (fileRef.current) fileRef.current.value = "";
   };
 
@@ -239,17 +239,34 @@ export const MessageInput: FC<MessageInputProps> = (props: MessageInputProps) =>
     </div>
   );
 
+  const renderFilePreview = () => {
+    if (filePreviewRenderer) {
+      return filePreviewRenderer(file);
+    }
+
+    if (!file) {
+      return null;
+    }
+
+    return (
+      <div className="pn-msg-input__file-preview-container" data-testid="file-preview-container">
+        {file.name}
+      </div>
+    );
+  };
+
   return (
     <div
       className={`pn-msg-input pn-msg-input--${theme} ${disabled ? "pn-msg-input--disabled" : ""}`}
     >
+      {renderFilePreview()}
       <div className="pn-msg-input__wrapper">
         {!actionsAfterInput && renderActions()}
         <textarea
           {...otherTextAreaProps}
           className="pn-msg-input__textarea"
           data-testid="message-input"
-          disabled={disabled || !!file}
+          disabled={disabled}
           onChange={handleInputChange}
           onKeyPress={handleKeyPress}
           placeholder={placeholder}

packages/react/test/message-input.test.tsx

@@ -192,7 +192,11 @@ describe("Message Input", () => {
 
     expect(fileInput.files[0]).toBe(file);
     expect(fileInput.files).toHaveLength(1);
-    expect(input).toHaveValue("hello.png");
+    expect(input).toHaveValue("");
+
+    const filePreviewContainer = screen.getByTestId("file-preview-container") as HTMLDivElement;
+
+    expect(filePreviewContainer.innerHTML).toBe("hello.png");
   });
 
   test("clears the file", async () => {
@@ -205,6 +209,9 @@ describe("Message Input", () => {
     await userEvent.click(screen.getByTitle("Remove the file"));
 
     expect(input).toHaveValue("");
+    const filePreviewContainer = screen.queryByTestId("file-preview-container") as HTMLDivElement;
+
+    expect(filePreviewContainer).toBeNull();
   });
 
   test("sends the file", async () => {