{"version":3,"file":"ConversationStarters-DBGfp_s5.js","sources":["../../../packs/frontend/components/chat/ConversationStarters.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst props = defineProps<{ starters: string[] }>();\ndefineEmits([\"select\"]);\n\nconst presentStarters = computed(() => {\n  return props.starters.filter((str) => str.length > 0);\n});\n</script>\n<template>\n  <div class=\"conversation-starter\">\n    <button\n      v-for=\"str in presentStarters\"\n      :key=\"str\"\n      type=\"button\"\n      class=\"btn list-item\"\n      @click=\"$emit('select', str)\"\n    >\n      <div class=\"list-item__text\">\n        {{ str }}\n      </div>\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.conversation-starter {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 1fr;\n  gap: $spacer-75;\n  padding: $spacer-3;\n\n  @include media-breakpoint-down(md) {\n    grid-template-columns: 1fr;\n  }\n}\n\n.list-item {\n  display: flex;\n  text-align: left;\n  gap: $spacer-1;\n  padding: $spacer-75 $spacer-3;\n  border-radius: $border-radius-lg;\n  border: 1px solid $border-color;\n  color: $body-color;\n  text-decoration: none;\n  font-size: $font-size-sm;\n\n  &__text {\n    display: -webkit-box;\n    overflow: hidden;\n    line-clamp: 2;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n\n    @include media-breakpoint-down(md) {\n      line-clamp: 1;\n      -webkit-line-clamp: 1;\n    }\n  }\n\n  &:hover {\n    background-color: $hover-color;\n  }\n}\n</style>\n"],"names":["props","__props","presentStarters","computed","str"],"mappings":"2SACA,MAAMA,EAAQC,EAGRC,EAAkBC,EAAS,IACxBH,EAAM,SAAS,OAAQI,GAAQA,EAAI,OAAS,CAAC,CACrD"}