Update static/demo/index.html

static/demo/index.html

@@ -6,30 +6,52 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Responsible Prompting – Multi‐Turn Chat + Graph</title>
 
-    <script type="text/javascript" src="static/demo/js/d3.v7.min.js"></script>
-    <script type="text/javascript" src="static/demo/js/jquery-3.7.1.min.js"></script>
+    <!-- IBM Plex Sans -->
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap"
+        rel="stylesheet" />
+
     <!-- Carbon CSS (for tabs and tags) -->
-    <link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" />
+    <!-- <link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" /> -->
+
+    <link rel="stylesheet" href="./../styles/carbon-components.min.css" />
+
+    <script type="text/javascript" src="./js/d3.v7.min.js"></script>
+    <script type="text/javascript" src="./js/jquery-3.7.1.min.js"></script>
 
     <style>
-        /* ---------- Overall Layout ---------- */
+        /* ================== Global ================== */
         html,
         body {
             margin: 0;
             padding: 0;
             height: 100vh;
+            /* background-color: #f4f4f4; */
             font-family: "IBM Plex Sans", sans-serif;
+            color: #161616;
         }
 
         body {
             display: flex;
             flex-direction: column;
+            overflow: hidden;
+            /* center within a max width */
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 1rem 2rem;
+            box-sizing: border-box;
+        }
+
+        a {
+            color: #0f62fe;
+            text-decoration: none;
         }
 
+        /* ================== Header & Tabs ================== */
         .header-container {
-            background: white;
-            padding: 1rem;
-            border-bottom: 1px solid #ddd;
+            /* background: #ffffff; */
+            padding: 1rem 0;
+            border-bottom: 1px solid #dddddd;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
         }
 
         .bx--tabs__nav {
@@ -37,7 +59,7 @@
             display: flex;
             list-style: none;
             padding: 0;
-            margin: 0;
+            margin-top: 1em;
             border-bottom: 2px solid #c6c6c6;
         }
 
@@ -45,34 +67,43 @@
             text-align: center;
             justify-content: center;
             display: block;
-            margin-right: 1rem;
             padding: 0.5rem 0.75rem;
             cursor: pointer;
             font-size: 1rem;
             color: #393939;
             border-bottom: 2px solid transparent;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+
+        .bx--tabs__nav-item:hover {
+            color: #0f62fe;
         }
 
         .bx--tabs__nav-item--selected {
-            font-weight: bold;
+            font-weight: 600;
             border-bottom: 2px solid #0f62fe !important;
+            color: #161616;
         }
 
-        /* The “content” area below header: either chat or graph */
+        /* ================== Main Content Container ================== */
         .tab-content {
             flex: 1;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
-            padding: 5px;
+            min-height: 0;
         }
 
-        /* When Chat is selected: show its container; Graph is hidden */
+        /* ================== Chat vs. Graph ================== */
         #chat-content {
             display: flex;
             flex-direction: column;
             flex: 1;
             overflow: hidden;
+            background: #ffffff;
+            border-radius: 8px;
+            box-sizing: border-box;
+            min-height: 0;
         }
 
         #graph-content {
@@ -80,125 +111,185 @@
             flex: 1;
             overflow: auto;
             padding: 1rem;
+            background: #ffffff;
+            border-radius: 8px;
+            box-sizing: border-box;
         }
 
-        /* ---------- Intro Paragraph ---------- */
-        .intro {
-            background: white;
-            padding: 1rem;
-            border-bottom: 1px solid #ddd;
-            font-size: 0.95rem;
-            line-height: 1.5;
-            color: #393939;
-        }
-
-        .intro p {
-            margin: 0.5rem 0;
-        }
-
-        /* ---------- Chat Area ---------- */
+        /* ================== Chat Container ================== */
         .chat-container {
             flex: 1;
             overflow-y: auto;
-            padding: 0.5rem 1rem;
-            /* reduced top padding to avoid overlap */
+            padding: 0.5rem;
             display: flex;
             flex-direction: column;
+            gap: 0.25rem;
         }
 
+        /* ================== Message Bubbles ================== */
         .message {
             max-width: 70%;
-            margin-bottom: 0.75rem;
-            padding: 0.5rem 0.75rem;
-            border-radius: 0.5rem;
-            line-height: 1.4;
+            padding: 0.75rem 1rem;
+            border-radius: 0.75rem;
+            line-height: 1.5;
             word-wrap: break-word;
             white-space: pre-wrap;
+            position: relative;
+            margin-bottom: 0.5rem;
         }
 
         .message.user {
-            background-color: #0f62fe;
-            color: white;
+            background-color: #f2f4f8;
             align-self: flex-end;
+            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
         }
 
         .message.assistant {
-            background-color: #e0e0e0;
-            color: #161616;
+            background-color: white;
+            align-self: flex-start;
+            padding-left: 2.5rem;
+        }
+
+        /* ================== Model Info Bar ================== */
+        .model-info {
+            font-size: 0.85rem;
+            color: #525252;
+            padding: 0.25rem 0.75rem;
+            border-radius: 0.5rem;
+            background-color: white;
             align-self: flex-start;
         }
 
+        /* ================== Recommendations Tags ================== */
         .recs-container {
+            max-width: 70%;
             display: flex;
-            flex-wrap: wrap;
-            margin-bottom: 0.75rem;
-            margin-right: 0.25rem;
+            flex-wrap: nowrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            overflow-x: auto;
+            scrollbar-width: none; 
+            white-space: nowrap;
+            flex-shrink: 0;
         }
 
         .recs-item {
             font-size: 0.85rem;
             padding: 0.25rem 0.5rem;
             border-radius: 0.25rem;
-            margin-right: 0.25rem;
-            margin-bottom: 0.25rem;
-            color: white;
+            color: #ffffff;
+            flex-shrink: 0;
         }
 
         .recs-item.add {
             background-color: #24a148;
-            /* green */
         }
 
         .recs-item.remove {
             background-color: #da1e28;
-            /* red */
         }
 
-        /* ---------- Input Area ---------- */
+        /* ================== Input Area ================== */
         .input-area {
-            border-top: 1px solid #ddd;
-            padding: 0.5rem 1rem;
+            border-top: 1px solid #dddddd;
+            padding: 1rem;
             display: flex;
-            align-items: flex-end;
-            background: white;
-            align-items: center;
+            flex-direction: column;
+            background: #ffffff;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
+            gap: 0.5rem;
+            box-sizing: border-box;
+            transition: border-color 0.2s, box-shadow 0.2s;
+            border: 1px solid #c6c6c6;
+            border-radius: 0.5rem;
+        }
+
+        .input-area:focus-within {
+            outline: none;
+            border-color: #0f62fe;
+            box-shadow: 0px 0px 0px 2px rgba(15, 98, 254, 0.2);
         }
 
+        /* Contenteditable box wrapper */
         #userInput {
             flex: 1;
-            resize: none;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* The editable area itself */
+        #userInput>div[contenteditable] {
+            min-height: 2.5rem;
             font-size: 1rem;
-            padding: 0.5rem;
-            border: 1px solid #c6c6c6;
-            border-radius: 0.375rem;
+            line-height: 1.5;
             font-family: inherit;
-            line-height: 1.4;
+            resize: none;
+            background-color: #ffffff;
+        }
+
+        [contenteditable]:focus {
+            outline: 0px solid transparent;
+        }
+
+        div[contenteditable] {
+            height: 10vh;
+            overflow: scroll;
+        }
+
+
+        /* Send button wrapper */
+        .btn {
+            border: none;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            background-color: white;
+        }
+
+        .btn:disabled {
+            cursor: not-allowed;
+        }
+
+        .icon {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        #modelSelect {
+            border: 1px solid #c6c6c6;
+            border-radius: 5px;
+            padding: 0.25rem 0.25rem;
         }
 
+        /* ================== Recommendation Tag Container ================== */
         #recommendation {
-            margin-top: 0.25rem;
+            flex: 1;
             font-size: 0.9rem;
             color: #393939;
             display: flex;
-            flex-wrap: wrap;
-            height: 30px;
-        }
-
-        #recommendation .bx--tag {
-            margin-right: 0.25rem;
-            margin-bottom: 0.25rem;
-            cursor: pointer;
+            gap: 0.5rem;
+            min-height: 1.5rem;
+            overflow-x: scroll;
+            scrollbar-width: none; 
+            white-space: nowrap;
+            align-items: center;
         }
 
-        #sendBtn {
-            margin-left: 0.5rem;
-            margin-bottom: 0.25rem;
+        .rec-tags-inputarea {
+            flex: 0 0 auto;
         }
 
-        /* ---------- Graph Area ---------- */
+        /* ================== Graph Area ================== */
         #graph {
             background: #efefef;
             position: relative;
+            min-height: 300px;
+            border-radius: 8px;
         }
 
         .tooltip {
@@ -207,13 +298,15 @@
             padding: 0.5em;
             width: 20em;
             min-height: 5em;
-            background: #fff;
-            color: #000;
-            border: 1px solid #000;
+            background: #ffffff;
+            color: #000000;
+            border: 1px solid #000000;
             border-radius: 5px;
             pointer-events: none;
             font-size: inherit;
             font-family: inherit;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            z-index: 10;
         }
     </style>
 </head>
@@ -221,50 +314,95 @@
 <body>
     <!-- ===== Header: Title + Carbon Tabs ===== -->
     <div class="header-container">
-        <h1 class="bx--type-expressive-heading-03">Responsible Prompting</h1>
-        <div class="intro">
-            <p>
-                Please provide a prompt that would be sent to an LLM. Recommendations are performed in prompting-time,
-                before content generation. The recommendations consider a curated dataset of values and
-                prompt-sentences. They are based on the similarity between your input and that dataset.
-            </p>
+        <div style="display: flex; flex-direction: row;">
+            <h4 style="width: 40%; display: flex; padding-left: 1rem; font-size: xx-large; font-weight: 300;">Responsible Prompting</h4>
+            <div style="width: 60%; padding-left: 1rem;" class="intro">
+                <p>
+                    Please provide a prompt that would be sent to an LLM. Recommendations are performed in prompting-time, before content generation. The recommendations consider a curated dataset of values and prompt sentences. They are based on the similarity between your input and that dataset.
+                </p>
+            </div>
         </div>
-        <ol class="bx--tabs__nav">
+        <!-- <ol class="bx--tabs__nav">
             <li id="tab-chat" class="bx--tabs__nav-item bx--tabs__nav-item--selected">
                 Chat
             </li>
             <li id="tab-graph" class="bx--tabs__nav-item">
                 Graph
             </li>
-        </ol>
+        </ol> -->
     </div>
+    <!-- <button class="btn bx--btn bx--btn--ghost" style="position: absolute; top: 0; right: 0; margin-top: 0.5rem; margin-right: 0.5rem;">
+        <img class="icon" src="./imgs/settings.svg"/>
+    </button> -->
 
     <div class="tab-content">
+        <!-- === Chat View === -->
         <div id="chat-content">
             <div id="chat" class="chat-container"></div>
 
             <!-- Input area -->
             <div class="input-area">
-                <div style="flex: 1; display: flex; flex-direction: column;">
-                    <textarea id="userInput" rows="4"
-                        placeholder="Enter your prompt">Act as a professional designer with 20 years of experience creating and testing UX interfaces and landing sites for a variety of IT applications. We are in need of more people and an increased budget to be able to keep up with clients' needs. What kind of evidence should I gather to support my demands to gain more resources?</textarea>
+                <div id="userInput">
+                    <div id="userInputDiv" contenteditable="true" placeholder="Enter your prompt">Act as a professional designer with 20 years of experience creating and testing UX interfaces and landing sites for a variety of IT applications. We are in need of more people and an increased budget to be able to keep up with clients' needs. What kind of evidence should I gather to support my demands to gain more resources?
+                    </div>
+                </div>
+
+                <div style="display: flex; justify-content: space-between; gap: 1rem;">
                     <div id="recommendation"></div>
+                    <select id="modelSelect"></select>
+                    <!-- Send button -->
+                    <button id="sendBtn" class="btn" disabled>
+                        <img src="./imgs/send.svg" alt="Send" class="icon"/>
+                    </button>
                 </div>
-                <button id="sendBtn" class="bx--btn bx--btn--primary" disabled>
-                    Send
-                </button>
             </div>
+            <!-- Under the input row: recommendation tags -->
         </div>
 
+        <!-- === Graph View ===
         <div id="graph-content">
             <div id="graph"></div>
-        </div>
+        </div> -->
     </div>
 
+    <script>
+        const models = [
+            { id: 'mistralai/Mistral-7B-Instruct-v0.3', name: 'Mistral 7B Instruct v0.3' },
+            { id: 'meta-llama/Llama-4-Scout-17B-16E-Instruct', name: 'Llama 4 Scout' },
+        ];
+        function createModelSelect() {
+            const modelSelect = document.getElementById('modelSelect');
+
+            models.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model.id;
+                option.textContent = model.name;
+                modelSelect.appendChild(option);
+            });
+        }
+
+        // Call the function when the DOM is fully loaded
+        document.addEventListener('DOMContentLoaded', createModelSelect);
+
+
+        var modelId = models[0].id;
+        const modelSelect = document.getElementById('modelSelect');
+
+        modelSelect.addEventListener('change', function() {
+            const selectedModel = models.find(model => model.id === this.value);
+            modelId = selectedModel.id;
+        });
+    </script>
 
+    <!-- To show the bottom of text in -->
     <script>
-        let lastRecommendations = null; // stores latest /recommend response
+        var objDiv = document.getElementById("userInputDiv");
+        objDiv.scrollTop = objDiv.scrollHeight;
+        $("#userInputDiv").trigger("input");
+    </script>
 
+    <script>
+        let lastRecommendations = [];
         const width = 600;
         const height = 300;
         const marginTop = 30;
@@ -274,11 +412,10 @@
         const nodeRadius = 3;
 
         // Create SVG once
-        const svg = d3
+        var svg = d3
             .select("#graph")
             .append("svg")
-            .attr("viewBox", `0 0 ${width} ${height}`)
-            .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
+            .attr('id', 'svgMain');
 
         const tooltip = d3
             .select("body")
@@ -286,24 +423,23 @@
             .attr("class", "tooltip")
             .style("opacity", 0);
 
-        function renderGraph(recommendations) {
+        var graphData = { nodes: [], edges: [] };
+        function generateAndRenderGraph(recommendations, svgId) {
+            svg = d3
+            .select(svgId)
+            .attr("viewBox", `0 0 ${width} ${height}`)
+            .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
             if (!recommendations) {
-                svg.selectAll("*").remove();
-                svg
-                    .append("text")
-                    .attr("x", width / 2)
-                    .attr("y", height / 2)
-                    .attr("text-anchor", "middle")
-                    .attr("fill", "#666")
-                    .text("No recommendation data available");
+                clearGraph();
                 return;
             }
 
             const rec = recommendations;
-            const graphData = { nodes: [], edges: [] };
             let i = 0,
                 j = 0;
 
+            graphData = { nodes: [], edges: [] };
+
             // Input sentences
             if (rec.input && rec.input.length > 0) {
                 graphData.nodes.push({
@@ -364,7 +500,28 @@
                 type: e.type,
             }));
 
-            const { nodes, edges } = graphData;
+            renderGraph(graphData, svgId)
+        }
+
+        function clearGraph() {
+            svg.selectAll("*").remove();
+            svg
+                .append("text")
+                .attr("x", width / 2)
+                .attr("y", height / 2)
+                .attr("text-anchor", "middle")
+                .attr("fill", "#666")
+                .text("No recommendation data available");
+        }
+
+        function renderGraph(graphData, svgId) {
+            svg = d3
+            .select(svgId)
+            .attr("viewBox", `0 0 ${width} ${height}`)
+            .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
+
+            let { nodes, edges } = graphData;
+
             if (nodes.length === 0) {
                 svg.selectAll("*").remove();
                 svg
@@ -546,10 +703,10 @@
         }
 
         // Initially show “no data” message
-        renderGraph(null);
+        generateAndRenderGraph(null, "#svgMain");
 
         const conversation = []; // stores { role, content, recs? }
-        let currentRecs = [];
+        let currentRecs = []; // stores { recommendation, graphData }
         let debounceId = null;
 
         function appendUserTurn(turn) {
@@ -560,11 +717,16 @@
 
             if (turn.recs && turn.recs.length > 0) {
                 const container = $("<div>").addClass("recs-container");
-                turn.recs.forEach((r) => {
+                turn.recs.forEach((rec, index) => {
+                    let r = rec.recommendation;
                     const item = $("<div>")
                         .addClass("recs-item")
                         .addClass(r.type === "add" ? "add" : "remove")
-                        .text(r.value);
+                        .attr('title', r.sentence)
+                        .text((r.type === "add" ? "+ " : "x ") + r.value);
+                    let itemId = `rec-${conversation.length}-${index}`;
+                    item.attr('id', itemId);
+                    item.click(() => toggleGraph(rec.graphData, itemId));
                     container.append(item);
                 });
                 container.css("align-self", "flex-end");
@@ -573,6 +735,59 @@
             $("#chat").scrollTop($("#chat")[0].scrollHeight);
         }
 
+        let popupOpen = false;
+        function toggleGraph(data, itemId) {
+            const existing = document.getElementById('popup');
+            if (existing) {
+                existing.remove();
+                popupOpen = false;
+                return;
+            }
+            const tag = document.getElementById(itemId);
+            const rect = tag.getBoundingClientRect();
+            const popup = document.createElement('div');
+            popup.id = 'popup';
+            // reuse your .tooltip styles but allow pointer events
+            popup.className = 'tooltip';
+            popup.style.pointerEvents = 'auto';
+            popup.style.width = '600px';
+            popup.style.height = '315px';
+            popup.style.zIndex = 2;
+            popup.style.left = `${rect.left + window.scrollX}px`;
+            popup.style.top  = `${rect.top + window.scrollY + 25}px`;
+
+            // When the popup is open when the chat is being scrolled,
+            // it leads to a lot of weird behaviour
+            // so, for now, the popup is force closed when the chat is scrolling
+            document.getElementById("chat").addEventListener("scroll", () => {
+                popup.remove();
+                popupOpen = false;
+                return;
+            })
+
+            const container = document.createElement('svg');
+            container.style.width = '100%';
+            container.style.height = '100%';
+
+            container.innerHTML = "<svg id='popup-graph'></svg>"
+            popup.appendChild(container);
+            document.body.appendChild(popup);
+
+            renderGraph(data, '#popup-graph');
+            // close on outside click
+            const onClickOutside = (e) => {
+            if (!popup.contains(e.target) && e.target !== tag) {
+                popup.remove();
+                document.removeEventListener('click', onClickOutside);
+                popupOpen = false;
+            }
+            };
+            setTimeout(() => {
+                document.addEventListener('click', onClickOutside);
+            }, 0);
+            popupOpen = true;
+        }
+
         function appendAssistantTurn(text) {
             const bubble = $("<div>")
                 .addClass("message assistant")
@@ -581,11 +796,10 @@
             $("#chat").scrollTop($("#chat")[0].scrollHeight);
         }
 
-        $("#userInput").on("input", function () {
-            const txt = $(this).val();
-            const trimmed = txt.trim();
+        $("#userInputDiv").on("input", function () {
+            const txt = $(this).text().trim() || "";
 
-            if (trimmed.length > 0) {
+            if (txt.length > 0) {
                 $("#sendBtn").removeAttr("disabled");
             } else {
                 $("#sendBtn").attr("disabled", true);
@@ -594,47 +808,57 @@
 
             clearTimeout(debounceId);
 
+            let stopRecos = false;
+
             if (txt.length > 0 && /[.?!]$/.test(txt)) {
                 debounceId = setTimeout(() => {
-                    $("#recommendation").html(
-                        'Checking recommendations…'
-                    );
+                    $("#recommendation").html("Checking recommendations…");
                     $.getJSON("/recommend?prompt=" + encodeURIComponent(txt), (data) => {
+                        if (stopRecos) return;
                         $("#recommendation").empty();
                         lastRecommendations = data;
+                        generateAndRenderGraph(lastRecommendations, "#svgMain");
 
                         if (data.remove && data.remove.length > 0) {
                             const rec = data.remove[0];
                             const sentence = rec.sentence.replaceAll("'", "\\'");
                             const valueEscaped = rec.value.replaceAll("'", "\\'");
                             const $tag = $(`
-                <div class="bx--tag bx--tag--red bx--tag--deletable">
-                  ✕ ${valueEscaped}
-                </div>
-              `);
-
+                                <div class="bx--tag bx--tag--red bx--tag--deletable rec-tags-inputarea">
+                                ✕ ${valueEscaped}
+                                </div>
+                            `);
+                            // Removal recommendations
                             $tag.hover(
                                 () => {
-                                    const cur = $("#userInput").val();
-                                    $("#userInput").data("prevText", cur);
-                                    $("#userInput").val(cur.replace(rec.sentence, ""));
+                                    const cur = $("#userInputDiv").html();
+                                    $("#userInputDiv").data("prevHtml", cur);
+                                    $("#userInputDiv").html(
+                                        $("#userInputDiv").html().replace(
+                                            rec.sentence.trim(),
+                                            " <span style='color: red; text-decoration: line-through'>" + rec.sentence.trim() + "</span>"
+                                        )
+                                    )
                                 },
                                 () => {
-                                    const prev = $("#userInput").data("prevText") || txt;
-                                    $("#userInput").val(prev);
+                                    const prev = $("#userInputDiv").data("prevHtml") || txt;
+                                    $("#userInputDiv").html(prev);
                                 }
                             );
 
                             $tag.click(() => {
-                                const updated = $("#userInput")
-                                    .val()
+                                const updated = $("#userInputDiv")
+                                    .text()
                                     .replace(rec.sentence, "")
                                     .replace(/ {2,}/g, " ")
                                     .trim();
-                                $("#userInput").val(updated);
-                                currentRecs.push({ type: "remove", value: rec.value });
+                                $("#userInputDiv").text(updated);
+                                currentRecs.push({
+                                    'recommendation': { type: "remove", value: rec.value, sentence: rec.sentence },
+                                    'graphData': graphData,
+                                });
                                 $("#recommendation").empty();
-                                $("#userInput").trigger("input");
+                                $("#userInputDiv").trigger("input");
                             });
 
                             $("#recommendation").append($tag);
@@ -642,35 +866,40 @@
 
                         if (data.add && data.add.length > 0) {
                             data.add.forEach((rec) => {
-                                if (!$("#userInput").val().includes(rec.prompt)) {
+                                if (!$("#userInputDiv").text().includes(rec.prompt)) {
                                     const promptEscaped = rec.prompt.replaceAll("'", "\\'");
                                     const valueEscaped = rec.value.replaceAll("'", "\\'");
                                     const $tag = $(`
-                    <div class="bx--tag bx--tag--green">
-                      + ${valueEscaped}
-                    </div>
-                  `);
-
+                                        <div class="bx--tag bx--tag--green rec-tags-inputarea">
+                                        + ${valueEscaped}
+                                        </div>
+                                    `);
+                                    
+                                    // Addition recommendations
                                     $tag.hover(
                                         () => {
-                                            const cur = $("#userInput").val();
-                                            $("#userInput").data("prevAdd", cur);
-                                            $("#userInput").val((cur + " " + rec.prompt).trim());
+                                            const cur = $("#userInputDiv").html();
+                                            $("#userInputDiv").data("prevHtml", cur);
+                                            $("#userInputDiv").html($("#userInputDiv").html() + " <span style='color: green'>" + rec.prompt.trim() + "</span>")
+                                            $("#userInputDiv").scrollTop($("#userInputDiv")[0].scrollHeight);
                                         },
                                         () => {
-                                            const prev = $("#userInput").data("prevAdd") || txt;
-                                            $("#userInput").val(prev);
+                                            const prev = $("#userInputDiv").data("prevHtml") || txt;
+                                            $("#userInputDiv").html(prev);
                                         }
                                     );
 
                                     $tag.click(() => {
                                         const base =
-                                            $("#userInput").data("prevAdd") ||
-                                            $("#userInput").val().trim();
-                                        $("#userInput").val((base + " " + rec.prompt).trim());
-                                        currentRecs.push({ type: "add", value: rec.value });
+                                            $("#userInputDiv").data("prevHtml") ||
+                                            $("#userInputDiv").html().trim();
+                                        $("#userInputDiv").html((base + " " + rec.prompt).trim());
+                                        currentRecs.push({
+                                            'recommendation': { type: "add", value: rec.value, sentence: rec.prompt },
+                                            'graphData': graphData,
+                                        });
                                         $("#recommendation").empty();
-                                        $("#userInput").trigger("input");
+                                        $("#userInputDiv").trigger("input");
                                     });
 
                                     $("#recommendation").append($tag);
@@ -686,14 +915,19 @@
                         }
                     });
                 }, 500);
+                $("#sendBtn").on("click", function () {
+                    stopRecos = true;
+                })
             } else {
                 $("#recommendation").empty();
                 lastRecommendations = null;
             }
         });
 
+        $("#userInputDiv").trigger('input');
+
         $("#sendBtn").on("click", function () {
-            const rawText = $("#userInput").val();
+            const rawText = $("#userInputDiv").text() || "";
             const userText = rawText.trim();
             if (!userText) return;
 
@@ -705,11 +939,12 @@
             conversation.push(thisTurn);
             appendUserTurn(thisTurn);
 
-            $("#userInput").val("");
+            $("#userInputDiv").text("");
             $("#recommendation").empty();
             $("#sendBtn").attr("disabled", true);
             currentRecs = [];
 
+            // "Typing..." placeholder
             const typingBubble = $("<div>")
                 .addClass("message assistant")
                 .attr("id", "typing")
@@ -717,6 +952,7 @@
             $("#chat").append(typingBubble);
             $("#chat").scrollTop($("#chat")[0].scrollHeight);
 
+            // Build full prompt
             let fullPrompt = "";
             conversation.forEach((turn) => {
                 if (turn.role === "user") {
@@ -728,18 +964,21 @@
             fullPrompt += "Assistant: ";
 
             $.ajax({
-                url: "/demo_inference?prompt=" + encodeURIComponent(fullPrompt),
+                url: "/demo_inference?prompt=" + encodeURIComponent(fullPrompt) + "&model_id=" + encodeURIComponent(modelId),
                 dataType: "json",
                 success: function (data) {
                     $("#typing").remove();
-                    const generated = data.content;
+                    const generated = data.content.trim();
                     const modelId = data.model_id;
                     const temp = data.temperature;
                     const maxTokens = data.max_new_tokens;
 
-                    let toType = `Model: ${modelId}  ·  Temperature: ${temp}  ·  Max tokens: ${maxTokens}\n\n`;
-                    toType += generated;
+                    const modelHeader = $("<div style='display: flex; flex-direction: row;'>")
+                        .addClass("model-info")
+                        .html(`<img src="./imgs/granite.svg" class='icon'/> <div style='display:flex; align-items: center;margin-left: 0.5rem'>${modelId}</div>`);
+                    $("#chat").append(modelHeader);
 
+                    // Now type the assistant's generated text:
                     const assistantBubble = $("<div>")
                         .addClass("message assistant")
                         .attr("id", "assistantBubble")
@@ -747,16 +986,19 @@
                     $("#chat").append(assistantBubble);
                     $("#chat").scrollTop($("#chat")[0].scrollHeight);
 
-                    const chars = toType.split("");
+                    const chars = generated.split("");
                     let idx = 0;
+                    const chatEl = $("#chat")[0];
+                    const wasAtBottom = chatEl.scrollHeight - chatEl.scrollTop <= chatEl.clientHeight + 5;
                     function typeNext() {
                         if (idx < chars.length) {
                             const cur = $("#assistantBubble").text();
                             $("#assistantBubble").text(cur + chars[idx]);
                             idx++;
-                            $("#chat").scrollTop($("#chat")[0].scrollHeight);
-                            setTimeout(typeNext, 10);
+                            if(wasAtBottom) $("#chat").scrollTop($("#chat")[0].scrollHeight);
+                            setTimeout(typeNext, 0);
                         } else {
+                            if(wasAtBottom) $("#chat").scrollTop($("#chat")[0].scrollHeight);
                             $("#assistantBubble").removeAttr("id");
                             conversation.push({
                                 role: "assistant",
@@ -765,6 +1007,7 @@
                         }
                     }
                     typeNext();
+                    // $("#assistantBubble").text(generated)
                 },
                 error: function (xhr) {
                     $("#typing").remove();
@@ -776,6 +1019,7 @@
             });
         });
 
+        // Pressing Enter (without Shift) also sends
         $("#userInput").on("keydown", function (e) {
             if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
@@ -785,6 +1029,7 @@
             }
         });
 
+        // Tab switching
         $("#tab-chat").on("click", function () {
             $(this).addClass("bx--tabs__nav-item--selected");
             $("#tab-graph").removeClass("bx--tabs__nav-item--selected");
@@ -797,7 +1042,7 @@
             $("#tab-chat").removeClass("bx--tabs__nav-item--selected");
             $("#chat-content").hide();
             $("#graph-content").show();
-            renderGraph(lastRecommendations);
+            generateAndRenderGraph(lastRecommendations, "#svgMain");
         });
     </script>
 </body>