keanu-weblite/src/components/content-credentials/MediaIntervention.vue

<template>
  <div class="cc-summary bubble-inset" v-if="mediaInterventionFlags.length > 0 && infoText.length > 0">
    <v-icon class="intervention-icon">{{
      showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
    }}</v-icon
    ><span class="common-caption-small" v-html="infoText" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { MediaInterventionFlags } from "../../models/proof";
import { useI18n } from "vue-i18n";
import { interventionText } from "./intervention";

const { t } = useI18n()

const { multiple, mediaInterventionFlags } = defineProps<{
  multiple: boolean;
  mediaInterventionFlags: MediaInterventionFlags[];
}>();

const showCheck = computed(() => {
  if (!multiple && mediaInterventionFlags.length == 1) {
    return !!mediaInterventionFlags[0].containsC2PA;
  } else if (multiple) {
    return mediaInterventionFlags.every((f) => !!f.containsC2PA)
  }
  return false;
});

const infoText = computed(() => {
  if (!multiple && mediaInterventionFlags.length == 1) {
    return interventionText(t, mediaInterventionFlags[0]) ?? "";
  } else if (multiple && mediaInterventionFlags.length >= 1) {
    const modifiedMedia = mediaInterventionFlags.some((f) => f.modified);
    const aiGeneratedMedia = mediaInterventionFlags.some((f) => f.generator === "ai");

    if (aiGeneratedMedia && modifiedMedia) {
      return "<b>" + t("cc.contains_modified_and_ai_generated") + "</b> " + t("cc.take_a_closer_look");
    } else if (modifiedMedia) {
      return "<b>" + t("cc.contains_modified") + "</b>";
    } else if (aiGeneratedMedia) {
      return "<b>" + t("cc.contains_ai_generated") + "</b>";
    } else {
      return "<b>" + t("cc.information_available") + "</b>";
    }
  }
  return "";
});
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;

.cc-summary {
  text-align: start;
  .intervention-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    color: #4642F1;
  }
}

.messageIn.from-admin .cc-summary {
  .intervention-icon {
    color: #908EF7;
  }
  .common-caption-small {
    color: #b0b0b0;
  }
}
</style>