ERitors-Scribe-Desktop/components/quillsense/modes/QuillConversation.tsx

import {
    faBook,
    faBookOpen,
    faExclamationTriangle,
    faLock,
    faPaperPlane,
    faRobot,
    faUser
} from '@fortawesome/free-solid-svg-icons';
import {Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState,} from 'react';
import QuillSense, {Conversation, ConversationType, Message} from "@/lib/models/QuillSense";
import {ChapterContext} from "@/context/ChapterContext";
import {BookContext} from "@/context/BookContext";
import {AlertContext} from "@/context/AlertContext";
import {SessionContext} from '@/context/SessionContext';
import System from "@/lib/models/System";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";

interface QuillConversationProps {
    disabled: boolean;
    selectedConversation: string;
    setSelectConversation: Dispatch<SetStateAction<string>>;
}

type ContextType = 'none' | 'chapter' | 'book';

export default function QuillConversation(
    {
        disabled,
        selectedConversation,
        setSelectConversation,
    }: QuillConversationProps) {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {session} = useContext(SessionContext);
    const {errorMessage} = useContext(AlertContext);
    const {book} = useContext(BookContext);
    const {chapter} = useContext(ChapterContext);
    const {setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
    
    const [inputText, setInputText] = useState<string>('');
    const [messages, setMessages] = useState<Message[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [contextType, setContextType] = useState<ContextType>('none');
    const [showContextAlert, setShowContextAlert] = useState<boolean>(false);
    const [pendingContextType, setPendingContextType] = useState<ContextType>('none');
    const messageContainerRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
    const textareaRef: RefObject<HTMLTextAreaElement | null> = useRef<HTMLTextAreaElement>(null);
    
    const [mode, setMode] = useState<ConversationType>('chatbot');
    
    const isGeminiEnabled: boolean = QuillSense.isGeminiEnabled(session);
    const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 2;
    const hasAccess: boolean = isGeminiEnabled || isSubTierTwo;
    
    function adjustTextareaHeight(): void {
        const textarea: HTMLTextAreaElement | null = textareaRef.current;
        if (textarea) {
            textarea.style.height = 'auto';
            const newHeight: number = Math.min(Math.max(textarea.scrollHeight, 42), 120);
            textarea.style.height = `${newHeight}px`;
        }
    }
    
    function scrollToBottom(): void {
        const messageContainer: HTMLDivElement | null = messageContainerRef.current;
        if (messageContainer) {
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }
    }
    
    function LoadingMessage() {
        return (
            <div className="flex mb-6 justify-start">
                <div
                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mr-3 shadow-lg">
                    <FontAwesomeIcon icon={faRobot} className={'w-5 h-5'}/>
                </div>
                <div
                    className="max-w-[75%] p-4 rounded-2xl bg-secondary/80 text-text-primary rounded-bl-md backdrop-blur-sm border border-secondary/50">
                    <div className="flex items-center space-x-2">
                        <span className="text-text-secondary text-sm">{t('quillConversation.loadingMessage')}</span>
                        <div className="flex space-x-1">
                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
                                 style={{animationDelay: '0ms', animationDuration: '1.5s'}}></div>
                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
                                 style={{animationDelay: '0.3s', animationDuration: '1.5s'}}></div>
                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
                                 style={{animationDelay: '0.6s', animationDuration: '1.5s'}}></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    
    function WelcomeMessage() {
        return (
            <div className="flex flex-col items-center justify-center h-full p-8">
                <div
                    className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mb-6 shadow-2xl">
                    <FontAwesomeIcon icon={faRobot} className={'w-10 h-10'}/>
                </div>
                <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-3">{t('quillConversation.welcomeTitle')}</h2>
                <p className="text-muted text-center leading-relaxed text-lg max-w-md mb-6">
                    {t('quillConversation.welcomeDescription')}
                </p>
                <div className="bg-secondary/30 rounded-xl p-4 border border-secondary/50 backdrop-blur-sm shadow-md">
                    <p className="text-sm text-text-secondary text-center">
                        {t('quillConversation.welcomeTip')}
                    </p>
                </div>
            </div>
        );
    }
    
    function ContextAlert() {
        const contextDescription: string = pendingContextType === 'chapter'
            ? t('quillConversation.contextAlert.chapter')
            : t('quillConversation.contextAlert.book');

        return (
            <div className="fixed inset-0 bg-overlay flex items-center justify-center z-50">
                <div
                    className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
                    <div className="flex items-center mb-4">
                        <div
                            className="w-12 h-12 rounded-xl bg-warning/20 flex items-center justify-center mr-3 shadow-sm">
                            <FontAwesomeIcon icon={faExclamationTriangle} className="w-6 h-6 text-warning"/>
                        </div>
                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t('quillConversation.contextAlert.title')}</h3>
                    </div>
                    <p className="text-muted mb-6 leading-relaxed text-lg">
                        {contextDescription}
                    </p>
                    <div className="flex space-x-3">
                        <button
                            onClick={(): void => {
                                setShowContextAlert(false);
                                setPendingContextType('none');
                            }}
                            className="flex-1 px-4 py-2.5 bg-secondary/50 text-text-secondary rounded-xl hover:bg-secondary hover:text-text-primary transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md border border-secondary/50 font-medium"
                        >
                            {t('common.cancel')}
                        </button>
                        <button
                            onClick={(): void => {
                                setContextType(pendingContextType);
                                setShowContextAlert(false);
                                setPendingContextType('none');
                            }}
                            className="flex-1 px-4 py-2.5 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
                        >
                            {t('common.confirm')}
                        </button>
                    </div>
                </div>
            </div>
        );
    }
    
    function handleContextChange(type: ContextType): void {
        if (type === 'none') {
            setContextType('none');
        } else {
            setPendingContextType(type);
            setShowContextAlert(true);
        }
    }
    
    useEffect((): void => {
        if (selectedConversation !== '' && hasAccess) {
            getMessages().then();
        }
    }, []);
    
    useEffect((): void => {
        scrollToBottom();
    }, [messages, isLoading]);
    
    useEffect((): void => {
        adjustTextareaHeight();
    }, [inputText]);
    
    
    async function getMessages(): Promise<void> {
        try {
            const response: Conversation =
                await System.authGetQueryToServer<Conversation>(
                    `quillsense/conversation`,
                    session.accessToken,
                    "fr",
                    {id: selectedConversation},
                );
            if (response) {
                setMessages(response.messages);
                setMode((response.type as ConversationType) ?? 'chatbot');
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('quillConversation.genericError'));
            }
        }
    }
    
    function getCurrentTime(): string {
        const now: Date = new Date();
        return now.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
    }
    
    async function handleSend(): Promise<void> {
        if (!inputText.trim()) {
            errorMessage(t('quillConversation.emptyMessageError'));
            return;
        }
        try {
            const tempId: number = Date.now();
            const newMessage: Message = {
                id: tempId,
                message: inputText,
                type: 'user',
                date: getCurrentTime(),
            };
            setMessages((prevMessages: Message[]): Message[] => [...prevMessages, newMessage]);
            setInputText('');
            setIsLoading(true);
            
            const response: Conversation = await System.authPostToServer<Conversation>('quillsense/chatbot/send', {
                message: inputText,
                bookId: book?.bookId || null,
                chapterId: chapter?.chapterId || null,
                conversationId: selectedConversation ?? '',
                mode: mode,
                contextType: contextType,
                version: chapter?.chapterContent.version || null,
            }, session.accessToken, lang);
            console.log(response);
            
            setIsLoading(false);
            if (response) {
                setMessages((prevMessages: Message[]): Message[] => {
                    const userMessageFromServer: Message | undefined =
                        response.messages.find(
                            (msg: Message): boolean => msg.type === 'user',
                        );
                    const aiMessageFromServer: Message | undefined =
                        response.messages.find(
                            (msg: Message): boolean => msg.type === 'model',
                        );
                    
                    const updatedMessages: Message[] = prevMessages.map(
                        (msg: Message): Message =>
                            msg.id === tempId && userMessageFromServer
                                ? {
                                    ...msg,
                                    id: userMessageFromServer.id,
                                    date: userMessageFromServer.date,
                                }
                                : msg,
                    );
                    
                    return aiMessageFromServer
                        ? [...updatedMessages, aiMessageFromServer]
                        : updatedMessages;
                });
                
                setTotalPrice((prevTotal: number): number => prevTotal + (response.totalPrice || 0));
                
                if (selectedConversation === '') {
                    setSelectConversation(response.id);
                }
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(t('quillConversation.sendError'));
            } else {
                errorMessage(t('quillConversation.genericError'));
            }
            setIsLoading(false);
        }
    }
    
    if (!hasAccess) {
        return (
            <div className="flex flex-col h-full">
                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
                    <div className="max-w-md mx-auto">
                        <div
                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
                            <div
                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
                            </div>
                            
                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
                                {t('quillConversation.accessRequired.title')}
                            </h3>
                            
                            <p className="text-muted leading-relaxed text-lg">
                                {t('quillConversation.accessRequired.description')}
                            </p>
                        </div>
                    </div>
                </div>
                <div className="bg-secondary/30 backdrop-blur-sm border-t border-secondary/50 p-4 shadow-inner">
                    <div
                        className="flex items-center rounded-2xl bg-tertiary/30 p-3 border border-secondary/50 opacity-50">
                        <textarea
                            disabled={true}
                            placeholder={t('quillConversation.inputPlaceholder')}
                            rows={1}
                            className="flex-1 bg-transparent border-0 outline-none px-4 py-2 text-text-primary placeholder-text-secondary resize-none overflow-hidden min-h-[42px] max-h-[120px] cursor-not-allowed"
                        />
                        <button
                            disabled={true}
                            className="p-3 rounded-xl text-text-secondary cursor-not-allowed ml-2"
                        >
                            <FontAwesomeIcon icon={faPaperPlane} className="w-5 h-5"/>
                        </button>
                    </div>
                </div>
            </div>
        );
    }
    
    return (
        <>
            <div ref={messageContainerRef} className="flex-1 p-6 overflow-y-auto">
                {messages.length === 0 && !isLoading ? (
                    <WelcomeMessage/>
                ) : (
                    messages.map((message: Message) => (
                        <div
                            key={message.id}
                            className={`flex mb-6 ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
                        >
                            {message.type === 'model' && (
                                <div
                                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mr-3 shadow-lg">
                                    <FontAwesomeIcon icon={faRobot} className={'w-5 h-5'}/>
                                </div>
                            )}
                            <div
                                className={`max-w-[75%] p-4 rounded-2xl shadow-sm ${
                                    message.type === 'user'
                                        ? 'bg-gradient-to-br from-primary to-primary-dark text-text-primary rounded-br-md'
                                        : 'bg-secondary/80 text-text-primary rounded-bl-md backdrop-blur-sm border border-secondary/50'
                                }`}
                            >
                                <p className="leading-relaxed whitespace-pre-wrap">{message.message}</p>
                                <p className={`text-xs mt-2 ${
                                    message.type === 'user'
                                        ? 'text-text-primary/70'
                                        : 'text-text-secondary'
                                }`}>
                                    {message.date}
                                </p>
                            </div>
                            {message.type === 'user' && (
                                <div
                                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary-dark to-tertiary flex items-center justify-center text-text-primary ml-3 shadow-lg">
                                    <FontAwesomeIcon icon={faUser} className={'w-5 h-5'}/>
                                </div>
                            )}
                        </div>
                    ))
                )}
                {isLoading && <LoadingMessage/>}
            </div>
            
            <div className="p-4">
                <div className="flex items-center space-x-4 mb-3 px-2">
                    <span
                        className="text-sm text-text-secondary font-medium">{t('quillConversation.contextLabel')}</span>
                    <div className="flex items-center space-x-2">
                        <button
                            onClick={(): void => handleContextChange('none')}
                            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                                contextType === 'none'
                                    ? 'bg-primary text-text-primary'
                                    : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
                            }`}
                        >
                            {t('quillConversation.context.none')}
                        </button>
                        {chapter && (
                            <button
                                onClick={(): void => handleContextChange('chapter')}
                                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center space-x-1 ${
                                    contextType === 'chapter'
                                        ? 'bg-primary text-text-primary'
                                        : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
                                }`}
                            >
                                <FontAwesomeIcon icon={faBookOpen} className="w-3 h-3"/>
                                <span>{t('quillConversation.context.chapter')}</span>
                            </button>
                        )}
                        {book && (
                            <button
                                onClick={(): void => handleContextChange('book')}
                                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center space-x-1 ${
                                    contextType === 'book'
                                        ? 'bg-primary text-text-primary'
                                        : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
                                }`}
                            >
                                <FontAwesomeIcon icon={faBook} className="w-3 h-3"/>
                                <span>{t('quillConversation.context.book')}</span>
                            </button>
                        )}
                    </div>
                </div>
                <div className="flex items-end rounded-2xl bg-tertiary border border-secondary/50 shadow-inner">
                    <textarea
                        disabled={disabled || isLoading}
                        ref={textareaRef}
                        value={inputText}
                        onChange={(e) => setInputText(e.target.value)}
                        onKeyDown={async (e) => {
                            if (e.key === 'Enter' && !e.shiftKey) {
                                e.preventDefault();
                                await handleSend();
                            }
                        }}
                        placeholder={t('quillConversation.inputPlaceholder')}
                        rows={1}
                        className="flex-1 bg-transparent border-0 outline-none px-4 text-text-primary placeholder-text-secondary resize-none overflow-hidden min-h-[42px] max-h-[120px] leading-relaxed"
                    />
                    <button
                        onClick={handleSend}
                        disabled={inputText.trim() === '' || isLoading}
                        className={`m-2 p-3 rounded-xl transition-all duration-200 ${
                            inputText.trim() === '' || isLoading
                                ? 'text-text-secondary bg-secondary/50 cursor-not-allowed'
                                : 'text-text-primary bg-gradient-to-br from-primary to-primary-dark hover:from-primary-dark hover:to-primary shadow-lg hover:shadow-xl transform hover:scale-105'
                        }`}
                    >
                        <FontAwesomeIcon icon={faPaperPlane} className={'w-5 h-5'}/>
                    </button>
                </div>
            </div>
            
            {showContextAlert && <ContextAlert/>}
        </>
    );
}