52 lines
3.7 KiB
TypeScript
52 lines
3.7 KiB
TypeScript
import { useState, type ComponentProps } from 'react';
|
||
import { createRoot } from 'react-dom/client';
|
||
import { CodingChatBody } from '../../../src/pages/Chat/CodingChatBody';
|
||
import { CodingStartHeading } from '../../../src/pages/Chat/CodingStartHeading';
|
||
import { CodingComposer } from '../../../src/pages/Chat/CodingComposer';
|
||
import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
|
||
import { CommunityInvitation } from '../../../src/components/community/CommunityInvitation';
|
||
import '../../../src/styles/globals.css';
|
||
import '../../../src/pages/Chat/classroom-workspace.css';
|
||
|
||
export function Layout() {
|
||
const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
|
||
const [draft, setDraft] = useState('');
|
||
const [sent, setSent] = useState(false);
|
||
const [dismissed, setDismissed] = useState(false);
|
||
const agents = ['架构工程师-陈宗琦', '产品工程师-Alice'].map((name, index) => ({
|
||
teacher_id: String(index), version: 1, is_default: index === 0,
|
||
definition: { config_id: String(index), name, avatar_id: 'avatar-06',
|
||
description: index === 0 ? '有什么编程问题想一起讨论？' : '陪你把天马行空的点子，变成能玩、能用、眼睛一亮的小作品。' },
|
||
}));
|
||
const companion = {
|
||
agents, selectedAgent: agents[0], definition: agents[0].definition, enabled: true,
|
||
unreadAgentIds: [], invitation: null, welcome: null, loading: false, error: null, checking: false,
|
||
refreshing: false, refreshStatus: 'idle', refresh: async () => {}, reloadCatalog: async () => {}, dismiss: () => {},
|
||
welcomes: new URLSearchParams(location.search).has('teachers') && !dismissed ? agents.map((agent, index) => ({ agentId: agent.teacher_id, definition: agent.definition, text: agent.definition.description, tone: index })) : [],
|
||
dismissWelcomes: () => setDismissed(true),
|
||
} as ComponentProps<typeof TeacherCompanion>['companion'];
|
||
return <div className="flex h-screen">
|
||
{new URLSearchParams(location.search).has('sidebar') && <aside data-testid="project-sidebar" className="shrink-0 border-r p-4 text-sm" style={{ width: 210, background: '#f1f6fc' }}>我的项目</aside>}
|
||
<div className="classroom-workspace flex min-w-0 flex-1 flex-col bg-white">
|
||
<header className="relative z-50 flex h-12 shrink-0 items-center justify-end border-b px-3" data-testid="coding-conversation-header">
|
||
<span className="mr-auto min-w-0 truncate text-xs">测试项目 › 新对话</span>
|
||
<TeacherCompanion companion={companion} open={false} onOpen={() => {}} onToggle={() => {}} bubbleRef={setBubble} />
|
||
</header>
|
||
<main className="classroom-main flex min-h-0 min-w-0 flex-1 flex-col">
|
||
<div className="classroom-tabs" role="tablist"><button role="tab" aria-selected="true">操作对话</button><button role="tab">作品</button></div>
|
||
<CodingChatBody welcome={!sent} hidden={false} bubble={bubble}>
|
||
<div className="classroom-chat-view min-h-0 flex-1 flex-col">{!sent ? <CodingStartHeading /> : <p>第一条消息已发送（测试）</p>}</div>
|
||
<div className="classroom-composer-view shrink-0">
|
||
{!sent && <CommunityInvitation />}
|
||
<CodingComposer value={draft} editable canSend={Boolean(draft)} preparing={false} recovering={false}
|
||
runStatus="idle" mode="prompt" queue={{ items: [] }} error={null} recoverableError={false}
|
||
attachments={[]} submitting={false} placeholder="说说你的想法，接下来想做什么？" onChange={setDraft}
|
||
onModeChange={() => {}} onSubmit={() => { setSent(true); setDraft(''); }} onRecover={() => {}}
|
||
onAddFiles={() => {}} onRemoveAttachment={() => {}} />
|
||
</div>
|
||
</CodingChatBody>
|
||
</main>
|
||
</div></div>;
|
||
}
|
||
createRoot(document.getElementById('root')!).render(<Layout />);
|