November PR2

In my previous blog post, I introduced my changes, where users were limited to sending images only in the desktop UI of ChatCraft. In this blog post, I will continue to discuss my PR submission, which aims to update the mobile version, allowing users to send images for inquiries by taking photos.

PR Background

ChatCraft has undergone special UI customization for mobile devices, including but not limited to reducing button sizes and replacing texts with symbols. This has resulted in the current use of two separate modules (src/components/PromptForm/DesktopPromptForm.tsx,src/components/PromptForm/MobilePromptForm.tsx) for sending prompts. Therefore, after updating the DesktopPromptForm, I should also update the MobilePromptForm to support the business logic of sending images. Additionally, I'll need to make appropriate changes for the views on mobile devices.

Develop process

Stage 1: Merge changes into new branch

The develop is based on the desktop version, because the PR is not merged, I did a merge to include those changes.

Stage 2: Investigate on camera

Next, I began researching how to invoke the native camera. I found a fantastic example: native-camera-in-mobile-browsers that provided a simple method for this.

     <!-- The hidden file `input` for opening the native camera -->
      <input
        id="cameraFileInput"
        type="file"
        accept="image/*"
        capture="environment"
      />

Note that the capture="environment" is the outward-facing camera should be used. I discovered later on that this method could also be used for audio input, meaning it could invoke the microphone. You can find more here

Update: 2023-12-11

Found that if we remove capture="environment", we can not only call native camera but also can call Choose File and Photo Library. This is amazing!

     <!-- The hidden file `input` for opening the native camera -->
      <input
        id="cameraFileInput"
        type="file"
        accept="image/*"
// Removed capture="environment"
      />

Stage 3: UI adaptation specifically for mobile

During this phase, my tasks were to make changes based on the characteristics of mobile devices.I reduced the height of the preview image from 100px (in the desktop UI) to 70px. Additionally, I updated the button for deleting the preview image, changing it from a circular button in the top right corner to a square button on the right side. Here is a comparison:

Due to the addition of an extra button, I had to move the text area on top of the buttons, see the before and after comparison:

Summary

This PR introduced a new feature for mobile devices, allowing users to take photos via the camera. However, there is still room for improvement in the UI. For instance, the icons on the buttons may not be intuitive enough and could be changed to a camera icon. Additionally, I believe a potentially better approach is to hide the plus button when the text area is in focus, allowing it to occupy the same space as before in a single row. I will continue to make improvements in the following days until the PR is merged.