1  "use client"
 2  import { useState } from "react";
 3  import {
 4    SendHorizontal,
 5  } from "lucide-react"
 6  import Link from "next/link"
 7  import React, { useRef } from "react"
 8  import { buttonVariants } from "@/components/ui/button"
 9  import { cn } from "@/lib/utils"
10  import { AnimatePresence, motion } from "framer-motion"
11  import { Textarea } from "@/components/ui/textarea"
12  
13  export function ChatBottomBar({ sendMessage, isMobile, submitMessage }) {
14      const [message, setMessage] = useState("")
15      const inputRef = useRef(null);
16    
17      const handleInputChange = event => {
18        setMessage(event.target.value);
19      };
20    
21      const handleKeyPress = async event => {
22        if (event.key === "Enter" && !event.shiftKey) {
23          event.preventDefault();
24          await handleSend();
25        }
26    
27        if (event.key === "Enter" && event.shiftKey) {
28          event.preventDefault();
29          setMessage(prev => prev + "\n");
30        }
31      };
32    
33      const handleSend = async () => {
34        if (message.trim()) {
35          // Assuming submitMessage is a function that handles message submission
36          const responseMessage = await submitMessage(message);
37          // Optionally handle the response message
38          setMessage(""); // Clear the input field after sending the message
39        }
40      };
41    
42      return (
43        <div className="p-2 flex justify-between w-full items-center gap-2">
44          <AnimatePresence initial={false}>
45            <motion.div
46              key="input"
47              className="w-full relative"
48              layout
49              initial={{ opacity: 0, scale: 1 }}
50              animate={{ opacity: 1, scale: 1 }}
51              exit={{ opacity: 0, scale: 1 }}
52              transition={{
53                opacity: { duration: 0.05 },
54                layout: {
55                  type: "spring",
56                  bounce: 0.15
57                }
58              }}
59            >
60              <Textarea
61                autoComplete="off"
62                value={message}
63                ref={inputRef}
64                onKeyDown={handleKeyPress}
65                onChange={handleInputChange}
66                name="message"
67                placeholder="Aa"
68                className="w-full border rounded-full flex items-center h-9 resize-none overflow-hidden bg-background"
69              ></Textarea>
70            </motion.div>
71    
72            {message.trim() ? (
73              <Link
74                href="#"
75                className={cn(
76                  buttonVariants({ variant: "ghost", size: "icon" }),
77                  "h-9 w-9",
78                  "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white shrink-0"
79                )}
80                onClick={handleSend}
81              >
82                <SendHorizontal size={20} className="text-muted-foreground" />
83              </Link>
84            ) : null}
85          </AnimatePresence>
86        </div>
87      );
88    }