feat(agents): Empty state enhanced

src/components/EmptyState.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tw-mx-auto tw-mt-10 tw-w-fit">
-    <img :alt="imageAlt" :src="imageLink" />
+    <img :alt="imageAlt" :src="imageLink" class="tw-mx-auto" />
     <p class="tw-text-lg text-purple-700 tw-w-fit tw-mx-auto">{{ title }}</p>
     <p class="text-primary tw-w-fit tw-mx-auto">{{ description }}</p>
   </div>

src/pages/Agents.vue

@@ -11,23 +11,31 @@
       <p>Manage your agents</p>
 
       <q-linear-progress v-if="!agentStore.isLoaded" indeterminate />
-      <empty-state
-        v-else-if="agentStore.agents.length === 0"
-        description="Contact a team member to get access to the private beta"
-        image-alt="No agents"
-        image-link="/assets/empty-states/knowledge-base.png"
-        title="No agents"
-      />
+      <div v-else-if="agentStore.agents.length === 0">
+        <empty-state
+          description="Contact the team member if you wish to access to the private beta"
+          image-alt="No agents"
+          image-link="/assets/empty-states/agents.png"
+          title="No agents"
+        />
+
+        <div class="tw-mx-auto tw-w-fit tw-mt-2">
+          <a href="https://t.me/libertai" target="_blank">
+            <q-btn no-caps rounded>Telegram</q-btn>
+          </a>
+        </div>
+      </div>
+
       <div v-else class="tw-mt-5 tw-space-y-4">
         <div v-for="agent of agentStore.agents" :key="agent.id">
           <p>Agent {{ agent.id }}</p>
           <a v-if="agent.vm_hash" :href="`https://aleph.sh/vm/${agent.vm_hash}`"
             >https://aleph.sh/vm/{{ agent.vm_hash }}</a
           >
           <p v-else>Not yet deployed</p>
-          <p>Last update: {{ dayjs.unix(agent.last_update) }}</p>
+          <p>Last update: {{ dayjs().to(dayjs.unix(agent.last_update)) }}</p>
           <p v-if="agent.secret">Secret: {{ agent.secret }}</p>
-          <q-btn no-caps rounded @click="agentStore.getAgentSecret(agent.id)">Get secret</q-btn>
+          <q-btn no-caps rounded @click="getAgentSecret(agent.id)">Get secret</q-btn>
         </div>
       </div>
     </section>
@@ -39,7 +47,20 @@ import EmptyState from 'components/EmptyState.vue';
 import LtaiIcon from 'components/libertai/LtaiIcon.vue';
 import dayjs from 'dayjs';
 import AuthenticatedPage from 'layouts/AuthenticatedPage.vue';
+import { useQuasar } from 'quasar';
 import { useAgentStore } from 'stores/agent';
 
+const $q = useQuasar();
 const agentStore = useAgentStore();
+
+const getAgentSecret = async (agentId: string) => {
+  try {
+    await agentStore.getAgentSecret(agentId);
+  } catch (error) {
+    $q.notify({
+      message: (error as Error)?.message ?? 'Unable to get the agent secret',
+      color: 'negative',
+    });
+  }
+};
 </script>

src/stores/agent.ts

@@ -31,6 +31,7 @@ export const useAgentStore = defineStore('agents', {
       const activeAgentSubscriptions = subscriptions.filter((sub) => sub.is_active && sub.type === 'agent');
 
       if (activeAgentSubscriptions.length === 0) {
+        this.agents = [];
         this.isLoaded = true;
         return;
       }
@@ -45,7 +46,6 @@ export const useAgentStore = defineStore('agents', {
           }),
         )
       ).filter((agent) => agent !== undefined);
-      console.log(this.agents);
 
       this.isLoaded = true;
     },
@@ -70,7 +70,6 @@ export const useAgentStore = defineStore('agents', {
         },
       });
 
-      // TODO: handle errors in the call to this function
       if (secretResponse.data === undefined) {
         throw new Error(secretResponse.error.detail?.toString() ?? 'Unable to get the agent secret');
       }