diff --git a/web/src/components/ChatMessage.tsx b/web/src/components/ChatMessage.tsx index 5268a18..1e7a41a 100644 --- a/web/src/components/ChatMessage.tsx +++ b/web/src/components/ChatMessage.tsx @@ -127,9 +127,17 @@ export function ChatMessage({ ) : null ) : (
- - {message.content || "▍"} - + {message.content ? ( + + {message.content} + + ) : ( + // Noch kein Token da. Der Cursor blinkt, damit die Wartezeit — bei + // kaltem Modell mehrere Sekunden — nicht wie ein Stillstand wirkt. + + ▍ + + )}
)} diff --git a/web/src/components/Composer.tsx b/web/src/components/Composer.tsx index a9be94f..25dbd83 100644 --- a/web/src/components/Composer.tsx +++ b/web/src/components/Composer.tsx @@ -105,6 +105,51 @@ async function readAsTextAttachment(file: File): Promise { }; } +/** + * Icons als SVG statt Emoji. + * + * 🎙 und 📎 sind in den Emoji-Fonts fest grau eingefärbt — `color` greift bei + * ihnen nicht. Damit blieben auch die Zustandsfarben unten wirkungslos + * (Aufnahme rot, Transkription orange): sie färbten nur den Rahmen. Als SVG + * mit `currentColor` zieht die Farbe wieder durch. + */ +const ICON = { + width: 18, + height: 18, + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: 1.8, + strokeLinecap: "round" as const, + strokeLinejoin: "round" as const, +}; + +function MicIcon() { + return ( + + ); +} + +function RecordIcon() { + return ( + + ); +} + +function ClipIcon() { + return ( + + ); +} + export function Composer({ streaming, disabled, @@ -311,7 +356,7 @@ export function Composer({ } disabled={transcribing || disabled} > - {recording ? "●" : transcribing ? "…" : "🎙"} + {recording ? : transcribing ? "…" : }