Add ability to manually specify github token

app/[[...rest]]/page.tsx

@@ -3,6 +3,7 @@ import { Authenticated, Unauthenticated } from "convex/react"
 import { HomeAuthed } from "@/components/home"
 import { Lander } from "@/components/landing/Lander"
 import ResetHUDButton from "@/components/ResetHUDButton"
+import { GitHubTokenDialog } from "@/components/GitHubTokenDialog"
 
 export default function Page() {
   return (
@@ -12,8 +13,9 @@ export default function Page() {
       </Unauthenticated>
       <Authenticated>
         <ResetHUDButton />
+        <GitHubTokenDialog />
         <HomeAuthed />
       </Authenticated>
     </>
   )
-}
+}

app/api/chat/route.ts

@@ -14,14 +14,18 @@ const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 export async function POST(req: Request) {
   const body = await req.json();
   const threadId = body.threadId as Id<"threads">;
+  const githubToken = body.githubToken as string | undefined;
 
   if (!threadId) {
     console.error("Invalid threadId");
     return new Response('Invalid threadId', { status: 400 });
   }
 
   const toolContext = await getToolContext(body);
-  const tools = getTools(toolContext, body.tools);
+
+  // Pass the GitHub token to getTools
+  const tools = getTools(toolContext, body.tools, githubToken);
+
   const { userId } = auth();
   if (!userId) {
     console.error("Unauthorized: No userId found");
@@ -80,4 +84,4 @@ export async function POST(req: Request) {
   // }
 
   return result.toAIStreamResponse();
-}
+}

app/layout.tsx

@@ -43,4 +43,4 @@ export default function RootLayout({
       </body>
     </html>
   )
-}
+}

components/GitHubTokenDialog.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { GitHubTokenInput } from '@/components/GitHubTokenInput';
+import { Github } from 'lucide-react';
+
+export const GitHubTokenDialog: React.FC = () => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon" className="fixed bottom-4 left-20 z-50">
+          <Github className="size-4" />
+          <span className="sr-only">Set GitHub Token</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Set GitHub Token</DialogTitle>
+          <DialogDescription>
+            If you have a GitHub account connected, we&apos;ll use your GitHub token from that. You can also manually specify one here.
+          </DialogDescription>
+        </DialogHeader>
+        <GitHubTokenInput />
+      </DialogContent>
+    </Dialog>
+  );
+};

components/GitHubTokenInput.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import React, { useState } from "react"
+import { useRepoStore } from "../store/repo"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+export function GitHubTokenInput() {
+  const [token, setToken] = useState('');
+  const setGithubToken = useRepoStore((state) => state.setGithubToken);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setGithubToken(token);
+    setToken(''); // Clear the input field after submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col space-y-2">
+      <Input
+        type="text"
+        value={token}
+        onChange={(e) => setToken(e.target.value)}
+        placeholder="Enter your GitHub token"
+        className="w-full"
+      />
+      <Button type="submit" className="w-full">
+        Set GitHub Token
+      </Button>
+    </form>
+  );
+}

docs/github_token.md

@@ -0,0 +1,97 @@
+# GitHub Token Handling in OpenAgents
+
+This document explains how GitHub tokens are handled in the OpenAgents application, including the process of manual token setting and fallback mechanisms.
+
+## Overview
+
+OpenAgents uses GitHub tokens to authenticate API requests to GitHub, allowing users to interact with repositories, issues, and pull requests. The application supports two methods of obtaining a GitHub token:
+
+1. Manually set by the user
+2. Automatically retrieved from the user's Clerk account (if connected to GitHub)
+
+## Token Retrieval Process
+
+The token retrieval process follows this order:
+
+1. Check for a manually set token
+2. If no manual token is found, attempt to retrieve the token from the user's Clerk account
+3. If no token is available from either source, the application will handle the absence of a token gracefully
+
+## Implementation Details
+
+### Manual Token Setting
+
+Users can manually set their GitHub token through the `GitHubTokenInput` component. This token is stored in the application's state using the `useRepoStore` from `store/repo.ts`.
+
+### Token Retrieval in `getToolContext`
+
+The `getToolContext` function in `tools/index.ts` is responsible for assembling the context used by various tools in the application. It handles GitHub token retrieval as follows:
+
+```typescript
+export const getToolContext = async (body: ToolContextBody): Promise<ToolContext> => {
+  // ... other context setup ...
+
+  // Use the manually set token if available, otherwise fall back to the Clerk user's token
+  let finalGitHubToken = githubToken;
+  if (!finalGitHubToken && user) {
+    finalGitHubToken = await getGitHubToken(user);
+  }
+
+  return {
+    // ... other context properties ...
+    gitHubToken: finalGitHubToken,
+  };
+};
+```
+
+### Clerk Token Retrieval
+
+If no manual token is set, the application attempts to retrieve the GitHub token from the user's Clerk account. This is done in the `getGitHubToken` function in `lib/github/isGitHubUser.ts`:
+
+```typescript
+export async function getGitHubToken(user: User) {
+  const tokenResponse = await clerkClient().users.getUserOauthAccessToken(user.id, 'oauth_github');
+  if (tokenResponse.data.length > 0) {
+    return tokenResponse.data[0].token;
+  } else {
+    console.log("No GitHub token found for user:", user.id);
+    return undefined;
+  }
+}
+```
+
+## Usage in Tools
+
+Individual tools that require GitHub authentication use the `gitHubToken` from the provided context. For example, in `tools/view-file.ts`:
+
+```typescript
+if (!context.gitHubToken) {
+  return {
+    success: false,
+    error: "Missing GitHub token",
+    summary: "Failed to view file due to missing GitHub token",
+    details: "The GitHub token is missing. Please ensure it is provided in the context."
+  };
+}
+```
+
+## Handling Missing Tokens
+
+If no GitHub token is available (either manually set or from Clerk), the tools are designed to handle this gracefully, typically by returning an error message indicating that the GitHub token is missing.
+
+## Best Practices
+
+1. Always check for the presence of a GitHub token before attempting to make GitHub API requests.
+2. Provide clear feedback to the user if a GitHub token is required but not available.
+3. Encourage users to either manually set their GitHub token or connect their GitHub account to their Clerk profile for seamless authentication.
+
+## Troubleshooting
+
+If you encounter issues with GitHub authentication:
+
+1. Check if the user has manually set a GitHub token.
+2. Verify if the user's Clerk account is connected to GitHub.
+3. Ensure that the GitHub token has the necessary permissions for the required operations.
+4. Check the console logs for any error messages related to token retrieval or GitHub API requests.
+
+By following this token handling process, OpenAgents ensures a flexible and robust approach to GitHub authentication, accommodating both manual token entry and automated token retrieval through Clerk.

hooks/chat/useChatCore.ts

@@ -37,13 +37,22 @@ export function useChat({ propsId, onTitleUpdate }: { propsId?: Id<"threads">, o
 
   const model = useModelStore((state) => state.model)
   const repo = useRepoStore((state) => state.repo)
+  const githubToken = useRepoStore((state) => state.githubToken)
   const tools = useToolStore((state) => state.tools)
   const setBalance = useBalanceStore((state) => state.setBalance)
 
   const vercelChatProps = useVercelChat({
     id: threadId?.toString(),
     initialMessages: threadData.messages as VercelMessage[],
-    body: { model: model.id, tools, threadId, repoOwner: repo?.owner, repoName: repo?.name, repoBranch: repo?.branch },
+    body: { 
+      model: model.id, 
+      tools, 
+      threadId, 
+      repoOwner: repo?.owner, 
+      repoName: repo?.name, 
+      repoBranch: repo?.branch,
+      githubToken: githubToken // Add the GitHub token to the body
+    },
     maxToolRoundtrips: 20,
     onFinish: async (message, options) => {
       if (threadId && user) {
@@ -165,4 +174,4 @@ export function useChat({ propsId, onTitleUpdate }: { propsId?: Id<"threads">, o
     error,
     stop: vercelChatProps.stop,
   }
-}
+}

lib/githubUtils.ts

@@ -28,7 +28,6 @@ const githubListUserReposArgsSchema = z.object({
 });
 
 export async function githubListUserRepos(args: z.infer<typeof githubListUserReposArgsSchema>): Promise<any[]> {
-  console.log("are we here")
   const { token, perPage, sort, direction } = githubListUserReposArgsSchema.parse(args);
   const params = new URLSearchParams();
 
@@ -125,4 +124,4 @@ export async function githubDeleteFile(args: {
 
   // Send DELETE request
   await githubApiRequest(fileUrl, token, 'DELETE', body);
-}
+}

panes/changelog/ChangelogPane.tsx

@@ -7,6 +7,10 @@ const ChangelogPane: React.FC = () => {
     <Card className="w-full h-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <CardContent>
         <ScrollArea className="py-4 h-[calc(100%-2rem)] pr-4">
+          <h2 className="mb-2 font-semibold">Oct 24</h2>
+          <ul className="space-y-2 list-disc list-inside">
+            <li className="text-sm text-foreground/80">Added ability to manually specify GitHub token</li>
+          </ul>
           <h2 className="mb-2 font-semibold">Aug 29</h2>
           <ul className="space-y-2 list-disc list-inside">
             <li className="text-sm text-foreground/80">Added tool to create GitHub issue</li>

store/repo.ts

@@ -10,17 +10,21 @@ interface Repo {
 interface RepoState {
     repo: Repo | null;
     setRepo: (repo: Repo | null) => void;
+    githubToken: string | null;
+    setGithubToken: (token: string | null) => void;
 }
 
 export const useRepoStore = create<RepoState>()(
     persist(
         (set) => ({
             repo: null,
             setRepo: (repo) => set({ repo }),
+            githubToken: null,
+            setGithubToken: (token) => set({ githubToken: token }),
         }),
         {
-            name: 'openagents-repo-storage-10',
-            partialize: (state) => ({ repo: state.repo }),
+            name: 'openagents-repo-storage-11',
+            partialize: (state) => ({ repo: state.repo, githubToken: state.githubToken }),
         }
     )
 )

tools/index.ts

@@ -1,10 +1,10 @@
-import { getGitHubToken } from "@/lib/github/isGitHubUser"
 import { models } from "@/lib/models"
 import { Model, Repo, ToolContext } from "@/types"
 import { bedrock } from "@ai-sdk/amazon-bedrock"
 import { anthropic } from "@ai-sdk/anthropic"
 import { openai } from "@ai-sdk/openai"
 import { currentUser, User } from "@clerk/nextjs/server"
+import { getGitHubToken } from "@/lib/github/isGitHubUser"
 import { closeIssueTool } from "./close-issue"
 import { closePullRequestTool } from "./close-pull-request"
 import { createBranchTool } from "./create-branch"
@@ -15,7 +15,6 @@ import { fetchGitHubIssueTool } from "./fetch-github-issue"
 import { listOpenIssuesTool } from "./list-open-issues"
 import { listPullRequestsTool } from "./list-pull-requests"
 import { openIssueTool } from "./open-issue"
-// import { listReposTool } from "./list-repos"
 import { postGitHubCommentTool } from "./post-github-comment"
 import { rewriteFileTool } from "./rewrite-file"
 import { scrapeWebpageTool } from "./scrape-webpage"
@@ -26,7 +25,6 @@ import { viewPullRequestTool } from "./view-pull-request"
 
 export const allTools = {
   create_file: { tool: createFileTool, description: "Create a new file at path with content" },
-  // list_repos: { tool: listReposTool, description: "List all repositories for the authenticated user" },
   rewrite_file: { tool: rewriteFileTool, description: "Rewrite file at path with new content" },
   scrape_webpage: { tool: scrapeWebpageTool, description: "Scrape webpage for information" },
   view_file: { tool: viewFileTool, description: "View file contents at path" },
@@ -47,11 +45,14 @@ export const allTools = {
 
 type ToolName = keyof typeof allTools;
 
-export const getTools = (context: ToolContext, toolNames: ToolName[]) => {
+export const getTools = (context: ToolContext, toolNames: ToolName[], githubToken?: string) => {
   const tools: Partial<Record<ToolName, ReturnType<typeof allTools[ToolName]["tool"]>>> = {};
   toolNames.forEach(toolName => {
     if (allTools[toolName]) {
-      tools[toolName] = allTools[toolName].tool(context);
+      tools[toolName] = allTools[toolName].tool({
+        ...context,
+        gitHubToken: githubToken || context.gitHubToken
+      });
     }
   });
   return tools;
@@ -61,18 +62,18 @@ interface ToolContextBody {
   repoOwner: string;
   repoName: string;
   repoBranch: string;
-  model: string; // Change this to expect just the model ID
+  model: string;
+  githubToken?: string;
 }
 
 export const getToolContext = async (body: ToolContextBody): Promise<ToolContext> => {
-  const { repoOwner, repoName, repoBranch, model: modelId } = body;
+  const { repoOwner, repoName, repoBranch, model: modelId, githubToken } = body;
   const repo: Repo = {
     owner: repoOwner,
     name: repoName,
     branch: repoBranch
   };
   const user = await currentUser();
-  const gitHubToken = user ? await getGitHubToken(user) : undefined;
   const firecrawlToken = process.env.FIRECRAWL_API_KEY;
 
   // Find the full model object based on the provided model ID
@@ -96,11 +97,17 @@ export const getToolContext = async (body: ToolContextBody): Promise<ToolContext
       throw new Error(`Unsupported model provider: ${modelObj.provider}`);
   }
 
+  // Use the manually set token if available, otherwise fall back to the Clerk user's token
+  let finalGitHubToken = githubToken;
+  if (!finalGitHubToken && user) {
+    finalGitHubToken = await getGitHubToken(user);
+  }
+
   return {
     repo,
     user: user as User | null,
-    gitHubToken,
+    gitHubToken: finalGitHubToken,
     firecrawlToken,
     model
   };
-};
+};