natgitadm/ERitors-Scribe-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove unused components and models for improved maintainability

Browse Source 
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files.
- Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter.
- Updated project structure and references to reflect these removals.
This commit is contained in:
natreex
2026-03-22 22:37:31 -04:00
parent e8aaef108b
commit 64ed90d993
229 changed files with 15091 additions and 21289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
components/quillsense/modes/QuillConversation.tsx
View File

@@ -1,23 +1,19 @@
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 {AlertTriangle, Book, BookOpen, Bot, Send, User} from 'lucide-react';
import React, {Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState,} from 'react';
import {Conversation, ConversationType, Message} from "@/lib/types/quillsense";
import {getSubLevel, isGeminiEnabled} from "@/lib/utils/quillsense";
import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
import {apiGet, apiPost} from '@/lib/api/client';
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
import Button from "@/components/ui/Button";
import IconButton from "@/components/ui/IconButton";
import IconContainer from "@/components/ui/IconContainer";
import LockCard from "@/components/ui/LockCard";
interface QuillConversationProps {
disabled: boolean;
@@ -32,15 +28,15 @@ export default function QuillConversation(
disabled,
selectedConversation,
setSelectConversation,
}: QuillConversationProps) {
}: QuillConversationProps): React.JSX.Element {
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 {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
const {setTotalPrice, setTotalCredits}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
const [inputText, setInputText] = useState<string>('');
const [messages, setMessages] = useState<Message[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -49,13 +45,13 @@ export default function QuillConversation(
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;
const geminiEnabled: boolean = isGeminiEnabled(session);
const isSubTierTwo: boolean = getSubLevel(session) >= 2;
const hasAccess: boolean = geminiEnabled || isSubTierTwo;
function adjustTextareaHeight(): void {
const textarea: HTMLTextAreaElement | null = textareaRef.current;
if (textarea) {
@@ -64,7 +60,7 @@ export default function QuillConversation(
textarea.style.height = `${newHeight}px`;
}
}
function scrollToBottom(): void {
const messageContainer: HTMLDivElement | null = messageContainerRef.current;
if (messageContainer) {
@@ -72,24 +68,20 @@ export default function QuillConversation(
}
}
function LoadingMessage() {
function LoadingMessage(): React.JSX.Element {
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 className="mr-3">
<IconContainer icon={Bot} size="sm" shape="circle"/>
</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">
className="max-w-[75%] p-4 rounded-2xl bg-secondary text-text-primary rounded-bl-md">
<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 className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-1"></div>
<div className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-2"></div>
<div className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-3"></div>
</div>
</div>
</div>
@@ -97,18 +89,17 @@ export default function QuillConversation(
);
}
function WelcomeMessage() {
function WelcomeMessage(): React.JSX.Element {
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 className="mb-6">
<IconContainer icon={Bot} size="lg" shape="rounded"/>
</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">
<div className="bg-tertiary rounded-xl p-4">
<p className="text-sm text-text-secondary text-center">
{t('quillConversation.welcomeTip')}
</p>
@@ -117,19 +108,18 @@ export default function QuillConversation(
);
}
function ContextAlert() {
function ContextAlert(): React.JSX.Element {
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="fixed inset-0 bg-darkest-background/60 backdrop-blur-md flex items-center justify-center z-50">
<div className="bg-tertiary rounded-2xl p-5 max-w-md">
<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 className="mr-3">
<IconContainer icon={AlertTriangle} size="md" shape="square"/>
</div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t('quillConversation.contextAlert.title')}</h3>
</div>
@@ -137,31 +127,37 @@ export default function QuillConversation(
{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 className="flex-1">
<Button
variant="secondary"
fullWidth
onClick={(): void => {
setShowContextAlert(false);
setPendingContextType('none');
}}
>
{t('common.cancel')}
</Button>
</div>
<div className="flex-1">
<Button
variant="primary"
fullWidth
onClick={(): void => {
setContextType(pendingContextType);
setShowContextAlert(false);
setPendingContextType('none');
}}
>
{t('common.confirm')}
</Button>
</div>
</div>
</div>
</div>
);
}
function handleContextChange(type: ContextType): void {
if (type === 'none') {
setContextType('none');
@@ -189,7 +185,7 @@ export default function QuillConversation(
async function getMessages(): Promise<void> {
try {
const response: Conversation =
await System.authGetQueryToServer<Conversation>(
await apiGet<Conversation>(
`quillsense/conversation`,
session.accessToken,
"fr",
@@ -197,7 +193,7 @@ export default function QuillConversation(
);
if (response) {
setMessages(response.messages);
setMode((response.type as ConversationType) ?? 'chatbot');
setMode(response.type ?? 'chatbot');
}
} catch (e: unknown) {
if (e instanceof Error) {
@@ -230,7 +226,7 @@ export default function QuillConversation(
setInputText('');
setIsLoading(true);
const response: Conversation = await System.authPostToServer<Conversation>('quillsense/chatbot/send', {
const response: Conversation = await apiPost<Conversation>('quillsense/chatbot/send', {
message: inputText,
bookId: book?.bookId || null,
chapterId: chapter?.chapterId || null,
@@ -267,7 +263,11 @@ export default function QuillConversation(
: updatedMessages;
});
setTotalPrice((prevTotal: number): number => prevTotal + (response.totalPrice || 0));
if (response.useYourKey) {
setTotalPrice((prevTotal: number): number => prevTotal + (response.totalPrice || 0));
} else {
setTotalCredits(response.totalPrice || 0);
}
if (selectedConversation === '') {
setSelectConversation(response.id);
@@ -275,7 +275,7 @@ export default function QuillConversation(
}
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(t('quillConversation.sendError'));
errorMessage(e.message);
} else {
errorMessage(t('quillConversation.genericError'));
}
@@ -286,40 +286,20 @@ export default function QuillConversation(
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">
<LockCard title={t('quillConversation.accessRequired.title')}
description={t('quillConversation.accessRequired.description')}/>
<div className="p-4">
<div
className="flex items-center rounded-2xl bg-tertiary/30 p-3 border border-secondary/50 opacity-50">
className="flex items-center rounded-2xl bg-tertiary p-3 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 className="ml-2">
<IconButton icon={Send} variant="muted" size="lg" shape="square" disabled={true}/>
</div>
</div>
</div>
</div>
@@ -332,22 +312,21 @@ export default function QuillConversation(
{messages.length === 0 && !isLoading ? (
<WelcomeMessage/>
) : (
messages.map((message: Message) => (
messages.map((message: Message): React.JSX.Element => (
<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 className="mr-3">
<IconContainer icon={Bot} size="sm" shape="circle"/>
</div>
)}
<div
className={`max-w-[75%] p-4 rounded-2xl shadow-sm ${
className={`max-w-[75%] p-4 rounded-2xl ${
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'
? 'bg-primary text-text-primary rounded-br-md'
: 'bg-tertiary text-text-primary rounded-bl-md'
}`}
>
<p className="leading-relaxed whitespace-pre-wrap">{message.message}</p>
@@ -360,9 +339,8 @@ export default function QuillConversation(
</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 className="ml-3">
<IconContainer icon={User} size="sm" shape="circle"/>
</div>
)}
</div>
@@ -376,51 +354,33 @@ export default function QuillConversation(
<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'
}`}
>
<Button variant={contextType === 'none' ? 'primary' : 'secondary'} size="sm"
onClick={(): void => handleContextChange('none')}>
{t('quillConversation.context.none')}
</button>
</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>
<Button variant={contextType === 'chapter' ? 'primary' : 'secondary'} size="sm"
icon={BookOpen}
onClick={(): void => handleContextChange('chapter')}>
{t('quillConversation.context.chapter')}
</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>
<Button variant={contextType === 'book' ? 'primary' : 'secondary'} size="sm"
icon={Book}
onClick={(): void => handleContextChange('book')}>
{t('quillConversation.context.book')}
</Button>
)}
</div>
</div>
<div className="flex items-end rounded-2xl bg-tertiary border border-secondary/50 shadow-inner">
<div className="flex items-end rounded-2xl bg-tertiary">
<textarea
disabled={disabled || isLoading}
ref={textareaRef}
value={inputText}
onChange={(e) => setInputText(e.target.value)}
onKeyDown={async (e) => {
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>): void => setInputText(e.target.value)}
onKeyDown={async (e: React.KeyboardEvent<HTMLTextAreaElement>): Promise<void> => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
await handleSend();
@@ -430,21 +390,17 @@ export default function QuillConversation(
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 className="m-2">
<IconButton icon={Send}
variant={inputText.trim() === '' || isLoading ? 'muted' : 'primary'}
size="lg" shape="square"
onClick={handleSend}
disabled={inputText.trim() === '' || isLoading}/>
</div>
</div>
</div>
{showContextAlert && <ContextAlert/>}
</>
);
}
}