feat: add tutorial for the supreme court hearings

website/src/app/api/downloadTutorialDataset/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const fileId = searchParams.get("fileId");
+
+  if (!fileId) {
+    return new NextResponse("File ID is required", { status: 400 });
+  }
+
+  try {
+    const driveUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;
+    const response = await fetch(driveUrl);
+
+    if (!response.ok) {
+      throw new Error("Failed to download file from Google Drive");
+    }
+
+    const data = await response.blob();
+    return new NextResponse(data);
+  } catch (error) {
+    console.error("Error downloading tutorial dataset:", error);
+    return new NextResponse("Failed to download tutorial dataset", {
+      status: 500,
+    });
+  }
+}

website/src/app/api/utils.ts

@@ -193,27 +193,14 @@ export function generatePipelineConfig(
   );
 
   // Fix type errors by asserting the pipeline config type
-  const pipelineConfig: {
-    datasets: any;
-    default_model: string;
-    optimizer_config: any;
-    operations: any[];
-    pipeline: {
-      steps: any[];
-      output: {
-        type: string;
-        path: string;
-        intermediate_dir: string;
-      };
-    };
-    system_prompt: Record<string, unknown>;
-    llm_api_keys?: Record<string, string>;
-  } = {
+  const pipelineConfig: any = {
     datasets,
     default_model,
-    optimizer_config: {
-      force_decompose: true,
-    },
+    ...(enable_observability && {
+      optimizer_config: {
+        force_decompose: true,
+      },
+    }),
     operations: updatedOperations,
     pipeline: {
       steps: [

website/src/app/playground/page.tsx

@@ -104,6 +104,7 @@ const NamespaceDialog = dynamic(
 );
 import { ThemeProvider, useTheme, Theme } from "@/contexts/ThemeContext";
 import { APIKeysDialog } from "@/components/APIKeysDialog";
+import { TutorialsDialog, TUTORIALS } from "@/components/TutorialsDialog";
 
 const LeftPanelIcon: React.FC<{ isActive: boolean }> = ({ isActive }) => (
   <svg
@@ -258,6 +259,9 @@ const CodeEditorPipelineApp: React.FC = () => {
   const [showChat, setShowChat] = useState(false);
   const [showNamespaceDialog, setShowNamespaceDialog] = useState(false);
   const [showAPIKeysDialog, setShowAPIKeysDialog] = useState(false);
+  const [showTutorialsDialog, setShowTutorialsDialog] = useState(false);
+  const [selectedTutorial, setSelectedTutorial] =
+    useState<(typeof TUTORIALS)[0]>();
   const { theme, setTheme } = useTheme();
 
   const {
@@ -271,6 +275,10 @@ const CodeEditorPipelineApp: React.FC = () => {
     unsavedChanges,
     namespace,
     setNamespace,
+    setOperations,
+    setPipelineName,
+    setSampleSize,
+    setDefaultModel,
   } = usePipelineContext();
 
   useEffect(() => {
@@ -490,6 +498,22 @@ const CodeEditorPipelineApp: React.FC = () => {
                   >
                     Show Documentation
                   </MenubarItem>
+                  <MenubarSub>
+                    <MenubarSubTrigger>Tutorials</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      {TUTORIALS.map((tutorial) => (
+                        <MenubarItem
+                          key={tutorial.id}
+                          onSelect={() => {
+                            setSelectedTutorial(tutorial);
+                            setShowTutorialsDialog(true);
+                          }}
+                        >
+                          {tutorial.title}
+                        </MenubarItem>
+                      ))}
+                    </MenubarSubContent>
+                  </MenubarSub>
                   <MenubarItem onSelect={() => setShowChat(!showChat)}>
                     Show Chat
                   </MenubarItem>
@@ -740,6 +764,23 @@ const CodeEditorPipelineApp: React.FC = () => {
           open={showAPIKeysDialog}
           onOpenChange={setShowAPIKeysDialog}
         />
+        <TutorialsDialog
+          open={showTutorialsDialog}
+          onOpenChange={setShowTutorialsDialog}
+          selectedTutorial={selectedTutorial}
+          namespace={namespace}
+          onFileUpload={(file: File) =>
+            setFiles((prevFiles) => [...prevFiles, file])
+          }
+          setCurrentFile={setCurrentFile}
+          setOperations={setOperations}
+          setPipelineName={setPipelineName}
+          setSampleSize={setSampleSize}
+          setDefaultModel={setDefaultModel}
+          setFiles={setFiles}
+          currentFile={currentFile}
+          files={files}
+        />
       </div>
     </BookmarkProvider>
   );

website/src/app/types.ts

@@ -1,8 +1,9 @@
 export type File = {
   name: string;
   path: string;
-  type: "json" | "document";
+  type: "json" | "document" | "pipeline-yaml";
   parentFolder?: string;
+  blob?: Blob;
 };
 
 export type Operation = {

website/src/components/FileExplorer.tsx

@@ -54,6 +54,7 @@ import {
   TooltipTrigger,
 } from "./ui/tooltip";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useDatasetUpload } from "@/hooks/useDatasetUpload";
 
 interface FileExplorerProps {
   files: File[];
@@ -211,12 +212,17 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
   const [draggedFiles, setDraggedFiles] = useState<number>(0);
   const [viewingDocument, setViewingDocument] = useState<File | null>(null);
   const [folderToDelete, setFolderToDelete] = useState<string | null>(null);
-  const [uploadingFiles, setUploadingFiles] = useState<Set<string>>(new Set());
   const [conversionMethod, setConversionMethod] =
     useState<ConversionMethod>("local");
   const [azureEndpoint, setAzureEndpoint] = useState("");
   const [azureKey, setAzureKey] = useState("");
 
+  const { uploadingFiles, uploadDataset } = useDatasetUpload({
+    namespace,
+    onFileUpload,
+    setCurrentFile,
+  });
+
   // Group files by folder
   const groupedFiles = files.reduce((acc: { [key: string]: File[] }, file) => {
     const folder = file.parentFolder || "root";
@@ -243,73 +249,13 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
       console.log("No file selected");
       return;
     }
-
-    if (!uploadedFile.name.toLowerCase().endsWith(".json")) {
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Please upload a JSON file",
-      });
-      return;
-    }
-
-    // Add loading indicator immediately
-    toast({
-      title: "Uploading dataset...",
-      description: "This may take a few seconds",
-    });
-
-    // Add to uploading files set to show spinner in file list
-    setUploadingFiles((prev) => new Set(prev).add(uploadedFile.name));
-
-    try {
-      // Validate JSON structure before uploading
-      await validateJsonDataset(uploadedFile);
-
-      const formData = new FormData();
-      formData.append("file", uploadedFile);
-      formData.append("namespace", namespace);
-
-      const response = await fetch("/api/uploadFile", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (!response.ok) {
-        throw new Error("Upload failed");
-      }
-
-      const data = await response.json();
-
-      const newFile = {
-        name: uploadedFile.name,
-        path: data.path,
-        type: "json" as const,
-        parentFolder: "root",
-      };
-
-      onFileUpload(newFile);
-      setCurrentFile(newFile);
-
-      toast({
-        title: "Success",
-        description: "Dataset uploaded successfully",
-      });
-    } catch (error) {
-      console.error(error);
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description:
-          error instanceof Error ? error.message : "Failed to upload file",
-      });
-    } finally {
-      setUploadingFiles((prev) => {
-        const next = new Set(prev);
-        next.delete(uploadedFile.name);
-        return next;
-      });
-    }
+    const fileToUpload: File = {
+      name: uploadedFile.name,
+      path: uploadedFile.name,
+      type: "json",
+      blob: uploadedFile,
+    };
+    await uploadDataset(fileToUpload);
   };
 
   const handleFileSelection = (file: File) => {