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',
|
defaultValue: 'Nachricht nicht lesbar',
|
||||||
})}
|
})}
|
||||||
</span>
|
</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' ? (
|
) : parsed.kind === 'poll' ? (
|
||||||
<PollCard
|
<PollCard
|
||||||
question={parsed.question}
|
question={parsed.question}
|
||||||
|
|||||||
@@ -463,6 +463,15 @@ export function ConversationPage() {
|
|||||||
};
|
};
|
||||||
}, [id, setActiveConversation]);
|
}, [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(() => {
|
useEffect(() => {
|
||||||
if (id && messages.length > 0) markRead(id);
|
if (id && messages.length > 0) markRead(id);
|
||||||
}, [id, messages.length, markRead]);
|
}, [id, messages.length, markRead]);
|
||||||
|
|||||||
Reference in New Issue
Block a user