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

<template>
  <div class="cc-summary bubble-inset" v-if="flags.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 { ProofHintFlags } from "../../models/proof";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";

const { t } = useI18n()

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

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

const infoText = computed(() => {
  if (!multiple && flags.length == 1) {
    const f = flags[0];
    let res = "";
   
    if (f.generator !== "unknown" && f.generatorSource === "c2pa") {
      if (f.generator === "camera") {
        res += "<b>" + t("cc.captured_with_camera") + "</b> ";
      } else if (f.generator === "screenshot") {
        res += "<b>" + t("cc.screenshot") + "</b> ";
      } else if (f.generator === "ai") {
        res += "<b>" + t("cc.generated_with_ai") + "</b> ";
      }
      if ((f.edits?.length ?? 0) > 0) {
        res += "<b>" + t("cc.modified") + "</b> ";
      }
      if (f.creationDate && dayjs().diff(f.creationDate, "month") >= 3) {
        res += "<b>" + t("cc.older_than_n_months", {n: 3}) + "</b> ";
      }
      return res;
    } else if (f.generator !== "unknown") {
      if (f.generator === "camera") {
        res += "<b>" + t("cc.captured_with_camera") + "</b> ";
      } else if (f.generator === "screenshot") {
        res += "<b>" + t("cc.screenshot_probably") + "</b> ";
        return res;
      } else if (f.generator === "ai") {
        res += "<b>" + t("cc.generated_with_ai") + "</b> ";
      }
      if ((f.edits?.length ?? 0) > 0) {
        res += "<b>" + t("cc.modified") + "</b> ";
      }
      if (f.creationDate && dayjs().diff(f.creationDate, "month") >= 3) {
        res += "<b>" + t("cc.older_than_n_months", {n: 3}) + "</b> ";
      }
      return res;
    }
  } else if (multiple && flags.length >= 1) {
    const modifiedMedia = flags.some((f) => f.edits?.length);
    const aiGeneratedMedia = flags.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;
  }
}
</style>