From bdb48013d105665d9c7a88b2d3de1a0e12c665d7 Mon Sep 17 00:00:00 2001
From: tcollins2011 <tyler@nhlp.com>
Date: Tue, 29 Oct 2024 16:07:03 -0400
Subject: [PATCH] updated thumbs up thumbs down question

---
 .../DatasetInformation/DatasetError.vue       | 19 ++++++++++++++-----
 client/src/components/GalaxyWizard.vue        | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index fb56598c83ea..8f7eff9b801a 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -39,6 +39,9 @@ const jobDetails = ref<JobDetails>();
 const jobProblems = ref<JobInputSummary>();
 const resultMessages = ref<string[][]>([]);
 const dataset = ref<HDADetailed>();
+const feedback = ref<null | "up" | "down">(null);
+const isAiResponseReady = ref(false);
+
 
 const showForm = computed(() => {
     const noResult = !resultMessages.value.length;
@@ -155,6 +158,17 @@ onMounted(async () => {
                 >.
             </p>
 
+            <!-- Galaxy Wizard Component Integration -->
+            <h4 class="mb-3 h-md">What might have happened?</h4>
+            <p>
+                <span>
+                    We are using AI to analyze the issue and suggest possible fixes. Please be aware that its diagnosis may be inaccurate.
+                </span>
+            </p>
+            <b-card>
+                <GalaxyWizard view="error" :query="jobDetails.tool_stderr" context="tool_error" />
+            </b-card>
+
             <DatasetErrorDetails
                 :tool-stderr="jobDetails.tool_stderr"
                 :job-stderr="jobDetails.job_stderr"
@@ -188,11 +202,6 @@ onMounted(async () => {
                     </a>
                 </b>
             </p>
-            <!-- Galaxy Wizard Component Integration -->
-            <h4 class="mb-3 h-md">What might have happened?</h4>
-            <b-card>
-                <GalaxyWizard view="error" :query="jobDetails.tool_stderr" context="tool_error" />
-            </b-card>
             <h4 class="mb-3 h-md">Issue Report</h4>
 
             <BAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
diff --git a/client/src/components/GalaxyWizard.vue b/client/src/components/GalaxyWizard.vue
index 60f9c417d03b..9280a71846c7 100644
--- a/client/src/components/GalaxyWizard.vue
+++ b/client/src/components/GalaxyWizard.vue
@@ -4,6 +4,12 @@ import { ref } from "vue";
 import Heading from "./Common/Heading.vue";
 import LoadingSpan from "./LoadingSpan.vue";
 import { useMarkdown } from "@/composables/markdown";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faThumbsUp, faThumbsDown } from "@fortawesome/free-solid-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(faThumbsUp, faThumbsDown);
+
 const props = defineProps({
     view: {
         type: String,
@@ -21,6 +27,8 @@ const props = defineProps({
 const query = ref(props.query);
 const queryResponse = ref("");
 const busy = ref(false);
+const feedback = ref<null | "up" | "down">(null);
+
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true, removeNewlinesAfterList: true });
 // on submit, query the server and put response in display box
 function submitQuery() {
@@ -75,6 +83,16 @@ function submitQuery() {
                 <b-skeleton animation="wave" width="70%"></b-skeleton>
             </div>
             <div v-else class="chatResponse" v-html="renderMarkdown(queryResponse)" />
+
+            <div v-if="queryResponse && !feedback" class="feedback-buttons mt-2">
+                <h4>Was this answer helpful?</h4>
+                <b-button variant="success" :disabled="feedback !== null">
+                    <FontAwesomeIcon :icon="faThumbsUp" class="mr-1" />
+                </b-button>
+                <b-button variant="danger" :disabled="feedback !== null">
+                    <FontAwesomeIcon :icon="faThumbsDown" class="mr-1" />
+                </b-button>
+            </div>
         </div>
     </div>
 </template>