Start on C2PA and Exif info boxes on upload

src/components/content-credentials/C2PAInfo.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="c2pa">
+    <div class="detail-title">
+      {{ t("file_mode.content_credentials") }}
+    </div>
+    <div class="detail-row" v-if="dateCreated"><v-icon>$vuetify.icons.ic_exif_time</v-icon>{{ dateCreated }}</div>
+    <div class="detail-row" v-if="creator"><v-icon>$vuetify.icons.ic_exif_device_camera</v-icon>{{ creator }}</div>
+    <div class="detail-row" v-if="aiInferenceResult?.aiGenerated">
+      <v-icon>$vuetify.icons.ic_cc_ai</v-icon>{{ t("file_mode.ai_used") }}
+    </div>
+
+    <!-- {{ JSON.stringify(props.c2pa, undefined, 4) }} -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { AIInferenceResult, C2PAActionsAssertion, C2PAData } from "../../models/proof";
+import { computed } from "vue";
+import dayjs from "dayjs";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  c2pa?: C2PAData;
+  aiInferenceResult?: AIInferenceResult;
+}>();
+
+const dateCreated = computed(() => {
+  try {
+    const manifests = Object.values(props.c2pa?.manifest_info.manifests ?? {});
+    for (const manifest of manifests) {
+      const createAssertion = manifest.assertions.find((a) => {
+        if (a.label === "c2pa.actions") {
+          const actions = (a.data as C2PAActionsAssertion)?.actions ?? [];
+          if (actions.find((a) => a.action === "c2pa.created")) {
+            return true;
+          }
+        }
+        return false;
+      });
+      if (createAssertion) {
+        const d = dayjs(Date.parse(manifest.signature_info.time));
+        return d.format("lll");
+      }
+    }
+  } catch (error) {}
+  return undefined;
+});
+
+const creator = computed(() => {
+  try {
+    const manifests = Object.values(props.c2pa?.manifest_info.manifests ?? {});
+    for (const manifest of manifests) {
+      for (const assertion of manifest.assertions) {
+        if (assertion.label === "c2pa.actions") {
+          const actions = (assertion.data as C2PAActionsAssertion)?.actions ?? [];
+          const a = actions.find((a) => a.action === "c2pa.created");
+          if (a) {
+            return a.softwareAgent;
+          }
+        }
+        return false;
+      }
+    }
+  } catch (error) {}
+  return undefined;
+});
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>