fix: add back article feedback

desk/src/pages/knowledge-base/Article.vue

@@ -19,14 +19,13 @@
     </LayoutHeader>
 
     <div
-      class="py-4 mx-auto w-full max-w-3xl px-5 flex"
-      :class="editable && 'overflow-hidden'"
+      class="py-4 mx-auto w-full max-w-3xl px-5 flex flex-col"
       v-if="!article.loading"
     >
       <!-- article Info -->
       <div
         class="flex flex-col gap-3 p-4 w-full"
-        :class="editable && 'border rounded-lg  '"
+        :class="editable && 'border rounded-lg overflow-hidden'"
       >
         <!-- Top Element -->
         <div class="flex flex-col gap-3">
@@ -99,6 +98,9 @@
           </template>
         </TextEditor>
       </div>
+      <div class="p-4">
+        <ArticleFeedback :feedback="feedback" :article-id="articleId" />
+      </div>
     </div>
     <MoveToCategoryModal v-model="moveToModal" @move="handleMoveToCategory" />
   </div>
@@ -128,10 +130,11 @@ import { useUserStore } from "@/stores/user";
 import LayoutHeader from "@/components/LayoutHeader.vue";
 import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal.vue";
 import DiscardButton from "@/components/DiscardButton.vue";
-import { Resource, Article } from "@/types";
+import { Resource, Article, FeedbackAction } from "@/types";
 import IconDot from "~icons/lucide/dot";
 import { createToast, textEditorMenuButtons, copyToClipboard } from "@/utils";
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+import ArticleFeedback from "./ArticleFeedback.vue";
 
 const props = defineProps({
   articleId: {
@@ -151,6 +154,7 @@ const editable = ref(route.query.isEdit ?? false);
 
 const content = ref("");
 const title = ref("");
+const feedback = ref<FeedbackAction>();
 
 const titleRef = ref(null);
 watch(
@@ -173,6 +177,7 @@ const article: Resource<Article> = createResource({
   onSuccess: (data: Article) => {
     content.value = data.content;
     title.value = data.title;
+    feedback.value = data.feedback;
   },
 });
 
@@ -299,12 +304,11 @@ watch([() => content.value, () => title.value], ([newContent, newTitle]) => {
 });
 
 const editorClass = computed(() => {
-  let basicStyles =
-    "rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)]";
-  if (editable.value) {
-    basicStyles += " overflow-auto";
-  }
-  return basicStyles;
+  return [
+    "rounded-b-lg max-w-[unset] prose-sm",
+    editable.value &&
+      "overflow-auto h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)]",
+  ];
 });
 
 const options = computed(() => [

desk/src/pages/knowledge-base/ArticleFeedback.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="flex items-center justify-between mb-8 p-4 rounded-lg bg-gray-50">
+    <!-- Feedback Section -->
+    <div>
+      <!-- was this article helpful? -->
+      <div class="flex items-center gap-2">
+        <span class="text-gray-800 text-sm"
+          >Did this article solve your issue?</span
+        >
+        <div class="flex items-center gap-1">
+          <component
+            :is="_feedback === 1 ? ThumbsUpFilledIcon : ThumbsUpIcon"
+            class="w-4 h-4 cursor-pointer"
+            @click="handleFeedbackClick(1)"
+          />
+          <component
+            :is="_feedback === 2 ? ThumbsDownFilledIcon : ThumbsDownIcon"
+            class="w-4 h-4 cursor-pointer"
+            @click="handleFeedbackClick(2)"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- Create a ticket CTA -->
+    <div class="flex items-center justify-center gap-2">
+      <span class="font-normal text-sm">
+        Can’t find what you’re looking for?
+      </span>
+      <router-link :to="{ name: 'TicketNew' }">
+        <p class="underline font-bold text-sm">Create a ticket &rightarrow;</p>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FeedbackAction } from "@/types";
+import {
+  ThumbsUpIcon,
+  ThumbsUpFilledIcon,
+  ThumbsDownIcon,
+  ThumbsDownFilledIcon,
+} from "@/components/icons";
+import { setFeedback } from "@/stores/knowledgeBase";
+import { ref } from "vue";
+
+interface P {
+  feedback: FeedbackAction;
+  articleId: string;
+}
+
+const props = withDefaults(defineProps<P>(), {
+  feedback: 0,
+});
+
+const _feedback = ref(props.feedback);
+
+function handleFeedbackClick(action: FeedbackAction) {
+  _feedback.value = action;
+  if (action === props.feedback) return;
+  setFeedback.submit({ articleId: props.articleId, action });
+}
+</script>
+
+<style scoped></style>

desk/src/stores/knowledgeBase.ts

@@ -107,3 +107,17 @@ export const categoryName = createResource({
     return { category };
   },
 });
+
+//feedback
+export const setFeedback = createResource({
+  url: "run_doc_method",
+  debounce: 300,
+  makeParams: ({ articleId, action }) => ({
+    dt: "HD Article",
+    dn: articleId,
+    method: "set_feedback",
+    args: {
+      value: action,
+    },
+  }),
+});

helpdesk/api/knowledge_base.py

@@ -14,6 +14,14 @@ def get_article(name: str):
         frappe.throw(_("Access denied"), frappe.PermissionError)
 
     author = get_user_info_for_avatar(article["author"])
+    feedback = (
+        frappe.db.get_value(
+            "HD Article Feedback",
+            {"article": name, "user": frappe.session.user},
+            "feedback",
+        )
+        or 0
+    )
 
     return {
         "name": article.name,
@@ -28,6 +36,7 @@ def get_article(name: str):
             "HD Article Category", article.category, "category_name"
         ),
         "category_id": article.category,
+        "feedback": int(feedback),
     }
 
     return article