feat: elysia youtube poc with api-key docs and simplified typed client

Author: arpitgupta1214

app/api/[...slug]/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest } from "next/server";
+import { elysiaApi } from "@/lib/api/elysia/app";
+
+async function handle(request: NextRequest): Promise<Response> {
+  return elysiaApi.handle(request);
+}
+
+export const GET = handle;
+export const POST = handle;
+export const PUT = handle;
+export const PATCH = handle;
+export const DELETE = handle;
+export const HEAD = handle;
+export const OPTIONS = handle;
+
+export const dynamic = "force-dynamic";
+export const fetchCache = "force-no-store";
+export const revalidate = 0;

app/api/agent-templates/favorites/route.ts

@@ -1,22 +1,19 @@
-import { useUserProvider } from "@/providers/UserProvder";
 import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import type { ToggleFavoriteRequest } from "@/types/AgentTemplates";
 
 export function useAgentToggleFavorite() {
-  const { userData } = useUserProvider();
   const queryClient = useQueryClient();
 
   const handleToggleFavorite = async (
     templateId: string,
     nextFavourite: boolean
   ) => {
-    if (!userData?.id || !templateId) return;
+    if (!templateId) return;
 
     try {
       const body: ToggleFavoriteRequest = {
         templateId,
-        userId: userData.id,
         isFavourite: nextFavourite,
       };
       const res = await fetch("/api/agent-templates/favorites", {

app/api/youtube/channel-info/route.ts

@@ -6,7 +6,7 @@ import { Youtube } from "lucide-react";
 const ChannelInfo = ({ dense, artistAccountId }: { dense?: boolean; artistAccountId: string }) => {
   const { data, isLoading } = useYoutubeChannel(artistAccountId);
 
-  const channel = data?.channels?.[0];
+  const channel = data?.[0];
 
   return (
       <div className="flex flex-col gap-1 cursor-pointer">

components/Agents/useAgentToggleFavorite.ts

@@ -14,7 +14,7 @@ const ChatInputYoutubeButtonPopover = ({ children, artistAccountId }: { children
   const { data: channelInfo, isLoading: isChannelInfoLoading } = useYoutubeChannel(artistAccountId);
   const isMobile = useIsMobile();
   const [isOpen, setIsOpen] = useState(false);
-  const channel = channelInfo?.channels?.[0];
+  const channel = channelInfo?.[0];
 
   if (youtubeStatus?.status === "invalid" || isLoading || isChannelInfoLoading) {
     return children;

components/ArtistSetting/StandaloneYoutubeComponent/ChannelInfo.tsx

@@ -45,8 +45,10 @@ export function useYouTubeLoginSuccess() {
     hasCheckedOAuth.current = true;
 
     if (selectedArtist?.account_id) {
-      fetchYouTubeChannel(selectedArtist.account_id).then((youtubeChannel) => {
-        if (youtubeChannel.success) {
+      const checkYouTubeConnection = async () => {
+        try {
+          await fetchYouTubeChannel(selectedArtist.account_id);
+
           const successMessage = {
             id: generateUUID(),
             role: "user" as const,
@@ -59,8 +61,12 @@ export function useYouTubeLoginSuccess() {
           } as UIMessage;
 
           append(successMessage);
+        } catch {
+          // Ignore auth/check errors here; normal flow continues.
         }
-      });
+      };
+
+      void checkYouTubeConnection();
     }
   }, [messages, append, selectedArtist?.account_id]);
 }

components/YouTube/ChatInputYoutubeButtonPopover/index.tsx

@@ -1,9 +1,8 @@
-import fetchYouTubeChannel from "@/lib/youtube/fetchYouTubeChannel";
-import { YouTubeChannelResponse } from "@/types/youtube";
 import { useQuery } from "@tanstack/react-query";
+import fetchYouTubeChannel from "@/lib/youtube/fetchYouTubeChannel";
 
 const useYoutubeChannel = (artistAccountId: string) => {
-  return useQuery<YouTubeChannelResponse>({
+  return useQuery({
     queryKey: ["youtube-channel-info", artistAccountId],
     queryFn: () => fetchYouTubeChannel(artistAccountId),
     enabled: !!artistAccountId, // Only run query if artistAccountId is provided

hooks/useYouTubeLoginSuccess.ts

@@ -13,10 +13,8 @@ const useYoutubeStatus = (artistAccountId?: string) => {
         status: (() => {
           if (error) return "error";
           if (isLoading) return "invalid";
-          if (channelResponse) {
-            return channelResponse.tokenStatus === "valid"
-              ? "valid"
-              : "invalid";
+          if (Array.isArray(channelResponse) && channelResponse.length > 0) {
+            return "valid";
           }
           return "invalid";
         })(),
@@ -27,7 +25,7 @@ const useYoutubeStatus = (artistAccountId?: string) => {
   return {
     data,
     isLoading,
-    error: null,
+    error: error ?? null,
   } as YoutubeStatus;
 };
 

hooks/useYoutubeChannel.tsx

@@ -0,0 +1,32 @@
+import { Elysia } from "elysia";
+import { openapi } from "@elysiajs/openapi";
+import { authPlugin } from "@/lib/api/elysia/plugins/auth";
+import { elysiaRoutes } from "@/lib/api/elysia/routes";
+
+export const elysiaApi = new Elysia({ prefix: "/api" })
+  .use(
+    openapi({
+      path: "/openapi",
+      specPath: "/openapi/json",
+      provider: "scalar",
+      documentation: {
+        info: {
+          title: "Recoupable Chat API (Elysia POC)",
+          version: "0.1.0",
+        },
+        components: {
+          securitySchemes: {
+            apiKeyAuth: {
+              type: "apiKey",
+              in: "header",
+              name: "x-api-key",
+            },
+          },
+        },
+      },
+    }),
+  )
+  .use(authPlugin)
+  .use(elysiaRoutes);
+
+export type ElysiaApi = typeof elysiaApi;