feat: add creative welcome and external works square links

src/pages/Chat/CodingChatBody.tsx

@@ -0,0 +1,29 @@
+import { useLayoutEffect, useRef, type ReactNode } from 'react';
+
+/** Keep the same composer mounted while the empty state becomes a conversation. */
+export function CodingChatBody({ welcome, hidden, bubble, children }: {
+  welcome: boolean; hidden: boolean; bubble?: HTMLElement | null; children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const body = ref.current;
+    if (!body || !welcome || hidden || !bubble) return;
+    const update = () => {
+      const area = body.getBoundingClientRect();
+      const message = bubble.getBoundingClientRect();
+      const overlaps = message.height > 0 && message.right > area.left && message.left < area.right && message.bottom > area.top;
+      // Wide workspaces put the welcome beside the teachers. Compact ones flow below them.
+      body.style.paddingRight = overlaps && area.width >= 1050 ? `${Math.ceil(area.right - message.left + 24)}px` : '';
+      body.style.paddingTop = overlaps && area.width < 1050 ? `${Math.ceil(message.bottom - area.top + 24)}px` : '';
+    };
+    update();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+    observer?.observe(body); observer?.observe(bubble);
+    window.addEventListener('resize', update);
+    return () => {
+      observer?.disconnect(); window.removeEventListener('resize', update);
+      body.style.paddingRight = ''; body.style.paddingTop = '';
+    };
+  }, [welcome, hidden, bubble]);
+  return <div ref={ref} className="coding-chat-body" data-welcome={welcome} hidden={hidden}>{children}</div>;
+}