From 73fd2a911455d79afa0a9961340cbfaa34c74c93 Mon Sep 17 00:00:00 2001
From: Jeremy Alva Prathama <jeremyalvax@gmail.com>
Date: Tue, 7 Nov 2023 18:35:20 +0700
Subject: [PATCH 1/4] update issues trpc endpoint

---
 package-lock.json                             | 289 ++++++++++++++++++
 package.json                                  |   2 +
 src/components/ui/command.tsx                 | 153 ++++++++++
 src/components/ui/dialog.tsx                  | 120 ++++++++
 src/components/ui/input.tsx                   |  25 ++
 src/components/ui/textarea.tsx                |   1 +
 src/pages/api/auth/update-session.ts          |  14 +-
 src/pages/api/generate/[documentId].ts        | 142 ---------
 .../workspace/generator/generatorQuestions.ts |   4 +-
 src/server/api/routers/workspace/issue.ts     |  19 +-
 10 files changed, 609 insertions(+), 160 deletions(-)
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/input.tsx
 delete mode 100644 src/pages/api/generate/[documentId].ts

diff --git a/package-lock.json b/package-lock.json
index cad4421..583819f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@lucia-auth/oauth": "^3.3.1",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-collapsible": "^1.0.3",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-slot": "^1.0.2",
@@ -30,6 +31,7 @@
         "cassandra-driver": "^4.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
+        "cmdk": "^0.2.0",
         "drizzle-orm": "^0.28.5",
         "langchain": "^0.0.176",
         "lucia": "^2.7.2",
@@ -1301,6 +1303,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
@@ -3159,6 +3197,252 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.0.tgz",
+      "integrity": "sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0",
+        "command-score": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -3229,6 +3513,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/command-score": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
+    },
     "node_modules/commander": {
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
diff --git a/package.json b/package.json
index d3ea7b5..f6cb947 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@lucia-auth/oauth": "^3.3.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
@@ -33,6 +34,7 @@
     "cassandra-driver": "^4.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
     "drizzle-orm": "^0.28.5",
     "langchain": "^0.0.176",
     "lucia": "^2.7.2",
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..631304e
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react"
+import { DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+import { Dialog, DialogContent } from "~/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..f008c64
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..35e8137
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 17c5c09..6e19d76 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -8,6 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
+        defaultValue={props.defaultValue ?? "Textarea"}
         className={cn(
           "flex min-h-[80px] w-full rounded-md border-2 border-primary-dark bg-background px-3 py-2 text-sm placeholder:text-slate-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           className,
diff --git a/src/pages/api/auth/update-session.ts b/src/pages/api/auth/update-session.ts
index 617fe4b..353fd2c 100644
--- a/src/pages/api/auth/update-session.ts
+++ b/src/pages/api/auth/update-session.ts
@@ -8,11 +8,15 @@ import { sessions } from "~/server/db/schema";
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method !== "POST") return res.status(405).end();
 
-  if (typeof req.body.sessionId !== "string" || req.body.sessionId === "")
+  if (typeof req.body.sessionId !== "string" || req.body.sessionId === "") {
+    console.error("Session ID is not string or is empty");
     return res.status(401).end();
+  }
 
-  if (typeof req.body.workspaceId !== "string" || req.body.workspaceId === "")
+  if (typeof req.body.workspaceId !== "string" || req.body.workspaceId === "") {
+    console.error("Workspace ID is not string or is empty");
     return res.status(401).end();
+  }
 
   const sessionId = req.body.sessionId as string;
   const workspaceId = req.body.workspaceId as string;
@@ -26,7 +30,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       .from(sessions)
       .where(eq(sessions.workspaceId, workspaceId))
       .limit(1);
-    if (result.length < 1) return res.status(401).end();
+
+    if (result.length < 1) {
+      console.error(`Session not found. Workspace ID: ${workspaceId}`);
+      return res.status(401).end();
+    }
 
     const newSession = await auth.validateSession(result[0]!.id);
 
diff --git a/src/pages/api/generate/[documentId].ts b/src/pages/api/generate/[documentId].ts
deleted file mode 100644
index 684aa8e..0000000
--- a/src/pages/api/generate/[documentId].ts
+++ /dev/null
@@ -1,142 +0,0 @@
-// import type { NextApiRequest, NextApiResponse } from "next";
-
-// import { auth } from "~/server/auth";
-
-// // Relational DB
-// import { ulid } from "ulid";
-// import { db } from "~/server/db";
-// import { documents } from "~/server/db/schema";
-// import { and, eq } from "drizzle-orm";
-
-// // Vector DB
-// import { astra } from "~/server/astra";
-// import { cassandraStore } from "../../../server/api/routers/workspace/generator/vectorstores";
-// import { embeddingModel } from "~/lib/document";
-
-// // AI services
-// import { ChatOpenAILangChain } from "~/server/openai";
-// import { OpenAIStream, streamToResponse } from "ai";
-// import { RetrievalQAChain } from "langchain/chains";
-
-// import { JsonOutputFunctionsParser } from "langchain/output_parsers";
-
-// // Others
-// import * as Questions from "~/server/api/routers/workspace/generator/generatorQuestions";
-// import { PromptTemplate } from "langchain/prompts";
-
-// const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-//   // Handle request and session
-//   if (req.method !== "POST") return res.status(405).end();
-
-//   const documentId = req.query.documentId! as string;
-
-//   const authRequest = auth.handleRequest({ req, res });
-
-//   const session = await authRequest.validate();
-
-//   if (session === null) return res.status(401).end();
-
-//   // Retrieve document based on id
-//   let documentRes = await db
-//     .select()
-//     .from(documents)
-//     .where(
-//       and(
-//         eq(documents.providerDocumentId, documentId),
-//         eq(documents.workspaceId, session.workspace_id),
-//         eq(documents.userId, session.user.id),
-//       ),
-//     )
-//     .limit(1);
-
-//   if (documentRes.length < 1) {
-//     documentRes = await db
-//       .insert(documents)
-//       .values({
-//         id: ulid().toString(),
-//         providerDocumentId: documentId,
-//         workspaceId: session.workspace_id,
-//         userId: session.user.id,
-//       })
-//       .returning();
-//   }
-
-//   const document = documentRes[0]!;
-
-//   try {
-//     // CONVERT LINEAR DOCUMENT INTO ISSUES
-    
-//     // A. RETRIEVAL
-//     // Since a document may be embedded multiple times, retrieve the embedding with the latest timestamp 
-//     const maxTimestampResult = await astra.execute(
-//       // Timestamps are alrdy sorted descending
-//       `
-//       SELECT created_at AS most_recent_created_at
-//       FROM document_embeddings
-//       WHERE document_id = ?
-//       LIMIT 1
-//       `, 
-//         [document.id],
-//         { prepare: true },
-//     );
-  
-//     const maxTimestamp = maxTimestampResult.rows[0]?.get(
-//       "most_recent_created_at",
-//     ) as Date;
-  
-//     // 1. Document Context Retrieval
-//     // Create message to initiate embedding retrieval
-    
-  
-//     // QA_1: Background
-//     const backgroundEmbedding = new Float32Array(
-//       await embeddingModel.embedQuery(Questions.backgroundQuestion),
-//     );
-  
-//     const backgroundDocEmbedResult = await astra.execute(
-//       `
-//         SELECT document_id, id, text, created_at, similarity_cosine(embedding, ?) AS similarity
-//         FROM document_embeddings
-//         WHERE document_id = ? AND created_at = ?
-//         ORDER BY embedding ANN OF ? LIMIT 20
-//       `,
-//         [backgroundEmbedding, document.id, maxTimestamp, backgroundEmbedding],
-//         { prepare: true },
-//     );
-  
-//     const backgroundContext = backgroundDocEmbedResult.rows
-//       .map((doc) => doc.get("text") as string)
-//       .join("\n")
-//       .substring(0, 3000);
-  
-//     const backgroundPrompt = Questions.generatePromptTemplate(backgroundContext);
-  
-//     // Initialize AI services
-//     const model = ChatOpenAILangChain;
-//     const chain = RetrievalQAChain.fromLLM(model, cassandraStore.asRetriever(), {
-//       prompt: PromptTemplate.fromTemplate(Questions.promptTemplate),
-//     });
-  
-//     const response = await chain.call({
-//       query: Questions.backgroundQuestion,
-//     });
-  
-//     console.log("response:", response);
-  
-//     if (response) {
-//       console.log("RESPONSE\n", response);
-//     //   res.status(200).send({
-//     //     status: "success",
-//     //     data: response,
-//     //   });
-//     }
-  
-//     res.send("error!");
-  
-//     return "HELLO_WORLD";
-//   } catch (err) {
-//     console.error(err);
-//   }
-// };
-
-// export default handler;
\ No newline at end of file
diff --git a/src/server/api/routers/workspace/generator/generatorQuestions.ts b/src/server/api/routers/workspace/generator/generatorQuestions.ts
index edb971a..68bf8db 100644
--- a/src/server/api/routers/workspace/generator/generatorQuestions.ts
+++ b/src/server/api/routers/workspace/generator/generatorQuestions.ts
@@ -11,8 +11,8 @@ export const condenseQuestionTemplate  = `
   
   Issues are the smallest unit of task that a project team member could pick up. Issues should contain exactly 3 fields: Title, Description, and Priority (high/medium/low). Title should be the feature name that you recommend, for example: "Open new payment channels for e-commerce". Description should be an elaboration of the Title so engineers could understand, for example: "Integrate Stripe payment API into site". Priority should be guessed by the importance of the topic in the Title to the business. Don't just parrot from the document given, but try to create something new!
   
-  The output format for each issue shall be a single array of JSONs, each object has the 3 fields mentioned above. All JSON fields should be in lowercase. Just directly write the values in each row. No deviations from this format is allowed.
-
+  The output format for each issue shall be a single JSON with a numeric key (id) and a JSON value. The JSON value of each key contains 3 fields mentioned above. All JSON fields (but not the values), if a string type, should be in lowercase. No deviations from this format is allowed. 
+  
   CONTEXT IS BELOW:
   {context}
 
diff --git a/src/server/api/routers/workspace/issue.ts b/src/server/api/routers/workspace/issue.ts
index 2fc4bfc..e6dadee 100644
--- a/src/server/api/routers/workspace/issue.ts
+++ b/src/server/api/routers/workspace/issue.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-const */
 import { z } from "zod";
 // Relational DB
 import { ulid } from "ulid";
@@ -11,13 +12,11 @@ import { TRPCError } from "@trpc/server";
 
 // Vector DB
 import { astra } from "~/server/astra";
-// import { cassandraStore } from "./generator/vectorstores";
 import { embeddingModel } from "~/lib/document";
 
 // AI services
 
 import { ChatOpenAILangChain } from "~/server/openai";
-// import { OpenAIStream, streamToResponse } from "ai";
 import { 
   LLMChain, 
   // RetrievalQAChain 
@@ -28,14 +27,6 @@ import {
   HumanMessagePromptTemplate,
   SystemMessagePromptTemplate,
 } from "langchain/prompts";
-// import { ChatOpenAI } from "langchain/chat_models/openai";
-// import { formatDocumentsAsString } from "langchain/util/document";
-// import {
-//   RunnablePassthrough,
-//   RunnableSequence,
-// } from "langchain/schema/runnable";
-// import { StringOutputParser } from "langchain/schema/output_parser";
-// import { JsonOutputFunctionsParser } from "langchain/output_parsers";
 import type { ChainValues } from "langchain/dist/schema";
 
 // Others
@@ -165,7 +156,7 @@ export const issueRouter = createTRPCRouter({
       memory.solutionOverview = response.text as string;
 
       // Get the final Issues recommendations
-      const finalResponse = await chain.call({
+      const finalResponse: ChainValues = await chain.call({
         context: `
           ${backgroundContextDoc}\n
           Problem background: ${memory.background}\n
@@ -173,9 +164,11 @@ export const issueRouter = createTRPCRouter({
         question: Questions.condenseQuestionTemplate
       }); 
 
-      console.log("\nRESPONSE (trpc)\n\n", finalResponse.text as string);
+      let result;
+      result = finalResponse.text as string;
+      result = JSON.parse(result) as JSON;
 
-      return finalResponse;
+      return result;
     }),
   
   exportGeneratedIssue: protectedProcedure

From 29151f2a898ddf8a45fb900908df075b0a655a49 Mon Sep 17 00:00:00 2001
From: Jeremy Alva Prathama <jeremyalvax@gmail.com>
Date: Tue, 7 Nov 2023 18:36:00 +0700
Subject: [PATCH 2/4] feat: display suggestions on frontend, add edit dialog

---
 src/modules/workspace/ProjectDetailPage.tsx   |   2 +-
 .../issue-generator/GeneratedIssuesPage.tsx   | 106 ++++++------
 .../issue-generator/IssueDetailPage.tsx       |   5 +-
 .../workspace/issue-generator/IssueDialog.tsx |  89 ++++++++++
 .../IssueDocumentDataTable.tsx                | 163 ++++++++++++++++++
 .../IssueGeneratorDashboard.tsx               |  91 +++++++++-
 .../issue-generator/IssuePriorityCombobox.tsx |  96 +++++++++++
 .../workspace/issue-generator/IssuesList.tsx  |  80 ++++++---
 src/pages/[workspaceId]/generate/index.tsx    |   4 +-
 src/pages/[workspaceId]/test/index.tsx        |  14 +-
 10 files changed, 567 insertions(+), 83 deletions(-)
 create mode 100644 src/modules/workspace/issue-generator/IssueDialog.tsx
 create mode 100644 src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
 create mode 100644 src/modules/workspace/issue-generator/IssuePriorityCombobox.tsx

diff --git a/src/modules/workspace/ProjectDetailPage.tsx b/src/modules/workspace/ProjectDetailPage.tsx
index dbbdfd9..ca1a4e1 100644
--- a/src/modules/workspace/ProjectDetailPage.tsx
+++ b/src/modules/workspace/ProjectDetailPage.tsx
@@ -58,7 +58,7 @@ export const ProjectDetailPage = withAuth(() => {
                     </main>
                 ) : (
                     <main className="flex min-h-screen w-full flex-row">
-
+                        Hello World
                     </main>
                 )}
             </DashboardLayout>
diff --git a/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx b/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
index 5526f9b..91120d5 100644
--- a/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
+++ b/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React, { useEffect } from "react";
 import axios from "axios";
 import { useRouter } from "next/router";
@@ -7,68 +10,71 @@ import { api } from "~/utils/api";
 import { withAuth } from "~/components/withAuth";
 import { DashboardLayout } from "~/layouts/DashboardLayout";
 import { LoadingHero } from "~/layouts/LoadingHero";
-import IssuesList from "./IssuesList";
+import { IssuesList, type IssueData } from "./IssuesList";
 
-const GeneratedIssuesPage = withAuth(() => {
+interface GeneratedIssuesPageProps {
+  handleGenerate: (newValue: boolean) => void;
+}
+
+const jsonToObjArray = (j: JSON): IssueData[] => {
+  const res_array: IssueData[] = [];
+
+  for (const key in j) {
+    // Grab suggestion JSON
+    const suggestion: IssueData = j[key as keyof unknown];
+
+    // Append with ID
+    res_array.push({
+      ...suggestion,
+      id: parseInt(key)
+    });
+  }
+
+  return res_array;
+}
+
+const GeneratedIssuesPage: React.FC<GeneratedIssuesPageProps> = ({
+  handleGenerate
+}) => {
   const router = useRouter();
 
-  const { data: sessionData, isLoading: sessionLoading } =
+  // const { data: sessionData, isLoading: sessionLoading } =
     api.user.getSessionInfo.useQuery();
 
+  const documentId = "5c4c13b4-1474-4744-ab57-2557cf48668f";
+
   const { data: GeneratedIssuesData, isLoading: generatedIssuesLoading } =
-    api.workspace.linear.getGeneratedIssues.useQuery(undefined, {
+    api.workspace.issue.generateIssueRecommendations.useQuery({
+      providerDocumentId: documentId
+    }, {
       refetchOnWindowFocus: false,
     });
+  
+  let generatedIssues: IssueData[] = [];
+  if (GeneratedIssuesData) {
+    generatedIssues = jsonToObjArray(GeneratedIssuesData);
 
-  useEffect(() => {
-    if (
-      !sessionLoading &&
-      sessionData?.session?.workspace_id !==
-        router.asPath.replace("/", "").replace("/generate", "")
-    ) {
-      // If the session has changed...
-      void (async function (workspaceId: string, sessionId: string) {
-        await axios.post("/api/auth/update-session", {
-          sessionId,
-          workspaceId,
-        });
 
-        await router.push("/" + workspaceId + "/generate");
-        router.reload();
-      })(
-        router.asPath.replace("/", "").replace("/generate", ""),
-        sessionData!.session!.id,
-      );
-    }
-  }, [sessionData, router, sessionLoading]);
+    console.log("generatedIssues", generatedIssues);
+  }
 
   return (
-    <>
-      <Head>
-        <title>Chiral</title>
-        <meta name="description" content="Automate your product backlogs" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <DashboardLayout>
-        {generatedIssuesLoading ? (
-          <LoadingHero />
-        ) : (
-          <main className="flex min-h-screen w-full flex-col p-8">
-            <h1 className="text-4xl font-bold">Generated Issues</h1>
-            <div className="py-4"></div>
-
-            {GeneratedIssuesData ? (
-              <IssuesList issues={GeneratedIssuesData?.issues ?? []} />
-            ) : (
-              <div>
-                There seems to be a problem while displaying your issues
-              </div>
-            )}
-          </main>
-        )}
-      </DashboardLayout>
-    </>
+    <div>
+      {generatedIssuesLoading ? (
+        <LoadingHero />
+      ) : (
+        <div>
+          {GeneratedIssuesData ? (
+            <IssuesList issues={generatedIssues ?? []} />
+          ) : (
+            <div>
+              There seems to be a problem while displaying your issues
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   );
-});
+};
 
 export default GeneratedIssuesPage;
diff --git a/src/modules/workspace/issue-generator/IssueDetailPage.tsx b/src/modules/workspace/issue-generator/IssueDetailPage.tsx
index 2b2a246..e1add10 100644
--- a/src/modules/workspace/issue-generator/IssueDetailPage.tsx
+++ b/src/modules/workspace/issue-generator/IssueDetailPage.tsx
@@ -7,8 +7,9 @@ import { DashboardLayout } from "~/layouts/DashboardLayout";
 import PriorityBar from "./PriorityBar";
 import { ChevronLeft } from "lucide-react";
 import { Skeleton } from "~/components/ui/skeleton";
+import { withAuth } from "~/components/withAuth";
 
-const IssueDetailPage = () => {
+const IssueDetailPage = withAuth(() => {
   const router = useRouter();
   const issueId = router.asPath
     .replace("/", "")
@@ -131,6 +132,6 @@ const IssueDetailPage = () => {
       </DashboardLayout>
     </>
   );
-};
+});
 
 export default IssueDetailPage;
\ No newline at end of file
diff --git a/src/modules/workspace/issue-generator/IssueDialog.tsx b/src/modules/workspace/issue-generator/IssueDialog.tsx
new file mode 100644
index 0000000..99fbc52
--- /dev/null
+++ b/src/modules/workspace/issue-generator/IssueDialog.tsx
@@ -0,0 +1,89 @@
+import { Button } from "~/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { IssueData } from "./IssuesList";
+import { IssuePriorityCombobox } from "./IssuePriorityCombobox";
+import { Textarea } from "~/components/ui/textarea";
+
+interface DialogProps {
+  trigger: string;
+  title: string
+  dialogDesc: string;
+  issue: IssueData;
+}
+ 
+export function IssueDialog({
+  trigger,
+  title,
+  dialogDesc: description,
+  issue
+}: DialogProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          {trigger}
+          {/* Edit Profile */}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>
+            See Details
+            {/* Edit profile */}
+          </DialogTitle>
+          <DialogDescription className="text-gray-200">
+            {"You can view and edit the issue's detail here"}
+            {/* Make changes to your profile here. Click save when you're done. */}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="title" className="text-xl text-right">
+              Title
+            </Label>
+            <Input
+              id="title"
+              defaultValue={`${issue.title}`}
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="description" className="text-xl text-right">
+              Description
+            </Label>
+            <div className="col-span-3">
+              <Textarea 
+                className="border border-white min-h-[100px]" 
+                defaultValue={issue.description}
+              />
+            </div>
+            {/* <Input
+              id="description"
+              defaultValue={`${issue.description}`}
+              className="col-span-3 row-span-2"
+            /> */}
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="priority" className="text-xl text-right">
+              Priority
+            </Label>
+            <IssuePriorityCombobox />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx b/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
new file mode 100644
index 0000000..06a080b
--- /dev/null
+++ b/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
@@ -0,0 +1,163 @@
+import type { Document, Project, User } from "@linear/sdk";
+import {
+  type ColumnDef,
+  type SortingState,
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+} from "@tanstack/react-table";
+import { ArrowUpDown } from "lucide-react";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+
+type DocumentData = Pick<Document, "id" | "title"> & {
+  creator: User | undefined;
+  project: Project | undefined;
+};
+
+const columns: ColumnDef<DocumentData>[] = [
+  {
+    accessorKey: "title",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          className="flex flex-row items-center gap-2 p-0 font-bold hover:bg-inherit"
+        >
+          Title
+          <ArrowUpDown className="h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: "project",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          className="flex flex-row items-center gap-2 p-0 font-bold hover:bg-inherit"
+        >
+          Project
+          <ArrowUpDown className="h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: "creator",
+    header: "Creator",
+  },
+  {
+    accessorKey: "generate",
+    header: "Generate Issues",
+  }
+];
+
+interface IssueDocumentTableProps {
+  documents: DocumentData[];
+  handleGenerate: (newValue: boolean) => void;
+}
+
+export const IssueDocumentDataTable: React.FC<IssueDocumentTableProps> = ({
+  documents,
+  handleGenerate
+}) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data: documents,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  });
+
+  const router = useRouter();
+
+  return (
+    <div className="my-8 rounded-md border border-primary-dark">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow
+              key={headerGroup.id}
+              className="bg-primary-dark hover:bg-primary-dark"
+            >
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.length > 0 &&
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+              >
+                {row.getVisibleCells().map((cell) => {
+                  if (cell.column.id === "project") {
+                    return (
+                      <TableCell key={cell.id}>
+                        {cell.row.original.project?.name}
+                      </TableCell>
+                    );
+                  } else if (cell.column.id === "creator") {
+                    return (
+                      <TableCell key={cell.id}>
+                        {cell.row.original.creator?.displayName}
+                      </TableCell>
+                    );
+                  } else if (cell.column.id === "generate") {
+                    return (
+                      <TableCell key={cell.id}>
+                        <div 
+                          className="max-w-[200px] flex justify-center text-white bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
+                          onClick={() => {
+                            handleGenerate(true);
+                          }}
+                        >
+                          Generate
+                        </div>
+                      </TableCell>
+                    )
+                  }
+                  return (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
index 3cac0df..ee2f034 100644
--- a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
+++ b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
@@ -1,7 +1,96 @@
+import React, { useState, useEffect } from "react";
 import { withAuth } from "~/components/withAuth";
 
+
+import axios from "axios";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { api } from "~/utils/api";
+
+import GeneratedIssuesPage from "./GeneratedIssuesPage";
+import { IssueDocumentDataTable } from "~/modules/workspace/issue-generator/IssueDocumentDataTable";
+import { DashboardLayout } from "~/layouts/DashboardLayout";
+import { LoadingHero } from "~/layouts/LoadingHero";
+import { LucideChevronLeft } from "lucide-react";
+
 const IssueGeneratorDashboard = withAuth(() => {
-  return null;
+  const [generated, setGenerated] = useState<boolean>(false);
+
+  const handleGenerate = (val: boolean) => {
+    setGenerated(val);
+  };
+  
+  const router = useRouter();
+
+  const { data: sessionData, isLoading: sessionLoading } =
+    api.user.getSessionInfo.useQuery();
+  
+  const { data: documentsData, isLoading: documentsLoading } =
+    api.workspace.linear.getDocuments.useQuery();
+
+
+  useEffect(() => {
+    if (
+      !sessionLoading &&
+      sessionData?.session?.workspace_id !==
+        router.asPath.replace("/", "").replace("/generate", "")
+    ) {
+      // If the session has changed...
+      void (async function (workspaceId: string, sessionId: string) {
+        await axios.post("/api/auth/update-session", {
+          sessionId,
+          workspaceId,
+        });
+
+        await router.push("/" + workspaceId + "/generate");
+        router.reload();
+      })(
+        router.asPath.replace("/", "").replace("/generate", ""),
+        sessionData!.session!.id,
+      );
+    }
+  }, [sessionData, router, sessionLoading]);
+
+  return (
+    <>
+      <Head>
+      <title>Issue Generator</title>
+        <meta name="description" content="Automate your product backlogs" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <DashboardLayout>
+        { documentsLoading ? (
+          <LoadingHero />
+        ) : generated ? (
+          <main className="flex min-h-screen w-full flex-col p-8">
+            <div className={`flex flex-row justify-between pb-6`}>
+              <h1 className="text-3xl font-bold">Issue Recommendations</h1>
+              <div
+                className="flex items-center gap-x-2  text-white min-w-[60px] bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
+                onClick={() => {
+                  handleGenerate(false)
+                }}
+              >
+                <LucideChevronLeft size={14} />
+                Back
+              </div>
+            </div>
+              <GeneratedIssuesPage
+                handleGenerate={handleGenerate}
+              />
+          </main>
+        ) : (
+          <main className="flex min-h-screen w-full flex-col p-8">
+            <h1 className="text-3xl font-bold">Generate Issues from Documents</h1>
+            <IssueDocumentDataTable 
+              handleGenerate={handleGenerate}
+              documents={documentsData?.documents ?? []} 
+            />
+          </main>
+        )}
+      </DashboardLayout>
+    </>
+  );
 });
 
 export default IssueGeneratorDashboard;
diff --git a/src/modules/workspace/issue-generator/IssuePriorityCombobox.tsx b/src/modules/workspace/issue-generator/IssuePriorityCombobox.tsx
new file mode 100644
index 0000000..1f457e3
--- /dev/null
+++ b/src/modules/workspace/issue-generator/IssuePriorityCombobox.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+import { Button } from "~/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "~/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover"
+
+const priorities = [
+  {
+    value: "urgent",
+    label: "⚠️ Urgent",
+  },
+  {
+    value: "high",
+    label: "High",
+  },
+  {
+    value: "medium",
+    label: "Medium",
+  },
+  {
+    value: "low",
+    label: "Low",
+  },
+  {
+    value: "no_priority",
+    label: "No Priority"
+  }
+]
+
+export function IssuePriorityCombobox() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? priorities.find((priority) => priority.value === value)?.label
+            : "Select priority..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search priority..." />
+          <CommandEmpty>No priority found.</CommandEmpty>
+          <CommandGroup>
+            {priorities.map((priority) => (
+              <CommandItem
+                key={priority.value}
+                value={priority.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === priority.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                <div
+                  className={`text-black ${value === priority.value ? "text-opacity-100" : "text-opacity-70"}`}
+                >
+                  {priority.label}
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/src/modules/workspace/issue-generator/IssuesList.tsx b/src/modules/workspace/issue-generator/IssuesList.tsx
index 1f821d6..6783089 100644
--- a/src/modules/workspace/issue-generator/IssuesList.tsx
+++ b/src/modules/workspace/issue-generator/IssuesList.tsx
@@ -1,19 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-import type { Issue, User, Project } from "@linear/sdk";
+import type { User, Project } from "@linear/sdk";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 
 import PriorityBar from "./PriorityBar";
+import { IssueDialog } from "./IssueDialog";
 
-type IssueData = Pick<Issue, "id" | "priority" | "identifier" | "title" 
-                      | "dueDate" | "createdAt" | "trashed"> & {
-  creator: User | undefined;
-  project: Project | undefined;
+// type IssueData = Pick<Issue, "id" | "priority" | "identifier" | "title" 
+//                       | "dueDate" | "createdAt" | "trashed"> & {
+//   creator: User | undefined;
+//   project: Project | undefined;
+// }
+
+const getPriorityLevel = (pr: string) => {
+  const pl = pr.toLowerCase();
+  if (pl === "urgent") {
+    return 1;
+  }
+
+  if (pl === "high") {
+    return 2;
+  }
+
+  if (pl === "medium") {
+    return 3;
+  }
+
+  return 4;
+}
+
+export type IssueData = {
+  id?: number;
+  title: string;
+  description: string; 
+  priority: string;
+  trashed?: string;
+  identifier?: string;
+  dueDate?: Date;
+  createdAt?: Date;
+  project?: Project;
+  creator?: User;
 }
 
-const IssuesList: React.FC<{ issues: IssueData[]}> = ({
+export const IssuesList: React.FC<{ issues: IssueData[]}> = ({
   issues
 }) => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+  const [dialogData, setDialogData] = useState<IssueData>();
+
   const router = useRouter();
   const [workspaceId] = router.asPath
   .replace("/", "")
@@ -21,22 +55,23 @@ const IssuesList: React.FC<{ issues: IssueData[]}> = ({
   .split("/");
   console.log("Issues", issues);
 
-  
   return (
     <div className="flex flex-col gap-y-2">
       {issues?.map((issue) => {
         if (issue.trashed) {
-         return;
+          return;
         }
 
+        const priorityLevel = getPriorityLevel(issue.priority);
+
         return (
           <div 
             key={issue.id}
-            onClick={() => router.push(`/${workspaceId}/generate/${issue.id}`)}
+            // onClick={() => router.push(`/${workspaceId}/generate/${issue.id}`)}
             className={"w-full text-sm rounded-none rounded-b-none px-4 py-2 min-h-[40px] flex flex-row border-b border-opacity-50 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 text-white font-semibold justify-between items-center hover:cursor-pointer"}
           >
             <div className="flex flex-row gap-x-4 items-center">
-              <PriorityBar priorityLevel={issue.priority} />
+              <PriorityBar priorityLevel={priorityLevel} />
 
               <div>
                 {issue.identifier}
@@ -50,13 +85,13 @@ const IssuesList: React.FC<{ issues: IssueData[]}> = ({
               <div className={`${issue.project?.name && "border border-gray-400 border-opacity-25 py-2 px-3 rounded-full"}`}>
                 {issue.project?.name}
               </div>
-              <div title={`Due ${new Date(issue.dueDate as string).toLocaleDateString()}`} className={`${issue.dueDate && "border border-gray-400 border-opacity-25 p-2 rounded-full"}`}>
-                {issue.dueDate as string}
+              <div title={`Due ${issue.dueDate ? new Date(issue.dueDate as unknown as string).toLocaleDateString() : "N/A"}`} className={`${issue.dueDate && "border border-gray-400 border-opacity-25 p-2 rounded-full"}`}>
+                {issue.dueDate ? issue.dueDate as unknown as string : "N/A"}
               </div>
               <div 
-                title={`Created ${issue.createdAt.toLocaleDateString()}, ${issue.createdAt.toLocaleTimeString()}`} 
+                title={`Created ${issue.createdAt?.toLocaleDateString()}, ${issue.createdAt?.toLocaleTimeString()}`} 
                 className={``}>
-                {issue.createdAt.toLocaleDateString()}
+                {issue.createdAt?.toLocaleDateString()}
               </div>
 
               <Avatar className="h-8 w-8">
@@ -65,19 +100,24 @@ const IssuesList: React.FC<{ issues: IssueData[]}> = ({
                   alt={issue.creator?.name + "avatar"}
                 />
                 <AvatarFallback>
-                  {issue.creator?.name
+                  {issue.creator ? issue.creator?.name
                     ?.split(" ")
                     .map((n) => n[0])
-                    .join("")}
+                    .join("") : "Me"}
                 </AvatarFallback>
               </Avatar>
               {issue.creator?.avatarUrl}
+
+              <IssueDialog
+                trigger="Edit"
+                title={issue.title}
+                dialogDesc={issue.description}
+                issue={issue}
+              />
             </div>
           </div>
         );
       })}
     </div>
   );
-};
-
-export default IssuesList;
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/pages/[workspaceId]/generate/index.tsx b/src/pages/[workspaceId]/generate/index.tsx
index 6a43bb9..90a2666 100644
--- a/src/pages/[workspaceId]/generate/index.tsx
+++ b/src/pages/[workspaceId]/generate/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from "next";
-import GeneratedIssuesPage from "~/modules/workspace/issue-generator/GeneratedIssuesPage";
+import IssueGeneratorDashboard from "~/modules/workspace/issue-generator/IssueGeneratorDashboard";
 
-const IssueGenerator: NextPage = () => <GeneratedIssuesPage />;
+const IssueGenerator: NextPage = () => <IssueGeneratorDashboard />;
 
 export default IssueGenerator;
\ No newline at end of file
diff --git a/src/pages/[workspaceId]/test/index.tsx b/src/pages/[workspaceId]/test/index.tsx
index 303b1b5..b68c580 100644
--- a/src/pages/[workspaceId]/test/index.tsx
+++ b/src/pages/[workspaceId]/test/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { api } from '~/utils/api'
+import { LoadingHero } from '~/layouts/LoadingHero'
 
 const Testing = () => {
   const providerDocumentId = "5c4c13b4-1474-4744-ab57-2557cf48668f"
@@ -13,17 +14,16 @@ const Testing = () => {
 
   return (
     <div>
-      <h1>
-        Result
-      </h1>
       {isLoading ? (
-        <div>Loading..........</div>
+        <LoadingHero />
       )
       : (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        <div>{data?.text.split("\n").map((d: string, k: number)=> <div key={k}>{d}</div>)}</div>
-      )
-      }
+        <div>
+          <h1>Result</h1>
+          {data && JSON.stringify(data)}
+        </div>
+        )}
     </div>
   )
 }

From ae19664b4ff9b254f256b2f8d2e6be25f52be21c Mon Sep 17 00:00:00 2001
From: Jeremy Alva Prathama <jeremyalvax@gmail.com>
Date: Tue, 7 Nov 2023 19:10:11 +0700
Subject: [PATCH 3/4] feat: fix inf loop, add select team and prelude to export
 linear

---
 .../issue-generator/IssueDetailPage.tsx       |  10 --
 .../IssueGeneratorDashboard.tsx               |  23 ++--
 .../workspace/issue-generator/IssuesList.tsx  |   5 +-
 .../issue-generator/TeamSelectionCombobox.tsx |  81 ++++++++++++++
 src/server/api/routers/workspace/issue.ts     | 104 +++++++++++-------
 src/server/api/routers/workspace/linear.ts    |   3 +-
 6 files changed, 162 insertions(+), 64 deletions(-)
 create mode 100644 src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx

diff --git a/src/modules/workspace/issue-generator/IssueDetailPage.tsx b/src/modules/workspace/issue-generator/IssueDetailPage.tsx
index e1add10..c351775 100644
--- a/src/modules/workspace/issue-generator/IssueDetailPage.tsx
+++ b/src/modules/workspace/issue-generator/IssueDetailPage.tsx
@@ -5,7 +5,6 @@ import { api } from "~/utils/api";
 import Head from "next/head";
 import { DashboardLayout } from "~/layouts/DashboardLayout";
 import PriorityBar from "./PriorityBar";
-import { ChevronLeft } from "lucide-react";
 import { Skeleton } from "~/components/ui/skeleton";
 import { withAuth } from "~/components/withAuth";
 
@@ -57,15 +56,6 @@ const IssueDetailPage = withAuth(() => {
       </Head>
       <DashboardLayout>
         <div className={`relative flex flex-col h-screen w-full divide`}>
-          {/* Breadcrumbs */}
-          <div 
-            onClick={() => router.back()}
-            className="absolute max-w-[50px]: p-2 flex flex-row items-center gap-x-2 rounded-lg top-6 left-6 hover:cursor-pointer"
-          >
-            <ChevronLeft size={16} />
-            Issues List
-          </div>
-
           <div className="pt-[100px]"></div>
           {/* Main Editor Space */}
           <div className={`flex flex-col w-full max-w-3/4 pt-18 pb-12 px-6`}>
diff --git a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
index ee2f034..ed192c4 100644
--- a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
+++ b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
@@ -11,7 +11,8 @@ import GeneratedIssuesPage from "./GeneratedIssuesPage";
 import { IssueDocumentDataTable } from "~/modules/workspace/issue-generator/IssueDocumentDataTable";
 import { DashboardLayout } from "~/layouts/DashboardLayout";
 import { LoadingHero } from "~/layouts/LoadingHero";
-import { LucideChevronLeft } from "lucide-react";
+import { Icon } from "@iconify/react";
+import { TeamSelectionCombobox } from "./TeamSelectionCombobox";
 
 const IssueGeneratorDashboard = withAuth(() => {
   const [generated, setGenerated] = useState<boolean>(false);
@@ -65,14 +66,18 @@ const IssueGeneratorDashboard = withAuth(() => {
           <main className="flex min-h-screen w-full flex-col p-8">
             <div className={`flex flex-row justify-between pb-6`}>
               <h1 className="text-3xl font-bold">Issue Recommendations</h1>
-              <div
-                className="flex items-center gap-x-2  text-white min-w-[60px] bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
-                onClick={() => {
-                  handleGenerate(false)
-                }}
-              >
-                <LucideChevronLeft size={14} />
-                Back
+              <div className="flex items-center gap-x-4">
+                {/* Select team + Export to linear */}
+                <TeamSelectionCombobox />
+                <div
+                  className="flex items-center gap-x-2  text-white min-w-[60px] bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
+                  onClick={() => {
+                    handleGenerate(false)
+                  }}
+                >
+                  <Icon icon="mingcute:linear-fill" fontSize={20} />
+                  Export to Linear
+                </div>
               </div>
             </div>
               <GeneratedIssuesPage
diff --git a/src/modules/workspace/issue-generator/IssuesList.tsx b/src/modules/workspace/issue-generator/IssuesList.tsx
index 6783089..8839381 100644
--- a/src/modules/workspace/issue-generator/IssuesList.tsx
+++ b/src/modules/workspace/issue-generator/IssuesList.tsx
@@ -12,7 +12,7 @@ import { IssueDialog } from "./IssueDialog";
 //   project: Project | undefined;
 // }
 
-const getPriorityLevel = (pr: string) => {
+export const getIssuePriorityLevel = (pr: string) => {
   const pl = pr.toLowerCase();
   if (pl === "urgent") {
     return 1;
@@ -62,12 +62,11 @@ export const IssuesList: React.FC<{ issues: IssueData[]}> = ({
           return;
         }
 
-        const priorityLevel = getPriorityLevel(issue.priority);
+        const priorityLevel = getIssuePriorityLevel(issue.priority);
 
         return (
           <div 
             key={issue.id}
-            // onClick={() => router.push(`/${workspaceId}/generate/${issue.id}`)}
             className={"w-full text-sm rounded-none rounded-b-none px-4 py-2 min-h-[40px] flex flex-row border-b border-opacity-50 border-gray-500 hover:bg-gray-500 hover:bg-opacity-20 text-white font-semibold justify-between items-center hover:cursor-pointer"}
           >
             <div className="flex flex-row gap-x-4 items-center">
diff --git a/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx b/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx
new file mode 100644
index 0000000..d3d47fc
--- /dev/null
+++ b/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx
@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+import { Button } from "~/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "~/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover"
+import { api } from "~/utils/api"
+import { Team } from "@linear/sdk"
+
+export function TeamSelectionCombobox() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  const { data: teams, isLoading: teamIsLoading } = 
+    api.workspace.linear.getTeams.useQuery(undefined, {
+      refetchOnWindowFocus: false
+    });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? teams?.find((team) => team.id === value)?.name
+            : "Select team..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search team..." />
+          <CommandEmpty>No team found.</CommandEmpty>
+          <CommandGroup>
+            {teams?.map((team) => (
+              <CommandItem
+                key={team.id}
+                value={team.id}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === team.id ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                <div
+                  className={`text-black ${value === team.id ? "text-opacity-100" : "text-opacity-70"}`}
+                >
+                  {team.name}
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/src/server/api/routers/workspace/issue.ts b/src/server/api/routers/workspace/issue.ts
index e6dadee..f92da98 100644
--- a/src/server/api/routers/workspace/issue.ts
+++ b/src/server/api/routers/workspace/issue.ts
@@ -7,7 +7,12 @@ import { documents } from "~/server/db/schema";
 import { and, eq } from "drizzle-orm";
 
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
-import { generatedIssues, generatedIssueDetail } from "~/server/db/schema";
+import { 
+  sessions, users, workspaces,
+
+  generatedIssues, generatedIssueDetail 
+} from "~/server/db/schema";
+
 import { TRPCError } from "@trpc/server";
 
 // Vector DB
@@ -31,6 +36,8 @@ import type { ChainValues } from "langchain/dist/schema";
 
 // Others
 import * as Questions from "~/server/api/routers/workspace/generator/generatorQuestions";
+import { api } from "~/utils/api";
+import { getIssuePriorityLevel } from "~/modules/workspace/issue-generator/IssuesList";
 
 
 export const issueRouter = createTRPCRouter({
@@ -97,8 +104,6 @@ export const issueRouter = createTRPCRouter({
     
       // 1. Document Context Retrieval
       // Create message to initiate embedding retrieval
-      
-    
       // QA_1: Background
       const backgroundEmbedding = new Float32Array(
         await embeddingModel.embedQuery(Questions.backgroundQuestion),
@@ -164,6 +169,9 @@ export const issueRouter = createTRPCRouter({
         question: Questions.condenseQuestionTemplate
       }); 
 
+      // Store to db
+      // TODO
+
       let result;
       result = finalResponse.text as string;
       result = JSON.parse(result) as JSON;
@@ -175,48 +183,62 @@ export const issueRouter = createTRPCRouter({
     .input(
       z.object({
         providerIssueId: z.string(),
-        issueId: z.string(),
+        teamId: z.string(),
+        // TODO for now add issue to speed up dev
+        issue: z.object({
+          title: z.string(),
+          description: z.string(),
+          priority: z.string()
+        }),
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      await ctx.db.transaction(async (tx) => {
-        const issueMetadataRes = await tx
-          .select()
-          .from(generatedIssues)
-          .where(eq(generatedIssues.id, input.issueId))
-          .limit(1);
-
-        if (issueMetadataRes.length < 1) {
-          throw new TRPCError({
-            code: "NOT_FOUND",
-            message: "Issue Metadata not found",
-          });
-        }
-
-        const issueMetadata = issueMetadataRes[0];
-
-        const issueDetailRes = await tx
-          .select()
-          .from(generatedIssueDetail)
-          .where(eq(generatedIssueDetail.issueId, input.issueId))
-          .limit(1);
-
-        if (issueDetailRes.length < 1) {
-          throw new TRPCError({
-            code: "NOT_FOUND",
-            message: "Issue not found",
-          });
-        }
-
-        const issueDetail = issueDetailRes[0];
-
-        await ctx.linearClient?.createIssue({
-          teamId: issueMetadata?.teamId ?? "",
-          title: issueDetail?.title,
-          description: issueDetail?.description,
-          priority: issueDetail?.priority,
-        });
+      await ctx.linearClient?.createIssue({
+        teamId: input.teamId,
+        title: input.issue.title,
+        description: input.issue.description,
+        priority: getIssuePriorityLevel(input.issue.priority),
       });
+
+      // NOTE - DONT DELETE - for now gausah query dari db dulu. Lgsg terima suggestions dari LLM
+      // await ctx.db.transaction(async (tx) => {
+      //   const issueMetadataRes = await tx
+      //     .select()
+      //     .from(generatedIssues)
+      //     .where(eq(generatedIssues.id, input.issueId))
+      //     .limit(1);
+
+      //   if (issueMetadataRes.length < 1) {
+      //     throw new TRPCError({
+      //       code: "NOT_FOUND",
+      //       message: "Issue Metadata not found",
+      //     });
+      //   }
+
+      //   const issueMetadata = issueMetadataRes[0];
+
+      //   const issueDetailRes = await tx
+      //     .select()
+      //     .from(generatedIssueDetail)
+      //     .where(eq(generatedIssueDetail.issueId, input.issueId))
+      //     .limit(1);
+
+      //   if (issueDetailRes.length < 1) {
+      //     throw new TRPCError({
+      //       code: "NOT_FOUND",
+      //       message: "Issue not found",
+      //     });
+      //   }
+
+      //   const issueDetail = issueDetailRes[0];
+
+        // await ctx.linearClient?.createIssue({
+        //   teamId: issueMetadata?.teamId ?? "",
+        //   title: issueDetail?.title,
+        //   description: issueDetail?.description,
+        //   priority: issueDetail?.priority,
+        // });
+      // });
     }),
 });
 
diff --git a/src/server/api/routers/workspace/linear.ts b/src/server/api/routers/workspace/linear.ts
index 65bac67..c8139db 100644
--- a/src/server/api/routers/workspace/linear.ts
+++ b/src/server/api/routers/workspace/linear.ts
@@ -7,7 +7,8 @@ export const linearRouter = createTRPCRouter({
   getTeams: linearProcedure.query(async ({ ctx }) => {
     const res = await ctx.linearClient.teams();
 
-    return { meta: res.pageInfo, teams: res.nodes };
+    // return { meta: res.pageInfo, teams: res.nodes };
+    return res.nodes;
   }),
 
   getTeamById: linearProcedure

From 6603fa14ee93f3011b30087f4f90b90c5d69ae42 Mon Sep 17 00:00:00 2001
From: Jeremy Alva Prathama <jeremyalvax@gmail.com>
Date: Tue, 7 Nov 2023 21:19:03 +0700
Subject: [PATCH 4/4] feat: export to linear successful!

---
 .../issue-generator/GeneratedIssuesPage.tsx   | 38 ++++++++----
 .../IssueDocumentDataTable.tsx                |  4 +-
 .../IssueGeneratorDashboard.tsx               | 58 +++++++++++++------
 .../issue-generator/TeamSelectionCombobox.tsx | 11 ++--
 src/server/api/routers/workspace/issue.ts     |  3 +-
 5 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx b/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
index 91120d5..d205ddb 100644
--- a/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
+++ b/src/modules/workspace/issue-generator/GeneratedIssuesPage.tsx
@@ -12,8 +12,13 @@ import { DashboardLayout } from "~/layouts/DashboardLayout";
 import { LoadingHero } from "~/layouts/LoadingHero";
 import { IssuesList, type IssueData } from "./IssuesList";
 
+import { Icon } from "@iconify/react";
+import { TeamSelectionCombobox } from "./TeamSelectionCombobox";
+
 interface GeneratedIssuesPageProps {
-  handleGenerate: (newValue: boolean) => void;
+  docId: string;
+  handleSelectTeam: (id: string) => void;
+  exportLinearDriver: (issues: IssueData[]) => void;
 }
 
 const jsonToObjArray = (j: JSON): IssueData[] => {
@@ -34,14 +39,12 @@ const jsonToObjArray = (j: JSON): IssueData[] => {
 }
 
 const GeneratedIssuesPage: React.FC<GeneratedIssuesPageProps> = ({
-  handleGenerate
+  docId: documentId,
+  handleSelectTeam,
+  exportLinearDriver
 }) => {
-  const router = useRouter();
-
   // const { data: sessionData, isLoading: sessionLoading } =
-    api.user.getSessionInfo.useQuery();
-
-  const documentId = "5c4c13b4-1474-4744-ab57-2557cf48668f";
+    // api.user.getSessionInfo.useQuery();
 
   const { data: GeneratedIssuesData, isLoading: generatedIssuesLoading } =
     api.workspace.issue.generateIssueRecommendations.useQuery({
@@ -53,8 +56,6 @@ const GeneratedIssuesPage: React.FC<GeneratedIssuesPageProps> = ({
   let generatedIssues: IssueData[] = [];
   if (GeneratedIssuesData) {
     generatedIssues = jsonToObjArray(GeneratedIssuesData);
-
-
     console.log("generatedIssues", generatedIssues);
   }
 
@@ -65,9 +66,24 @@ const GeneratedIssuesPage: React.FC<GeneratedIssuesPageProps> = ({
       ) : (
         <div>
           {GeneratedIssuesData ? (
-            <IssuesList issues={generatedIssues ?? []} />
-          ) : (
             <div>
+              <div className="flex items-center gap-x-4">
+                {/* Select team + Export to linear */}
+                <TeamSelectionCombobox 
+                  handleSelectTeam={handleSelectTeam}
+                />
+                <div
+                  className="flex items-center gap-x-2  text-white min-w-[50px] bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
+                  onClick={() => exportLinearDriver(generatedIssues)}
+                >
+                  <Icon icon="mingcute:linear-fill" fontSize={20} />
+                  Export to Linear
+                </div>
+              </div>
+              <IssuesList issues={generatedIssues ?? []} />
+            </div>
+          ) : (
+            <div className="flex flex-row items-center text-xl">
               There seems to be a problem while displaying your issues
             </div>
           )}
diff --git a/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx b/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
index 06a080b..c19dd5a 100644
--- a/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
+++ b/src/modules/workspace/issue-generator/IssueDocumentDataTable.tsx
@@ -68,7 +68,7 @@ const columns: ColumnDef<DocumentData>[] = [
 
 interface IssueDocumentTableProps {
   documents: DocumentData[];
-  handleGenerate: (newValue: boolean) => void;
+  handleGenerate: (val: boolean, docId: string) => void;
 }
 
 export const IssueDocumentDataTable: React.FC<IssueDocumentTableProps> = ({
@@ -137,7 +137,7 @@ export const IssueDocumentDataTable: React.FC<IssueDocumentTableProps> = ({
                         <div 
                           className="max-w-[200px] flex justify-center text-white bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
                           onClick={() => {
-                            handleGenerate(true);
+                            handleGenerate(true, cell.row.original.id);
                           }}
                         >
                           Generate
diff --git a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
index ed192c4..163fff0 100644
--- a/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
+++ b/src/modules/workspace/issue-generator/IssueGeneratorDashboard.tsx
@@ -11,15 +11,50 @@ import GeneratedIssuesPage from "./GeneratedIssuesPage";
 import { IssueDocumentDataTable } from "~/modules/workspace/issue-generator/IssueDocumentDataTable";
 import { DashboardLayout } from "~/layouts/DashboardLayout";
 import { LoadingHero } from "~/layouts/LoadingHero";
-import { Icon } from "@iconify/react";
-import { TeamSelectionCombobox } from "./TeamSelectionCombobox";
+
+import { IssueData } from "./IssuesList";
 
 const IssueGeneratorDashboard = withAuth(() => {
   const [generated, setGenerated] = useState<boolean>(false);
+  const [selectedDocId, setSelectedDocId] = useState<string>("");
+  const [selectedTeamId, setSelectedTeamId] = useState<string>("");
+  const { mutate } = api.workspace.issue.exportGeneratedIssue.useMutation();
 
-  const handleGenerate = (val: boolean) => {
+  const handleGenerate = (val: boolean, docId: string) => {
     setGenerated(val);
+    setSelectedDocId(docId);
+  };
+
+  const handleSelectTeam = (id: string) => {
+    setSelectedTeamId(id);
   };
+
+  const handleExportLinear = (teamId: string, issue: IssueData) => {
+    mutate({
+      teamId: teamId,
+      issue: {
+        title: issue.title,
+        description: issue.description,
+        priority: issue.priority
+      }
+    });
+  };
+
+  const exportLinearDriver = (issues: IssueData[]) => {
+    if (selectedTeamId === "" 
+        || issues === undefined 
+        || issues.length === 0) {
+          console.log("exportLinearDriver failed to execute");
+          return;
+        }
+
+    const recommendations: IssueData[] = issues;
+    console.log("exportLinearDriver.reccomendations", recommendations);
+    recommendations.map((recs) => {
+      console.log(`Exporting issue: ${recs.title}`);
+      handleExportLinear(selectedTeamId, recs);
+    });
+  }
   
   const router = useRouter();
 
@@ -66,22 +101,11 @@ const IssueGeneratorDashboard = withAuth(() => {
           <main className="flex min-h-screen w-full flex-col p-8">
             <div className={`flex flex-row justify-between pb-6`}>
               <h1 className="text-3xl font-bold">Issue Recommendations</h1>
-              <div className="flex items-center gap-x-4">
-                {/* Select team + Export to linear */}
-                <TeamSelectionCombobox />
-                <div
-                  className="flex items-center gap-x-2  text-white min-w-[60px] bg-white bg-opacity-30 border border-primary-500 p-2 text-lg rounded-lg hover:cursor-pointer"
-                  onClick={() => {
-                    handleGenerate(false)
-                  }}
-                >
-                  <Icon icon="mingcute:linear-fill" fontSize={20} />
-                  Export to Linear
-                </div>
-              </div>
             </div>
               <GeneratedIssuesPage
-                handleGenerate={handleGenerate}
+                docId={selectedDocId}
+                handleSelectTeam={handleSelectTeam}
+                exportLinearDriver={exportLinearDriver}
               />
           </main>
         ) : (
diff --git a/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx b/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx
index d3d47fc..2a0dfd2 100644
--- a/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx
+++ b/src/modules/workspace/issue-generator/TeamSelectionCombobox.tsx
@@ -22,10 +22,12 @@ import {
 import { api } from "~/utils/api"
 import { Team } from "@linear/sdk"
 
-export function TeamSelectionCombobox() {
+export function TeamSelectionCombobox({
+  handleSelectTeam
+}: { handleSelectTeam?: (id: string) => void }) {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState("")
-
+  
   const { data: teams, isLoading: teamIsLoading } = 
     api.workspace.linear.getTeams.useQuery(undefined, {
       refetchOnWindowFocus: false
@@ -56,8 +58,9 @@ export function TeamSelectionCombobox() {
                 key={team.id}
                 value={team.id}
                 onSelect={(currentValue) => {
-                  setValue(currentValue === value ? "" : currentValue)
-                  setOpen(false)
+                  setValue(currentValue === value ? "" : currentValue);
+                  handleSelectTeam && handleSelectTeam(currentValue === value ? "" : currentValue);
+                  setOpen(false);
                 }}
               >
                 <Check
diff --git a/src/server/api/routers/workspace/issue.ts b/src/server/api/routers/workspace/issue.ts
index f92da98..018b588 100644
--- a/src/server/api/routers/workspace/issue.ts
+++ b/src/server/api/routers/workspace/issue.ts
@@ -182,7 +182,8 @@ export const issueRouter = createTRPCRouter({
   exportGeneratedIssue: protectedProcedure
     .input(
       z.object({
-        providerIssueId: z.string(),
+        // providerIssueId: z.string(),
+        
         teamId: z.string(),
         // TODO for now add issue to speed up dev
         issue: z.object({