Skip to content

Iteration 4: refresh welcome state and quick actions #4

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

Draft
HimanM wants to merge 1 commit into
base: codex/pay-link-card-iteration-3
Choose a base branch
from
Draft

Iteration 4: refresh welcome state and quick actions #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 13 additions & 9 deletions docs/feature-checklists/05-quick-actions-and-welcome.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,22 @@ Improve discovery and usability with better quick actions, a stronger welcome st

## Checklist

- [ ] Review candidate welcome screens and quick-action patterns
- [ ] Decide which shortcuts belong on the empty state versus active chat state
- [ ] Add better quick-action chips for common shopping intents
- [ ] Improve the welcome state so it advertises core capabilities clearly
- [ ] Keep the new layout consistent with the current visual direction
- [ ] Verify prompts generated by quick actions still lead to cards or useful assistant text
- [ ] Run `npm run lint`
- [ ] Run `npm run build`
- [ ] Verify the flow in a live browser session
- [x] Review candidate welcome screens and quick-action patterns
- [x] Decide which shortcuts belong on the empty state versus active chat state
- [x] Add better quick-action chips for common shopping intents
- [x] Improve the welcome state so it advertises core capabilities clearly
- [x] Keep the new layout consistent with the current visual direction
- [x] Verify prompts generated by quick actions still lead to cards or useful assistant text
- [x] Run `npm run lint`
- [x] Run `npm run build`
- [x] Verify the flow in a live browser session
- [ ] Commit, push branch, and open draft PR

## Notes

- Candidate reference: `tmp_compare/kavi-kapruka/components/chat/QuickActions.tsx`
- Candidate reference: `tmp_compare/kavi-kapruka/components/chat/WelcomeScreen.tsx`
- Empty state now highlights gift picks, order tracking, and checkout flow without introducing a new component or layout system.
- Active chat keeps the existing quick-action row and adds a checkout shortcut only when the cart has items.
- Live browser verification used `http://localhost:3000` with a Playwright fallback because the in-app Browser tool was not callable in this thread.
- Browser checks confirmed the refreshed welcome copy rendered and the category quick action still started a useful categories flow.
44 changes: 34 additions & 10 deletions frontend/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ function saveSessionId(sessionId: string) {
}

const suggestions = [
"Find birthday cakes",
"Flowers for anniversary",
"Gift ideas for wife",
"Party supplies for 10",
{ label: "Restock groceries", prompt: "Help me restock weekly groceries on Kapruka" },
{ label: "Birthday cake", prompt: "Find birthday cakes on Kapruka under Rs. 10,000" },
{ label: "Send flowers", prompt: "I want to send flowers to someone special" },
{ label: "Party supplies", prompt: "Show party supplies for 10 people" },
];

const TRACK_ORDER_PROMPT = "I want to track my order. Please ask me for the Kapruka order number if needed.";
Expand Down Expand Up @@ -421,12 +421,27 @@ export default function Home() {
Shop with an AI assistant
</h1>
<p className="command-cursor mt-6 max-w-2xl text-base leading-relaxed text-ink sm:text-xl">
Discover products in chat, add to cart instantly, and save checkout details in a real side panel.
Discover products in chat, track orders, and move into checkout without leaving the conversation.
</p>

<div className="mt-8 grid w-full max-w-3xl gap-3 text-left sm:grid-cols-3">
<div className="rounded-2xl border border-border bg-surface/90 px-4 py-4 shadow-[0_12px_30px_rgba(37,36,31,0.04)]">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted">Gift Picks</p>
<p className="mt-2 text-sm text-ink-soft">Use the advisor or jump straight into birthday, anniversary, and grocery prompts.</p>
</div>
<div className="rounded-2xl border border-border bg-surface/90 px-4 py-4 shadow-[0_12px_30px_rgba(37,36,31,0.04)]">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted">Order Tracking</p>
<p className="mt-2 text-sm text-ink-soft">Ask for a tracking update anytime and the assistant will prompt for the order number if needed.</p>
</div>
<div className="rounded-2xl border border-border bg-surface/90 px-4 py-4 shadow-[0_12px_30px_rgba(37,36,31,0.04)]">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted">Checkout Flow</p>
<p className="mt-2 text-sm text-ink-soft">Save delivery details in the side drawer, then come back to chat for order placement and payment.</p>
</div>
</div>

<div className="mt-8 flex w-full max-w-xl items-center gap-2 rounded-xl border border-border bg-surface-2/90 px-4 py-3 text-left text-sm text-ink-soft shadow-[0_18px_45px_rgba(37,36,31,0.04)] backdrop-blur-sm">
<span className="text-muted">&gt;_</span>
<span className="min-w-0 truncate">Find a birthday gift under Rs. 10,000</span>
<span className="min-w-0 truncate">Try: help me restock my weekly groceries</span>
</div>

<div className="mt-10 flex w-full max-w-4xl flex-wrap justify-center gap-3 px-2">
Expand Down Expand Up @@ -464,15 +479,15 @@ export default function Home() {
<span>Open Checkout</span>
</button>
) : null}
{suggestions.map((text) => (
{suggestions.map((suggestion) => (
<button
key={text}
key={suggestion.label}
type="button"
onClick={() => sendMessage(text)}
onClick={() => sendMessage(suggestion.prompt)}
className="inline-flex min-h-11 max-w-full items-center gap-2 rounded-full border border-border bg-bg/85 px-5 py-2.5 text-sm leading-tight text-ink backdrop-blur-sm transition hover:border-ink hover:bg-surface"
>
<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-xiaomi" />
<span>{text}</span>
<span>{suggestion.label}</span>
</button>
))}
</div>
Expand Down Expand Up @@ -504,6 +519,15 @@ export default function Home() {
</button>
)
)}
{cartCount > 0 ? (
<button
type="button"
onClick={openCheckout}
className="inline-flex h-10 items-center rounded-full border border-border bg-surface px-4 text-sm text-ink transition hover:border-border-hover hover:bg-surface-2"
>
Open checkout
</button>
) : null}
</div>
{messages.map((msg) => (
<ChatMessage key={msg.id} message={msg} sessionId={sessionId} onAdded={refresh} />
Expand Down