json-object-editor 0.10.624 → 0.10.632

package/js/joe-ai.js

@@ -6,6 +6,27 @@
     Ai.default_ai = null; // Default AI assistant object
     // ========== COMPONENTS ==========
     
+    // Simple markdown -> HTML helper used by chat UI components.
+    // Uses global `marked` and `DOMPurify` when available, falls back to
+    // basic escaping + <br> conversion otherwise.
+    function renderMarkdownSafe(text) {
+      const raw = text || '';
+      if (typeof window !== 'undefined' && window.marked && window.DOMPurify) {
+        try {
+          const html = window.marked.parse(raw);
+          return window.DOMPurify.sanitize(html);
+        } catch (e) {
+          console.error('[joe-ai] markdown render error', e);
+          // fall through to plain escape
+        }
+      }
+      return raw
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\n/g, '<br>');
+    }
+
     class JoeAIChatbox extends HTMLElement {
       constructor() {
         super();
@@ -168,7 +189,31 @@
             this.thread_id = convo.thread_id;
             this.user = $J.get(convo.user);
           }
-  
+
+          // If there is no assistant reply yet, inject a local greeting based on context.
+          // This still shows even if we have a single PLATFORM/system card from context.
+          const hasAssistantReply = Array.isArray(this.messages) &&
+            this.messages.some(m => m.role === 'assistant');
+          if (!hasAssistantReply) {
+            try {
+              const user = this.user || (convo.user && $J.get(convo.user)) || {};
+              const contextId = (convo.context_objects && convo.context_objects[0]) || null;
+              const ctxObj = contextId ? $J.get(contextId) : null;
+              const uname = user.name || 'there';
+              let target = 'this conversation';
+              if (ctxObj) {
+                const label = ctxObj.name || ctxObj.title || ctxObj.label || ctxObj._id;
+                target = `${label} (${ctxObj.itemtype || 'item'})`;
+              }
+              const greeting = `Hi ${uname}, I’m ready to help you with ${target}. What would you like to explore or change?`;
+              this.messages.push({
+                role: 'assistant',
+                content: greeting,
+                created_at: Math.floor(Date.now()/1000)
+              });
+            } catch(_e){}
+          }
+
           return {conversation:convo,messages:this.messages};
         } catch (err) {
           console.error("Chatbox load error:", err);
@@ -297,18 +342,27 @@
             body: JSON.stringify({
               conversation_id: this.conversation_id,
               content: message,
-              assistant_id: this.selected_assistant_id||Ai.default_ai?Ai.default_ai.value:null
+              assistant_id: this.selected_assistant_id || (Ai.default_ai ? Ai.default_ai.value : null)
             })
           }).then(res => res.json());
       
-          if (response.success && response.runObj) {
-            this.currentRunId = response.runObj.id; // Store the run ID for polling
-            await this.loadConversation();   // reload messages
+          if (response.success && (response.run_id || (response.runObj && response.runObj.id))) {
+            // Use IDs from server so we don't depend on cache or stale conversation data
+            const threadId = response.thread_id || this.conversation.thread_id;
+            this.conversation.thread_id = threadId;
+            this.currentRunId = response.run_id || (response.runObj && response.runObj.id);
+
+            // Reload conversation (name, info, etc.), but preserve the known thread_id
+            await this.loadConversation();
+            if (!this.conversation.thread_id && threadId) {
+              this.conversation.thread_id = threadId;
+            }
+
             this.UI.content.update(); // update messages
             this.startPolling();              // 🌸 start watching for assistant reply!
             input.value = '';
           } else {
-            alert('Failed to send message.');
+            alert((response.error||'Failed to send message.')+' - '+response.message);
           }
         } catch (err) {
           console.error('Send message error:', err);
@@ -325,27 +379,56 @@
       
         // Insert thinking message
         this.showThinkingMessage();
-      
+
+        // Baseline: timestamp of the latest assistant message we have so far
+        const lastAssistantTs = (this.messages || [])
+          .filter(m => m && m.role === 'assistant' && m.created_at)
+          .reduce((max, m) => Math.max(max, m.created_at), 0);
+
+        let attempts = 0;
         this.pollingInterval = setInterval(async () => {
-          const runRes = await fetch(`/API/plugin/chatgpt-assistants/getRunStatus?thread_id=${this.conversation.thread_id}&run_id=${this.currentRunId}`);
-          const run = await runRes.json();
-        
-          if (run.status === 'completed') {
-            const resThread = await fetch(`/API/plugin/chatgpt-assistants/getThreadMessages?thread_id=${this.conversation.thread_id}`);
-            //const activeAssistant = this.conversation.assistants.find(a => a.openai_id === run.assistant_id);
+          attempts++;
+          try {
+            const resThread = await fetch(`/API/plugin/chatgpt-assistants/getThreadMessages?thread_id=${this.conversation.thread_id}&polling=true`);
             const threadMessages = await resThread.json();
-        
+
             if (threadMessages?.messages) {
-              this.UI.content.update(threadMessages.messages);
-              //this.messages = threadMessages.messages;
-              //this.render();
+              const msgs = threadMessages.messages;
+              const latestAssistantTs = msgs
+                .filter(m => m && m.role === 'assistant' && m.created_at)
+                .reduce((max, m) => Math.max(max, m.created_at), 0);
+
+              // When we see a newer assistant message than we had before, treat it as the reply.
+              if (latestAssistantTs && latestAssistantTs > lastAssistantTs) {
+                this.messages = msgs;
+                this.UI.content.update(msgs);
+
+                clearInterval(this.pollingInterval);
+                this.pollingInterval = null;
+                this.hideThinkingMessage();
+                this.UI.textarea.disabled = false;
+                this.UI.sendButton.disabled = false;
+                return;
+              }
             }
-        
+
+            if (attempts > 60) { // ~2 minutes
+              console.warn('Thread polling timeout for assistant reply');
+              clearInterval(this.pollingInterval);
+              this.pollingInterval = null;
+              this.hideThinkingMessage();
+              this.UI.textarea.disabled = false;
+              this.UI.sendButton.disabled = false;
+              alert('Timed out waiting for assistant response.');
+            }
+          } catch (err) {
+            console.error('Polling error (thread messages):', err);
             clearInterval(this.pollingInterval);
             this.pollingInterval = null;
             this.hideThinkingMessage();
             this.UI.textarea.disabled = false;
             this.UI.sendButton.disabled = false;
+            alert('Error while checking assistant response.');
           }
         }, 2000);
       }
@@ -417,17 +500,33 @@
         this.conversation_id = this.getAttribute('conversation_id') || null;
         this.assistant_id = this.getAttribute('assistant_id') || null;
         this.ai_assistant_id = this.getAttribute('ai_assistant_id') || null;
+        this.user_id = this.getAttribute('user_id') || null;
         this.model = this.getAttribute('model') || null;
+        this.assistant_color = this.getAttribute('assistant_color') || null;
+        this.user_color = this.getAttribute('user_color') || null;
+        // Optional persistence key so widgets inside dynamic layouts (like capp cards)
+        // can restore their conversation after re-render or resize.
+        this.persist_key =
+          this.getAttribute('persist_key') ||
+          (this.getAttribute('source') ? ('joe-ai-widget:' + this.getAttribute('source')) : null);
         this.messages = [];
         this._ui = {};
       }
 
       connectedCallback() {
         this.renderShell();
+        // If we don't have an explicit conversation_id but a persisted one exists,
+        // restore it before deciding what to load.
+        this.restoreFromStorageIfNeeded();
+        // Lazy conversation creation:
+        // - If a conversation_id is provided, load its history.
+        // - Otherwise, do NOT create a conversation until the user actually
+        //   sends a message. `sendMessage` will call startConversation() on
+        //   demand when needed.
         if (this.conversation_id) {
           this.loadHistory();
         } else {
-          this.startConversation();
+          this.setStatus('online');
         }
       }
 
@@ -435,13 +534,44 @@
         return this.endpoint || '';
       }
 
+      persistState() {
+        if (!this.persist_key || typeof window === 'undefined' || !window.localStorage) return;
+        try {
+          const payload = {
+            conversation_id: this.conversation_id,
+            assistant_id: this.assistant_id,
+            model: this.model,
+            assistant_color: this.assistant_color
+          };
+          window.localStorage.setItem(this.persist_key, JSON.stringify(payload));
+        } catch (_e) { /* ignore storage errors */ }
+      }
+
+      restoreFromStorageIfNeeded() {
+        if (this.conversation_id || !this.persist_key || typeof window === 'undefined' || !window.localStorage) return;
+        try {
+          const raw = window.localStorage.getItem(this.persist_key);
+          if (!raw) return;
+          const data = JSON.parse(raw);
+          if (!data || !data.conversation_id) return;
+          this.conversation_id = data.conversation_id;
+          this.setAttribute('conversation_id', this.conversation_id);
+          this.assistant_id = data.assistant_id || this.assistant_id;
+          this.model = data.model || this.model;
+          this.assistant_color = data.assistant_color || this.assistant_color;
+        } catch (_e) { /* ignore */ }
+      }
+
       renderShell() {
         const style = document.createElement('style');
         style.textContent = `
           :host {
             font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
             display: block;
-            max-width: 420px;
+            /* Allow the widget to grow/shrink with its container (cards, sidebars, etc.) */
+            width: 100%;
+            height: 100%;
+            max-width: none;
             border: 1px solid #ddd;
             border-radius: 8px;
             box-shadow: 0 2px 6px rgba(0,0,0,0.08);
@@ -471,7 +601,9 @@
           }
           .messages {
             padding: 10px;
-            height: 260px;
+            /* Fill remaining space between header and footer */
+            flex: 1 1 auto;
+            min-height: 0;
             overflow-y: auto;
             background: #f5f7fa;
             font-size: 13px;
@@ -488,17 +620,24 @@
           .bubble {
             display: inline-block;
             padding: 6px 8px;
-            border-radius: 10px;
+            border-radius: 5px;
             line-height: 1.4;
+                max-width: 100%;
+          overflow-x: auto;
           }
           .user .bubble {
-            background: #2563eb;
+            background: var(--joe-ai-user-bg, #2563eb);
             color: #fff;
           }
           .assistant .bubble {
-            background: #e5e7eb;
+            background: var(--joe-ai-assistant-bg, #e5e7eb);
             color: #111827;
           }
+          .msg.assistant.tools-used .bubble {
+            background: #fef3c7;
+            color: #92400e;
+            font-size: 11px;
+          }
           .footer {
             border-top: 1px solid #e5e7eb;
             padding: 6px;
@@ -562,22 +701,72 @@
             this.sendMessage();
           }
         });
+        this.applyThemeColors();
+      }
+
+      applyThemeColors() {
+        if (!this.shadowRoot || !this.shadowRoot.host) return;
+        const host = this.shadowRoot.host;
+        if (this.assistant_color) {
+          host.style.setProperty('--joe-ai-assistant-bg', this.assistant_color);
+        }
+        if (this.user_color) {
+          host.style.setProperty('--joe-ai-user-bg', this.user_color);
+        }
       }
 
       setStatus(text) {
-        if (this._ui.status) this._ui.status.textContent = text;
+        if (!this._ui.status) return;
+        const cid = this.conversation_id || '';
+        // Show conversation id when available, e.g. "cuid123 - online"
+        this._ui.status.textContent = cid ? (cid + ' - ' + text) : text;
       }
 
       renderMessages() {
         if (!this._ui.messages) return;
         this._ui.messages.innerHTML = (this.messages || []).map(m => {
           const role = m.role || 'assistant';
-          const safe = (m.content || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-          return `<div class="msg ${role}"><div class="bubble">${safe}</div></div>`;
+          const extra = m.meta === 'tools_used' ? ' tools-used' : '';
+          const html = renderMarkdownSafe(m.content || '');
+          return `<div class="msg ${role}${extra}"><div class="bubble">${html}</div></div>`;
         }).join('');
         this._ui.messages.scrollTop = this._ui.messages.scrollHeight;
       }
 
+      // Resolve the logical user for this widget instance.
+      // Priority:
+      //   1) Explicit user_id attribute on the element (fetch /API/item/user/_id/:id)
+      //   2) Page-level window._aiWidgetUser (used by ai-widget-test.html)
+      //   3) null (caller can still force a user_color theme)
+      async resolveUser() {
+        if (this._resolvedUser) {
+          return this._resolvedUser;
+        }
+        // 1) If the hosting page passed a user_id attribute, look up that user via JOE.
+        if (this.user_id) {
+          try {
+            const res = await fetch(
+              this.apiBase + '/API/item/user/_id/' + encodeURIComponent(this.user_id),
+              { credentials: 'include' }
+            );
+            const data = await res.json();
+            const u = (data && data.item) || null;
+            if (u && u._id) {
+              this._resolvedUser = u;
+              return u;
+            }
+          } catch (e) {
+            console.error('JoeAIWidget.resolveUser: failed to load user by id', this.user_id, e);
+          }
+        }
+        // 2) Fall back to a page-global user (ai-widget-test.html populates this).
+        if (typeof window !== 'undefined' && window._aiWidgetUser) {
+          this._resolvedUser = window._aiWidgetUser;
+          return this._resolvedUser;
+        }
+        return null;
+      }
+
       async startConversation() {
         try {
           this.setStatus('connecting…');
@@ -586,27 +775,48 @@
             ai_assistant_id: this.getAttribute('ai_assistant_id') || undefined,
             source: this.getAttribute('source') || 'widget'
           };
-        const resp = await fetch(this.apiBase + '/API/plugin/chatgpt/widgetStart', {
+          // Resolve the effective user for this widget and pass id/name/color
+          // explicitly to the server. This works for:
+          //   - ai-widget-test.html (which sets window._aiWidgetUser)
+          //   - JOE pages or external sites that pass a user_id attribute
+          try {
+            const globalUser = await this.resolveUser();
+            if (globalUser) {
+              payload.user_id = globalUser._id;
+              payload.user_name = globalUser.fullname || globalUser.name;
+              if (globalUser.color) { payload.user_color = globalUser.color; }
+            } else if (this.user_color) {
+              payload.user_color = this.user_color;
+            }
+          } catch (_e) { /* ignore */ }
+          const resp = await fetch(this.apiBase + '/API/plugin/chatgpt/widgetStart', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload)
           }).then(r => r.json());
 
           if (!resp || resp.success !== true) {
-          const msg = (resp && resp.error) || 'Failed to start conversation';
-          this.setStatus('error: ' + msg);
-          this.messages.push({ role:'assistant', content:'[Error starting conversation: '+msg+']', created_at:new Date().toISOString() });
-          this.renderMessages();
-            console.error('widgetStart error', resp);
+            const msg = (resp && (resp.error || resp.message)) || 'Failed to start conversation';
+            this.setStatus('error: ' + msg);
+            this.messages.push({
+              role:'assistant',
+              content:'[Error starting conversation: '+msg+']',
+              created_at:new Date().toISOString()
+            });
+            this.renderMessages();
+            console.error('widgetStart error', { payload, response: resp });
             return;
           }
           this.conversation_id = resp.conversation_id;
           this.setAttribute('conversation_id', this.conversation_id);
           this.assistant_id = resp.assistant_id || this.assistant_id;
           this.model = resp.model || this.model;
+          this.assistant_color = resp.assistant_color || this.assistant_color;
+          this.applyThemeColors();
           this.messages = [];
           this.renderMessages();
           this.setStatus('online');
+          this.persistState();
         } catch (e) {
           console.error('widgetStart exception', e);
           this.setStatus('error');
@@ -616,17 +826,23 @@
       async loadHistory() {
         try {
           this.setStatus('loading…');
-        const resp = await fetch(this.apiBase + '/API/plugin/chatgpt/widgetHistory?conversation_id=' + encodeURIComponent(this.conversation_id))
-            .then(r => r.json());
+          const resp = await fetch(
+            this.apiBase + '/API/plugin/chatgpt/widgetHistory?conversation_id=' +
+            encodeURIComponent(this.conversation_id)
+          ).then(r => r.json());
           if (!resp || resp.success !== true) {
+            console.warn('widgetHistory non-success response', resp);
             this.setStatus('online');
             return;
           }
           this.assistant_id = resp.assistant_id || this.assistant_id;
           this.model = resp.model || this.model;
+          this.assistant_color = resp.assistant_color || this.assistant_color;
+          this.applyThemeColors();
           this.messages = resp.messages || [];
           this.renderMessages();
           this.setStatus('online');
+          this.persistState();
         } catch (e) {
           console.error('widgetHistory exception', e);
           this.setStatus('online');
@@ -658,6 +874,16 @@
             assistant_id: this.assistant_id || undefined,
             model: this.model || undefined
           };
+          try {
+            const globalUser = await this.resolveUser();
+            if (globalUser) {
+              payload.user_id = globalUser._id;
+              payload.user_name = globalUser.fullname || globalUser.name;
+              if (globalUser.color) { payload.user_color = globalUser.color; }
+            } else if (this.user_color) {
+              payload.user_color = this.user_color;
+            }
+          } catch (_e) { /* ignore */ }
           const resp = await fetch(this.apiBase + '/API/plugin/chatgpt/widgetMessage', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -665,17 +891,20 @@
           }).then(r => r.json());
 
           if (!resp || resp.success !== true) {
-            const msg = (resp && resp.error) || 'Failed to send message';
-            console.error('widgetMessage error', resp);
+            const msg = (resp && (resp.error || resp.message)) || 'Failed to send message';
+            console.error('widgetMessage error', { payload, response: resp });
             this.messages.push({ role:'assistant', content:'[Error: '+msg+']', created_at:new Date().toISOString() });
             this.renderMessages();
             this.setStatus('error: ' + msg);
           } else {
             this.assistant_id = resp.assistant_id || this.assistant_id;
             this.model = resp.model || this.model;
+            this.assistant_color = resp.assistant_color || this.assistant_color;
+            this.applyThemeColors();
             this.messages = resp.messages || this.messages;
             this.renderMessages();
             this.setStatus('online');
+            this.persistState();
           }
         } catch (e) {
           console.error('widgetMessage exception', e);
@@ -690,6 +919,447 @@
       customElements.define('joe-ai-widget', JoeAIWidget);
     }
 
+    // ---------- Assistant picker: small selector component for joe-ai-widget ----------
+    class JoeAIAssistantPicker extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this._ui = {};
+        this._assistants = [];
+        this._defaultId = null;
+      }
+
+      connectedCallback() {
+        this.renderShell();
+        this.init();
+      }
+
+      get widget() {
+        const targetId = this.getAttribute('for_widget');
+        if (targetId) {
+          return document.getElementById(targetId);
+        }
+        // Fallback: nearest joe-ai-widget in the same card/container
+        return this.closest('capp-card,div')?.querySelector('joe-ai-widget') || null;
+      }
+
+      renderShell() {
+        const style = document.createElement('style');
+        style.textContent = `
+          :host {
+            display: block;
+            margin-bottom: 6px;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            font-size: 12px;
+          }
+          .row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 6px;
+          }
+          label {
+            color: #374151;
+          }
+          select {
+            margin-left: 4px;
+            padding: 2px 4px;
+            font-size: 12px;
+          }
+          .hint {
+            font-size: 11px;
+            color: #6b7280;
+            margin-left: 4px;
+          }
+        `;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'row';
+        wrapper.innerHTML = `
+          <div>
+            <label>Assistant:</label>
+            <select id="assistant-select"></select>
+            <span id="assistant-hint" class="hint"></span>
+          </div>
+          <div>
+            <button id="new-convo" style="font-size:11px;padding:2px 8px;">New conversation</button>
+          </div>
+        `;
+        this.shadowRoot.innerHTML = '';
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(wrapper);
+        this._ui.select = this.shadowRoot.getElementById('assistant-select');
+        this._ui.hint = this.shadowRoot.getElementById('assistant-hint');
+        this._ui.newConvo = this.shadowRoot.getElementById('new-convo');
+      }
+
+      async init() {
+        const select = this._ui.select;
+        const hint = this._ui.hint;
+        const widget = this.widget;
+        if (!select || !widget) return;
+
+        try {
+          const [assistantsResp, settingsResp] = await Promise.all([
+            fetch('/API/item/ai_assistant', { credentials: 'include' }).then(r => r.json()),
+            fetch('/API/item/setting', { credentials: 'include' }).then(r => r.json())
+          ]);
+          this._assistants = Array.isArray(assistantsResp.item) ? assistantsResp.item : [];
+          const settings = Array.isArray(settingsResp.item) ? settingsResp.item : [];
+          const def = settings.find(s => s && s.name === 'DEFAULT_AI_ASSISTANT');
+          this._defaultId = def && def.value;
+        } catch (e) {
+          console.error('[joe-ai] AssistantPicker init error', e);
+          this._assistants = [];
+        }
+
+        select.innerHTML = '';
+        const noneOption = document.createElement('option');
+        noneOption.value = '';
+        noneOption.textContent = 'None (model only)';
+        select.appendChild(noneOption);
+
+        this._assistants.forEach(a => {
+          const opt = document.createElement('option');
+          opt.value = a._id;
+          opt.textContent = a.name || a.title || a._id;
+          if (a._id === this._defaultId) {
+            opt.textContent += ' (default)';
+          }
+          select.appendChild(opt);
+        });
+
+        let initialId = '';
+        if (widget.getAttribute('ai_assistant_id')) {
+          initialId = widget.getAttribute('ai_assistant_id');
+          hint && (hint.textContent = 'Using assistant from widget attribute.');
+        } else if (this._defaultId && this._assistants.some(a => a && a._id === this._defaultId)) {
+          initialId = this._defaultId;
+          hint && (hint.textContent = 'Using DEFAULT_AI_ASSISTANT.');
+        } else {
+          hint && (hint.textContent = this._assistants.length
+            ? 'No default; using model only.'
+            : 'No assistants defined; using model only.');
+        }
+        select.value = initialId;
+        this.applyAssistantToWidget(widget, initialId);
+
+        select.addEventListener('change', () => {
+          this.applyAssistantToWidget(widget, select.value);
+        });
+
+        if (this._ui.newConvo) {
+          this._ui.newConvo.addEventListener('click', () => {
+            this.startNewConversation(widget);
+          });
+        }
+      }
+
+      startNewConversation(widget) {
+        try {
+          if (!widget) return;
+          // Clear persisted state and conversation id so a fresh widgetStart will happen
+          if (widget.persist_key && typeof window !== 'undefined' && window.localStorage) {
+            try { window.localStorage.removeItem(widget.persist_key); } catch (_e) { /* ignore */ }
+          }
+          widget.removeAttribute('conversation_id');
+          widget.conversation_id = null;
+          if (Array.isArray(widget.messages)) {
+            widget.messages = [];
+          }
+          if (typeof widget.renderMessages === 'function') {
+            widget.renderMessages();
+          }
+          if (typeof widget.setStatus === 'function') {
+            widget.setStatus('online');
+          }
+        } catch (e) {
+          console.error('[joe-ai] error starting new conversation from picker', e);
+        }
+      }
+
+      applyAssistantToWidget(widget, assistantId) {
+        try {
+          if (!widget) return;
+          const val = assistantId || '';
+          if (val) {
+            widget.setAttribute('ai_assistant_id', val);
+          } else {
+            widget.removeAttribute('ai_assistant_id');
+          }
+          // Reset conversation and clear persisted state so a new chat starts
+          if (widget.persist_key && typeof window !== 'undefined' && window.localStorage) {
+            try { window.localStorage.removeItem(widget.persist_key); } catch (_e) { /* ignore */ }
+          }
+          widget.removeAttribute('conversation_id');
+          widget.conversation_id = null;
+          if (typeof widget.setStatus === 'function') {
+            widget.setStatus('online');
+          }
+        } catch (e) {
+          console.error('[joe-ai] error applying assistant selection', e);
+        }
+      }
+    }
+
+    if (!customElements.get('joe-ai-assistant-picker')) {
+      customElements.define('joe-ai-assistant-picker', JoeAIAssistantPicker);
+    }
+
+    // ---------- Conversation list: clickable ai_widget_conversation list ----------
+    class JoeAIConversationList extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this._ui = {};
+        this._assistants = [];
+      }
+
+      connectedCallback() {
+        this.renderShell();
+        this.refreshConversations();
+      }
+
+      get widget() {
+        const targetId = this.getAttribute('for_widget');
+        if (targetId) {
+          return document.getElementById(targetId);
+        }
+        return this.closest('capp-card,div')?.querySelector('joe-ai-widget') || null;
+      }
+
+      renderShell() {
+        const style = document.createElement('style');
+        style.textContent = `
+          :host {
+            display: block;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            font-size: 12px;
+          }
+          .container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+          }
+          .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            font-weight: 600;
+          }
+          .status {
+            font-size: 11px;
+            margin-bottom: 4px;
+          }
+          .row {
+            margin-bottom: 2px;
+          }
+          .row.chips {
+            display: flex;
+            gap: 4px;
+            flex-wrap: wrap;
+          }
+          .chip {
+            display: inline-block;
+            padding: 1px 6px;
+            border-radius: 999px;
+            font-size: 10px;
+            line-height: 1.4;
+            white-space: nowrap;
+          }
+          .row.link a {
+            font-size: 11px;
+          }
+          ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            flex: 1 1 auto;
+            overflow-y: auto;
+          }
+          li {
+            cursor: pointer;
+            padding: 3px 0;
+            border-bottom: 1px solid #e5e7eb;
+          }
+          li:hover {
+            background: #f9fafb;
+          }
+        `;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'container';
+        wrapper.innerHTML = `
+          <div class="header">
+            <span>Widget Conversations</span>
+            <button id="refresh" style="font-size:11px;padding:2px 6px;">Refresh</button>
+          </div>
+          <div id="status" class="status"></div>
+          <ul id="list"></ul>
+        `;
+        this.shadowRoot.innerHTML = '';
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(wrapper);
+        this._ui.status = this.shadowRoot.getElementById('status');
+        this._ui.list = this.shadowRoot.getElementById('list');
+        this._ui.refresh = this.shadowRoot.getElementById('refresh');
+        this._ui.refresh.addEventListener('click', () => this.refreshConversations());
+      }
+
+      async refreshConversations() {
+        const statusEl = this._ui.status;
+        const listEl = this._ui.list;
+        if (!statusEl || !listEl) return;
+        statusEl.textContent = 'Loading conversations...';
+        listEl.innerHTML = '';
+        try {
+          // Load assistants once for name/color lookup
+          if (!this._assistants || !this._assistants.length) {
+            try {
+              const aRes = await fetch('/API/item/ai_assistant', { credentials: 'include' });
+              const aData = await aRes.json();
+              this._assistants = Array.isArray(aData.item) ? aData.item : [];
+            } catch (_e) {
+              this._assistants = [];
+            }
+          }
+
+          const res = await fetch('/API/item/ai_widget_conversation', { credentials: 'include' });
+          const data = await res.json();
+          let items = Array.isArray(data.item) ? data.item : [];
+          const allItems = items.slice();
+          const sourceFilter = this.getAttribute('source');
+          let filtered = false;
+          if (sourceFilter) {
+            items = items.filter(c => c.source === sourceFilter);
+            filtered = true;
+          }
+          if (!items.length) {
+            if (filtered && allItems.length) {
+              // Fallback: no conversations for this source; show all instead.
+              items = allItems;
+              statusEl.textContent = 'No conversations for source "' + sourceFilter + '". Showing all widget conversations.';
+            } else {
+              statusEl.textContent = 'No widget conversations found.';
+              return;
+            }
+          }
+          items.sort((a, b) => {
+            const da = a.last_message_at || a.joeUpdated || a.created || '';
+            const db = b.last_message_at || b.joeUpdated || b.created || '';
+            return db.localeCompare(da);
+          });
+          statusEl.textContent = 'Click a conversation to resume it.';
+          items.forEach(c => {
+            const li = document.createElement('li');
+            li.dataset.id = c._id;
+
+            const ts = c.last_message_at || c.joeUpdated || c.created || '';
+            const prettyTs = (typeof _joe !== 'undefined' && _joe.Utils && typeof _joe.Utils.prettyPrintDTS === 'function')
+              ? _joe.Utils.prettyPrintDTS(ts)
+              : ts;
+
+            // 1. Conversation title: name or pretty date-time
+            const title = c.name || prettyTs || c._id;
+
+            // Helper to choose readable foreground for a hex bg
+            function textColorForBg(hex) {
+              if (!hex || typeof hex !== 'string' || !/^#?[0-9a-fA-F]{6}$/.test(hex)) return '#000';
+              const h = hex[0] === '#' ? hex.slice(1) : hex;
+              const n = parseInt(h, 16);
+              const r = (n >> 16) & 0xff;
+              const g = (n >> 8) & 0xff;
+              const b = n & 0xff;
+              const luminance = r * 0.299 + g * 0.587 + b * 0.114;
+              return luminance > 186 ? '#000' : '#fff';
+            }
+
+            // 2. User and assistant colored chiclets
+            const userLabel = c.user_name || c.user || '';
+            const userColor = c.user_color || '';
+            let userChip = '';
+            if (userLabel) {
+              const bg = userColor || '#4b5563';
+              const fg = textColorForBg(bg);
+              userChip = `<span class="chip user" style="background:${bg};color:${fg};">${userLabel}</span>`;
+            }
+
+            let asstName = '';
+            let asstColor = '';
+            const asstId = c.assistant;
+            const asstOpenAIId = c.assistant_id;
+            if (this._assistants && this._assistants.length) {
+              const asst = this._assistants.find(a =>
+                (asstId && a && a._id === asstId) ||
+                (asstOpenAIId && a && a.assistant_id === asstOpenAIId)
+              );
+              if (asst) {
+                asstName = asst.name || asst.title || asst.assistant_id || asst._id || 'Assistant';
+                asstColor = asst.assistant_color || asst.color || c.assistant_color || '';
+              }
+            }
+            if (!asstName && (asstOpenAIId || asstId)) {
+              asstName = asstOpenAIId || asstId;
+              asstColor = c.assistant_color || '';
+            }
+            let asstChip = '';
+            if (asstName) {
+              const bg = asstColor || '#2563eb';
+              const fg = textColorForBg(bg);
+              asstChip = `<span class="chip assistant" style="background:${bg};color:${fg};">${asstName}</span>`;
+            }
+
+            // 3. Source and # of messages
+            const msgCount = Array.isArray(c.messages) ? c.messages.length : 0;
+            const src = c.source || '';
+            const metaParts = [];
+            if (src) metaParts.push(src);
+            metaParts.push(msgCount + ' msgs');
+            const metaLine = metaParts.join(' · ');
+
+            // 4. Link to the widget conversation in JOE
+            let href = '#/ai_widget_conversation/' + encodeURIComponent(c._id);
+            try {
+              if (window && window.location && typeof window.location.href === 'string') {
+                href = window.location.href.replace(window.location.hash, href);
+              }
+            } catch (_e) { /* ignore */ }
+
+            li.innerHTML = ''
+              + `<div class="row title">${title}</div>`
+              + `<div class="row chips">${userChip}${asstChip}</div>`
+              + `<div class="row meta">${metaLine}</div>`
+              + `<div class="row link"><a href="${href}" target="_blank" rel="noopener" onclick="event.stopPropagation();">open in JOE</a></div>`;
+
+            li.addEventListener('click', () => {
+              this.applyConversationToWidget(this.widget, c._id);
+            });
+            listEl.appendChild(li);
+          });
+        } catch (e) {
+          console.error('[joe-ai] error loading widget conversations', e);
+          statusEl.textContent = 'Error loading conversations; see console.';
+        }
+      }
+
+      applyConversationToWidget(widget, conversationId) {
+        if (!widget || !conversationId) return;
+        widget.setAttribute('conversation_id', conversationId);
+        widget.conversation_id = conversationId;
+        if (typeof widget.loadHistory === 'function') {
+          widget.loadHistory();
+        } else if (widget.connectedCallback) {
+          widget.connectedCallback();
+        }
+        if (typeof widget.persistState === 'function') {
+          widget.persistState();
+        }
+      }
+    }
+
+    if (!customElements.get('joe-ai-conversation-list')) {
+      customElements.define('joe-ai-conversation-list', JoeAIConversationList);
+    }
+
 
     //**YES**
     Ai.spawnChatHelper = async function(object_id,user_id=_joe.User._id,conversation_id) {
@@ -709,6 +1379,7 @@
         newChat = true;
         if(response.error){
           console.error('❌ Failed to create conversation:', response.error);
+          alert('Failed to create conversation: '+response.message);
           return;
         } 
       }
@@ -718,6 +1389,7 @@
     Ai.getDefaultAssistant = function() {
 
       Ai.default_ai = Ai.default_ai ||_joe.Data.setting.where({name:'DEFAULT_AI_ASSISTANT'})[0]||false;
+      if(!Ai.default_ai){alert('No default AI assistant found');}
       return Ai.default_ai;
     }
     // ========== HELPERS ==========
@@ -903,29 +1575,61 @@
       }
   };
 
-    // ---------- Autofill (Completions) ----------
-    // Usage in schema button: onclick: "_joe.Ai.populateField(this, { prompt: 'Write a short summary', saveHistory: true })"
-    Ai.populateField = async function(dom, options = {}){
+    // ---------- Autofill (Responses) ----------
+    // Usage from schema: add `ai:{ prompt:'...' }` to a field. Core will render a
+    // button that calls `_joe.Ai.populateField('field_name')`. You can also call
+    // `_joe.Ai.populateField(dom, { prompt:'...' })` manually from a button.
+    Ai.populateField = async function(target, options = {}){
       try{
         const obj = _joe.current && _joe.current.object;
         const schema = _joe.current && _joe.current.schema && _joe.current.schema.__schemaname;
         if(!obj || !schema){ return alert('No current object/schema found'); }
 
-        const parentField = $(dom).parents('.joe-object-field');
-        const inferredField = parentField.data('name');
-        const fields = (options.fields && options.fields.length) ? options.fields : (inferredField ? [inferredField] : []);
-        if(!fields.length){ return alert('No target field detected. Pass options.fields or place the button inside a field.'); }
+        let dom = null;
+        let explicitField = null;
+        if (typeof target === 'string') {
+          explicitField = target;
+        } else {
+          dom = target;
+        }
+
+        let fields = [];
+        if (options.fields && options.fields.length) {
+          fields = options.fields;
+        } else if (explicitField) {
+          fields = [explicitField];
+        } else if (dom) {
+          const parentField = $(dom).parents('.joe-object-field');
+          const inferredField = parentField.data('name');
+          if (inferredField) { fields = [inferredField]; }
+        }
+        if(!fields.length){ return alert('No target field detected. Configure ai.fields or pass a field name.'); }
+
+        // If no prompt was passed explicitly, try to pick it up from the field's
+        // schema-level ai config.
+        let prompt = options.prompt || '';
+        if (!prompt && fields.length === 1 && _joe && typeof _joe.getField === 'function') {
+          try{
+            const fd = _joe.getField(fields[0]);
+            if (fd && fd.ai && fd.ai.prompt) {
+              prompt = fd.ai.prompt;
+            }
+          }catch(_e){ /* ignore */ }
+        }
 
         // UI feedback
-        const originalHtml = dom.innerHTML;
-        dom.disabled = true;
-        dom.innerHTML = (options.loadingLabel || 'Thinking...');
+        let originalHtml = null;
+        if (dom && dom.innerHTML != null) {
+          originalHtml = dom.innerHTML;
+          dom.disabled = true;
+          dom.innerHTML = (options.loadingLabel || 'Thinking...');
+        }
 
         const payload = {
           object_id: obj._id,
           schema: schema,
           fields: fields,
-          prompt: options.prompt || '',
+          prompt: prompt || '',
           assistant_id: options.assistant_id || undefined,
           allow_web: !!options.allowWeb,
           save_history: !!options.saveHistory,
@@ -953,18 +1657,46 @@
           }
         }
 
-        dom.disabled = false;
-        dom.innerHTML = originalHtml;
+        if (dom && originalHtml != null) {
+          dom.disabled = false;
+          dom.innerHTML = originalHtml;
+        }
       }catch(e){
         console.error('populateField error', e);
         alert('Error running AI autofill');
-        try{ dom.disabled = false; }catch(_e){}
+        try{
+          if (dom) { dom.disabled = false; }
+        }catch(_e){}
       }
     };
 
     Ai.applyAutofillPatch = function(patch = {}){
       Object.keys(patch).forEach(function(fname){
-        Ai._setFieldValue(fname, patch[fname]);
+        try {
+          const $container = $(`.joe-object-field[data-name="${fname}"]`);
+          if(!$container.length){ return; }
+          const $el = $container.find('.joe-field').eq(0);
+          if(!$el.length){ return; }
+
+          // Determine current value (text fields, selects, rich editors, etc.)
+          let currentVal = '';
+          if ($el.is('select') || $el.is('input,textarea')) {
+            currentVal = $el.val();
+          } else {
+            currentVal = $el.text() || '';
+          }
+          const isBlank = !currentVal || String(currentVal).trim() === '';
+
+          if (!isBlank) {
+            const label = fname;
+            const ok = window.confirm(`Replace existing value for "${label}" with AI suggestion?`);
+            if (!ok) { return; }
+          }
+
+          Ai._setFieldValue(fname, patch[fname]);
+        } catch (e) {
+          console.warn('applyAutofillPatch error for field', fname, e);
+        }
       });
     };