74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
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>
|