Merge pull request #4 from esbnet/develop

Update branch main

.env.semple

@@ -0,0 +1,17 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
+
+OPENAI_API_KEY=
+REPLICATE_API_TOKEN=
+
+DATABASE_URL=
+
+STRIPE_API_KEY=
+STRIPE_WEBHOOK_SECRET=
+
+NEXT_PUBLIC_APP_URL="http://localhost:3000"

.github/workflows/github-actions-demo.yml

@@ -0,0 +1,18 @@
+name: GitHub Actions Demo
+run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
+on: [push]
+jobs:
+  Explore-GitHub-Actions:
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
+      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
+      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
+      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
+      - name: List files in the repository
+        run: |
+          ls ${{ github.workspace }}
+      - run: echo "🍏 This job's status is ${{ job.status }}."

.gitignore

@@ -27,10 +27,13 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.idea

__middleware.ts

@@ -0,0 +1,8 @@
+import { i18n } from "@/i18n";
+import createMiddleware from "next-intl/middleware";
+
+export default createMiddleware(i18n);
+
+export const config = {
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};

app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}

app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}

app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+import { Locale } from "@/i18n";
+
+export default function AuthLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { locale: Locale };
+}) {
+  return (
+    <div className="flex items-center justify-center h-full">{children}</div>
+  );
+}

app/(dashboard)/(routes)/code/constants.ts

@@ -0,0 +1,7 @@
+import * as z from "zod";
+
+export const formSchema = z.object({
+  prompt: z.string().min(1, {
+    message: "Prompt is required.",
+  }),
+});

app/(dashboard)/(routes)/code/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+import { useState } from "react";
+
+import Empty from "@/components/empty";
+import Heading from "@/components/heading";
+import Loader from "@/components/loader";
+import BotAvatar from "@/components/ui/bot-avatar";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import UserAvatar from "@/components/user-avatar";
+
+import { cn } from "@/lib/utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { Code } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import ReactMarkdown from "react-markdown";
+
+import { useForm } from "react-hook-form";
+
+import * as z from "zod";
+import { formSchema } from "./constants";
+
+type userMessage = {
+  role: "user";
+  content: string;
+};
+
+export default function CodePage() {
+  const [messages, setMessages] = useState<userMessage[]>([]);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      prompt: "",
+    },
+  });
+
+  const isLoading = form.formState.isSubmitting;
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    try {
+      const userMessage = {
+        role: "user",
+        content: data.prompt,
+      };
+
+      const newMessages = [...messages, userMessage];
+
+      const response = await axios.post("/api/code", {
+        messages: newMessages,
+      });
+
+      setMessages((current) => {
+        return [...current, userMessage, response.data];
+      });
+
+      console.log(messages);
+
+      form.reset();
+    } catch (error) {
+      // TODO: Open Pro Modal
+      console.log(error);
+    } finally {
+      // form.reset();
+      router.refresh();
+    }
+  };
+
+  return (
+    <div>
+      <Heading
+        title="Code Generation"
+        description="Generate code with the power of AI"
+        icon={Code}
+        iconColor="text-green-700"
+        bgColor="bg-green-700/10"
+      />
+      <div className="px-4 lg:px-8">
+        <div>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
+            >
+              <FormField
+                name="prompt"
+                render={({ field }) => (
+                  <FormItem className="col-span-12 lg:col-span-10">
+                    <FormControl className="m-0 p-0">
+                      <Input
+                        className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent
+                      "
+                        disabled={isLoading}
+                        placeholder="Simple toggle button using react hooks."
+                        {...field}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                className="col-span-12 lg:col-span-2 w-full"
+                disabled={isLoading}
+              >
+                Generate
+              </Button>
+            </form>
+          </Form>
+        </div>
+        <div className="mt-4 space-y-4">
+          {isLoading && (
+            <div className="p-8 rounded-lg w-full flex items-center justify-center bg-muted">
+              <Loader />
+            </div>
+          )}
+
+          {messages.length === 0 && !isLoading && (
+            <Empty label="No messages yet, start a conversation." />
+          )}
+          <div className="flex flex-col-reverse gap-y-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "p-8 w-full flex items-start gap-x-8 rounded-lg",
+                  message.role === "user"
+                    ? "bg-white border border-black/10"
+                    : "bg-muted"
+                )}
+              >
+                {message.role === "user" ? <UserAvatar /> : <BotAvatar />}
+                <ReactMarkdown
+                  components={{
+                    pre: ({ node, ...props }) => (
+                      <div className="overflow-auto w-full my-2 bg-black/10 p-2 rounded-lg">
+                        <pre {...props} />
+                      </div>
+                    ),
+                    code: ({ node, ...props }) => (
+                      <code className="bg-black/10 rounded-lg p-1" {...props} />
+                    ),
+                  }}
+                  className="text-sm overflow-hidden leading-7"
+                >
+                  {message.content || ""}
+                </ReactMarkdown>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(dashboard)/(routes)/conversation/constants.ts

@@ -0,0 +1,7 @@
+import * as z from "zod";
+
+export const formSchema = z.object({
+  prompt: z.string().min(1, {
+    message: "Prompt is required.",
+  }),
+});