Issue #971: Quick-reply option buttons + markdown links as buttons (Advisor UI) (#982)

##### Description of Change

Two small chat-UX affordances for the LIF Advisor:

**1. Quick-reply option buttons.** When the assistant offers choices,
the user can tap a button instead of typing. The agent marks suggested
replies by wrapping each in double angle brackets (`<<Yes>>`, `<<Tell me
more about credentials>>`); the frontend parses them out
(`extractOptions`), strips the markers from the displayed text, and
renders tappable buttons wired to the existing `sendMessage` path.
Buttons disable while the agent is typing / logging out.

**2. Markdown links as buttons.** Links in answers render as styled
external-link buttons (`target="_blank"`, `rel="noreferrer"`, lucide
`ExternalLink`) via a `react-markdown` `components.a` override, instead
of plain inline text.

**Prompt change (per scope decision):** the buttons only appear if the
agent emits the `<<...>>` markers, so this PR also extends the prompts
to produce them — a natural extension of behavior they already have:
- `continue_conversation.txt`: step 5 already asks for a yes/no
follow-up phrased as a suggested next step; added a step 6 to offer 2–4
quick-reply options wrapped in `<<...>>`.
- `load_profile.txt`: the opening message already suggests conversation
pathways; added an instruction to surface 2–4 as `<<...>>` starters.

The rendering is a safe no-op when no markers are present, so the
frontend degrades cleanly if the model omits them.

##### Implementation notes
- Files: `utils/helpers.ts` (`extractOptions`),
`components/MessageItem.tsx` (buttons + link override),
`components/MessageList.tsx` + `components/ChatInterface.tsx` (thread
`onOptionClick`/`disabled`), and the two prompt templates. Disjoint from
the open #972 / #974 PRs (no shared files) — no merge conflicts.

##### How to test
- Frontend: `npm ci && npx tsc --noEmit -p tsconfig.app.json` (changed
files clean) and `npm run build` (passes). Manually: when the agent ends
with `<<…>>` options, they render as buttons; clicking sends that text.
- The agent prompt change should be sanity-checked against the live LLM
(option phrasing/quantity) before/after merge — it's wording guidance,
not deterministic.

##### Related Issues

Closes #971

##### Type of Change

- [x] New feature (non-breaking change which adds functionality)

##### Project Area(s) Affected

- [x] frontends/
- [x] components/ (prompt templates)

---

##### Checklist

- [x] commit message follows commit guidelines (see
commitlint.config.mjs)
- [x] code passes formatting checks (prompts: cspell/pre-commit pass;
frontend: tsc + vite build)
- [x] pre-commit hooks have been run successfully (cspell, ty, pytest)

##### Testing

- [x] Manual testing performed (rendering)
- [ ] Automated tests — no frontend test runner in the repo;
`extractOptions` is a pure helper reviewed by hand. (Adding a frontend
test harness is tracked separately in #981's spirit.)

##### Additional Notes

Known pre-existing: `tsc --noEmit` reports two unused-import errors in
`App.tsx` (`useEffect`, `jwtDecode`) from the commented-out refresh
block on `main` — unrelated to this PR and already fixed by #972. The
advisor frontend has no `tsc`/lint CI gate today (filed as #981).

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: bjagg

components/lif/langchain_agent/prompts/continue_conversation.txt

@@ -25,6 +25,8 @@ Follow these steps carefully for each query:
 
 5. Add a followup question to your response: Generate the most pertinent contextual follow-up question that is contextually relevant to user query and your response. This followup question should aim to deepen understanding, clarify uncertainty, or explore a natural next topic. The followup question must be aimed at getting `yes` or `no` response can be phrased as a suggested next step (e.g., "Would you like me to explain...?", "Do you want me to explore further...?", "Do you want me to get more detail...?")
 
+6. Offer quick-reply options for your follow-up: After the follow-up question, present 2 to 4 short suggested replies the user can tap, each wrapped on its own in double angle brackets, e.g. `<<Yes>>` `<<No>>` or `<<Tell me more about credentials>>`. Keep each option to a few words. Place them at the very end of your response. Only include options that are genuine, relevant next steps.
+
 Always maintain a logical flow, document your reasoning at each step, and ensure transparency in how the data informs your final response.
 
 human

components/lif/langchain_agent/prompts/load_profile.txt

@@ -24,6 +24,7 @@ Follow these steps carefully:
 - Generate your response in markdown format ensuring it's presentable in a chat message avoiding paragraphs and paragraphs heading.
 - Keep your response concise with maximum word count of 250.
 - Write in a clear, professional, and structured tone.
+- At the very end, offer 2 to 4 short suggested conversation starters the user can tap, each wrapped on its own in double angle brackets, e.g. `<<Explore career options>>` `<<Review my credentials>>`. Keep each to a few words and only suggest genuinely relevant next steps.
 
 Output:
-A well-structured initial response for student setting the context for the conversation
+A well-structured initial response for student setting the context for the conversation