clerk setup

.vscode/settings.json

@@ -1,26 +1,31 @@
 {
-	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-	"sort-imports.default-sort-style": "module-scoped",
-	"js/ts.implicitProjectConfig.checkJs": true,
-	"typescript.tsdk": "node_modules\\typescript\\lib",
-	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
-	},
-	"[javascriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
-	},
-	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
-	},
-	"[typescriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
-	},
-	"dart.debugExternalPackageLibraries": true,
-	"dart.debugSdkLibraries": true,
-	"git.autoRepositoryDetection": "subFolders",
-	"postman.settings.dotenv-detection-notification-visibility": false
-}
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "sort-imports.default-sort-style": "module-scoped",
+  "js/ts.implicitProjectConfig.checkJs": true,
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "dart.debugExternalPackageLibraries": true,
+  "dart.debugSdkLibraries": true,
+  "git.autoRepositoryDetection": "subFolders",
+  "postman.settings.dotenv-detection-notification-visibility": false
+}

src/app/(root)/dashboard/[fileid]/page.tsx

@@ -47,11 +47,11 @@ const Page = async ({ params }: PageProps) => {
     );
 
   return (
-    <div className="flex h-[calc(100vh-3.5rem)] flex-col overflow-hidden">
-      <div className="mx-auto flex h-full w-full max-w-8xl lg:flex xl:px-4">
+    <div className="h-[calc(100vh-3.5rem)] ">
+      <div className="mx-auto h-full w-full grid grid-cols-1 lg:grid-cols-2 gap-6 lg:overflow-hidden">
         {/* PDF Column */}
         <div className="flex-1 xl:flex overflow-hidden">
-          <div className="flex-1 px-4 py-6 sm:px-6 lg:pl-8 xl:pl-6 overflow-hidden">
+          <div className="flex-1  overflow-hidden">
             <PdfRenderer url={file.url} />
           </div>
         </div>

src/app/(root)/dashboard/page.tsx

@@ -3,8 +3,8 @@ import UploadButton from '@/components/UploadButton';
 
 const Dashboard = () => {
   return (
-    <main className="mx-auto max-w-7xl md:p-10 flex flex-col">
-      <div className="mt-8 flex flex-col  justify-end gap-4 border-b border-gray-200 pb-5">
+    <main className="flex flex-col">
+      <div className="mt-8 flex flex-col justify-end gap-4 border-b border-gray-200 pb-5">
         <h1 className="mb-3 font-bold text-5xl text-gray-900">My Files</h1>
 
         <div className="flex justify-end">

src/app/(root)/layout.tsx

@@ -7,7 +7,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main>
+    <main className="max-w-6xl mx-auto lg:px-0 px-7">
       <Navbar />
       {children}
     </main>

src/components/Navbar.tsx

@@ -1,69 +1,28 @@
 'use client';
 
-import {
-  SignedIn,
-  SignedOut,
-  SignInButton,
-  UserButton,
-  useUser,
-} from '@clerk/nextjs';
-import { ArrowRight } from 'lucide-react';
+import { SignedIn, UserButton, SignedOut } from '@clerk/nextjs';
 import Link from 'next/link';
 
-import MaxWidthWrapper from './MaxWidthWrapper';
-import MobileNav from './MobileNav';
-import { Button, buttonVariants } from './ui/button';
-import { Skeleton } from './ui/skeleton';
+import { Button } from './ui/button';
 
 const Navbar = () => {
-  const { user, isLoaded } = useUser();
-
   return (
-    <nav className="sticky h-14 inset-x-0 top-0 z-30 w-full border-b border-gray-200 bg-white/75 backdrop-blur-lg transition-all">
-      <MaxWidthWrapper>
-        <div className="flex h-14 items-center justify-between border-b border-zinc-200">
-          <Link href="/" className="flex z-40 font-semibold">
-            <span className="text-lg">TextTalk</span>
+    <nav className="sticky h-14 inset-x-0 top-0 z-30 w-full max-w-6xl mx-auto">
+      <div className="flex h-14 items-center justify-between  border-zinc-200">
+        <Link href="/" className="flex z-40 font-semibold">
+          <span className="text-lg">TextTalk</span>
+        </Link>
+
+        <SignedIn>
+          <UserButton />
+        </SignedIn>
+
+        <SignedOut>
+          <Link href="/sign-in">
+            <Button className="cursor-pointer">Login</Button>
           </Link>
-
-          <MobileNav isAuth={!!user} />
-
-          <div className="hidden items-center space-x-4 sm:flex">
-            {!isLoaded ? (
-              <>
-                <Skeleton className="h-9 w-20 bg-zinc-300" />
-                <Skeleton className="h-10 w-32 bg-zinc-300" />
-              </>
-            ) : (
-              <>
-                <SignedOut>
-                  <SignInButton>
-                    <Button size="sm">Sign in</Button>
-                  </SignInButton>
-                  <SignInButton>
-                    <Button>
-                      Get started <ArrowRight className="ml-1.5 h-5 w-5" />
-                    </Button>
-                  </SignInButton>
-                </SignedOut>
-
-                <SignedIn>
-                  <Link
-                    href="/dashboard"
-                    className={buttonVariants({
-                      variant: 'ghost',
-                      size: 'sm',
-                    })}
-                  >
-                    Dashboard
-                  </Link>
-                  <UserButton />
-                </SignedIn>
-              </>
-            )}
-          </div>
-        </div>
-      </MaxWidthWrapper>
+        </SignedOut>
+      </div>
     </nav>
   );
 };

src/components/PostHogProvider.tsx

@@ -1,29 +1,17 @@
+// app/providers.tsx
 'use client';
 
-import posthogClient from 'posthog-js';
+import { posthog as posthogjs } from 'posthog-js';
 import { PostHogProvider as PHProvider } from 'posthog-js/react';
 import { useEffect } from 'react';
 
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  const isProd = process.env.NODE_ENV === 'production';
   useEffect(() => {
-    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-
-    if (!isProd) {
-      posthogClient.opt_out_capturing?.();
-      return;
-    }
-
-    if (!key) return;
-
-    posthogClient.init(key, {
-      api_host: '/ingest',
-      ui_host: 'https://us.posthog.com',
-      capture_exceptions: true, // Enable PostHog error tracking
-      debug: false,
+    posthogjs.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      defaults: '2025-05-24',
     });
-  }, [isProd]);
+  }, []);
 
-  if (!isProd) return <>{children}</>;
-  return <PHProvider client={posthogClient}>{children}</PHProvider>;
+  return <PHProvider client={posthogjs}>{children}</PHProvider>;
 }

src/components/chat/ChatComponent.tsx

@@ -20,7 +20,7 @@ import { Button, buttonVariants } from '../ui/button';
 import { Textarea } from '../ui/textarea';
 
 import SelectLanguage from './SelectLanguage';
-import MessageItem from './messages/MessageItem';
+import { MessageItem } from './messages';
 
 const ChatComponent = ({ file }: { file: File }) => {
   const [input, setInput] = useState('');
@@ -60,8 +60,8 @@ const ChatComponent = ({ file }: { file: File }) => {
       }),
     {
       getNextPageParam: (lastPage) => lastPage.cursor,
-      staleTime: 60 * 1000,
-      cacheTime: 5 * 60 * 1000,
+      staleTime: Infinity,
+      cacheTime: Infinity,
     }
   );
 
@@ -232,6 +232,12 @@ const ChatComponent = ({ file }: { file: File }) => {
             <Textarea
               value={input}
               onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  handleSubmit(e);
+                }
+              }}
               placeholder="Ask about your PDF"
               disabled={
                 liveStatus === 'streaming' || liveStatus === 'submitted'