From 469158ed2f0839a2918993f334acd3e05d06a9a9 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 18:29:34 -0400
Subject: [PATCH 01/11] Init

---
 .env.example             |  10 +-
 .gitignore               |   1 +
 app/layout.tsx           |   8 +-
 components/providers.tsx |  13 +-
 lib/chat/actions.tsx     | 326 +--------------------------------------
 middleware.ts            |   6 +-
 package.json             |   1 +
 pnpm-lock.yaml           | 170 ++++++++++++++++++++
 8 files changed, 207 insertions(+), 328 deletions(-)

diff --git a/.env.example b/.env.example
index 098f3f62d..4de4ec6df 100644
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,10 @@
-# You must first activate a Billing Account here: https://platform.openai.com/account/billing/overview
-# Then get your OpenAI API Key here: https://platform.openai.com/account/api-keys
-OPENAI_API_KEY=XXXXXXXX
+
+# Get your Tune Studio API Key here: https://tune.studio/account/api-keys
+TUNE_STUDIO_API_KEY=XXXXXXXX
+
+# Clerk
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=XXXXXXXX
+CLERK_SECRET=XXXXXXXX
 
 # Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
 AUTH_SECRET=XXXXXXXX
diff --git a/.gitignore b/.gitignore
index dd019e403..229eee340 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ yarn-error.log*
 
 # local env files
 .env.local
+.env
 .env.development.local
 .env.test.local
 .env.production.local
diff --git a/app/layout.tsx b/app/layout.tsx
index a32b2230f..26cd02189 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,7 @@ import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { Providers } from '@/components/providers'
 import { Header } from '@/components/header'
 import { Toaster } from '@/components/ui/sonner'
+import { ClerkProvider, SignedIn, SignedOut, SignInButton } from '@clerk/nextjs'
 
 export const metadata = {
   metadataBase: process.env.VERCEL_URL
@@ -54,7 +55,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           <div className="flex flex-col min-h-screen">
             <Header />
-            <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
+            <main className="flex flex-col flex-1 bg-muted/50">
+              <SignedIn>{children}</SignedIn>
+              <SignedOut>
+                <SignInButton />
+              </SignedOut>
+            </main>
           </div>
           <TailwindIndicator />
         </Providers>
diff --git a/components/providers.tsx b/components/providers.tsx
index 0a8de4a15..4a9ca9915 100644
--- a/components/providers.tsx
+++ b/components/providers.tsx
@@ -5,13 +5,16 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
 import { SidebarProvider } from '@/lib/hooks/use-sidebar'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { ClerkProvider } from '@clerk/nextjs'
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
-    <NextThemesProvider {...props}>
-      <SidebarProvider>
-        <TooltipProvider>{children}</TooltipProvider>
-      </SidebarProvider>
-    </NextThemesProvider>
+    <ClerkProvider>
+      <NextThemesProvider {...props}>
+        <SidebarProvider>
+          <TooltipProvider>{children}</TooltipProvider>
+        </SidebarProvider>
+      </NextThemesProvider>
+    </ClerkProvider>
   )
 }
diff --git a/lib/chat/actions.tsx b/lib/chat/actions.tsx
index ca6de3d81..ab27c59bd 100644
--- a/lib/chat/actions.tsx
+++ b/lib/chat/actions.tsx
@@ -8,8 +8,7 @@ import {
   streamUI,
   createStreamableValue
 } from 'ai/rsc'
-import { openai } from '@ai-sdk/openai'
-
+import { createOpenAI } from '@ai-sdk/openai'
 import {
   spinner,
   BotCard,
@@ -36,6 +35,11 @@ import { SpinnerMessage, UserMessage } from '@/components/stocks/message'
 import { Chat, Message } from '@/lib/types'
 import { auth } from '@/auth'
 
+const openai = createOpenAI({
+  baseURL: 'https://proxy.tune.app',
+  apiKey: process.env.TUNE_STUDIO_API_KEY
+})
+
 async function confirmPurchase(symbol: string, price: number, amount: number) {
   'use server'
 
@@ -127,23 +131,9 @@ async function submitUserMessage(content: string) {
   let textNode: undefined | React.ReactNode
 
   const result = await streamUI({
-    model: openai('gpt-3.5-turbo'),
+    model: openai('meta/llama-3.1-8b-instruct'),
     initial: <SpinnerMessage />,
-    system: `\
-    You are a stock trading conversation bot and you can help users buy stocks, step by step.
-    You and the user can discuss stock prices and the user can adjust the amount of stocks they want to buy, or place an order, in the UI.
-    
-    Messages inside [] means that it's a UI element or a user event. For example:
-    - "[Price of AAPL = 100]" means that an interface of the stock price of AAPL is shown to the user.
-    - "[User has changed the amount of AAPL to 10]" means that the user has changed the amount of AAPL to 10 in the UI.
-    
-    If the user requests purchasing a stock, call \`show_stock_purchase_ui\` to show the purchase UI.
-    If the user just wants the price, call \`show_stock_price\` to show the price.
-    If you want to show trending stocks, call \`list_stocks\`.
-    If you want to show events, call \`get_events\`.
-    If the user wants to sell stock, or complete another impossible task, respond that you are a demo and cannot do that.
-    
-    Besides that, you can also chat with users and do some calculations if needed.`,
+    system: `Only reply with the letter "a""`,
     messages: [
       ...aiState.get().messages.map((message: any) => ({
         role: message.role,
@@ -175,306 +165,6 @@ async function submitUserMessage(content: string) {
       }
 
       return textNode
-    },
-    tools: {
-      listStocks: {
-        description: 'List three imaginary stocks that are trending.',
-        parameters: z.object({
-          stocks: z.array(
-            z.object({
-              symbol: z.string().describe('The symbol of the stock'),
-              price: z.number().describe('The price of the stock'),
-              delta: z.number().describe('The change in price of the stock')
-            })
-          )
-        }),
-        generate: async function* ({ stocks }) {
-          yield (
-            <BotCard>
-              <StocksSkeleton />
-            </BotCard>
-          )
-
-          await sleep(1000)
-
-          const toolCallId = nanoid()
-
-          aiState.done({
-            ...aiState.get(),
-            messages: [
-              ...aiState.get().messages,
-              {
-                id: nanoid(),
-                role: 'assistant',
-                content: [
-                  {
-                    type: 'tool-call',
-                    toolName: 'listStocks',
-                    toolCallId,
-                    args: { stocks }
-                  }
-                ]
-              },
-              {
-                id: nanoid(),
-                role: 'tool',
-                content: [
-                  {
-                    type: 'tool-result',
-                    toolName: 'listStocks',
-                    toolCallId,
-                    result: stocks
-                  }
-                ]
-              }
-            ]
-          })
-
-          return (
-            <BotCard>
-              <Stocks props={stocks} />
-            </BotCard>
-          )
-        }
-      },
-      showStockPrice: {
-        description:
-          'Get the current stock price of a given stock or currency. Use this to show the price to the user.',
-        parameters: z.object({
-          symbol: z
-            .string()
-            .describe(
-              'The name or symbol of the stock or currency. e.g. DOGE/AAPL/USD.'
-            ),
-          price: z.number().describe('The price of the stock.'),
-          delta: z.number().describe('The change in price of the stock')
-        }),
-        generate: async function* ({ symbol, price, delta }) {
-          yield (
-            <BotCard>
-              <StockSkeleton />
-            </BotCard>
-          )
-
-          await sleep(1000)
-
-          const toolCallId = nanoid()
-
-          aiState.done({
-            ...aiState.get(),
-            messages: [
-              ...aiState.get().messages,
-              {
-                id: nanoid(),
-                role: 'assistant',
-                content: [
-                  {
-                    type: 'tool-call',
-                    toolName: 'showStockPrice',
-                    toolCallId,
-                    args: { symbol, price, delta }
-                  }
-                ]
-              },
-              {
-                id: nanoid(),
-                role: 'tool',
-                content: [
-                  {
-                    type: 'tool-result',
-                    toolName: 'showStockPrice',
-                    toolCallId,
-                    result: { symbol, price, delta }
-                  }
-                ]
-              }
-            ]
-          })
-
-          return (
-            <BotCard>
-              <Stock props={{ symbol, price, delta }} />
-            </BotCard>
-          )
-        }
-      },
-      showStockPurchase: {
-        description:
-          'Show price and the UI to purchase a stock or currency. Use this if the user wants to purchase a stock or currency.',
-        parameters: z.object({
-          symbol: z
-            .string()
-            .describe(
-              'The name or symbol of the stock or currency. e.g. DOGE/AAPL/USD.'
-            ),
-          price: z.number().describe('The price of the stock.'),
-          numberOfShares: z
-            .number()
-            .optional()
-            .describe(
-              'The **number of shares** for a stock or currency to purchase. Can be optional if the user did not specify it.'
-            )
-        }),
-        generate: async function* ({ symbol, price, numberOfShares = 100 }) {
-          const toolCallId = nanoid()
-
-          if (numberOfShares <= 0 || numberOfShares > 1000) {
-            aiState.done({
-              ...aiState.get(),
-              messages: [
-                ...aiState.get().messages,
-                {
-                  id: nanoid(),
-                  role: 'assistant',
-                  content: [
-                    {
-                      type: 'tool-call',
-                      toolName: 'showStockPurchase',
-                      toolCallId,
-                      args: { symbol, price, numberOfShares }
-                    }
-                  ]
-                },
-                {
-                  id: nanoid(),
-                  role: 'tool',
-                  content: [
-                    {
-                      type: 'tool-result',
-                      toolName: 'showStockPurchase',
-                      toolCallId,
-                      result: {
-                        symbol,
-                        price,
-                        numberOfShares,
-                        status: 'expired'
-                      }
-                    }
-                  ]
-                },
-                {
-                  id: nanoid(),
-                  role: 'system',
-                  content: `[User has selected an invalid amount]`
-                }
-              ]
-            })
-
-            return <BotMessage content={'Invalid amount'} />
-          } else {
-            aiState.done({
-              ...aiState.get(),
-              messages: [
-                ...aiState.get().messages,
-                {
-                  id: nanoid(),
-                  role: 'assistant',
-                  content: [
-                    {
-                      type: 'tool-call',
-                      toolName: 'showStockPurchase',
-                      toolCallId,
-                      args: { symbol, price, numberOfShares }
-                    }
-                  ]
-                },
-                {
-                  id: nanoid(),
-                  role: 'tool',
-                  content: [
-                    {
-                      type: 'tool-result',
-                      toolName: 'showStockPurchase',
-                      toolCallId,
-                      result: {
-                        symbol,
-                        price,
-                        numberOfShares
-                      }
-                    }
-                  ]
-                }
-              ]
-            })
-
-            return (
-              <BotCard>
-                <Purchase
-                  props={{
-                    numberOfShares,
-                    symbol,
-                    price: +price,
-                    status: 'requires_action'
-                  }}
-                />
-              </BotCard>
-            )
-          }
-        }
-      },
-      getEvents: {
-        description:
-          'List funny imaginary events between user highlighted dates that describe stock activity.',
-        parameters: z.object({
-          events: z.array(
-            z.object({
-              date: z
-                .string()
-                .describe('The date of the event, in ISO-8601 format'),
-              headline: z.string().describe('The headline of the event'),
-              description: z.string().describe('The description of the event')
-            })
-          )
-        }),
-        generate: async function* ({ events }) {
-          yield (
-            <BotCard>
-              <EventsSkeleton />
-            </BotCard>
-          )
-
-          await sleep(1000)
-
-          const toolCallId = nanoid()
-
-          aiState.done({
-            ...aiState.get(),
-            messages: [
-              ...aiState.get().messages,
-              {
-                id: nanoid(),
-                role: 'assistant',
-                content: [
-                  {
-                    type: 'tool-call',
-                    toolName: 'getEvents',
-                    toolCallId,
-                    args: { events }
-                  }
-                ]
-              },
-              {
-                id: nanoid(),
-                role: 'tool',
-                content: [
-                  {
-                    type: 'tool-result',
-                    toolName: 'getEvents',
-                    toolCallId,
-                    result: events
-                  }
-                ]
-              }
-            ]
-          })
-
-          return (
-            <BotCard>
-              <Events props={events} />
-            </BotCard>
-          )
-        }
-      }
     }
   })
 
diff --git a/middleware.ts b/middleware.ts
index e663a3164..d20c6c765 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,7 +1,11 @@
 import NextAuth from 'next-auth'
 import { authConfig } from './auth.config'
+import { clerkMiddleware } from '@clerk/nextjs/server'
 
-export default NextAuth(authConfig).auth
+// fix this
+export default clerkMiddleware(() => {
+  NextAuth(authConfig).auth
+})
 
 export const config = {
   matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
diff --git a/package.json b/package.json
index 9f9fab680..5de065497 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.53",
+    "@clerk/nextjs": "^5.5.2",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94e78e2e0..109dd1b37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@ai-sdk/openai':
         specifier: ^0.0.53
         version: 0.0.53(zod@3.23.8)
+      '@clerk/nextjs':
+        specifier: ^5.5.2
+        version: 5.5.2(next@14.2.6(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -251,6 +254,41 @@ packages:
     resolution: {integrity: sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==}
     engines: {node: '>=6.9.0'}
 
+  '@clerk/backend@1.11.1':
+    resolution: {integrity: sha512-g+jk1wxS0j6s1or6e3rf8KK4bHaIxajCMHAASyhfl9a9OVBqtkeMgbQ3+LIFDRAOSQLxLKrIqJgPGPfOoHz17Q==}
+    engines: {node: '>=18.17.0'}
+
+  '@clerk/clerk-react@5.8.2':
+    resolution: {integrity: sha512-5wXr02TmxlGBjBTrM5URCk01b0q/Po6xg3SPo/U8HgrQ8qnY82hbnLxZ1dUuqH3MIzUh2VAoISJzF4TEZYqJJA==}
+    engines: {node: '>=18.17.0'}
+    peerDependencies:
+      react: '>=18 || >=19.0.0-beta'
+      react-dom: '>=18 || >=19.0.0-beta'
+
+  '@clerk/nextjs@5.5.2':
+    resolution: {integrity: sha512-xBxwKzjvaJOHY8iCD5AwBU39owLUJw2rC6ndlC+R7mlPTXBrGCjLUNPh8vkokM2z3qACM4mDOGGchj2L8jJ7GQ==}
+    engines: {node: '>=18.17.0'}
+    peerDependencies:
+      next: ^13.5.4 || ^14.0.3 || >=15.0.0-rc
+      react: '>=18 || >=19.0.0-beta'
+      react-dom: '>=18 || >=19.0.0-beta'
+
+  '@clerk/shared@2.7.2':
+    resolution: {integrity: sha512-0SymNLqE5oMPf1XwtqNazNcpIoCKUv77f8rHpx4U8mg73uXYfuEQThNgCJyoM4/qxYLL3SBPKAlZl9MAHfSiyA==}
+    engines: {node: '>=18.17.0'}
+    peerDependencies:
+      react: '>=18 || >=19.0.0-beta'
+      react-dom: '>=18 || >=19.0.0-beta'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@clerk/types@4.20.1':
+    resolution: {integrity: sha512-s2v3wFgLsB+d0Ot5yN+5IjRNKWl63AAeEczTZDZYSWuNkGihvEXYjS2NtnYuhROBRgWEHEsm0JOp0rQkfTMkBw==}
+    engines: {node: '>=18.17.0'}
+
   '@floating-ui/core@1.6.7':
     resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==}
 
@@ -1028,6 +1066,10 @@ packages:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
 
+  cookie@0.5.0:
+    resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
+    engines: {node: '>= 0.6'}
+
   cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
@@ -1048,6 +1090,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  csstype@3.1.1:
+    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1087,6 +1132,9 @@ packages:
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
+  dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -1203,6 +1251,9 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
@@ -1295,6 +1346,10 @@ packages:
   jose@5.7.0:
     resolution: {integrity: sha512-3P9qfTYDVnNn642LCAqIKbTGb9a1TBxZ9ti5zEVEr48aDdflgRjhspWFb6WM4PzAfFbGMJYC4+803v8riCRAKw==}
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1344,6 +1399,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
   lowlight@1.20.0:
     resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
 
@@ -1353,6 +1411,10 @@ packages:
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
+
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
@@ -1574,6 +1636,9 @@ packages:
       sass:
         optional: true
 
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
@@ -1870,6 +1935,13 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  snake-case@3.0.4:
+    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
+
+  snakecase-keys@5.4.4:
+    resolution: {integrity: sha512-YTywJG93yxwHLgrYLZjlC75moVEX04LZM4FHfihjHe1FCXm+QaLOFfSf535aXOAd0ArVQMWUAe8ZPm4VtWyXaA==}
+    engines: {node: '>=12'}
+
   sonner@1.5.0:
     resolution: {integrity: sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==}
     peerDependencies:
@@ -1891,6 +1963,9 @@ packages:
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
 
+  std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1993,9 +2068,16 @@ packages:
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  tslib@2.4.1:
+    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
+
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
   typescript@5.5.4:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
@@ -2248,6 +2330,53 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@clerk/backend@1.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@clerk/shared': 2.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/types': 4.20.1
+      cookie: 0.5.0
+      snakecase-keys: 5.4.4
+      tslib: 2.4.1
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
+  '@clerk/clerk-react@5.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@clerk/shared': 2.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/types': 4.20.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.4.1
+
+  '@clerk/nextjs@5.5.2(next@14.2.6(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@clerk/backend': 1.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/clerk-react': 5.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/shared': 2.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/types': 4.20.1
+      crypto-js: 4.2.0
+      next: 14.2.6(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      server-only: 0.0.1
+      tslib: 2.4.1
+
+  '@clerk/shared@2.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@clerk/types': 4.20.1
+      glob-to-regexp: 0.4.1
+      js-cookie: 3.0.5
+      std-env: 3.7.0
+      swr: 2.2.5(react@18.3.1)
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@clerk/types@4.20.1':
+    dependencies:
+      csstype: 3.1.1
+
   '@floating-ui/core@1.6.7':
     dependencies:
       '@floating-ui/utils': 0.2.7
@@ -3010,6 +3139,8 @@ snapshots:
 
   commander@8.3.0: {}
 
+  cookie@0.5.0: {}
+
   cookie@0.6.0: {}
 
   cross-spawn@7.0.3:
@@ -3027,6 +3158,8 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  csstype@3.1.1: {}
+
   csstype@3.1.3: {}
 
   debug@4.3.6:
@@ -3051,6 +3184,11 @@ snapshots:
 
   dlv@1.1.3: {}
 
+  dot-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.7.0
+
   eastasianwidth@0.2.0: {}
 
   electron-to-chromium@1.5.13: {}
@@ -3145,6 +3283,8 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob-to-regexp@0.4.1: {}
+
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.0
@@ -3233,6 +3373,8 @@ snapshots:
 
   jose@5.7.0: {}
 
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   json-schema@0.4.0: {}
@@ -3269,6 +3411,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.7.0
+
   lowlight@1.20.0:
     dependencies:
       fault: 1.0.4
@@ -3280,6 +3426,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  map-obj@4.3.0: {}
+
   markdown-table@3.0.3: {}
 
   mdast-util-definitions@5.1.2:
@@ -3670,6 +3818,11 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.7.0
+
   node-domexception@1.0.0: {}
 
   node-fetch@2.7.0:
@@ -3980,6 +4133,17 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  snake-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.7.0
+
+  snakecase-keys@5.4.4:
+    dependencies:
+      map-obj: 4.3.0
+      snake-case: 3.0.4
+      type-fest: 2.19.0
+
   sonner@1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -3996,6 +4160,8 @@ snapshots:
       svelte: 4.2.19
       swrev: 4.0.0
 
+  std-env@3.7.0: {}
+
   streamsearch@1.1.0: {}
 
   string-width@4.2.3:
@@ -4123,8 +4289,12 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
+  tslib@2.4.1: {}
+
   tslib@2.7.0: {}
 
+  type-fest@2.19.0: {}
+
   typescript@5.5.4: {}
 
   undici-types@5.26.5: {}

From a9e2761199e30f5a6aae1367af85c456a6a9abef Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 18:39:01 -0400
Subject: [PATCH 02/11] Fixing key requiring TUNE

---
 app/actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/actions.ts b/app/actions.ts
index 1398aca02..675f136d8 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -165,7 +165,7 @@ export async function refreshHistory(path: string) {
 }
 
 export async function getMissingKeys() {
-  const keysRequired = ['OPENAI_API_KEY']
+  const keysRequired = ['TUNE_STUDIO_API_KEY']
   return keysRequired
     .map(key => (process.env[key] ? '' : key))
     .filter(key => key !== '')

From ac8dc67bb75aeb13ab7e014c1b2efb22ef6adb26 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 19:55:51 -0400
Subject: [PATCH 03/11] using clekr now

---
 app/(chat)/chat/[id]/page.tsx              |  60 +------
 app/(chat)/layout.tsx                      |   3 -
 app/(chat)/page.tsx                        |   5 +-
 app/actions.ts                             | 164 -------------------
 app/dashboard/actions/update-heartreate.ts |  19 +++
 app/dashboard/components/form.tsx          |  63 ++++++++
 app/dashboard/page.tsx                     |  48 ++++++
 app/layout.tsx                             |  27 +++-
 app/login/actions.ts                       |  71 --------
 app/login/page.tsx                         |  18 ---
 app/share/[id]/page.tsx                    |  58 -------
 app/signup/actions.ts                      | 111 -------------
 app/signup/page.tsx                        |  18 ---
 auth.config.ts                             |  42 -----
 auth.ts                                    |  45 ------
 components/chat-history.tsx                |  49 ------
 components/chat-list.tsx                   |  30 +---
 components/chat.tsx                        |  13 +-
 components/header.tsx                      |  64 +-------
 components/sidebar-actions.tsx             | 125 ---------------
 components/sidebar-desktop.tsx             |  19 ---
 components/sidebar-footer.tsx              |  16 --
 components/sidebar-item.tsx                | 124 --------------
 components/sidebar-items.tsx               |  42 -----
 components/sidebar-list.tsx                |  43 -----
 components/ui/form.tsx                     | 178 +++++++++++++++++++++
 lib/chat/actions.tsx                       | 104 ++++++------
 middleware.ts                              |   6 +-
 package.json                               |   3 +
 pnpm-lock.yaml                             |  42 +++++
 30 files changed, 442 insertions(+), 1168 deletions(-)
 create mode 100644 app/dashboard/actions/update-heartreate.ts
 create mode 100644 app/dashboard/components/form.tsx
 create mode 100644 app/dashboard/page.tsx
 delete mode 100644 app/login/actions.ts
 delete mode 100644 app/login/page.tsx
 delete mode 100644 app/share/[id]/page.tsx
 delete mode 100644 app/signup/actions.ts
 delete mode 100644 app/signup/page.tsx
 delete mode 100644 auth.config.ts
 delete mode 100644 auth.ts
 delete mode 100644 components/chat-history.tsx
 delete mode 100644 components/sidebar-actions.tsx
 delete mode 100644 components/sidebar-desktop.tsx
 delete mode 100644 components/sidebar-footer.tsx
 delete mode 100644 components/sidebar-item.tsx
 delete mode 100644 components/sidebar-items.tsx
 delete mode 100644 components/sidebar-list.tsx
 create mode 100644 components/ui/form.tsx

diff --git a/app/(chat)/chat/[id]/page.tsx b/app/(chat)/chat/[id]/page.tsx
index bf8775ce7..0611ad6dd 100644
--- a/app/(chat)/chat/[id]/page.tsx
+++ b/app/(chat)/chat/[id]/page.tsx
@@ -1,11 +1,6 @@
-import { type Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
-
-import { auth } from '@/auth'
-import { getChat, getMissingKeys } from '@/app/actions'
+import { getMissingKeys } from '@/app/actions'
 import { Chat } from '@/components/chat'
 import { AI } from '@/lib/chat/actions'
-import { Session } from '@/lib/types'
 
 export interface ChatPageProps {
   params: {
@@ -13,53 +8,12 @@ export interface ChatPageProps {
   }
 }
 
-export async function generateMetadata({
-  params
-}: ChatPageProps): Promise<Metadata> {
-  const session = await auth()
-
-  if (!session?.user) {
-    return {}
-  }
-
-  const chat = await getChat(params.id, session.user.id)
-
-  if (!chat || 'error' in chat) {
-    redirect('/')
-  } else {
-    return {
-      title: chat?.title.toString().slice(0, 50) ?? 'Chat'
-    }
-  }
-}
-
-export default async function ChatPage({ params }: ChatPageProps) {
-  const session = (await auth()) as Session
+export default async function ChatPage() {
   const missingKeys = await getMissingKeys()
 
-  if (!session?.user) {
-    redirect(`/login?next=/chat/${params.id}`)
-  }
-
-  const userId = session.user.id as string
-  const chat = await getChat(params.id, userId)
-
-  if (!chat || 'error' in chat) {
-    redirect('/')
-  } else {
-    if (chat?.userId !== session?.user?.id) {
-      notFound()
-    }
-
-    return (
-      <AI initialAIState={{ chatId: chat.id, messages: chat.messages }}>
-        <Chat
-          id={chat.id}
-          session={session}
-          initialMessages={chat.messages}
-          missingKeys={missingKeys}
-        />
-      </AI>
-    )
-  }
+  return (
+    <AI>
+      <Chat missingKeys={missingKeys} />
+    </AI>
+  )
 }
diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
index 2825d593c..693101b2e 100644
--- a/app/(chat)/layout.tsx
+++ b/app/(chat)/layout.tsx
@@ -1,5 +1,3 @@
-import { SidebarDesktop } from '@/components/sidebar-desktop'
-
 interface ChatLayoutProps {
   children: React.ReactNode
 }
@@ -7,7 +5,6 @@ interface ChatLayoutProps {
 export default async function ChatLayout({ children }: ChatLayoutProps) {
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-      <SidebarDesktop />
       {children}
     </div>
   )
diff --git a/app/(chat)/page.tsx b/app/(chat)/page.tsx
index 21b79f91d..20152e1b8 100644
--- a/app/(chat)/page.tsx
+++ b/app/(chat)/page.tsx
@@ -1,8 +1,6 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 import { AI } from '@/lib/chat/actions'
-import { auth } from '@/auth'
-import { Session } from '@/lib/types'
 import { getMissingKeys } from '@/app/actions'
 
 export const metadata = {
@@ -11,12 +9,11 @@ export const metadata = {
 
 export default async function IndexPage() {
   const id = nanoid()
-  const session = (await auth()) as Session
   const missingKeys = await getMissingKeys()
 
   return (
     <AI initialAIState={{ chatId: id, messages: [] }}>
-      <Chat id={id} session={session} missingKeys={missingKeys} />
+      <Chat id={id} missingKeys={missingKeys} />
     </AI>
   )
 }
diff --git a/app/actions.ts b/app/actions.ts
index 675f136d8..98e1529f7 100644
--- a/app/actions.ts
+++ b/app/actions.ts
@@ -1,169 +1,5 @@
 'use server'
 
-import { revalidatePath } from 'next/cache'
-import { redirect } from 'next/navigation'
-import { kv } from '@vercel/kv'
-
-import { auth } from '@/auth'
-import { type Chat } from '@/lib/types'
-
-export async function getChats(userId?: string | null) {
-  const session = await auth()
-
-  if (!userId) {
-    return []
-  }
-
-  if (userId !== session?.user?.id) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  try {
-    const pipeline = kv.pipeline()
-    const chats: string[] = await kv.zrange(`user:chat:${userId}`, 0, -1, {
-      rev: true
-    })
-
-    for (const chat of chats) {
-      pipeline.hgetall(chat)
-    }
-
-    const results = await pipeline.exec()
-
-    return results as Chat[]
-  } catch (error) {
-    return []
-  }
-}
-
-export async function getChat(id: string, userId: string) {
-  const session = await auth()
-
-  if (userId !== session?.user?.id) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || (userId && chat.userId !== userId)) {
-    return null
-  }
-
-  return chat
-}
-
-export async function removeChat({ id, path }: { id: string; path: string }) {
-  const session = await auth()
-
-  if (!session) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  // Convert uid to string for consistent comparison with session.user.id
-  const uid = String(await kv.hget(`chat:${id}`, 'userId'))
-
-  if (uid !== session?.user?.id) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  await kv.del(`chat:${id}`)
-  await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`)
-
-  revalidatePath('/')
-  return revalidatePath(path)
-}
-
-export async function clearChats() {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  const chats: string[] = await kv.zrange(`user:chat:${session.user.id}`, 0, -1)
-  if (!chats.length) {
-    return redirect('/')
-  }
-  const pipeline = kv.pipeline()
-
-  for (const chat of chats) {
-    pipeline.del(chat)
-    pipeline.zrem(`user:chat:${session.user.id}`, chat)
-  }
-
-  await pipeline.exec()
-
-  revalidatePath('/')
-  return redirect('/')
-}
-
-export async function getSharedChat(id: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || !chat.sharePath) {
-    return null
-  }
-
-  return chat
-}
-
-export async function shareChat(id: string) {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || chat.userId !== session.user.id) {
-    return {
-      error: 'Something went wrong'
-    }
-  }
-
-  const payload = {
-    ...chat,
-    sharePath: `/share/${chat.id}`
-  }
-
-  await kv.hmset(`chat:${chat.id}`, payload)
-
-  return payload
-}
-
-export async function saveChat(chat: Chat) {
-  const session = await auth()
-
-  if (session && session.user) {
-    const pipeline = kv.pipeline()
-    pipeline.hmset(`chat:${chat.id}`, chat)
-    pipeline.zadd(`user:chat:${chat.userId}`, {
-      score: Date.now(),
-      member: `chat:${chat.id}`
-    })
-    await pipeline.exec()
-  } else {
-    return
-  }
-}
-
-export async function refreshHistory(path: string) {
-  redirect(path)
-}
-
 export async function getMissingKeys() {
   const keysRequired = ['TUNE_STUDIO_API_KEY']
   return keysRequired
diff --git a/app/dashboard/actions/update-heartreate.ts b/app/dashboard/actions/update-heartreate.ts
new file mode 100644
index 000000000..c7057f1c6
--- /dev/null
+++ b/app/dashboard/actions/update-heartreate.ts
@@ -0,0 +1,19 @@
+'use server'
+
+import { auth } from '@clerk/nextjs/server'
+import { clerkClient } from '@clerk/clerk-sdk-node'
+
+export async function updateHeartRate({
+  newHeartRate
+}: {
+  newHeartRate: string
+}) {
+  const session = await auth()
+  const user_id = session.userId
+  if (!user_id) {
+    throw new Error('YOU ARE NOT LOGGED IN')
+  }
+  await clerkClient.users.updateUser(user_id, {
+    publicMetadata: { heartRate: newHeartRate }
+  })
+}
diff --git a/app/dashboard/components/form.tsx b/app/dashboard/components/form.tsx
new file mode 100644
index 000000000..f5a97ce70
--- /dev/null
+++ b/app/dashboard/components/form.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { updateHeartRate } from '../actions/update-heartreate'
+
+const formSchema = z.object({
+  heartrate: z.string().min(2, {
+    message: 'heartrate must be at least 2 characters.'
+  })
+})
+export function ProfileForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      heartrate: 123
+    }
+  })
+
+  // 2. Define a submit handler.
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    await updateHeartRate({ newHeartRate: values.heartrate })
+
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="heartrate"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>heartrate</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 000000000..e9ca128ca
--- /dev/null
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,48 @@
+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 { ProfileForm } from './components/form'
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <ProfileForm />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default function Page() {
+  return (
+    <div>
+      <DialogDemo />
+    </div>
+  )
+}
+
+function SomeComponent() {
+  return (
+    <div>
+      <h1>asdad</h1>
+    </div>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 26cd02189..5e0b07fd1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,7 +7,13 @@ import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { Providers } from '@/components/providers'
 import { Header } from '@/components/header'
 import { Toaster } from '@/components/ui/sonner'
-import { ClerkProvider, SignedIn, SignedOut, SignInButton } from '@clerk/nextjs'
+import {
+  ClerkProvider,
+  SignedIn,
+  SignedOut,
+  SignIn,
+  SignInButton
+} from '@clerk/nextjs'
 
 export const metadata = {
   metadataBase: process.env.VERCEL_URL
@@ -54,13 +60,18 @@ export default function RootLayout({ children }: RootLayoutProps) {
           disableTransitionOnChange
         >
           <div className="flex flex-col min-h-screen">
-            <Header />
-            <main className="flex flex-col flex-1 bg-muted/50">
-              <SignedIn>{children}</SignedIn>
-              <SignedOut>
-                <SignInButton />
-              </SignedOut>
-            </main>
+            <SignedIn>
+              <Header />
+              <main className="flex flex-col flex-1 bg-muted/50">
+                {children}
+              </main>
+            </SignedIn>
+            <SignedOut>
+              // center this
+              <div className="flex flex-col items-center justify-center flex-1 bg-muted/50">
+                <SignIn />
+              </div>
+            </SignedOut>
           </div>
           <TailwindIndicator />
         </Providers>
diff --git a/app/login/actions.ts b/app/login/actions.ts
deleted file mode 100644
index f23e22022..000000000
--- a/app/login/actions.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-'use server'
-
-import { signIn } from '@/auth'
-import { User } from '@/lib/types'
-import { AuthError } from 'next-auth'
-import { z } from 'zod'
-import { kv } from '@vercel/kv'
-import { ResultCode } from '@/lib/utils'
-
-export async function getUser(email: string) {
-  const user = await kv.hgetall<User>(`user:${email}`)
-  return user
-}
-
-interface Result {
-  type: string
-  resultCode: ResultCode
-}
-
-export async function authenticate(
-  _prevState: Result | undefined,
-  formData: FormData
-): Promise<Result | undefined> {
-  try {
-    const email = formData.get('email')
-    const password = formData.get('password')
-
-    const parsedCredentials = z
-      .object({
-        email: z.string().email(),
-        password: z.string().min(6)
-      })
-      .safeParse({
-        email,
-        password
-      })
-
-    if (parsedCredentials.success) {
-      await signIn('credentials', {
-        email,
-        password,
-        redirect: false
-      })
-
-      return {
-        type: 'success',
-        resultCode: ResultCode.UserLoggedIn
-      }
-    } else {
-      return {
-        type: 'error',
-        resultCode: ResultCode.InvalidCredentials
-      }
-    }
-  } catch (error) {
-    if (error instanceof AuthError) {
-      switch (error.type) {
-        case 'CredentialsSignin':
-          return {
-            type: 'error',
-            resultCode: ResultCode.InvalidCredentials
-          }
-        default:
-          return {
-            type: 'error',
-            resultCode: ResultCode.UnknownError
-          }
-      }
-    }
-  }
-}
diff --git a/app/login/page.tsx b/app/login/page.tsx
deleted file mode 100644
index 1fba27bea..000000000
--- a/app/login/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { auth } from '@/auth'
-import LoginForm from '@/components/login-form'
-import { Session } from '@/lib/types'
-import { redirect } from 'next/navigation'
-
-export default async function LoginPage() {
-  const session = (await auth()) as Session
-
-  if (session) {
-    redirect('/')
-  }
-
-  return (
-    <main className="flex flex-col p-4">
-      <LoginForm />
-    </main>
-  )
-}
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
deleted file mode 100644
index d80f0c842..000000000
--- a/app/share/[id]/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { type Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
-
-import { formatDate } from '@/lib/utils'
-import { getSharedChat } from '@/app/actions'
-import { ChatList } from '@/components/chat-list'
-import { FooterText } from '@/components/footer'
-import { AI, UIState, getUIStateFromAIState } from '@/lib/chat/actions'
-
-export const runtime = 'edge'
-export const preferredRegion = 'home'
-
-interface SharePageProps {
-  params: {
-    id: string
-  }
-}
-
-export async function generateMetadata({
-  params
-}: SharePageProps): Promise<Metadata> {
-  const chat = await getSharedChat(params.id)
-
-  return {
-    title: chat?.title.slice(0, 50) ?? 'Chat'
-  }
-}
-
-export default async function SharePage({ params }: SharePageProps) {
-  const chat = await getSharedChat(params.id)
-
-  if (!chat || !chat?.sharePath) {
-    notFound()
-  }
-
-  const uiState: UIState = getUIStateFromAIState(chat)
-
-  return (
-    <>
-      <div className="flex-1 space-y-6">
-        <div className="border-b bg-background px-4 py-6 md:px-6 md:py-8">
-          <div className="mx-auto max-w-2xl">
-            <div className="space-y-1 md:-mx-8">
-              <h1 className="text-2xl font-bold">{chat.title}</h1>
-              <div className="text-sm text-muted-foreground">
-                {formatDate(chat.createdAt)} · {chat.messages.length} messages
-              </div>
-            </div>
-          </div>
-        </div>
-        <AI>
-          <ChatList messages={uiState} isShared={true} />
-        </AI>
-      </div>
-      <FooterText className="py-8" />
-    </>
-  )
-}
diff --git a/app/signup/actions.ts b/app/signup/actions.ts
deleted file mode 100644
index 492586ae4..000000000
--- a/app/signup/actions.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-'use server'
-
-import { signIn } from '@/auth'
-import { ResultCode, getStringFromBuffer } from '@/lib/utils'
-import { z } from 'zod'
-import { kv } from '@vercel/kv'
-import { getUser } from '../login/actions'
-import { AuthError } from 'next-auth'
-
-export async function createUser(
-  email: string,
-  hashedPassword: string,
-  salt: string
-) {
-  const existingUser = await getUser(email)
-
-  if (existingUser) {
-    return {
-      type: 'error',
-      resultCode: ResultCode.UserAlreadyExists
-    }
-  } else {
-    const user = {
-      id: crypto.randomUUID(),
-      email,
-      password: hashedPassword,
-      salt
-    }
-
-    await kv.hmset(`user:${email}`, user)
-
-    return {
-      type: 'success',
-      resultCode: ResultCode.UserCreated
-    }
-  }
-}
-
-interface Result {
-  type: string
-  resultCode: ResultCode
-}
-
-export async function signup(
-  _prevState: Result | undefined,
-  formData: FormData
-): Promise<Result | undefined> {
-  const email = formData.get('email') as string
-  const password = formData.get('password') as string
-
-  const parsedCredentials = z
-    .object({
-      email: z.string().email(),
-      password: z.string().min(6)
-    })
-    .safeParse({
-      email,
-      password
-    })
-
-  if (parsedCredentials.success) {
-    const salt = crypto.randomUUID()
-
-    const encoder = new TextEncoder()
-    const saltedPassword = encoder.encode(password + salt)
-    const hashedPasswordBuffer = await crypto.subtle.digest(
-      'SHA-256',
-      saltedPassword
-    )
-    const hashedPassword = getStringFromBuffer(hashedPasswordBuffer)
-
-    try {
-      const result = await createUser(email, hashedPassword, salt)
-
-      if (result.resultCode === ResultCode.UserCreated) {
-        await signIn('credentials', {
-          email,
-          password,
-          redirect: false
-        })
-      }
-
-      return result
-    } catch (error) {
-      if (error instanceof AuthError) {
-        switch (error.type) {
-          case 'CredentialsSignin':
-            return {
-              type: 'error',
-              resultCode: ResultCode.InvalidCredentials
-            }
-          default:
-            return {
-              type: 'error',
-              resultCode: ResultCode.UnknownError
-            }
-        }
-      } else {
-        return {
-          type: 'error',
-          resultCode: ResultCode.UnknownError
-        }
-      }
-    }
-  } else {
-    return {
-      type: 'error',
-      resultCode: ResultCode.InvalidCredentials
-    }
-  }
-}
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
deleted file mode 100644
index dbac96428..000000000
--- a/app/signup/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { auth } from '@/auth'
-import SignupForm from '@/components/signup-form'
-import { Session } from '@/lib/types'
-import { redirect } from 'next/navigation'
-
-export default async function SignupPage() {
-  const session = (await auth()) as Session
-
-  if (session) {
-    redirect('/')
-  }
-
-  return (
-    <main className="flex flex-col p-4">
-      <SignupForm />
-    </main>
-  )
-}
diff --git a/auth.config.ts b/auth.config.ts
deleted file mode 100644
index 6e74c18bb..000000000
--- a/auth.config.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { NextAuthConfig } from 'next-auth'
-
-export const authConfig = {
-  secret: process.env.AUTH_SECRET,
-  pages: {
-    signIn: '/login',
-    newUser: '/signup'
-  },
-  callbacks: {
-    async authorized({ auth, request: { nextUrl } }) {
-      const isLoggedIn = !!auth?.user
-      const isOnLoginPage = nextUrl.pathname.startsWith('/login')
-      const isOnSignupPage = nextUrl.pathname.startsWith('/signup')
-
-      if (isLoggedIn) {
-        if (isOnLoginPage || isOnSignupPage) {
-          return Response.redirect(new URL('/', nextUrl))
-        }
-      }
-
-      return true
-    },
-    async jwt({ token, user }) {
-      if (user) {
-        token = { ...token, id: user.id }
-      }
-
-      return token
-    },
-    async session({ session, token }) {
-      if (token) {
-        const { id } = token as { id: string }
-        const { user } = session
-
-        session = { ...session, user: { ...user, id } }
-      }
-
-      return session
-    }
-  },
-  providers: []
-} satisfies NextAuthConfig
diff --git a/auth.ts b/auth.ts
deleted file mode 100644
index 7542992bd..000000000
--- a/auth.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import NextAuth from 'next-auth'
-import Credentials from 'next-auth/providers/credentials'
-import { authConfig } from './auth.config'
-import { z } from 'zod'
-import { getStringFromBuffer } from './lib/utils'
-import { getUser } from './app/login/actions'
-
-export const { auth, signIn, signOut } = NextAuth({
-  ...authConfig,
-  providers: [
-    Credentials({
-      async authorize(credentials) {
-        const parsedCredentials = z
-          .object({
-            email: z.string().email(),
-            password: z.string().min(6)
-          })
-          .safeParse(credentials)
-
-        if (parsedCredentials.success) {
-          const { email, password } = parsedCredentials.data
-          const user = await getUser(email)
-
-          if (!user) return null
-
-          const encoder = new TextEncoder()
-          const saltedPassword = encoder.encode(password + user.salt)
-          const hashedPasswordBuffer = await crypto.subtle.digest(
-            'SHA-256',
-            saltedPassword
-          )
-          const hashedPassword = getStringFromBuffer(hashedPasswordBuffer)
-
-          if (hashedPassword === user.password) {
-            return user
-          } else {
-            return null
-          }
-        }
-
-        return null
-      }
-    })
-  ]
-})
diff --git a/components/chat-history.tsx b/components/chat-history.tsx
deleted file mode 100644
index 88b6ff440..000000000
--- a/components/chat-history.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react'
-
-import Link from 'next/link'
-
-import { cn } from '@/lib/utils'
-import { SidebarList } from '@/components/sidebar-list'
-import { buttonVariants } from '@/components/ui/button'
-import { IconPlus } from '@/components/ui/icons'
-
-interface ChatHistoryProps {
-  userId?: string
-}
-
-export async function ChatHistory({ userId }: ChatHistoryProps) {
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between p-4">
-        <h4 className="text-sm font-medium">Chat History</h4>
-      </div>
-      <div className="mb-2 px-2">
-        <Link
-          href="/"
-          className={cn(
-            buttonVariants({ variant: 'outline' }),
-            'h-10 w-full justify-start bg-zinc-50 px-4 shadow-none transition-colors hover:bg-zinc-200/40 dark:bg-zinc-900 dark:hover:bg-zinc-300/10'
-          )}
-        >
-          <IconPlus className="-translate-x-2 stroke-2" />
-          New Chat
-        </Link>
-      </div>
-      <React.Suspense
-        fallback={
-          <div className="flex flex-col flex-1 px-4 space-y-4 overflow-auto">
-            {Array.from({ length: 10 }).map((_, i) => (
-              <div
-                key={i}
-                className="w-full h-6 rounded-md shrink-0 animate-pulse bg-zinc-200 dark:bg-zinc-800"
-              />
-            ))}
-          </div>
-        }
-      >
-        {/* @ts-ignore */}
-        <SidebarList userId={userId} />
-      </React.Suspense>
-    </div>
-  )
-}
diff --git a/components/chat-list.tsx b/components/chat-list.tsx
index 80821a1ea..acce77ef0 100644
--- a/components/chat-list.tsx
+++ b/components/chat-list.tsx
@@ -1,46 +1,18 @@
 import { Separator } from '@/components/ui/separator'
 import { UIState } from '@/lib/chat/actions'
-import { Session } from '@/lib/types'
-import Link from 'next/link'
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export interface ChatList {
   messages: UIState
-  session?: Session
   isShared: boolean
 }
 
-export function ChatList({ messages, session, isShared }: ChatList) {
+export function ChatList({ messages, isShared }: ChatList) {
   if (!messages.length) {
     return null
   }
 
   return (
     <div className="relative mx-auto max-w-2xl px-4">
-      {!isShared && !session ? (
-        <>
-          <div className="group relative mb-4 flex items-start md:-ml-12">
-            <div className="bg-background flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
-              <ExclamationTriangleIcon />
-            </div>
-            <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
-              <p className="text-muted-foreground leading-normal">
-                Please{' '}
-                <Link href="/login" className="underline">
-                  log in
-                </Link>{' '}
-                or{' '}
-                <Link href="/signup" className="underline">
-                  sign up
-                </Link>{' '}
-                to save and revisit your chat history!
-              </p>
-            </div>
-          </div>
-          <Separator className="my-4" />
-        </>
-      ) : null}
-
       {messages.map((message, index) => (
         <div key={message.id}>
           {message.display}
diff --git a/components/chat.tsx b/components/chat.tsx
index c43d42a11..1e08bd2ae 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -15,11 +15,10 @@ import { toast } from 'sonner'
 export interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: Message[]
   id?: string
-  session?: Session
   missingKeys: string[]
 }
 
-export function Chat({ id, className, session, missingKeys }: ChatProps) {
+export function Chat({ id, className, missingKeys }: ChatProps) {
   const router = useRouter()
   const path = usePathname()
   const [input, setInput] = useState('')
@@ -28,14 +27,6 @@ export function Chat({ id, className, session, missingKeys }: ChatProps) {
 
   const [_, setNewChatId] = useLocalStorage('newChatId', id)
 
-  useEffect(() => {
-    if (session?.user) {
-      if (!path.includes('chat') && messages.length === 1) {
-        window.history.replaceState({}, '', `/chat/${id}`)
-      }
-    }
-  }, [id, path, session?.user, messages])
-
   useEffect(() => {
     const messagesLength = aiState.messages?.length
     if (messagesLength === 2) {
@@ -66,7 +57,7 @@ export function Chat({ id, className, session, missingKeys }: ChatProps) {
         ref={messagesRef}
       >
         {messages.length ? (
-          <ChatList messages={messages} isShared={false} session={session} />
+          <ChatList messages={messages} isShared={false} />
         ) : (
           <EmptyScreen />
         )}
diff --git a/components/header.tsx b/components/header.tsx
index 3b41a04a4..1af50fd03 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -2,78 +2,20 @@ import * as React from 'react'
 import Link from 'next/link'
 
 import { cn } from '@/lib/utils'
-import { auth } from '@/auth'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
 import {
   IconGitHub,
   IconNextChat,
   IconSeparator,
   IconVercel
 } from '@/components/ui/icons'
-import { UserMenu } from '@/components/user-menu'
-import { SidebarMobile } from './sidebar-mobile'
-import { SidebarToggle } from './sidebar-toggle'
-import { ChatHistory } from './chat-history'
-import { Session } from '@/lib/types'
-
-async function UserOrLogin() {
-  const session = (await auth()) as Session
-  return (
-    <>
-      {session?.user ? (
-        <>
-          <SidebarMobile>
-            <ChatHistory userId={session.user.id} />
-          </SidebarMobile>
-          <SidebarToggle />
-        </>
-      ) : (
-        <Link href="/new" rel="nofollow">
-          <IconNextChat className="size-6 mr-2 dark:hidden" inverted />
-          <IconNextChat className="hidden size-6 mr-2 dark:block" />
-        </Link>
-      )}
-      <div className="flex items-center">
-        <IconSeparator className="size-6 text-muted-foreground/50" />
-        {session?.user ? (
-          <UserMenu user={session.user} />
-        ) : (
-          <Button variant="link" asChild className="-ml-2">
-            <Link href="/login">Login</Link>
-          </Button>
-        )}
-      </div>
-    </>
-  )
-}
+import { UserButton } from '@clerk/nextjs'
 
 export function Header() {
   return (
     <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
-      <div className="flex items-center">
-        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-          <UserOrLogin />
-        </React.Suspense>
-      </div>
       <div className="flex items-center justify-end space-x-2">
-        <a
-          target="_blank"
-          href="https://github.com/vercel/nextjs-ai-chatbot/"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'outline' }))}
-        >
-          <IconGitHub />
-          <span className="hidden ml-2 md:flex">GitHub</span>
-        </a>
-        <a
-          href="https://vercel.com/templates/Next.js/nextjs-ai-chatbot"
-          target="_blank"
-          className={cn(buttonVariants())}
-        >
-          <IconVercel className="mr-2" />
-          <span className="hidden sm:block">Deploy to Vercel</span>
-          <span className="sm:hidden">Deploy</span>
-        </a>
+        <UserButton />
       </div>
     </header>
   )
diff --git a/components/sidebar-actions.tsx b/components/sidebar-actions.tsx
deleted file mode 100644
index 4f90f2d5d..000000000
--- a/components/sidebar-actions.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import * as React from 'react'
-import { toast } from 'sonner'
-
-import { ServerActionResult, type Chat } from '@/lib/types'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import { IconShare, IconSpinner, IconTrash } from '@/components/ui/icons'
-import { ChatShareDialog } from '@/components/chat-share-dialog'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
-
-interface SidebarActionsProps {
-  chat: Chat
-  removeChat: (args: { id: string; path: string }) => ServerActionResult<void>
-  shareChat: (id: string) => ServerActionResult<Chat>
-}
-
-export function SidebarActions({
-  chat,
-  removeChat,
-  shareChat
-}: SidebarActionsProps) {
-  const router = useRouter()
-  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
-  const [isRemovePending, startRemoveTransition] = React.useTransition()
-
-  return (
-    <>
-      <div className="">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              className="size-7 p-0 hover:bg-background"
-              onClick={() => setShareDialogOpen(true)}
-            >
-              <IconShare />
-              <span className="sr-only">Share</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Share chat</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              className="size-7 p-0 hover:bg-background"
-              disabled={isRemovePending}
-              onClick={() => setDeleteDialogOpen(true)}
-            >
-              <IconTrash />
-              <span className="sr-only">Delete</span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Delete chat</TooltipContent>
-        </Tooltip>
-      </div>
-      <ChatShareDialog
-        chat={chat}
-        shareChat={shareChat}
-        open={shareDialogOpen}
-        onOpenChange={setShareDialogOpen}
-        onCopy={() => setShareDialogOpen(false)}
-      />
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete your chat message and remove your
-              data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isRemovePending}>
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction
-              disabled={isRemovePending}
-              onClick={event => {
-                event.preventDefault()
-                // @ts-ignore
-                startRemoveTransition(async () => {
-                  const result = await removeChat({
-                    id: chat.id,
-                    path: chat.path
-                  })
-
-                  if (result && 'error' in result) {
-                    toast.error(result.error)
-                    return
-                  }
-
-                  setDeleteDialogOpen(false)
-                  router.refresh()
-                  router.push('/')
-                  toast.success('Chat deleted')
-                })
-              }}
-            >
-              {isRemovePending && <IconSpinner className="mr-2 animate-spin" />}
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  )
-}
diff --git a/components/sidebar-desktop.tsx b/components/sidebar-desktop.tsx
deleted file mode 100644
index 7bc0e19c1..000000000
--- a/components/sidebar-desktop.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Sidebar } from '@/components/sidebar'
-
-import { auth } from '@/auth'
-import { ChatHistory } from '@/components/chat-history'
-
-export async function SidebarDesktop() {
-  const session = await auth()
-
-  if (!session?.user?.id) {
-    return null
-  }
-
-  return (
-    <Sidebar className="peer absolute inset-y-0 z-30 hidden -translate-x-full border-r bg-muted duration-300 ease-in-out data-[state=open]:translate-x-0 lg:flex lg:w-[250px] xl:w-[300px]">
-      {/* @ts-ignore */}
-      <ChatHistory userId={session.user.id} />
-    </Sidebar>
-  )
-}
diff --git a/components/sidebar-footer.tsx b/components/sidebar-footer.tsx
deleted file mode 100644
index a2e18ea66..000000000
--- a/components/sidebar-footer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { cn } from '@/lib/utils'
-
-export function SidebarFooter({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn('flex items-center justify-between p-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/components/sidebar-item.tsx b/components/sidebar-item.tsx
deleted file mode 100644
index fc7020bcc..000000000
--- a/components/sidebar-item.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-
-import { motion } from 'framer-motion'
-
-import { buttonVariants } from '@/components/ui/button'
-import { IconMessage, IconUsers } from '@/components/ui/icons'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
-import { useLocalStorage } from '@/lib/hooks/use-local-storage'
-import { type Chat } from '@/lib/types'
-import { cn } from '@/lib/utils'
-
-interface SidebarItemProps {
-  index: number
-  chat: Chat
-  children: React.ReactNode
-}
-
-export function SidebarItem({ index, chat, children }: SidebarItemProps) {
-  const pathname = usePathname()
-
-  const isActive = pathname === chat.path
-  const [newChatId, setNewChatId] = useLocalStorage('newChatId', null)
-  const shouldAnimate = index === 0 && isActive && newChatId
-
-  if (!chat?.id) return null
-
-  return (
-    <motion.div
-      className="relative h-8"
-      variants={{
-        initial: {
-          height: 0,
-          opacity: 0
-        },
-        animate: {
-          height: 'auto',
-          opacity: 1
-        }
-      }}
-      initial={shouldAnimate ? 'initial' : undefined}
-      animate={shouldAnimate ? 'animate' : undefined}
-      transition={{
-        duration: 0.25,
-        ease: 'easeIn'
-      }}
-    >
-      <div className="absolute left-2 top-1 flex size-6 items-center justify-center">
-        {chat.sharePath ? (
-          <Tooltip delayDuration={1000}>
-            <TooltipTrigger
-              tabIndex={-1}
-              className="focus:bg-muted focus:ring-1 focus:ring-ring"
-            >
-              <IconUsers className="mr-2 mt-1 text-zinc-500" />
-            </TooltipTrigger>
-            <TooltipContent>This is a shared chat.</TooltipContent>
-          </Tooltip>
-        ) : (
-          <IconMessage className="mr-2 mt-1 text-zinc-500" />
-        )}
-      </div>
-      <Link
-        href={chat.path}
-        className={cn(
-          buttonVariants({ variant: 'ghost' }),
-          'group w-full px-8 transition-colors hover:bg-zinc-200/40 dark:hover:bg-zinc-300/10',
-          isActive && 'bg-zinc-200 pr-16 font-semibold dark:bg-zinc-800'
-        )}
-      >
-        <div
-          className="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
-          title={chat.title}
-        >
-          <span className="whitespace-nowrap">
-            {shouldAnimate ? (
-              chat.title.split('').map((character, index) => (
-                <motion.span
-                  key={index}
-                  variants={{
-                    initial: {
-                      opacity: 0,
-                      x: -100
-                    },
-                    animate: {
-                      opacity: 1,
-                      x: 0
-                    }
-                  }}
-                  initial={shouldAnimate ? 'initial' : undefined}
-                  animate={shouldAnimate ? 'animate' : undefined}
-                  transition={{
-                    duration: 0.25,
-                    ease: 'easeIn',
-                    delay: index * 0.05,
-                    staggerChildren: 0.05
-                  }}
-                  onAnimationComplete={() => {
-                    if (index === chat.title.length - 1) {
-                      setNewChatId(null)
-                    }
-                  }}
-                >
-                  {character}
-                </motion.span>
-              ))
-            ) : (
-              <span>{chat.title}</span>
-            )}
-          </span>
-        </div>
-      </Link>
-      {isActive && <div className="absolute right-2 top-1">{children}</div>}
-    </motion.div>
-  )
-}
diff --git a/components/sidebar-items.tsx b/components/sidebar-items.tsx
deleted file mode 100644
index 11cc7fc47..000000000
--- a/components/sidebar-items.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import { Chat } from '@/lib/types'
-import { AnimatePresence, motion } from 'framer-motion'
-
-import { removeChat, shareChat } from '@/app/actions'
-
-import { SidebarActions } from '@/components/sidebar-actions'
-import { SidebarItem } from '@/components/sidebar-item'
-
-interface SidebarItemsProps {
-  chats?: Chat[]
-}
-
-export function SidebarItems({ chats }: SidebarItemsProps) {
-  if (!chats?.length) return null
-
-  return (
-    <AnimatePresence>
-      {chats.map(
-        (chat, index) =>
-          chat && (
-            <motion.div
-              key={chat?.id}
-              exit={{
-                opacity: 0,
-                height: 0
-              }}
-            >
-              <SidebarItem index={index} chat={chat}>
-                <SidebarActions
-                  chat={chat}
-                  removeChat={removeChat}
-                  shareChat={shareChat}
-                />
-              </SidebarItem>
-            </motion.div>
-          )
-      )}
-    </AnimatePresence>
-  )
-}
diff --git a/components/sidebar-list.tsx b/components/sidebar-list.tsx
deleted file mode 100644
index 45c2f4ab8..000000000
--- a/components/sidebar-list.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { clearChats, getChats } from '@/app/actions'
-import { ClearHistory } from '@/components/clear-history'
-import { SidebarItems } from '@/components/sidebar-items'
-import { ThemeToggle } from '@/components/theme-toggle'
-import { redirect } from 'next/navigation'
-import { cache } from 'react'
-
-interface SidebarListProps {
-  userId?: string
-  children?: React.ReactNode
-}
-
-const loadChats = cache(async (userId?: string) => {
-  return await getChats(userId)
-})
-
-export async function SidebarList({ userId }: SidebarListProps) {
-  const chats = await loadChats(userId)
-
-  if (!chats || 'error' in chats) {
-    redirect('/')
-  } else {
-    return (
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <div className="flex-1 overflow-auto">
-          {chats?.length ? (
-            <div className="space-y-2 px-2">
-              <SidebarItems chats={chats} />
-            </div>
-          ) : (
-            <div className="p-8 text-center">
-              <p className="text-sm text-muted-foreground">No chat history</p>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center justify-between p-4">
-          <ThemeToggle />
-          <ClearHistory clearChats={clearChats} isEnabled={chats?.length > 0} />
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 000000000..b6daa654a
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/lib/chat/actions.tsx b/lib/chat/actions.tsx
index ab27c59bd..04c0d0f4e 100644
--- a/lib/chat/actions.tsx
+++ b/lib/chat/actions.tsx
@@ -17,6 +17,7 @@ import {
   Stock,
   Purchase
 } from '@/components/stocks'
+import { auth } from '@clerk/nextjs/server'
 
 import { z } from 'zod'
 import { EventsSkeleton } from '@/components/stocks/events-skeleton'
@@ -30,10 +31,8 @@ import {
   sleep,
   nanoid
 } from '@/lib/utils'
-import { saveChat } from '@/app/actions'
 import { SpinnerMessage, UserMessage } from '@/components/stocks/message'
 import { Chat, Message } from '@/lib/types'
-import { auth } from '@/auth'
 
 const openai = createOpenAI({
   baseURL: 'https://proxy.tune.app',
@@ -114,6 +113,9 @@ async function submitUserMessage(content: string) {
   'use server'
 
   const aiState = getMutableAIState<typeof AI>()
+  const session = await auth()
+  const metadata = session.sessionClaims?.metadata
+  console.log(JSON.stringify(session))
 
   aiState.update({
     ...aiState.get(),
@@ -133,7 +135,7 @@ async function submitUserMessage(content: string) {
   const result = await streamUI({
     model: openai('meta/llama-3.1-8b-instruct'),
     initial: <SpinnerMessage />,
-    system: `Only reply with the letter "a""`,
+    system: `I have health information regarding a user, please help them diagnose the issue: ${JSON.stringify(metadata)}`,
     messages: [
       ...aiState.get().messages.map((message: any) => ({
         role: message.role,
@@ -190,52 +192,56 @@ export const AI = createAI<AIState, UIState>({
     confirmPurchase
   },
   initialUIState: [],
-  initialAIState: { chatId: nanoid(), messages: [] },
-  onGetUIState: async () => {
-    'use server'
-
-    const session = await auth()
-
-    if (session && session.user) {
-      const aiState = getAIState() as Chat
-
-      if (aiState) {
-        const uiState = getUIStateFromAIState(aiState)
-        return uiState
-      }
-    } else {
-      return
-    }
-  },
-  onSetAIState: async ({ state }) => {
-    'use server'
-
-    const session = await auth()
-
-    if (session && session.user) {
-      const { chatId, messages } = state
-
-      const createdAt = new Date()
-      const userId = session.user.id as string
-      const path = `/chat/${chatId}`
-
-      const firstMessageContent = messages[0].content as string
-      const title = firstMessageContent.substring(0, 100)
-
-      const chat: Chat = {
-        id: chatId,
-        title,
-        userId,
-        createdAt,
-        messages,
-        path
-      }
-
-      await saveChat(chat)
-    } else {
-      return
-    }
-  }
+  initialAIState: { chatId: nanoid(), messages: [] }
+  //
+  // SET AND SAVE CHATS HERE
+  //
+  //
+  // onGetUIState: async () => {
+  //   'use server'
+
+  //   const session = await auth()
+
+  //   if (session && session.user) {
+  //     const aiState = getAIState() as Chat
+
+  //     if (aiState) {
+  //       const uiState = getUIStateFromAIState(aiState)
+  //       return uiState
+  //     }
+  //   } else {
+  //     return
+  //   }
+  // },
+  // onSetAIState: async ({ state }) => {
+  //   'use server'
+
+  //   const session = await auth()
+
+  //   if (session && session.user) {
+  //     const { chatId, messages } = state
+
+  //     const createdAt = new Date()
+  //     const userId = session.user.id as string
+  //     const path = `/chat/${chatId}`
+
+  //     const firstMessageContent = messages[0].content as string
+  //     const title = firstMessageContent.substring(0, 100)
+
+  //     const chat: Chat = {
+  //       id: chatId,
+  //       title,
+  //       userId,
+  //       createdAt,
+  //       messages,
+  //       path
+  //     }
+
+  //     await saveChat(chat)
+  //   } else {
+  //     return
+  //   }
+  // }
 })
 
 export const getUIStateFromAIState = (aiState: Chat) => {
diff --git a/middleware.ts b/middleware.ts
index d20c6c765..718650723 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,11 +1,7 @@
-import NextAuth from 'next-auth'
-import { authConfig } from './auth.config'
 import { clerkMiddleware } from '@clerk/nextjs/server'
 
 // fix this
-export default clerkMiddleware(() => {
-  NextAuth(authConfig).auth
-})
+export default clerkMiddleware()
 
 export const config = {
   matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
diff --git a/package.json b/package.json
index 5de065497..430d7507b 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.53",
+    "@clerk/clerk-sdk-node": "^5.0.38",
     "@clerk/nextjs": "^5.5.2",
+    "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -35,6 +37,7 @@
     "openai": "^4.56.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 109dd1b37..580a225ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,15 @@ importers:
       '@ai-sdk/openai':
         specifier: ^0.0.53
         version: 0.0.53(zod@3.23.8)
+      '@clerk/clerk-sdk-node':
+        specifier: ^5.0.38
+        version: 5.0.38(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@clerk/nextjs':
         specifier: ^5.5.2
         version: 5.5.2(next@14.2.6(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@hookform/resolvers':
+        specifier: ^3.9.0
+        version: 3.9.0(react-hook-form@7.53.0(react@18.3.1))
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -86,6 +92,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.53.0
+        version: 7.53.0(react@18.3.1)
       react-intersection-observer:
         specifier: ^9.10.3
         version: 9.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -265,6 +274,10 @@ packages:
       react: '>=18 || >=19.0.0-beta'
       react-dom: '>=18 || >=19.0.0-beta'
 
+  '@clerk/clerk-sdk-node@5.0.38':
+    resolution: {integrity: sha512-mJp2HobC0k8K3j2YTfgmLzUm2elYwhkaLRnIe2cAr4ZLyTZryUB1bqijfbTL2DhQwdyCcvAXGQC4KxeXOnhYjA==}
+    engines: {node: '>=18.17.0'}
+
   '@clerk/nextjs@5.5.2':
     resolution: {integrity: sha512-xBxwKzjvaJOHY8iCD5AwBU39owLUJw2rC6ndlC+R7mlPTXBrGCjLUNPh8vkokM2z3qACM4mDOGGchj2L8jJ7GQ==}
     engines: {node: '>=18.17.0'}
@@ -304,6 +317,11 @@ packages:
   '@floating-ui/utils@0.2.7':
     resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
 
+  '@hookform/resolvers@3.9.0':
+    resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -1808,6 +1826,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-hook-form@7.53.0:
+    resolution: {integrity: sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-intersection-observer@9.13.0:
     resolution: {integrity: sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==}
     peerDependencies:
@@ -2349,6 +2373,16 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       tslib: 2.4.1
 
+  '@clerk/clerk-sdk-node@5.0.38(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@clerk/backend': 1.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/shared': 2.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@clerk/types': 4.20.1
+      tslib: 2.4.1
+    transitivePeerDependencies:
+      - react
+      - react-dom
+
   '@clerk/nextjs@5.5.2(next@14.2.6(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@clerk/backend': 1.11.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2394,6 +2428,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.7': {}
 
+  '@hookform/resolvers@3.9.0(react-hook-form@7.53.0(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.53.0(react@18.3.1)
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -3972,6 +4010,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-hook-form@7.53.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-intersection-observer@9.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1

From be054cdb0cf8b911bbce1a311fc52c5e7b237293 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 20:04:58 -0400
Subject: [PATCH 04/11] Form for clerk

---
 app/dashboard/actions/update-heartreate.ts |  3 +-
 app/dashboard/components/form.tsx          | 46 ++++++++++++++++------
 app/dashboard/page.tsx                     | 22 +----------
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/app/dashboard/actions/update-heartreate.ts b/app/dashboard/actions/update-heartreate.ts
index c7057f1c6..59476f84b 100644
--- a/app/dashboard/actions/update-heartreate.ts
+++ b/app/dashboard/actions/update-heartreate.ts
@@ -13,7 +13,8 @@ export async function updateHeartRate({
   if (!user_id) {
     throw new Error('YOU ARE NOT LOGGED IN')
   }
+  // Update the postgres database???
   await clerkClient.users.updateUser(user_id, {
-    publicMetadata: { heartRate: newHeartRate }
+    publicMetadata: { heartRate: newHeartRate, weight: '1234' }
   })
 }
diff --git a/app/dashboard/components/form.tsx b/app/dashboard/components/form.tsx
index f5a97ce70..6eefb1a08 100644
--- a/app/dashboard/components/form.tsx
+++ b/app/dashboard/components/form.tsx
@@ -16,23 +16,31 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { updateHeartRate } from '../actions/update-heartreate'
+import { useState } from 'react'
 
 const formSchema = z.object({
   heartrate: z.string().min(2, {
     message: 'heartrate must be at least 2 characters.'
+  }),
+  weight: z.string().min(2, {
+    message: 'weight must be at least 2 characters.'
   })
 })
 export function ProfileForm() {
+  const [submitting, setSubmitting] = useState(false)
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      heartrate: 123
+      heartrate: '123',
+      weight: '123'
     }
   })
 
   // 2. Define a submit handler.
   async function onSubmit(values: z.infer<typeof formSchema>) {
+    setSubmitting(true)
     await updateHeartRate({ newHeartRate: values.heartrate })
+    setSubmitting(false)
 
     console.log(values)
   }
@@ -44,19 +52,33 @@ export function ProfileForm() {
           control={form.control}
           name="heartrate"
           render={({ field }) => (
-            <FormItem>
-              <FormLabel>heartrate</FormLabel>
-              <FormControl>
-                <Input type="number" placeholder="shadcn" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
+            <>
+              <FormItem>
+                <FormLabel>heartrate</FormLabel>
+                <FormControl>
+                  <Input type="number" placeholder="shadcn" {...field} />
+                </FormControl>
+                <FormDescription>
+                  This is your public display name.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+              <FormItem>
+                <FormLabel>weight</FormLabel>
+                <FormControl>
+                  <Input type="number" placeholder="hello" {...field} />
+                </FormControl>
+                <FormDescription>
+                  This is your public display name.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            </>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <Button disabled={submitting} type="submit">
+          Submit
+        </Button>
       </form>
     </Form>
   )
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index e9ca128ca..44591ca5f 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -3,16 +3,14 @@ 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 { ProfileForm } from './components/form'
 
-export function DialogDemo() {
+export default function Page() {
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -30,19 +28,3 @@ export function DialogDemo() {
     </Dialog>
   )
 }
-
-export default function Page() {
-  return (
-    <div>
-      <DialogDemo />
-    </div>
-  )
-}
-
-function SomeComponent() {
-  return (
-    <div>
-      <h1>asdad</h1>
-    </div>
-  )
-}

From 6096dba9ec2a84916f4ed3e10da889c0570b0c58 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 22:31:33 -0400
Subject: [PATCH 05/11] Adding patient/Doctor

---
 app/(chat)/chat/[id]/page.tsx   | 19 -------------------
 app/{(chat) => chat}/layout.tsx |  0
 app/{(chat) => chat}/page.tsx   |  0
 app/doctor/layout.tsx           | 21 +++++++++++++++++++++
 app/doctor/page.tsx             |  7 +++++++
 app/page.tsx                    | 13 +++++++++++++
 app/patient/layout.tsx          | 21 +++++++++++++++++++++
 app/patient/page.tsx            |  7 +++++++
 components/header.tsx           |  4 +++-
 9 files changed, 72 insertions(+), 20 deletions(-)
 delete mode 100644 app/(chat)/chat/[id]/page.tsx
 rename app/{(chat) => chat}/layout.tsx (100%)
 rename app/{(chat) => chat}/page.tsx (100%)
 create mode 100644 app/doctor/layout.tsx
 create mode 100644 app/doctor/page.tsx
 create mode 100644 app/page.tsx
 create mode 100644 app/patient/layout.tsx
 create mode 100644 app/patient/page.tsx

diff --git a/app/(chat)/chat/[id]/page.tsx b/app/(chat)/chat/[id]/page.tsx
deleted file mode 100644
index 0611ad6dd..000000000
--- a/app/(chat)/chat/[id]/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getMissingKeys } from '@/app/actions'
-import { Chat } from '@/components/chat'
-import { AI } from '@/lib/chat/actions'
-
-export interface ChatPageProps {
-  params: {
-    id: string
-  }
-}
-
-export default async function ChatPage() {
-  const missingKeys = await getMissingKeys()
-
-  return (
-    <AI>
-      <Chat missingKeys={missingKeys} />
-    </AI>
-  )
-}
diff --git a/app/(chat)/layout.tsx b/app/chat/layout.tsx
similarity index 100%
rename from app/(chat)/layout.tsx
rename to app/chat/layout.tsx
diff --git a/app/(chat)/page.tsx b/app/chat/page.tsx
similarity index 100%
rename from app/(chat)/page.tsx
rename to app/chat/page.tsx
diff --git a/app/doctor/layout.tsx b/app/doctor/layout.tsx
new file mode 100644
index 000000000..a7912de5a
--- /dev/null
+++ b/app/doctor/layout.tsx
@@ -0,0 +1,21 @@
+import { redirect } from 'next/navigation'
+import { auth } from '@clerk/nextjs/server'
+
+export default async function DoctorLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const session = await auth()
+
+  const slug = session.orgSlug
+
+  if (!slug || slug !== 'doctor') {
+    redirect('/')
+  }
+  return (
+    <div className="relative flex h-[calc(100vh-_theme(spacing.16))] overflow-hidden">
+      {children}
+    </div>
+  )
+}
diff --git a/app/doctor/page.tsx b/app/doctor/page.tsx
new file mode 100644
index 000000000..c490ff8a6
--- /dev/null
+++ b/app/doctor/page.tsx
@@ -0,0 +1,7 @@
+export default async function () {
+  return (
+    <div>
+      <h1>DOCTOR</h1>
+    </div>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 000000000..7f5c051de
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,13 @@
+import { OrganizationList } from '@clerk/nextjs'
+import { auth } from '@clerk/nextjs/server'
+import { redirect } from 'next/navigation'
+
+export default async function Page() {
+  const session = await auth()
+
+  const org = session.orgSlug
+
+  if (!org) return <OrganizationList />
+
+  redirect(`/${org}`)
+}
diff --git a/app/patient/layout.tsx b/app/patient/layout.tsx
new file mode 100644
index 000000000..8051974bb
--- /dev/null
+++ b/app/patient/layout.tsx
@@ -0,0 +1,21 @@
+import { redirect } from 'next/navigation'
+import { auth } from '@clerk/nextjs/server'
+
+export default async function DoctorLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const session = await auth()
+
+  const slug = session.orgSlug
+
+  if (!slug || slug !== 'patient') {
+    redirect('/')
+  }
+  return (
+    <div className="relative flex h-[calc(100vh-_theme(spacing.16))] overflow-hidden">
+      {children}
+    </div>
+  )
+}
diff --git a/app/patient/page.tsx b/app/patient/page.tsx
new file mode 100644
index 000000000..18f44b6fd
--- /dev/null
+++ b/app/patient/page.tsx
@@ -0,0 +1,7 @@
+export default async function () {
+  return (
+    <div>
+      <h1>PATIENT</h1>
+    </div>
+  )
+}
diff --git a/components/header.tsx b/components/header.tsx
index 1af50fd03..6b2df88b4 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -9,13 +9,15 @@ import {
   IconSeparator,
   IconVercel
 } from '@/components/ui/icons'
-import { UserButton } from '@clerk/nextjs'
+import { OrganizationSwitcher, UserButton } from '@clerk/nextjs'
 
 export function Header() {
   return (
     <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       <div className="flex items-center justify-end space-x-2">
         <UserButton />
+        <IconSeparator />
+        <OrganizationSwitcher afterSelectOrganizationUrl={'/'} />
       </div>
     </header>
   )

From 7834659139c05fc041ff2b014d30f5cbce0908d3 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 23:00:35 -0400
Subject: [PATCH 06/11] adding dashboards

---
 app/api/terra/route.ts                        |  6 ++
 app/dashboard/page.tsx                        | 30 ------
 .../actions/update-heartreate.ts              |  0
 .../components/form.tsx                       |  0
 app/patient/page.tsx                          | 31 +++++-
 lib/chat/actions.tsx                          | 95 +------------------
 6 files changed, 36 insertions(+), 126 deletions(-)
 create mode 100644 app/api/terra/route.ts
 delete mode 100644 app/dashboard/page.tsx
 rename app/{dashboard => patient}/actions/update-heartreate.ts (100%)
 rename app/{dashboard => patient}/components/form.tsx (100%)

diff --git a/app/api/terra/route.ts b/app/api/terra/route.ts
new file mode 100644
index 000000000..7b109ac60
--- /dev/null
+++ b/app/api/terra/route.ts
@@ -0,0 +1,6 @@
+import { clerkClient } from '@clerk/clerk-sdk-node'
+
+export async function GET(request: Request) {
+  const clerk = clerkClient({ apiKey: process.env.CLERK_API_KEY })
+  return new Response('Hello, Terra!')
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
deleted file mode 100644
index 44591ca5f..000000000
--- a/app/dashboard/page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog'
-
-import { ProfileForm } from './components/form'
-
-export default function Page() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
-        </DialogHeader>
-        <ProfileForm />
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/app/dashboard/actions/update-heartreate.ts b/app/patient/actions/update-heartreate.ts
similarity index 100%
rename from app/dashboard/actions/update-heartreate.ts
rename to app/patient/actions/update-heartreate.ts
diff --git a/app/dashboard/components/form.tsx b/app/patient/components/form.tsx
similarity index 100%
rename from app/dashboard/components/form.tsx
rename to app/patient/components/form.tsx
diff --git a/app/patient/page.tsx b/app/patient/page.tsx
index 18f44b6fd..44591ca5f 100644
--- a/app/patient/page.tsx
+++ b/app/patient/page.tsx
@@ -1,7 +1,30 @@
-export default async function () {
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+
+import { ProfileForm } from './components/form'
+
+export default function Page() {
   return (
-    <div>
-      <h1>PATIENT</h1>
-    </div>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <ProfileForm />
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/lib/chat/actions.tsx b/lib/chat/actions.tsx
index 04c0d0f4e..afb88a75e 100644
--- a/lib/chat/actions.tsx
+++ b/lib/chat/actions.tsx
@@ -2,35 +2,17 @@ import 'server-only'
 
 import {
   createAI,
-  createStreamableUI,
   getMutableAIState,
-  getAIState,
   streamUI,
   createStreamableValue
 } from 'ai/rsc'
 import { createOpenAI } from '@ai-sdk/openai'
-import {
-  spinner,
-  BotCard,
-  BotMessage,
-  SystemMessage,
-  Stock,
-  Purchase
-} from '@/components/stocks'
+import { BotCard, BotMessage, Stock, Purchase } from '@/components/stocks'
 import { auth } from '@clerk/nextjs/server'
 
-import { z } from 'zod'
-import { EventsSkeleton } from '@/components/stocks/events-skeleton'
 import { Events } from '@/components/stocks/events'
-import { StocksSkeleton } from '@/components/stocks/stocks-skeleton'
 import { Stocks } from '@/components/stocks/stocks'
-import { StockSkeleton } from '@/components/stocks/stock-skeleton'
-import {
-  formatNumber,
-  runAsyncFnWithoutBlocking,
-  sleep,
-  nanoid
-} from '@/lib/utils'
+import { nanoid } from '@/lib/utils'
 import { SpinnerMessage, UserMessage } from '@/components/stocks/message'
 import { Chat, Message } from '@/lib/types'
 
@@ -39,76 +21,6 @@ const openai = createOpenAI({
   apiKey: process.env.TUNE_STUDIO_API_KEY
 })
 
-async function confirmPurchase(symbol: string, price: number, amount: number) {
-  'use server'
-
-  const aiState = getMutableAIState<typeof AI>()
-
-  const purchasing = createStreamableUI(
-    <div className="inline-flex items-start gap-1 md:items-center">
-      {spinner}
-      <p className="mb-2">
-        Purchasing {amount} ${symbol}...
-      </p>
-    </div>
-  )
-
-  const systemMessage = createStreamableUI(null)
-
-  runAsyncFnWithoutBlocking(async () => {
-    await sleep(1000)
-
-    purchasing.update(
-      <div className="inline-flex items-start gap-1 md:items-center">
-        {spinner}
-        <p className="mb-2">
-          Purchasing {amount} ${symbol}... working on it...
-        </p>
-      </div>
-    )
-
-    await sleep(1000)
-
-    purchasing.done(
-      <div>
-        <p className="mb-2">
-          You have successfully purchased {amount} ${symbol}. Total cost:{' '}
-          {formatNumber(amount * price)}
-        </p>
-      </div>
-    )
-
-    systemMessage.done(
-      <SystemMessage>
-        You have purchased {amount} shares of {symbol} at ${price}. Total cost ={' '}
-        {formatNumber(amount * price)}.
-      </SystemMessage>
-    )
-
-    aiState.done({
-      ...aiState.get(),
-      messages: [
-        ...aiState.get().messages,
-        {
-          id: nanoid(),
-          role: 'system',
-          content: `[User has purchased ${amount} shares of ${symbol} at ${price}. Total cost = ${
-            amount * price
-          }]`
-        }
-      ]
-    })
-  })
-
-  return {
-    purchasingUI: purchasing.value,
-    newMessage: {
-      id: nanoid(),
-      display: systemMessage.value
-    }
-  }
-}
-
 async function submitUserMessage(content: string) {
   'use server'
 
@@ -188,8 +100,7 @@ export type UIState = {
 
 export const AI = createAI<AIState, UIState>({
   actions: {
-    submitUserMessage,
-    confirmPurchase
+    submitUserMessage
   },
   initialUIState: [],
   initialAIState: { chatId: nanoid(), messages: [] }

From b03be13637781212d76b250f55a65f2f42bf7962 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 23:13:51 -0400
Subject: [PATCH 07/11] fixing next builds

---
 .env.example                    |  9 ---
 app/api/terra/route.ts          |  9 ++-
 app/new/page.tsx                |  5 --
 app/patient/components/form.tsx | 54 +++++++++---------
 components/chat-panel.tsx       | 33 -----------
 components/login-button.tsx     | 42 --------------
 components/login-form.tsx       | 97 ---------------------------------
 components/signup-form.tsx      | 95 --------------------------------
 components/user-menu.tsx        | 53 ------------------
 9 files changed, 35 insertions(+), 362 deletions(-)
 delete mode 100644 app/new/page.tsx
 delete mode 100644 components/login-button.tsx
 delete mode 100644 components/login-form.tsx
 delete mode 100644 components/signup-form.tsx
 delete mode 100644 components/user-menu.tsx

diff --git a/.env.example b/.env.example
index 4de4ec6df..89153aa2c 100644
--- a/.env.example
+++ b/.env.example
@@ -5,12 +5,3 @@ TUNE_STUDIO_API_KEY=XXXXXXXX
 # Clerk
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=XXXXXXXX
 CLERK_SECRET=XXXXXXXX
-
-# Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
-AUTH_SECRET=XXXXXXXX
-
-# Instructions to create kv database here: https://vercel.com/docs/storage/vercel-kv/quickstart and 
-KV_URL=XXXXXXXX
-KV_REST_API_URL=XXXXXXXX
-KV_REST_API_TOKEN=XXXXXXXX
-KV_REST_API_READ_ONLY_TOKEN=XXXXXXXX
\ No newline at end of file
diff --git a/app/api/terra/route.ts b/app/api/terra/route.ts
index 7b109ac60..767802c11 100644
--- a/app/api/terra/route.ts
+++ b/app/api/terra/route.ts
@@ -1,6 +1,9 @@
 import { clerkClient } from '@clerk/clerk-sdk-node'
+import { NextResponse } from 'next/server'
 
-export async function GET(request: Request) {
-  const clerk = clerkClient({ apiKey: process.env.CLERK_API_KEY })
-  return new Response('Hello, Terra!')
+export const dynamic = 'force-dynamic'
+
+export async function GET() {
+  // Your API logic here
+  return NextResponse.json({ message: 'Hello from Terra API' })
 }
diff --git a/app/new/page.tsx b/app/new/page.tsx
deleted file mode 100644
index d23589481..000000000
--- a/app/new/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from 'next/navigation'
-
-export default async function NewPage() {
-  redirect('/')
-}
diff --git a/app/patient/components/form.tsx b/app/patient/components/form.tsx
index 6eefb1a08..11d9c97ec 100644
--- a/app/patient/components/form.tsx
+++ b/app/patient/components/form.tsx
@@ -20,12 +20,13 @@ import { useState } from 'react'
 
 const formSchema = z.object({
   heartrate: z.string().min(2, {
-    message: 'heartrate must be at least 2 characters.'
+    message: 'Heart rate must be at least 2 characters.'
   }),
   weight: z.string().min(2, {
-    message: 'weight must be at least 2 characters.'
+    message: 'Weight must be at least 2 characters.'
   })
 })
+
 export function ProfileForm() {
   const [submitting, setSubmitting] = useState(false)
   const form = useForm<z.infer<typeof formSchema>>({
@@ -36,7 +37,6 @@ export function ProfileForm() {
     }
   })
 
-  // 2. Define a submit handler.
   async function onSubmit(values: z.infer<typeof formSchema>) {
     setSubmitting(true)
     await updateHeartRate({ newHeartRate: values.heartrate })
@@ -52,28 +52,32 @@ export function ProfileForm() {
           control={form.control}
           name="heartrate"
           render={({ field }) => (
-            <>
-              <FormItem>
-                <FormLabel>heartrate</FormLabel>
-                <FormControl>
-                  <Input type="number" placeholder="shadcn" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-              <FormItem>
-                <FormLabel>weight</FormLabel>
-                <FormControl>
-                  <Input type="number" placeholder="hello" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            </>
+            <FormItem>
+              <FormLabel>Heart Rate</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder="Enter heart rate"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>This is your heart rate value.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="weight"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Weight</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="Enter weight" {...field} />
+              </FormControl>
+              <FormDescription>This is your weight value.</FormDescription>
+              <FormMessage />
+            </FormItem>
           )}
         />
         <Button disabled={submitting} type="submit">
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 48df7a760..564299bb7 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react'
 
-import { shareChat } from '@/app/actions'
-import { Button } from '@/components/ui/button'
 import { PromptForm } from '@/components/prompt-form'
 import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
-import { IconShare } from '@/components/ui/icons'
 import { FooterText } from '@/components/footer'
-import { ChatShareDialog } from '@/components/chat-share-dialog'
 import { useAIState, useActions, useUIState } from 'ai/rsc'
 import type { AI } from '@/lib/chat/actions'
 import { nanoid } from 'nanoid'
@@ -100,35 +96,6 @@ export function ChatPanel({
             ))}
         </div>
 
-        {messages?.length >= 2 ? (
-          <div className="flex h-12 items-center justify-center">
-            <div className="flex space-x-2">
-              {id && title ? (
-                <>
-                  <Button
-                    variant="outline"
-                    onClick={() => setShareDialogOpen(true)}
-                  >
-                    <IconShare className="mr-2" />
-                    Share
-                  </Button>
-                  <ChatShareDialog
-                    open={shareDialogOpen}
-                    onOpenChange={setShareDialogOpen}
-                    onCopy={() => setShareDialogOpen(false)}
-                    shareChat={shareChat}
-                    chat={{
-                      id,
-                      title,
-                      messages: aiState.messages
-                    }}
-                  />
-                </>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-
         <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
           <PromptForm input={input} setInput={setInput} />
           <FooterText className="hidden sm:block" />
diff --git a/components/login-button.tsx b/components/login-button.tsx
deleted file mode 100644
index ae8f84274..000000000
--- a/components/login-button.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { signIn } from 'next-auth/react'
-
-import { cn } from '@/lib/utils'
-import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconGitHub, IconSpinner } from '@/components/ui/icons'
-
-interface LoginButtonProps extends ButtonProps {
-  showGithubIcon?: boolean
-  text?: string
-}
-
-export function LoginButton({
-  text = 'Login with GitHub',
-  showGithubIcon = true,
-  className,
-  ...props
-}: LoginButtonProps) {
-  const [isLoading, setIsLoading] = React.useState(false)
-  return (
-    <Button
-      variant="outline"
-      onClick={() => {
-        setIsLoading(true)
-        // next-auth signIn() function doesn't work yet at Edge Runtime due to usage of BroadcastChannel
-        signIn('github', { callbackUrl: `/` })
-      }}
-      disabled={isLoading}
-      className={cn(className)}
-      {...props}
-    >
-      {isLoading ? (
-        <IconSpinner className="mr-2 animate-spin" />
-      ) : showGithubIcon ? (
-        <IconGitHub className="mr-2" />
-      ) : null}
-      {text}
-    </Button>
-  )
-}
diff --git a/components/login-form.tsx b/components/login-form.tsx
deleted file mode 100644
index 0a6910d63..000000000
--- a/components/login-form.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { useFormState, useFormStatus } from 'react-dom'
-import { authenticate } from '@/app/login/actions'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import { toast } from 'sonner'
-import { IconSpinner } from './ui/icons'
-import { getMessageFromCode } from '@/lib/utils'
-import { useRouter } from 'next/navigation'
-
-export default function LoginForm() {
-  const router = useRouter()
-  const [result, dispatch] = useFormState(authenticate, undefined)
-
-  useEffect(() => {
-    if (result) {
-      if (result.type === 'error') {
-        toast.error(getMessageFromCode(result.resultCode))
-      } else {
-        toast.success(getMessageFromCode(result.resultCode))
-        router.refresh()
-      }
-    }
-  }, [result, router])
-
-  return (
-    <form
-      action={dispatch}
-      className="flex flex-col items-center gap-4 space-y-3"
-    >
-      <div className="w-full flex-1 rounded-lg border bg-white px-6 pb-4 pt-8 shadow-md  md:w-96 dark:bg-zinc-950">
-        <h1 className="mb-3 text-2xl font-bold">Please log in to continue.</h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-            </div>
-          </div>
-        </div>
-        <LoginButton />
-      </div>
-
-      <Link
-        href="/signup"
-        className="flex flex-row gap-1 text-sm text-zinc-400"
-      >
-        No account yet? <div className="font-semibold underline">Sign up</div>
-      </Link>
-    </form>
-  )
-}
-
-function LoginButton() {
-  const { pending } = useFormStatus()
-
-  return (
-    <button
-      className="my-4 flex h-10 w-full flex-row items-center justify-center rounded-md bg-zinc-900 p-2 text-sm font-semibold text-zinc-100 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
-      aria-disabled={pending}
-    >
-      {pending ? <IconSpinner /> : 'Log in'}
-    </button>
-  )
-}
diff --git a/components/signup-form.tsx b/components/signup-form.tsx
deleted file mode 100644
index f5b78a966..000000000
--- a/components/signup-form.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { useFormState, useFormStatus } from 'react-dom'
-import { signup } from '@/app/signup/actions'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import { toast } from 'sonner'
-import { IconSpinner } from './ui/icons'
-import { getMessageFromCode } from '@/lib/utils'
-import { useRouter } from 'next/navigation'
-
-export default function SignupForm() {
-  const router = useRouter()
-  const [result, dispatch] = useFormState(signup, undefined)
-
-  useEffect(() => {
-    if (result) {
-      if (result.type === 'error') {
-        toast.error(getMessageFromCode(result.resultCode))
-      } else {
-        toast.success(getMessageFromCode(result.resultCode))
-        router.refresh()
-      }
-    }
-  }, [result, router])
-
-  return (
-    <form
-      action={dispatch}
-      className="flex flex-col items-center gap-4 space-y-3"
-    >
-      <div className="w-full flex-1 rounded-lg border bg-white px-6 pb-4 pt-8 shadow-md md:w-96 dark:bg-zinc-950">
-        <h1 className="mb-3 text-2xl font-bold">Sign up for an account!</h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-zinc-400"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border bg-zinc-50 px-2 py-[9px] text-sm outline-none placeholder:text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-            </div>
-          </div>
-        </div>
-        <LoginButton />
-      </div>
-
-      <Link href="/login" className="flex flex-row gap-1 text-sm text-zinc-400">
-        Already have an account?
-        <div className="font-semibold underline">Log in</div>
-      </Link>
-    </form>
-  )
-}
-
-function LoginButton() {
-  const { pending } = useFormStatus()
-
-  return (
-    <button
-      className="my-4 flex h-10 w-full flex-row items-center justify-center rounded-md bg-zinc-900 p-2 text-sm font-semibold text-zinc-100 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
-      aria-disabled={pending}
-    >
-      {pending ? <IconSpinner /> : 'Create account'}
-    </button>
-  )
-}
diff --git a/components/user-menu.tsx b/components/user-menu.tsx
deleted file mode 100644
index 3ad28f034..000000000
--- a/components/user-menu.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { type Session } from '@/lib/types'
-
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { signOut } from '@/auth'
-
-export interface UserMenuProps {
-  user: Session['user']
-}
-
-function getUserInitials(name: string) {
-  const [firstName, lastName] = name.split(' ')
-  return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2)
-}
-
-export function UserMenu({ user }: UserMenuProps) {
-  return (
-    <div className="flex items-center justify-between">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="pl-0">
-            <div className="flex size-7 shrink-0 select-none items-center justify-center rounded-full bg-muted/50 text-xs font-medium uppercase text-muted-foreground">
-              {getUserInitials(user.email)}
-            </div>
-            <span className="ml-2 hidden md:block">{user.email}</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent sideOffset={8} align="start" className="w-fit">
-          <DropdownMenuItem className="flex-col items-start">
-            <div className="text-xs text-zinc-500">{user.email}</div>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <form
-            action={async () => {
-              'use server'
-              await signOut()
-            }}
-          >
-            <button className=" relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none transition-colors hover:bg-red-500 hover:text-white focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-              Sign Out
-            </button>
-          </form>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}

From e53b1e2e16da5db87e99b78032050f5dab3cf077 Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 23:25:19 -0400
Subject: [PATCH 08/11] udpdate organization

---
 components/header.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/header.tsx b/components/header.tsx
index 6b2df88b4..7df188b17 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -17,7 +17,10 @@ export function Header() {
       <div className="flex items-center justify-end space-x-2">
         <UserButton />
         <IconSeparator />
-        <OrganizationSwitcher afterSelectOrganizationUrl={'/'} />
+        <OrganizationSwitcher
+          afterSelectOrganizationUrl={'/'}
+          hidePersonal={true}
+        />
       </div>
     </header>
   )

From 99a30a371e9daa12a19d174efbf34d378a921a2a Mon Sep 17 00:00:00 2001
From: Yiyun Yao <106117469+nyonyoko@users.noreply.github.com>
Date: Sat, 14 Sep 2024 23:29:13 -0400
Subject: [PATCH 09/11] fix

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 7f5c051de..5ed83957c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,7 +7,7 @@ export default async function Page() {
 
   const org = session.orgSlug
 
-  if (!org) return <OrganizationList />
+  if (!org) return <OrganizationList hidePersonal={true} />
 
   redirect(`/${org}`)
 }

From 49af760cd5f11cc345fdf4e892d60538dd21cfeb Mon Sep 17 00:00:00 2001
From: mahdi afshari <mahdiafshari.1300@gmail.com>
Date: Sun, 15 Sep 2024 03:36:22 -0400
Subject: [PATCH 10/11] added terra widget to the patient page

---
 app/api/terra/generateWidgetSession/route.ts | 16 ++++
 app/api/terra/route.ts                       |  9 --
 app/patient/components/TerraWidget.tsx       | 74 +++++++++++++++
 app/patient/components/form.tsx              | 96 ++------------------
 app/patient/page.tsx                         | 47 +++++-----
 5 files changed, 122 insertions(+), 120 deletions(-)
 create mode 100644 app/api/terra/generateWidgetSession/route.ts
 delete mode 100644 app/api/terra/route.ts
 create mode 100644 app/patient/components/TerraWidget.tsx

diff --git a/app/api/terra/generateWidgetSession/route.ts b/app/api/terra/generateWidgetSession/route.ts
new file mode 100644
index 000000000..d86a29d0f
--- /dev/null
+++ b/app/api/terra/generateWidgetSession/route.ts
@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+import Terra from "terra-api";
+
+const terra = new Terra(process.env.TERRA_DEV_ID ?? "", process.env.TERRA_API_KEY ?? "", process.env.TERRA_WEBHOOK_SECRET ?? "");
+
+export async function GET(request: NextRequest) {
+    const resp = await terra.generateWidgetSession({
+        referenceID: "HelloHarvard",
+        language: "en",
+        authSuccessRedirectUrl: "http://localhost:3000",
+        authFailureRedirectUrl: "http://localhost:3000"
+    })
+    return NextResponse.json({ url: resp.url }, { status: 200}); 
+}
+
+
diff --git a/app/api/terra/route.ts b/app/api/terra/route.ts
deleted file mode 100644
index 767802c11..000000000
--- a/app/api/terra/route.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { clerkClient } from '@clerk/clerk-sdk-node'
-import { NextResponse } from 'next/server'
-
-export const dynamic = 'force-dynamic'
-
-export async function GET() {
-  // Your API logic here
-  return NextResponse.json({ message: 'Hello from Terra API' })
-}
diff --git a/app/patient/components/TerraWidget.tsx b/app/patient/components/TerraWidget.tsx
new file mode 100644
index 000000000..78c33afdd
--- /dev/null
+++ b/app/patient/components/TerraWidget.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+const api_key = process.env.NEXT_PUBLIC_TERRA_API_KEY;
+const reference_id = process.env.NEXT_PUBLIC_TERRA_DEV_ID;
+
+/// The getWidgetAsync function is an asynchronous function that fetches the widget session URL from the Terra API
+/// and sets the url state using the setUrl function.
+/// It takes an object with an onSuccess callback function as a parameter to set state back to the main component.
+export const getWidgetAsync = async (props: { onSuccess: any }) => {
+  try {
+    const response = await fetch(
+      'https://api.tryterra.co/v2/auth/generateWidgetSession',
+      {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'dev-id': 'testingTerra',
+          'content-type': 'application/json',
+          'x-api-key': api_key as string,
+        },
+        body: JSON.stringify({
+          reference_id: reference_id,
+          providers:
+            'GARMIN,WITHINGS,FITBIT,GOOGLE,OURA,WAHOO,PELOTON,ZWIFT,TRAININGPEAKS,FREESTYLELIBRE,DEXCOM,COROS,HUAWEI,OMRON,RENPHO,POLAR,SUUNTO,EIGHT,APPLE,CONCEPT2,WHOOP,IFIT,TEMPO,CRONOMETER,FATSECRET,NUTRACHECK,UNDERARMOUR',
+          language: 'en',
+          auth_success_redirect_url: 'terraficapp://request',
+          auth_failure_redirect_url: 'terraficapp://login',
+        }),
+      },
+    );
+    const json = await response.json();
+    props.onSuccess(json.url);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const Widget = () => {
+  const [url, setUrl] = useState('');
+
+  // Close the browser when authentication is completed. Authentication completion can be detected by listening to the incoming link.
+  // The success or fail url is logged into the console.
+  const _handleURL = (event: MessageEvent) => {
+    console.log(event.data);
+  };
+  // Open the browser for authentication using the Widget components.
+  const _handlePressButtonAsync = async () => {
+    getWidgetAsync({ onSuccess: setUrl });
+    // Use window.open instead of WebBrowser.openBrowserAsync
+    window.open(url, '_blank');
+  };
+
+  // set up an url listener and invoke getWidgetAsync when the component is mounted
+  useEffect(() => {
+    // Linking.addEventListener is not available in Next.js
+    // We can use window.addEventListener for similar functionality
+    window.addEventListener('message', _handleURL);
+    getWidgetAsync({ onSuccess: setUrl });
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener('message', _handleURL);
+    };
+  }, []);
+
+  return (
+    <div>
+      <Button onClick={_handlePressButtonAsync}>open widget</Button>
+    </div>
+  );
+};
diff --git a/app/patient/components/form.tsx b/app/patient/components/form.tsx
index 11d9c97ec..138e8f266 100644
--- a/app/patient/components/form.tsx
+++ b/app/patient/components/form.tsx
@@ -1,89 +1,13 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { updateHeartRate } from '../actions/update-heartreate'
-import { useState } from 'react'
-
-const formSchema = z.object({
-  heartrate: z.string().min(2, {
-    message: 'Heart rate must be at least 2 characters.'
-  }),
-  weight: z.string().min(2, {
-    message: 'Weight must be at least 2 characters.'
-  })
-})
-
-export function ProfileForm() {
-  const [submitting, setSubmitting] = useState(false)
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      heartrate: '123',
-      weight: '123'
-    }
-  })
-
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    setSubmitting(true)
-    await updateHeartRate({ newHeartRate: values.heartrate })
-    setSubmitting(false)
-
-    console.log(values)
-  }
+import { Widget } from './TerraWidget'
 
+export function PatientForm() {
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="heartrate"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Heart Rate</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  placeholder="Enter heart rate"
-                  {...field}
-                />
-              </FormControl>
-              <FormDescription>This is your heart rate value.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="weight"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Weight</FormLabel>
-              <FormControl>
-                <Input type="number" placeholder="Enter weight" {...field} />
-              </FormControl>
-              <FormDescription>This is your weight value.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button disabled={submitting} type="submit">
-          Submit
-        </Button>
-      </form>
-    </Form>
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Connect Your Health Device</h2>
+      <p className="text-sm text-gray-600">
+        Click the button below to connect your health device and start syncing your data.
+      </p>
+      <Widget />
+    </div>
   )
-}
+}
\ No newline at end of file
diff --git a/app/patient/page.tsx b/app/patient/page.tsx
index 44591ca5f..e01bb74fb 100644
--- a/app/patient/page.tsx
+++ b/app/patient/page.tsx
@@ -1,30 +1,27 @@
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog'
+'use client'
 
-import { ProfileForm } from './components/form'
+import { useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { PatientForm } from './components/form'
+
+export default function PatientPage() {
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const authStatus = searchParams.get('auth')
+    if (authStatus === 'success') {
+      console.log('Device connected successfully')
+      // Handle successful connection (e.g., show a success message, update user state)
+    } else if (authStatus === 'failure') {
+      console.log('Device connection failed')
+      // Handle failed connection (e.g., show an error message)
+    }
+  }, [searchParams])
 
-export default function Page() {
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
-        </DialogHeader>
-        <ProfileForm />
-      </DialogContent>
-    </Dialog>
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-2xl font-bold mb-6">Patient Health Device Connection</h1>
+      <PatientForm />
+    </div>
   )
 }

From 7eb9973b6dcccab98a6b0ae1d3440553343113ff Mon Sep 17 00:00:00 2001
From: mahdi afshari <mahdiafshari.1300@gmail.com>
Date: Sun, 15 Sep 2024 04:26:59 -0400
Subject: [PATCH 11/11] api update

---
 app/api/terra-widget/route.ts                | 47 ++++++++++
 app/api/terra/generateWidgetSession/route.ts | 19 ++--
 app/patient/components/TerraWidget.tsx       | 99 +++++++++-----------
 3 files changed, 102 insertions(+), 63 deletions(-)
 create mode 100644 app/api/terra-widget/route.ts

diff --git a/app/api/terra-widget/route.ts b/app/api/terra-widget/route.ts
new file mode 100644
index 000000000..fce162af5
--- /dev/null
+++ b/app/api/terra-widget/route.ts
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const api_key = process.env.TERRA_API_KEY;
+const reference_id = process.env.TERRA_DEV_ID;
+
+export async function POST(request: NextRequest) {
+  try {
+    console.log('API Key:', api_key);
+    console.log('Reference ID:', reference_id);
+    
+    if (!api_key || !reference_id) {
+      console.error('Missing API key or reference ID');
+      return NextResponse.json({ error: 'Missing API key or reference ID' }, { status: 400 });
+    }
+
+    const response = await fetch(
+      'https://api.tryterra.co/v2/auth/generateWidgetSession',
+      {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'dev-id': 'testingTerra',
+          'content-type': 'application/json',
+          'x-api-key': api_key,
+        },
+        body: JSON.stringify({
+          reference_id: reference_id,
+          providers:
+            'GARMIN,WITHINGS,FITBIT,GOOGLE,OURA,WAHOO,PELOTON,ZWIFT,TRAININGPEAKS,FREESTYLELIBRE,DEXCOM,COROS,HUAWEI,OMRON,RENPHO,POLAR,SUUNTO,EIGHT,APPLE,CONCEPT2,WHOOP,IFIT,TEMPO,CRONOMETER,FATSECRET,NUTRACHECK,UNDERARMOUR',
+          language: 'en',
+          auth_success_redirect_url: 'terraficapp://request',
+          auth_failure_redirect_url: 'terraficapp://login',
+        }),
+      },
+    );
+    
+    console.log('Terra API response status:', response.status);
+    
+    const data = await response.json();
+    console.log('Terra API response data:', data);
+    
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error in Terra API route:', error);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/app/api/terra/generateWidgetSession/route.ts b/app/api/terra/generateWidgetSession/route.ts
index d86a29d0f..b2b40511b 100644
--- a/app/api/terra/generateWidgetSession/route.ts
+++ b/app/api/terra/generateWidgetSession/route.ts
@@ -4,13 +4,18 @@ import Terra from "terra-api";
 const terra = new Terra(process.env.TERRA_DEV_ID ?? "", process.env.TERRA_API_KEY ?? "", process.env.TERRA_WEBHOOK_SECRET ?? "");
 
 export async function GET(request: NextRequest) {
-    const resp = await terra.generateWidgetSession({
-        referenceID: "HelloHarvard",
-        language: "en",
-        authSuccessRedirectUrl: "http://localhost:3000",
-        authFailureRedirectUrl: "http://localhost:3000"
-    })
-    return NextResponse.json({ url: resp.url }, { status: 200}); 
+    try {
+        const resp = await terra.generateWidgetSession({
+            referenceID: "HelloMIT",
+            language: "en",
+            authSuccessRedirectUrl: "http://localhost:3000",
+            authFailureRedirectUrl: "http://localhost:3000"
+        });
+        return NextResponse.json({ url: resp.url }, { status: 200 }); 
+    } catch (error) {
+        console.error('Error generating widget session:', error);
+        return NextResponse.json({ error: 'Failed to generate widget session' }, { status: 500 });
+    }
 }
 
 
diff --git a/app/patient/components/TerraWidget.tsx b/app/patient/components/TerraWidget.tsx
index 78c33afdd..836c4b71c 100644
--- a/app/patient/components/TerraWidget.tsx
+++ b/app/patient/components/TerraWidget.tsx
@@ -1,74 +1,61 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 
-const api_key = process.env.NEXT_PUBLIC_TERRA_API_KEY;
-const reference_id = process.env.NEXT_PUBLIC_TERRA_DEV_ID;
-
-/// The getWidgetAsync function is an asynchronous function that fetches the widget session URL from the Terra API
-/// and sets the url state using the setUrl function.
-/// It takes an object with an onSuccess callback function as a parameter to set state back to the main component.
-export const getWidgetAsync = async (props: { onSuccess: any }) => {
+export const getWidgetAsync = async (props: { onSuccess: (url: string) => void }) => {
   try {
-    const response = await fetch(
-      'https://api.tryterra.co/v2/auth/generateWidgetSession',
-      {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'dev-id': 'testingTerra',
-          'content-type': 'application/json',
-          'x-api-key': api_key as string,
-        },
-        body: JSON.stringify({
-          reference_id: reference_id,
-          providers:
-            'GARMIN,WITHINGS,FITBIT,GOOGLE,OURA,WAHOO,PELOTON,ZWIFT,TRAININGPEAKS,FREESTYLELIBRE,DEXCOM,COROS,HUAWEI,OMRON,RENPHO,POLAR,SUUNTO,EIGHT,APPLE,CONCEPT2,WHOOP,IFIT,TEMPO,CRONOMETER,FATSECRET,NUTRACHECK,UNDERARMOUR',
-          language: 'en',
-          auth_success_redirect_url: 'terraficapp://request',
-          auth_failure_redirect_url: 'terraficapp://login',
-        }),
-      },
-    );
+    console.log('Fetching widget URL...');
+    const response = await fetch('/api/terra/generateWidgetSession', { method: 'GET' });
+    console.log('Response status:', response.status);
     const json = await response.json();
-    props.onSuccess(json.url);
+    console.log('API Response:', json);
+    if (json.url) {
+      props.onSuccess(json.url);
+    } else {
+      console.error('No URL in response:', json);
+    }
   } catch (error) {
-    console.error(error);
+    console.error('Error in getWidgetAsync:', error);
   }
 };
 
 export const Widget = () => {
-  const [url, setUrl] = useState('');
-
-  // Close the browser when authentication is completed. Authentication completion can be detected by listening to the incoming link.
-  // The success or fail url is logged into the console.
-  const _handleURL = (event: MessageEvent) => {
-    console.log(event.data);
-  };
-  // Open the browser for authentication using the Widget components.
-  const _handlePressButtonAsync = async () => {
-    getWidgetAsync({ onSuccess: setUrl });
-    // Use window.open instead of WebBrowser.openBrowserAsync
-    window.open(url, '_blank');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePressButton = async () => {
+    try {
+      setError(null);
+      setIsLoading(true);
+      console.log('Button clicked');
+      await getWidgetAsync({ 
+        onSuccess: (newUrl: string) => {
+          console.log('Received URL:', newUrl);
+          if (newUrl) {
+            window.open(newUrl, '_blank');
+          } else {
+            setError('Received empty URL from Terra API');
+          }
+        }
+      });
+    } catch (error) {
+      console.error('Error opening widget:', error);
+      setError('Failed to open widget');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  // set up an url listener and invoke getWidgetAsync when the component is mounted
-  useEffect(() => {
-    // Linking.addEventListener is not available in Next.js
-    // We can use window.addEventListener for similar functionality
-    window.addEventListener('message', _handleURL);
-    getWidgetAsync({ onSuccess: setUrl });
-
-    // Cleanup function
-    return () => {
-      window.removeEventListener('message', _handleURL);
-    };
-  }, []);
-
   return (
     <div>
-      <Button onClick={_handlePressButtonAsync}>open widget</Button>
+      <Button 
+        onClick={handlePressButton} 
+        disabled={isLoading}
+      >
+        {isLoading ? 'Loading...' : 'Open Widget'}
+      </Button>
+      {error && <p className="text-red-500 mt-2">{error}</p>}
     </div>
   );
 };