frontend: UI polish, example prompts, sidebar actions, assistant copy/regenerate

[AsharibAli]

Summary

Frontend-only polish pass. Refreshes the overall look, cleans up UX copy, and adds a few small but useful interactions. No backend or agent logic changes.

What's new

• Refined theme — new typography, OKLCH color palette, and updated component styles for a more consistent, premium feel.
• Example Prompts dialog — categorized, searchable prompt library derived from the actual ML Intern system prompts. Click a prompt to drop it straight into the chat input.
• Sidebar improvements — per-chat rename and delete actions in a three-dot menu.
• Assistant message actions — copy the full response, or regenerate the latest reply, with one click.
• Welcome & layout polish — clearer empty states, better spacing, and updated onboarding copy.

Test plan

• Start a session, send a message, and verify streaming still works.
• Open the Example Prompts dialog, search, and select a prompt into the input.
• Rename and delete a chat from the sidebar.
• Copy an assistant reply and regenerate the last one.
• Check light and dark modes.

[Copilot]

Pull request overview

Frontend-only UI/UX polish pass that refreshes the app theme, adds an “Example Prompts” library, improves sidebar conversation actions, and adds assistant message copy/regenerate actions.

Changes:

• Updated theme tokens (typography + OKLCH palette) and refined layout/copy across key screens.
• Added “Example Prompts” dialog with categorized/searchable prompts and one-click insert into composer.
• Added sidebar overflow menu actions (rename/delete) and assistant message actions (copy + regenerate last reply).

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/src/theme.ts	Updates typography and CSS variable palettes (OKLCH/color-mix) plus minor baseline tweaks.
frontend/src/components/WelcomeScreen/WelcomeScreen.tsx	Uses CSS variable accent color and polishes layout/copy for onboarding steps.
frontend/src/components/SessionSidebar/SessionSidebar.tsx	Adds per-session overflow menu with rename + delete flows and UI polish.
frontend/src/components/SessionChat.tsx	Wires “regenerate last assistant message” behavior into chat flow and updates input placeholder messaging.
frontend/src/components/Layout/AppLayout.tsx	Small spacing and empty-state copy adjustments.
frontend/src/components/Chat/UserMessage.tsx	Restyles user message action buttons and improves labeling.
frontend/src/components/Chat/MessageList.tsx	Threads “regenerate assistant” callback and last-assistant detection to bubbles.
frontend/src/components/Chat/MessageBubble.tsx	Plumbs last-assistant state to AssistantMessage for regenerate visibility.
frontend/src/components/Chat/ExamplePromptsDialog.tsx	New dialog for categorized/searchable prompt examples with click-to-insert.
frontend/src/components/Chat/ChatInput.tsx	Adds “Example Prompts” entry point and updates composer styling/copy.
frontend/src/components/Chat/AssistantMessage.tsx	Adds copy-to-clipboard action and regenerate action for the last assistant message.
frontend/index.html	Switches Google Fonts and updates initial body colors.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[AsharibAli]

please review the changes @akseljoonas

[AsharibAli]

Drive-by triage from a community contributor (no commit access). Sharing one-pass review notes to help maintainers prioritize. Verify before acting.

Verdict: NEEDS-CHANGES · Risk: LOW · State: CONFLICTING

Frontend additions look well-structured. Two things to verify before merging: (1) the onRegenerate callback in AssistantMessage.tsx is wired through props but its actual implementation (how it re-triggers the agent loop and trims message history) isn't visible in this diff — confirm it doesn't leave orphaned assistant messages in session state. (2) Font dependencies changed from Inter to Manrope + Sora; verify rendering for non-Latin characters and bundle weight is acceptable. No security concerns. Will need a rebase before it can land.

Thanks for the review.

(1) Regenerate isn’t implemented in AssistantMessage; it calls editAndRegenerate in SessionChat / useAgentChat, which truncates at that user turn on the backend and drops that user message and everything after it in the UI before resending the same text, so the old assistant reply isn’t left behind. I added brief comments there so it’s visible in the diff.

(2) Manrope + Sora are used for Latin UI; the font stack includes system / Noto Sans fallbacks so non-Latin text still renders sensibly. Weight is two Google families, similar to what we had before with Inter + mono.

Conflicts with main are resolved and the branch is updated.

[akseljoonas]

@claude please review this PR. Focus on correctness, security, LiteLLM/Bedrock routing impact, and whether it's safe to merge against current main. Keep it concise and prefer inline comments where it matters.

[claude]

Claude finished @akseljoonas's task in 1m 42s —— View job

---

PR Review

Tasks:

• Read CLAUDE.md for repo guidelines
• Read changed files (regenerate flow, security-sensitive code)
• Review correctness (regenerate, state management)
• Review security (XSS, injection risks)
• Assess LiteLLM/Bedrock routing impact
• Merge safety assessment
• Post final review

---

Summary

Frontend-only polish pass. No backend, agent logic, or LiteLLM/Bedrock routing changes. Safe to merge with one correctness fix recommended before landing.

---

Correctness

SessionChat.tsx:88 — isProcessing can get stuck true

// SessionChat.tsx:88-89
updateSession(sessionId, { isProcessing: true, activityStatus: { type: 'thinking' } });
await editAndRegenerate(userMsg.id, text);

editAndRegenerate returns early without sending a message when the /api/truncate call fails (non-OK response). In that case nothing resets isProcessing, and the UI is permanently stuck in a busy state — input is disabled, spinner shows, no recovery.

The fix is straightforward: only set isProcessing: true after the truncate succeeds, or wrap with a finally reset in editAndRegenerate. Since editAndRegenerate already catches and logs errors without rethrowing, the caller never knows it failed. Fix this →

Regenerate flow logic — correct

The walk-back from assistant message → preceding user turn (SessionChat.tsx:72-86), truncation of backend + frontend history, and resend via chat.sendMessage are all correct. Old assistant messages are properly dropped from both UI state and backend history before the new message is sent. No orphaned messages.

---

Security

No concerns. Specifics:

• Copy action: uses navigator.clipboard.writeText() on already-rendered assistant text — safe.
• Model avatars (ChatInput.tsx:37): avatarUrl is derived from hardcoded MODEL_OPTIONS paths, not user input — no injection vector.
• Rename dialog: input is capped to 60 chars and rendered by MUI Typography which escapes HTML — no XSS.
• Example Prompts: prompt strings are static constants dropped into a controlled TextField value — no injection risk.
• No dangerouslySetInnerHTML anywhere in the diff.
• No new API endpoints.

---

LiteLLM / Bedrock routing impact

Zero impact. This diff touches only frontend components and useAgentChat.ts (4 additive lines for a code comment). No changes to backend/, agent/, routing config, or transport logic. The regenerate path calls /api/truncate and /api/chat — both pre-existing endpoints.

---

Minor issues (non-blocking)

• SessionSidebar.tsx:274-277 — Dead .delete-btn CSS selector: the delete button was replaced by .more-btn but the old opacity rule remains. Cosmetic noise. Fix this →

• ChatInput.tsx:97 — Placeholder ends with four dots: '...ship....'. Three or an ellipsis character would be cleaner.

• ExamplePromptsDialog.tsx:353-403 — Category list items (left panel) are plain Box with onClick but no role="button", tabIndex, or keyboard handler. The prompt cards on the right do have correct keyboard support (role="button", tabIndex={0}, onKeyDown), so this is inconsistent. Low severity but should be fixed for parity.

• SessionSidebar.tsx:282-284 and AssistantMessage.tsx:157-165 — Action buttons revealed only on mouse hover. Keyboard users who tab to these buttons won't see them. Adding '&:focus-within .more-btn': { opacity: 1 } on the session row (and equivalent on the assistant actions Stack) would fix this.

---

Merge verdict

✅ Safe to merge against current main. No backend/routing impact, no security issues, conflicts already resolved per the branch history. The isProcessing stuck-state on regenerate failure is the only correctness issue worth fixing before landing — it's a small change and blocks no other work.