create-walle 0.9.11 → 0.9.13

package/template/claude-task-manager/public/js/setup.js

@@ -46,7 +46,8 @@ function initSetupTabs() {
 function _keyInputIdFor(type) {
   return type === 'anthropic' ? 'setup-api-key'
     : type === 'openai' ? 'setup-openai-key'
-    : type === 'google' ? 'setup-google-key' : null;
+    : type === 'google' ? 'setup-google-key'
+    : type === 'deepseek' ? 'setup-deepseek-key' : null;
 }
 
 function initProviderPicker() {
@@ -71,20 +72,32 @@ function initProviderPicker() {
   document.querySelectorAll('#setup-panel button[data-default-btn]').forEach(function(btn) {
     btn.addEventListener('click', async function() {
       var type = btn.getAttribute('data-default-btn');
+      var modelEl = document.getElementById(_selectIdFor(type));
+      var previousDefault = document.querySelector('#setup-panel [data-default-btn].is-default')?.getAttribute('data-default-btn') || null;
+      _renderDefaultBadge(type);
+      btn.classList.add('is-saving');
+      document.querySelectorAll('#setup-panel button[data-default-btn]').forEach(function(b) { b.disabled = true; });
       try {
         var r = await fetch('/api/setup/set-default', {
           method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: type }),
+          body: JSON.stringify({ type: type, model: modelEl ? modelEl.value : '' }),
         });
         var d = await r.json();
         if (d.ok) {
-          setupToast(type + ' set as default');
-          _renderDefaultBadge(type);
+          if (modelEl && modelEl.value) _rememberProviderModel(type, modelEl.value);
+          setupToast(type + ' set as default' + (d.live_updated ? '' : ' (restart scheduled)'));
           loadHealthDashboard();
         } else {
+          _renderDefaultBadge(previousDefault);
           setupToast(d.error || 'Failed to set default', 'error');
         }
-      } catch (e) { setupToast(e.message, 'error'); }
+      } catch (e) {
+        _renderDefaultBadge(previousDefault);
+        setupToast(e.message, 'error');
+      } finally {
+        btn.classList.remove('is-saving');
+        document.querySelectorAll('#setup-panel button[data-default-btn]').forEach(function(b) { b.disabled = false; });
+      }
     });
   });
 
@@ -130,8 +143,8 @@ function initProviderPicker() {
   });
 
   // API key input → debounced model refresh (preserves prior behavior)
-  ['setup-api-key', 'setup-openai-key', 'setup-google-key'].forEach(function(id) {
-    var providerByInput = { 'setup-api-key': 'anthropic', 'setup-openai-key': 'openai', 'setup-google-key': 'google' };
+  ['setup-api-key', 'setup-openai-key', 'setup-google-key', 'setup-deepseek-key'].forEach(function(id) {
+    var providerByInput = { 'setup-api-key': 'anthropic', 'setup-openai-key': 'openai', 'setup-google-key': 'google', 'setup-deepseek-key': 'deepseek' };
     var input = document.getElementById(id);
     if (!input) return;
     input.addEventListener('input', function() { scheduleKeyChange(providerByInput[id], id); });
@@ -214,6 +227,7 @@ async function saveProviderCard(type) {
     });
     var d = await r.json();
     if (d.ok) {
+      if (model) _applyProviderModelSelection(type, model);
       if (resultEl) { resultEl.className = 'test-result ok'; resultEl.textContent = '✓ Saved'; }
       setTimeout(function() { if (resultEl) { resultEl.style.display = 'none'; } }, 4000);
       loadHealthDashboard();
@@ -229,6 +243,7 @@ async function saveProviderCard(type) {
 // Cache: { '<provider>:<keyFingerprint>': [{id,name,capabilities}, ...] }
 var _modelsCache = {};
 var _keyDebounceTimers = {};
+var _providerModelPrefs = {};
 
 function _keyFingerprint(key) {
   if (!key) return 'env';
@@ -241,9 +256,49 @@ function _selectIdFor(provider) {
   return provider === 'openai' ? 'setup-openai-model'
     : provider === 'google' ? 'setup-google-model'
     : provider === 'ollama' ? 'setup-ollama-model'
+    : provider === 'deepseek' ? 'setup-deepseek-model'
     : 'setup-walle-model';
 }
 
+function _rememberProviderModel(provider, model) {
+  if (!provider) return;
+  if (model) _providerModelPrefs[provider] = model;
+  else delete _providerModelPrefs[provider];
+}
+
+function _preferredModelFor(provider, sel) {
+  return _providerModelPrefs[provider] || (sel ? sel.value : '');
+}
+
+function _applyProviderModelSelection(provider, model) {
+  if (!model) return;
+  _rememberProviderModel(provider, model);
+  var sel = document.getElementById(_selectIdFor(provider));
+  if (!sel) return;
+  for (var i = 0; i < sel.options.length; i++) {
+    if (sel.options[i].value === model) {
+      sel.value = model;
+      return;
+    }
+  }
+  var opt = document.createElement('option');
+  opt.value = model;
+  opt.textContent = model + ' (custom)';
+  sel.insertBefore(opt, sel.firstChild);
+  sel.value = model;
+}
+
+function initProviderModelPreferenceTracking() {
+  ['anthropic', 'openai', 'google', 'ollama', 'deepseek'].forEach(function(provider) {
+    var sel = document.getElementById(_selectIdFor(provider));
+    if (!sel || sel.dataset.modelPrefBound === '1') return;
+    sel.dataset.modelPrefBound = '1';
+    sel.addEventListener('change', function() {
+      _rememberProviderModel(provider, sel.value);
+    });
+  });
+}
+
 async function loadModels(provider, opts) {
   opts = opts || {};
   var sel = document.getElementById(_selectIdFor(provider));
@@ -251,7 +306,7 @@ async function loadModels(provider, opts) {
   var keyOverride = (opts.apiKey || '').trim();
   var cacheKey = provider + ':' + _keyFingerprint(keyOverride);
   if (_modelsCache[cacheKey] && !opts.force) {
-    _renderModelOptions(sel, _modelsCache[cacheKey]);
+    _renderModelOptions(sel, _modelsCache[cacheKey], _preferredModelFor(provider, sel));
     return;
   }
   // Don't capture sel.value here — loadStatus may set the saved model AFTER this
@@ -273,7 +328,7 @@ async function loadModels(provider, opts) {
     var models = (d && Array.isArray(d.models)) ? d.models : [];
     if (models.length > 0) {
       _modelsCache[cacheKey] = models;
-      _renderModelOptions(sel, models);
+      _renderModelOptions(sel, models, _preferredModelFor(provider, sel));
     }
   } catch { /* keep existing options on error */ }
   sel.disabled = false;
@@ -370,21 +425,19 @@ async function loadStatus() {
       document.getElementById('setup-api-key').placeholder = '\u2022\u2022\u2022\u2022\u2022 (configured)';
     }
     if (d.walle_model) {
-      var selId = activeProvider === 'openai' ? 'setup-openai-model'
-        : activeProvider === 'google' ? 'setup-google-model'
-        : activeProvider === 'ollama' ? 'setup-ollama-model'
-        : 'setup-walle-model';
+      var selId = _selectIdFor(activeProvider);
       var sel = document.getElementById(selId);
       if (sel) {
+        var preferredModel = (activeProvider && _providerModelPrefs[activeProvider]) || d.walle_model;
         var found = false;
         for (var i = 0; i < sel.options.length; i++) {
-          if (sel.options[i].value === d.walle_model) { sel.value = d.walle_model; found = true; break; }
+          if (sel.options[i].value === preferredModel) { sel.value = preferredModel; found = true; break; }
         }
         if (!found) {
           var opt = document.createElement('option');
-          opt.value = d.walle_model; opt.textContent = d.walle_model;
+          opt.value = preferredModel; opt.textContent = preferredModel;
           sel.insertBefore(opt, sel.firstChild);
-          sel.value = d.walle_model;
+          sel.value = preferredModel;
         }
       }
     }
@@ -446,6 +499,9 @@ async function saveConfig() {
     modelVal = document.getElementById('setup-google-model').value;
   } else if (_selectedProvider === 'ollama') {
     modelVal = document.getElementById('setup-ollama-model').value;
+  } else if (_selectedProvider === 'deepseek') {
+    apiVal = document.getElementById('setup-deepseek-key').value.trim();
+    modelVal = document.getElementById('setup-deepseek-model').value;
   }
 
   if (!ownerVal) {
@@ -1589,6 +1645,7 @@ SETUP.init = function() {
   });
   initSetupTabs();
   initProviderPicker();
+  initProviderModelPreferenceTracking();
   initPcardAccordion();
   // Inject the brand-mark SVG for each provider card (anthropic / openai /
   // google / ollama / mlx). The card headers carry data-pcard-header="<key>";
@@ -1792,21 +1849,8 @@ async function loadProviderCardStates() {
         }
       }
       // Pre-fill model dropdown if backend has a per-provider model
-      if (p.model) {
-        var sel = document.getElementById(_selectIdFor(p.type));
-        if (sel) {
-          var found = false;
-          for (var j = 0; j < sel.options.length; j++) {
-            if (sel.options[j].value === p.model) { sel.value = p.model; found = true; break; }
-          }
-          if (!found) {
-            var opt = document.createElement('option');
-            opt.value = p.model; opt.textContent = p.model + ' (custom)';
-            sel.insertBefore(opt, sel.firstChild);
-            sel.value = p.model;
-          }
-        }
-      }
+      if (p.model) _applyProviderModelSelection(p.type, p.model);
+      else _rememberProviderModel(p.type, '');
     }
     // Conditional Devbox row: only show under Anthropic if the file exists
     // server-side. We probe via a lightweight HEAD-style check: ask the

package/template/claude-task-manager/public/js/stream-view.js

@@ -340,32 +340,58 @@ function _mergeConsecutiveToolGroups(container, newEl) {
   const newItems = newEl.querySelector('.thought-group-items');
   if (!targetItems || !newItems) return false;
   while (newItems.firstChild) targetItems.appendChild(newItems.firstChild);
-  // Update the count
-  const countEl = lastChild.querySelector('.thought-group-count');
-  if (countEl) {
-    const stepCount = targetItems.children.length;
-    countEl.textContent = '— ' + stepCount + ' step' + (stepCount === 1 ? '' : 's');
-  }
-  // Extend the time range to first–last
+  // Extend the time range to first–last, then let the shared renderer
+  // recompute count + preview. Keeping all item parentUuids on the nested
+  // rows prevents a later update from replacing the whole merged group.
   const newLast = newEl.dataset.lastTime || '';
   if (newLast) lastChild.dataset.lastTime = newLast;
-  const tEl = lastChild.querySelector('.thought-group-time');
-  if (tEl) {
-    const f = lastChild.dataset.firstTime || '';
-    const l = lastChild.dataset.lastTime || '';
-    tEl.textContent = (f && l && f !== l) ? f + ' – ' + l : (l || f);
+  if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
+    MR.refreshConversationActivityGroup(lastChild);
+  }
+  return true;
+}
+
+function _assignConversationParentUuid(el, parentUuid) {
+  if (!el || !parentUuid) return;
+  if (el.classList && el.classList.contains('conv-tool-group')) {
+    const items = el.querySelector('.thought-group-items');
+    const row = items && (items.lastElementChild || (items.children && items.children[items.children.length - 1]));
+    if (row && row.dataset && !row.dataset.parentUuid) row.dataset.parentUuid = parentUuid;
+  } else if (el.dataset) {
+    el.dataset.parentUuid = parentUuid;
+  }
+}
+
+function _replaceConversationParentEvent(existing, newEl) {
+  if (!existing) return false;
+  const existingGroup = existing.closest ? existing.closest('.conv-tool-group') : null;
+  if (existingGroup && newEl && newEl.classList && newEl.classList.contains('conv-tool-group')) {
+    const targetRow = existing.closest('.tool-activity-item') || existing;
+    const targetParent = targetRow.parentNode;
+    const newItems = newEl.querySelector('.thought-group-items');
+    if (!targetParent || !newItems) return false;
+    const rows = Array.from(newItems.children || []);
+    for (const row of rows) targetParent.insertBefore(row, targetRow);
+    targetParent.removeChild(targetRow);
+    if (newEl.dataset.lastTime) existingGroup.dataset.lastTime = newEl.dataset.lastTime;
+    if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
+      MR.refreshConversationActivityGroup(existingGroup);
+    }
+    return true;
   }
-  // Preview rule (matches Review's renderGroup): keep the FIRST non-empty
-  // preview as the group summary. Once a narration line ("Let me read…")
-  // anchors the preview, later tool-only steps don't overwrite it.
-  // Only update if the existing preview is empty AND the incoming has text.
-  const previewEl = lastChild.querySelector('.thought-group-preview');
-  const newPreviewEl = newEl.querySelector('.thought-group-preview');
-  if (previewEl && newPreviewEl && newPreviewEl.textContent && !previewEl.textContent) {
-    previewEl.textContent = newPreviewEl.textContent;
+  if (existingGroup && !newEl) {
+    const targetRow = existing.closest('.tool-activity-item') || existing;
+    const targetParent = targetRow.parentNode;
+    if (targetParent) targetParent.removeChild(targetRow);
+    const remaining = existingGroup.querySelector('.thought-group-items')?.children?.length || 0;
+    if (remaining === 0) existingGroup.remove();
+    else if (typeof MR !== 'undefined' && typeof MR.refreshConversationActivityGroup === 'function') {
+      MR.refreshConversationActivityGroup(existingGroup);
+    }
+    return true;
   }
-  // Carry the latest parentUuid forward so dedup still finds this group.
-  if (newEl.dataset.parentUuid) lastChild.dataset.parentUuid = newEl.dataset.parentUuid;
+  if (newEl) existing.replaceWith(newEl);
+  else existing.remove();
   return true;
 }
 
@@ -379,6 +405,7 @@ function populateConversationView(container, events) {
   for (const evt of events) {
     const el = renderConversationEvent(evt);
     if (!el) continue;
+    if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
     if (_mergeConsecutiveToolGroups(container, el)) continue;
     container.appendChild(el);
   }
@@ -671,10 +698,10 @@ function _applyStreamEvent(sessionId, container, msg) {
     if (existing) {
       const newEl = renderConversationEvent(msg);
       if (newEl) {
-        newEl.dataset.parentUuid = parentUuid;
-        existing.replaceWith(newEl);
+        _assignConversationParentUuid(newEl, parentUuid);
+        _replaceConversationParentEvent(existing, newEl);
       } else {
-        existing.remove(); // Event became empty after update
+        _replaceConversationParentEvent(existing, null); // Event became empty after update
       }
       return;
     }
@@ -690,8 +717,8 @@ function _applyStreamEvent(sessionId, container, msg) {
     if (existing) {
       const newEl = renderConversationEvent(msg);
       if (newEl) {
-        newEl.dataset.parentUuid = parentUuid;
-        existing.replaceWith(newEl);
+        _assignConversationParentUuid(newEl, parentUuid);
+        _replaceConversationParentEvent(existing, newEl);
       }
       return;
     }
@@ -701,7 +728,7 @@ function _applyStreamEvent(sessionId, container, msg) {
   if (!el) return; // Skip empty events
   _removeConversationState(container);
   if (parentUuid) {
-    el.dataset.parentUuid = parentUuid;
+    _assignConversationParentUuid(el, parentUuid);
     if (seen) seen.add(parentUuid);
   }
   // If this is a tool-only thought-group AND the last rendered child is also
@@ -920,7 +947,8 @@ async function _loadOlder(sessionId, convView) {
     for (const evt of events) {
       const el = renderConversationEvent(evt);
       if (el) {
-        if (evt.data?.parentUuid) el.dataset.parentUuid = evt.data.parentUuid;
+        if (evt.data?.parentUuid) _assignConversationParentUuid(el, evt.data.parentUuid);
+        if (_mergeConsecutiveToolGroups(frag, el)) continue;
         frag.appendChild(el);
       }
     }
@@ -957,18 +985,6 @@ async function _primeConversationView(sessionId, convView) {
       const events = _messagesToEvents(page.messages);
       populateConversationView(convView, events);
 
-      // Assign data-parent-uuid on each primed row so live stream-events
-      // that cover the same turn can find + replace instead of duplicate.
-      // populateConversationView appends children in order; we walk in
-      // lockstep skipping events that rendered to null (empty).
-      let domIdx = 0;
-      for (const e of events) {
-        const child = convView.children[domIdx];
-        if (!child) break;
-        if (e.data?.parentUuid) child.dataset.parentUuid = e.data.parentUuid;
-        domIdx++;
-      }
-
       // Seed the parentUuid dedup set from the primed history so live
       // stream-events that cover the same turns don't re-append.
       const seen = new Set();
@@ -1011,24 +1027,62 @@ function _resetPrimingState(sessionId) {
 
 // --- Tooltip hover binding ---
 
+function _streamTooltipContains(parent, child) {
+  if (!parent || !child) return false;
+  if (typeof parent.contains === 'function') return parent.contains(child);
+  for (let node = child; node; node = node.parentNode) {
+    if (node === parent) return true;
+  }
+  return false;
+}
+
+function _streamTooltipClosestSessionItem(target, root) {
+  let item = null;
+  if (target && typeof target.closest === 'function') {
+    item = target.closest('.session-item');
+  } else {
+    for (let node = target; node; node = node.parentNode) {
+      const classes = String(node.className || '').split(/\s+/);
+      if (classes.includes('session-item')) {
+        item = node;
+        break;
+      }
+    }
+  }
+  if (!item) return null;
+  if (root && item !== root && !_streamTooltipContains(root, item)) return null;
+  return item;
+}
+
+function _scheduleStreamTooltip(item) {
+  const id = item?.dataset?.sessionId;
+  if (!id) return;
+  _streamState.tooltipTimer = setTimeout(() => showStreamTooltip(id, item), 500);
+}
+
+function _handleStreamTooltipMouseOver(e, list) {
+  const item = _streamTooltipClosestSessionItem(e.target, list);
+  if (!item) return;
+  if (e.relatedTarget && _streamTooltipContains(item, e.relatedTarget)) return;
+  hideStreamTooltip();
+  _scheduleStreamTooltip(item);
+}
+
+function _handleStreamTooltipMouseOut(e, list) {
+  const item = _streamTooltipClosestSessionItem(e.target, list);
+  if (!item) return;
+  if (e.relatedTarget && _streamTooltipContains(item, e.relatedTarget)) return;
+  hideStreamTooltip();
+}
+
 function bindStreamTooltips() {
   const list = document.getElementById('session-list');
   if (!list) return;
+  if (list.__streamTooltipBound) return;
+  list.__streamTooltipBound = true;
 
-  list.addEventListener('mouseenter', (e) => {
-    // Always cancel pending tooltip on any enter (prevents stale timers between items)
-    hideStreamTooltip();
-    const item = e.target.closest('.session-item');
-    if (!item) return;
-    const id = item.dataset.sessionId;
-    if (!id) return;
-    _streamState.tooltipTimer = setTimeout(() => showStreamTooltip(id, item), 500);
-  }, true);
-
-  list.addEventListener('mouseleave', () => {
-    // Always dismiss — don't gate on closest('.session-item')
-    hideStreamTooltip();
-  }, true);
+  list.addEventListener('mouseover', (e) => _handleStreamTooltipMouseOver(e, list));
+  list.addEventListener('mouseout', (e) => _handleStreamTooltipMouseOut(e, list));
 }
 
 // --- Init ---
@@ -1061,6 +1115,12 @@ if (typeof module !== 'undefined' && module.exports) {
     _fetchConversationPage,
     renderConversationEvent,
     populateConversationView,
+    _mergeConsecutiveToolGroups,
     _streamState,
+    bindStreamTooltips,
+    _handleStreamTooltipMouseOver,
+    _handleStreamTooltipMouseOut,
+    _streamTooltipClosestSessionItem,
+    _streamTooltipContains,
   };
 }

package/template/claude-task-manager/public/js/walle-session.js

@@ -435,6 +435,25 @@ window.WalleSession = (function() {
   }
 
   // ---------- sendMessage ----------
+  function resolveContextSessionId(id) {
+    var preferred = state.lastActiveWorkSessionId || state._savedActiveSession || '';
+    if (preferred && preferred !== id) {
+      var preferredSession = state.sessions.get(preferred);
+      if (preferredSession && preferredSession.meta?.type !== 'walle') return preferred;
+    }
+    var idx = state.tabOrder.indexOf(id);
+    var order = idx >= 0
+      ? state.tabOrder.slice(0, idx).reverse().concat(state.tabOrder.slice(idx + 1).reverse())
+      : state.tabOrder.slice().reverse();
+    for (var i = 0; i < order.length; i++) {
+      var sid = order[i];
+      if (sid === id) continue;
+      var s = state.sessions.get(sid);
+      if (s && s.meta?.type !== 'walle') return sid;
+    }
+    return '';
+  }
+
   function sendMessage(id) {
     var container = document.getElementById('walle-session-' + id);
     if (!container) return;
@@ -458,7 +477,7 @@ window.WalleSession = (function() {
 
     // Send via WebSocket (include model if user selected one)
     var model = ws.selectedModel || '';
-    send({ type: 'walle-message', id: id, text: text, model: model });
+    send({ type: 'walle-message', id: id, text: text, model: model, contextSessionId: resolveContextSessionId(id) });
 
     // Clear input
     textarea.value = '';
@@ -632,6 +651,67 @@ window.WalleSession = (function() {
     return text;
   }
 
+  function normalizeProviderIssue(source) {
+    if (!source || typeof source !== 'object') return null;
+    var issue = source.providerError || source.provider_error || source;
+    if (!issue || typeof issue !== 'object') return null;
+    if (!issue.title && !issue.rawMessage && !issue.userMessage && issue.code !== 'AI_PROVIDER_ERROR') return null;
+    return {
+      title: issue.title || 'AI provider failed',
+      message: issue.userMessage || issue.message || source.message || source.error || 'Wall-E could not get a response from the configured AI provider.',
+      rawMessage: issue.rawMessage || '',
+      provider: issue.provider || '',
+      model: issue.model || '',
+      status: issue.status || '',
+      retryAfter: issue.retryAfter || '',
+      actionUrl: issue.actionUrl || issue.action_url || '/setup.html',
+      actionLabel: issue.actionLabel || 'Open Setup'
+    };
+  }
+
+  function appendProviderIssueNotice(notice, issue) {
+    notice.className += ' provider';
+
+    var title = document.createElement('div');
+    title.className = 'walle-error-title';
+    title.textContent = issue.title;
+    notice.appendChild(title);
+
+    var body = document.createElement('div');
+    body.className = 'walle-error-body';
+    body.textContent = issue.message;
+    notice.appendChild(body);
+
+    var detailLines = [];
+    if (issue.status) detailLines.push('HTTP/status: ' + issue.status);
+    if (issue.provider) detailLines.push('Provider: ' + issue.provider);
+    if (issue.model) detailLines.push('Model: ' + issue.model);
+    if (issue.retryAfter) detailLines.push('Retry after: ' + issue.retryAfter);
+    if (issue.rawMessage) detailLines.push('', issue.rawMessage);
+    if (detailLines.length) {
+      var details = document.createElement('details');
+      details.className = 'walle-error-details';
+      var summary = document.createElement('summary');
+      summary.textContent = 'Provider details';
+      details.appendChild(summary);
+      var pre = document.createElement('pre');
+      pre.textContent = detailLines.join('\n').trim();
+      details.appendChild(pre);
+      notice.appendChild(details);
+    }
+
+    if (issue.actionUrl && /^\/setup/.test(issue.actionUrl) && typeof navTo === 'function') {
+      var actions = document.createElement('div');
+      actions.className = 'walle-error-actions';
+      var btn = document.createElement('button');
+      btn.className = 'walle-session-action-btn primary';
+      btn.textContent = issue.actionLabel || 'Open Setup';
+      btn.onclick = function() { navTo('setup'); };
+      actions.appendChild(btn);
+      notice.appendChild(actions);
+    }
+  }
+
   function handleError(msg) {
     var id = msg.id;
     var messagesArea = document.getElementById('walle-messages-' + id);
@@ -647,7 +727,9 @@ window.WalleSession = (function() {
 
     var notice = document.createElement('div');
     notice.className = 'walle-error-notice';
-    notice.textContent = formatWalleError(msg.error);
+    var providerIssue = normalizeProviderIssue(msg.providerError ? { providerError: msg.providerError } : null);
+    if (providerIssue) appendProviderIssueNotice(notice, providerIssue);
+    else notice.textContent = formatWalleError(msg.error);
     messagesArea.appendChild(notice);
     scrollToBottom(messagesArea);
     updateSendButton(id, false);