json-object-editor 0.10.610 → 0.10.622

package/js/joe-ai.js

@@ -408,6 +408,288 @@
     }
     customElements.define('joe-object', JoeObject);
 
+    // ---------- Joe AI Widget: embeddable chat for any site ----------
+    class JoeAIWidget extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.endpoint = this.getAttribute('endpoint') || ''; // base URL to JOE; default same origin
+        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.model = this.getAttribute('model') || null;
+        this.messages = [];
+        this._ui = {};
+      }
+
+      connectedCallback() {
+        this.renderShell();
+        if (this.conversation_id) {
+          this.loadHistory();
+        } else {
+          this.startConversation();
+        }
+      }
+
+      get apiBase() {
+        return this.endpoint || '';
+      }
+
+      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;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+            overflow: hidden;
+            background: #fff;
+          }
+          .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+          }
+          .header {
+            padding: 8px 12px;
+            background: #1f2933;
+            color: #f9fafb;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+          .title {
+            font-weight: 600;
+          }
+          .status {
+            font-size: 11px;
+            opacity: 0.8;
+          }
+          .messages {
+            padding: 10px;
+            height: 260px;
+            overflow-y: auto;
+            background: #f5f7fa;
+            font-size: 13px;
+          }
+          .msg {
+            margin-bottom: 8px;
+            max-width: 90%;
+            clear: both;
+          }
+          .msg.user {
+            text-align: right;
+            margin-left: auto;
+          }
+          .bubble {
+            display: inline-block;
+            padding: 6px 8px;
+            border-radius: 10px;
+            line-height: 1.4;
+          }
+          .user .bubble {
+            background: #2563eb;
+            color: #fff;
+          }
+          .assistant .bubble {
+            background: #e5e7eb;
+            color: #111827;
+          }
+          .footer {
+            border-top: 1px solid #e5e7eb;
+            padding: 6px;
+            display: flex;
+            gap: 6px;
+            align-items: center;
+          }
+          textarea {
+            flex: 1;
+            resize: none;
+            border-radius: 6px;
+            border: 1px solid #d1d5db;
+            padding: 6px 8px;
+            font-size: 13px;
+            min-height: 34px;
+            max-height: 80px;
+          }
+          button {
+            border-radius: 6px;
+            border: none;
+            background: #2563eb;
+            color: #fff;
+            padding: 6px 10px;
+            font-size: 13px;
+            cursor: pointer;
+            white-space: nowrap;
+          }
+          button:disabled {
+            opacity: 0.6;
+            cursor: default;
+          }
+        `;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'wrapper';
+        wrapper.innerHTML = `
+          <div class="header">
+            <div class="title">${this.getAttribute('title') || 'AI Assistant'}</div>
+            <div class="status" id="status">connecting…</div>
+          </div>
+          <div class="messages" id="messages"></div>
+          <div class="footer">
+            <textarea id="input" placeholder="${this.getAttribute('placeholder') || 'Ask me anything…'}"></textarea>
+            <button id="send">Send</button>
+          </div>
+        `;
+
+        this.shadowRoot.innerHTML = '';
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(wrapper);
+
+        this._ui.messages = this.shadowRoot.getElementById('messages');
+        this._ui.status = this.shadowRoot.getElementById('status');
+        this._ui.input = this.shadowRoot.getElementById('input');
+        this._ui.send = this.shadowRoot.getElementById('send');
+
+        this._ui.send.addEventListener('click', () => this.sendMessage());
+        this._ui.input.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.sendMessage();
+          }
+        });
+      }
+
+      setStatus(text) {
+        if (this._ui.status) this._ui.status.textContent = 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>`;
+        }).join('');
+        this._ui.messages.scrollTop = this._ui.messages.scrollHeight;
+      }
+
+      async startConversation() {
+        try {
+          this.setStatus('connecting…');
+          const payload = {
+            model: this.model || undefined,
+            ai_assistant_id: this.getAttribute('ai_assistant_id') || undefined,
+            source: this.getAttribute('source') || 'widget'
+          };
+        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);
+            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.messages = [];
+          this.renderMessages();
+          this.setStatus('online');
+        } catch (e) {
+          console.error('widgetStart exception', e);
+          this.setStatus('error');
+        }
+      }
+
+      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());
+          if (!resp || resp.success !== true) {
+            this.setStatus('online');
+            return;
+          }
+          this.assistant_id = resp.assistant_id || this.assistant_id;
+          this.model = resp.model || this.model;
+          this.messages = resp.messages || [];
+          this.renderMessages();
+          this.setStatus('online');
+        } catch (e) {
+          console.error('widgetHistory exception', e);
+          this.setStatus('online');
+        }
+      }
+
+      async sendMessage() {
+        const input = this._ui.input;
+        if (!input) return;
+        const text = input.value.trim();
+        if (!text) return;
+        if (!this.conversation_id) {
+          await this.startConversation();
+          if (!this.conversation_id) return;
+        }
+        input.value = '';
+        this._ui.send.disabled = true;
+
+        const userMsg = { role: 'user', content: text, created_at: new Date().toISOString() };
+        this.messages.push(userMsg);
+        this.renderMessages();
+        this.setStatus('thinking…');
+
+        try {
+          const payload = {
+            conversation_id: this.conversation_id,
+            content: text,
+            role: 'user',
+            assistant_id: this.assistant_id || undefined,
+            model: this.model || undefined
+          };
+          const resp = await fetch(this.apiBase + '/API/plugin/chatgpt/widgetMessage', {
+            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 send message';
+            console.error('widgetMessage error', 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.messages = resp.messages || this.messages;
+            this.renderMessages();
+            this.setStatus('online');
+          }
+        } catch (e) {
+          console.error('widgetMessage exception', e);
+          this.setStatus('error');
+        } finally {
+          this._ui.send.disabled = false;
+        }
+      }
+    }
+
+    if (!customElements.get('joe-ai-widget')) {
+      customElements.define('joe-ai-widget', JoeAIWidget);
+    }
+
 
     //**YES**
     Ai.spawnChatHelper = async function(object_id,user_id=_joe.User._id,conversation_id) {
@@ -620,6 +902,123 @@
           console.error("❌ injectSystemMessage failed:", err);
       }
   };
+
+    // ---------- Autofill (Completions) ----------
+    // Usage in schema button: onclick: "_joe.Ai.populateField(this, { prompt: 'Write a short summary', saveHistory: true })"
+    Ai.populateField = async function(dom, 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.'); }
+
+        // UI feedback
+        const originalHtml = dom.innerHTML;
+        dom.disabled = true;
+        dom.innerHTML = (options.loadingLabel || 'Thinking...');
+
+        const payload = {
+          object_id: obj._id,
+          schema: schema,
+          fields: fields,
+          prompt: options.prompt || '',
+          assistant_id: options.assistant_id || undefined,
+          allow_web: !!options.allowWeb,
+          save_history: !!options.saveHistory,
+          save_itemtype: options.saveItemtype || undefined,
+          model: options.model || undefined
+        };
+
+        const resp = await fetch('/API/plugin/chatgpt/autofill', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        }).then(r => r.json());
+
+        if(!resp || resp.success !== true){
+          console.error('AI autofill error:', resp && resp.error);
+          alert('AI autofill failed' + (resp && resp.error ? (': ' + resp.error) : ''));
+        }else{
+          const patch = resp.patch || {};
+          Ai.applyAutofillPatch(patch);
+          if(options.autoSave === true){
+            _joe.updateObject(null, null, true, null, options.skipValidation === true);
+          }
+          if(options.openChatAfter === true){
+            _joe.Ai.spawnChatHelper(obj._id);
+          }
+        }
+
+        dom.disabled = false;
+        dom.innerHTML = originalHtml;
+      }catch(e){
+        console.error('populateField error', e);
+        alert('Error running AI autofill');
+        try{ dom.disabled = false; }catch(_e){}
+      }
+    };
+
+    Ai.applyAutofillPatch = function(patch = {}){
+      Object.keys(patch).forEach(function(fname){
+        Ai._setFieldValue(fname, patch[fname]);
+      });
+    };
+
+    Ai._setFieldValue = function(fieldName, value){
+      const $container = $(`.joe-object-field[data-name="${fieldName}"]`);
+      if(!$container.length){ return false; }
+      const $el = $container.find('.joe-field').eq(0);
+      if(!$el.length){ return false; }
+
+      const ftype = $el.data('ftype');
+      try{
+        switch(ftype){
+          case 'tinymce': {
+            const editorId = $el.data('texteditor_id');
+            const ed = window.tinymce && editorId ? window.tinymce.get(editorId) : null;
+            if(ed){ ed.setContent(value || ''); }
+            else { $el.val(value || ''); }
+            break;
+          }
+          case 'ckeditor': {
+            const editorId = $el.data('ckeditor_id');
+            const ed = (window.CKEDITOR && CKEDITOR.instances) ? CKEDITOR.instances[editorId] : null;
+            if(ed){ ed.setData(value || ''); }
+            else { $el.val(value || ''); }
+            break;
+          }
+          case 'ace': {
+            const aceId = $el.data('ace_id');
+            const ed = (_joe && _joe.ace_editors) ? _joe.ace_editors[aceId] : null;
+            if(ed){ ed.setValue(value || '', -1); }
+            else { $el.val(value || ''); }
+            break;
+          }
+          default: {
+            if($el.is('select')){
+              $el.val(value);
+            }else if($el.is('input,textarea')){
+              $el.val(value);
+            }else{
+              // Fallback: try innerText/innerHTML for custom components
+              $el.text(typeof value === 'string' ? value : JSON.stringify(value));
+            }
+            $el.trigger('input');
+            $el.trigger('change');
+            break;
+          }
+        }
+        $container.addClass('changed');
+        return true;
+      }catch(e){
+        console.warn('Failed to set field', fieldName, e);
+        return false;
+      }
+    };
   
     
     // Attach AI to _joe