From 1ed565985a69cd76c89557e72c5e0a27314eb2ba Mon Sep 17 00:00:00 2001
From: kodaline <doncheva.adelina@gmail.com>
Date: Tue, 22 Oct 2024 20:04:22 +0200
Subject: [PATCH] add: display doc metadata

added a simple element "hide/show metadata" to show the metadata for
each doc element. It shows the metadata of the selected doc

related to issue #103
---
 src/components/MemorySelect.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/MemorySelect.vue b/src/components/MemorySelect.vue
index 0527f37..c0e9deb 100644
--- a/src/components/MemorySelect.vue
+++ b/src/components/MemorySelect.vue
@@ -4,6 +4,11 @@ defineProps<{
 }>()
 
 const selectedCollection = ref('episodic')
+let showMeta = ref(false)
+let selectedItem = ref('')
+const showMetadata = (id: string) => {
+	selectedItem.value = selectedItem.value === id ? '' : id;
+}
 </script>
 
 <template>
@@ -41,6 +46,23 @@ const selectedCollection = ref('episodic')
 					<p class="truncate">{{ item.metadata.source }} {{ item.metadata.name ? `(${item.metadata.name})` : '' }}</p>
 					<p class="whitespace-nowrap">{{ new Date(item.metadata.when * 1000).toLocaleString() }}</p>
 				</div>
+				<div
+					class="indicator-item indicator-center tooltip before:rounded-lg pt-8 before:font-medium before:text-base-100"
+					>
+					<span class="badge badge-neutral cursor-pointer font-medium text-base-100" @click="showMetadata(item.id)">
+						{{ showMeta ? 'Hide Metadata' : 'View Metadata' }}
+					</span>
+				</div>
+				<div v-if="selectedItem === item.id" class="font-medium text-base-100 shadow-lg">
+					<ul class="list-disc">
+						<li v-for="(el, value) in item.metadata" :key="value" class="flex justify-between items-center py-2">
+							<div class="flex flex-col text-left">
+									<div class="text-sm font-semibold text-neutral/90">{{ value }}</div>
+							</div>
+							<div class="text-sm text-right text-neutral/70">{{ el }}</div>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</template>
 		<p v-else class="text-center text-sm font-medium">