feat: add some folders

.env.example

@@ -0,0 +1,2 @@
+# you can find this in https://cloud.dify.ai/ 
+API_SECRET=YOUR_API_SECRET

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env

app/chat/@content/page.tsx

@@ -0,0 +1,6 @@
+const Content = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return <div className=''>Content</div>
+}
+
+export default Content

app/chat/@sidebar/page.tsx

@@ -0,0 +1,6 @@
+const Sidebar = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  return <div>Sidebar</div>
+}
+
+export default Sidebar

app/chat/layout.tsx

@@ -0,0 +1,18 @@
+import styles from './style.module.scss'
+import { Suspense } from 'react'
+import Loading from '../loading'
+export default function Layout(props: {
+  sidebar: React.ReactNode
+  content: React.ReactNode
+}) {
+  return (
+    <main className={styles.main}>
+      <div className={styles.sidebar_wrapper}>
+        <Suspense fallback={<Loading />}>{props.sidebar}</Suspense>
+      </div>
+      <div className={styles.content_wrapper}>
+        <Suspense fallback={<Loading />}>{props.content}</Suspense>
+      </div>
+    </main>
+  )
+}

app/chat/page.tsx

@@ -1,6 +0,0 @@
-const Home = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-  return <main className='flex min-h-screen flex-col items-center justify-between p-24'>Chat</main>
-}
-
-export default Home

app/chat/style.module.scss

@@ -0,0 +1,9 @@
+.main {
+  @apply flex;
+  .sidebar_wrapper {
+    @apply flex w-40 md:w-32 lg:w-40 shrink-0;
+  }
+  .content_wrapper {
+    @apply flex w-full;
+  }
+}