solidworks-tutor.html.bak-pre-multichat-2026-07-16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SolidWorks Tutor -- SYMBEYOND AI</title>

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="assets/icons/SYMBEYOND_logo_pc.ico">
<link rel="icon" type="image/png" href="assets/icons/SYMBEYOND_logo_linux.png">
<link rel="apple-touch-icon" href="assets/icons/SYMBEYOND_logo_mac.png">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1117;--bg2:#181b24;--bg3:#1e2130;
  --border:#2a2f42;--border2:#3a4060;
  --text:#e8ecf4;--muted:#7a84a0;
  --accent:#3b82f6;--accent2:#1d4ed8;
  --user-bg:#1a2a4a;--key-bg:#252a3a;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Consolas','Courier New',monospace;
  --r:8px;--rl:12px;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}
#hdr{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:0.5px solid var(--border);background:var(--bg2);flex-shrink:0}
.logo{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.hdiv{color:var(--border2)}
.htitle{font-size:13px;color:var(--muted)}
#cats{display:flex;border-bottom:0.5px solid var(--border);flex-shrink:0;background:var(--bg2)}
.cb{flex:1;padding:9px 6px;font-size:12px;font-weight:500;background:transparent;border:none;border-right:0.5px solid var(--border);color:var(--muted);cursor:pointer;letter-spacing:.01em;transition:color .15s,background .15s}
.cb:last-child{border-right:none}
.cb:hover{color:var(--text);background:var(--bg3)}
.cb.on{color:var(--text);background:var(--bg3);border-bottom:2px solid var(--accent)}
#body{display:flex;flex:1;overflow:hidden}
#ref{width:200px;min-width:200px;border-right:0.5px solid var(--border);overflow-y:auto;padding:12px 10px;background:var(--bg2);scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.rh{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:12px 0 5px;padding-bottom:4px;border-bottom:0.5px solid var(--border)}
.rh:first-child{margin-top:0}
.sr{display:flex;justify-content:space-between;align-items:center;padding:3px 0;gap:6px}
.sr span{font-size:11px;color:var(--muted);flex:1;line-height:1.4}
.key{background:var(--key-bg);border:0.5px solid var(--border2);border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:10px;color:var(--text);white-space:nowrap}
#chat{flex:1;display:flex;flex-direction:column;overflow:hidden}
#msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.msg{font-size:13px;line-height:1.65;max-width:86%;word-wrap:break-word}
.msg.u{align-self:flex-end;background:var(--user-bg);color:var(--text);padding:10px 14px;border-radius:var(--rl);border:0.5px solid #2a4a7a}
.msg.a{align-self:flex-start;background:var(--bg3);padding:10px 14px;border-radius:var(--rl);border:0.5px solid var(--border);color:var(--text)}
.msg.a code{font-family:var(--mono);font-size:11px;background:var(--bg2);padding:1px 5px;border-radius:3px;color:#93c5fd}
.msg.a strong{color:var(--text);font-weight:600}
.typing{color:var(--muted);font-size:12px;font-style:italic;align-self:flex-start;padding:4px 2px}
.welcome{text-align:center;padding:2.5rem 1.5rem;color:var(--muted);font-size:13px}
.wt{font-size:16px;font-weight:600;color:var(--text);display:block;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.chip{font-size:11px;padding:5px 11px;border-radius:999px;cursor:pointer;border:0.5px solid var(--border2);background:var(--bg3);color:var(--muted);transition:color .15s,background .15s}
.chip:hover{background:var(--bg2);color:var(--text)}
#irow{display:flex;gap:8px;padding:12px;border-top:0.5px solid var(--border);flex-shrink:0;background:var(--bg2)}
#inp{flex:1;resize:none;min-height:100px;max-height:200px;font-family:var(--font);font-size:13px;padding:9px 13px;border-radius:var(--r);border:0.5px solid var(--border2);background:var(--bg3);color:var(--text);overflow-y:auto}
#inp::placeholder{color:var(--muted)}
#inp:focus{outline:none;border-color:var(--accent)}
#sbtn{padding:8px 16px;border-radius:var(--r);font-size:12px;font-weight:500;background:var(--accent2);border:none;color:#fff;cursor:pointer;white-space:nowrap;transition:background .15s}
#sbtn:hover{background:var(--accent)}
#sbtn:disabled{opacity:.4;cursor:not-allowed}
#cbtn{padding:6px 12px;border-radius:var(--r);font-size:11px;font-weight:500;background:transparent;border:0.5px solid var(--border2);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .15s,background .15s}
#cbtn:hover{color:var(--text);background:var(--bg3)}
#ftr{text-align:center;font-size:10px;color:var(--muted);padding:5px;border-top:0.5px solid var(--border);background:var(--bg2);flex-shrink:0}
#ftr a{color:var(--muted);text-decoration:none}
#ftr a:hover{color:var(--text)}
</style>
</head>
<body>

<div id="hdr">
  <span class="logo">SYMBEYOND AI</span>
  <span class="hdiv">|</span>
  <span class="htitle">SolidWorks Tutor &mdash; FX Industries</span>
</div>

<div id="cats">
  <button class="cb on" onclick="setC('part')" id="bp">Part Modeling</button>
  <button class="cb" onclick="setC('assembly')" id="ba">Assemblies</button>
  <button class="cb" onclick="setC('drawing')" id="bd">Drawings &amp; Detailing</button>
</div>

<div id="body">
  <div id="ref"></div>
  <div id="chat">
    <div id="msgs">
      <div class="welcome" id="wc">
        <span class="wt">SolidWorks Tutor</span>
        Ask anything -- shortcuts, workflows, how to accomplish a task. Pick a category above and type, or tap a suggestion.
        <div class="chips" id="chips"></div>
      </div>
    </div>
    <div id="irow">
      <textarea id="inp" placeholder="Ask about SolidWorks... (Enter to send, Shift+Enter for new line)"></textarea>
      <div style="display:flex;flex-direction:column;gap:6px;justify-content:flex-end">
        <button id="sbtn" onclick="go()">Send</button>
        <button id="cbtn" onclick="clearChat()">Clear</button>
      </div>
    </div>
  </div>
</div>

<div id="ftr">
  Powered by <a href="https://symbeyond.ai" target="_blank">SYMBEYOND AI</a> &mdash; FX Industries Internal Tool
</div>

<script>
// -----------------------------------------------------------------
// API endpoint for SolidWorks Tutor backend (Vercel serverless function)
// -----------------------------------------------------------------
var WORKER = "/api/solidworks-tutor";
// -----------------------------------------------------------------

var cat="part", hist=[];

function loadHistory(){
  try{
    var stored=localStorage.getItem("solidworks_tutor_hist");
    if(stored){hist=JSON.parse(stored);}
  }catch(e){}
}

function saveHistory(){
  try{
    localStorage.setItem("solidworks_tutor_hist",JSON.stringify(hist));
  }catch(e){}
}

var SH={
  part:{
    "Navigation":[["Zoom to fit","F"],["Rotate view","MMB drag"],["Pan","Ctrl+MMB"],["Front","Ctrl+1"],["Right","Ctrl+4"],["Top","Ctrl+5"],["Iso","Ctrl+7"],["View orient.","Spacebar"]],
    "Sketch tools":[["Line","L"],["Rectangle","R"],["Circle","C"],["Arc","A"],["Smart dim.","D"],["Trim","T"],["Mirror","Ctrl+M"],["Exit sketch","Esc"]],
    "Features":[["S-Key bar","S"],["Extrude","E"],["Undo","Ctrl+Z"],["Save","Ctrl+S"],["Rebuild","Ctrl+B"],["Force rebuild","Ctrl+Q"],["Delete","Delete"],["Suppress","right-click"]],
    "Tree & UI":[["FeatureManager","left panel"],["PropertyManager","left (active)"],["Toggle tree","Ctrl+F1"]]
  },
  assembly:{
    "Navigation":[["Zoom to fit","F"],["Rotate","MMB drag"],["View orient.","Spacebar"],["Iso","Ctrl+7"]],
    "Components":[["Insert","drag from tree"],["Copy","Ctrl+drag"],["Move","Alt+drag"],["Hide/Show","Tab"],["Multi-select","Ctrl+click"],["Select chain","Shift+click"]],
    "Mates":[["Add mate","M"],["Coincident","flat face to flat"],["Concentric","cyl. to cyl."],["Distance","offset faces"],["Angle","rotational"],["Lock","full constraint"]],
    "States":[["Float / Fix","right-click comp"],["Suppress","right-click → Suppress"],["Rebuild all","Ctrl+Q"]]
  },
  drawing:{
    "Navigation":[["Zoom to fit","F"],["Zoom box","Z"],["Pan","Ctrl+drag"]],
    "Views":[["Model/Standard","V"],["Projected","right-click view"],["Section","right-click view"],["Detail","right-click view"],["Crop","right-click view"]],
    "Annotations":[["Smart dim.","D"],["Note","N"],["Centerline","A"],["Weld symbol","Annotations tab"],["Surface finish","Annotations tab"],["Balloon","B (with BOM)"]],
    "Sheet & Output":[["Add sheet","right-click tab"],["Edit sheet format","right-click → Edit Sheet Format"],["Print / PDF","Ctrl+P"],["DXF/DWG","File → Save As"]]
  }
};

var SUGG={
  part:["How do I create my first extrude?","What is the FeatureManager tree?","How do I sketch a tube profile?","What does fully defined mean?"],
  assembly:["How do I mate two tubes end-to-end?","Difference between float and fix?","How do I build a weld frame assembly?","How do sub-assemblies work?"],
  drawing:["How do I set up a drawing from a part?","How do I add weld symbols?","How do I create a section view?","How do I control drawing scale?"]
};

var TITLES={part:"Part Modeling",assembly:"Assemblies",drawing:"Drawings & Detailing"};
var SUBS={part:"Creating 3D solid parts from sketches and features.",assembly:"Combining parts with mates and constraints.",drawing:"2D views, dimensions, weld callouts, and output."};

function setC(c){
  cat=c;
  document.querySelectorAll(".cb").forEach(function(b){b.classList.remove("on")});
  document.getElementById("b"+c[0]).classList.add("on");
  renderRef();
  if(hist.length===0){
    document.getElementById("msgs").innerHTML='<div class="welcome" id="wc"><span class="wt">'+TITLES[c]+'</span>'+SUBS[c]+'<div class="chips" id="chips"></div></div>';
    renderChips();
  }
}

function renderRef(){
  var d=SH[cat],h="";
  for(var s in d){
    h+='<div class="rh">'+s+'</div>';
    for(var i=0;i<d[s].length;i++)h+='<div class="sr"><span>'+d[s][i][0]+'</span><span class="key">'+d[s][i][1]+'</span></div>';
  }
  document.getElementById("ref").innerHTML=h;
}

function renderChips(){
  var el=document.getElementById("chips");
  if(!el)return;
  el.innerHTML=SUGG[cat].map(function(s){return'<span class="chip" onclick="ask(\''+s.replace(/'/g,"\\'")+'\')">' +s+'</span>'}).join("");
}

function ask(t){document.getElementById("inp").value=t;go()}

function esc(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}
function fmt(t){
  return esc(t)
    .replace(/`([^`\n]+)`/g,"<code>$1</code>")
    .replace(/\*\*([^*\n]+)\*\*/g,"<strong>$1</strong>")
    .replace(/\n/g,"<br>");
}

async function go(){
  var inp=document.getElementById("inp");
  var t=inp.value.trim();
  if(!t)return;
  var btn=document.getElementById("sbtn");
  btn.disabled=true; inp.value="";
  var ms=document.getElementById("msgs");
  var wc=document.getElementById("wc"); if(wc)wc.remove();

  var um=document.createElement("div"); um.className="msg u"; um.innerHTML=esc(t); ms.appendChild(um);
  hist.push({role:"user",content:t});
  saveHistory();

  var tp=document.createElement("div"); tp.className="typing"; tp.textContent="Thinking..."; ms.appendChild(tp);
  ms.scrollTop=ms.scrollHeight;

  try{
    var r=await fetch(WORKER,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({category:cat,messages:hist})
    });
    var d=await r.json();
    tp.remove();
    var reply=d.reply||"No response received.";
    hist.push({role:"assistant",content:reply});
    saveHistory();
    var am=document.createElement("div"); am.className="msg a"; am.innerHTML=fmt(reply); ms.appendChild(am);
  }catch(e){
    tp.remove();
    var em=document.createElement("div"); em.className="msg a"; em.textContent="Connection error. Check that WORKER URL is set correctly."; ms.appendChild(em);
  }

  ms.scrollTop=ms.scrollHeight;
  btn.disabled=false; inp.focus();
}

function renderHistory(){
  var ms=document.getElementById("msgs");
  if(hist.length===0){
    ms.innerHTML='<div class="welcome" id="wc"><span class="wt">'+TITLES[cat]+'</span>'+SUBS[cat]+'<div class="chips" id="chips"></div></div>';
    renderChips();
  }else{
    ms.innerHTML="";
    for(var i=0;i<hist.length;i++){
      var msg=hist[i];
      var div=document.createElement("div");
      div.className="msg "+(msg.role==="user"?"u":"a");
      div.innerHTML=msg.role==="user"?esc(msg.content):fmt(msg.content);
      ms.appendChild(div);
    }
  }
  ms.scrollTop=ms.scrollHeight;
}

function clearChat(){
  hist=[];
  saveHistory();
  renderHistory();
}

document.getElementById("inp").addEventListener("keydown",function(e){
  if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();go()}
});

loadHistory();
renderRef(); renderHistory();
</script>
</body>
</html>