your_ai_insight 1.0.7

data/app/views/your_ai_insight/chat/_widget.html.erb

@@ -0,0 +1,153 @@
+<%# app/views/your_ai_insight/chat/_widget.html.erb %>
+<%#
+  Drop-in floating chat assistant. Add to any layout before </body>:
+    <%= render "your_ai_insight/chat/widget" %>
+%>
+
+<div id="yai-root" style="position:fixed;bottom:24px;right:24px;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
+
+  <%# ── Toggle button ─────────────────────────────────────────────── %>
+  <button id="yai-toggle"
+    onclick="yaiToggle()"
+    title="AI Facility Assistant"
+    style="width:56px;height:56px;border-radius:50%;background:#1a56db;color:#fff;border:none;
+           box-shadow:0 4px 16px rgba(26,86,219,.45);cursor:pointer;font-size:20px;
+           display:flex;align-items:center;justify-content:center;transition:transform .15s;
+           margin-left:auto;">
+    💡
+  </button>
+
+  <%# ── Chat panel ─────────────────────────────────────────────────── %>
+  <div id="yai-panel"
+    style="display:none;position:absolute;bottom:68px;right:0;width:400px;
+           background:#fff;border-radius:16px;overflow:hidden;
+           box-shadow:0 8px 40px rgba(0,0,0,.18);flex-direction:column;">
+
+    <%# Header %>
+    <div style="background:linear-gradient(135deg,#1a56db,#1e40af);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;">
+      <div>
+        <div style="font-size:15px;font-weight:600;">AI Facility Assistant</div>
+        <div style="font-size:11px;opacity:.75;margin-top:2px;"><%= YourAiInsight.config.company_name %> · Powered by Claude</div>
+      </div>
+      <button onclick="yaiToggle()" style="background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;">✕</button>
+    </div>
+
+    <%# Messages %>
+    <div id="yai-messages" style="height:320px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f8fafc;">
+      <div class="yai-msg yai-bot">
+        Hello! I have live access to your facility data — jobs, tasks, bids, budgets, vendors, and more. What would you like to know?
+      </div>
+    </div>
+
+    <%# Quick prompts %>
+    <div id="yai-prompts" style="padding:10px 14px 6px;display:flex;flex-wrap:wrap;gap:6px;background:#fff;border-top:1px solid #e5e7eb;">
+      <button class="yai-chip" onclick="yaiSend(this.textContent)">Jobs on hold?</button>
+      <button class="yai-chip" onclick="yaiSend(this.textContent)">Overdue tasks?</button>
+      <button class="yai-chip" onclick="yaiSend(this.textContent)">Budget vs actual?</button>
+      <button class="yai-chip" onclick="yaiSend(this.textContent)">Pending bids?</button>
+      <button class="yai-chip" onclick="yaiSend(this.textContent)">Budget requests pending?</button>
+    </div>
+
+    <%# Input %>
+    <div style="display:flex;gap:8px;padding:10px 14px;background:#fff;">
+      <input id="yai-input"
+        type="text"
+        placeholder="Ask anything about your facility operations…"
+        onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();yaiSubmit();}"
+        style="flex:1;border:1.5px solid #d1d5db;border-radius:10px;padding:9px 14px;font-size:14px;
+               outline:none;transition:border-color .15s;background:#f9fafb;"
+        onfocus="this.style.borderColor='#1a56db'"
+        onblur="this.style.borderColor='#d1d5db'">
+      <button onclick="yaiSubmit()"
+        style="background:#1a56db;color:#fff;border:none;border-radius:10px;padding:9px 18px;
+               font-size:14px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background .15s;"
+        onmouseover="this.style.background='#1e40af'"
+        onmouseout="this.style.background='#1a56db'">
+        Send
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  #yai-panel.open { display:flex !important; }
+  .yai-msg { max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55;word-break:break-word; }
+  .yai-bot  { background:#fff;color:#1e293b;align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.08); }
+  .yai-user { background:#1a56db;color:#fff;align-self:flex-end;border-bottom-right-radius:4px; }
+  .yai-loading { background:#fff;color:#6b7280;font-style:italic;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.06); }
+  .yai-chip { background:#f0f4ff;color:#1a56db;border:1px solid #c7d7fd;border-radius:20px;
+    padding:4px 12px;font-size:12px;cursor:pointer;transition:background .1s; }
+  .yai-chip:hover { background:#dbeafe; }
+  #yai-messages::-webkit-scrollbar { width:4px; }
+  #yai-messages::-webkit-scrollbar-track { background:transparent; }
+  #yai-messages::-webkit-scrollbar-thumb { background:#d1d5db;border-radius:2px; }
+  .yai-bot strong { color:#1a56db; }
+  .yai-bot ul { margin:6px 0;padding-left:18px; }
+  .yai-bot li { margin:2px 0; }
+</style>
+
+<script>
+(function() {
+  const ENDPOINT  = "<%= your_ai_insight.chat_path %>";
+  const CSRF      = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
+  let open        = false;
+
+  window.yaiToggle = function() {
+    open = !open;
+    const panel = document.getElementById('yai-panel');
+    panel.classList.toggle('open', open);
+    if (open) document.getElementById('yai-input').focus();
+  };
+
+  window.yaiSend = function(text) {
+    document.getElementById('yai-input').value = text;
+    yaiSubmit();
+  };
+
+  window.yaiSubmit = function() {
+    const input   = document.getElementById('yai-input');
+    const message = input.value.trim();
+    if (!message) return;
+
+    append(message, 'yai-user');
+    input.value = '';
+
+    // Hide quick prompts after first real message
+    const prompts = document.getElementById('yai-prompts');
+    if (prompts) prompts.style.display = 'none';
+
+    const loader = append('Analyzing your facility data…', 'yai-loading');
+
+    fetch(ENDPOINT, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF },
+      body:    JSON.stringify({ message })
+    })
+    .then(r => r.json())
+    .then(data => {
+      loader.remove();
+      append(data.response || data.error || 'Sorry, something went wrong.', 'yai-bot');
+    })
+    .catch(() => {
+      loader.remove();
+      append('Connection error. Please try again.', 'yai-bot');
+    });
+  };
+
+  function append(text, cls) {
+    const box = document.getElementById('yai-messages');
+    const div = document.createElement('div');
+    div.className = 'yai-msg ' + cls;
+    // Render markdown bold + bullets
+    div.innerHTML = text
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/^- (.+)$/gm, '<li>$1</li>')
+      .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
+      .replace(/\n/g, '<br>');
+    box.appendChild(div);
+    box.scrollTop = box.scrollHeight;
+    return div;
+  }
+})();
+</script>