diff --git a/README.md b/README.md
index 69410829..a10c63ba 100644
--- a/README.md
+++ b/README.md
@@ -209,7 +209,7 @@ If you are using Vue 3, you can pass Array and Object props normally: [Passing D
Otherwise, you need to pass those props as strings. For example: `[messages]="JSON.stringify(messages)"`
|
Prop
| Type | Required | Default |
-| ----------------------------------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+|-------------------------------------| ---------------- | -------- |-------------------------------------------------------------------------------------------------------------------|
| `height` | String | - | `600px` |
| `current-user-id`(1) | String | `true` | - |
| `rooms` | [String, Array] | - | `[]` |
@@ -255,7 +255,8 @@ Otherwise, you need to pass those props as strings. For example: `[messages]="JS
| `scroll-distance`(25) | Number | - | `60` |
| `theme`(26) | `light` / `dark` | - | `light` |
| `accepted-files`(27) | String | - | `*` |
-| `styles`(28) | [String, Object] | - | (26) |
+| `capture-files`(28) | String | - | `undefined` |
+| `styles`(29) | [String, Object] | - | (26) |
| `emoji-data-source` | String | - | `https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json` |
**(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
@@ -473,9 +474,11 @@ You can then use the [textarea-action-handler](#events-api) event to call your o
**(27)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
-Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
+Example: set `accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
-**(28)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
+**(28)** `capture-files` can be used to enable direct capturing of photos and videos on mobile browsers, as opposed to just uploading existing photos and videos which are already on the device. See [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) for more information and recognized values. By default, the attribute is omitted and mobile browsers will only offer the gallery to choose photos and videos. Note: this only affects file attachments. Audio messages are always recorded using the device's microphone.
+
+**(29)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
```javascript
styles="{
diff --git a/src/lib/ChatWindow.vue b/src/lib/ChatWindow.vue
index 7e7d8a43..ba67223a 100644
--- a/src/lib/ChatWindow.vue
+++ b/src/lib/ChatWindow.vue
@@ -65,6 +65,7 @@
:emojis-suggestion-enabled="emojisSuggestionEnabledCasted"
:scroll-distance="scrollDistance"
:accepted-files="acceptedFiles"
+ :capture-files="captureFiles"
:templates-text="templatesTextCasted"
:username-options="usernameOptionsCasted"
:emoji-data-source="emojiDataSource"
@@ -203,6 +204,7 @@ export default {
roomMessage: { type: String, default: '' },
scrollDistance: { type: Number, default: 60 },
acceptedFiles: { type: String, default: '*' },
+ captureFiles: { type: String, default: undefined },
templatesText: { type: [Array, String], default: () => [] },
mediaPreviewEnabled: { type: [Boolean, String], default: true },
usernameOptions: {
diff --git a/src/lib/Room/Room.vue b/src/lib/Room/Room.vue
index 67297ca4..d950fc0b 100644
--- a/src/lib/Room/Room.vue
+++ b/src/lib/Room/Room.vue
@@ -140,6 +140,7 @@
:show-emojis="showEmojis"
:show-footer="showFooter"
:accepted-files="acceptedFiles"
+ :capture-files="captureFiles"
:textarea-action-enabled="textareaActionEnabled"
:textarea-auto-focus="textareaAutoFocus"
:user-tags-enabled="userTagsEnabled"
@@ -210,6 +211,7 @@ export default {
showNewMessagesDivider: { type: Boolean, required: true },
showFooter: { type: Boolean, required: true },
acceptedFiles: { type: String, required: true },
+ captureFiles: { type: String, required: true },
textFormatting: { type: Object, required: true },
linkOptions: { type: Object, required: true },
loadingRooms: { type: Boolean, required: true },
diff --git a/src/lib/Room/RoomFooter/RoomFooter.vue b/src/lib/Room/RoomFooter/RoomFooter.vue
index 41e337fb..6289ee1e 100644
--- a/src/lib/Room/RoomFooter/RoomFooter.vue
+++ b/src/lib/Room/RoomFooter/RoomFooter.vue
@@ -163,6 +163,7 @@
type="file"
multiple
:accept="acceptedFiles"
+ :capture="captureFiles"
style="display: none"
@change="onFileChange($event.target.files)"
/>
@@ -234,6 +235,7 @@ export default {
showEmojis: { type: Boolean, required: true },
showFooter: { type: Boolean, required: true },
acceptedFiles: { type: String, required: true },
+ captureFiles: { type: String, required: true },
textareaActionEnabled: { type: Boolean, required: true },
textareaAutoFocus: { type: Boolean, required: true },
userTagsEnabled: { type: Boolean, required: true },
diff --git a/tests/unit/mock-data.js b/tests/unit/mock-data.js
index cd315aef..1637ab74 100644
--- a/tests/unit/mock-data.js
+++ b/tests/unit/mock-data.js
@@ -34,6 +34,7 @@ const responsiveBreakpoint = 10
const singleRoom = false
const theme = 'dark'
const acceptedFiles = '*'
+const captureFiles = undefined
const linkOptions = { disabled: false, target: '_blank' }
const styles = { general: { color: '#0a0a0a' } }
@@ -66,6 +67,7 @@ export default {
singleRoom,
theme,
acceptedFiles,
+ captureFiles,
linkOptions,
styles
}
diff --git a/types/index.d.ts b/types/index.d.ts
index 5ddc8c8d..6324ee3a 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -168,6 +168,7 @@ export interface Props {
'scroll-distance'?: number
theme?: 'light' | 'dark'
'accepted-files'?: string
+ 'capture-files'?: string
styles?: Record>
}