Skip to content

feat(ai): auto-growing composer + graceful image attachments #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oreofeolurin merged 4 commits into from
Jun 11, 2026
Merged

feat(ai): auto-growing composer + graceful image attachments #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f800d4
feat(ai): auto-growing composer + graceful image attachments
oreofeolurin Jun 7, 2026
4bd2ddd
feat(ai): summarized chat titles + sanitized error messages
oreofeolurin Jun 7, 2026
ec10412
feat(ai): real retrieval so Ask AI answers from the docs
oreofeolurin Jun 7, 2026
dd3c2ec
Merge pull request #13 from markline-dev/feat/ai-retrieval
oreofeolurin Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions app/api-reference.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,11 +501,21 @@ body.aichat-open .ml-apiref .aichat { transform: none; }
.ml-apiref .ac-ctx { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 12px; color: var(--accent-ink); background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.ml-apiref .ac-ctx .bk { flex: none; display: inline-flex; }
.ml-apiref .ac-ctx .ctxl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-apiref .ac-inwrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 11px; padding: 8px 8px 8px 13px; background: var(--panel-2); }
.ml-apiref .ac-inwrap { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 10px 8px; background: var(--panel-2); }
.ml-apiref .ac-inwrap:focus-within { border-color: var(--accent-line); }
.ml-apiref .ac-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
.ml-apiref .ac-in { width: 100%; min-height: 46px; max-height: 168px; resize: none; overflow-y: auto; background: transparent; border: 0; outline: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ml-apiref .ac-in::placeholder { color: var(--ink-4); }
.ml-apiref .ac-send { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); }
.ml-apiref .ac-inbar { display: flex; align-items: center; justify-content: space-between; }
.ml-apiref .ac-attach { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; }
.ml-apiref .ac-attach:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ml-apiref .ac-attach:disabled { opacity: .4; cursor: default; }
.ml-apiref .ac-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-apiref .ac-chip { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.ml-apiref .ac-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-apiref .ac-chip-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; padding: 0; }
.ml-apiref .ac-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ml-apiref .ac-msg-imgs img { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; }
.ml-apiref .ac-send { margin-left: auto; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.ml-apiref .ac-send:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.ml-apiref .ac-send:disabled { opacity: .4; }
.ml-apiref .ac-send .ico { width: 15px; height: 15px; }
Expand Down
23 changes: 18 additions & 5 deletions app/api/ai/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,21 @@ export async function POST(req: Request) {
return new Response("Rate limit exceeded", { status: 429 });
}

let body: { question?: string; context?: string };
let body: { question?: string; context?: string; images?: string[] };
try {
body = await req.json();
} catch {
return new Response("Bad request", { status: 400 });
}
const question = (body.question ?? "").trim().slice(0, 4000);
if (!question) return new Response("Empty question", { status: 400 });
const context = body.context?.slice(0, 8000);
// Retrieved grounding context (current page + top docs) — larger than the old
// section-name hint, so allow more headroom.
const context = body.context?.slice(0, 16000);
// Accept up to 4 inline image data URLs (~base64). Drop anything else.
const images = Array.isArray(body.images)
? body.images.filter((u) => typeof u === "string" && /^data:image\//.test(u)).slice(0, 4)
: undefined;

const baseUrl = resolveAiBaseUrl(ai);
try {
Expand All @@ -64,13 +70,20 @@ export async function POST(req: Request) {
key,
provider: ai.provider ?? "openai",
maxTokens: ai.maxTokens ?? 1024,
messages: buildMessages(ai.systemPrompt, context, question),
messages: buildMessages(ai.systemPrompt, context, question, images),
referer: req.headers.get("origin") ?? undefined,
title: cfg.name,
});
return Response.json({ text });
} catch (e) {
const message = e instanceof Error ? e.message : "AI request failed";
return new Response(message, { status: 502 });
// Log the upstream detail for the operator; never leak provider internals
// (keys, billing/privacy URLs, model ids) to the reader.
const detail = e instanceof Error ? e.message : String(e);
console.error("[markline] AI proxy upstream error:", detail);
const isRate = /\b429\b|rate.?limit|too many/i.test(detail);
return new Response(
isRate ? "Too many requests. Please try again shortly." : "The assistant is temporarily unavailable.",
{ status: isRate ? 429 : 502 },
);
}
}
16 changes: 13 additions & 3 deletions app/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,11 +397,21 @@ body.aichat-open .docs-shell .aichat { transform: none; }
.docs-shell .ac-ctx { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 12px; color: var(--accent-ink); background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.docs-shell .ac-ctx .bk { flex: none; display: inline-flex; }
.docs-shell .ac-ctx .ctxl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-shell .ac-inwrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 11px; padding: 8px 8px 8px 13px; background: var(--panel-2); }
.docs-shell .ac-inwrap { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 10px 8px; background: var(--panel-2); }
.docs-shell .ac-inwrap:focus-within { border-color: var(--accent-line); }
.docs-shell .ac-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: inherit; font-size: 13.5px; color: var(--ink); }
.docs-shell .ac-in { width: 100%; min-height: 46px; max-height: 168px; resize: none; overflow-y: auto; background: transparent; border: 0; outline: 0; font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.docs-shell .ac-in::placeholder { color: var(--ink-4); }
.docs-shell .ac-send { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: var(--accent); color: rgb(var(--c-on-brand)); cursor: pointer; }
.docs-shell .ac-inbar { display: flex; align-items: center; justify-content: space-between; }
.docs-shell .ac-attach { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; }
.docs-shell .ac-attach:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.docs-shell .ac-attach:disabled { opacity: .4; cursor: default; }
.docs-shell .ac-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.docs-shell .ac-chip { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.docs-shell .ac-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.docs-shell .ac-chip-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; padding: 0; }
.docs-shell .ac-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.docs-shell .ac-msg-imgs img { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; }
.docs-shell .ac-send { margin-left: auto; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 0; background: var(--accent); color: rgb(var(--c-on-brand)); cursor: pointer; }
.docs-shell .ac-send:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.docs-shell .ac-send:disabled { opacity: .4; }
.docs-shell .ac-send .ico { width: 15px; height: 15px; }
Expand Down
Loading
Loading