November PR2
Published: 2023-11-28 05:02:36

In my previous blog [post](https://dev.to/mingming-ma/november-pr1-2dhm), I introduced my changes, where users were limited to sending images only in the desktop UI of [ChatCraft](https://github.com/tarasglek/chatcraft.org). In this blog post, I will continue to discuss my [PR](https://github.com/tarasglek/chatcraft.org/pull/302) 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](https://github.com/tarasglek/chatcraft.org/pull/302/commits).
![Merge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j8ysp4g4asjmhpn8n3i.png)

## 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](https://github.com/pixochi/native-camera-in-mobile-browsers) that provided a simple method for this. 

```html
     <!-- 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)

![arg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqld9xdc7a2e3u511z68.png)

### 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!

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

![CameraRoll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0m8z1c4n3yhfgrbvszv.png)



## 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:

![compare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my59u5f5sauhwpu6m9lh.png)

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:
![before after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19oe03006o8mn2at2zis.png)

## 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.