feat: add Google Drive integration via Composio

components/VercelChat/ToolComponents.tsx

@@ -103,6 +103,8 @@ import {
 } from "./tools/files/UpdateFileResult";
 import GoogleSheetsLoginResult from "./tools/googleSheets/GoogleSheetsLoginResult";
 import GoogleSheetsLoginLoading from "./tools/googleSheets/GoogleSheetsLoginLoading";
+import GoogleDriveLoginResult from "./tools/googleDrive/GoogleDriveLoginResult";
+import GoogleDriveLoginLoading from "./tools/googleDrive/GoogleDriveLoginLoading";
 import { TextContent } from "@modelcontextprotocol/sdk/types.js";
 
 type CallToolResult = {
@@ -283,6 +285,12 @@ export function getToolCallComponent(part: ToolUIPart) {
         <GoogleSheetsLoginLoading />
       </div>
     );
+  } else if (toolName === "googleDriveLoginTool") {
+    return (
+      <div key={toolCallId}>
+        <GoogleDriveLoginLoading />
+      </div>
+    );
   }
 
   // Default for other tools
@@ -548,6 +556,12 @@ export function getToolResultComponent(part: ToolUIPart | DynamicToolUIPart) {
         <GoogleSheetsLoginResult />
       </div>
     );
+  } else if (toolName === "googleDriveLoginTool") {
+    return (
+      <div key={toolCallId}>
+        <GoogleDriveLoginResult />
+      </div>
+    );
   }
 
   // Default generic result for other tools

components/VercelChat/tools/composio/ComposioLoginLoading.tsx

@@ -0,0 +1,18 @@
+import { Loader } from "lucide-react";
+
+interface ComposioLoginLoadingProps {
+  toolkitName: string;
+}
+
+export function ComposioLoginLoading({
+  toolkitName,
+}: ComposioLoginLoadingProps) {
+  return (
+    <div className="flex items-center gap-1 py-1 px-2 bg-muted/50 rounded-sm border border-border w-fit text-xs text-muted-foreground">
+      <Loader className="h-3 w-3 animate-spin text-foreground" />
+      <span>Initializing {toolkitName} login...</span>
+    </div>
+  );
+}
+
+export default ComposioLoginLoading;

components/VercelChat/tools/composio/ComposioLoginResult.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import { LucideIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useUserProvider } from "@/providers/UserProvder";
+import AccountIdDisplay from "@/components/ArtistSetting/AccountIdDisplay";
+
+interface ComposioLoginResultProps {
+  toolkitName: string;
+  description: string;
+  icon: LucideIcon;
+  buttonColor: string;
+  isLoading: boolean;
+  onLogin: () => void;
+}
+
+export function ComposioLoginResult({
+  toolkitName,
+  description,
+  icon: Icon,
+  buttonColor,
+  isLoading,
+  onLogin,
+}: ComposioLoginResultProps) {
+  const { userData } = useUserProvider();
+  const accountId = userData?.account_id;
+
+  return (
+    <div className="flex flex-col space-y-3 p-4 rounded-lg bg-muted border border-border my-2 max-w-md">
+      <div className="flex items-center space-x-2">
+        <Icon className="h-5 w-5 text-muted-foreground" />
+        <span className="font-medium text-foreground">
+          {toolkitName} Access Required
+        </span>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Connect your {toolkitName} account to enable {description}.
+      </p>
+
+      {accountId && <AccountIdDisplay accountId={accountId} label="Account" />}
+
+      <Button
+        onClick={onLogin}
+        className={`w-full ${buttonColor} text-white`}
+        size="sm"
+        disabled={isLoading || !accountId}
+      >
+        {isLoading ? (
+          <span>Connecting...</span>
+        ) : (
+          <>
+            <Icon className="h-4 w-4 mr-2" />
+            Connect {toolkitName}
+          </>
+        )}
+      </Button>
+
+      <p className="text-xs text-muted-foreground text-center">
+        You&apos;ll be redirected to Google to authorize access to your{" "}
+        {toolkitName} for this account.
+      </p>
+    </div>
+  );
+}
+
+export default ComposioLoginResult;

components/VercelChat/tools/googleDrive/GoogleDriveLoginLoading.tsx

@@ -0,0 +1,7 @@
+import { ComposioLoginLoading } from "../composio/ComposioLoginLoading";
+
+export function GoogleDriveLoginLoading() {
+  return <ComposioLoginLoading toolkitName="Google Drive" />;
+}
+
+export default GoogleDriveLoginLoading;

components/VercelChat/tools/googleDrive/GoogleDriveLoginResult.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { HardDrive } from "lucide-react";
+import { useGoogleDriveLogin } from "@/hooks/useGoogleDriveLogin";
+import { ComposioLoginResult } from "../composio/ComposioLoginResult";
+
+export function GoogleDriveLoginResult() {
+  const { isLoading, handleLogin } = useGoogleDriveLogin();
+
+  return (
+    <ComposioLoginResult
+      toolkitName="Google Drive"
+      description="uploading, downloading, and managing files"
+      icon={HardDrive}
+      buttonColor="bg-blue-600 hover:bg-blue-700"
+      isLoading={isLoading}
+      onLogin={handleLogin}
+    />
+  );
+}
+
+export default GoogleDriveLoginResult;

components/VercelChat/tools/googleSheets/GoogleSheetsLoginLoading.tsx

@@ -1,12 +1,7 @@
-import { Loader } from "lucide-react";
+import { ComposioLoginLoading } from "../composio/ComposioLoginLoading";
 
 export function GoogleSheetsLoginLoading() {
-  return (
-    <div className="flex items-center gap-1 py-1 px-2 bg-muted/50 rounded-sm border border-border w-fit text-xs text-muted-foreground">
-      <Loader className="h-3 w-3 animate-spin text-foreground" />
-      <span>Initializing Google Sheets login...</span>
-    </div>
-  );
+  return <ComposioLoginLoading toolkitName="Google Sheets" />;
 }
 
 export default GoogleSheetsLoginLoading;

components/VercelChat/tools/googleSheets/GoogleSheetsLoginResult.tsx

@@ -1,56 +1,21 @@
 "use client";
 
-import React from "react";
 import { FileSpreadsheet } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useUserProvider } from "@/providers/UserProvder";
-import AccountIdDisplay from "@/components/ArtistSetting/AccountIdDisplay";
 import { useGoogleSheetsLogin } from "@/hooks/useGoogleSheetsLogin";
+import { ComposioLoginResult } from "../composio/ComposioLoginResult";
 
 export function GoogleSheetsLoginResult() {
-  const { userData } = useUserProvider();
-  const accountId = userData?.account_id;
   const { isLoading, handleLogin } = useGoogleSheetsLogin();
 
   return (
-    <div className="flex flex-col space-y-3 p-4 rounded-lg bg-muted border border-border my-2 max-w-md">
-      <div className="flex items-center space-x-2">
-        <FileSpreadsheet className="h-5 w-5 text-muted-foreground" />
-        <span className="font-medium text-foreground">
-          Google Sheets Access Required
-        </span>
-      </div>
-
-      <p className="text-sm text-muted-foreground">
-        Connect your Google Sheets account to enable reading and writing to
-        spreadsheets.
-      </p>
-
-      {accountId && <AccountIdDisplay accountId={accountId} label="Account" />}
-
-      <Button
-        onClick={handleLogin}
-        className="w-full bg-green-600 hover:bg-green-700 text-white"
-        size="sm"
-        disabled={isLoading || !accountId}
-      >
-        {isLoading ? (
-          <>
-            <span className="mr-2">Connecting...</span>
-          </>
-        ) : (
-          <>
-            <FileSpreadsheet className="h-4 w-4 mr-2" />
-            Connect Google Sheets
-          </>
-        )}
-      </Button>
-
-      <p className="text-xs text-muted-foreground text-center">
-        You&apos;ll be redirected to Google to authorize access to your Google
-        Sheets for this account.
-      </p>
-    </div>
+    <ComposioLoginResult
+      toolkitName="Google Sheets"
+      description="reading and writing to spreadsheets"
+      icon={FileSpreadsheet}
+      buttonColor="bg-green-600 hover:bg-green-700"
+      isLoading={isLoading}
+      onLogin={handleLogin}
+    />
   );
 }
 

hooks/useComposioLogin.ts

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { useUserProvider } from "@/providers/UserProvder";
+import { useVercelChatContext } from "@/providers/VercelChatProvider";
+import getLatestUserMessageText from "@/lib/messages/getLatestUserMessageText";
+import { fetchConnectedAccountsRefresh } from "@/lib/composio/fetchConnectedAccountsRefresh";
+import {
+  ComposioToolkitKey,
+  getToolkitConfig,
+} from "@/lib/composio/toolkits";
+import { toast } from "sonner";
+
+/**
+ * Hook for handling Composio toolkit login.
+ *
+ * @param toolkitKey - The toolkit to login to (e.g., "GOOGLE_SHEETS", "GOOGLE_DRIVE")
+ */
+export function useComposioLogin(toolkitKey: ComposioToolkitKey) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { userData } = useUserProvider();
+  const { messages } = useVercelChatContext();
+  const accountId = userData?.account_id as string;
+  const config = getToolkitConfig(toolkitKey);
+
+  const handleLogin = async () => {
+    const latestUserMessageText = getLatestUserMessageText(messages);
+    // Use current origin so it works in both local dev and production
+    const baseUrl = typeof window !== "undefined" ? window.location.origin : "https://chat.recoupable.com";
+    const redirectUrl = `${baseUrl}?q=${encodeURIComponent(
+      latestUserMessageText
+    )}`;
+
+    setIsLoading(true);
+
+    try {
+      const data = await fetchConnectedAccountsRefresh(toolkitKey, {
+        accountId,
+        redirectUrl,
+      });
+
+      if (data.redirect_url) {
+        // Use location.href instead of window.open to avoid popup blocker
+        // since this is called after an async operation
+        window.location.href = data.redirect_url;
+      }
+    } catch (error) {
+      toast.error(
+        `Failed to initiate ${config.name} login. Please try again.`
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    isLoading,
+    handleLogin,
+    toolkitName: config.name,
+  };
+}

hooks/useGoogleDriveLogin.ts

@@ -0,0 +1,8 @@
+import { useComposioLogin } from "./useComposioLogin";
+
+/**
+ * Hook for Google Drive login.
+ */
+export function useGoogleDriveLogin() {
+  return useComposioLogin("GOOGLE_DRIVE");
+}

hooks/useGoogleSheetsLogin.ts

@@ -1,43 +1,8 @@
-import { useState } from "react";
-import { useUserProvider } from "@/providers/UserProvder";
-import { useVercelChatContext } from "@/providers/VercelChatProvider";
-import getLatestUserMessageText from "@/lib/messages/getLatestUserMessageText";
-import { fetchConnectedAccountsRefresh } from "@/lib/composio/googleSheets/fetchConnectedAccountsRefresh";
-import { toast } from "sonner";
+import { useComposioLogin } from "./useComposioLogin";
 
+/**
+ * Hook for Google Sheets login.
+ */
 export function useGoogleSheetsLogin() {
-  const [isLoading, setIsLoading] = useState(false);
-  const { userData } = useUserProvider();
-  const { messages } = useVercelChatContext();
-  const accountId = userData?.account_id as string;
-
-  const handleLogin = async () => {
-    const latestUserMessageText = getLatestUserMessageText(messages);
-    const redirectUrl = `https://chat.recoupable.com?q=${encodeURIComponent(
-      latestUserMessageText
-    )}`;
-
-    setIsLoading(true);
-
-    try {
-      const data = await fetchConnectedAccountsRefresh({
-        accountId,
-        redirectUrl,
-      });
-
-      if (data.redirect_url) {
-        window.open(data.redirect_url, "_blank", "noopener,noreferrer");
-      }
-    } catch (error) {
-      console.error("Error initiating Google Sheets login:", error);
-      toast.error("Failed to initiate Google Sheets login. Please try again.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return {
-    isLoading,
-    handleLogin,
-  };
+  return useComposioLogin("GOOGLE_SHEETS");
 }