keanu-weblite/src/components/content-credentials/CCSummary.vue
2025-10-15 15:45:29 +02:00

64 lines
1.8 KiB
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 { useI18n } from "vue-i18n";
import { interventionText } from "./intervention";
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) {
return interventionText(t, flags[0]) ?? "";
} 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>