updated thumbs up thumbs down question

tcollins2011 · Oct 29, 2024 · bdb4801 · bdb4801
1 parent 0662716
commit bdb4801
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git 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
@@ -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>