Add LoRA activation words and hide LoRAs that do not match the current engine.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-31 20:32:12 -05:00
parent 6926538589
commit 529598cef2
8 changed files with 392 additions and 31 deletions
@@ -0,0 +1,82 @@
+<template>
+  <div class="group relative shrink-0" @wheel.prevent="onIconWheel">
+    <button
+      type="button"
+      class="relative z-10 flex h-6 w-6 items-center justify-center rounded-full"
+      :class="text ? 'text-amber-200/80 hover:text-amber-100' : 'text-zinc-600 hover:text-zinc-400'"
+      :aria-label="ariaLabel"
+      :title="text ? 'Insert activation word' : 'Set activation word'"
+      @click.stop="onIconClick"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
+      </svg>
+    </button>
+    <div class="invisible absolute left-0 top-full z-30 -mt-1 pt-2 group-hover:visible group-focus-within:visible">
+      <div
+        ref="panel"
+        class="pointer-events-auto w-64 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl"
+        @click.stop
+      >
+        <p class="text-[10px] uppercase tracking-wide text-zinc-500">Activation</p>
+        <p v-if="text" class="mt-1 max-h-24 overflow-y-auto whitespace-pre-wrap break-words">{{ text }}</p>
+        <p v-else class="mt-1 text-zinc-500">No word yet. Type one, then insert it into the prompt.</p>
+        <input
+          ref="input"
+          v-model="draft"
+          class="mt-2 w-full rounded-lg border border-white/10 bg-zinc-900 px-2 py-1 text-xs outline-none ring-amber-300/40 focus:ring-2"
+          maxlength="240"
+          placeholder="ohwx woman"
+          @keydown.enter.prevent="save"
+        >
+        <div class="mt-2 flex flex-wrap gap-2">
+          <button
+            type="button"
+            class="text-[11px] text-amber-200 hover:text-amber-100 disabled:text-zinc-600"
+            :disabled="!text"
+            @click="emit('insert', text)"
+          >
+            Insert into prompt
+          </button>
+          <button type="button" class="text-[11px] text-zinc-400 hover:text-white" @click="save">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  text: string
+  ariaLabel: string
+}>()
+
+const emit = defineEmits<{
+  insert: [text: string]
+  save: [text: string]
+}>()
+
+const panel = ref<HTMLElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+const draft = ref(props.text)
+
+watch(() => props.text, (value) => {
+  draft.value = value
+})
+
+function onIconClick() {
+  if (props.text) emit('insert', props.text)
+  else input.value?.focus()
+}
+
+function save() {
+  emit('save', draft.value)
+}
+
+function onIconWheel(event: WheelEvent) {
+  const el = panel.value
+  if (!el) return
+  el.scrollTop += event.deltaY
+}
+</script>