add UI for modifying and answer and saving it to the rag_db

pykoi/frontend/src/lib/Chatbots/Components/Answer.svelte

@@ -0,0 +1,95 @@
+<script>
+    import { chatLog } from "../../../store.js";
+    import { select } from "d3-selection";
+
+    export let message = {};
+    export let feedback = false;
+    export let index = 0;
+
+    async function insertVote(feedbackUpdate) {
+        const response = await fetch("/chat/rag_table/update", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(feedbackUpdate),
+        });
+
+        if (response.ok) {
+            console.log("response", response);
+        } else {
+            const err = await response.text();
+            alert(err);
+        }
+    }
+
+    function logVote(event, vote, index) {
+        const messageLog = $chatLog[index];
+        messageLog.vote = vote;
+        const feedbackUpdate = {
+            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);
+    }
+</script>
+
+<div>
+    {message.answer}
+</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>
+    .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 {
+        display: flex;
+        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);
+    }
+</style>

pykoi/frontend/src/lib/Chatbots/Components/ModifiedAnswer.svelte

@@ -0,0 +1,87 @@
+<script>
+    import { onMount } from "svelte";
+    export let message = {};
+    const answerPlaceholder = "";
+    let elm;
+
+    const updateAnswer = async (newAnswer) => {
+        const answerUpdate = {
+            id: message.id,
+            new_answer: newAnswer,
+        };
+        const response = await fetch("/chat/rag_table/update_answer", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(answerUpdate),
+        });
+
+        if (response.ok) {
+            console.log("Answer updated successfully", response);
+            message.edited_answer = newAnswer;
+        } else {
+            const err = await response.text();
+            alert(err);
+        }
+    };
+
+    const handleUpdate = (e) => {
+        e.preventDefault();
+        updateAnswer(message.edited_answer);
+    };
+
+    const handleReset = (e) => {
+        e.preventDefault();
+        updateAnswer(answerPlaceholder);
+    };
+
+    const useText = (e) => {
+        e.preventDefault();
+        message.edited_answer = message.answer;
+    };
+
+    const handleKeystroke = (e) => {
+        if (e.key == "Enter" && message.edited_answer === answerPlaceholder) {
+            e.preventDefault();
+            console.log("ENTER");
+            message.edited_answer = message.answer;
+        }
+    };
+
+    onMount(function () {
+        elm.focus();
+    });
+</script>
+
+<form>
+    <textarea
+        bind:value={message.edited_answer}
+        placeholder={message.answer}
+        on:keydown={handleKeystroke}
+        bind:this={elm}
+    />
+    <div class="button-container">
+        <div class="note">
+            {#if message.edited_answer === answerPlaceholder}
+                Press ENTER to autofill with the RAG answer.
+            {/if}
+        </div>
+        <div>
+            <button on:click={handleUpdate}>Update</button>
+            <button on:click={handleReset}>Reset</button>
+        </div>
+    </div>
+</form>
+
+<style>
+    .button-container {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .note {
+        font-size: var(--smallText);
+        color: var(--gray);
+    }
+</style>

pykoi/frontend/src/lib/UIComponents/Tabs.svelte

@@ -0,0 +1,69 @@
+<script>
+    export let items = [];
+    export let activeTabValue = 1;
+    export let tabProps = {};
+
+    const handleClick = (tabValue) => () => (activeTabValue = tabValue);
+</script>
+
+<ul>
+    {#each items as item}
+        <li class={activeTabValue === item.value ? "active" : ""}>
+            <span on:click={handleClick(item.value)}>
+                <h5 class="bold">{item.label}</h5>
+            </span>
+        </li>
+    {/each}
+</ul>
+{#each items as item}
+    {#if activeTabValue == item.value}
+        <div class="box">
+            <svelte:component this={item.component} {...tabProps} />
+        </div>
+    {/if}
+{/each}
+
+<style>
+    .box {
+        margin-bottom: 10px;
+        padding: 40px;
+        border: 1px solid #dee2e6;
+        border-radius: 0 0 0.5rem 0.5rem;
+        border-top: 0;
+    }
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+        border-bottom: 1px solid #dee2e6;
+    }
+    li {
+        margin-bottom: -1px;
+    }
+
+    span {
+        border: 1px solid transparent;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
+        display: block;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+    }
+
+    span:hover {
+        border-color: #e9ecef #e9ecef #dee2e6;
+        color: #495057;
+    }
+
+    li > span {
+        color: var(--grey);
+    }
+
+    li.active > span {
+        color: #495057;
+        background-color: #fff;
+        border-color: #dee2e6 #dee2e6 #fff;
+    }
+</style>