v1 shipping for testing

app/chat/page.tsx

@@ -69,14 +69,14 @@ export default function Chat() {
   // @ts-ignore
   const image = user?.photoURL as string;
   return (
-    <main className=" flex  bg-black h-screen overflow-hidden">
+    <main className=" flex  bg-black h-[100vh] ">
       <FirstVisitPopup />
       <div className=" hidden lg:block">
         <Sidebar />
       </div>
       <div className=" bg-[#1212] min-h-[100vh] pb-[15vh] relative flex-1 ">
         <div className="flex flex-col max-h-[830px] overflow-y-auto scroll-m-1">
-          <div className="sticky bg-fixed z-10 top-0 w-full shadow-2xl bg-black">
+          <div className="sticky  z-10 top-0 w-full shadow-2xl bg-black">
             <nav className="flex justify-between  p-4 ">
               <span
                 className="text-[#caccce] font-medium text-3xl cursor-pointer"

app/globals.css

@@ -74,10 +74,11 @@
     @apply border-border box-border p-0 m-0;
   }
   body {
-    @apply bg-background text-foreground p-0 m-0 bg-black;
+    @apply text-foreground p-0 m-0 bg-black;
   }
 }
 
+
 @keyframes fadeIn {
   from {
     opacity: 0;

components/Deafultchatpage.tsx

@@ -3,13 +3,13 @@ import { CardCarousel } from "./CardCarousel";
 export const DefaultChatPage = ({ user }: { user: string }) => {
   return (
     <main>
-      <div className="text-[#c4c7c556] lg:text-6xl text-4xl font-semibold flex flex-col xl:ml-24">
+      <div className="text-[#c4c7c556] lg:text-6xl text-4xl font-semibold flex flex-col ">
         <h1 className="bg-clip-text text-transparent bg-gradient-to-r from-[#4b90ff] from-1% via-blue-600 via-5% to-15% to-[#ff5546]">
           Hello {user}
         </h1>
         <p>What can I find for you today?</p>
       </div>
-      <div className="mt-20">
+      <div className="mt-20 lg:pb-24">
         <CardCarousel />
       </div>
     </main>

components/chatInbox.tsx

@@ -1,8 +1,6 @@
 import { SendHorizontalIcon } from "lucide-react";
 
 export const ChatInbox: React.FC<ChatInboxProps> = ({
-  manualLocation,
-  setManualLocation,
   textareaRef,
   userMessage,
   handleInput,
@@ -11,19 +9,11 @@ export const ChatInbox: React.FC<ChatInboxProps> = ({
   locationError,
 }) => {
   return (
-    <main className="fixed bottom-0 py-4 px-4 left-[50%] right-[50%] transform -translate-x-1/2  shadow-2xl w-full max-w-max ">
-      {/* footer */}
-      <div className="">
+       <main className="relative mt-2  bg-red-400 "> {/* Adjust positioning */}
+      <div className="px-3 w-full max-w-5xl mx-auto fixed bottom-0 left-0 right-0 bg-black "> 
         {locationError && (
           <div className="mb-2">
             <p className="text-red-500 mb-1">{locationError}</p>
-            <input
-              type="text"
-              value={manualLocation}
-              onChange={(e) => setManualLocation(e.target.value)}
-              className="w-full max-w-4xl rounded-full h-10 bg-[#1e1f20] text-[#ccc] p-2 px-4 outline-none"
-              placeholder="Enter your full location "
-            />
           </div>
         )}
         <div className="relative  flex items-center gap-2 w-full rounded-md bg-[#1e1f20] p-3">
@@ -34,7 +24,7 @@ export const ChatInbox: React.FC<ChatInboxProps> = ({
             onKeyPress={(e) =>
               e.key === "Enter" && !isProcessing && handleSendMessage()
             }
-            className="flex-1 rounded-full bg-[#1e1f20] text-[#ccc] p-2 outline-none cursor-text text-md resize-none overflow-auto max-h-[6rem]"
+            className="flex-1 rounded-full bg-[#1e1f20] text-[#ccc] p-2 px-4 outline-none cursor-text text-md resize-none overflow-auto max-h-[6rem]"
             placeholder={`Looking for local service provider? ${
               isProcessing ? "processing...." : ""
             }`}
@@ -50,11 +40,10 @@ export const ChatInbox: React.FC<ChatInboxProps> = ({
           />
         </div>
         <p className="text-[#ccc] text-xs text-center mt-2">
-          <b>LOCA</b> use your input to fetch service. So long text will make
-          <b>LOCA</b> response to be inaccurate so let your input be
-          minimalistic to be able to get accurate services/response{" "}
+          <b>LOCA</b> uses your input to fetch services. Keep your input brief
+          for more accurate results.
         </p>
       </div>
     </main>
   );
-};
+};

components/firstvisitpopup.tsx

@@ -30,7 +30,7 @@ const FirstVisitPopup = () => {
             Loca is an AI-powered local services finder. Please note:
             <ul className="list-disc pl-5 mt-2">
               <li>Loca can only find services based on your specific input.</li>
-              <li>General greetings like &quot;Hi&quot; are not supported.</li>
+              <li>General conversation are not supported.</li>
               <li>Casual chatting is not supported.</li>
               <li>Focus on asking about local services you need.</li>
             </ul>

components/home.tsx

@@ -12,13 +12,16 @@ import { SignIn } from "@/lib/signIn";
 import { auth } from "@/lib/firebase";
 import { onAuthStateChanged } from "firebase/auth";
 import Link from "next/link";
+import { Loader2 } from "lucide-react"; // Import Loader2 icon from lucide-react
 
 export default function HomePage() {
   const [showResponse, setShowResponse] = useState(false);
   const [showCard, setShowCard] = useState(false);
   const [text, setText] = useState(true);
 
   const [user, setUser] = useState(auth.currentUser);
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [signInError, setSignInError] = useState<string | null>(null);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
@@ -30,22 +33,34 @@ export default function HomePage() {
 
     return () => unsubscribe();
   }, []);
+
   let defaultName = "";
-  // const Check = !(user?.displayName === null) : defaultName
   const image = user?.photoURL || local;
   const robotText = `Hi ${!(user?.displayName === null)}, Yes! I found a great one nearby. Check it out and book now.`;
-  // Function to simulate user typing
+
   useEffect(() => {
     const timer = setTimeout(() => {
       if (!showResponse) {
         setShowResponse(true);
         setText(false);
       }
-    }, 9000); // Adjust this delay as needed
+    }, 9000);
 
     return () => clearTimeout(timer);
   }, [showResponse]);
 
+  const handleSignIn = async () => {
+    setIsSigningIn(true);
+    setSignInError(null);
+    try {
+      await SignIn();
+    } catch (error) {
+      setSignInError("Sign in failed. Please try again.");
+    } finally {
+      setIsSigningIn(false);
+    }
+  };
+
   return (
     <section className="bg-[#131314]  w-full flex flex-col justify-center">
       <Navbar />
@@ -100,7 +115,6 @@ export default function HomePage() {
                   t.typeString(
                     `<p className="text-[#caccce] font-semibold"> Hey <b>Loca</b>, any plumber near <br /> me in Texas</p>`,
                   )
-                    // .pauseFor(2500)
                     .callFunction(() => {
                       setShowResponse(true);
                       setText(false);
@@ -124,16 +138,28 @@ export default function HomePage() {
           </p>
 
           {!user ? (
-            <Button
-              onClick={SignIn}
-              className="bg-blue-400 rounded-full p-6 hover:bg-blue-300"
-            >
-              SignIn{" "}
-            </Button>
+            <div>
+              <Button
+                onClick={handleSignIn}
+                className="bg-blue-400 rounded-full p-6 hover:bg-blue-300"
+                disabled={isSigningIn}
+              >
+                {isSigningIn ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Signing In...
+                  </>
+                ) : (
+                  "Sign In"
+                )}
+              </Button>
+              {signInError && (
+                <p className="text-red-500 mt-2 text-sm">{signInError}</p>
+              )}
+            </div>
           ) : (
             <Button className="bg-blue-400 rounded-full p-6 hover:bg-blue-300">
-              {" "}
-              <Link href="/chat">Chat</Link>{" "}
+              <Link href="/chat">Chat</Link>
             </Button>
           )}
         </div>
@@ -189,7 +215,6 @@ export default function HomePage() {
                   t.typeString(
                     `<p className="text-[#caccce] font-semibold"> Hey <b>Loca</b>, any plumber near <br /> me in Texas</p>`,
                   )
-                    // .pauseFor(2500)
                     .callFunction(() => {
                       setShowResponse(true);
                       setText(false);
@@ -234,4 +259,4 @@ export const CardComponent = () => {
       </Button>
     </>
   );
-};
+};

components/main.tsx

@@ -34,7 +34,6 @@ const Main: React.FC = () => {
   });
   const [isLoading, setIsLoading] = useState(false);
   const [locationError, setLocationError] = useState<string | null>(null);
-  const [manualLocation, setManualLocation] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const [streamedResponse, setStreamedResponse] = useState<string>("");
   const [services, setServices] = useState<ServiceItem[]>([]);
@@ -57,8 +56,8 @@ const Main: React.FC = () => {
         navigator.geolocation.getCurrentPosition(
           (position: GeolocationPosition) => {
             setLocation({
-              latitude: position.coords.latitude || null,
-              longitude: position.coords.longitude || null,
+              latitude: position.coords.latitude,
+              longitude: position.coords.longitude,
             });
             setLocationError(null);
           },
@@ -72,7 +71,7 @@ const Main: React.FC = () => {
         );
       } else {
         setLocationError(
-          "Geolocation is not supported by this browser. Please enter your location manually",
+          "Geolocation is not supported by this browser. Please try using a different browser."
         );
       }
     };
@@ -86,45 +85,6 @@ const Main: React.FC = () => {
     return () => unsubscribe();
   }, []);
 
-  // handler for manual location if error occur on automatic location
-  const handleManualLocationSubmit = async () => {
-    if (!manualLocation.trim()) {
-      setLocationError("Please enter a location.");
-      return;
-    }
-
-    setIsProcessing(true);
-    try {
-      const response = await fetch(
-        `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
-          manualLocation,
-        )}&key=${process.env.GOOGLE_PLACES_API_KEY}`,
-      );
-      const data = await response.json();
-
-      if (data.results && data.results.length > 0) {
-        const { lat, lng } = data.results[0].geometry.location;
-        setLocation({ latitude: lat, longitude: lng });
-        setLocationError(null);
-      } else {
-        setLocationError(
-          "Unable to find the location. Please try a more specific address.",
-        );
-      }
-    } catch (error) {
-      console.error("Error geocoding manual location:", error);
-      setLocationError(
-        "Error processing location. Please try again or use a different address.",
-      );
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  // if(locationError){
-  //   alert(locationError)
-  // }
-  // handler for sending message to the sever
   const handleSendMessage = async () => {
     if (!userMessage.trim() || isProcessing) return;
     if (userMessage.length > 500) {
@@ -135,12 +95,9 @@ const Main: React.FC = () => {
     }
     setIsProcessing(true);
     if (!location.latitude || !location.longitude) {
-      const locationSubmitted = await handleManualLocationSubmit();
-      // @ts-ignore
-      if (!locationSubmitted) {
-        setIsProcessing(false);
-        return;
-      }
+      setLocationError("Unable to get your location. Please try again.");
+      setIsProcessing(false);
+      return;
     }
 
     const newConversation: ConversationItem[] = [
@@ -262,41 +219,43 @@ const Main: React.FC = () => {
   const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setUserMessage(e.target.value);
   };
-return (
-  <div className=" w-full block m-auto max-w-5xl h-full">
-    <div className="">
-      {conversation.length === 0 ? (
-        <DefaultChatPage user={user?.displayName?.slice(0, 3) || "Dev"} />
-      ) : (
-        conversation.map((message, index) => (
-          <ChatPage
-            key={index}
-            message={message}
-            index={index}
-            image={image}
-            logo={Logo}
-            isLoading={isLoading}
-            conversationEndRef={conversationEndRef}
-          />
-        ))
-      )}
-      {isLoading && <SkeletonCard />}
-      <div ref={conversationEndRef} />
-    </div>
-    {/* <div className="sticky bottom-0  bg-green-500 p-4"> */}
+  return (
+    <div className="w-full block m-auto max-w-5xl h-full pb-32 lg:pb-2"> {/* Add pb-32 for bottom padding */}
+    <div className="overflow-y-auto max-h-[calc(100vh-8rem)]">
+        {conversation.length === 0 ? (
+          <DefaultChatPage user={user?.displayName?.slice(0, 3) || "Dev"} />
+        ) : (
+
+               conversation.map((message, index) => (
+                <div >
+            <ChatPage
+              key={index}
+              message={message}
+              index={index}
+              image={image}
+              logo={Logo}
+              isLoading={isLoading}
+              conversationEndRef={conversationEndRef}
+            />
+                 <div ref={conversationEndRef} />
+              </div>
+          ))
+
+
+        )}
+        {isLoading && <SkeletonCard />}
+
+      </div>
       <ChatInbox
         locationError={locationError}
         isProcessing={isProcessing}
         handleInput={handleInput}
         textareaRef={textareaRef}
         userMessage={userMessage}
         handleSendMessage={handleSendMessage}
-        setManualLocation={setManualLocation}
-        manualLocation={manualLocation}
       />
-    {/* </div> */}
-  </div>
-);
+    </div>
+  );
 };
 
-export default Main;
+export default Main;