49 lines
920 B
Vue
49 lines
920 B
Vue
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
replies: Array,
|
||
|
|
activeModelColor: String,
|
||
|
|
isInputCentered: Boolean,
|
||
|
|
});
|
||
|
|
const emit = defineEmits(['select']);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="quick-replies-container">
|
||
|
|
<div
|
||
|
|
v-for="(reply, index) in replies"
|
||
|
|
:key="index"
|
||
|
|
class="quick-reply-item"
|
||
|
|
>
|
||
|
|
<VBtn
|
||
|
|
:variant="isInputCentered ? 'tonal' : 'outlined'"
|
||
|
|
:color="activeModelColor"
|
||
|
|
size="small"
|
||
|
|
@click="emit('select', reply)"
|
||
|
|
class="w-100"
|
||
|
|
>
|
||
|
|
{{ reply }}
|
||
|
|
</VBtn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.quick-replies-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||
|
|
grid-gap: 8px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.quick-replies-container {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.quick-reply-item {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|