Merge pull request #81 from CambioML/jojo-branch

Update vote buttons styling based on vote_status
CambioML · Oct 17, 2023 · a993b13 · a993b13
2 parents e4e222a + 6cc3351
commit a993b13
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 61 deletions.
diff --git a/pykoi/frontend/dist/assets/index-6fbf13ee.js → pykoi/frontend/dist/assets/index-6c166968.js b/pykoi/frontend/dist/assets/index-6fbf13ee.js → pykoi/frontend/dist/assets/index-6c166968.js
diff --git a/pykoi/frontend/dist/assets/index-761f2ce2.css b/pykoi/frontend/dist/assets/index-761f2ce2.css
diff --git a/pykoi/frontend/dist/assets/index-857a4a8b.css b/pykoi/frontend/dist/assets/index-857a4a8b.css
diff --git a/pykoi/frontend/dist/index.html b/pykoi/frontend/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Svelte</title>
-    <script type="module" crossorigin src="/assets/index-6fbf13ee.js"></script>
-    <link rel="stylesheet" href="/assets/index-857a4a8b.css">
+    <script type="module" crossorigin src="/assets/index-6c166968.js"></script>
+    <link rel="stylesheet" href="/assets/index-761f2ce2.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte b/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte
@@ -4,6 +4,7 @@
   import { select } from "d3-selection";
   import { writable } from "svelte/store";
   import DownloadModal from "./Components/DownloadModal.svelte";
+    import Answer from "./Components/Answer.svelte";
 
   let showModal = false;
 
@@ -173,22 +174,7 @@
                   <p>{message.question}</p>
                 </div>
                 <div class="answers">
-                  <div class="answer">
-                    <h5 class="bold">Response:</h5>
-                    <p>{message.answer}</p>
-                    {#if feedback}
-                      <div class="feedback-buttons">
-                        <button
-                          on:click={(event) => logVote(event, "up", index)}
-                          class="small-button thumbs-up">👍</button
-                        >
-                        <button
-                          on:click={(event) => logVote(event, "down", index)}
-                          class="small-button thumbs-down">👎</button
-                        >
-                      </div>
-                    {/if}
-                  </div>
+                  <Answer {feedback} {message} {index} title={true}/>
                 </div>
               </div>
             </div>
@@ -450,4 +436,14 @@
     background: inherit;
     clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
   }
+
+  .vote-selected {
+        border: "3px solid black";
+        opacity: 1;
+    }
+
+    .vote-not-selected {
+        border: "3px solid transparent";
+        opacity: 0.65;
+    }
 </style>
diff --git a/pykoi/frontend/src/lib/Chatbots/Components/Answer.svelte b/pykoi/frontend/src/lib/Chatbots/Components/Answer.svelte
@@ -1,10 +1,10 @@
 <script>
     import { chatLog } from "../../../store.js";
-    import { select } from "d3-selection";
 
     export let message = {};
     export let feedback = false;
     export let index = 0;
+    export let title = false;
 
     async function insertVote(feedbackUpdate) {
         const response = await fetch("/chat/rag_table/update", {
@@ -17,6 +17,7 @@
 
         if (response.ok) {
             console.log("response", response);
+            message.vote_status = feedbackUpdate.vote_status;
         } else {
             const err = await response.text();
             alert(err);
@@ -30,36 +31,43 @@
             id: index + 1, // increment bc sqlite 1-indexed
             vote_status: vote,
         };
-
         insertVote(feedbackUpdate);
-
-        select(event.currentTarget.parentNode)
-            .selectAll("button")
-            .style("border", "3px solid transparent")
-            .style("opacity", 0.65);
-        select(event.currentTarget)
-            .style("border", "3px solid var(--black)")
-            .style("opacity", 1);
     }
+    console.log("Answer", message.vote_status);
 </script>
 
-<div>
-    {message.answer}
+<div class="answer">
+    {#if title}
+        <h5 class="bold">Response:</h5>
+    {/if}
+    <p>{message.answer}</p>
+    {#if feedback}
+        <div class="feedback-buttons">
+            <button
+                on:click={(event) => logVote(event, "up", index)}
+                class="small-button thumbs-up"
+                class:vote-selected={message.vote_status === "up"}
+                class:vote-not-selected={message.vote_status === "down"}
+                >👍</button
+            >
+            <button
+                on:click={(event) => logVote(event, "down", index)}
+                class="small-button thumbs-down"
+                class:vote-selected={message.vote_status === "down"}
+                class:vote-not-selected={message.vote_status === "up"}
+                >👎</button
+            >
+        </div>
+    {/if}
 </div>
-{#if feedback}
-    <div class="feedback-buttons">
-        <button
-            on:click={(event) => logVote(event, "up", index)}
-            class="small-button thumbs-up">👍</button
-        >
-        <button
-            on:click={(event) => logVote(event, "down", index)}
-            class="small-button thumbs-down">👎</button
-        >
-    </div>
-{/if}
 
 <style>
+    .answer {
+        display: inline-block;
+        text-align: left;
+        padding: 10px;
+        border: 1px solid var(--black);
+    }
     .small-button {
         margin-left: 10px;
         background: none;
@@ -92,4 +100,14 @@
     .thumbs-down::selection {
         background: var(--red);
     }
+
+    .vote-selected {
+        border: 3px solid black;
+        opacity: 1;
+    }
+
+    .vote-not-selected {
+        border: 3px solid transparent;
+        opacity: 0.65;
+    }
 </style>