05 Instant Answer Refinement Pills

Instant Answer Refinement Pills

During live interviews, interviewers frequently ask spontaneous follow-up questions or request a different depth of explanation:

• "Can you give me a concrete example from your past work?"
• "Can you keep it brief? Just give me the 30-second elevator pitch."
• "How does that work under the hood at the architectural/system level?"
• "Can you explain that in plain English so a non-technical stakeholder could understand?"

WishPilot addresses this with Instant Answer Refinement Pills — quick-action buttons rendered immediately below every streamed answer.

---

1. The 4 Refinement Actions

Action	Vector Icon	Directive & Spoken Tone
Make Shorter	Inward Collapsing Arrows (ShrinkSvg)	Compresses the answer into an ultra-punchy 15 to 20-second spoken elevator pitch (maximum 2-3 sentences). Eliminates all preamble and fluff.
More Technical	Algorithmic Brackets (CodeDepthSvg)	Elevates the explanation to maximum architectural depth. Injects specific protocols, algorithmic complexity (Big-O), memory/CPU trade-offs, and code snippets.
Give an Example	Case Study Spark (CaseStudySvg)	Grounds the answer in a concrete real-world production case study. Cites a realistic project scenario, challenges faced, technical actions taken, and measurable metrics (e.g., dropped p99 latency by 72%).
Simpler Language	Conversational Bubble (PlainSpeechSvg)	Translates the technical concept into plain, crystal-clear conversational English using an intuitive real-world analogy without technical jargon.

---

2. Zero Emojis Guarantee

To maintain a strict, professional, and stealth aesthetic, all refinement buttons use 100% custom monochrome vector SVGs:

// Custom monochrome vector icon with currentColor binding
export const RefinementIcons = {
  shorter: ({ size = 13, className = '', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="4" y1="12" x2="11" y2="12" />
      <polyline points="8 9 11 12 8 15" />
      <line x1="20" y1="12" x2="13" y2="12" />
      <polyline points="16 9 13 12 16 15" />
      <line x1="12" y1="4" x2="12" y2="20" strokeWidth="1.5" strokeOpacity="0.4" />
    </svg>
  ),
  technical: ({ size = 13, className = '', style = {} }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="16 18 22 12 16 6" />
      <polyline points="8 6 2 12 8 18" />
      <line x1="14" y1="4" x2="10" y2="20" />
    </svg>
  ),
  // ...
};

---

3. Under the Hood: The Refinement Pipeline

When a candidate clicks a refinement pill:

1. Context Capture: The client captures both the originalQuestion and the previousAnswer.
2. Specialized System Prompting: aiService.refineAnswer() crafts an aggressive refinement prompt tailored to the active category domain.
3. Zero Meta-Talk Enforcement: The AI is strictly instructed never to output conversational meta-talk (e.g., "Here is a shorter version" or "Sure, let me give you an example"). It jumps directly into the revised spoken words.
4. Live Streaming: The refined answer streams chunk-by-chunk directly into the candidate's active answer container.
5. Session History Sync: The refined answer is automatically appended to the active session history tagged as [Refined: SHORTER], [Refined: TECHNICAL], etc.

// Example Prompt Dispatch in aiService.js
const systemPrompt = `You are WishPilot, an elite live stealth interview copilot.
INTERVIEW STREAM: ${categoryData.label.toUpperCase()}

YOUR TASK:
Refine and rewrite the candidate's previous interview answer according to this directive:
${refDef.directive}

STRICT INSTRUCTIONS:
1. ZERO META-TALK: Jump DIRECTLY into the refined spoken words ready to be read aloud.
2. SPOKEN FIRST-PERSON VOICE: Speak in authentic, confident first-person ("I", "in my experience...").
3. STRUCTURE: Start with **SPEAK THIS FIRST (10s TL;DR)**: "[One confident spoken punchline]".`;

---

4. UI Placement Across View Modes

• Stealth HUD: Rendered as a compact toolbar immediately above the answer box once an answer streams. Compact buttons (3.5px 8px padding, 10.5px font size) preserve vertical screen real estate.
• Live Test Lab: Rendered below the test output card in the Studio Dashboard.
• Mock Interview Simulator: Rendered below the mock answer container, allowing offline practice drills for each refinement style.