update: parallel inputbar2 (mergable to old one)

Technoculture · Sep 20, 2024 · dc16369 · dc16369
1 parent 6a5bbb5
commit dc16369
Show file tree

Hide file tree

Showing 5 changed files with 526 additions and 58 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Header } from "@/components/header";
 import { Button, buttonVariants } from "@/components/button";
 import Link from "next/link";
@@ -10,8 +10,10 @@ import { motion, AnimatePresence, useAnimation } from "framer-motion";
 import { useInView } from "react-intersection-observer";
 import { Key, LayoutDashboard } from "lucide-react";
 import { useAuth } from "@clerk/nextjs";
-import TextareaAutosize from "react-textarea-autosize";
 import { useRouter } from "next/navigation";
+import InputBar from "@/components/inputBar2";
+import { ChatType, chattype } from "@/lib/types";
+import { parseAsStringEnum, useQueryState } from "next-usequerystate";
 
 const handleSmoothScroll = (): void => {
   if (typeof window !== "undefined") {
@@ -51,25 +53,23 @@ export default function Home() {
       controls.start("hidden");
     }
   }, [controls, inView]);
+  const [chatType, setChattype] = useQueryState(
+    "model",
+    parseAsStringEnum<ChatType>(Object.values(chattype)),
+  );
 
   const { isSignedIn, orgId, orgSlug, userId } = useAuth();
   // if (isSignedIn) {
   //   redirect("/dashboard/user");
   // }
 
-  console.log(
-    "orgId, orgSlug, userId",
-    { isSignedIn, orgId, orgSlug, userId },
-    "\n\n\n\n\n\n",
-  );
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleInputChange = (e: any) => {
     setInput(e.target.value);
     navigator.clipboard.writeText(e.target.value);
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
+    console.log("handleSubmit");
     if (input.trim() === "") return;
 
     try {
@@ -84,6 +84,7 @@ export default function Home() {
       console.error("Error creating new chat:", error);
     }
   };
+
   return (
     <div>
       <AnimatePresence onExitComplete={handleSmoothScroll}>
@@ -105,7 +106,7 @@ export default function Home() {
                 quality={5}
               />
             </div>
-            <div className="z-10">
+            <div className="z-10 flex flex-col items-center">
               <h1 className="text-4xl font-bold tracking-tight text-foreground">
                 Hello Innovator,
               </h1>
@@ -114,26 +115,18 @@ export default function Home() {
               </h1>
               <div className="grid md:grid-col-2 gap-4 sm:grid-col-1 p-4">
                 {isSignedIn ? (
-                  <form
-                    onSubmit={handleSubmit}
-                    className="flex flex-col items-center gap-2"
-                  >
-                    <TextareaAutosize
-                      maxRows={3}
-                      placeholder="Type your message here..."
-                      value={input}
-                      onChange={handleInputChange}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" && !e.shiftKey) {
-                          e.preventDefault();
-                          handleSubmit(
-                            e as unknown as React.FormEvent<HTMLFormElement>,
-                          );
-                        }
-                      }}
-                      className="flex-none resize-none rounded-sm grow w-full bg-background border border-secondary text-primary p-2 text-sm"
-                    />
-                  </form>
+                  <InputBar
+                    isHome={true}
+                    value={input}
+                    onChange={handleInputChange}
+                    setInput={setInput}
+                    submitInput={handleSubmit}
+                    orgId={orgId as string}
+                    chattype={chatType as ChatType}
+                    setChattype={
+                      setChattype as Dispatch<SetStateAction<ChatType>>
+                    }
+                  />
                 ) : (
                   <Link
                     href="/dashboard"

diff --git a/src/components/audiowaveform.tsx b/src/components/audiowaveform.tsx
@@ -1,7 +1,6 @@
 import React, { Dispatch, SetStateAction, useEffect } from "react";
 import { ReactMic, ReactMicStopEvent } from "react-mic";
 import { Button } from "@/components/button";
-import { motion } from "framer-motion";
 import { StopCircle } from "@phosphor-icons/react";
 import { useTheme } from "next-themes";
 
@@ -44,15 +43,15 @@ const AudioWaveForm = (props: Props) => {
   };
 
   return (
-    <motion.div
-      layout
-      initial={{ height: 0, opacity: 0 }}
-      animate={{
-        height: "100%",
-        opacity: 1,
-        transition: { duration: 1, type: "spring" },
-      }}
-      exit={{ height: 0, opacity: 0, transition: { duration: 1 } }}
+    <div
+      // layout
+      // initial={{ height: 0, opacity: 0 }}
+      // animate={{
+      //   height: "100%",
+      //   opacity: 1,
+      //   transition: { duration: 1, type: "spring" },
+      // }}
+      // exit={{ height: 0, opacity: 0, transition: { duration: 1 } }}
       className="flex w-full gap-2 p-2"
     >
       <div className="flex flex-grow">
@@ -70,10 +69,10 @@ const AudioWaveForm = (props: Props) => {
           noiseSuppression={true}
         />
       </div>
-      <motion.div
-        initial={{ x: -20, y: -25, opacity: 0 }}
-        animate={{ x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } }}
-        exit={{ x: -20, y: -25, opacity: 0, transition: { duration: 0.5 } }}
+      <div
+      // initial={{ x: -20, y: -25, opacity: 0 }}
+      // animate={{ x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } }}
+      // exit={{ x: -20, y: -25, opacity: 0, transition: { duration: 0.5 } }}
       >
         <Button
           type="button"
@@ -83,8 +82,8 @@ const AudioWaveForm = (props: Props) => {
         >
           <StopCircle className="h-4 w-4 text-destructive" />
         </Button>
-      </motion.div>
-    </motion.div>
+      </div>
+    </div>
   );
 };
 

diff --git a/src/components/chat.tsx b/src/components/chat.tsx
@@ -41,7 +41,6 @@ export default function Chat(props: ChatProps) {
     settldrawImageUrl,
     onClickOpenChatSheet,
   } = useImageState();
-  const [chattype, setChattype] = useState<ChatType>(props?.type || "chat");
   const [isChatCompleted, setIsChatCompleted] = useState<boolean>(false);
   const [calculatedMessages, setCalculatedMessages] = useState<Message[][]>([]);
   // const { presenceData, updateStatus } = usePresence(`channel_${props.chatId}`);
@@ -50,10 +49,12 @@ export default function Chat(props: ChatProps) {
   const [imageUrl, setImageUrl] = useState<string>("");
   const [imageName, setImageName] = useState<string>("");
   const queryClient = useQueryClient();
-  const [isNewChat] = useQueryState("new");
-  const [isFromClipboard] = useQueryState("clipboard");
-  console.log("isFromClipboard", isFromClipboard);
-  console.log("isNewChat", isNewChat);
+  const [isNewChat, setIsNewChat] = useQueryState("new");
+  const [isFromClipboard, setIsFromClipboard] = useQueryState("clipboard");
+  const [incomingModel] = useQueryState("model");
+  const [chattype, setChattype] = useState<ChatType>(
+    props?.type || incomingModel || "chat",
+  );
 
   const onDrop = useCallback(async (acceptedFiles: File[]) => {
     if (acceptedFiles && acceptedFiles[0]?.type.startsWith("image/")) {
@@ -162,7 +163,8 @@ export default function Chat(props: ChatProps) {
   console.log("messages", messages);
 
   useEffect(() => {
-    if (isFromClipboard && isNewChat) {
+    if (isFromClipboard === "true" && isNewChat === "true") {
+      //TODO: use types for useQueryState
       navigator.clipboard
         .readText()
         .then((text) => {
@@ -176,6 +178,8 @@ export default function Chat(props: ChatProps) {
             } as Message;
             append(newMessage);
           }
+          setIsFromClipboard("false");
+          setIsNewChat("false");
         })
         .catch((err) => {
           console.error("Failed to read clipboard contents: ", err);