llm_meta_client 1.4.0 → 1.5.0

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/chat_controller.js

@@ -0,0 +1,126 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["cards", "checkbox", "selectAll", "heading", "bar", "selectedCount"]
+  static values = {
+    batchDeletePath: String,
+    batchDownloadCsvPath: String
+  }
+
+  connect() {
+    this.lastIndex = null
+    this.#refresh()
+    this.#scrollActiveIntoView()
+  }
+
+  // When the sidebar re-renders on chat navigation, the active card may
+  // be far below the visible scroll viewport. Center it vertically so
+  // the user can see surrounding chats too — `block: "nearest"` would
+  // park it at the bottom edge, which makes orientation harder. The
+  // browser clamps to the scrollable extent, so cards near the top
+  // simply land at the top instead of being forced down. "instant"
+  // avoids a jarring scroll animation on every page load.
+  #scrollActiveIntoView() {
+    const active = this.element.querySelector(".chat-card.is-active")
+    if (!active) return
+    active.scrollIntoView({ block: "center", behavior: "instant" })
+  }
+
+  toggle(event) {
+    const cb = event.target
+    const idx = this.checkboxTargets.indexOf(cb)
+
+    if (event.shiftKey && this.lastIndex !== null && this.lastIndex !== idx) {
+      const [a, b] = [this.lastIndex, idx].sort((x, y) => x - y)
+      for (let i = a; i <= b; i++) {
+        this.checkboxTargets[i].checked = cb.checked
+      }
+    }
+
+    this.lastIndex = idx
+    this.#refresh()
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked
+    this.checkboxTargets.forEach((cb) => { cb.checked = checked })
+    this.lastIndex = null
+    this.#refresh()
+  }
+
+  bulkDelete(event) {
+    event.preventDefault()
+    const uuids = this.#selectedUuids()
+    if (uuids.length === 0) return
+    if (!confirm(`Delete ${uuids.length} chat${uuids.length === 1 ? "" : "s"}? This cannot be undone.`)) return
+
+    this.#submitForm(this.batchDeletePathValue, "delete", uuids)
+  }
+
+  bulkDownload(event) {
+    event.preventDefault()
+    const uuids = this.#selectedUuids()
+    if (uuids.length === 0) return
+
+    this.#submitForm(this.batchDownloadCsvPathValue, "post", uuids, { turbo: false })
+  }
+
+  #submitForm(action, method, uuids, opts = {}) {
+    const form = document.createElement("form")
+    form.method = "POST"
+    form.action = action
+    form.style.display = "none"
+    if (opts.turbo === false) form.setAttribute("data-turbo", "false")
+
+    if (method !== "post") {
+      const m = document.createElement("input")
+      m.type = "hidden"; m.name = "_method"; m.value = method
+      form.appendChild(m)
+    }
+
+    const csrf = document.querySelector("meta[name=csrf-token]")?.content
+    if (csrf) {
+      const t = document.createElement("input")
+      t.type = "hidden"; t.name = "authenticity_token"; t.value = csrf
+      form.appendChild(t)
+    }
+
+    uuids.forEach((uuid) => {
+      const i = document.createElement("input")
+      i.type = "hidden"; i.name = "uuids[]"; i.value = uuid
+      form.appendChild(i)
+    })
+
+    document.body.appendChild(form)
+    form.requestSubmit ? form.requestSubmit() : form.submit()
+  }
+
+  #selectedUuids() {
+    return this.checkboxTargets.filter((cb) => cb.checked).map((cb) => cb.dataset.uuid)
+  }
+
+  #refresh() {
+    const total = this.checkboxTargets.length
+    const selected = this.checkboxTargets.filter((cb) => cb.checked)
+    const count = selected.length
+
+    selected.forEach((cb) => cb.closest(".chat-card")?.classList.add("is-selected"))
+    this.checkboxTargets.filter((cb) => !cb.checked).forEach((cb) =>
+      cb.closest(".chat-card")?.classList.remove("is-selected")
+    )
+
+    if (count > 0) {
+      this.headingTarget.classList.add("hidden")
+      this.barTarget.classList.remove("hidden")
+      if (this.hasSelectedCountTarget) this.selectedCountTarget.textContent = count
+    } else {
+      this.headingTarget.classList.remove("hidden")
+      this.barTarget.classList.add("hidden")
+    }
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = count === total && total > 0
+      this.selectAllTarget.indeterminate = count > 0 && count < total
+    }
+  }
+}

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/chat_menu_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const willOpen = !this.menuTarget.classList.contains("open")
+    document.querySelectorAll(".chat-card-menu.open").forEach((m) => m.classList.remove("open"))
+    if (willOpen) {
+      this.menuTarget.classList.add("open")
+      document.addEventListener("click", this._onDocClick, { capture: true })
+      document.addEventListener("keydown", this._onKeydown)
+    }
+  }
+
+  _onDocClick = (event) => {
+    if (!this.element.contains(event.target)) {
+      this._close()
+    }
+  }
+
+  _onKeydown = (event) => {
+    if (event.key === "Escape") this._close()
+  }
+
+  close() {
+    this._close()
+  }
+
+  _close() {
+    this.menuTarget.classList.remove("open")
+    document.removeEventListener("click", this._onDocClick, { capture: true })
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._onDocClick, { capture: true })
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+}

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/chat_title_edit_controller.js

@@ -26,6 +26,11 @@ export default class extends Controller {
     this._startEditing()
   }
 
+  start() {
+    if (this._isEditing) return
+    this._startEditing()
+  }
+
   _startEditing() {
     this._isEditing = true
     this._originalTitle = this.fullTitleValue

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/chats_form_controller.js

@@ -2,14 +2,167 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="chats-form"
 export default class extends Controller {
-  static targets = ["text", "prompt", "submit"]
+  static targets = [
+    "text", "prompt", "submit",
+    "imageInput", "imagePreview", "imageThumbnail", "attachButton"
+  ]
 
   connect() {
     this.updateSubmitButton()
+    this.updateAttachButton()
+    this.#restoreStashedPrompt()
+  }
+
+  // Pulls any prompt that was stashed by reauth_banner_controller before
+  // bouncing through Google sign-in. One-shot: cleared after restore so
+  // a follow-up sign-in doesn't keep re-hydrating stale text.
+  #restoreStashedPrompt() {
+    if (!this.hasPromptTarget) return
+    try {
+      const raw = localStorage.getItem("llmMetaPromptStash:v1")
+      if (!raw) return
+      const stash = JSON.parse(raw)
+      // Ignore stashes older than 10 minutes — beyond that the user
+      // likely abandoned the flow.
+      const STALE_MS = 10 * 60 * 1000
+      if (!stash || !stash.prompt || (stash.savedAt && Date.now() - stash.savedAt > STALE_MS)) {
+        localStorage.removeItem("llmMetaPromptStash:v1")
+        return
+      }
+      // Don't trample whatever the user has already typed on this page.
+      if (this.promptTarget.value && this.promptTarget.value.trim().length > 0) return
+      this.promptTarget.value = stash.prompt
+      this.updateSubmitButton()
+    } catch { /* malformed stash — ignore */ }
+    finally {
+      localStorage.removeItem("llmMetaPromptStash:v1")
+    }
   }
 
   updateSubmitButton() {
     this.submitTarget.disabled = !this.#canSubmit()
+    this.updateAttachButton()
+  }
+
+  // Disable the attach button when the selected model isn't vision-capable.
+  // model-picker stamps data-supports-vision on the hidden #model input
+  // whenever the user picks a model.
+  updateAttachButton() {
+    if (!this.hasAttachButtonTarget) return
+    const supports = this.#selectedModelSupportsVision()
+    this.attachButtonTarget.disabled = !supports
+    this.attachButtonTarget.title = supports ? "Attach image" : "Selected model doesn't support images"
+    if (!supports && this.hasImageInputTarget && this.imageInputTarget.value) {
+      // Clear any previously attached image when switching to a text-only model.
+      this.clearImage()
+    }
+  }
+
+  openImagePicker() {
+    if (!this.hasImageInputTarget) return
+    if (this.hasAttachButtonTarget && this.attachButtonTarget.disabled) return
+    this.imageInputTarget.click()
+  }
+
+  onImageSelected() {
+    if (!this.hasImageInputTarget) return
+    const file = this.imageInputTarget.files && this.imageInputTarget.files[0]
+    if (!file) return
+    if (!this.hasImageThumbnailTarget || !this.hasImagePreviewTarget) return
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      this.imageThumbnailTarget.src = e.target.result
+      this.imagePreviewTarget.style.display = ""
+    }
+    reader.readAsDataURL(file)
+  }
+
+  // Drag-and-drop image attachment over the chat form.
+  onDragOver(event) {
+    if (!this.#dragHasImage(event)) return
+    event.preventDefault() // required to allow drop
+    if (this.hasAttachButtonTarget && this.attachButtonTarget.disabled) return
+    this.element.classList.add("drag-over")
+  }
+
+  onDragLeave(event) {
+    // dragleave fires when crossing into child nodes too; only clear when
+    // we're actually leaving the form root.
+    if (event.relatedTarget && this.element.contains(event.relatedTarget)) return
+    this.element.classList.remove("drag-over")
+  }
+
+  onDrop(event) {
+    if (!this.#dragHasImage(event)) return
+    event.preventDefault()
+    this.element.classList.remove("drag-over")
+    if (this.hasAttachButtonTarget && this.attachButtonTarget.disabled) return
+    const file = Array.from(event.dataTransfer.files || []).find((f) => f.type.startsWith("image/"))
+    if (!file || !this.hasImageInputTarget) return
+    // Populate the hidden file input via DataTransfer so the multipart form
+    // submit picks it up just like a click-selected file.
+    const dt = new DataTransfer()
+    dt.items.add(file)
+    this.imageInputTarget.files = dt.files
+    this.onImageSelected()
+  }
+
+  #dragHasImage(event) {
+    const items = event.dataTransfer && event.dataTransfer.items
+    if (!items) return false
+    return Array.from(items).some((it) => it.kind === "file" && it.type.startsWith("image/"))
+  }
+
+  // Enter to send, Shift+Enter for a newline — standard chat-UI shortcut.
+  // IME composition (Japanese / Chinese / Korean input) emits Enter to
+  // confirm a candidate; `isComposing` and the `keyCode === 229` fallback
+  // skip submission in that case so users don't lose mid-conversion text.
+  onPromptKeydown(event) {
+    if (event.key !== "Enter") return
+    if (event.shiftKey || event.isComposing || event.keyCode === 229) return
+    if (this.submitTarget.disabled) return
+    event.preventDefault()
+    this.element.requestSubmit(this.submitTarget)
+  }
+
+  // Paste-to-attach: screenshots and copied images dropped onto the
+  // prompt textarea get routed through the same multipart upload path
+  // as the file picker and drag-drop. Falls through silently when the
+  // selected model isn't vision-capable.
+  onPaste(event) {
+    const items = event.clipboardData && event.clipboardData.items
+    if (!items) return
+    const imageItem = Array.from(items).find(
+      (it) => it.kind === "file" && it.type.startsWith("image/")
+    )
+    if (!imageItem) return
+    if (this.hasAttachButtonTarget && this.attachButtonTarget.disabled) return
+    const file = imageItem.getAsFile()
+    if (!file || !this.hasImageInputTarget) return
+    event.preventDefault()
+    const dt = new DataTransfer()
+    dt.items.add(file)
+    this.imageInputTarget.files = dt.files
+    this.onImageSelected()
+  }
+
+  clearImage() {
+    if (this.hasImageInputTarget) this.imageInputTarget.value = ""
+    if (this.hasImageThumbnailTarget) this.imageThumbnailTarget.src = ""
+    if (this.hasImagePreviewTarget) this.imagePreviewTarget.style.display = "none"
+  }
+
+  #selectedModelSupportsVision() {
+    // The grid-view picker writes the chosen model into a hidden input
+    // and stamps data-supports-vision on it. Fall back to the legacy
+    // <select> shape if the page is still using the old picker.
+    const modelInput = document.querySelector('input[name="model"], select[name="model"]')
+    if (!modelInput || !modelInput.value) return false
+    if (modelInput.tagName === "SELECT") {
+      const opt = modelInput.options[modelInput.selectedIndex]
+      return opt && opt.dataset.supportsVision === "true"
+    }
+    return modelInput.dataset.supportsVision === "true"
   }
 
   // Handle form submission to show user message immediately
@@ -30,21 +183,36 @@ export default class extends Controller {
       return
     }
 
+    // Capture the in-preview thumbnail (data URL) so the optimistic bubble
+    // mirrors what the server will eventually render via split_attached_image_html.
+    const imageDataUrl = (this.hasImagePreviewTarget &&
+                           this.imagePreviewTarget.style.display !== "none" &&
+                           this.hasImageThumbnailTarget)
+      ? this.imageThumbnailTarget.src
+      : null
+
     // Add user message to the messages list immediately
-    this.#addUserMessageToDOM(messageContent)
+    this.#addUserMessageToDOM(messageContent, imageDataUrl)
 
     // DON'T clear the input here - let the server response handle it
     // Otherwise the POST will be sent with empty value
+    // (the Turbo Stream response clears the message + image preview after submit).
 
     // Scroll to bottom
     this.#scrollToBottom()
   }
 
-  #addUserMessageToDOM(content) {
+  #addUserMessageToDOM(content, imageDataUrl = null) {
     const messagesList = document.getElementById('messages-list')
     if (!messagesList) return
 
-    // Create message HTML
+    // Create message HTML. When an image is attached, render it as a
+    // thumbnail above the text — matching `_message.html.erb`'s shape so
+    // the optimistic bubble doesn't visually jump when the server's
+    // version replaces it on next render.
+    const imgHtml = imageDataUrl
+      ? `<img src="${this.#escapeAttr(imageDataUrl)}" alt="" class="user-attached-image">`
+      : ""
     const messageDiv = document.createElement('div')
     messageDiv.className = 'message user'
     messageDiv.innerHTML = `
@@ -52,6 +220,7 @@ export default class extends Controller {
         👤 You
       </div>
       <div class="message-content">
+        ${imgHtml}
         <p>${this.#escapeHtml(content)}</p>
       </div>
     `
@@ -59,6 +228,11 @@ export default class extends Controller {
     messagesList.appendChild(messageDiv)
   }
 
+  // Attribute-safe escape for use inside double-quoted HTML attributes.
+  #escapeAttr(text) {
+    return String(text).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+  }
+
   #escapeHtml(text) {
     const div = document.createElement('div')
     div.textContent = text
@@ -94,15 +268,15 @@ export default class extends Controller {
       return basicFieldsValid
     }
 
-    // Family, API Key and Model selects require JavaScript validation
-    const familySelect = document.querySelector('select[name="family"]')
-    const apiKeySelect = document.querySelector('select[name="api_key_uuid"]')
-    const modelSelect = document.querySelector('select[name="model"]')
+    // Family, API key, and model come from the grid picker as hidden inputs
+    // (legacy <select> shape is also tolerated for the old picker).
+    const familyInput = document.querySelector('[name="family"]')
+    const apiKeyInput = document.querySelector('[name="api_key_uuid"]')
+    const modelInput = document.querySelector('[name="model"]')
 
-    const familySelected = familySelect?.value
-    const apiKeyHidden = apiKeySelect?.closest(".api-key-field")?.classList.contains("hidden")
-    const apiKeySelected = apiKeySelect?.value && (apiKeyHidden || !apiKeySelect.disabled)
-    const modelSelected = modelSelect?.value && !modelSelect.disabled
+    const familySelected = !!familyInput?.value
+    const apiKeySelected = !!apiKeyInput?.value
+    const modelSelected = !!modelInput?.value && !modelInput.disabled
 
     return basicFieldsValid && familySelected && apiKeySelected && modelSelected
   }

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/generation_settings_controller.js

@@ -1,8 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
-const ALLOWED_KEYS = ["temperature", "top_k", "top_p", "max_tokens", "repeat_penalty"]
-
 // Connects to data-controller="generation-settings"
+//
+// The client-side validator only checks that the input is a JSON object;
+// keys and value types are pass-through (matches the server: anything
+// goes, and the provider gem decides which keys it understands).
 export default class extends Controller {
   static targets = [
     "toggleButton",
@@ -10,10 +12,12 @@ export default class extends Controller {
     "panel",
     "jsonInput",
     "error",
+    "countBadge",
   ]
 
   connect() {
     this.expanded = false
+    this.#updateCountBadge()
   }
 
   toggle() {
@@ -23,9 +27,11 @@ export default class extends Controller {
     this.panelTarget.style.display = this.expanded ? "block" : "none"
 
     if (this.hasToggleIconTarget) {
-      this.toggleIconTarget.classList.toggle("bi-chevron-down", !this.expanded)
-      this.toggleIconTarget.classList.toggle("bi-chevron-up", this.expanded)
+      this.toggleIconTarget.classList.toggle("bi-chevron-up", !this.expanded)
+      this.toggleIconTarget.classList.toggle("bi-chevron-down", this.expanded)
     }
+
+    if (this.expanded) this.dispatch("opened", { bubbles: true })
   }
 
   validate() {
@@ -33,6 +39,7 @@ export default class extends Controller {
 
     if (!input) {
       this.#clearError()
+      this.#updateCountBadge()
       return
     }
 
@@ -41,27 +48,18 @@ export default class extends Controller {
       parsed = JSON.parse(input)
     } catch (e) {
       this.#showError("Invalid JSON syntax")
+      this.#updateCountBadge()
       return
     }
 
     if (typeof parsed !== "object" || Array.isArray(parsed) || parsed === null) {
       this.#showError("Must be a JSON object (e.g. {\"temperature\": 0.7})")
-      return
-    }
-
-    const unknownKeys = Object.keys(parsed).filter(k => !ALLOWED_KEYS.includes(k))
-    if (unknownKeys.length > 0) {
-      this.#showError(`Unknown keys: ${unknownKeys.join(", ")}`)
-      return
-    }
-
-    const nonNumeric = Object.entries(parsed).filter(([, v]) => typeof v !== "number")
-    if (nonNumeric.length > 0) {
-      this.#showError(`Values must be numeric: ${nonNumeric.map(([k]) => k).join(", ")}`)
+      this.#updateCountBadge()
       return
     }
 
     this.#clearError()
+    this.#updateCountBadge(parsed)
   }
 
   get isValid() {
@@ -71,10 +69,7 @@ export default class extends Controller {
 
     try {
       const parsed = JSON.parse(input)
-      if (typeof parsed !== "object" || Array.isArray(parsed) || parsed === null) return false
-      if (Object.keys(parsed).some(k => !ALLOWED_KEYS.includes(k))) return false
-      if (Object.values(parsed).some(v => typeof v !== "number")) return false
-      return true
+      return typeof parsed === "object" && !Array.isArray(parsed) && parsed !== null
     } catch {
       return false
     }
@@ -95,4 +90,27 @@ export default class extends Controller {
     }
     this.jsonInputTarget.classList.remove("generation-settings-json-input--invalid")
   }
+
+  // Count of top-level keys currently set on the (valid) Settings JSON.
+  // Caller can pass the already-parsed hash to avoid a second JSON.parse;
+  // when omitted we re-parse the textarea (and treat invalid / empty as 0).
+  #updateCountBadge(parsedOpt) {
+    if (!this.hasCountBadgeTarget) return
+    let count = 0
+    if (parsedOpt && typeof parsedOpt === "object" && !Array.isArray(parsedOpt)) {
+      count = Object.keys(parsedOpt).length
+    } else if (this.hasJsonInputTarget) {
+      const input = this.jsonInputTarget.value.trim()
+      if (input) {
+        try {
+          const parsed = JSON.parse(input)
+          if (typeof parsed === "object" && !Array.isArray(parsed) && parsed !== null) {
+            count = Object.keys(parsed).length
+          }
+        } catch { /* invalid → 0 */ }
+      }
+    }
+    this.countBadgeTarget.textContent = count
+    this.countBadgeTarget.style.display = count > 0 ? "inline-block" : "none"
+  }
 }

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/input_controls_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Coordinates the LLM / Tools / Settings panels so only one is open at a time.
+// Each child controller dispatches an "<identifier>:opened" event when its
+// panel opens; this controller closes the other ones. Also closes any open
+// panel on outside-click or Escape so the user can quickly return to typing.
+const CHILDREN = ["llm-toggle", "tool-selector", "generation-settings"]
+
+export default class extends Controller {
+  connect() {
+    this._onOpened = (event) => {
+      const openedBy = event.target.closest("[data-controller~='" + CHILDREN.join("'], [data-controller~='") + "']")
+      if (!openedBy) return
+      CHILDREN.forEach((ident) => {
+        if (openedBy.matches(`[data-controller~="${ident}"]`)) return
+        this.#closeChild(ident)
+      })
+    }
+    CHILDREN.forEach((ident) => {
+      this.element.addEventListener(`${ident}:opened`, this._onOpened)
+    })
+
+    this._onDocClick = (event) => {
+      if (this.element.contains(event.target)) return
+      this.#closeAll()
+    }
+    document.addEventListener("click", this._onDocClick)
+
+    this._onKeydown = (event) => {
+      if (event.key === "Escape") this.#closeAll()
+    }
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  disconnect() {
+    if (this._onOpened) {
+      CHILDREN.forEach((ident) => {
+        this.element.removeEventListener(`${ident}:opened`, this._onOpened)
+      })
+    }
+    if (this._onDocClick) document.removeEventListener("click", this._onDocClick)
+    if (this._onKeydown) document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  #closeChild(ident) {
+    const el = this.element.querySelector(`[data-controller~="${ident}"]`)
+    if (!el) return
+    const ctrl = this.application.getControllerForElementAndIdentifier(el, ident)
+    if (ctrl?.expanded) ctrl.toggle()
+  }
+
+  #closeAll() {
+    CHILDREN.forEach((ident) => this.#closeChild(ident))
+  }
+}

data/lib/generators/llm_meta_client/scaffold/templates/app/javascript/controllers/llm_toggle_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="llm-toggle"
+// Collapsible wrapper around the "Other models" grid panel. Label is
+// static — the currently picked model is shown by the quick-picks row.
+export default class extends Controller {
+  static targets = ["toggleButton", "toggleIcon", "panel", "label"]
+
+  connect() {
+    this.expanded = false
+  }
+
+  toggle() {
+    if (!this.hasPanelTarget) return
+
+    this.expanded = !this.expanded
+    this.panelTarget.style.display = this.expanded ? "block" : "none"
+
+    if (this.hasToggleIconTarget) {
+      this.toggleIconTarget.classList.toggle("bi-chevron-up", !this.expanded)
+      this.toggleIconTarget.classList.toggle("bi-chevron-down", this.expanded)
+    }
+
+    if (this.expanded) this.dispatch("opened", { bubbles: true })
+  }
+
+}