nntrivi2001
4cc39f5069
Full rename across files, identifiers, CSS classes, and user-facing strings (en/vi locales, ARCHITECTURE.md). Replaces the hand-drawn animated cat avatar with the pig-superhero mascot artwork, split into parts to keep per-eye cursor tracking and blink animation working; whole-mascot mood transforms (breathe/bob/shake/tilt) and new zzz/bang/sparkle overlays carry the rest of the mood expression since the traced art has no shared palette to key off of.
80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
/**
|
|
* @file SpeechBubble.tsx
|
|
* @description Transient speech bubble rendered above the Sagi mascot.
|
|
* Pure presentation — visibility timing and quip selection live in
|
|
* {@link useSagiBrain}; this component only paints the bubble and handles
|
|
* user dismissal.
|
|
*
|
|
* ## Accessibility
|
|
* Uses `role="status"` with `aria-live="polite"` so screen readers announce
|
|
* new quips without interrupting current speech. Click anywhere on the bubble
|
|
* to dismiss early.
|
|
*
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
/* =============================================================================
|
|
* MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
|
|
* =============================================================================
|
|
* **Purpose:** Sagi is the optional on-screen mascot assistant — quips, intents, and lightweight event reactions layered above the dashboard chrome.
|
|
*
|
|
* ## Design constraints
|
|
* - Local-first: no telemetry leaves the machine unless the user configures webhooks.
|
|
* - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
|
|
* philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
|
|
* - Destructive flows stay behind explicit confirmation modals and server-side gates.
|
|
* - Internationalization: user-visible strings belong in i18n JSON, not literals here.
|
|
*
|
|
* ## Remote data & SSH
|
|
* Remote Data Sources let operators aggregate multiple machines. SSH entries describe
|
|
* how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
|
|
* scoped GET via `?sources=`. Health checks and import history surface in Settings.
|
|
*
|
|
* ## Public surface
|
|
* - `SpeechBubble` — exported API; see TSDoc on the symbol for behavior.
|
|
*
|
|
* ## Testing pointers
|
|
* - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
|
|
* - Server contract changes require `npm run test:server` and OpenAPI sync.
|
|
* - MCP edits: `npm run mcp:typecheck` and `npm run mcp:build`.
|
|
*
|
|
* ## Related docs
|
|
* - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
|
|
* - `docs/API.md` — REST reference.
|
|
* - `.claude/skills/file-headers/` — mandatory `@author` header policy.
|
|
* ============================================================================= */
|
|
/* -----------------------------------------------------------------------------
|
|
* EXPORT CATALOG — quick index of symbols defined below (documentation only).
|
|
* -----------------------------------------------------------------------------
|
|
* **SpeechBubble**
|
|
* Part of this module's public contract. Downstream imports should treat
|
|
* the signature and return type as stable unless release notes say otherwise.
|
|
* When behavior changes, update the `@file` overview and relevant tests.
|
|
*
|
|
* ----------------------------------------------------------------------------- */
|
|
|
|
/** Props for {@link SpeechBubble}. */
|
|
interface SpeechBubbleProps {
|
|
/** Quip text to display inside the bubble. */
|
|
text: string;
|
|
/** Called when the user clicks to dismiss. */
|
|
onDismiss: () => void;
|
|
}
|
|
|
|
/**
|
|
* Animated speech bubble above Sagi.
|
|
* @param props See {@link SpeechBubbleProps}.
|
|
*/
|
|
export function SpeechBubble({ text, onDismiss }: SpeechBubbleProps) {
|
|
return (
|
|
<div
|
|
className="sagi-bubble sagi-bubble-enter"
|
|
role="status"
|
|
aria-live="polite"
|
|
onClick={onDismiss}
|
|
title="Dismiss"
|
|
>
|
|
{text}
|
|
</div>
|
|
);
|
|
}
|