feat: Ai agent integration!

packages/nextjs/components/ChatSearchBar.tsx

@@ -1,8 +1,7 @@
 import { FC, useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { MagnifyingGlassIcon, PaperAirplaneIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, PaperAirplaneIcon, TrophyIcon, XMarkIcon, VideoCameraIcon } from "@heroicons/react/24/outline";
 import { useAccount } from "wagmi";
-import { useFitness } from "~~/context/FitnessContext";
 
 
 
@@ -21,20 +20,22 @@ const ChatSearchBar: FC = () => {
 
   const { address } = useAccount();
 
+  const stepCount = 2000;
+
+
   useEffect(() => {
     // Show CTA after 2 seconds
     const timer = setTimeout(() => setShowCTA(true), 2000);
     return () => clearTimeout(timer);
   }, []);
-  const dailyChallenges = `Today's Challenges 🏋️‍♂️:
-1. 10 Push-ups
-2. 20 Sit-ups
-3. 30 Jumping Jacks
-4. 1 minute Plank
-5. 20 Squats
-
+  const dailyChallenges = `Today's Challenges 🏋️‍♂️:\n
+1. 10 Push-ups\n
+2. 20 Sit-ups\n
+3. 30 Jumping Jacks\n
+4. 1 minute Plank\n
+5. 20 Squats\n
 Complete these exercises to earn 0.01 ETH! 
-Reply 'done' when you've completed the challenge.`;
+Just Upload your video to participate`;
 
   const handleDailyChallenges = () => {
     setIsChat(true);
@@ -55,7 +56,9 @@ Reply 'done' when you've completed the challenge.`;
     setMessages(prev => [...prev, { text: inputText, isUser: true }]);
 
     try {
-      const response = await fetch("http://localhost:3000/chat", {
+      // Update inputText with appended information
+      setInputText(`${inputText}(my address=${address} my steps=${stepCount} USE ONLY IF RELEVENT)`);
+      const response = await fetch("http://ai.thearnab.tech:8000/chat", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -82,6 +85,46 @@ Reply 'done' when you've completed the challenge.`;
     }
   };
 
+  const handleVideoUploadClick = () => {
+    document.getElementById("video-upload-input")?.click();
+  };
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('WalletAddress', address);
+      formData.append('description', "Pushups rush!!");
+      const imageUrls = [
+        'https://walrus-ms.onrender.com/retrieve/PAnhlbndMMhGpbGYbJn24mbllXwYKXNzICe5oWACaYQ',
+        'https://walrus-ms.onrender.com/retrieve/KQ7VGN23gif1in3I0wVETV6tiqtwBmLF1vla8GNauH8',
+        'https://walrus-ms.onrender.com/retrieve/5I1DYglEocvcA0nX0uPClHEBFFxz4a7YspbtoeihcvI'
+      ];
+      const randomImageUrl = imageUrls[Math.floor(Math.random() * imageUrls.length)];
+      formData.append('image_url', randomImageUrl);
+
+      setIsLoading(true);
+      try {
+        const response = await fetch('http://ai.thearnab.tech:5000/upload', {
+          method: 'POST',
+          body: formData,
+        });
+
+        if (!response.ok) {
+          throw new Error('File upload failed');
+        }
+
+        // Handle successful upload
+        console.log('File uploaded successfully');
+      } catch (error) {
+        console.error('Error uploading file:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
   return (
     <>
       {/* Pointing Arrow CTA */}
@@ -135,9 +178,8 @@ Reply 'done' when you've completed the challenge.`;
         )}
       </AnimatePresence>
       <div
-        className={`fixed bottom-0 left-0 right-0 transition-all duration-300 ease-in-out ${
-          isChat ? "h-[90vh]" : "h-16"
-        } bg-[#2d2c2e]`}
+        className={`fixed bottom-0 left-0 right-0 transition-all duration-300 ease-in-out ${isChat ? "h-[90vh]" : "h-16"
+          } bg-[#2d2c2e]`}
       >
         {/* Header when in chat mode */}
         {isChat && (
@@ -154,9 +196,8 @@ Reply 'done' when you've completed the challenge.`;
           {messages.map((message, index) => (
             <div key={index} className={`flex ${message.isUser ? "justify-end" : "justify-start"}`}>
               <div
-                className={`max-w-[70%] rounded-xl p-3 ${
-                  message.isUser ? "bg-[#11ce6f] text-[#fbf8fe]" : "bg-[#000001] text-[#fbf8fe]"
-                }`}
+                className={`max-w-[70%] rounded-xl p-3 ${message.isUser ? "bg-[#11ce6f] text-[#fbf8fe]" : "bg-[#000001] text-[#fbf8fe]"
+                  }`}
               >
                 {message.text}
                 {message.blockchainInsights && (
@@ -202,14 +243,25 @@ Reply 'done' when you've completed the challenge.`;
               )}
             </div>
             {isChat && (
-              <button
-                type="submit"
-                className="p-2 rounded-xl bg-[#11ce6f] text-[#fbf8fe] hover:opacity-90 transition-opacity"
-                disabled={isLoading}
-              >
-                {isLoading ? <span className="animate-spin">⌛</span> : <PaperAirplaneIcon className="w-5 h-5" />}
-              </button>
+              <div className="flex items-center space-x-2 max-w-screen">
+                <button
+                  type="button"
+                  onClick={handleVideoUploadClick}
+                  className="p-2 rounded-xl bg-[#11ce6f] text-[#fbf8fe] hover:opacity-90 transition-opacity"
+                  disabled={isLoading}
+                >
+                  <VideoCameraIcon className="w-5 h-5" />
+                </button>
+                <button
+                  type="submit"
+                  className="p-2 rounded-xl bg-[#11ce6f] text-[#fbf8fe] hover:opacity-90 transition-opacity"
+                  disabled={isLoading}
+                >
+                  {isLoading ? <span className="animate-spin">⌛</span> : <PaperAirplaneIcon className="w-5 h-5" />}
+                </button>
+              </div>
             )}
+            <input type="file" id="video-upload-input" accept="video/*" className="hidden" onChange={handleFileChange} />
           </form>
         </div>
       </div>