opendesk

1<template>
2  <div class="h-full overflow-y-auto flex flex-col isolate">
3    <NotificationList v-if="curNotification === null" :onSelect="onSelect" />
4    <component
5      v-else
6      :is="notificationToComponent[curNotification.name]"
7      :onBack="resetCurNotification"
8      :notification="curNotification"
9    ></component>
10  </div>
11</template>
12
13<script setup lang="ts">
14import { type Component, markRaw, ref } from "vue";
15import type { Notification, NotificationName } from "./types";
16import NotificationList from "./NotificationList.vue";
17import Acknowledgement from "./Acknowledgement.vue";
18import ReplyViaAgent from "./ReplyViaAgent.vue";
19import ShareFeedback from "./ShareFeedback.vue";
20import ReplyToAgents from "./ReplyToAgents.vue";
21
22const curNotification = ref<Notification | null>(null);
23
24const notificationToComponent: Record<
25  NotificationName,
26  Component<{ onBack: () => void; notification: Notification }>
27> = {
28  share_feedback: markRaw(ShareFeedback),
29  acknowledgement: markRaw(Acknowledgement),
30  reply_to_agents: markRaw(ReplyToAgents),
31  reply_via_agent: markRaw(ReplyViaAgent),
32};
33
34function resetCurNotification() {
35  curNotification.value = null;
36}
37
38function onSelect(notification: Notification) {
39  curNotification.value = notification;
40}
41</script>
42