Add API key retrieval from cookies in SearchBar

The code now tries to retrieve the OpenAI API key from the user's cookies during a search. If the API key is not present, a modal is launched to request it. This provides a seamless experience when the API key is not available, preventing unnecessary search attempts.

components/SearchBar.tsx

@@ -1,19 +1,32 @@
 import React, {useState} from 'react';
 import Message from './Message';
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {useModal} from "@/hooks/use-modal-store";
+import {parse} from "cookie";
 
 const SearchBar: React.FC = () => {
     const [searchDisabled, setSearchDisabled] = React.useState(false);
     const [searchQuery, setSearchQuery] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [response, setResponse] = useState<string | null>(null);
     const [showSearch, setShowSearch] = useState<boolean>(true);
+    const { onOpen } = useModal();
 
     const handleSearch = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         setIsLoading(true);
 
         try {
+            // Retrieve API key from cookies
+            const cookies = parse(document.cookie);
+            const apiKey = cookies.openaiApiKey || null;
+
+            if (!apiKey) {
+                // Open the API modal if the API Key is not present.
+                setIsLoading(false);
+                onOpen("api");
+                return;
+            }
             setSearchDisabled(true)
             const res = await fetch('/api/search', {
                 method: 'POST',