{"version":3,"file":"AssistantAvatar-BRLW3C69.js","sources":["../../../packs/frontend/components/chat/AssistantAvatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { AiConversation } from \"@/services/fobizzToolsApi\";\n\nconst props = withDefaults(\n  defineProps<{\n    assistant: AiConversation[\"assistant\"];\n    isGenerating?: boolean;\n    size?: \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n    editable?: boolean;\n  }>(),\n  { size: \"md\", isGenerating: false, editable: false }\n);\n\nconst imageUrl = computed(() => {\n  if (props.assistant?.image) {\n    if (props.size === \"xl\") {\n      return props.assistant.image.url;\n    } else if (props.assistant?.image.variable) {\n      return props.assistant.image.smallPreviewUrl;\n    } else {\n      return props.assistant.image.url;\n    }\n  }\n  return \"\";\n});\n</script>\n<template>\n  <div\n    class=\"assistant-avatar\"\n    :class=\"[\n      `assistant-avatar--${size}`,\n      { 'assistant-avatar--editable': editable && !imageUrl },\n    ]\"\n  >\n    <BaseSpinner v-if=\"isGenerating\" />\n    <div v-else>\n      <LazyImage v-if=\"imageUrl\" :src=\"imageUrl\" alt=\"avatar\" />\n      <div v-else class=\"assistant-avatar__placeholder\">\n        <i class=\"bi bi-stars\" style=\"margin-top: -2px\"></i>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.assistant-avatar {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background-color: $gray-100;\n  overflow: hidden;\n  flex: none;\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  &--editable &__placeholder {\n    color: $gray-400;\n  }\n\n  &--xxs {\n    width: 24px;\n    height: 24px;\n  }\n\n  &--xxs &__placeholder {\n    font-size: 1rem;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--xs &__placeholder {\n    font-size: 1rem;\n  }\n\n  &--sm {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--sm &__placeholder {\n    font-size: 1.2rem;\n  }\n\n  &--md {\n    width: 60px;\n    height: 60px;\n  }\n\n  &--md &__placeholder {\n    font-size: 1.4rem;\n  }\n\n  &--lg {\n    width: 96px;\n    height: 96px;\n\n    @include media-breakpoint-down(md) {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &--lg &__placeholder {\n    font-size: 3rem;\n\n    @include media-breakpoint-down(md) {\n      font-size: 2rem;\n    }\n  }\n\n  &--xl {\n    width: 120px;\n    height: 120px;\n\n    @include media-breakpoint-down(md) {\n      width: 90px;\n      height: 90px;\n    }\n  }\n\n  &--xl &__placeholder {\n    font-size: 3rem;\n\n    @include media-breakpoint-down(md) {\n      font-size: 2rem;\n    }\n  }\n\n  &--xxl {\n    width: 160px;\n    height: 160px;\n  }\n\n  &--xxl &__placeholder {\n    font-size: 6rem;\n    padding-bottom: 1px;\n  }\n\n  &--editable {\n    border: 3px dashed $border-color;\n    background-color: $color-white;\n  }\n}\n</style>\n"],"names":["props","__props","imageUrl","computed"],"mappings":"odAGA,MAAMA,EAAQC,EAURC,EAAWC,EAAS,IACpBH,EAAM,WAAW,MACfA,EAAM,OAAS,KACVA,EAAM,UAAU,MAAM,IACpBA,EAAM,WAAW,MAAM,SACzBA,EAAM,UAAU,MAAM,gBAEtBA,EAAM,UAAU,MAAM,IAG1B,EACR"}