From 350b24f8ea7560e5bd29c1ce887c673b88475324 Mon Sep 17 00:00:00 2001
From: Bob Burningham <bob@all-tech.services>
Date: Thu, 26 Oct 2023 20:24:26 -0700
Subject: [PATCH] added emoji picker

---
 components/chat/chat-input.tsx | 12 ++++++++--
 components/emoji-picker.tsx    | 42 ++++++++++++++++++++++++++++++++++
 components/ui/popover.tsx      | 31 +++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 components/emoji-picker.tsx
 create mode 100644 components/ui/popover.tsx

diff --git a/components/chat/chat-input.tsx b/components/chat/chat-input.tsx
index 30c15a5..de2133f 100644
--- a/components/chat/chat-input.tsx
+++ b/components/chat/chat-input.tsx
@@ -13,8 +13,10 @@ import {
     FormItem,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Plus, Smile } from "lucide-react";
+import { Plus } from "lucide-react";
 import { useModal } from "@/hooks/use-modal-store";
+import { EmojiPicker } from "@/components/emoji-picker";
+import { useRouter } from "next/navigation";
 
 interface ChatInputProps {
     apiUrl: string;
@@ -34,6 +36,7 @@ export const ChatInput = ({
     type
 }: ChatInputProps) => {
     const { onOpen } = useModal();
+    const router = useRouter();
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -52,6 +55,9 @@ export const ChatInput = ({
             });
 
             await axios.post(url, values);
+
+            form.reset();
+            router.refresh();
         }catch(error){
             console.log(error);
         }
@@ -81,7 +87,9 @@ export const ChatInput = ({
                                         {...field}
                                     />
                                     <div className="absolute top-7 right-8">
-                                        <Smile/>
+                                        <EmojiPicker 
+                                            onChange={(emoji: string) => field.onChange(`${field.value} ${emoji}`)}
+                                        />                                        
                                     </div>
                                 </div>
                             </FormControl>
diff --git a/components/emoji-picker.tsx b/components/emoji-picker.tsx
new file mode 100644
index 0000000..7537434
--- /dev/null
+++ b/components/emoji-picker.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Smile } from "lucide-react";
+import Picker from "@emoji-mart/react";
+import data from "@emoji-mart/data";
+import { useTheme } from "next-themes";
+
+import{
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+} from "@/components/ui/popover";
+
+
+interface EmojiPickerProps {
+    onChange: (value: string) => void;    
+}
+
+export const EmojiPicker = ({
+    onChange,
+}: EmojiPickerProps) => {
+    const { resolvedTheme } = useTheme();
+
+    return (
+        <Popover>
+            <PopoverTrigger>
+                <Smile className="text-zinc-500 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition"/>
+            </PopoverTrigger>
+            <PopoverContent 
+                side="right"
+                sideOffset={40}
+                className="bg-transparent border-none shadow-none drop-shadow-none mb-16"
+            >
+                <Picker 
+                    theme={resolvedTheme}
+                    data={data}
+                    onEmojiSelect={(emoji: any) => onChange(emoji.native)}
+                />
+            </PopoverContent>
+        </Popover>
+    )
+}
\ No newline at end of file
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..a0ec48b
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }