48 lines
3.2 KiB
TypeScript
48 lines
3.2 KiB
TypeScript
import { useState, type ComponentProps } from 'react';
|
||
import { createRoot } from 'react-dom/client';
|
||
import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
|
||
import { AgentBrowserPanel } from '../../../src/pages/Chat/AgentBrowserPanel';
|
||
import '../../../src/styles/globals.css';
|
||
import '../../../src/pages/Chat/classroom-workspace.css';
|
||
|
||
// Render the production bubble and preview in an isolated browser. No Electron
|
||
// window is launched, and no user project, provider, or live Host API is used.
|
||
export function Layout() {
|
||
const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
|
||
const [visible, setVisible] = useState(true);
|
||
const [open, setOpen] = useState(false);
|
||
const [width, setWidth] = useState(508);
|
||
const [long, setLong] = useState(true);
|
||
const companion = {
|
||
definition: { name: '编程老师', avatar_id: 'avatar-06' },
|
||
invitation: visible ? { response: long ? '你刚才说想做一个宠物游戏。我们一起想想，什么样的小动作，会让你愿意一直陪它玩下去？可以先挑一个最想试的想法。' : '有什么编程问题想一起讨论？' } : null,
|
||
welcome: null, enabled: true, loading: false, checking: false, error: null,
|
||
dismiss: () => setVisible(false),
|
||
} as ComponentProps<typeof TeacherCompanion>['companion'];
|
||
return <div className="classroom-workspace flex h-screen flex-col bg-white">
|
||
<header className="relative z-50 flex h-10 shrink-0 items-center justify-end border-b px-3" data-testid="coding-conversation-header">
|
||
<span className="mr-auto text-xs">布局测试项目 › hello</span>
|
||
<TeacherCompanion companion={companion} open={open} onOpen={() => setOpen(!open)} bubbleRef={setBubble} />
|
||
<span className="w-20 text-center text-xs">朋友</span>
|
||
</header>
|
||
<div className="relative flex min-h-0 flex-1" data-testid="coding-chat-panel" data-consultation-open={open}>
|
||
<main className="flex min-w-0 flex-1 flex-col">
|
||
<div className="classroom-tabs" role="tablist"><button role="tab">操作对话</button><button role="tab" aria-selected="true">作品</button></div>
|
||
<div className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
|
||
<AgentBrowserPanel projectId="layout-fixture" embedded open teacherBubble={bubble} onOpenChange={() => {}} />
|
||
</div>
|
||
</main>
|
||
{open && <aside id="coding-consultation-dock" className="classroom-consultation-dock consultation-pane shrink-0 border-l p-5" style={{ width }}>
|
||
<p className="mb-8 text-sm">老师对话（布局测试）</p>
|
||
<label className="block text-xs">老师栏宽度<input aria-label="老师栏宽度" type="range" min="320" max="640" value={width} onChange={(event) => setWidth(Number(event.target.value))} /></label>
|
||
<button className="mt-6 text-xs" onClick={() => setOpen(false)}>关闭老师栏</button>
|
||
</aside>}
|
||
</div>
|
||
<footer className="flex shrink-0 gap-5 border-t p-2 text-xs">
|
||
<button onClick={() => { setVisible(true); setLong(!long); }}>切换消息长度</button>
|
||
<span>隔离布局测试：作品区域仅为占位，不连接真实项目</span>
|
||
</footer>
|
||
</div>;
|
||
}
|
||
createRoot(document.getElementById('root')!).render(<Layout />);
|