Implement WebGPU detection and integrate Kokoro TTS worker; update TypeScript config and add accordion component

app/dashboard/documents/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { AppSidebar } from "@/components/app-sidebar";
+import KokoroReader from "@/components/KokoroReader";
 import { NavActions } from "@/components/nav-actions";
 import {
   Breadcrumb,
@@ -6,6 +7,12 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import {
   SidebarInset,
@@ -13,6 +20,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { createClient } from "@/utils/supabase/server";
+import { Speech } from "lucide-react";
 import { redirect } from "next/navigation";
 import { remark } from "remark";
 import remarkHtml from "remark-html";
@@ -96,7 +104,7 @@ export default async function DocumentPage({
             </Breadcrumb>
           </div>
           <div className="ml-auto px-3">
-            <NavActions />
+            <NavActions pages={pages} />
           </div>
         </header>
         <div
@@ -104,6 +112,7 @@ export default async function DocumentPage({
                     text-white
                     prose-h1:font-semibold prose-h1:text-2xl prose-h1:mb-4 prose-h1:text-white
                     prose-h2:font-medium prose-h2:text-xl prose-h2:mb-3 prose-h2:text-white
+                    prose-h4:font-medium prose-h4:text-lg prose-h4:mb-2 prose-h4:text-gray-300
                     prose-a:text-blue-400 hover:prose-a:underline
                     prose-p:leading-7 prose-p:text-gray-200
                     prose-blockquote:italic prose-blockquote:border-l-4 prose-blockquote:pl-4 prose-blockquote:border-gray-600 prose-blockquote:text-gray-300

app/dashboard/page.tsx

@@ -26,9 +26,33 @@ export default async function Page() {
     return redirect("/login");
   }
 
+  const { data: documents, error } = await supabase
+    .from("documents")
+    .select("*")
+    .eq("owner", user.id)
+    .order("created_at", { ascending: false });
+
+  if (error) {
+    console.error("Failed to fetch documents:", error);
+    // Optionally handle the error, e.g., show a message to the user
+    return (
+      <div className="p-4">
+        <p className="text-red-600">Failed to load documents.</p>
+      </div>
+    );
+  }
+
   return (
     <SidebarProvider>
-      <AppSidebar />
+      <AppSidebar
+        documents={documents.map((d) => {
+          return {
+            name: d.file_name,
+            url: `/dashboard/documents/${d.id}`,
+            emoji: "📄",
+          };
+        })}
+      />
       <SidebarInset>
         <header className="flex h-14 shrink-0 items-center gap-2">
           <div className="flex flex-1 items-center gap-2 px-3">
@@ -40,8 +64,8 @@ export default async function Page() {
             <Breadcrumb>
               <BreadcrumbList>
                 <BreadcrumbItem>
-                  <BreadcrumbPage className="line-clamp-1">
+                  <BreadcrumbPage className="line-clamp-1 text-muted-foreground">
-                    Project Management & Task Tracking
+                    Select a document...
                   </BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>

components/KokoroReader.tsx

@@ -0,0 +1,175 @@
+"use client";
+import { useRef, useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Play } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./ui/accordion";
+import { Label } from "./ui/label";
+
+export default function KokoroReader({ pages }: { pages: any[] }) {
+  // Create a reference to the worker object.
+  const worker = useRef<Worker>(null);
+
+  const [inputText, setInputText] = useState(
+    "Life is like a box of chocolates. You never know what you're gonna get."
+  );
+  const [selectedSpeaker, setSelectedSpeaker] = useState("af_heart");
+
+  const [voices, setVoices] = useState<any[]>([]);
+  const [status, setStatus] = useState<"ready" | "running" | null>(null);
+  const [error, setError] = useState(null);
+  const [loadingMessage, setLoadingMessage] = useState("Loading...");
+
+  const [results, setResults] = useState<{ text: string; src: string }[]>([]);
+
+  // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
+  useEffect(() => {
+    // Create the worker if it does not yet exist.
+    console.log("Initializing worker...");
+    worker.current ??= new Worker("/workers/kokoro-worker.js", {
+      type: "module",
+    });
+
+    console.log("Worker initialized");
+
+    // Create a callback function for messages from the worker thread.
+    const onMessageReceived = (e: any) => {
+      switch (e.data.status) {
+        case "device":
+          setLoadingMessage(`Loading model (device="${e.data.device}")`);
+          break;
+        case "ready":
+          setStatus("ready");
+          setVoices(e.data.voices);
+          break;
+        case "error":
+          setError(e.data.data);
+          break;
+        case "complete":
+          const { audio, text } = e.data;
+          // Generation complete: re-enable the "Generate" button
+          setResults((prev) => [{ text, src: audio }, ...prev]);
+          setStatus("ready");
+          break;
+      }
+    };
+
+    console.log("onmessagereceived");
+
+    const onErrorReceived = (e: any) => {
+      console.error("Worker error:", e);
+      setError(e.message);
+    };
+
+    console.log("Attaching event listeners to worker");
+
+    // Attach the callback function as an event listener.
+    worker.current.addEventListener("message", onMessageReceived);
+    worker.current.addEventListener("error", onErrorReceived);
+
+    console.log(worker.current);
+    // Define a cleanup function for when the component is unmounted.
+    return () => {
+      worker.current!.removeEventListener("message", onMessageReceived);
+      worker.current!.removeEventListener("error", onErrorReceived);
+    };
+  }, []);
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    setStatus("running");
+
+    worker.current!.postMessage({
+      type: "generate",
+      text: inputText.trim(),
+      voice: selectedSpeaker,
+    });
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center pt-4 relative overflow-hidden font-sans">
+      <div className="max-w-3xl w-full relative z-[2]">
+        <div className="items-center justify-center text-center">
+          <Button variant="ghost" size="icon" className="h-10 w-10">
+            <Play />
+          </Button>
+        </div>
+
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger className="text-white pb-2">
+              Settings
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <Label>Voice</Label>
+              <select
+                value={selectedSpeaker}
+                onChange={(e) => setSelectedSpeaker(e.target.value)}
+                className="w-full bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-md text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                {Object.entries(voices).map(([id, voice]) => (
+                  <option key={id} value={id}>
+                    {voice.name} (
+                    {voice.language === "en-us" ? "American" : "British"}{" "}
+                    {voice.gender})
+                  </option>
+                ))}
+              </select>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+      {/* <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <textarea
+              placeholder="Enter text..."
+              value={inputText}
+              onChange={(e) => setInputText(e.target.value)}
+              className="w-full min-h-[100px] max-h-[300px] bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-xl resize-y text-gray-100 placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              rows={Math.min(8, inputText.split("\n").length)}
+            />
+            <div className="flex flex-col items-center space-y-4">
+              <select
+                value={selectedSpeaker}
+                onChange={(e) => setSelectedSpeaker(e.target.value)}
+                className="w-full bg-gray-700/50 backdrop-blur-sm border-2 border-gray-600 rounded-xl text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              >
+                {Object.entries(voices).map(([id, voice]) => (
+                  <option key={id} value={id}>
+                    {voice.name} (
+                    {voice.language === "en-us" ? "American" : "British"}{" "}
+                    {voice.gender})
+                  </option>
+                ))}
+              </select>
+              <button
+                type="submit"
+                className="inline-flex justify-center items-center px-6 py-2 text-lg font-semibold bg-gradient-to-t from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-colors duration-300 rounded-xl text-white disabled:opacity-50"
+                disabled={status === "running" || inputText.trim() === ""}
+              >
+                {status === "running" ? "Generating..." : "Generate"}
+              </button>
+            </div>
+          </form>
+        </div> */}
+
+      {results.map((result, i) => (
+        <div key={i}>
+          <div className="text-white bg-gray-800/70 backdrop-blur-sm border border-gray-700 rounded-lg p-4 z-10">
+            <span className="absolute right-5 font-bold">
+              #{results.length - i}
+            </span>
+            <p className="mb-3 max-w-[95%]">{result.text}</p>
+            <audio controls src={result.src} className="w-full">
+              Your browser does not support the audio element.
+            </audio>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

components/nav-actions.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   ArrowDown,
   ArrowUp,
@@ -14,17 +14,18 @@ import {
   Link,
   MoreHorizontal,
   Settings2,
+  Speech,
   Star,
   Trash,
   Trash2,
-} from "lucide-react"
+} from "lucide-react";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/components/ui/popover";
 import {
   Sidebar,
   SidebarContent,
@@ -33,7 +34,8 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
+import KokoroReader from "./KokoroReader";
 
 const data = [
   [
@@ -96,20 +98,30 @@ const data = [
       icon: ArrowDown,
     },
   ],
-]
+];
 
-export function NavActions() {
+export function NavActions({ pages }: { pages: any[] }) {
-  const [isOpen, setIsOpen] = React.useState(false)
+  const [isOpen, setIsOpen] = React.useState(false);
 
   React.useEffect(() => {
-    setIsOpen(true)
+    setIsOpen(true);
-  }, [])
+  }, []);
 
   return (
     <div className="flex items-center gap-2 text-sm">
-      <div className="text-muted-foreground hidden font-medium md:inline-block">
+      {/* <div className="text-muted-foreground hidden font-medium md:inline-block">
         Edit Oct 08
-      </div>
+      </div> */}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Speech />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <KokoroReader pages={pages} />
+        </PopoverContent>
+      </Popover>
       <Button variant="ghost" size="icon" className="h-7 w-7">
         <Star />
       </Button>
@@ -149,5 +161,5 @@ export function NavActions() {
         </PopoverContent>
       </Popover>
     </div>
-  )
+  );
 }

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

lib/utils.ts

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export async function detectWebGPU() {
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    return !!adapter;
+  } catch (e) {
+    return false;
+  }
+}

next.config.ts

@@ -2,6 +2,20 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.module.rules.push({
+        test: /kokoro-worker\.js$/,
+        use: { loader: "worker-loader" },
+      });
+    }
+
+    config.module.rules.push({
+      test: /\.js$/,
+      loader: "@open-wc/webpack-import-meta-loader",
+    });
+    return config;
+  },
 };
 
 export default nextConfig;

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@ai-sdk/mistral": "^1.2.3",
     "@mistralai/mistralai": "^1.5.2",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -26,6 +27,7 @@
     "autoprefixer": "10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "kokoro-js": "^1.2.0",
     "lucide-react": "^0.486.0",
     "next": "latest",
     "next-themes": "^0.4.3",
@@ -38,6 +40,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@open-wc/webpack-import-meta-loader": "^0.4.7",
     "@types/node": "22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "19.0.2",
@@ -46,6 +49,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^4.1.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "worker-loader": "^3.0.8"
   }
 }

public/workers/kokoro-worker.js

@@ -0,0 +1,49 @@
+console.log("Initializing Kokoro TTS Worker");
+
+import { KokoroTTS } from "https://cdn.jsdelivr.net/npm/kokoro-js@1.2.0/+esm";
+async function detectWebGPU() {
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    return !!adapter;
+  } catch (e) {
+    return false;
+  }
+}
+// Device detection
+const device = (await detectWebGPU()) ? "webgpu" : "wasm";
+self.postMessage({ status: "device", device });
+
+console.log(`Detected device: ${device}`);
+
+// Load the model
+const model_id = "onnx-community/Kokoro-82M-v1.0-ONNX";
+const tts = await KokoroTTS.from_pretrained(model_id, {
+  dtype: device === "wasm" ? "q8" : "fp32",
+  device,
+});
+
+console.log("Kokoro TTS model loaded successfully");
+
+self.postMessage({ status: "ready", voices: tts.voices, device });
+
+console.log("Available voices:", tts.voices);
+
+// Listen for messages from the main thread
+self.addEventListener("message", async (e) => {
+  const { text, voice } = e.data;
+
+  try {
+    // Generate speech
+    const audio = await tts.generate(text, { voice });
+
+    // Send the audio file back to the main thread
+    const blob = audio.toBlob();
+    self.postMessage({
+      status: "complete",
+      audio: URL.createObjectURL(blob),
+      text,
+    });
+  } catch (error) {
+    self.postMessage({ status: "error", error: error.message });
+  }
+});

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -23,6 +23,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "public/kokoro-worker.js"
+  ],
   "exclude": ["node_modules"]
 }