feat(problem): add Bot panel and adapt to new dockview API

src/app/(app)/problems/[id]/layout.tsx

@@ -12,6 +12,7 @@ interface ProblemProps {
   Code: React.ReactNode;
   Testcase: React.ReactNode;
   TestResult: React.ReactNode;
+  Bot: React.ReactNode;
 }
 
 export default async function ProblemLayout({
@@ -22,14 +23,12 @@ export default async function ProblemLayout({
   Code,
   Testcase,
   TestResult,
+  Bot,
 }: ProblemProps) {
   const { id } = await params;
 
-  const [
+  const [problemData, editorLanguageConfigs, languageServerConfigs] =
-    problemData,
+    await Promise.all([
-    editorLanguageConfigs,
-    languageServerConfigs,
-  ] = await Promise.all([
       prisma.problem.findUnique({
         where: { id },
         include: { templates: true },
@@ -56,12 +55,71 @@ export default async function ProblemLayout({
         <PlaygroundHeader />
         <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
           <DockView
-            Description={Description}
+            storageKey="dockview:problem"
-            Solutions={Solutions}
+            options={[
-            Submissions={Submissions}
+              {
-            Code={Code}
+                id: "Description",
-            Testcase={Testcase}
+                title: "Description",
-            TestResult={TestResult}
+                component: "Description",
+                tabComponent: "Description",
+                icon: "FileTextIcon",
+                node: Description,
+              },
+              {
+                id: "Solutions",
+                title: "Solutions",
+                component: "Solutions",
+                tabComponent: "Solutions",
+                icon: "FlaskConicalIcon",
+                node: Solutions,
+                position: { referencePanel: "Description", direction: "within" },
+              },
+              {
+                id: "Submissions",
+                title: "Submissions",
+                component: "Submissions",
+                tabComponent: "Submissions",
+                icon: "CircleCheckBigIcon",
+                node: Submissions,
+                position: { referencePanel: "Solutions", direction: "within" },
+              },
+              {
+                id: "Code",
+                title: "Code",
+                component: "Code",
+                tabComponent: "Code",
+                icon: "SquarePenIcon",
+                node: Code,
+                position: { referencePanel: "Submissions", direction: "right" },
+              },
+              {
+                id: "Bot",
+                title: "Bot",
+                component: "Bot",
+                tabComponent: "Bot",
+                icon: "BotIcon",
+                node: Bot,
+                position: { referencePanel: "Code", direction: "right" },
+              },
+              {
+                id: "Testcase",
+                title: "Testcase",
+                component: "Testcase",
+                tabComponent: "Testcase",
+                icon: "SquareCheckIcon",
+                node: Testcase,
+                position: { referencePanel: "Code", direction: "below" },
+              },
+              {
+                id: "TestResult",
+                title: "TestResult",
+                component: "TestResult",
+                tabComponent: "TestResult",
+                icon: "TerminalIcon",
+                node: TestResult,
+                position: { referencePanel: "Testcase", direction: "within" },
+              },
+            ]}
           />
         </main>
       </ProblemStoreProvider>