feat: add emoji support

action/index.ts

@@ -4,8 +4,10 @@ import { model } from "@/utils";
 
 export const commitChange = async ({
   message,
+  isEmojiSupport,
 }: {
   message: string | null;
+  isEmojiSupport: boolean;
 }): Promise<{
   data: {
     text: string;
@@ -28,9 +30,29 @@ export const commitChange = async ({
       - Suggest 3 different commit messages to give the user some options.
       - For example, if the user input is "I change lib folder to utils folder", then the output should be:
 
-      \`\`\`txt refactor(lib): change lib folder to utils folder \n\`\`\`\n
-      \`\`\`txt refactor(deps): rename lib folder to utils \n\`\`\`\n
-      \`\`\`txt fix(deps): rename lib folder to utils \n\`\`\`\n
+      ${
+        isEmojiSupport &&
+        `\
+      - Use emojis in the commit message.
+      - For emojis, you can use https://gitmoji.dev/
+      - Don't provide a description, just the commit message.
+      - For example, if the user input is "I change lib folder to utils folder", then the output should be:
+      `
+      }
+
+      ${
+        isEmojiSupport
+          ? `
+      \`\`\`txt \n ♻️ refactor(lib): change lib folder to utils folder \n\`\`\`\n
+      \`\`\`txt \n ➕ refactor(deps): rename lib folder to utils \n\`\`\`\n
+      \`\`\`txt \n ✏️ fix(deps): rename lib folder to utils \n\`\`\`\n
+          `
+          : `
+      \`\`\`txt \n refactor(lib): change lib folder to utils folder \n\`\`\`\n
+      \`\`\`txt \n refactor(deps): rename lib folder to utils \n\`\`\`\n
+      \`\`\`txt \n fix(deps): rename lib folder to utils \n\`\`\`\n
+      `
+      }
 
       `,
     });

app/layout.tsx

@@ -11,6 +11,7 @@ import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { ModeToggle } from "@/components/modeToggle";
 import Image from "next/image";
 import NotificationBanner from "@/components/notificationBanner";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -61,54 +62,56 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <main className="mx-0 xl:mx-20">
-            <section className="h-screen">
-              <div className="w-full flex justify-end absolute top-3 right-0 items-center mr-7 md:mr-10 mt-3 overflow-hidden z-10">
-                <div
-                  className={cn(
-                    buttonVariants({
-                      variant: "outline",
-                      size: "icon",
-                      className:
-                        "rounded-full w-10 h-10 overflow-hidden sm:block hidden",
-                    }),
-                  )}
-                >
-                  <Image
-                    src={"/logo-dark.png"}
-                    alt="logo"
-                    width={50}
-                    height={50}
-                    className="dark:hidden block"
-                  />
-                  <Image
-                    src={"/logo-light.png"}
-                    alt="logo"
-                    width={50}
-                    height={50}
-                    className="dark:block hidden"
-                  />
+          <TooltipProvider>
+            <main className="mx-0 xl:mx-20">
+              <section className="h-screen">
+                <div className="w-full flex justify-end absolute top-3 right-0 items-center mr-7 md:mr-10 mt-3 overflow-hidden z-10">
+                  <div
+                    className={cn(
+                      buttonVariants({
+                        variant: "outline",
+                        size: "icon",
+                        className:
+                          "rounded-full w-10 h-10 overflow-hidden sm:block hidden",
+                      })
+                    )}
+                  >
+                    <Image
+                      src={"/logo-dark.png"}
+                      alt="logo"
+                      width={50}
+                      height={50}
+                      className="dark:hidden block"
+                    />
+                    <Image
+                      src={"/logo-light.png"}
+                      alt="logo"
+                      width={50}
+                      height={50}
+                      className="dark:block hidden"
+                    />
+                  </div>
+                  <Link
+                    href={"https://github.com/ruru-m07/commitly"}
+                    target="_blank"
+                    className={cn(
+                      buttonVariants({
+                        variant: "outline",
+                        size: "icon",
+                        className: "rounded-full mx-2 w-10 h-10 sm:flex hidden",
+                      })
+                    )}
+                  >
+                    <GitHubLogoIcon className="w-6 h-6" />
+                  </Link>
+                  <ModeToggle />
                 </div>
-                <Link
-                  href={"https://github.com/ruru-m07/commitly"}
-                  target="_blank"
-                  className={cn(
-                    buttonVariants({
-                      variant: "outline",
-                      size: "icon",
-                      className: "rounded-full mx-2 w-10 h-10 sm:flex hidden",
-                    }),
-                  )}
-                >
-                  <GitHubLogoIcon className="w-6 h-6" />
-                </Link>
-                <ModeToggle />
-              </div>
-              {children}
-            </section>
-          </main>
-          <NotificationBanner />
-          <Toaster />
+                {children}
+              </section>
+            </main>
+            <NotificationBanner />
+            <Toaster />
+          </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>

app/page.tsx

@@ -15,6 +15,12 @@ import dynamic from "next/dynamic";
 import ListSuggestion from "@/components/listSuggestion";
 import Loader from "@/components/loader";
 import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const EmptyScreen = dynamic(() => import("@/components/emptyScreen"), {
   ssr: false,
@@ -26,18 +32,25 @@ export default function Home() {
   const [isLoading, setIsLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [commitChanges, setcommitChanges] = React.useState<string | null>(null);
+  const [isEmojiSupport, setIsEmojiSupport] = React.useState<boolean>(false);
   const [commitMessages, setcommitMessages] = React.useState<string | null>(
-    null,
+    null
   );
 
   const { toast } = useToast();
 
-  const handelSubmit = async ({ suggestion }: { suggestion: string }) => {
-    if (suggestion === commitChanges) {
+  const handelSubmit = async ({
+    suggestion,
+    force = false,
+  }: {
+    suggestion: string;
+    force?: boolean;
+  }) => {
+    if (!force && suggestion === commitChanges) {
       toast({
         variant: "destructive",
-        title: "Uh oh! Something went wrong.",
-        description: "error: Please enter a different message.",
+        title: "Duplicate Message",
+        description: "Please enter a different message.",
       });
       return;
     }
@@ -48,6 +61,7 @@ export default function Home() {
     try {
       const { data, error } = await commitChange({
         message: suggestion,
+        isEmojiSupport: isEmojiSupport,
       });
 
       if (error) {
@@ -62,7 +76,7 @@ export default function Home() {
                 toastVariants({
                   variant: "destructive",
                   className: "w-fit m-0 p-2 text-xs hover:bg-[#815305]/35",
-                }),
+                })
               )}
               onClick={() => handelSubmit({ suggestion })}
             >
@@ -73,6 +87,7 @@ export default function Home() {
       } else {
         if (data) {
           setcommitMessages(data.text);
+          console.log(data.text);
           setcommitChanges(suggestion);
           setMessage("");
         }
@@ -86,7 +101,7 @@ export default function Home() {
 
   const submitForm = (
     e: React.FormEvent<HTMLFormElement>,
-    message: string | null,
+    message: string | null
   ): void => {
     e.preventDefault();
     handelSubmit({ suggestion: message || "" });
@@ -100,7 +115,7 @@ export default function Home() {
             <Card className="h-full w-full py-4 flex justify-center items-center bg-primary-foreground/25">
               <ScrollArea className=" flex justify-center items-center w-full">
                 {error ? (
-                  <div>
+                  <div className="w-full flex items-center justify-center">
                     <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
                       Oops! Something Went Wrong!{" "}
                       <span className="ml-2"> : ( </span>
@@ -116,6 +131,7 @@ export default function Home() {
                     suggestions={commitMessages!}
                     commitChanges={commitChanges || ""}
                     submitForm={submitForm}
+                    forceSubmit={handelSubmit}
                   />
                 ) : (
                   <div className="w-full flex items-center justify-center">
@@ -147,6 +163,13 @@ export default function Home() {
               required
             />
             <div className="flex items-center p-3 pt-0">
+              <div className="flex items-center space-x-2">
+                <Switch
+                  onCheckedChange={(e) => setIsEmojiSupport(e)}
+                  id="emoji-mode"
+                />
+                <Label htmlFor="emoji-mode">Emoji Mode</Label>
+              </div>
               <Button
                 type="submit"
                 size="sm"