Repository: nisabmohd/ChatGPT
Branch: master
Commit: 7377becfaa5e
Files: 54
Total size: 72.6 KB
Directory structure:
gitextract_w0t2kooj/
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── actions/
│ └── chat.ts
├── app/
│ ├── (private-layout)/
│ │ ├── chat/
│ │ │ ├── [id]/
│ │ │ │ ├── chat.tsx
│ │ │ │ ├── loading.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── input.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (public-layout)/
│ │ ├── (auth)/
│ │ │ ├── login/
│ │ │ │ └── page.tsx
│ │ │ └── register/
│ │ │ └── page.tsx
│ │ ├── (hero)/
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── api/
│ │ └── auth/
│ │ └── [...nextauth]/
│ │ └── route.ts
│ ├── error.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── not-found.tsx
├── components/
│ ├── google-login.tsx
│ ├── hero-nav.tsx
│ ├── left-panel.tsx
│ ├── logo.tsx
│ ├── navbar.tsx
│ ├── profile.tsx
│ ├── session-provider.tsx
│ ├── signout-btn.tsx
│ ├── submit.tsx
│ ├── theme-provider.tsx
│ ├── toggle.tsx
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── dialog.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── scroll-area.tsx
│ │ ├── sheet.tsx
│ │ ├── skeleton.tsx
│ │ ├── toast.tsx
│ │ ├── toaster.tsx
│ │ └── use-toast.ts
│ └── user-api.tsx
├── components.json
├── lib/
│ ├── auth.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── postcss.config.js
├── prisma/
│ ├── client.ts
│ └── schema.prisma
├── tailwind.config.ts
├── tsconfig.json
└── types/
└── index.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## Tech
- NextJS 14, RSC, Server actions, useFormStatus,useOptimistic
- Shadcn-ui
- Prisma
- NextAuth
- OpenAI
- Postgres
## Preview
<img src="./images/dark-hero.png" alt="" width="100%"/>
<img src="./images/dark-greet.png" alt="" width="100%"/>
<img src="./images/dark-chat.png" alt="" width="100%"/>
<img src="./images/light-chat.png" alt="" width="100%"/>
Old version url - https://nextgpt-old-xyz.vercel.app/auth/login
================================================
FILE: actions/chat.ts
================================================
"use server";
import { getUser } from "@/lib/auth";
import { generateRandomId } from "@/lib/utils";
import prisma from "@/prisma/client";
import { JsonMessagesArraySchema } from "@/types";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import OpenAI from "openai";
export type Message = {
message: string;
apiKey: string;
conversationId: string;
};
export type NewMessage = Omit<Message, "conversationId">;
export async function newChat(params: NewMessage) {
const session = await getUser();
if (!session?.user) redirect("/login");
let id: string | undefined;
let error: undefined | { message: string };
try {
const responseMessage = await createCompletion(
params.apiKey,
params.message
);
const newConversationId = generateRandomId(8);
const newMessageJson = [
{
id: newConversationId,
question: params.message,
answer: responseMessage.message.content,
},
];
const dataRef = await prisma.conversation.create({
data: {
messages: newMessageJson,
name: params.message,
userId: session.user.id,
},
});
id = dataRef.id;
} catch (err) {
if (err instanceof Error) error = { message: err.message };
}
console.log(error);
if (error) return error;
redirect(`/chat/${id}`);
}
export async function chat(params: Message) {
let error: undefined | { message: string };
try {
const responseMessage = await createCompletion(
params.apiKey,
params.message
);
const newConversationId = generateRandomId(8);
const dataRef = await prisma.conversation.findUnique({
where: {
id: params.conversationId,
},
});
const updatedMessageJson = [
...JsonMessagesArraySchema.parse(dataRef?.messages),
{
id: newConversationId,
question: params.message,
answer: responseMessage.message.content,
},
];
await prisma.conversation.update({
where: {
id: params.conversationId,
},
data: {
messages: updatedMessageJson,
},
});
} catch (err) {
if (err instanceof Error) error = { message: err.message };
}
console.log(error);
if (error) return error;
revalidatePath(`/chat/${params.conversationId}`);
}
declare global {
var ai_map: undefined | Map<string, OpenAI>;
}
const map = globalThis.ai_map ?? new Map<string, OpenAI>();
async function createCompletion(apiKey: string, message: string) {
let ai: OpenAI;
if (map.has(apiKey)) {
ai = map.get(apiKey)!;
} else {
ai = new OpenAI({
apiKey,
});
map.set(apiKey, ai);
}
const chatCompletion = await ai.chat.completions.create({
messages: [{ role: "user", content: message }],
model: "gpt-3.5-turbo",
});
return chatCompletion.choices[0];
}
================================================
FILE: app/(private-layout)/chat/[id]/chat.tsx
================================================
"use client";
import { chat } from "@/actions/chat";
import Submit from "@/components/submit";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { useToast } from "@/components/ui/use-toast";
import { generateRandomId } from "@/lib/utils";
import { JSONMessage } from "@/types";
import { useRouter } from "next/navigation";
import { ElementRef, useEffect, useOptimistic, useRef } from "react";
type ChatProps = {
messages: JSONMessage[];
id: string;
};
export default function Chat({ messages, id }: ChatProps) {
const scrollRef = useRef<ElementRef<"div">>(null);
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage: string) => [
...state,
{
answer: undefined,
id: generateRandomId(4),
question: newMessage,
},
]
);
useEffect(() => {
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
}, [optimisticMessages]);
return (
<div className="grow">
<div className="flex flex-col items-start gap-12 pb-10 min-h-[75vh] sm:w-[95%]">
{optimisticMessages.map((message) => (
<div className="flex flex-col items-start gap-4 " key={message.id}>
<h4 className="text-xl font-medium dark:text-sky-200 text-sky-700">
{message.question}
</h4>
{!message.answer ? (
<div className="w-96 flex flex-col gap-3">
<Skeleton className="w-[90%] h-[20px] rounded-md" />
<Skeleton className="w-[60%] h-[20px] rounded-md" />
</div>
) : (
<p className="dark:text-slate-300 text-slate-900 whitespace-pre-wrap">
{message.answer}
</p>
)}
</div>
))}
</div>
<div ref={scrollRef}></div>
<div className="mt-5 bottom-0 sticky pb-8 pt-1 bg-background">
<ChatInput id={id} addMessage={addOptimisticMessage} />
</div>
</div>
);
}
type ConversationComponent = {
id: string;
addMessage: (msg: string) => void;
};
function ChatInput({ addMessage, id }: ConversationComponent) {
const inputRef = useRef<ElementRef<"input">>(null);
const router = useRouter();
const { toast } = useToast();
async function handleSubmit(formData: FormData) {
const message = formData.get("message") as string;
if (!message) return;
const apiKey = localStorage.getItem("apiKey");
if (!apiKey) {
toast({
title: "No API key found!",
description: 'Please add API key from "My account" section',
});
return;
}
if (inputRef.current) {
inputRef.current.value = "";
}
addMessage(message);
const err = await chat({
apiKey,
conversationId: id,
message,
});
if (err?.message) {
toast({
title: err.message,
});
}
}
return (
<form
action={handleSubmit}
className="flex flex-row items-center gap-2 sm:pr-5"
>
<Input
ref={inputRef}
autoComplete="off"
name="message"
placeholder="Ask me something..."
className="h-12"
/>
<Submit />
</form>
);
}
================================================
FILE: app/(private-layout)/chat/[id]/loading.tsx
================================================
import { Skeleton } from "@/components/ui/skeleton";
export default function ChatLoading() {
return (
<div>
<div className="flex flex-col gap-12 min-h-[80vh]">
<div className="flex flex-col gap-4">
<Skeleton className="max-w-[700px] h-[40px] rounded-md" />
<Skeleton className="w-[70%] h-[20px] rounded-md" />
<Skeleton className="w-[30%] h-[20px] rounded-md" />
</div>
<div className="flex flex-col gap-4">
<Skeleton className="max-w-[700px] h-[40px] rounded-md" />
<Skeleton className="w-[82%] h-[20px] rounded-md" />
<Skeleton className="w-[45%] h-[20px] rounded-md" />
</div>
</div>
<div className=" flex flex-row items-center gap-4 mt-5 bottom-0 sticky pb-8 pt-1 bg-background">
<Skeleton className="w-[95%] h-[55px] rounded-md" />
<Skeleton className="w-[3%] h-[55px] rounded-md" />
</div>
</div>
);
}
================================================
FILE: app/(private-layout)/chat/[id]/page.tsx
================================================
import prisma from "@/prisma/client";
import { notFound } from "next/navigation";
import Chat from "./chat";
import { JsonMessagesArraySchema } from "@/types";
type PageParams = {
params: {
id: string;
};
};
export default async function ChatSpecificPage({ params: { id } }: PageParams) {
const res = await prisma.conversation.findUnique({
where: {
id,
},
});
if (!res) return notFound();
const parseResult = JsonMessagesArraySchema.parse(res.messages);
return <Chat id={id} messages={parseResult} />;
}
================================================
FILE: app/(private-layout)/chat/input.tsx
================================================
"use client";
import Submit from "@/components/submit";
import { Input } from "@/components/ui/input";
import { newChat } from "@/actions/chat";
import { useToast } from "@/components/ui/use-toast";
import { useRouter } from "next/navigation";
export default function ChatInput() {
const router = useRouter();
const { toast } = useToast();
async function handleSubmit(formData: FormData) {
const message = formData.get("message") as string;
if (!message) return;
const apiKey = localStorage.getItem("apiKey");
if (!apiKey) {
toast({
title: "No API key found!",
description: 'Please add API key from "My account" section',
});
return;
}
const { message: err } = await newChat({
apiKey,
message,
});
if (err) {
toast({
title: err,
});
}
}
return (
<form
action={handleSubmit}
className="flex flex-row items-center gap-2 sm:pr-5"
>
<Input
autoComplete="off"
name="message"
placeholder="Ask me something..."
className="h-12"
/>
<Submit />
</form>
);
}
================================================
FILE: app/(private-layout)/chat/layout.tsx
================================================
import LeftPanel from "@/components/left-panel";
import { PropsWithChildren } from "react";
export default function ChatLayout({ children }: PropsWithChildren) {
return (
<div className="flex sm:flex-row flex-col items-start sm:gap-12 gap-4 w-full">
<div className="sm:sticky bg-background sm:w-fit w-full sm:top-32 sm:mb-0 mb-4">
<LeftPanel />
</div>
<div className="w-full">{children}</div>
</div>
);
}
================================================
FILE: app/(private-layout)/chat/page.tsx
================================================
import ChatInput from "./input";
export default function Chat() {
return (
<div className="grow">
<div className="flex flex-col items-start gap-4 pb-10 min-h-[75vh] sm:w-[95%]">
<div className="text-xl font-medium dark:text-sky-200 text-sky-700">
How can I help you today?
</div>
<div className="dark:text-slate-300 text-slate-900">
ChatGPT can make mistakes. Consider checking important information.
</div>
</div>
<div className="mt-5 bottom-0 sticky pb-8 pt-1 bg-background">
<ChatInput />
</div>
</div>
);
}
================================================
FILE: app/(private-layout)/layout.tsx
================================================
import Navbar from "@/components/navbar";
import { getUser } from "@/lib/auth";
import { redirect } from "next/navigation";
import { PropsWithChildren } from "react";
export default async function PrivateLayout({ children }: PropsWithChildren) {
const session = await getUser();
if (!session?.user) redirect("/login");
return (
<div>
<Navbar />
{children}
</div>
);
}
================================================
FILE: app/(public-layout)/(auth)/login/page.tsx
================================================
import GoogleLogin from "@/components/google-login";
export default function Login() {
return (
<div className="flex flex-col items-center gap-5 justify-center h-[70vh]">
<h3 className="text-2xl font-bold text-center">Login to OpenChat</h3>
<GoogleLogin />
</div>
);
}
================================================
FILE: app/(public-layout)/(auth)/register/page.tsx
================================================
import GoogleLogin from "@/components/google-login";
export default function Login() {
return (
<div className="flex flex-col items-center gap-5 justify-center h-[70vh]">
<h3 className="text-2xl font-bold text-center">Register to OpenChat</h3>
<GoogleLogin />
</div>
);
}
================================================
FILE: app/(public-layout)/(hero)/page.tsx
================================================
import { buttonVariants } from "@/components/ui/button";
import Link from "next/link";
export default function Home() {
return (
<div className="flex flex-col items-center gap-5 justify-center h-[70vh]">
<h3 className="text-4xl font-bold text-center">
Welcome to OpenChat! Your Gateway to Intelligent Conversations, Powered
by OpenAPI
</h3>
<p className="sm:w-[75%] mx-auto text-center text-muted-foreground ">
OpenChat redefines the chat experience by seamlessly integrating the
robust capabilities of the OpenAPI. This platform takes conversational
AI to new heights, offering you a dynamic and intelligent chat companion
designed for a wide array of applications.
</p>
<Link href="/register" className={buttonVariants({ size: "lg" })}>
Get started
</Link>
</div>
);
}
================================================
FILE: app/(public-layout)/layout.tsx
================================================
import HeroNav from "@/components/hero-nav";
import { getUser } from "@/lib/auth";
import { redirect } from "next/navigation";
import { PropsWithChildren } from "react";
export default async function PublicLayout({ children }: PropsWithChildren) {
const session = await getUser();
if (session?.user) redirect("/chat");
return (
<div>
<HeroNav />
{children}
</div>
);
}
================================================
FILE: app/api/auth/[...nextauth]/route.ts
================================================
import { authConfig } from "@/lib/auth";
import NextAuth from "next-auth/next";
const handler = NextAuth(authConfig);
export { handler as GET, handler as POST };
================================================
FILE: app/error.tsx
================================================
"use client";
import { Button } from "@/components/ui/button";
import { useEffect } from "react";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
console.error(error.message);
}, [error]);
return (
<div className="flex flex-col gap-3 items-start pt-6">
<h2 className="text-2xl font-semibold">Something went wrong!</h2>
<Button
onClick={
// Attempt to recover by trying to re-render the segment
() => reset()
}
>
Try again
</Button>
</div>
);
}
================================================
FILE: app/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
================================================
FILE: app/layout.tsx
================================================
import type { Metadata } from "next";
import { Space_Grotesk } from "next/font/google";
import { ThemeProvider } from "@/components/theme-provider";
import NextAuthProvider from "@/components/session-provider";
import { Toaster } from "@/components/ui/toaster";
import "./globals.css";
const font = Space_Grotesk({ subsets: ["latin"], weight: "400" });
export const metadata: Metadata = {
title: "OpenChat",
description: "An OpenAI based chat system",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<NextAuthProvider>
<html lang="en" suppressHydrationWarning>
<body className={`${font.className}`} suppressHydrationWarning>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<main className="sm:px-10 px-5">{children}</main>
<Toaster />
</ThemeProvider>
</body>
</html>
</NextAuthProvider>
);
}
================================================
FILE: app/not-found.tsx
================================================
import { buttonVariants } from "@/components/ui/button";
import Link from "next/link";
export default function NotFoundPage() {
return (
<div className="pt-6">
<div className="flex flex-row items-end gap-2 my-2">
<div className="text-2xl font-semibold">404</div>
<div>Not found</div>
</div>
<Link href="/" className={buttonVariants()}>
Back to homepage
</Link>
</div>
);
}
================================================
FILE: components/google-login.tsx
================================================
"use client";
import { signIn } from "next-auth/react";
import { Button } from "./ui/button";
export default function GoogleLogin() {
return <Button onClick={() => signIn("google")}>Continue with Google</Button>;
}
================================================
FILE: components/hero-nav.tsx
================================================
import Link from "next/link";
import { NamedLogoWithLink } from "./logo";
import { buttonVariants } from "./ui/button";
import ToggleTheme from "./toggle";
export default function HeroNav() {
return (
<nav className="w-full flex flex-row items-center justify-between h-24 mb-7 top-0 sticky bg-background">
<NamedLogoWithLink />
<div className="flex flex-row items-center">
<ToggleTheme />
<Link
href="/login"
className={buttonVariants({
variant: "link",
className: "text-base sm:ml-3",
size: "sm",
})}
>
Login
</Link>
<Link
href="/register"
className={buttonVariants({
variant: "link",
className: "text-base",
size: "sm",
})}
>
Register
</Link>
</div>
</nav>
);
}
================================================
FILE: components/left-panel.tsx
================================================
import {
Sheet,
SheetContent,
SheetTrigger,
SheetClose,
} from "@/components/ui/sheet";
import { PanelLeftIcon } from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
import { buttonVariants } from "./ui/button";
import prisma from "@/prisma/client";
import { getUser } from "@/lib/auth";
import { ScrollArea } from "./ui/scroll-area";
export default function LeftPanel() {
return (
<Sheet>
<SheetTrigger>
<div className="flex flex-row items-center gap-2">
<PanelLeftIcon className="w-5 h-5 mt-1" />
<span className="mt-1 sm:hidden flex">Menu</span>
</div>
</SheetTrigger>
<SheetContent side="left" className="min-w-[390px] px-0">
<div>
<h3 className="px-7 text-xl font-semibold">Conversations</h3>
<Suspense
fallback={
<p className={buttonVariants({ variant: "link" })}>Loading...</p>
}
>
<ConversationList />
</Suspense>
</div>
</SheetContent>
</Sheet>
);
}
async function ConversationList() {
const session = await getUser();
if (!session?.user) return null;
const res = await prisma.user.findUnique({
where: {
id: session.user.id,
},
include: {
conversations: {
orderBy: {
createdAt: "desc",
},
},
},
});
if(!res) return null;
const { conversations } = res;
return (
<ScrollArea className="flex flex-col mt-7 items-start overflow-y-auto h-[90vh] pb-5">
{conversations.map((cn) => (
<SheetClose asChild key={cn.id}>
<Link
href={`/chat/${cn.id}`}
className="w-full my-3 px-8 hover:underline underline-offset-2"
>
{cn.name.length > 35 ? cn.name.slice(0, 35) + "..." : cn.name}
</Link>
</SheetClose>
))}
</ScrollArea>
);
}
================================================
FILE: components/logo.tsx
================================================
import Link from "next/link";
export function Logo({
height = "32",
width = "32",
}: {
height?: string;
width?: string;
}) {
return (
<svg
width={width}
height={height}
viewBox="0 0 41 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
strokeWidth="1.5"
>
<path
d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z"
fill="currentColor"
></path>
</svg>
);
}
export function NamedLogoWithLink() {
return (
<Link href="/" className="flex flex-row items-center gap-3">
<Logo height="24" width="24" />
<h3 className="font-semibold text-lg">OpenChat</h3>
</Link>
);
}
================================================
FILE: components/navbar.tsx
================================================
import Link from "next/link";
import { buttonVariants } from "./ui/button";
import ToggleTheme from "./toggle";
import { NamedLogoWithLink } from "./logo";
import Profile from "./profile";
import { SquarePen } from "lucide-react";
const btnVariant = buttonVariants({
variant: "link",
className: "text-base flex flex-row item-center",
size: "sm",
});
export default function Navbar() {
return (
<nav className="w-full flex flex-row items-center justify-between h-24 sm:mb-7 mmb-2 top-0 sticky bg-background">
<NamedLogoWithLink />
<div className="flex-row items-center flex">
<ToggleTheme />
<div className="sm:ml-3 flex flex-row items-center">
<Link href="/chat" className={btnVariant}>
<SquarePen className="w-5 h-5 sm:hidden flex" />
<span className="sm:flex hidden">New chat</span>
</Link>
<Profile />
</div>
</div>
</nav>
);
}
================================================
FILE: components/profile.tsx
================================================
import { getUser } from "@/lib/auth";
import { Button } from "./ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import UserApi from "./user-api";
import { UserIcon } from "lucide-react";
export default async function Profile() {
const session = await getUser();
if (!session?.user) return null;
return (
<div>
<Dialog>
<DialogTrigger asChild>
<Button variant="link" size="sm">
<UserIcon className="w-5 h-5 sm:hidden flex" />
<span className="sm:flex hidden">My account</span>
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>My account</DialogTitle>
<div className="pt-8 pb-4 flex flex-col gap-6">
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input id="email" disabled value={session.user.email ?? ""} />
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="username">Username</Label>
<Input disabled id="username" value={session.user.name ?? ""} />
</div>
<UserApi />
</div>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
);
}
================================================
FILE: components/session-provider.tsx
================================================
"use client";
import { SessionProvider } from "next-auth/react";
import { PropsWithChildren } from "react";
export default function NextAuthProvider({ children }: PropsWithChildren) {
return <SessionProvider>{children}</SessionProvider>;
}
================================================
FILE: components/signout-btn.tsx
================================================
"use client";
import { Button } from "@/components/ui/button";
import { signOut } from "next-auth/react";
export default function SignOutButton() {
return (
<Button
className="w-24"
variant="destructive"
onClick={() => {
signOut();
localStorage.removeItem("apiKey");
}}
>
Signout
</Button>
);
}
================================================
FILE: components/submit.tsx
================================================
"use client";
import { useFormStatus } from "react-dom";
import { Button } from "./ui/button";
import { Loader2Icon, SendHorizonalIcon } from "lucide-react";
export default function Submit() {
const { pending } = useFormStatus();
return (
<Button type="submit" variant="secondary" size="icon" className="h-12 w-12">
{pending ? (
<Loader2Icon className="w-5 h-5 animate-spin" />
) : (
<SendHorizonalIcon className="w-5 h-5" />
)}
</Button>
);
}
================================================
FILE: components/theme-provider.tsx
================================================
"use client";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
================================================
FILE: components/toggle.tsx
================================================
"use client";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { MoonIcon, SunIcon } from "lucide-react";
import { useEffect, useState } from "react";
export default function ToggleTheme() {
const [mounted, setMounted] = useState(false);
const { setTheme, theme } = useTheme();
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<>
{theme == "light" ? (
<Button variant="ghost" size="icon" onClick={() => setTheme("dark")}>
<MoonIcon className="w-5 h-5" />
</Button>
) : (
<Button variant="ghost" size="icon" onClick={() => setTheme("light")}>
<SunIcon className="w-5 h-5" />
</Button>
)}
</>
);
}
================================================
FILE: components/ui/button.tsx
================================================
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
================================================
FILE: components/ui/dialog.tsx
================================================
"use client";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};
================================================
FILE: components/ui/input.tsx
================================================
import * as React from "react"
import { cn } from "@/lib/utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }
================================================
FILE: components/ui/label.tsx
================================================
"use client"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }
================================================
FILE: components/ui/scroll-area.tsx
================================================
"use client"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
export { ScrollArea, ScrollBar }
================================================
FILE: components/ui/sheet.tsx
================================================
"use client";
import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const Sheet = SheetPrimitive.Root;
const SheetTrigger = SheetPrimitive.Trigger;
const SheetClose = SheetPrimitive.Close;
const SheetPortal = SheetPrimitive.Portal;
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
}
);
interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute right-4 top-8 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
));
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
);
SheetHeader.displayName = "SheetHeader";
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
SheetFooter.displayName = "SheetFooter";
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;
export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
};
================================================
FILE: components/ui/skeleton.tsx
================================================
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
)
}
export { Skeleton }
================================================
FILE: components/ui/toast.tsx
================================================
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Viewport>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
)}
{...props}
/>
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
return (
<ToastPrimitives.Root
ref={ref}
className={cn(toastVariants({ variant }), className)}
{...props}
/>
)
})
Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Action>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
className
)}
{...props}
/>
))
ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Close>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
className
)}
toast-close=""
{...props}
>
<X className="h-4 w-4" />
</ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold", className)}
{...props}
/>
))
ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
))
ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
type ToastActionElement = React.ReactElement<typeof ToastAction>
export {
type ToastProps,
type ToastActionElement,
ToastProvider,
ToastViewport,
Toast,
ToastTitle,
ToastDescription,
ToastClose,
ToastAction,
}
================================================
FILE: components/ui/toaster.tsx
================================================
"use client"
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"
export function Toaster() {
const { toasts } = useToast()
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />
</Toast>
)
})}
<ToastViewport />
</ToastProvider>
)
}
================================================
FILE: components/ui/use-toast.ts
================================================
// Inspired by react-hot-toast library
import * as React from "react"
import type {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"
const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000
type ToasterToast = ToastProps & {
id: string
title?: React.ReactNode
description?: React.ReactNode
action?: ToastActionElement
}
const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
} as const
let count = 0
function genId() {
count = (count + 1) % Number.MAX_SAFE_INTEGER
return count.toString()
}
type ActionType = typeof actionTypes
type Action =
| {
type: ActionType["ADD_TOAST"]
toast: ToasterToast
}
| {
type: ActionType["UPDATE_TOAST"]
toast: Partial<ToasterToast>
}
| {
type: ActionType["DISMISS_TOAST"]
toastId?: ToasterToast["id"]
}
| {
type: ActionType["REMOVE_TOAST"]
toastId?: ToasterToast["id"]
}
interface State {
toasts: ToasterToast[]
}
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
const addToRemoveQueue = (toastId: string) => {
if (toastTimeouts.has(toastId)) {
return
}
const timeout = setTimeout(() => {
toastTimeouts.delete(toastId)
dispatch({
type: "REMOVE_TOAST",
toastId: toastId,
})
}, TOAST_REMOVE_DELAY)
toastTimeouts.set(toastId, timeout)
}
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
case "ADD_TOAST":
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
}
case "UPDATE_TOAST":
return {
...state,
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t
),
}
case "DISMISS_TOAST": {
const { toastId } = action
// ! Side effects ! - This could be extracted into a dismissToast() action,
// but I'll keep it here for simplicity
if (toastId) {
addToRemoveQueue(toastId)
} else {
state.toasts.forEach((toast) => {
addToRemoveQueue(toast.id)
})
}
return {
...state,
toasts: state.toasts.map((t) =>
t.id === toastId || toastId === undefined
? {
...t,
open: false,
}
: t
),
}
}
case "REMOVE_TOAST":
if (action.toastId === undefined) {
return {
...state,
toasts: [],
}
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
}
}
}
const listeners: Array<(state: State) => void> = []
let memoryState: State = { toasts: [] }
function dispatch(action: Action) {
memoryState = reducer(memoryState, action)
listeners.forEach((listener) => {
listener(memoryState)
})
}
type Toast = Omit<ToasterToast, "id">
function toast({ ...props }: Toast) {
const id = genId()
const update = (props: ToasterToast) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
})
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
dispatch({
type: "ADD_TOAST",
toast: {
...props,
id,
open: true,
onOpenChange: (open) => {
if (!open) dismiss()
},
},
})
return {
id: id,
dismiss,
update,
}
}
function useToast() {
const [state, setState] = React.useState<State>(memoryState)
React.useEffect(() => {
listeners.push(setState)
return () => {
const index = listeners.indexOf(setState)
if (index > -1) {
listeners.splice(index, 1)
}
}
}, [state])
return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
}
}
export { useToast, toast }
================================================
FILE: components/user-api.tsx
================================================
"use client";
import { useEffect, useState } from "react";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Button } from "./ui/button";
import SignOutButton from "@/components/signout-btn";
import { useToast } from "./ui/use-toast";
export default function UserApi() {
const [apiKey, setApiKey] = useState("");
const { toast } = useToast();
useEffect(() => {
if (window) {
const value = localStorage.getItem("apiKey") ?? "";
setApiKey(value);
}
}, []);
function handleSave() {
localStorage.setItem("apiKey", apiKey);
toast({
title: "Saved profile",
});
}
return (
<>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="api">OpneAI Key</Label>
<Input
id="api"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
/>
</div>
<div className="flex flex-row items-center gap-2">
<Button className="w-24" onClick={handleSave}>
Save
</Button>
<SignOutButton />
</div>
</>
);
}
================================================
FILE: components.json
================================================
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
================================================
FILE: lib/auth.ts
================================================
import { AuthOptions, DefaultSession, getServerSession } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import prisma from "../prisma/client";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
declare module "next-auth" {
interface Session extends DefaultSession {
user: {
id: string;
} & DefaultSession["user"];
}
}
declare module "next-auth/jwt" {
interface JWT {
id: string;
}
}
export const authConfig: AuthOptions = {
secret: process.env.NEXTAUTH_SECRET!,
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID!,
clientSecret: process.env.GOOGLE_SECRET!,
}),
],
adapter: PrismaAdapter(prisma),
session: {
strategy: "jwt",
},
callbacks: {
jwt: async ({ token }) => {
const db_user = await prisma.user.findFirst({
where: {
email: token.email,
},
});
if (db_user) token.id = db_user.id;
return token;
},
session: ({ token, session }) => {
if (token) {
session.user.id = token.id;
session.user.name = token.name;
session.user.email = token.email;
session.user.image = token.picture;
}
return session;
},
},
};
export async function getUser() {
return await getServerSession(authConfig);
}
================================================
FILE: lib/utils.ts
================================================
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// for development purpose
export function delay(ms: number): Promise<void> {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, ms);
});
}
export function generateRandomId(length: number) {
const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let randomId = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
randomId += characters.charAt(randomIndex);
}
return randomId;
}
================================================
FILE: next.config.mjs
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;
================================================
FILE: package.json
================================================
{
"name": "chatgpt",
"version": "0.1.0",
"private": true,
"scripts": {
"postinstall": "prisma generate",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next-auth/prisma-adapter": "^1.0.7",
"@prisma/client": "^5.8.1",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"lucide-react": "^0.314.0",
"next": "14.1.0",
"next-auth": "^4.24.5",
"next-themes": "^0.2.1",
"openai": "^4.25.0",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"prisma": "^5.8.1",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
================================================
FILE: prisma/client.ts
================================================
import { PrismaClient } from "@prisma/client";
const prismaClientSingleton = () => {
return new PrismaClient();
};
declare global {
var prisma: undefined | ReturnType<typeof prismaClientSingleton>;
}
const prisma = globalThis.prisma ?? prismaClientSingleton();
export default prisma;
if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;
================================================
FILE: prisma/schema.prisma
================================================
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL")
directUrl = env("POSTGRES_URL_NON_POOLING")
}
model Account {
id String @id @default(cuid())
userId String
type String
provider String
providerAccountId String
refresh_token String? @db.Text
access_token String? @db.Text
expires_at Int?
token_type String?
scope String?
id_token String? @db.Text
session_state String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
@@unique([provider, providerAccountId])
}
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
conversations Conversation[]
accounts Account[]
}
model Conversation {
id String @id @default(cuid())
name String
messages Json
userId String
user User @relation(fields: [userId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
================================================
FILE: tailwind.config.ts
================================================
import type { Config } from "tailwindcss"
const config = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
export default config
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
================================================
FILE: types/index.ts
================================================
import { z } from "zod";
export const JsonMessageSchema = z.object({
id: z.string(),
answer: z.string().optional(),
question: z.string(),
});
export const JsonMessagesArraySchema = z.array(JsonMessageSchema);
export type JSONMessage = z.infer<typeof JsonMessageSchema>;
gitextract_w0t2kooj/
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── actions/
│ └── chat.ts
├── app/
│ ├── (private-layout)/
│ │ ├── chat/
│ │ │ ├── [id]/
│ │ │ │ ├── chat.tsx
│ │ │ │ ├── loading.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── input.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (public-layout)/
│ │ ├── (auth)/
│ │ │ ├── login/
│ │ │ │ └── page.tsx
│ │ │ └── register/
│ │ │ └── page.tsx
│ │ ├── (hero)/
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── api/
│ │ └── auth/
│ │ └── [...nextauth]/
│ │ └── route.ts
│ ├── error.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── not-found.tsx
├── components/
│ ├── google-login.tsx
│ ├── hero-nav.tsx
│ ├── left-panel.tsx
│ ├── logo.tsx
│ ├── navbar.tsx
│ ├── profile.tsx
│ ├── session-provider.tsx
│ ├── signout-btn.tsx
│ ├── submit.tsx
│ ├── theme-provider.tsx
│ ├── toggle.tsx
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── dialog.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── scroll-area.tsx
│ │ ├── sheet.tsx
│ │ ├── skeleton.tsx
│ │ ├── toast.tsx
│ │ ├── toaster.tsx
│ │ └── use-toast.ts
│ └── user-api.tsx
├── components.json
├── lib/
│ ├── auth.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── postcss.config.js
├── prisma/
│ ├── client.ts
│ └── schema.prisma
├── tailwind.config.ts
├── tsconfig.json
└── types/
└── index.ts
SYMBOL INDEX (62 symbols across 37 files)
FILE: actions/chat.ts
type Message (line 11) | type Message = {
type NewMessage (line 17) | type NewMessage = Omit<Message, "conversationId">;
function newChat (line 19) | async function newChat(params: NewMessage) {
function chat (line 54) | async function chat(params: Message) {
function createCompletion (line 98) | async function createCompletion(apiKey: string, message: string) {
FILE: app/(private-layout)/chat/[id]/chat.tsx
type ChatProps (line 13) | type ChatProps = {
function Chat (line 18) | function Chat({ messages, id }: ChatProps) {
type ConversationComponent (line 65) | type ConversationComponent = {
function ChatInput (line 70) | function ChatInput({ addMessage, id }: ConversationComponent) {
FILE: app/(private-layout)/chat/[id]/loading.tsx
function ChatLoading (line 3) | function ChatLoading() {
FILE: app/(private-layout)/chat/[id]/page.tsx
type PageParams (line 6) | type PageParams = {
function ChatSpecificPage (line 12) | async function ChatSpecificPage({ params: { id } }: PageParams) {
FILE: app/(private-layout)/chat/input.tsx
function ChatInput (line 9) | function ChatInput() {
FILE: app/(private-layout)/chat/layout.tsx
function ChatLayout (line 4) | function ChatLayout({ children }: PropsWithChildren) {
FILE: app/(private-layout)/chat/page.tsx
function Chat (line 3) | function Chat() {
FILE: app/(private-layout)/layout.tsx
function PrivateLayout (line 6) | async function PrivateLayout({ children }: PropsWithChildren) {
FILE: app/(public-layout)/(auth)/login/page.tsx
function Login (line 3) | function Login() {
FILE: app/(public-layout)/(auth)/register/page.tsx
function Login (line 3) | function Login() {
FILE: app/(public-layout)/(hero)/page.tsx
function Home (line 4) | function Home() {
FILE: app/(public-layout)/layout.tsx
function PublicLayout (line 6) | async function PublicLayout({ children }: PropsWithChildren) {
FILE: app/error.tsx
function Error (line 6) | function Error({
FILE: app/layout.tsx
function RootLayout (line 15) | function RootLayout({
FILE: app/not-found.tsx
function NotFoundPage (line 4) | function NotFoundPage() {
FILE: components/google-login.tsx
function GoogleLogin (line 6) | function GoogleLogin() {
FILE: components/hero-nav.tsx
function HeroNav (line 6) | function HeroNav() {
FILE: components/left-panel.tsx
function LeftPanel (line 15) | function LeftPanel() {
function ConversationList (line 40) | async function ConversationList() {
FILE: components/logo.tsx
function Logo (line 3) | function Logo({
function NamedLogoWithLink (line 27) | function NamedLogoWithLink() {
FILE: components/navbar.tsx
function Navbar (line 14) | function Navbar() {
FILE: components/profile.tsx
function Profile (line 15) | async function Profile() {
FILE: components/session-provider.tsx
function NextAuthProvider (line 6) | function NextAuthProvider({ children }: PropsWithChildren) {
FILE: components/signout-btn.tsx
function SignOutButton (line 6) | function SignOutButton() {
FILE: components/submit.tsx
function Submit (line 7) | function Submit() {
FILE: components/theme-provider.tsx
function ThemeProvider (line 6) | function ThemeProvider({ children, ...props }: ThemeProviderProps) {
FILE: components/toggle.tsx
function ToggleTheme (line 8) | function ToggleTheme() {
FILE: components/ui/button.tsx
type ButtonProps (line 36) | interface ButtonProps
FILE: components/ui/input.tsx
type InputProps (line 5) | interface InputProps
FILE: components/ui/sheet.tsx
type SheetContentProps (line 52) | interface SheetContentProps
FILE: components/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({
FILE: components/ui/toast.tsx
type ToastProps (line 113) | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
type ToastActionElement (line 115) | type ToastActionElement = React.ReactElement<typeof ToastAction>
FILE: components/ui/toaster.tsx
function Toaster (line 13) | function Toaster() {
FILE: components/ui/use-toast.ts
constant TOAST_LIMIT (line 9) | const TOAST_LIMIT = 1
constant TOAST_REMOVE_DELAY (line 10) | const TOAST_REMOVE_DELAY = 1000000
type ToasterToast (line 12) | type ToasterToast = ToastProps & {
function genId (line 28) | function genId() {
type ActionType (line 33) | type ActionType = typeof actionTypes
type Action (line 35) | type Action =
type State (line 53) | interface State {
function dispatch (line 134) | function dispatch(action: Action) {
type Toast (line 141) | type Toast = Omit<ToasterToast, "id">
function toast (line 143) | function toast({ ...props }: Toast) {
function useToast (line 172) | function useToast() {
FILE: components/user-api.tsx
function UserApi (line 10) | function UserApi() {
FILE: lib/auth.ts
type Session (line 7) | interface Session extends DefaultSession {
type JWT (line 15) | interface JWT {
function getUser (line 54) | async function getUser() {
FILE: lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
function delay (line 9) | function delay(ms: number): Promise<void> {
function generateRandomId (line 17) | function generateRandomId(length: number) {
FILE: types/index.ts
type JSONMessage (line 11) | type JSONMessage = z.infer<typeof JsonMessageSchema>;
Condensed preview — 54 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (81K chars).
[
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".gitignore",
"chars": 396,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "LICENSE",
"chars": 11357,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 1811,
"preview": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js"
},
{
"path": "actions/chat.ts",
"chars": 2860,
"preview": "\"use server\";\n\nimport { getUser } from \"@/lib/auth\";\nimport { generateRandomId } from \"@/lib/utils\";\nimport prisma from "
},
{
"path": "app/(private-layout)/chat/[id]/chat.tsx",
"chars": 3242,
"preview": "\"use client\";\n\nimport { chat } from \"@/actions/chat\";\nimport Submit from \"@/components/submit\";\nimport { Input } from \"@"
},
{
"path": "app/(private-layout)/chat/[id]/loading.tsx",
"chars": 953,
"preview": "import { Skeleton } from \"@/components/ui/skeleton\";\n\nexport default function ChatLoading() {\n return (\n <div>\n "
},
{
"path": "app/(private-layout)/chat/[id]/page.tsx",
"chars": 538,
"preview": "import prisma from \"@/prisma/client\";\nimport { notFound } from \"next/navigation\";\nimport Chat from \"./chat\";\nimport { Js"
},
{
"path": "app/(private-layout)/chat/input.tsx",
"chars": 1140,
"preview": "\"use client\";\n\nimport Submit from \"@/components/submit\";\nimport { Input } from \"@/components/ui/input\";\nimport { newChat"
},
{
"path": "app/(private-layout)/chat/layout.tsx",
"chars": 444,
"preview": "import LeftPanel from \"@/components/left-panel\";\nimport { PropsWithChildren } from \"react\";\n\nexport default function Cha"
},
{
"path": "app/(private-layout)/chat/page.tsx",
"chars": 608,
"preview": "import ChatInput from \"./input\";\n\nexport default function Chat() {\n return (\n <div className=\"grow\">\n <div clas"
},
{
"path": "app/(private-layout)/layout.tsx",
"chars": 397,
"preview": "import Navbar from \"@/components/navbar\";\nimport { getUser } from \"@/lib/auth\";\nimport { redirect } from \"next/navigatio"
},
{
"path": "app/(public-layout)/(auth)/login/page.tsx",
"chars": 294,
"preview": "import GoogleLogin from \"@/components/google-login\";\n\nexport default function Login() {\n return (\n <div className=\"f"
},
{
"path": "app/(public-layout)/(auth)/register/page.tsx",
"chars": 297,
"preview": "import GoogleLogin from \"@/components/google-login\";\n\nexport default function Login() {\n return (\n <div className=\"f"
},
{
"path": "app/(public-layout)/(hero)/page.tsx",
"chars": 876,
"preview": "import { buttonVariants } from \"@/components/ui/button\";\nimport Link from \"next/link\";\n\nexport default function Home() {"
},
{
"path": "app/(public-layout)/layout.tsx",
"chars": 398,
"preview": "import HeroNav from \"@/components/hero-nav\";\nimport { getUser } from \"@/lib/auth\";\nimport { redirect } from \"next/naviga"
},
{
"path": "app/api/auth/[...nextauth]/route.ts",
"chars": 164,
"preview": "import { authConfig } from \"@/lib/auth\";\nimport NextAuth from \"next-auth/next\";\n\nconst handler = NextAuth(authConfig);\n\n"
},
{
"path": "app/error.tsx",
"chars": 624,
"preview": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { useEffect } from \"react\";\n\nexport default funct"
},
{
"path": "app/globals.css",
"chars": 1594,
"preview": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --"
},
{
"path": "app/layout.tsx",
"chars": 1050,
"preview": "import type { Metadata } from \"next\";\nimport { Space_Grotesk } from \"next/font/google\";\nimport { ThemeProvider } from \"@"
},
{
"path": "app/not-found.tsx",
"chars": 434,
"preview": "import { buttonVariants } from \"@/components/ui/button\";\nimport Link from \"next/link\";\n\nexport default function NotFound"
},
{
"path": "components/google-login.tsx",
"chars": 219,
"preview": "\"use client\";\n\nimport { signIn } from \"next-auth/react\";\nimport { Button } from \"./ui/button\";\n\nexport default function "
},
{
"path": "components/hero-nav.tsx",
"chars": 903,
"preview": "import Link from \"next/link\";\nimport { NamedLogoWithLink } from \"./logo\";\nimport { buttonVariants } from \"./ui/button\";\n"
},
{
"path": "components/left-panel.tsx",
"chars": 1921,
"preview": "import {\n Sheet,\n SheetContent,\n SheetTrigger,\n SheetClose,\n} from \"@/components/ui/sheet\";\nimport { PanelLeftIcon }"
},
{
"path": "components/logo.tsx",
"chars": 4736,
"preview": "import Link from \"next/link\";\n\nexport function Logo({\n height = \"32\",\n width = \"32\",\n}: {\n height?: string;\n width?:"
},
{
"path": "components/navbar.tsx",
"chars": 947,
"preview": "import Link from \"next/link\";\nimport { buttonVariants } from \"./ui/button\";\nimport ToggleTheme from \"./toggle\";\nimport {"
},
{
"path": "components/profile.tsx",
"chars": 1488,
"preview": "import { getUser } from \"@/lib/auth\";\nimport { Button } from \"./ui/button\";\nimport {\n Dialog,\n DialogContent,\n Dialog"
},
{
"path": "components/session-provider.tsx",
"chars": 244,
"preview": "\"use client\";\n\nimport { SessionProvider } from \"next-auth/react\";\nimport { PropsWithChildren } from \"react\";\n\nexport def"
},
{
"path": "components/signout-btn.tsx",
"chars": 359,
"preview": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { signOut } from \"next-auth/react\";\n\nexport defau"
},
{
"path": "components/submit.tsx",
"chars": 494,
"preview": "\"use client\";\n\nimport { useFormStatus } from \"react-dom\";\nimport { Button } from \"./ui/button\";\nimport { Loader2Icon, Se"
},
{
"path": "components/theme-provider.tsx",
"chars": 300,
"preview": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport { type ThemeProviderProps } fro"
},
{
"path": "components/toggle.tsx",
"chars": 775,
"preview": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { Button } from \"@/components/ui/button\";\nimport { MoonIco"
},
{
"path": "components/ui/button.tsx",
"chars": 1835,
"preview": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class"
},
{
"path": "components/ui/dialog.tsx",
"chars": 3871,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } f"
},
{
"path": "components/ui/input.tsx",
"chars": 824,
"preview": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n extends React.InputHTMLA"
},
{
"path": "components/ui/label.tsx",
"chars": 724,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type "
},
{
"path": "components/ui/scroll-area.tsx",
"chars": 1656,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport "
},
{
"path": "components/ui/sheet.tsx",
"chars": 4305,
"preview": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, t"
},
{
"path": "components/ui/skeleton.tsx",
"chars": 261,
"preview": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) {"
},
{
"path": "components/ui/toast.tsx",
"chars": 4845,
"preview": "import * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps "
},
{
"path": "components/ui/toaster.tsx",
"chars": 794,
"preview": "\"use client\"\n\nimport {\n Toast,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n} from"
},
{
"path": "components/ui/use-toast.ts",
"chars": 3934,
"preview": "// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n ToastActionElement,\n ToastProps,"
},
{
"path": "components/user-api.tsx",
"chars": 1102,
"preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Input } from \"./ui/input\";\nimport { Label } from \"."
},
{
"path": "components.json",
"chars": 341,
"preview": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n"
},
{
"path": "lib/auth.ts",
"chars": 1322,
"preview": "import { AuthOptions, DefaultSession, getServerSession } from \"next-auth\";\nimport GoogleProvider from \"next-auth/provide"
},
{
"path": "lib/utils.ts",
"chars": 690,
"preview": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: C"
},
{
"path": "next.config.mjs",
"chars": 92,
"preview": "/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default nextConfig;\n"
},
{
"path": "package.json",
"chars": 1155,
"preview": "{\n \"name\": \"chatgpt\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"postinstall\": \"prisma generate\",\n "
},
{
"path": "postcss.config.js",
"chars": 83,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n"
},
{
"path": "prisma/client.ts",
"chars": 364,
"preview": "import { PrismaClient } from \"@prisma/client\";\n\nconst prismaClientSingleton = () => {\n return new PrismaClient();\n};\n\nd"
},
{
"path": "prisma/schema.prisma",
"chars": 1193,
"preview": "generator client {\n provider = \"prisma-client-js\"\n}\n\ndatasource db {\n provider = \"postgresql\"\n url = env(\"POST"
},
{
"path": "tailwind.config.ts",
"chars": 2179,
"preview": "import type { Config } from \"tailwindcss\"\n\nconst config = {\n darkMode: [\"class\"],\n content: [\n './pages/**/*.{ts,ts"
},
{
"path": "tsconfig.json",
"chars": 574,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n "
},
{
"path": "types/index.ts",
"chars": 279,
"preview": "import { z } from \"zod\";\n\nexport const JsonMessageSchema = z.object({\n id: z.string(),\n answer: z.string().optional(),"
}
]
About this extraction
This page contains the full source code of the nisabmohd/ChatGPT GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 54 files (72.6 KB), approximately 21.3k tokens, and a symbol index with 62 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.