From 0bf1e8a0d1e0412a3b375fc2a66c0033d96f7af3 Mon Sep 17 00:00:00 2001
From: Jojo Ortiz <ortiz.jroman@gmail.com>
Date: Wed, 27 Sep 2023 10:35:33 -0700
Subject: [PATCH] add Download Data button and DownloadModal to Chatbot and
 RAGChatbot

---
 .../frontend/src/lib/Chatbots/Chatbot.svelte  | 13 ++++--
 .../src/lib/Chatbots/RAGChatbot.svelte        | 42 ++++---------------
 2 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte b/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte
index 9f30e0b..43678e5 100644
--- a/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte
+++ b/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte
@@ -2,9 +2,10 @@
   import { chatLog } from "../../store";
   import { onMount } from "svelte";
   import { select } from "d3-selection";
-  import { slide } from "svelte/transition";
   import { writable } from "svelte/store";
-  import { tooltip } from "../../utils.js";
+  import DownloadModal from "./Components/DownloadModal.svelte";
+
+  let showModal = false;
 
   export let feedback = false;
   export let is_retrieval = false;
@@ -132,11 +133,17 @@
       .style("opacity", 1);
   }
 
+  function handleDownloadClick () {
+    showModal = true;
+  }
+
   let chatLetters = [...Array(10).keys()].map((i) =>
     String.fromCharCode(65 + i)
   );
 </script>
 
+<DownloadModal bind:showModal table="qa_table"/>
+
 <div class="ranked-feedback-container">
   <div class="instructions">
     <h5 class="underline bold">Vote Feedback Instructions</h5>
@@ -146,7 +153,7 @@
       button. If the repsonse is not satisfactory, click on the
       <span class="inline-button red">👎</span> button.
     </p>
-    <!-- <button>Download Data</button> -->
+    <button on:click={handleDownloadClick}>Download Data</button>
   </div>
   <div class="ranked-chat">
     <section class="chatbox">
diff --git a/pykoi/frontend/src/lib/Chatbots/RAGChatbot.svelte b/pykoi/frontend/src/lib/Chatbots/RAGChatbot.svelte
index a68be8a..58f2cdc 100644
--- a/pykoi/frontend/src/lib/Chatbots/RAGChatbot.svelte
+++ b/pykoi/frontend/src/lib/Chatbots/RAGChatbot.svelte
@@ -1,7 +1,6 @@
 <script>
   import { chatLog, checkedDocs } from "../../store";
   import { onMount } from "svelte";
-  import { select } from "d3-selection";
   import { writable } from "svelte/store";
   import Dropdown from "./Components/Dropdown.svelte";
   import { tooltip } from "../../utils.js";
@@ -9,6 +8,7 @@
   import Tabs from "../UIComponents/Tabs.svelte";
   import ModifiedAnswer from "./Components/ModifiedAnswer.svelte";
   import Answer from "./Components/Answer.svelte";
+  import DownloadModal from "./Components/DownloadModal.svelte";
 
   export let feedback = false;
   export let is_retrieval = false;
@@ -18,7 +18,7 @@
   let mymessage = "";
   let messageplaceholder = "";
   let chatLoading = false;
-  let editting_response = true;
+  let showModal = false;
 
   let items = [
     {
@@ -146,8 +146,14 @@
     const ragSourcesString = ragSources.join(", ");
     return ragSourcesString;
   }
+
+  function handleDownloadClick() {
+    showModal = true;
+  }
 </script>
 
+<DownloadModal bind:showModal table="rag_table" />
+
 <div class="ranked-feedback-container">
   <div class="instructions">
     <h5 class="underline bold">Vote Feedback Instructions</h5>
@@ -157,7 +163,7 @@
       button. If the response is not satisfactory, click on the
       <span class="inline-button red">👎</span> button.
     </p>
-    <!-- <button>Download Data</button> -->
+    <button on:click={handleDownloadClick}>Download Data</button>
   </div>
   <div class="ranked-chat">
     <section class="chatbox">
@@ -224,37 +230,7 @@
     grid-template-columns: 20% 80%;
     width: 100%;
   }
-  /* .small-button {
-    margin-left: 10px;
-    background: none;
-    border: 3px solid transparent;
-    color: inherit;
-    padding: 6px 10px;
-    cursor: pointer;
-    box-shadow: none;
-    font-size: var(--smallText);
-  }
-
-  .feedback-buttons {
-    text-align: center;
-    margin: auto;
-    width: 20%;
-  }
 
-  .small-button:hover {
-    box-shadow: var(--shadow-md);
-  }
-
-  .thumbs-up,
-  .thumbs-up:hover,
-  .thumbs-up::selection {
-    background: var(--green);
-  }
-  .thumbs-down,
-  .thumbs-down:hover,
-  .thumbs-down::selection {
-    background: var(--red);
-  } */
   .ranked-chat {
     height: 100vh;
     display: grid;