feat(captain): add FAQ suggestion review interface

2026-07-14 23:00:38 +05:30
parent 44ad817fb3
commit d3e1ad56ac
8 changed files with 673 additions and 304 deletions
@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Policy from 'dashboard/components/policy.vue';
+
+const props = defineProps({
+  suggestion: {
+    type: Object,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['approve', 'dismiss', 'review']);
+const { t } = useI18n();
+
+const sourceLabel = computed(() =>
+  t('CAPTAIN.FAQ_SUGGESTIONS.SOURCE_COUNT', {
+    count: props.suggestion.source_count,
+  })
+);
+
+const updatedAt = computed(() =>
+  dynamicTime(props.suggestion.updated_at || props.suggestion.created_at)
+);
+
+const language = computed(() =>
+  props.suggestion.language?.replace('_', '-').toUpperCase()
+);
+</script>
+
+<template>
+  <article
+    class="group flex flex-col gap-4 rounded-xl border border-n-weak bg-n-solid-2 p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-n-strong hover:shadow-md"
+  >
+    <div
+      class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+    >
+      <div class="min-w-0">
+        <div class="mb-3 flex flex-wrap items-center gap-2">
+          <span
+            class="inline-flex items-center gap-1.5 rounded-full bg-n-brand/10 px-2.5 py-1 text-xs font-medium text-n-blue-11"
+          >
+            <Icon icon="i-lucide-messages-square" class="size-3.5" />
+            {{ sourceLabel }}
+          </span>
+          <span
+            v-if="language"
+            class="rounded-full bg-n-alpha-2 px-2.5 py-1 text-xs font-medium text-n-slate-11"
+          >
+            {{ language }}
+          </span>
+        </div>
+        <h3 class="text-base font-medium leading-6 text-n-slate-12">
+          {{ suggestion.question }}
+        </h3>
+      </div>
+      <Button
+        :label="$t('CAPTAIN.FAQ_SUGGESTIONS.REVIEW')"
+        icon="i-lucide-list-collapse"
+        size="sm"
+        variant="faded"
+        color="slate"
+        class="shrink-0"
+        @click="emit('review', suggestion)"
+      />
+    </div>
+
+    <p class="line-clamp-3 text-sm leading-6 text-n-slate-11">
+      {{ suggestion.answer }}
+    </p>
+
+    <div
+      class="flex flex-col gap-3 border-t border-n-weak pt-4 sm:flex-row sm:items-center sm:justify-between"
+    >
+      <div
+        class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-xs text-n-slate-10"
+      >
+        <span class="inline-flex min-w-0 items-center gap-1.5">
+          <Icon icon="i-woot-captain" class="size-3.5 shrink-0" />
+          <span class="truncate">{{ suggestion.assistant?.name }}</span>
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+          <Icon icon="i-lucide-clock-3" class="size-3.5" />
+          {{ updatedAt }}
+        </span>
+      </div>
+
+      <Policy :permissions="['administrator']">
+        <div class="flex items-center gap-2">
+          <Button
+            :label="$t('CAPTAIN.FAQ_SUGGESTIONS.DISMISS')"
+            icon="i-lucide-x"
+            size="sm"
+            variant="ghost"
+            color="slate"
+            :disabled="isLoading"
+            @click="emit('dismiss', suggestion)"
+          />
+          <Button
+            :label="$t('CAPTAIN.FAQ_SUGGESTIONS.APPROVE')"
+            icon="i-lucide-circle-check-big"
+            size="sm"
+            :is-loading="isLoading"
+            :disabled="isLoading"
+            @click="emit('approve', suggestion)"
+          />
+        </div>
+      </Policy>
+    </div>
+  </article>
+</template>