File size: 3,053 Bytes
f56a29b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import { useState } from 'react';
import { ArrowLeft } from 'lucide-react';
import type { PBLProjectConfig } from '@/lib/pbl/types';
import { IssueboardPanel } from './issueboard-panel';
import { ChatPanel } from './chat-panel';
import { usePBLChat } from './use-pbl-chat';
import { PBLGuidePanel } from './guide';
import { useI18n } from '@/lib/hooks/use-i18n';
interface PBLWorkspaceProps {
readonly projectConfig: PBLProjectConfig;
readonly userRole: string;
readonly onConfigUpdate: (config: PBLProjectConfig) => void;
readonly onReset: () => void;
}
export function PBLWorkspace({
projectConfig,
userRole,
onConfigUpdate,
onReset,
}: PBLWorkspaceProps) {
const { t } = useI18n();
const [showConfirm, setShowConfirm] = useState(false);
const { messages, isLoading, sendMessage, currentIssue } = usePBLChat({
projectConfig,
userRole,
onConfigUpdate,
});
return (
<div className="flex h-full w-full">
{/* Left: Issueboard (~35%) */}
<div className="w-[35%] min-w-[280px] border-r overflow-hidden flex flex-col">
{/* Back button bar */}
<div className="px-3 pt-2 flex items-center gap-1.5">
{!showConfirm ? (
<div className="flex items-center gap-1 flex-1">
<button
onClick={() => setShowConfirm(true)}
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors px-1.5 py-1 rounded-md hover:bg-muted"
>
<ArrowLeft className="w-3.5 h-3.5" />
<span>{t('pbl.workspace.restart')}</span>
</button>
<div className="ml-auto">
<PBLGuidePanel />
</div>
</div>
) : (
<div className="flex items-center gap-1.5 text-xs">
<span className="text-muted-foreground">{t('pbl.workspace.confirmRestart')}</span>
<button
onClick={() => {
setShowConfirm(false);
onReset();
}}
className="px-2 py-0.5 rounded bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors"
>
{t('pbl.workspace.confirm')}
</button>
<button
onClick={() => setShowConfirm(false)}
className="px-2 py-0.5 rounded bg-muted hover:bg-muted/80 transition-colors"
>
{t('pbl.workspace.cancel')}
</button>
</div>
)}
</div>
<div className="flex-1 overflow-hidden">
<IssueboardPanel issueboard={projectConfig.issueboard} />
</div>
</div>
{/* Right: Chat (~65%) */}
<div className="flex-1 overflow-hidden">
<ChatPanel
messages={messages}
currentIssue={currentIssue}
userRole={userRole}
isLoading={isLoading}
onSendMessage={sendMessage}
/>
</div>
</div>
);
}
|