feat: Connect conversations to GitHub issues (#12) #47

vikaswakde · 2025-03-09T19:46:46Z

Implements GitHub integration for Helper, allowing users to:

Connect GitHub accounts to mailboxes
Select repositories for issue tracking

helperai-github-integration-demo.mov

Create GitHub issues from conversations

Screen.Recording.1403-12-25.at.8.31.53.PM.mov

Link existing GitHub issues to conversations

Screen.Recording.1403-12-25.at.8.35.29.PM.mov

Synchronize issue states between Helper and GitHub

Screen.Recording.1403-12-25.at.9.17.54.PM.mov

This integration enables teams to track support requests and bugs directly
from Helper conversations, with bidirectional synchronization ensuring
that issue status is always up-to-date in both systems.

Closes #12

binary-koan · 2025-03-09T21:53:43Z

...extjs/src/app/(dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/githubIssueButton.tsx

+  conversationSummary?: string | string[] | null;
+}
+
+// Define the GitHub issue type


I think most of the comments in this PR are unnecessary, the code reads well on its own

I will cleanup the comments

binary-koan · 2025-03-09T21:55:27Z

...extjs/src/app/(dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/githubIssueButton.tsx

+  updatedAt: string;
+}
+
+export const GitHubIssueButton = ({


Please integrate this into the command bar instead, we're trying to avoid adding buttons. Ideally the form should work similarly to "add note" / tool execution

I updated the button to now be in 'command bar' instead of in conversation tabs.

checkout this commit : 7a2b578

screenshot :

binary-koan · 2025-03-09T21:56:47Z

...extjs/src/app/(dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/githubIssueButton.tsx

+  const [selectedIssueNumber, setSelectedIssueNumber] = useState<number | null>(null);
+
+  // Get conversation details to check if a GitHub issue is already linked
+  const { data: conversation, refetch: refetchConversation } = api.mailbox.conversations.get.useQuery(


Would be a bit nicer to use useConversationContext

this fixes redundancy : 3d6ba2d

binary-koan · 2025-03-09T21:58:20Z

apps/nextjs/src/app/(dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/list.tsx

+                <>
+                  <span className="inline-flex items-center rounded-full bg-muted px-1.5 py-0.5 text-xs   font-medium text-muted-foreground mr-1">
+                    Closed
+                  </span>
+                  <HumanizedTime time={conversation.closedAt ?? conversation.updatedAt} titlePrefix="Closed on" />
+                </>


This doesn't look related?

fixed at : 2913a77

There's still a diff (adding the fragment), please check

simplified : 40bc1bc

binary-koan · 2025-03-09T21:59:18Z

apps/nextjs/src/app/(dashboard)/mailboxes/[mailbox_slug]/settings/_components/githubSetting.tsx

+      try {
+        setIsLoading(true);
+        setRepositories(
+          await utils.client.mailbox.github.repositories.query({


useQuery should simplify the state handling here (or let me know if there's a reason you're not using it!)

tried using it, but then it bombarded with so much errors for onError so went with this option

binary-koan · 2025-03-09T22:00:39Z

apps/nextjs/src/lib/github/client.ts

+
+  return {
+    accessToken: data.access_token,
+    username: userResponse.data.login,


Why do we save the username?

currently not any particular reason for it, but just for identification and displays purposes, that being said, its absolutely not essential part of core functionality.

Let's keep things simple and remove it until we need it then

simplified it : 052aaba

binary-koan

@vikaswakde _a Thanks for the PR, the functionality looks great! I've added some initial comments (in 2 reviews because I mis-clicked ...), could you take a look?

Apologies some of these weren't clear, we haven't had a chance to document things in detail yet

binary-koan · 2025-03-09T22:02:34Z

apps/nextjs/src/lib/github/client.ts

+    console.error("Error listing repository issues:", error);
+    throw new Error("Failed to list issues for this repository");


In general I think we can let things like this fail rather than having custom error handlers (if it's for the message, we should throw a tRPC error class in the procedure)

fix: 2e889c3

binary-koan · 2025-03-09T22:04:37Z

apps/nextjs/src/trpc/router/mailbox/githubConversationsRouter.ts

+import { createGitHubIssue, getGitHubIssue, listRepositoryIssues, updateGitHubIssueState } from "@/lib/github/client";
+import { mailboxProcedure } from "./procedure";
+
+export const githubConversationsRouter = {


How about we nest this under conversations and use conversationProcedure

nested it under conversations and used conversationProcedure : aea30d7

binary-koan · 2025-03-09T22:06:21Z

apps/nextjs/src/lib/data/conversation.ts

+
+      if (mailbox?.githubAccessToken) {
+        // Map conversation status to GitHub issue state
+        const githubState = updatedConversation.status === "closed" ? "closed" : "open";


I don't think we should do this, "closed" for the conversation just means we've replied, not that the issue is fixed

then should we only allow 'closing' of an issue from GitHub repo and not from our connect to github UI ?

in current code, I had added this close issue button to close issues

@binary-koan

Sorry, missed this - let's keep this simple and remove the button

binary-koan

(misclick again, I need coffee ...)

…catch blocks

binary-koan

@vikaswakde Added a few more comments; could you also check my last two above? Otherwise this is looking good!

Mind listing (or screenshotting) what permissions the GH app needs so I can test it?

binary-koan · 2025-03-11T10:34:00Z

...dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/ticketCommandBar/githubIssuePage.tsx

+  const [isCreating, setIsCreating] = useState(false);
+  const [isLinking, setIsLinking] = useState(false);
+  const [isUpdatingState, setIsUpdatingState] = useState(false);


Can we just use isPending from useMutation for these?

simplified : d0a71f0

binary-koan · 2025-03-11T10:44:09Z

...dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/ticketCommandBar/githubIssuePage.tsx

+          ) : issues && issues.length > 0 ? (
+            <div className="space-y-2">
+              <Label htmlFor="issue">Select an issue</Label>
+              <Select


This should ideally be a combobox which searches issues matching the filter

great suggestion I updated the simple selector with more ux friendly combobox : 9749f22

binary-koan · 2025-03-11T10:45:04Z

.../src/app/(dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/ticketCommandBar/index.tsx

@@ -120,7 +126,7 @@ export function TicketCommandBar({
        }
        break;
      case "ArrowLeft":
-        if (page === "previous-replies" || page === "assignees") {
+        if (page === "previous-replies" || page === "assignees" || page === "github-issue") {


Don't think these are needed since the github-issue page doesn't use the command component

binary-koan · 2025-03-11T10:45:53Z

...dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/ticketCommandBar/githubIssuePage.tsx

+  const { data: issues, isLoading: isLoadingIssues } = (api.mailbox.conversations as any).listRepositoryIssues.useQuery(
+    {
+      state: "open",
+      mailboxSlug,
+    },
+    {
+      enabled: activeTab === "link",
+      staleTime: 30000,
+    },
+  );
+
+  const conversationWithGitHub = conversation as any;


These shouldn't need as any if tRPC is working correctly

binary-koan · 2025-03-11T10:47:42Z

apps/nextjs/src/lib/github/client.ts

+
+  return {
+    accessToken: data.access_token,
+    username: userResponse.data.login,


Let's keep things simple and remove it until we need it then

binary-koan · 2025-03-11T10:51:28Z

apps/nextjs/src/app/api/webhooks/github/route.ts

+          console.log(`Updated conversation ${conversation.id} status to closed`);
+
+          // Add a message to the conversation that the issue was closed
+          await db.insert(conversationMessages).values({


I think what we should do here is

Use createReply to send a friendly message to the customer (ideally configurable in settings, but could just be hardcoded to something like "Hi, our team has resolved the issue so this should work now. Please let us know if you continue having problems.")

Add the message you have here as a note using addNote - notes can use markdown IIRC so would be nice to link to the issue

how does this look : 93bf858

Looks good. Don't think we need the logs, we can tell if it worked from whether the db records are created

sure cleaned up: 9567907

binary-koan · 2025-03-11T10:53:45Z

apps/nextjs/src/lib/data/mailbox.ts

@@ -120,6 +126,38 @@ export const disconnectSlack = async (mailboxId: number): Promise<void> => {
    .where(eq(mailboxes.id, mailboxId));
 };

+export const disconnectGitHub = async (mailboxId: number): Promise<void> => {


Should (can) we also make an API call to disconnect the app in GitHub?

made it : d6ffcb4

binary-koan · 2025-03-11T11:05:55Z

...dashboard)/mailboxes/[mailbox_slug]/(inbox)/_components/ticketCommandBar/githubIssuePage.tsx

+  }
+
+  return (
+    <DialogContent className="sm:max-w-[600px]">


The DialogContent wrapper looks awkward here, could you please update the design to be closer to the note/tool pages?

How about this more simplified version: should I commit it ? or do you have any design in mind?

Yeah that looks good!

I just changed how the command bar displays; if you commit that I'm happy to deal with the conflicts and get it working with the new design

sounds great : 74f54c9

…n flow

…imports

…vigation

vikaswakde · 2025-03-12T03:02:30Z

@binary-koan here is the gist where I explain the steps needed to connect and use GitHub with helper :
https://gist.github.com/vikaswakde/e2f84128d05adf678eb667a6fcd9f569

…ectGitHub logic

…s and internal notes

…tton

binary-koan · 2025-03-13T22:57:07Z

(will look at this properly again tomorrow, sorry for the delay!)

binary-koan · 2025-03-14T15:41:28Z

@vikaswakde I merged main and did a couple more tweaks here: #52. Could you please merge that in?

Also, when I try to create an issue after connecting my GH account in settings I get this error, even though I've added the Read & write Issues permission in our GitHub app settings. I think the app is maybe authorized but not installed? Could you check if the flow is requesting the right permissions?

Error [TRPCError]: Resource not accessible by integration - https://docs.github.com/rest/issues/issues#create-an-issue

And could you please update the demo videos above to show the latest design so we can get Sahil's input on the UX?

vikaswakde · 2025-03-15T13:49:00Z

@vikaswakde I merged main and did a couple more tweaks here: #52. Could you please merge that in?

Also, when I try to create an issue after connecting my GH account in settings I get this error, even though I've added the Read & write Issues permission in our GitHub app settings. I think the app is maybe authorized but not installed? Could you check if the flow is requesting the right permissions?
Error [TRPCError]: Resource not accessible by integration - https://docs.github.com/rest/issues/issues#create-an-issue
And could you please update the demo videos above to show the latest design so we can get Sahil's input on the UX?

@binary-koan hello, I tried to recreate the issue but I was not able to get the similar issue,

I checkout to /github-integration-fix #52 branch , and I was able to create a new issue without any error!

steps I followed:

create a new app from this url : https://github.com/settings/applications/new

Values I entered for creating that app :

Homepage URL > https://helperai.dev

Callback URL > https://helperai.dev/api/connect/github/callback

2) get `client id` and `client secret` and update `local.env`

(creds have be revoked)

connect GitHub in helper settings

select the repo which I want to create issues in and click update settings
then visited that repos settings and checked issues tab

and then I was able to create a new issue

binary-koan · 2025-03-15T15:59:18Z

@slavingia Any feedback on the UX? (see videos in the description)

Apart from working through the permissions issue I'm seeing this is good to go from my side

slavingia · 2025-03-15T16:14:43Z

Looks good! Maybe the color of the GitHub icon should change upon hover, as you can't see it.

vikaswakde · 2025-03-15T16:42:51Z

Screen.Recording.1403-12-25.at.10.09.57.PM.mov

vikaswakde · 2025-03-15T17:12:02Z

@binary-koan how to fix this .json file conflicts?

binary-koan · 2025-03-15T21:19:53Z

@vikaswakde Easiest to recreate the migration:

Delete the migration and snapshot and reset _journal.json to main
npm run db:generate
npm run db:reset

Looks like main has an 0061 migration, so those steps should create an 0062 migration with your changes. LMK if you run into problems!

(IIRC Drizzle is planning to release a better migration tool soonish which should have a less hacky way to do it)

vikaswakde · 2025-03-15T21:25:15Z

@vikaswakde Easiest to recreate the migration:

Delete the migration and snapshot and reset _journal.json to main

npm run db:generate

npm run db:reset

Looks like main has an 0061 migration, so those steps should create an 0062 migration with your changes. LMK if you run into problems!
(IIRC Drizzle is planning to release a better migration tool soonish which should have a less hacky way to do it)


so, if I could do this successfully, then should I merge main into my branch ? or what I need to do now ?

binary-koan · 2025-03-15T22:46:39Z

Yeah sorry, I mean merge main after deleting the files and before running db:generate

Once conflicts are solved we can merge this and I'll work on a small follow-up to fix the permissions issue (since I can reproduce it with our app)

Signed-off-by: Vikas Wakde <110342308+vikaswakde@users.noreply.github.com>

vikaswakde · 2025-03-17T15:19:02Z

Yeah sorry, I mean merge main after deleting the files and before running db:generate

Once conflicts are solved we can merge this and I'll work on a small follow-up to fix the permissions issue (since I can reproduce it with our app)

I merged main into my branch and solved the conflicts that occurred

binary-koan · 2025-03-17T15:58:37Z

Thanks! Trying to get it working with our app today (think we need to authenticate as an app instead of via OAuth), will merge once I have that

Improves #47 so it works with our GitHub app and can be installed on other orgs

vikaswakde added 5 commits March 10, 2025 00:28

feat(db): add Github integration schema

820f563

feat(github): implement Github API client

269917e

feat(api): add Github integration routes and endpoints

1c344d9

feat(ui): add Github integration components

72a0eb8

chore: update dependencies and environment for Github integration

1a33f63

vercel bot deployed to Preview – helper-docs March 9, 2025 19:48 View deployment

vikaswakde mentioned this pull request Mar 9, 2025

Connect conversation to GitHub #12

Closed

binary-koan reviewed Mar 9, 2025

View reviewed changes

binary-koan approved these changes Mar 9, 2025

View reviewed changes

neetogit-bot bot assigned vikaswakde Mar 9, 2025

binary-koan requested changes Mar 9, 2025

View reviewed changes

refactor: remove old Connect to GitHub button and it into command bar

7a2b578

vercel bot deployed to Preview – helper-docs March 10, 2025 03:35 View deployment

refactor: reduce redundancy in githubIssuePage

3d6ba2d

vercel bot deployed to Preview – helper-docs March 10, 2025 15:38 View deployment

refactor(ui): removed unrelated label

2913a77

vercel bot deployed to Preview – helper-docs March 10, 2025 16:13 View deployment

refactor(github): simplify error handling and remove unnecessary try-…

2e889c3

…catch blocks

vercel bot deployed to Preview – helper-docs March 10, 2025 20:28 View deployment

binary-koan reviewed Mar 11, 2025

View reviewed changes

binary-koan mentioned this pull request Mar 11, 2025

(tests & autofix) Connect conversations to GitHub issues #52

Closed

refactor(ui): simplified removed fragments

40bc1bc

vercel bot deployed to Preview – helper-docs March 11, 2025 14:27 View deployment

vikaswakde added 5 commits March 11, 2025 20:50

refactor(github): remove username retrieval from GitHub authenticatio…

052aaba

…n flow

refactor(github): restructure GitHub conversations router and update …

aea30d7

…imports

refactor(github): simplify state management in GitHub issue page

d0a71f0

feat(github): add combobox

9749f22

refactor(ui): remove github-issue page references from command bar na…

ba841e7

…vigation

feat(github): implement revokeGitHubToken function and update disconn…

d6ffcb4

…ectGitHub logic

vikaswakde added 3 commits March 13, 2025 02:11

refactor(github): enhance GitHub webhook handling with closure replie…

93bf858

…s and internal notes

refactor(github): simplify GithuHub layout and removed close issue bu…

74f54c9

…tton

refactor(github): clean up GitHub webhook logging and error handling

9567907

binary-koan added 2 commits March 14, 2025 15:24

Merge branch 'main' into feature/github-integration

e1b9ed6

Fix

8c14104

slavingia approved these changes Mar 15, 2025

View reviewed changes

fix: update GitHub SVG icon to use currentColor for fill

6897a7b

vikaswakde and others added 2 commits March 17, 2025 01:23

feat(github-integration): cleanup before merging into main

0c9c91e

Merge branch 'main' into feature/github-integration

5d1f573

Signed-off-by: Vikas Wakde <110342308+vikaswakde@users.noreply.github.com>

Merge branch 'main' into feature/github-integration

cfffa3a

binary-koan mentioned this pull request Mar 17, 2025

feat: use app auth flow for github integration #77

Merged

binary-koan merged commit 6ba976f into antiwork:main Mar 18, 2025
1 of 3 checks passed

binary-koan added a commit that referenced this pull request Mar 18, 2025

feat: use app auth flow for github integration (#77)

2d85c02

Improves #47 so it works with our GitHub app and can be installed on other orgs

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Connect conversations to GitHub issues (#12) #47

feat: Connect conversations to GitHub issues (#12) #47

		console.error("Error listing repository issues:", error);
		throw new Error("Failed to list issues for this repository");

feat: Connect conversations to GitHub issues (#12) #47

feat: Connect conversations to GitHub issues (#12) #47

Conversation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Homepage URL > https://helperai.dev

Callback URL > https://helperai.dev/api/connect/github/callback