syntaxmatrix 2.6.4.4__py3-none-any.whl → 3.0.1__py3-none-any.whl

syntaxmatrix/templates/dashboard.html

@@ -703,6 +703,116 @@
         font-size: 0.8em;
         opacity: 0.7;
       }
+
+      /* ----------------------------
+        Thought Process renderer
+        ---------------------------- */
+      .tp-render{margin-top:10px}
+      .tp-grid{
+        display:grid;
+        grid-template-columns: 1fr 1fr;
+        gap:10px;
+        margin-bottom:10px;
+      }
+      @media (max-width: 900px){
+        .tp-grid{grid-template-columns: 1fr;}
+      }
+      .tp-card{
+        border:1px solid var(--border);
+        border-radius: 12px;
+        background: #fff;
+        padding:10px 12px;
+        overflow:hidden;
+      }
+      .tp-card h4{
+        margin:0 0 6px;
+        font-size:.95rem;
+        letter-spacing:.01em;
+      }
+      .tp-kv{
+        display:grid;
+        grid-template-columns: 180px 1fr;
+        gap:6px 10px;
+        font-size:.92rem;
+        line-height:1.35;
+      }
+      .tp-kv .k{color: var(--muted); font-weight:700;}
+      .tp-kv .v{color: var(--text);}
+      .tp-steps ol{
+        margin:0;
+        padding-left: 1.1rem;
+      }
+      .tp-steps li{ margin: 0 0 6px; }
+
+      .tp-code{ position:relative; }
+      .tp-code pre{
+        margin:0;
+        padding:10px 12px;
+        border-radius:12px;
+        background: #0b1220;
+        color:#e5e7eb;
+        overflow:auto;
+        border:1px solid rgba(15,23,42,.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: .86rem;
+        line-height: 1.45;
+        white-space: pre;
+      }
+      .tp-copy{
+        position:absolute;
+        top:10px;
+        right:10px;
+        border:1px solid var(--border);
+        background:#fff;
+        color:var(--text);
+        border-radius:999px;
+        padding:5px 10px;
+        font-weight:700;
+        cursor:pointer;
+        font-size:.78rem;
+      }
+      .tp-copy:hover{filter:brightness(.98)}
+
+      .tp-badges{
+        display:flex;
+        flex-wrap:wrap;
+        gap:8px;
+        margin-bottom:10px;
+      }
+      .tp-badge{
+        border:1px solid var(--border);
+        border-radius:999px;
+        padding:4px 10px;
+        background:#fff;
+        font-size:.8rem;
+        font-weight:700;
+        color: var(--text);
+      }
+
+      .tp-raw{
+        margin-top:10px;
+        border:1px dashed var(--border);
+        border-radius:12px;
+        padding:8px 10px;
+        background:#fff;
+      }
+      .tp-raw summary{
+        cursor:pointer;
+        font-weight:800;
+        color: var(--muted);
+      }
+      .tp-raw-pre{
+        margin:10px 0 0;
+        padding:10px 12px;
+        border-radius:10px;
+        background:#f8fafc;
+        border:1px solid var(--border);
+        overflow:auto;
+        max-height: 320px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: .85rem;
+        white-space: pre-wrap;
+      }
     </style>
 
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
@@ -781,7 +891,6 @@
             <textarea id="askai" name="askai_question" type="text" rows="5"
                     style="position:relative; width:90%; padding:16px; font-size:0.8em; border-radius:8px;"
                     placeholder="Ask me about {{ (selected_dataset or 'your dataset\n. But upload it first.').replace('_', ' ').replace('.csv', '') }}" required></textarea>
-            <!-- <button type="submit" style="font-size:1.2rem; width:8rem; padding:4px;">Submit</button> -->
             <button
               type="submit"
               class="btn btn-primary eda-submit-btn"
@@ -798,21 +907,25 @@
           </form>
           <div style="margin-bottom: 36px;">
             {% if askai_question %}
-              <!--
               <div class="askai-qblock" style="margin:20px 5px;">
-                  <span class="askai-q-label"><b>Task:</b></span>
+                  <span class="askai-q-label"><b>Question:</b></span><br>
                   <span class="askai-q">{{ askai_question }}</span>
               </div>
-              -->
-              <br><br>
+              <hr><br>
               <div class="refined-qblock">
                 <details>
                   <summary class="refined-q-label" style="cursor: pointer; list-style: none;">
                       <span class="toggle-arrow">▶</span> 
-                      <b>Thought Process</b>
+                      <b>Reasoning Process</b>
                   </summary>
                   <div class="li" style="margin-top: 10px; padding-left: 14px; border-left: 3px solid #e0e5ee;">
-                      <span class="refined-q">{{ refined_question|safe }}</span>
+                      <div class="tp-render" id="tp-render"></div>
+                      <script type="application/json" id="tp-data">{{ (thought_obj if thought_obj else refined_question)|tojson }}</script>
+
+                      <details class="tp-raw">
+                        <pre class="tp-raw-pre">{{ refined_question|e }}</pre>
+                      </details>
+                      <hl>
                       <br><br>
                       {% if tasks %}
                         <b>Tasks Performed: </b>
@@ -822,7 +935,7 @@
                       {% endif %} 
                       <br><br>
                       {% if TOKENS %}
-                        <b>Refiner Agent: </b><span>{{ TOKENS['Refiner'][0] }} | {{  TOKENS['Refiner'][1] }}</span><br> 
+                        <b>Assistant Agent: </b><span>{{ TOKENS['Refiner'][0] }} | {{  TOKENS['Refiner'][1] }}</span><br> 
                         <b>Token Usage: </b>
                           <li>Input Tokens: {{ TOKENS['Refiner'][2] }}</li>
                           <li>Output Tokens: {{ TOKENS['Refiner'][3] }}</li>
@@ -839,6 +952,7 @@
                 </details>
               </div>
             {% endif %}
+            <hr>
             {% if ai_outputs %}
               <div class="d-flex align-items-center justify-content-between" style="margin: 12px;">
                 <br>
@@ -1012,5 +1126,168 @@
       }
     });
   </script>
+  <script>
+    (function(){
+      const host = document.getElementById("tp-render");
+      const src  = document.getElementById("tp-data");
+      if (!host || !src) return;
+
+      function safeString(x){
+        if (x === null || x === undefined) return "";
+        if (typeof x === "string") return x;
+        try { return JSON.stringify(x, null, 2); } catch(e){ return String(x); }
+      }
+
+      function el(tag, cls){
+        const e = document.createElement(tag);
+        if (cls) e.className = cls;
+        return e;
+      }
+
+      let data = null;
+      try{
+        data = JSON.parse(src.textContent || "null");
+      }catch(e){
+        data = (src.textContent || "").trim();
+      }
+
+      // If the payload is itself a JSON string, try parse again.
+      if (typeof data === "string"){
+        const s = data.trim();
+        if ((s.startsWith("{") && s.endsWith("}")) || (s.startsWith("[") && s.endsWith("]"))){
+          try { data = JSON.parse(s); } catch(e) {}
+        }
+      }
+
+      // Fallback: render as plain pre.
+      if (!data || (typeof data !== "object")){
+        const pre = el("pre", "tp-raw-pre");
+        pre.textContent = safeString(data);
+        host.appendChild(pre);
+        return;
+      }
+
+      const taskCat = data["ML_Task_Category"] || data["Task_Category"] || data["Task category"] || "";
+      const statTest = (data["Logic Mapping"] && (data["Logic Mapping"]["Statistical Test"] || data["Logic Mapping"]["statistical_test"])) ||
+                      data["Statistical Test"] || data["Statistical_Test"] || "";
+      const viz = data["Visualization Template"] || data["Visualisation Template"] || data["Visualization"] || data["Visualisation"] || "";
+
+      const badges = el("div", "tp-badges");
+      function addBadge(label, value){
+        if (!value) return;
+        const b = el("div", "tp-badge");
+        b.textContent = label + ": " + value;
+        badges.appendChild(b);
+      }
+      addBadge("Category", safeString(taskCat));
+      addBadge("Test", safeString(statTest));
+      addBadge("Visual", safeString(viz));
+      if (badges.childElementCount) host.appendChild(badges);
+
+      const grid = el("div", "tp-grid");
+
+      // Logic mapping
+      const mapping = data["Logic Mapping"] || data["Logic_Mapping"] || null;
+      const mapCard = el("div", "tp-card");
+      const mapTitle = el("h4"); mapTitle.textContent = "Logic mapping";
+      mapCard.appendChild(mapTitle);
+
+      const kv = el("div", "tp-kv");
+      if (mapping && typeof mapping === "object"){
+        Object.keys(mapping).forEach(k=>{
+          const v = mapping[k];
+          const kEl = el("div","k"); kEl.textContent = k;
+          const vEl = el("div","v"); vEl.textContent = safeString(v);
+          kv.appendChild(kEl); kv.appendChild(vEl);
+        });
+      } else {
+        const kEl = el("div","k"); kEl.textContent = "Mapping";
+        const vEl = el("div","v"); vEl.textContent = "—";
+        kv.appendChild(kEl); kv.appendChild(vEl);
+      }
+      mapCard.appendChild(kv);
+      grid.appendChild(mapCard);
+
+      // Steps
+      const stepsRaw = data["Step-by-Step Chain-of-Thought"] || data["Step-by-Step"] || data["Steps"] || data["Plan"] || null;
+      const stepsCard = el("div", "tp-card tp-steps");
+      const stepsTitle = el("h4"); stepsTitle.textContent = "Steps";
+      stepsCard.appendChild(stepsTitle);
+
+      const ol = el("ol");
+      let steps = [];
+      if (Array.isArray(stepsRaw)) {
+        steps = stepsRaw.map(x=>safeString(x)).filter(Boolean);
+      } else if (typeof stepsRaw === "string") {
+        steps = stepsRaw.split(/\n+/).map(s=>s.trim()).filter(Boolean);
+      }
+      if (!steps.length) {
+        const li = el("li"); li.textContent = "—";
+        ol.appendChild(li);
+      } else {
+        steps.forEach(s=>{
+          const li = el("li"); li.textContent = s.replace(/^\d+\.\s*/, "");
+          ol.appendChild(li);
+        });
+      }
+      stepsCard.appendChild(ol);
+      grid.appendChild(stepsCard);
+
+      host.appendChild(grid);
+
+      // Code snippet
+      const code = data["Code Snippet"] || data["Code"] || data["code"] || "";
+      if (code){
+        const codeCard = el("div", "tp-card tp-code");
+        const h = el("h4"); h.textContent = "Generated code";
+        codeCard.appendChild(h);
+
+        const btn = el("button", "tp-copy");
+        btn.type = "button";
+        btn.textContent = "Copy";
+        btn.addEventListener("click", async ()=>{
+          try{
+            await navigator.clipboard.writeText(String(code));
+            btn.textContent = "Copied";
+            setTimeout(()=> btn.textContent = "Copy", 900);
+          }catch(e){
+            btn.textContent = "Copy failed";
+            setTimeout(()=> btn.textContent = "Copy", 1100);
+          }
+        });
+        codeCard.appendChild(btn);
+
+        const pre = el("pre");
+        pre.textContent = String(code);
+        codeCard.appendChild(pre);
+
+        host.appendChild(codeCard);
+      }
+
+      // Any other keys
+      const known = new Set([
+        "ML_Task_Category","Task_Category","Task category",
+        "Logic Mapping","Logic_Mapping",
+        "Visualization Template","Visualisation Template","Visualization","Visualisation",
+        "Step-by-Step Chain-of-Thought","Step-by-Step","Steps","Plan",
+        "Code Snippet","Code","code"
+      ]);
+
+      const extraKeys = Object.keys(data).filter(k => !known.has(k));
+      if (extraKeys.length){
+        const extra = el("div","tp-card");
+        const h = el("h4"); h.textContent = "Extra details";
+        extra.appendChild(h);
+        const kv2 = el("div","tp-kv");
+        extraKeys.forEach(k=>{
+          const kEl = el("div","k"); kEl.textContent = k;
+          const vEl = el("div","v"); vEl.textContent = safeString(data[k]);
+          kv2.appendChild(kEl); kv2.appendChild(vEl);
+        });
+        extra.appendChild(kv2);
+        host.appendChild(extra);
+      }
+    })();
+  </script>
 </body>
 </html>

syntaxmatrix/templates/edit_page.html

@@ -7,6 +7,7 @@
 
   <!-- SortableJS (drag & drop) -->
   <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js" referrerpolicy="no-referrer"></script>
 
   <!-- CodeMirror (real code editor: syntax colours + matching brackets) -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css"/>
@@ -279,9 +280,27 @@
       background: rgba(2,6,23,.45);
       transition: opacity .12s ease;
     }
-    .item:hover .thumb .drop{opacity:1;}
-    .item .title{font-weight:750; font-size:.86rem;}
-    .item .text{color:var(--muted); font-size:.8rem; line-height:1.25;}
+    .item .title{
+      font-weight:750;
+      font-size:.86rem;
+      line-height:1.25;
+
+      /* 2-line clamp so long titles look good */
+      display:-webkit-box;
+      -webkit-line-clamp:2;
+      -webkit-box-orient:vertical;
+      overflow:hidden;
+      min-height: calc(1.25em * 2);
+    }
+
+    .item .text{
+      opacity:.9;
+      font-size:.82rem;
+      color: var(--mut);
+
+      /* show new lines in the builder preview */
+      white-space: pre-wrap;
+    }
 
     .item .cta-drop{
       margin-top:6px;
@@ -555,7 +574,6 @@
             <option value="4">Default: 4 cols</option>
             <option value="5">Default: 5 cols</option>
           </select>
-          <button class="btn danger" id="btn-clear" type="button">Clear</button>
         </div>
       </div>
       <div class="sections" id="sections"></div>
@@ -586,9 +604,44 @@
             <input id="insp-title" placeholder="Title"/>
           </div>
 
-          <div class="field">
+          <!-- Alignment controls (per item) -->
+          <div class="row" id="row-text-style" style="display:none;">
+            <div class="field" style="flex:1;">
+              <label>Title alignment</label>
+              <select id="insp-title-align">
+                <option value="">Default</option>
+                <option value="left">Left</option>
+                <option value="center">Centre</option>
+                <option value="right">Right</option>
+                <option value="justify">Justify</option>
+              </select>
+            </div>
+
+            <div class="field" style="flex:1;">
+              <label>Body alignment</label>
+              <select id="insp-text-align">
+                <option value="">Default</option>
+                <option value="left">Left</option>
+                <option value="center">Centre</option>
+                <option value="right">Right</option>
+                <option value="justify">Justify</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Plain text (used for sections + fallback) -->
+          <div class="field" id="field-text-plain">
             <label>Text</label>
-            <textarea id="insp-text" placeholder="Text / description"></textarea>
+            <textarea id="insp-text-plain" rows="6" placeholder="Short description (new lines supported)"></textarea>
+          </div>
+
+          <!-- Rich text (WordPress-like) -->
+          <div class="field" id="field-text-rich" style="display:none;">
+            <label>Body</label>
+            <textarea id="insp-text-rich"></textarea>
+            <div class="muted" style="margin-top:6px;">
+              Tip: use the toolbar for bold, lists, colours, font sizes, alignment, and divider lines.
+            </div>
           </div>
 
           <div class="row">
@@ -1569,8 +1622,18 @@
     const inspBox = document.getElementById("insp");
     const inspEmpty = document.getElementById("insp-empty");
     const inspKind = document.getElementById("insp-kind");
+
     const inspTitle = document.getElementById("insp-title");
-    const inspText = document.getElementById("insp-text");
+    // plain + rich
+    const inspTextPlain = document.getElementById("insp-text-plain");
+    const inspTextRich  = document.getElementById("insp-text-rich");
+    const fieldTextPlain = document.getElementById("field-text-plain");
+    const fieldTextRich  = document.getElementById("field-text-rich");
+    // alignment
+    const rowTextStyle = document.getElementById("row-text-style");
+    const inspTitleAlign = document.getElementById("insp-title-align");
+    const inspTextAlign  = document.getElementById("insp-text-align");
+
     const inspCols = document.getElementById("insp-cols");
     const inspImg  = document.getElementById("insp-img");
     const inspHref = document.getElementById("insp-href");
@@ -1597,6 +1660,83 @@
     const secPad = document.getElementById("sec-pad");
     const secAlign = document.getElementById("sec-align");
 
+    function escapeHtml(s){
+      s = String(s || "");
+      return s
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+    }
+
+    function plainToHtml(s){
+      // turn new lines into <br> (good enough as a fallback)
+      const esc = escapeHtml(s || "");
+      return esc.replaceAll("\n", "<br>");
+    }
+
+    function htmlToText(html){
+      if (!html) return "";
+      const tmp = document.createElement("div");
+      tmp.innerHTML = html;
+      const txt = (tmp.textContent || tmp.innerText || "");
+      return txt.replace(/\n{3,}/g, "\n\n").trim();
+    }
+
+    let _tinymceInitDone = false;
+
+    function ensureTinyMCE(){
+      if (_tinymceInitDone) return true;
+      if (!window.tinymce) return false;
+
+      try{
+        window.tinymce.init({
+          selector: "#insp-text-rich",
+          height: 280,
+          menubar: false,
+          branding: false,
+          statusbar: false,
+          plugins: "lists link hr autoresize",
+          toolbar: "undo redo | bold italic underline | fontsize forecolor | alignleft aligncenter alignright alignjustify | bullist numlist | hr | link | removeformat",
+          setup: (ed) => {
+            ed.on("init", () => {
+              _tinymceInitDone = true;
+              if (ed._smxPendingHtml != null){
+                ed.setContent(ed._smxPendingHtml);
+                ed._smxPendingHtml = null;
+              }
+            });
+          }
+        });
+
+        return true;
+      }catch(e){
+        console.warn("TinyMCE init failed:", e);
+        return false;
+      }
+    }
+
+    function setRichHtml(html){
+      const ed = window.tinymce && window.tinymce.get("insp-text-rich");
+      if (ed && _tinymceInitDone){
+        ed.setContent(html || "");
+        return;
+      }
+      if (ed){
+        ed._smxPendingHtml = html || "";
+        return;
+      }
+      inspTextRich.value = html || "";
+    }
+
+    function getRichHtml(){
+      const ed = window.tinymce && window.tinymce.get("insp-text-rich");
+      if (ed && _tinymceInitDone){
+        return ed.getContent() || "";
+      }
+      return inspTextRich.value || "";
+    }
 
     function openInspectorForSelection(){
       if (heroCtasBox) heroCtasBox.style.display = "none";
@@ -1614,7 +1754,12 @@
 
         inspKind.value = "Section · " + sectionLabel(s.type);
         inspTitle.value = safeText(s.title || "");
-        inspText.value  = safeText(s.text || "");
+        if (rowTextStyle) rowTextStyle.style.display = "none";
+        if (fieldTextPlain) fieldTextPlain.style.display = "block";
+        if (fieldTextRich) fieldTextRich.style.display = "none";
+
+        inspTextPlain.value = safeText(s.text || "");
+
         inspCols.value  = String(s.cols || 1);
         inspImg.value   = safeText(s.imageUrl || "");
 
@@ -1684,7 +1829,32 @@
 
         inspKind.value  = "Item · " + safeText(it.type);
         inspTitle.value = safeText(it.title || "");
-        inspText.value  = safeText(it.text || "");
+        const useRich = (t !== "button"); // buttons don’t need rich body
+
+        if (rowTextStyle) rowTextStyle.style.display = "flex";
+
+        // show align values (default = empty)
+        if (inspTitleAlign) inspTitleAlign.value = String(it.titleAlign || "");
+        if (inspTextAlign)  inspTextAlign.value  = String(it.textAlign || "");
+
+        if (useRich){
+          if (fieldTextPlain) fieldTextPlain.style.display = "none";
+          if (fieldTextRich) fieldTextRich.style.display = "block";
+
+          // init editor once (falls back silently if CDN blocked)
+          ensureTinyMCE();
+
+          const html = String(it.textHtml || "").trim()
+            ? String(it.textHtml)
+            : plainToHtml(it.text || "");
+
+          setRichHtml(html);
+        } else {
+          if (fieldTextPlain) fieldTextPlain.style.display = "block";
+          if (fieldTextRich) fieldTextRich.style.display = "none";
+
+          inspTextPlain.value = safeText(it.text || "");
+        }
         inspCols.value  = "1";
 
         // image
@@ -1722,7 +1892,7 @@
         if (!s) return;
 
         s.title = inspTitle.value;
-        s.text  = inspText.value;
+        s.text  = inspTextPlain.value;
         s.cols  = parseInt(inspCols.value || "1", 10);
         s.imageUrl = inspImg.value;
 
@@ -1745,7 +1915,25 @@
         const t = String(it.type || "").toLowerCase();
 
         it.title = inspTitle.value;
-        it.text  = inspText.value;
+        const useRich = (t !== "button");
+
+        it.title = inspTitle.value;
+
+        // save align (empty/default removes the property)
+        const ta = (inspTitleAlign ? String(inspTitleAlign.value || "").trim() : "");
+        const ba = (inspTextAlign ? String(inspTextAlign.value || "").trim() : "");
+
+        if (!ta) delete it.titleAlign; else it.titleAlign = ta;
+        if (!ba) delete it.textAlign;  else it.textAlign  = ba;
+
+        if (useRich){
+          const html = getRichHtml();
+          it.textHtml = html;
+          it.text = htmlToText(html); // keep a readable plain version for preview/search
+        } else {
+          it.text = inspTextPlain.value;
+          delete it.textHtml;
+        }
 
         if (t === "button"){
           it.href = (inspHref.value || "").trim();
@@ -2345,13 +2533,6 @@
       }
     });
 
-    // Clear canvas
-    document.getElementById("btn-clear").addEventListener("click", ()=>{
-      state.sections = [];
-      clearSelection();
-      render();
-    });
-
     // ----------------------------
     // CodeMirror init
     // ----------------------------