| "use client"; |
|
|
| import React, { useCallback, useEffect, useState, useRef } from "react"; |
| import { Textarea } from "@/components/ui/textarea-chat"; |
| import { Send, Loader2, Sparkles } from "lucide-react"; |
| import { Button } from "@/components/ui/button"; |
| import { useChatLogic } from "@/hooks/useChatLogic"; |
|
|
| import type { Chat } from "@/lib/types"; |
|
|
| type Props = { |
| selectedChat: Chat | null; |
| selectedChatId: string | null; |
| scrollToBottom: () => void; |
| }; |
|
|
| const MessageBar: React.FC<Props> = ({ |
| selectedChat, |
| selectedChatId, |
| scrollToBottom, |
| }) => { |
| const { isLoading, handleSubmit } = useChatLogic( |
| selectedChat, |
| selectedChatId, |
| scrollToBottom |
| ); |
|
|
| const [input, setInput] = useState<string>(""); |
| const textareaRef = useRef<HTMLTextAreaElement>(null); |
|
|
| |
| const adjustTextareaHeight = useCallback(() => { |
| const textarea = textareaRef.current; |
| if (textarea) { |
| textarea.style.height = "auto"; |
| const newHeight = Math.min(textarea.scrollHeight, 120); |
| textarea.style.height = `${newHeight}px`; |
| } |
| }, []); |
|
|
| useEffect(() => { |
| adjustTextareaHeight(); |
| }, [input, adjustTextareaHeight]); |
|
|
| const handleFormSubmit = useCallback( |
| async (e: React.FormEvent<HTMLFormElement>) => { |
| e.preventDefault(); |
| if (input.trim()) { |
| await handleSubmit(input); |
| setInput(""); |
| setTimeout(() => adjustTextareaHeight(), 0); |
| } |
| }, |
| [handleSubmit, input, adjustTextareaHeight] |
| ); |
|
|
| const handleKeyDown = useCallback( |
| async (e: React.KeyboardEvent<HTMLTextAreaElement>) => { |
| if (e.key === "Enter" && !e.shiftKey) { |
| e.preventDefault(); |
| if (input.trim()) { |
| await handleSubmit(input); |
| setInput(""); |
| setTimeout(() => adjustTextareaHeight(), 0); |
| } |
| } |
| }, |
| [handleSubmit, input, adjustTextareaHeight] |
| ); |
|
|
| useEffect(() => { |
| const handleKeyPress = (e: KeyboardEvent) => { |
| if (e.key === "/" && document.activeElement?.tagName !== "TEXTAREA") { |
| e.preventDefault(); |
| textareaRef.current?.focus(); |
| } |
| }; |
|
|
| window.addEventListener("keydown", handleKeyPress); |
| return () => window.removeEventListener("keydown", handleKeyPress); |
| }, []); |
|
|
| return ( |
| <div className="p-2 max-w-4xl mx-auto w-full"> |
| <form |
| onSubmit={handleFormSubmit} |
| className="flex items-end gap-2 sm:gap-3 bg-gradient-to-r from-background to-muted/20 border border-border/50 rounded-xl sm:rounded-2xl p-2 sm:p-3 shadow-lg backdrop-blur-sm" |
| > |
| <div className="flex-1 relative min-w-0"> |
| <Textarea |
| ref={textareaRef} |
| value={input} |
| onChange={(e) => setInput(e.target.value)} |
| onKeyDown={handleKeyDown} |
| placeholder="Ask about your transcripts..." |
| className="resize-none border-none bg-transparent focus:ring-0 focus:outline-none overflow-y-auto placeholder:text-muted-foreground/60 text-sm sm:text-base" |
| style={{ minHeight: "36px", maxHeight: "120px" }} |
| disabled={isLoading} |
| aria-label="Message input" |
| /> |
| {!input && ( |
| <div className="absolute top-2 sm:top-3 right-2 sm:right-3 text-muted-foreground/40 pointer-events-none"> |
| <Sparkles className="h-3.5 w-3.5 sm:h-4 sm:w-4" /> |
| </div> |
| )} |
| </div> |
| <Button |
| type="submit" |
| size="icon" |
| className="h-9 w-9 sm:h-10 sm:w-10 rounded-lg sm:rounded-xl bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 transition-all duration-200 shadow-md hover:shadow-lg hover:scale-105 flex-shrink-0" |
| disabled={isLoading || selectedChatId === null || !input.trim()} |
| aria-label="Send message" |
| > |
| {isLoading ? ( |
| <Loader2 className="h-4 w-4 animate-spin" /> |
| ) : ( |
| <Send className="h-4 w-4" /> |
| )} |
| </Button> |
| </form> |
| <div className="text-center mt-2 hidden sm:block"> |
| <p className="text-xs text-muted-foreground/60"> |
| Answers are generated by AI and may not be accurate. Use at your own |
| discretion. |
| </p> |
| </div> |
| </div> |
| ); |
| }; |
|
|
| export default React.memo(MessageBar); |
|
|
