feat(P4B.T7): MessageBubble renders whiteboard kind with Öffnen button
Adds a whiteboard branch to the MessageBubble ternary chain that renders a card with an icon, label, and Öffnen button dispatching the chatapp:open-whiteboard CustomEvent. ConversationPage now listens for that event via a useEffect and calls setOpenWhiteboardId to open the modal. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -442,6 +442,32 @@ export function MessageBubble({
|
||||
defaultValue: 'Nachricht nicht lesbar',
|
||||
})}
|
||||
</span>
|
||||
) : parsed.kind === 'whiteboard' ? (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-accent/30 bg-accent/5 px-4 py-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/20 text-accent">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
|
||||
strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
|
||||
<rect x="3" y="4" width="18" height="13" rx="2" />
|
||||
<path d="M8 21h8M12 17v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-semibold text-fg">Whiteboard</div>
|
||||
<div className="text-xs text-fg-muted">Gemeinsames Zeichnen</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('chatapp:open-whiteboard', { detail: { id: parsed.whiteboardId } }),
|
||||
);
|
||||
}}
|
||||
disabled={!parsed.whiteboardId}
|
||||
className="cursor-pointer rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Öffnen
|
||||
</button>
|
||||
</div>
|
||||
) : parsed.kind === 'poll' ? (
|
||||
<PollCard
|
||||
question={parsed.question}
|
||||
|
||||
@@ -463,6 +463,15 @@ export function ConversationPage() {
|
||||
};
|
||||
}, [id, setActiveConversation]);
|
||||
|
||||
useEffect(() => {
|
||||
const onOpen = (e: Event) => {
|
||||
const detail = (e as CustomEvent<{ id?: string }>).detail;
|
||||
if (detail?.id) setOpenWhiteboardId(detail.id);
|
||||
};
|
||||
window.addEventListener('chatapp:open-whiteboard', onOpen);
|
||||
return () => window.removeEventListener('chatapp:open-whiteboard', onOpen);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (id && messages.length > 0) markRead(id);
|
||||
}, [id, messages.length, markRead]);
|
||||
|
||||
Reference in New Issue
Block a user