3c5f3ecb96
Conversational follow-up on a suggestion, streamed token-by-token. Backend (interface-only; handlers never touch a concrete LLM client): - internal/llm/chat.go: StreamAskPetal with conversational sampling (max_tokens 512, temp 0.7, rep 1.15, top_p 0.92, stop "\n\n\n"), reusing AskPetalSystemPrompt + TrimHistory. - internal/suggestions/chat.go: POST /api/suggestions/:id/chat. One user-scoped join loads the suggestion + parent content_text; surroundingParagraph extracts the \n\n-bounded paragraph at from_pos (whole-doc fallback when unlocated) and injects it server-side. Streams event: token / event: done SSE frames with JSON-encoded data so token newlines can't break framing; real http.Flusher per chunk. LLM-unreachable -> 502 before SSE headers; unknown suggestion -> 404. Frontend: - streamSuggestionChat: fetch + ReadableStream SSE parser (not EventSource, needs POST), abortable. - AskPetal.tsx: whole conversation in component state (no persistence, cleared on close), Petal's first bubble pre-seeded with the explanation, rose/lavender bubbles, CJK font stack on the bubbles only (Note #17), streaming caret. - SuggestionCard "Ask Petal" pill pins the card open while chatting (hover-close suppressed, click-away closes) and widens it to 340px. Tests: chat_test.go covers streamed-text concat + done event, server-side context injection on the system message, sampling params, 404, and surroundingParagraph. go build/vet/test clean, tsc clean, vite build OK. Live SSE smoke-tested against a fake streaming vLLM: tokens flushed individually through the chi middleware stack, done terminator, 502 on LLM-down, 404 on unknown suggestion. Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { useState } from 'react'
|
|
import type { Suggestion, SuggestionType } from '../../api/client'
|
|
import { AskPetal } from './AskPetal'
|
|
|
|
// Per-type accent color + human label, mirroring the design tokens.
|
|
const TYPE_META: Record<SuggestionType, { color: string; label: string }> = {
|
|
grammar: { color: 'var(--color-mint)', label: 'Grammar' },
|
|
phrasing: { color: 'var(--color-peach)', label: 'Phrasing' },
|
|
idiom: { color: 'var(--color-lavender)', label: 'Idiom' },
|
|
clarity: { color: 'var(--color-sky)', label: 'Clarity' },
|
|
voice: { color: 'var(--color-honey)', label: 'Voice' },
|
|
}
|
|
|
|
interface Props {
|
|
suggestion: Suggestion
|
|
style: React.CSSProperties
|
|
onAccept: (s: Suggestion) => void
|
|
onDismiss: (s: Suggestion) => void
|
|
onPointerEnter: () => void
|
|
onPointerLeave: () => void
|
|
// Pins the card open while the Ask Petal panel is expanded, so the chat isn't
|
|
// dismissed by the hover-close timer when the pointer drifts away.
|
|
onExpandChange: (expanded: boolean) => void
|
|
}
|
|
|
|
// SuggestionCard is the hover panel for a single suggestion: a colored type tag,
|
|
// the original → replacement diff, the friendly explanation, and accept/dismiss
|
|
// actions. Voice flags carry no replacement, so the diff row is hidden and only
|
|
// Dismiss is offered (awareness-only).
|
|
export function SuggestionCard({
|
|
suggestion,
|
|
style,
|
|
onAccept,
|
|
onDismiss,
|
|
onPointerEnter,
|
|
onPointerLeave,
|
|
onExpandChange,
|
|
}: Props) {
|
|
const meta = TYPE_META[suggestion.type]
|
|
const hasReplacement = suggestion.replacement.trim() !== ''
|
|
const [asking, setAsking] = useState(false)
|
|
|
|
function toggleAsking() {
|
|
setAsking((prev) => {
|
|
const next = !prev
|
|
onExpandChange(next)
|
|
return next
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-label={`${meta.label} suggestion`}
|
|
onMouseEnter={onPointerEnter}
|
|
onMouseLeave={onPointerLeave}
|
|
className="petal-suggestion-card absolute z-20 p-3.5 text-sm"
|
|
style={{
|
|
width: asking ? 340 : 300,
|
|
background: 'var(--color-surface)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-card)',
|
|
boxShadow: 'var(--shadow-soft)',
|
|
...style,
|
|
}}
|
|
>
|
|
<span
|
|
className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-bold"
|
|
style={{ background: meta.color, color: 'var(--color-plum)' }}
|
|
>
|
|
{meta.label}
|
|
</span>
|
|
|
|
{hasReplacement && (
|
|
<div className="mt-2.5 flex flex-col gap-1" style={{ fontFamily: 'var(--font-body)' }}>
|
|
<span className="text-[0.95rem] line-through" style={{ color: 'var(--color-muted)' }}>
|
|
{suggestion.original}
|
|
</span>
|
|
<span className="text-[0.95rem] font-medium" style={{ color: 'var(--color-plum)' }}>
|
|
{suggestion.replacement}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<p className="mt-2.5 leading-snug" style={{ color: 'var(--color-plum)' }}>
|
|
{suggestion.explanation}
|
|
</p>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={toggleAsking}
|
|
className="mt-2 rounded-full px-2.5 py-1 text-xs font-bold transition-colors"
|
|
style={{
|
|
background: asking ? 'var(--color-surface-alt)' : 'transparent',
|
|
color: 'var(--color-accent-hover)',
|
|
}}
|
|
>
|
|
{asking ? 'Hide Petal' : 'Ask Petal ✨'}
|
|
</button>
|
|
|
|
{asking && <AskPetal suggestionId={suggestion.id} explanation={suggestion.explanation} />}
|
|
|
|
<div className="mt-3 flex items-center gap-2">
|
|
{hasReplacement && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onAccept(suggestion)}
|
|
className="rounded-full px-3.5 py-1.5 text-xs font-bold text-white"
|
|
style={{ background: 'var(--color-accent)' }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-accent-hover)')}
|
|
onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--color-accent)')}
|
|
>
|
|
Accept
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => onDismiss(suggestion)}
|
|
className="rounded-full px-3.5 py-1.5 text-xs font-semibold"
|
|
style={{ background: 'var(--color-surface-alt)', color: 'var(--color-muted)' }}
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|