Intervention flag display

src/components/content-credentials/CCSummary.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cc-summary" v-if="flags.length > 0 && infoText.length > 0">
+  <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
@@ -10,6 +10,10 @@
 <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;
@@ -27,21 +31,56 @@ const showCheck = computed(() => {
 
 const infoText = computed(() => {
   if (!multiple && flags.length == 1) {
-    if (flags[0].generator === "ai") {
-      return "<b>This image is generated by AI.</b> Take a closer look at the file details.";
-    } else if (flags[0].generator === "screenshot") {
-      return "<b>This is a screenshot.</b> Take a closer look at the file details.";
-    } else if (flags[0].edits) {
-      return "<b>This image has been modified.</b> Take a closer look at the file details.";
+    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>";
     }
-  } else if (flags.some((f) => f.generator === "ai")) {
-    return "<b>Contains AI generated media.</b> Take a closer look at the file details for each.";
-  } else if (flags.some((f) => f.generator === "screenshot")) {
-    return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
-  } else if (flags.some((f) => f.edits?.length)) {
-    return "<b>Contains modified media.</b> Take a closer look at the file details for each.";
   }
-  return "TODO - Content Credentials Info";
+  return "";
 });
 </script>
 

src/components/messages/composition/MessageImage.vue

@@ -5,9 +5,7 @@
     v-bind="{ ...$props, ...$attrs }"
     >
     <div class="bubble image-bubble" ref="imageRef">
-      <div class="bubble-inset" v-if="attachment?.proofHintFlags">
-        <CCSummary :multiple="false" :flags="attachment.proofHintFlags ? [attachment.proofHintFlags] : []" />
-      </div>
+      <CCSummary :multiple="false" :flags="attachment?.proofHintFlags ? [attachment.proofHintFlags] : []" />
 
       <ImageWithProgress v-if="attachment"
         :aspect-ratio="16 / 9"

src/components/messages/composition/MessageThread.vue

@@ -1,9 +1,7 @@
 <template>
   <component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview">
     <div class="bubble">
-      <div class="bubble-inset" v-if="showCCSummary">
-        <CCSummary :multiple="items.length > 1" :flags="proofHintFlags" />
-      </div>
+      <CCSummary :multiple="items.length > 1" :flags="proofHintFlags" />
       <div class="original-message bubble-inset" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
         <div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />