Frontend Refactoring: HTML/CSS/JS getrennt, modulare Struktur

wwwroot/js/ui.js

@@ -0,0 +1,125 @@
+// ── DOM Helpers ──
+
+const $ = (sel) => document.querySelector(sel);
+const chatEl = () => $('#chat');
+const metaEl = () => $('#meta');
+
+function scrollDown() {
+  const chat = chatEl();
+  chat.scrollTop = chat.scrollHeight;
+}
+
+function esc(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+function truncate(s, max) {
+  return s && s.length > max ? s.substring(0, max) + '...' : (s || '');
+}
+
+// ── Message Bubbles ──
+
+function addUserBubble(text) {
+  const div = document.createElement('div');
+  div.className = 'msg user';
+  div.textContent = text;
+  chatEl().appendChild(div);
+  scrollDown();
+}
+
+function addAssistantBubble(text) {
+  const div = document.createElement('div');
+  div.className = 'msg assistant';
+  div.textContent = text;
+  chatEl().appendChild(div);
+  scrollDown();
+  return div;
+}
+
+function addErrorBubble(text) {
+  const div = document.createElement('div');
+  div.className = 'msg system-info';
+  div.style.color = '#ff6b6b';
+  div.textContent = text;
+  chatEl().appendChild(div);
+  scrollDown();
+}
+
+// ── Streaming Bubble ──
+
+let _streamDiv = null;
+let _streamText = '';
+
+function startStreamBubble() {
+  _streamDiv = document.createElement('div');
+  _streamDiv.className = 'msg assistant';
+  _streamDiv.innerHTML = '<span class="cursor"></span>';
+  _streamText = '';
+  chatEl().appendChild(_streamDiv);
+  scrollDown();
+}
+
+function appendToStream(text) {
+  if (!_streamDiv) startStreamBubble();
+  _streamText += text;
+  _streamDiv.textContent = _streamText;
+  const cursor = document.createElement('span');
+  cursor.className = 'cursor';
+  _streamDiv.appendChild(cursor);
+  scrollDown();
+}
+
+function endStreamBubble() {
+  if (_streamDiv) {
+    const cursor = _streamDiv.querySelector('.cursor');
+    if (cursor) cursor.remove();
+    if (!_streamText.trim()) _streamDiv.remove();
+  }
+  _streamDiv = null;
+  _streamText = '';
+}
+
+// ── Tool Boxes ──
+
+function addToolBoxLoading(name) {
+  const div = document.createElement('div');
+  div.className = 'tool-box';
+  div.innerHTML = '<span class="tool-name">' + esc(name) + '</span> <span class="tool-spinner">⏳</span>';
+  chatEl().appendChild(div);
+  scrollDown();
+  return div;
+}
+
+function finishToolBox(div, data) {
+  if (!div) return;
+  div.innerHTML = '<span class="tool-name">' + esc(data.name) + '</span>'
+    + '<span class="tool-input">' + esc(truncate(data.input, 120)) + '</span>'
+    + '<div class="tool-result ' + (data.isError ? 'tool-error' : '') + '">'
+    + esc(truncate(data.result, 300)) + '</div>';
+  scrollDown();
+}
+
+function addToolBoxStatic(name, input, result, isError) {
+  const div = document.createElement('div');
+  div.className = 'tool-box';
+  div.innerHTML = '<span class="tool-name">' + esc(name) + '</span>'
+    + '<span class="tool-input">' + esc(truncate(input, 120)) + '</span>';
+  if (result) {
+    div.innerHTML += '<div class="tool-result ' + (isError ? 'tool-error' : '') + '">'
+      + esc(truncate(result, 300)) + '</div>';
+  }
+  chatEl().appendChild(div);
+  scrollDown();
+}
+
+// ── Meta Bar ──
+
+function setMeta(text) {
+  metaEl().textContent = text;
+}
+
+function setMetaHtml(html) {
+  metaEl().innerHTML = html;
+}