fix: center bottom composer between sidebar and teachers
This commit is contained in:
1 parent
e812371973
commit
521e1ee167
8 files changed
+78
-15
No files matched your search
@@ -3,9 +3,10 @@
|
||||
.coding-chat-body[data-welcome="true"] { padding: 0 24px 16px; background: radial-gradient(ellipse at 45% 18%, #fff8e8 0%, #fffdf8 28%, #fff 67%); }
|
||||
.coding-chat-body[data-welcome="true"] .classroom-chat-view { flex: 1 1 0; overflow-y: auto; padding: clamp(24px, 4vh, 48px) 0 24px; }
|
||||
.coding-chat-body[data-welcome="true"] .classroom-composer-view { width: 100%; max-width: 740px; margin: 0 auto; padding-top: 16px; }
|
||||
.coding-chat-body[data-welcome="true"] .classroom-composer-view > .community-invitation { margin: 0 auto 12px; }
|
||||
.coding-chat-body[data-welcome="true"] [data-testid="coding-message-composer"] { width: 100%; padding: 0; }
|
||||
.coding-chat-body[data-welcome="true"] .chat-composer-surface { background: #fff; border-color: #d7dfda; border-radius: 20px; box-shadow: 0 5px 0 #eaf0e8, 0 12px 32px #69774b08; }
|
||||
.coding-start-heading { position: relative; flex-shrink: 0; width: 100%; max-width: 740px; margin: 0 auto; padding: 0 12px 24px; text-align: center; }
|
||||
.coding-start-heading { position: relative; flex-shrink: 0; width: 100%; max-width: 740px; margin: var(--teacher-top-inset, 0px) auto 0; padding: 0 12px 24px; text-align: center; }
|
||||
.coding-start-mark { display: inline-grid; position: relative; place-items: center; width: 57px; height: 59px; border-radius: 18px; border: 1px solid #f2d6a7; background: #fff0d7; box-shadow: 0 4px 0 #eeddbd; transform: rotate(-7deg); animation: community-hello 650ms ease-out both; }
|
||||
.coding-start-mark img { width: 35px; height: 35px; }
|
||||
.coding-start-mark > svg { position: absolute; width: 17px; height: 17px; right: -24px; top: -2px; color: #c78b36; }
|
||||
|
||||
@@ -8,14 +8,19 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
|
||||
useLayoutEffect(() => {
|
||||
const body = ref.current;
|
||||
const content = body?.querySelector<HTMLElement>('.classroom-chat-view');
|
||||
if (!body || !content || !welcome || hidden || !bubble) return;
|
||||
if (!body || !content || hidden || !bubble) return;
|
||||
const update = () => {
|
||||
const area = content.getBoundingClientRect();
|
||||
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.
|
||||
content.style.paddingRight = overlaps && area.width >= 1050 ? `${Math.ceil(area.right - message.left + 24)}px` : '';
|
||||
content.style.paddingTop = overlaps && area.width < 1050 ? `${Math.ceil(message.bottom - area.top + 24)}px` : '';
|
||||
const rightInset = Math.ceil(area.right - message.left + 24);
|
||||
const besideTeacher = overlaps && area.width >= 900 && area.width - rightInset - 24 >= 420;
|
||||
// Reserve the same right rail for the welcome and bottom input. The teacher keeps its own fixed width.
|
||||
body.style.paddingLeft = besideTeacher ? '24px' : '';
|
||||
body.style.paddingRight = besideTeacher ? `${rightInset}px` : '';
|
||||
// Put compact-screen clearance inside the scrolling heading, never around the fixed bottom input.
|
||||
content.style.setProperty('--teacher-top-inset', welcome && overlaps && !besideTeacher
|
||||
? `${Math.max(0, Math.ceil(message.bottom - content.getBoundingClientRect().top))}px` : '0px');
|
||||
};
|
||||
update();
|
||||
const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
|
||||
@@ -23,7 +28,8 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
|
||||
window.addEventListener('resize', update);
|
||||
return () => {
|
||||
observer?.disconnect(); window.removeEventListener('resize', update);
|
||||
content.style.paddingRight = ''; content.style.paddingTop = '';
|
||||
body.style.paddingLeft = ''; body.style.paddingRight = '';
|
||||
content.style.removeProperty('--teacher-top-inset');
|
||||
};
|
||||
}, [welcome, hidden, bubble]);
|
||||
return <div ref={ref} className="coding-chat-body" data-welcome={welcome} hidden={hidden}>{children}</div>;
|
||||
|
||||
@@ -835,7 +835,7 @@ export function CodingChatPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showWelcome ? <><CodingStartHeading /><CommunityInvitation /></> : targetConversationId
|
||||
{showWelcome ? <CodingStartHeading /> : targetConversationId
|
||||
? (
|
||||
<CodingConversationTimeline
|
||||
key={targetConversationId}
|
||||
@@ -898,6 +898,7 @@ export function CodingChatPanel({
|
||||
|
||||
</div>
|
||||
<div hidden={agentBrowserOpen} className="classroom-composer-view shrink-0">
|
||||
{showWelcome && <CommunityInvitation />}
|
||||
{selectedConversation?.archivedAt ? (
|
||||
<div className="m-4 flex items-center justify-between gap-3 rounded-xl border bg-surface-subtle px-4 py-3 text-sm">
|
||||
<span>{running ? '此对话已归档,任务仍在运行。' : '此对话已归档,恢复后可继续聊天。'}</span>
|
||||
|
||||
Reference in new issue
Block a user