{ inputRef = el; }}
            value={prompt()}
            placeholder="Ask the local LLM something..."
            onInput={(v) => setPrompt(v)}
            onKeyDown={handleKeyDown}
            resize-y={true}
            mono={false}
          />
        </div>
        {error() && (
          <div style={{
            marginTop: "8px",
            padding: "8px 12px",
            background: "var(--info-danger-background)",
            color: "var(--text-danger)",
            borderRadius: "4px",
            fontSize: "14px",
          }}>
            {error()}
          </div>
        )}
      </ModalBody>
      <ModalFooter>
        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end", width: "100%" }}>
          <Button
            look={ButtonLooks.FILLED}
            color={ButtonColors.PRIMARY}
            onClick={handleSubmit}
            disabled={loading() || !prompt().trim()}
            style={{ minWidth: "180px" }}
          >
            {loading() ? "Generating..." : "Generate & Insert"}
          </Button>
        </div>
      </ModalFooter>
    </ModalRoot>
  );
}

// ── Flux helpers: get current channel & messages ─────────────────
function getCurrentChannelId() {
  try {
    // Try SelectedChannelStore first (most common)
    const chan = stores.SelectedChannelStore || stores.ChannelStore;
    if (chan && typeof chan.getChannelId === "function") {
      return chan.getChannelId();
    }
  } catch (_) {}
  // Fallback: parse URL
  try {
    const m = window.location.pathname.match(/\/channels\/(\d+|@me)\/(\d+)/);
    if (m) return m[2];
  } catch (_) {}
  return null;
}

function getRecentMessages(count = 10) {
  const channelId = getCurrentChannelId();
  if (!channelId) return [];

try {
    const MessageStore = stores.MessageStore;
    if (!MessageStore || typeof MessageStore.getMessages !== "function") return [];
    const coll = MessageStore.getMessages(channelId);
    if (!coll) return [];
    const arr = typeof coll.toArray === "function" ? coll.toArray() : Array.from(coll);
    return arr.filter(m => m && m.content != null).slice(-count);
  } catch (_) {
    return [];
  }
}

// ── Suggest reply from recent messages ──────────────────────────
async function suggestReply() {
  const messages = getRecentMessages(10);

if (messages.length === 0) {
    showToast({
      title: "Unsloth Chat",
      content: "No recent messages found in this channel.",
      color: ToastColors.WARNING,
    });
    return;
  }

// Build conversation transcript
  const convo = messages.map(m => {
    const author = m.author?.username || m.author?.globalName || "Unknown";
    const content = (m.content || "").trim() || "(attachment)";
    return `${author}: ${content}`;
  }).join("\n");

const prompt =
    "The following is a recent conversation in a Discord channel. " +
    "Write a short, natural, contextually appropriate reply that " +
    "continues this conversation. Just write the reply message, " +
    "nothing else.\n\n---\n" + convo + "\n---\n\nReply:";

try {
    const result = await callUnsloth(prompt);
    if (result) {
      const ok = setMessageInput(result);
      if (ok) {
        showToast({
          title: "Unsloth Chat",
          content: "Suggested reply inserted!",
          color: ToastColors.SUCCESS,
        });
      } else {
        showToast({
          title: "Unsloth Chat",
          content: "Could not find message input. Response copied to clipboard.",
          color: ToastColors.WARNING,
        });
        try { await navigator.clipboard.writeText(result); } catch {}
      }
    } else {
      showToast({
        title: "Unsloth Chat",
        content: "The model returned an empty response.",
        color: ToastColors.WARNING,
      });
    }
  } catch (e) {
    if (e instanceof DetailedApiError) {
      openModal((p) => <ErrorDetailModal close={p.close} error={e} />);
    } else {
      showToast({
        title: "Unsloth Chat",
        content: e.message || "An error occurred",
        color: ToastColors.DANGER || ToastColors.WARNING,
      });
    }
  }
}

// ── Menu item factory ───────────────────────────────────────────
function createMenuItem(label, iconSvg, onClick) {
  const el = document.createElement("div");
  el.setAttribute("data-unsloth-menu-item", "");
  el.setAttribute("role", "menuitem");
  el.setAttribute("tabindex", "0");
  el.innerHTML = iconSvg + `<span>${label}</span>`;
  el.addEventListener("click", (e) => {
    e.stopPropagation();
    onClick();
  });
  return el;
}

// ── Identify the + popout and inject items ──────────────────────
function isAttachMenu(scroller) {
  // Check menu item text for keywords unique to the + popout
  const items = scroller.querySelectorAll('[role="menuitem"], [class*="item"]');
  for (const item of items) {
    const t = (item.textContent || "").toLowerCase();
    if (/upload|file|thread|create|attach|app|integration|gif|sticker|poll/i.test(t)) {
      return true;
    }
  }

// Fallback: is the popout positioned near the chat input area?
  const menuRoot = scroller.closest('[class*="menu"]') || scroller.closest('[class*="popout"]');
  if (menuRoot) {
    const cta = document.querySelector('[class*="channelTextArea"]');
    if (cta) {
      const mr = menuRoot.getBoundingClientRect();
      const cr = cta.getBoundingClientRect();
      if (mr.bottom >= cr.top - 20 && mr.top <= cr.bottom + 20) return true;
    }
  }

return false;
}

function addItemsToScroller(scroller) {
  if (!scroller || scroller.querySelector("[data-unsloth-menu-item]")) return;

const divider = document.createElement("div");
  divider.style.cssText =
    "margin:4px 6px;border-top:1px solid var(--background-modifier-accent);";

const askAi = createMenuItem("Ask AI", SPARKLE_ICON, () => {
    openModal((p) => <PromptModal close={p.close} />);
  });

const suggest = createMenuItem("Suggest reply", REPLY_ICON, () => {
    suggestReply();
  });

scroller.appendChild(divider);
  scroller.appendChild(askAi);
  scroller.appendChild(suggest);
}

// ── Strategy 1: MutationObserver watches for any menu popout ────
const menuObserver = new MutationObserver((mutations) => {
  for (const mut of mutations) {
    for (const node of mut.addedNodes) {
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      // The added node may be the menu itself …
      if (node.matches && node.matches('[class*="menu"]')) {
        const sc = node.querySelector('[class*="scroller"]');
        if (sc && isAttachMenu(sc)) addItemsToScroller(sc);
      }
      // … or it may contain a menu subtree deeper inside (portals)
      if (node.querySelectorAll) {
        node.querySelectorAll('[class*="menu"]').forEach(menu => {
          const sc = menu.querySelector('[class*="scroller"]');
          if (sc && isAttachMenu(sc)) addItemsToScroller(sc);
        });
      }
    }
  }
});
menuObserver.observe(document.body, { childList: true, subtree: true });
scoped.onDispose(() => menuObserver.disconnect());

// ── Strategy 2: hook the + button click for faster injection ────
function hookAttachButton(btn) {
  if (btn.dataset.unslothHooked) return;
  btn.dataset.unslothHooked = "1";
  btn.addEventListener("click", () => {
    let tries = 0;
    const poll = () => {
      if (tries++ > 15) return;
      const scrollers = document.querySelectorAll('[class*="menu"] [class*="scroller"]');
      for (const sc of scrollers) {
        if (!sc.querySelector("[data-unsloth-menu-item]") && isAttachMenu(sc)) {
          addItemsToScroller(sc);
          return;
        }
      }
      setTimeout(poll, 40);
    };
    setTimeout(poll, 30);
  });
}

// Multiple possible selectors for the + button (Discord changes these)
scoped.observeDom(
  [
    '[class*="channelTextArea"] [class*="attachButton"]',
    '[class*="channelTextArea"] [class*="attachWrapper"] > button',
    '[class*="channelTextArea"] button[class*="attach"]',
    '[class*="channelTextArea"] [aria-label*="ttach"]',
    '[class*="channelTextArea"] [class*="uploadInput"]',
  ].join(", "),
  hookAttachButton,
);

// ── Export settings component ───────────────────────────────────
export function settings() {
  const [apiUrl, setApiUrl] = shelter.solid.createSignal(store.apiUrl);
  const [apiKey, setApiKey] = shelter.solid.createSignal(store.apiKey);
  const [model, setModel] = shelter.solid.createSignal(store.model);
  const [maxTokens, setMaxTokens] = shelter.solid.createSignal(String(store.maxTokens));
  const [temperature, setTemperature] = shelter.solid.createSignal(String(store.temperature));

return (
    <div style={{ padding: "16px 0" }}>
      <Header tag={HeaderTags.HeadingLG}>Unsloth Studio Connection</Header>
      <Divider mt mb />

<div style={{ marginBottom: "16px" }}>
        <Text tag={TextTags.textSM} style={{ marginBottom: "4px", display: "block" }}>
          API URL
        </Text>
        <TextBox
          value={apiUrl()}
          placeholder="http://localhost:8000"
          onInput={saveApiUrl}
        />
        <Text tag={TextTags.textXS} style={{ marginTop: "4px", color: "var(--text-muted)", display: "block" }}>
          The URL of your running Unsloth Studio instance.
        </Text>
      </div>

<div style={{ marginBottom: "16px" }}>
        <Text tag={TextTags.textSM} style={{ marginBottom: "4px", display: "block" }}>
          API Key (optional)
        </Text>
        <TextBox
          value={apiKey()}
          placeholder="Leave blank if no auth required"
          onInput={saveApiKey}
        />
        <Text tag={TextTags.textXS} style={{ marginTop: "4px", color: "var(--text-muted)", display: "block" }}>
          Your Unsloth Studio API key/token for authenticated access.
        </Text>
      </div>

<div style={{ marginBottom: "16px" }}>
        <Text tag={TextTags.textSM} style={{ marginBottom: "4px", display: "block" }}>
          Model
        </Text>
        <TextBox
          value={model()}
          placeholder="default"
          onInput={saveModel}
        />
      </div>

<div style={{ marginBottom: "16px" }}>
        <Text tag={TextTags.textSM} style={{ marginBottom: "4px", display: "block" }}>
          Max Tokens
        </Text>
        <TextBox
          value={maxTokens()}
          placeholder="1024"
          onInput={saveMaxTokens}
        />
      </div>

<div style={{ marginBottom: "16px" }}>
        <Text tag={TextTags.textSM} style={{ marginBottom: "4px", display: "block" }}>
          Temperature (0.0 - 2.0)
        </Text>
        <TextBox
          value={temperature()}
          placeholder="0.7"
          onInput={saveTemperature}
        />
      </div>
    </div>
  );
}