Whishper works, that was easy

src/app/actions.ts

@@ -3,7 +3,7 @@
 import { db } from "@/server/db";
 import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
-import type { PaperlessDocumentsType } from "@/types";
+import type { PaperlessDocumentsType, WhishperRecordingsType } from "@/types";
 import { auth } from "@clerk/nextjs/server";
 
 /*
@@ -95,18 +95,11 @@ export async function getWhishperRecordings(query: string) {
 
   if (!query || query == "null" || query.length < 3 || !userData) return null;
 
-  const response = await fetch(
-    `${userData.whishperURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    },
-  );
+  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
 
-  const data = (await response.json()) as PaperlessDocumentsType;
+  const data = (await response.json()) as WhishperRecordingsType;
+
+  console.log(data)
 
   return data;
 }

src/app/paperless/page.tsx

@@ -130,7 +130,7 @@ function DocumentsPage() {
 
   const paperlessDocumentMap = PaperlessDocuments.data.results;
 
-  if (paperlessDocumentMap.length === 0) {
+  if (!paperlessDocumentMap ?? paperlessDocumentMap.length === 0) {
     return <h1 className="text-2xl font-bold">No results!</h1>;
   }
 
@@ -164,7 +164,9 @@ export default function PaperlessPage() {
         </SignedOut>
         <SignedIn>
           <div className="flex w-full flex-col gap-8">
-            <DocumentsSearch />
+            <div className="flex w-full justify-center">
+              <DocumentsSearch />
+            </div>
             <div className="w-full">
               <QueryClientProvider client={queryClient}>
                 <DocumentsPage />

src/app/settings/page.tsx

@@ -171,6 +171,70 @@ function PaperlessToken({ setActiveTab, userData }: FormProps) {
   );
 }
 
+function WhishperURL({ setActiveTab, userData }: FormProps) {
+  const [isAutofilled, setIsAutofilled] = useState(false);
+  const formSchema = z.object({
+    URL: z.string(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      URL: "",
+    },
+  });
+
+  if (userData.whishperURL && !isAutofilled) {
+    form.setValue("URL", userData.whishperURL);
+    setIsAutofilled(true);
+  }
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (values.URL == "") {
+      setActiveTab((prevTab) => prevTab + 2); // Skip api key form
+    } else {
+      setActiveTab((prevTab) => prevTab + 1); // Increment activeTab
+    }
+    try {
+      await setUserProperty("whishperURL", values.URL);
+      // Operation succeeded, show success toast
+      toast("Your whishper URL preferences was saved");
+      // Optionally, move to a new tab or take another action to indicate success
+    } catch {
+      // Operation failed, show error toast
+      toast("Uh oh! Something went wrong.", {
+        description: "Your whishper URL preferences were not saved.",
+        action: {
+          label: "Go back",
+          onClick: () => setActiveTab((prevTab) => prevTab - 1), // Go back to try again
+        },
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-64 space-y-4">
+        <FormField
+          control={form.control}
+          name="URL"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Whishper URL</FormLabel>
+              <FormControl>
+                <Input type="url" {...field} />
+              </FormControl>
+              <FormDescription>Leave empty to disable</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+
 interface ProgressIndicatorProps {
   activeTab: number;
   totalTabs: number;
@@ -227,6 +291,11 @@ export function Forms() {
       setActiveTab={setActiveTab}
       userData={userData}
     />,
+    <WhishperURL
+      key="paperlessToken"
+      setActiveTab={setActiveTab}
+      userData={userData}
+    />,
   ];
   return (
     <>

src/app/whishper/page.tsx

@@ -17,9 +17,30 @@ import { Input } from "@/components/ui/input";
 import Link from "next/link";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { getUserData, getWhishperRecordings } from "../actions";
+import {
+  useQuery,
+  QueryClientProvider,
+  QueryClient,
+} from "@tanstack/react-query";
+import { getUserData } from "../actions";
 import LoadingSpinner from "@/components/loading-spinner";
+import { WhishperRecordingsType } from "@/types";
+
+async function getWhishperRecordings(query: string) {
+  const userData = await getUserData();
+
+  if (!query || query == "null" || query.length < 3 || !userData) return null;
+
+  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
+
+  const data = (await response.json()) as WhishperRecordingsType;
+
+  console.log(data);
+
+  return data;
+}
+
+const queryClient = new QueryClient();
 
 function SearchForm() {
   const formSchema = z.object({
@@ -100,20 +121,24 @@ function RecordingsList() {
     },
   });
 
+  if (!userData.data?.whishperURL) {
+    return (
+      <h1 className="text-2xl font-bold">
+        You need to set your whishper url in{" "}
+        <Link href="/settings">settings</Link>
+      </h1>
+    );
+  }
+
   if (!query) {
     return <h1 className="text-2xl font-bold">Start Searching!</h1>;
   }
 
   if (WhishperRecordings.isLoading || userData.isLoading) {
     return <LoadingSpinner>Loading...</LoadingSpinner>;
-  } else if (!userData.data?.whishperURL) {
-    return (
-      <h1 className="text-2xl font-bold">
-        You need to set your paperless url in{" "}
-        <Link href="/settings">settings</Link>
-      </h1>
-    );
-  } else if (!WhishperRecordings.data || WhishperRecordings.error) {
+  }
+
+  if (!WhishperRecordings.data || WhishperRecordings.error) {
     return (
       <h1 className="text-2xl font-bold">
         Connection failed! Check that the whishper url is set correctly in{" "}
@@ -122,9 +147,9 @@ function RecordingsList() {
     );
   }
 
-  const WhishperRecordingsMap = WhishperRecordings.data.results;
+  const WhishperRecordingsMap = WhishperRecordings.data;
 
-  if (WhishperRecordingsMap.length === 0) {
+  if (!WhishperRecordingsMap ?? WhishperRecordingsMap.length === 0) {
     return <h1 className="text-2xl font-bold">No results!</h1>;
   }
 
@@ -134,12 +159,12 @@ function RecordingsList() {
       <ul className="list-disc">
         {WhishperRecordingsMap.map((recording, index) => (
           <li className="underline" key={index}>
-            <Link
+            <a
               className="underline hover:text-slate-300"
-              href={`/paperless/document/${recording.id}?query=${query}`}
+              href={`${userData.data?.whishperURL}/editor/${recording.id}`}
             >
-              {recording.title}
-            </Link>
+              {recording.fileName.split("_WHSHPR_")[1]}
+            </a>
           </li>
         ))}
       </ul>
@@ -157,7 +182,16 @@ export default function WhishperPage() {
           </div>
         </SignedOut>
         <SignedIn>
-          <SearchForm />
+          <div className="flex w-full flex-col gap-8">
+            <div className="flex w-full justify-center">
+              <SearchForm />
+            </div>
+            <div className="w-full">
+              <QueryClientProvider client={queryClient}>
+                <RecordingsList />
+              </QueryClientProvider>
+            </div>
+          </div>
         </SignedIn>
       </div>
     </main>

src/types/index.ts

@@ -67,3 +67,33 @@ export type PaperlessDocumentsType = {
     };
   }[];
 };
+
+export type WhishperRecordingsType = {
+  id: string;
+  status: number;
+  language: string;
+  modelSize: string;
+  task: string;
+  device: string;
+  fileName: string;
+  sourceUrl: string;
+  result: {
+    language: string;
+    duration: number;
+    segments: {
+      end: number;
+      id: string;
+      start: number;
+      score: number;
+      text: string;
+      words: {
+        end: number;
+        start: number;
+        word: string;
+        score: number;
+      }[];
+    }[];
+    text: string;
+  };
+  translations: [];
+}[];