{ 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;
}

// ── Inject items into the + menu popout ─────────────────────────
function injectPlusMenuItems() {
  // Look for open menu scrollers — the + popout is a menu layer
  const scrollers = document.querySelectorAll('[class*="menu"] [class*="scroller"]');
  for (const scroller of scrollers) {
    // Already injected?
    if (scroller.querySelector("[data-unsloth-menu-item]")) continue;

// Identify the + menu: it contains items for upload / create thread etc.
    // We look for any element that hints this is the channel-attach popout.
    const hint =
      scroller.querySelector('[class*="upload"], [class*="attach"]') ||
      scroller.closest('[class*="channelTextArea"]');
    if (!hint) continue;

// Append a divider then our two items
    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);
  }
}

// ── Hook the + button to inject items when popout opens ──────────
function hookAttachButton(btn) {
  if (btn.dataset.unslothHooked) return;
  btn.dataset.unslothHooked = "1";
  btn.addEventListener("click", () => {
    // The popout renders asynchronously, so wait a tick
    setTimeout(injectPlusMenuItems, 50);
  });
}

scoped.observeDom(
  '[class*="channelTextArea"] [class*="attachButton"]',
  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>
  );
}