{"version":3,"file":"AssistantModal-H3cvh7NU.js","sources":["../../../packs/frontend/components/ai-chat/EnabledToolsItem.vue","../../../packs/frontend/components/ai-chat/AssistantModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { AssistantTool } from \"@/types/ai-chat.types\";\n\nexport type Props = {\n  app: AssistantTool;\n};\nconst { t } = useI18n();\ndefineProps<Props>();\nconst emit = defineEmits([\"change\"]);\n</script>\n<template>\n  <div class=\"enabled-tools__item\">\n    <div class=\"enabled-tools__content\">\n      <div class=\"enabled-tools__icon\">\n        <i :class=\"`bi bi-${app.icon}`\"></i>\n      </div>\n      <div class=\"enabled-tools__title\">\n        {{ t(`aiChat.aiAssistant.tools.${app.id}`) }}\n        <span v-if=\"app.experimental\" class=\"ms-1\">🤓</span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.enabled-tools {\n  &__item {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    flex: 1 1;\n    gap: $spacer-2;\n    padding: $btn-padding-y $spacer-2;\n    color: $secondary;\n    background-color: $color-white;\n    border: 1px solid $border-color;\n    border-radius: $border-radius-lg;\n    box-shadow: $shadow-brand;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &__icon {\n    display: flex;\n    place-self: center center;\n    padding: $spacer-1 $spacer-2;\n    background-color: $hover-color;\n    border-radius: $border-radius-sm;\n  }\n\n  &__title {\n    font-size: $font-size-sm;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport EnabledToolsItem from \"@/components/ai-chat/EnabledToolsItem.vue\";\nimport { useAssistantTools } from \"@/composables/ai-chat/useAssistantTools\";\nimport { AiAssistant } from \"@/services/fobizzToolsApi\";\nimport { AssistantTool } from \"@/types/ai-chat.types\";\nimport { nFormatter } from \"@/utils/formatString\";\n\nconst { t } = useI18n();\n\nconst userStore = useUserStore();\nconst user = userStore.user;\n\nconst { availableAssistantTools } = useAssistantTools(user);\n\ntype Props = {\n  assistant: AiAssistant;\n  open: boolean;\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  open: false,\n});\n\nconst emit = defineEmits([\"createConversation\", \"remix\", \"hide\"]);\n\nconst isSubmitting = ref(false);\n\nconst handleHide = () => {};\n\nconst handleHidden = () => {\n  emit(\"hide\");\n};\n\nconst getModelNameTranslation = (modelId: string) => {\n  if (!modelId) return \"\";\n  const normalizedModelId = modelId.replace(\".\", \"-\");\n  return t(`aiChat.languageModels.${normalizedModelId}.name`);\n};\n\nconst enabledTools = computed<AssistantTool[]>(() => {\n  if (!props.assistant) return [];\n\n  return props.assistant.enabledTools.map((id) => {\n    return availableAssistantTools().find((app) => app.id === id);\n  }) as AssistantTool[];\n});\n\nconst startConversation = () => {\n  isSubmitting.value = true;\n  emit(\"createConversation\", props.assistant);\n};\n\nconst handleRemix = () => {\n  emit(\"remix\", props.assistant);\n};\n\nconst handleSelect = (starter: string) => {\n  emit(\"createConversation\", props.assistant, starter);\n};\n</script>\n<template>\n  <teleport to=\"body\">\n    <BaseModal\n      size=\"lg\"\n      :open=\"open\"\n      :scrollable=\"true\"\n      @hide=\"handleHide\"\n      @hidden=\"handleHidden\"\n    >\n      <div class=\"modal-header\">\n        <button\n          type=\"button\"\n          data-bs-dismiss=\"modal\"\n          class=\"btn-close\"\n          aria-label=\"Close\"\n        ></button>\n      </div>\n      <div class=\"modal-body pt-0 pb-5\">\n        <div class=\"modal-sections\">\n          <section class=\"modal-section\">\n            <div class=\"chat-assistant-intro\">\n              <ChatAssistantAvatar\n                :assistant=\"assistant\"\n                size=\"lg\"\n                class=\"chat-assistant-intro__avatar\"\n              />\n              <div>\n                <h4\n                  class=\"chat-assistant-intro__title\"\n                  data-testid=\"modal-title-ai_chat-assistant\"\n                >\n                  {{ assistant.name }}\n                </h4>\n                <p class=\"chat-assistant-intro__text d-none d-lg-block\">\n                  {{ assistant.description }}\n                </p>\n              </div>\n            </div>\n            <p class=\"chat-assistant-intro__text d-lg-none mt-4 mb-1\">\n              {{ assistant.description }}\n            </p>\n          </section>\n          <section class=\"modal-section\">\n            <div class=\"stat-columns\">\n              <div class=\"stat-columns__item\">\n                <div class=\"stat-columns__value\">\n                  {{ getModelNameTranslation(assistant.model || \"\") }}\n                </div>\n                <div class=\"stat-columns__label\">\n                  {{ t(\"aiChat.aiAssistant.labels.model\") }}\n                </div>\n              </div>\n              <div class=\"stat-columns__item\">\n                <div class=\"stat-columns__value\">\n                  {{ t(`aiCategories.categories.${assistant.category}`) }}\n                </div>\n                <div class=\"stat-columns__label\">\n                  {{ t(\"aiChat.labels.category\") }}\n                </div>\n              </div>\n              <div class=\"stat-columns__item\">\n                <div class=\"stat-columns__value\">\n                  {{ nFormatter(assistant.remixCount) }}\n                </div>\n                <div class=\"stat-columns__label\">\n                  {{ t(\"aiChat.aiAssistant.labels.remixCount\") }}\n                </div>\n              </div>\n              <div class=\"stat-columns__item\">\n                <div class=\"stat-columns__value\">\n                  {{ assistant.authorName || assistant.user.displayName }}\n                </div>\n                <div class=\"stat-columns__label\">\n                  {{ t(\"aiChat.aiAssistant.labels.author\") }}\n                </div>\n              </div>\n            </div>\n          </section>\n          <section v-if=\"enabledTools.length > 0\" class=\"modal-section\">\n            <h5>\n              {{ t(\"aiChat.aiAssistant.labels.enabledTools\") }}\n            </h5>\n            <div class=\"enabled-tools-grid\">\n              <EnabledToolsItem\n                v-for=\"app in enabledTools\"\n                :key=\"app.id\"\n                :app=\"app\"\n              />\n            </div>\n          </section>\n          <section\n            v-if=\"assistant.conversationStarters.length > 0\"\n            class=\"modal-section\"\n          >\n            <h5>{{ t(\"aiChat.labels.conversationStarters\") }}</h5>\n            <ChatConversationStarters\n              :starters=\"assistant.conversationStarters\"\n              @select=\"handleSelect\"\n            />\n          </section>\n        </div>\n      </div>\n      <div class=\"modal-footer\">\n        <div class=\"ms-auto button-grid\">\n          <button\n            v-if=\"!userStore.isPupil\"\n            class=\"btn btn-secondary btn-rounded\"\n            @click=\"handleRemix\"\n          >\n            <i class=\"bi bi-bootstrap-reboot me-1 hide-sm\"></i>\n            {{ t(\"links.remix\") }}\n          </button>\n          <button\n            class=\"btn btn-primary btn-rounded\"\n            data-testid=\"button-start-chat\"\n            :disabled=\"isSubmitting\"\n            @click=\"startConversation\"\n          >\n            <BaseSpinner v-if=\"isSubmitting\" size=\"sm\" class=\"me-2\" />\n            {{ t(\"aiChat.links.startChat\") }}\n          </button>\n        </div>\n      </div>\n    </BaseModal>\n  </teleport>\n</template>\n<style lang=\"scss\" scoped>\n.chat-assistant-intro {\n  display: flex;\n  flex-direction: row;\n  gap: $spacer-4;\n  align-items: center;\n\n  &__avatar {\n    width: 140px;\n    height: 140px;\n\n    @include media-breakpoint-down(md) {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &__title {\n    @include media-breakpoint-down(md) {\n      font-size: $font-size-sm;\n    }\n  }\n\n  &__text {\n    font-size: $font-size-sm;\n    color: $secondary;\n  }\n}\n\n.enabled-tools-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: $spacer-2;\n\n  @include media-breakpoint-down(md) {\n    grid-template-columns: 1fr;\n  }\n}\n\n.modal-sections {\n  display: flex;\n  flex-direction: column;\n  gap: $spacer-6;\n\n  @include media-breakpoint-down(md) {\n    gap: $spacer-4;\n  }\n}\n\n.modal-section {\n  h5 {\n    font-size: $font-size-sm;\n    font-weight: $font-weight-semibold;\n    margin-bottom: $spacer-2;\n  }\n}\n\n.stat-columns {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr;\n  grid-row-gap: $spacer;\n\n  @include media-breakpoint-down(lg) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  &__item {\n    display: flex;\n    flex-direction: column;\n    gap: $spacer-1;\n    padding: $spacer $spacer-2;\n    background-color: $gray-100;\n    text-align: center;\n    position: relative;\n\n    &::before {\n      position: absolute;\n      left: 0;\n      top: 15%;\n      height: 70%;\n      width: 2px;\n      background-color: $border-color;\n      content: \"\";\n    }\n\n    &:first-child::before {\n      width: 0;\n    }\n\n    @include media-breakpoint-down(lg) {\n      &:nth-of-type(3)::before {\n        width: 0;\n      }\n    }\n  }\n\n  &__value {\n    font-weight: $font-weight-semibold;\n\n    @include media-breakpoint-down(lg) {\n      font-size: $font-size-sm;\n    }\n  }\n\n  &__label {\n    font-size: $font-size-xs;\n    color: $secondary;\n  }\n}\n\n.button-grid {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr;\n  gap: $spacer-3;\n}\n</style>\n"],"names":["t","useI18n","userStore","useUserStore","user","availableAssistantTools","useAssistantTools","props","__props","emit","__emit","isSubmitting","ref","handleHide","handleHidden","getModelNameTranslation","modelId","normalizedModelId","enabledTools","computed","id","app","startConversation","handleRemix","handleSelect","starter"],"mappings":"0yBAMM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,o1CCChB,KAAA,CAAE,EAAAD,CAAE,EAAIC,EAAQ,EAEhBC,EAAYC,EAAa,EACzBC,EAAOF,EAAU,KAEjB,CAAE,wBAAAG,CAAA,EAA4BC,EAAkBF,CAAI,EAOpDG,EAAQC,EAIRC,EAAOC,EAEPC,EAAeC,EAAI,EAAK,EAExBC,EAAa,IAAM,CAAC,EAEpBC,EAAe,IAAM,CACzBL,EAAK,MAAM,CACb,EAEMM,EAA2BC,GAAoB,CAC/C,GAAA,CAACA,EAAgB,MAAA,GACrB,MAAMC,EAAoBD,EAAQ,QAAQ,IAAK,GAAG,EAC3C,OAAAhB,EAAE,yBAAyBiB,CAAiB,OAAO,CAC5D,EAEMC,EAAeC,EAA0B,IACxCZ,EAAM,UAEJA,EAAM,UAAU,aAAa,IAAKa,GAChCf,EAA0B,EAAA,KAAMgB,GAAQA,EAAI,KAAOD,CAAE,CAC7D,EAJ4B,CAAC,CAK/B,EAEKE,EAAoB,IAAM,CAC9BX,EAAa,MAAQ,GAChBF,EAAA,qBAAsBF,EAAM,SAAS,CAC5C,EAEMgB,EAAc,IAAM,CACnBd,EAAA,QAASF,EAAM,SAAS,CAC/B,EAEMiB,EAAgBC,GAAoB,CACnChB,EAAA,qBAAsBF,EAAM,UAAWkB,CAAO,CACrD"}