Start on intervention display

src/components/content-credentials/CCSummary.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="cc-summary" v-if="props.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";
+
+const props = defineProps<{
+  flags: ProofHintFlags[];
+}>();
+
+const showCheck = computed(() => {
+  return props.flags.some((f) => f?.valid);
+});
+
+const infoText = computed(() => {
+  if (props.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 (props.flags.some((f) => f.generator === "screenshot")) {
+    return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
+  }
+  return "TODO - Content Credentials Info";
+});
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+
+.cc-summary {
+  .intervention-icon {
+    width: 12px;
+    height: 12px;
+    display: inline-flex;
+  }
+}
+</style>