Rename ProofHintFlags to MediaMetadata

Also, introduce the MediaInterventionFlags class to not send all metadata across, just the info needed for showing the intervention flags.

src/components/content-credentials/MediaIntervention.vue

@@ -0,0 +1,64 @@
+<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;
+  }
+}
+</style>