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

105
components/quillsense/QuillSenseComponent.tsx
View File

@@ -1,105 +1,89 @@
import {useContext, useState} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {
faBars,
faComments,
faExchangeAlt,
faLanguage,
faLightbulb,
faSpellCheck,
IconDefinition
} from '@fortawesome/free-solid-svg-icons';
import QuillSense, {QSView,} from "@/lib/models/QuillSense";
import React, {useContext, useState} from 'react';
import {ArrowLeftRight, Languages, Lightbulb, LucideIcon, Menu, MessageSquare, SpellCheck} from 'lucide-react';
import IconContainer from '@/components/ui/IconContainer';
import IconButton from '@/components/ui/IconButton';
import {QSView} from "@/lib/types/quillsense";
import {getSubLevel, isBringYourKeys, isOpenAIEnabled} from "@/lib/utils/quillsense";
import QuillList from "@/components/quillsense/modes/QuillList";
import QuillConversation from "./modes/QuillConversation";
import Dictionary from "@/components/quillsense/modes/Dictionary";
import Synonyms from "@/components/quillsense/modes/Synonyms";
import InspireMe from "@/components/quillsense/modes/InspireMe";
import {SessionContext} from "@/context/SessionContext";
import {useTranslations} from "next-intl";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {useTranslations} from '@/lib/i18n';
import Conjugator from "@/components/quillsense/modes/Conjugator";
interface QSOption {
view: QSView;
icon: IconDefinition;
icon: LucideIcon;
}
export default function QuillSenseComponent() {
export default function QuillSenseComponent(): React.JSX.Element {
const [view, setView] = useState<QSView>('chat');
const t = useTranslations();
const [selectedConversation, setSelectedConversation] = useState<string>('');
const {session} = useContext(SessionContext);
const isBringYourKeys: boolean = QuillSense.isBringYourKeys(session);
const subLevel: number = QuillSense.getSubLevel(session)
const isGPTEnabled: boolean = QuillSense.isOpenAIEnabled(session);
const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 1;
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const isBYOK: boolean = isBringYourKeys(session);
const subLevel: number = getSubLevel(session)
const isGPTEnabled: boolean = isOpenAIEnabled(session);
const isSubTierTwo: boolean = getSubLevel(session) >= 1;
const hasAccess: boolean = isGPTEnabled || isSubTierTwo;
const qsOptions: QSOption[] = [
{view: 'dictionary', icon: faSpellCheck},
{view: 'conjugator', icon: faLanguage},
{view: 'synonyms', icon: faExchangeAlt},
{view: 'inspiration', icon: faLightbulb},
{view: 'chat', icon: faComments},
{view: 'dictionary', icon: SpellCheck},
{view: 'conjugator', icon: Languages},
{view: 'synonyms', icon: ArrowLeftRight},
{view: 'inspiration', icon: Lightbulb},
{view: 'chat', icon: MessageSquare},
];
function handleSetView(view: QSView): void {
setView(view);
}
function handleSelectConversation(conversationId: string) {
function handleSelectConversation(conversationId: string): void {
setSelectedConversation(conversationId);
setView('chat');
}
return (
<div className="flex flex-col h-full w-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
<div className="flex flex-col h-full w-full bg-darkest-background overflow-hidden">
<div
className="px-3 py-3 flex items-center justify-between border-b border-secondary/50 bg-secondary/30 shadow-sm">
className="px-3 py-3 flex items-center justify-between bg-darkest-background">
<div className="flex items-center">
<button
onClick={() => handleSetView(view === 'chat' ? 'list' : 'chat')}
className="group text-text-primary mr-3 hover:text-primary p-2 rounded-lg hover:bg-secondary/50 transition-all hover:scale-110"
aria-label={t('quillSense.toggleList')}
>
<FontAwesomeIcon icon={faBars}
className={'w-5 h-5 transition-transform group-hover:scale-110'}/>
</button>
<div className="mr-3">
<IconButton icon={Menu} variant="ghost" shape="square"
onClick={(): void => handleSetView(view === 'chat' ? 'list' : 'chat')}
tooltip={t('quillSense.toggleList')}/>
</div>
</div>
<div className="flex items-center gap-1">
{
qsOptions.map((option: QSOption) => (
<button
qsOptions.map((option: QSOption): React.JSX.Element => (
<IconButton
key={option.view}
disabled={!isBringYourKeys && subLevel < 2 && option.view !== 'chat'}
icon={option.icon}
variant={view === option.view ? 'primary' : 'ghost'}
shape="square"
disabled={!isBYOK && subLevel < 2 && option.view !== 'chat'}
onClick={(): void => handleSetView(option.view)}
className={`group p-2.5 rounded-lg transition-all duration-200 ${
view === option.view
? 'bg-primary text-white shadow-md shadow-primary/30 scale-105'
: !isBringYourKeys && subLevel < 2 && option.view !== 'chat'
? 'text-muted/40 cursor-not-allowed'
: 'text-text-primary hover:text-primary hover:bg-secondary/50 hover:scale-110'
}`}
aria-label={t(`quillSense.options.${option.view}`)}
>
<FontAwesomeIcon icon={option.icon}
className={'w-4 h-4 transition-transform group-hover:scale-110'}/>
</button>
tooltip={t(`quillSense.options.${option.view}`)}
/>
))
}
</div>
</div>
{
isBringYourKeys || subLevel >= 1 ? (
isBYOK || subLevel >= 1 ? (
<>
{view === 'list' ? (
<QuillList handleSelectConversation={handleSelectConversation}/>
) : view === 'chat' ? (
<QuillConversation
disabled={!isBringYourKeys && subLevel < 2}
disabled={!isBYOK && subLevel < 2}
selectedConversation={selectedConversation}
setSelectConversation={setSelectedConversation}
/>
@@ -117,10 +101,7 @@ export default function QuillSenseComponent() {
</>
) : (
<div className="flex flex-col items-center justify-center h-full text-text-primary p-8">
<div
className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
<FontAwesomeIcon icon={faLightbulb} className="w-10 h-10 text-primary"/>
</div>
<IconContainer icon={Lightbulb} size="lg" shape="rounded"/>
<p className="text-xl font-['ADLaM_Display'] text-center mb-3">{t('quillSense.needSubscription')}</p>
<p className="text-lg text-muted text-center max-w-md leading-relaxed">{t('quillSense.subscriptionDescription')}</p>
</div>
@@ -128,4 +109,4 @@ export default function QuillSenseComponent() {
}
</div>
);
}
}

135
components/quillsense/modes/Conjugator.tsx
View File

@@ -1,41 +1,24 @@
import {AlertContext} from "@/context/AlertContext";
import {SessionContext} from "@/context/SessionContext";
import System from "@/lib/models/System";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {apiPost} from '@/lib/api/client';
import {ChangeEvent, JSX, useContext, useState} from "react";
import InputField from "@/components/form/InputField";
import {faLanguage, faLock, faMagnifyingGlass} from "@fortawesome/free-solid-svg-icons";
import {Languages, Search} from "lucide-react";
import TextInput from "@/components/form/TextInput";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {LangContext, LangContextProps} from "@/context/LangContext";
import {useTranslations} from "next-intl";
import {AIVerbConjugation} from "@/lib/models/QuillSense";
import {useTranslations} from '@/lib/i18n';
import {AIVerbConjugation, ConjugationResponse, ConjugationTenses} from "@/lib/types/quillsense";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
interface ConjugationTenses {
[tense: string]: {
firstPersonSingular?: string;
secondPersonSingular?: string;
thirdPersonSingular?: string;
firstPersonPlural?: string;
secondPersonPlural?: string;
thirdPersonPlural?: string;
présent?: string;
passé?: string;
} | string;
}
interface ConjugationResponse {
conjugations: {
[mode: string]: ConjugationTenses;
};
}
import EmptyState from "@/components/ui/EmptyState";
import PulseLoader from "@/components/ui/PulseLoader";
import LockCard from "@/components/ui/LockCard";
export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
const {session} = useContext(SessionContext);
const {errorMessage} = useContext(AlertContext);
const {lang} = useContext<LangContextProps>(LangContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const t = useTranslations();
const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
const [verbToConjugate, setVerbToConjugate] = useState<string>('');
const [inProgress, setInProgress] = useState<boolean>(false);
const [conjugationResponse, setConjugationResponse] = useState<ConjugationResponse | null>(null);
@@ -46,7 +29,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
}
setInProgress(true);
try {
const response: AIVerbConjugation = await System.authPostToServer<AIVerbConjugation>(
const response: AIVerbConjugation = await apiPost<AIVerbConjugation>(
`quillsense/verb-conjugation`,
{verb: verbToConjugate},
session.accessToken,
@@ -61,7 +44,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
} else {
setTotalCredits(response.totalPrice)
}
setConjugationResponse(response.data as ConjugationResponse);
setConjugationResponse(response.data);
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
@@ -77,14 +60,14 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
if (typeof conjugations === 'string') {
return (
<div key={tense} className="mb-4">
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<div className="bg-tertiary rounded-xl p-4">
<span className="text-text-primary">{conjugations}</span>
</div>
</div>
);
}
if (typeof conjugations === 'object' && conjugations !== null) {
const hasPersonConjugations = conjugations.firstPersonSingular || conjugations.secondPersonSingular ||
const hasPersonConjugations: string | undefined = conjugations.firstPersonSingular || conjugations.secondPersonSingular ||
conjugations.thirdPersonSingular || conjugations.firstPersonPlural ||
conjugations.secondPersonPlural || conjugations.thirdPersonPlural;
if (hasPersonConjugations) {
@@ -93,7 +76,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
<h4 className="text-primary font-medium mb-3 capitalize">
{tense}
</h4>
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<div className="bg-tertiary rounded-xl p-4">
<div className="grid grid-cols-2 gap-2">
{conjugations.firstPersonSingular && (
<div className="flex">
@@ -144,17 +127,18 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
if (mode === 'infinitif' || mode === 'participe') {
return (
<div key={mode} className="mb-8">
<h3 className="text-lg font-['ADLaM_Display'] text-primary mb-4 capitalize border-b border-primary/20 pb-2">
<h3 className="text-lg font-['ADLaM_Display'] text-primary mb-4 capitalize border-b border-primary pb-2">
{mode}
</h3>
<div className="ml-4 space-y-4">
{Object.entries(tenses).map(([tense, conjugation]: [string, string | ConjugationTenses[string]]) => (
{Object.entries(tenses).map(([tense, conjugation]: [string, string | ConjugationTenses[string]]): JSX.Element => (
<div key={tense} className="mb-4">
<h4 className="text-primary font-medium mb-2 capitalize">
{tense}
</h4>
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<span className="text-text-primary">{conjugation as string}</span>
<div className="bg-tertiary rounded-xl p-4">
<span
className="text-text-primary">{typeof conjugation === 'string' ? conjugation : ''}</span>
</div>
</div>
))}
@@ -164,11 +148,11 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
}
return (
<div key={mode} className="mb-8">
<h3 className="text-xl font-semibold text-primary mb-4 capitalize border-b border-primary/20 pb-2">
<h3 className="text-xl font-semibold text-primary mb-4 capitalize border-b border-primary pb-2">
{mode}
</h3>
<div className="ml-4">
{Object.entries(tenses).map(([tense, conjugations]) =>
{Object.entries(tenses).map(([tense, conjugations]: [string, ConjugationTenses[string]]): JSX.Element =>
renderConjugationTable(tense, conjugations)
)}
</div>
@@ -177,84 +161,47 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
}
if (!hasKey) {
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
<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('conjugator.locked.title')}
</h3>
<p className="text-muted leading-relaxed text-lg">
{t('conjugator.locked.description')}
</p>
</div>
</div>
</div>
</div>
);
return <LockCard title={t('conjugator.locked.title')} description={t('conjugator.locked.description')}/>;
}
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
<div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
<div className="flex flex-col h-full overflow-hidden">
<div className="p-5 bg-darkest-background">
<InputField
input={
<TextInput
value={verbToConjugate}
setValue={(e: ChangeEvent<HTMLInputElement>) => setVerbToConjugate(e.target.value)}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setVerbToConjugate(e.target.value)}
placeholder={t('conjugator.input.placeholder')}
/>
}
icon={faLanguage}
icon={Languages}
fieldName={t('conjugator.input.label')}
actionLabel={t('conjugator.input.action')}
actionIcon={faMagnifyingGlass}
actionIcon={Search}
action={async (): Promise<void> => handleConjugation()}
/>
</div>
<div className="flex-1 overflow-y-auto p-4">
{inProgress && (
<div className="flex items-center justify-center h-32">
<div className="animate-pulse flex flex-col items-center">
<div
className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
<p className="text-text-secondary">{t('conjugator.loading')}</p>
</div>
</div>
<PulseLoader text={t('conjugator.loading')}/>
)}
{!inProgress && conjugationResponse && (
<div
className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
<div className="bg-primary/10 p-4 border-b border-secondary/30">
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<FontAwesomeIcon icon={faLanguage} className="text-primary w-6 h-6"/>
<span>{verbToConjugate}</span>
</h3>
</div>
<div className="p-5">
{Object.entries(conjugationResponse.conjugations).map(([mode, tenses]: [string, ConjugationTenses]) =>
<div className="space-y-4">
<h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<Languages className="text-primary w-5 h-5" strokeWidth={1.75}/>
<span>{verbToConjugate}</span>
</h3>
<div>
{Object.entries(conjugationResponse.conjugations).map(([mode, tenses]: [string, ConjugationTenses]): JSX.Element =>
renderMode(mode, tenses)
)}
</div>
</div>
)}
{!inProgress && !conjugationResponse && (
<div className="h-full flex flex-col items-center justify-center text-center p-8">
<div
className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
<FontAwesomeIcon icon={faLanguage} className="text-primary w-10 h-10"/>
</div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t('conjugator.welcome.title')}</h3>
<p className="text-muted max-w-md text-lg leading-relaxed">
{t('conjugator.welcome.description')}
</p>
</div>
<EmptyState icon={Languages} title={t('conjugator.welcome.title')}
description={t('conjugator.welcome.description')}/>
)}
</div>
</div>

133
components/quillsense/modes/Dictionary.tsx
View File

@@ -1,22 +1,24 @@
import {AlertContext} from "@/context/AlertContext";
import {SessionContext} from "@/context/SessionContext";
import System from "@/lib/models/System";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {apiPost} from '@/lib/api/client';
import {ChangeEvent, JSX, useContext, useState} from "react";
import {AIDictionary, DictionaryAIResponse} from "@/lib/models/QuillSense";
import {AIDictionary, DictionaryAIResponse} from "@/lib/types/quillsense";
import InputField from "@/components/form/InputField";
import {faLock, faMagnifyingGlass, faSpellCheck} from "@fortawesome/free-solid-svg-icons";
import {Search, SpellCheck} from "lucide-react";
import TextInput from "@/components/form/TextInput";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useTranslations} from "next-intl";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
import EmptyState from "@/components/ui/EmptyState";
import PulseLoader from "@/components/ui/PulseLoader";
import LockCard from "@/components/ui/LockCard";
export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
const {session} = useContext(SessionContext);
const {errorMessage} = useContext(AlertContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const t = useTranslations();
const {lang} = useContext<LangContextProps>(LangContext)
const {setTotalCredits,setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
const [wordToCheck, setWordToCheck] = useState<string>('');
const [inProgress, setInProgress] = useState<boolean>(false);
const [aiResponse, setAiResponse] = useState<DictionaryAIResponse | null>(null);
@@ -27,7 +29,7 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
}
setInProgress(true);
try {
const response: AIDictionary = await System.authPostToServer<AIDictionary>(
const response: AIDictionary = await apiPost<AIDictionary>(
`quillsense/dictionary`,
{word: wordToCheck},
session.accessToken,
@@ -37,8 +39,8 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
errorMessage(t("dictionary.errorNoResponse"));
return;
}
if (response.useYourKey){
setTotalPrice((prevState:number):number => prevState + response.totalPrice)
if (response.useYourKey) {
setTotalPrice((prevState: number): number => prevState + response.totalPrice)
} else {
setTotalCredits(response.totalPrice)
}
@@ -53,106 +55,65 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
setInProgress(false);
}
}
if (!hasKey) {
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
<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">
Accès requis
</h3>
<p className="text-muted leading-relaxed text-lg">
Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
activer le dictionnaire intelligent.
</p>
</div>
</div>
</div>
</div>
);
return <LockCard title={t('dictionary.locked.title')}
description={t('dictionary.locked.description')}/>;
}
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
<div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
<div className="flex flex-col h-full overflow-hidden">
<div className="p-5 bg-darkest-background">
<InputField
input={
<TextInput
value={wordToCheck}
setValue={(e: ChangeEvent<HTMLInputElement>) => setWordToCheck(e.target.value)}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setWordToCheck(e.target.value)}
placeholder={t("dictionary.searchPlaceholder")}
/>
}
icon={faSpellCheck}
icon={SpellCheck}
fieldName={t("dictionary.fieldName")}
actionLabel={t("dictionary.searchAction")}
actionIcon={faMagnifyingGlass}
actionIcon={Search}
action={async (): Promise<void> => handleSearch()}
/>
</div>
<div className="flex-1 overflow-y-auto p-4">
{inProgress && (
<div className="flex items-center justify-center h-32">
<div className="animate-pulse flex flex-col items-center">
<div
className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
<p className="text-text-secondary">{t("dictionary.loading")}</p>
</div>
</div>
<PulseLoader text={t("dictionary.loading")}/>
)}
{!inProgress && aiResponse && (
<div
className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
<div className="bg-primary/10 p-4 border-b border-secondary/30">
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<FontAwesomeIcon icon={faSpellCheck} className="text-primary w-6 h-6"/>
<span>{wordToCheck}</span>
</h3>
<div className="space-y-4">
<h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<SpellCheck className="text-primary w-5 h-5" strokeWidth={1.75}/>
<span>{wordToCheck}</span>
</h3>
<div className="bg-tertiary rounded-xl p-4">
<h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.definitionHeading")}</h4>
<p className="text-text-primary text-sm leading-relaxed">{aiResponse.definition}</p>
</div>
<div className="p-5 space-y-5">
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.definitionHeading")}</h4>
<p className="text-text-primary leading-relaxed">{aiResponse.definition}</p>
</div>
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.exampleHeading")}</h4>
<p className="text-text-primary italic leading-relaxed">{aiResponse.example}</p>
</div>
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.literaryUsageHeading")}</h4>
<p className="text-text-primary leading-relaxed">{aiResponse.literaryUsage}</p>
</div>
<div className="bg-tertiary rounded-xl p-4">
<h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.exampleHeading")}</h4>
<p className="text-text-primary text-sm italic leading-relaxed">{aiResponse.example}</p>
</div>
<div className="bg-tertiary rounded-xl p-4">
<h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.literaryUsageHeading")}</h4>
<p className="text-text-primary text-sm leading-relaxed">{aiResponse.literaryUsage}</p>
</div>
</div>
)}
{!inProgress && !aiResponse && (
<div className="h-full flex flex-col items-center justify-center text-center p-8">
<div
className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
<FontAwesomeIcon icon={faSpellCheck} className="text-primary w-10 h-10"/>
</div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t("dictionary.fieldName")}</h3>
<p className="text-muted max-w-md text-lg leading-relaxed">
{t("dictionary.description")}
</p>
</div>
<EmptyState icon={SpellCheck} title={t("dictionary.fieldName")}
description={t("dictionary.description")}/>
)}
</div>
</div>
);
}
}

173
components/quillsense/modes/InspireMe.tsx
View File

@@ -1,34 +1,37 @@
import {ChangeEvent, useContext, useEffect, useState} from "react";
import {SessionContext} from "@/context/SessionContext";
import {BookContext} from "@/context/BookContext";
import {ChapterContext} from "@/context/ChapterContext";
import {AlertContext} from "@/context/AlertContext";
import {AIInspire, InspirationAIIdea} from "@/lib/models/QuillSense";
import System from "@/lib/models/System";
import React, {ChangeEvent, useContext, useEffect, useState} from "react";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {AIInspire, InspirationAIIdea} from "@/lib/types/quillsense";
import {apiPost} from '@/lib/api/client';
import {htmlToText} from '@/lib/utils/html';
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import {faArrowRight, faLightbulb, faLink, faLock} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useTranslations} from "next-intl";
import {ArrowRight, Lightbulb, Link} from "lucide-react";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
import {EditorContext} from "@/context/EditorContext";
import {EditorContext, EditorContextProps} from "@/context/EditorContext";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
import EmptyState from "@/components/ui/EmptyState";
import PulseLoader from "@/components/ui/PulseLoader";
import LockCard from "@/components/ui/LockCard";
export default function InspireMe({hasKey}: { hasKey: boolean }) {
export default function InspireMe({hasKey}: { hasKey: boolean }): React.JSX.Element {
const t = useTranslations();
const {session} = useContext(SessionContext);
const {editor} = useContext(EditorContext);
const {book} = useContext(BookContext);
const {chapter} = useContext(ChapterContext);
const {errorMessage} = useContext(AlertContext);
const {lang} = useContext<LangContextProps>(LangContext);
const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {editor}: EditorContextProps = useContext<EditorContextProps>(EditorContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
const [prompt, setPrompt] = useState<string>('');
const [hideHelp, setHideHelp] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const [inspirations, setInspirations] = useState<InspirationAIIdea[]>([]);
useEffect((): void => {
if (prompt.trim().length > 0) {
setHideHelp(true);
@@ -36,7 +39,7 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
setHideHelp(false);
}
}, [prompt]);
async function handleInspireMe(): Promise<void> {
if (prompt.trim() === '') {
errorMessage(t("inspireMe.emptyPromptError"));
@@ -44,36 +47,34 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
}
setLoading(true);
setInspirations([]);
try {
let content: string = '';
if (editor) {
try {
content = editor.getHTML();
content = System.htmlToText(content);
content = htmlToText(content);
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage('Erreur lors de la récupération du contenu.');
console.error('Erreur lors de la récupération du contenu.');
errorMessage(t('inspireMe.error.contentRetrieval'));
} else {
errorMessage('Erreur inconnue lors de la récupération du contenu.')
console.error('Erreur inconnue lors de la récupération du contenu.');
errorMessage(t('inspireMe.error.contentRetrievalUnknown'));
}
setLoading(false);
return;
}
}
if (!book?.bookId) {
errorMessage('Aucun livre sélectionné.');
errorMessage(t('inspireMe.error.noBook'));
setLoading(false);
return;
}
if (chapter?.chapterOrder === undefined) {
errorMessage('Aucun chapitre sélectionné.');
errorMessage(t('inspireMe.error.noChapter'));
setLoading(false);
return;
}
const inspire: AIInspire = await System.authPostToServer<AIInspire>(
const inspire: AIInspire = await apiPost<AIInspire>(
`quillsense/inspire`,
{
prompt: prompt,
@@ -94,106 +95,72 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
if (e instanceof Error) {
errorMessage(e.message);
} else {
errorMessage(`Une erreur inconnue est survenue lors de la génération.`);
errorMessage(t('inspireMe.error.unknown'));
}
} finally {
setLoading(false);
}
}
if (!hasKey) {
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
<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">
Accès requis
</h3>
<p className="text-muted leading-relaxed text-lg">
Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
activer le mode "Inspire-moi".
</p>
</div>
</div>
</div>
</div>
);
return <LockCard title={t('inspireMe.locked.title')}
description={t('inspireMe.locked.description')}/>;
}
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
<div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
<div className="flex flex-col h-full overflow-hidden">
<div className="p-5 bg-darkest-background">
<InputField
input={
<TextInput
value={prompt}
setValue={(e: ChangeEvent<HTMLInputElement>) => setPrompt(e.target.value)}
setValue={(e: ChangeEvent<HTMLInputElement>): void => setPrompt(e.target.value)}
placeholder={t("inspireMe.inputPlaceholder")}
/>
}
icon={faLightbulb}
icon={Lightbulb}
fieldName={t("inspireMe.fieldName")}
actionLabel={t("inspireMe.actionLabel")}
actionIcon={faLightbulb}
action={async () => handleInspireMe()}
actionIcon={Lightbulb}
action={async (): Promise<void> => handleInspireMe()}
/>
</div>
<div className="flex-1 overflow-y-auto p-4">
{loading && (
<div className="flex items-center justify-center h-32">
<div className="animate-pulse flex flex-col items-center">
<div
className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
<p className="text-text-secondary">{t("inspireMe.loading")}</p>
</div>
</div>
<PulseLoader text={t("inspireMe.loading")}/>
)}
{!loading && inspirations.length > 0 && (
<div
className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
<div className="bg-primary/10 p-4 border-b border-secondary/30">
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<FontAwesomeIcon icon={faLightbulb} className="text-primary w-6 h-6"/>
<span>{t("inspireMe.resultHeading")}</span>
</h3>
</div>
<div className="space-y-4">
<h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<Lightbulb className="text-primary w-5 h-5" strokeWidth={1.75}/>
<span>{t("inspireMe.resultHeading")}</span>
</h3>
<div className="p-5 space-y-6">
{inspirations.map((idea, index) => (
<div className="space-y-4">
{inspirations.map((idea: InspirationAIIdea, index: number): React.JSX.Element => (
<div key={index}
className="bg-secondary/20 rounded-xl shadow-md border border-secondary/30 hover:border-primary/50 hover:shadow-lg hover:scale-102 transition-all duration-200 overflow-hidden">
<div className="p-4 bg-primary/10 border-b border-secondary/30">
<h4 className="text-lg font-semibold text-primary">{idea.idea}</h4>
</div>
className="bg-tertiary rounded-xl hover:bg-secondary transition-colors duration-150 overflow-hidden">
<div className="p-4">
<div className="mb-4">
<div className="flex items-center mb-1.5 text-sm text-text-secondary">
<FontAwesomeIcon icon={faArrowRight}
className="mr-1.5 text-primary w-5 h-5"/>
<h4 className="text-sm font-semibold text-primary mb-3">{idea.idea}</h4>
<div className="mb-3">
<div className="flex items-center mb-1.5 text-xs text-text-secondary">
<ArrowRight className="mr-1.5 text-primary w-4 h-4" strokeWidth={1.75}/>
<span>{t("inspireMe.justificationHeading")}</span>
</div>
<p className="text-text-primary pl-5">{idea.reason}</p>
<p className="text-text-primary text-sm pl-5">{idea.reason}</p>
</div>
<div>
<div className="flex items-center mb-1.5 text-sm text-text-secondary">
<FontAwesomeIcon icon={faLink} className="mr-1.5 text-primary w-5 h-5"/>
<div className="flex items-center mb-1.5 text-xs text-text-secondary">
<Link className="mr-1.5 text-primary w-4 h-4" strokeWidth={1.75}/>
<span>{t("inspireMe.linkHeading")}</span>
</div>
<div className="pl-5">
<span
className="text-xs bg-secondary/50 text-text-secondary px-2.5 py-1 rounded-lg inline-block border border-secondary/50">
className="text-xs bg-secondary text-text-secondary px-2.5 py-1 rounded-lg inline-block">
{idea.relatedTo}
</span>
</div>
@@ -204,20 +171,12 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
</div>
</div>
)}
{!loading && inspirations.length === 0 && (
<div className="h-full flex flex-col items-center justify-center text-center p-8">
<div
className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
<FontAwesomeIcon icon={faLightbulb} className="text-primary w-10 h-10"/>
</div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t("inspireMe.emptyHeading")}</h3>
<p className="text-muted max-w-md text-lg leading-relaxed">
{t("inspireMe.emptyDescription")}
</p>
</div>
<EmptyState icon={Lightbulb} title={t("inspireMe.emptyHeading")}
description={t("inspireMe.emptyDescription")}/>
)}
</div>
</div>
);
}
}

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/>}
</>
);
}
}

52
components/quillsense/modes/QuillList.tsx
View File

@@ -1,20 +1,24 @@
import {faRobot} from '@fortawesome/free-solid-svg-icons';
import {useContext, useEffect, useState} from 'react';
import {SessionContext} from "@/context/SessionContext";
import {ConversationProps} from "@/lib/models/QuillSense";
import System from "@/lib/models/System";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Bot} from 'lucide-react';
import React, {useContext, useEffect, useState} from 'react';
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {ConversationProps} from "@/lib/types/quillsense";
import {apiGet} from '@/lib/api/client';
import {BookContext, BookContextProps} from "@/context/BookContext";
import {LangContext} from "@/context/LangContext";
import {LangContext, LangContextProps} from "@/context/LangContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {useTranslations} from '@/lib/i18n';
import Badge from "@/components/ui/Badge";
interface QuillListProps {
handleSelectConversation: (itemId: string) => void;
}
export default function QuillList({handleSelectConversation}: QuillListProps) {
const {session} = useContext(SessionContext);
const {book} = useContext<BookContextProps>(BookContext);
const {lang} = useContext(LangContext);
export default function QuillList({handleSelectConversation}: QuillListProps): React.JSX.Element {
const t = useTranslations();
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const [conversations, setConversations] = useState<ConversationProps[]>([]);
@@ -24,7 +28,7 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
async function getConversations(): Promise<void> {
try {
const response: ConversationProps[] = await System.authGetQueryToServer<ConversationProps[]>(
const response: ConversationProps[] = await apiGet<ConversationProps[]>(
`quillsense/conversations`,
session.accessToken,
lang,
@@ -35,8 +39,12 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
if (response.length > 0) {
setConversations(response);
}
} catch (e) {
console.error(e);
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
} else {
errorMessage(t('quillList.error.unknown'));
}
}
}
@@ -45,7 +53,7 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
case 1:
return 'bg-muted';
case 2:
return 'bg-blue-500';
return 'bg-accent-blue';
case 3:
return 'bg-primary';
case 4:
@@ -57,25 +65,25 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
return (
<div className="flex-1 overflow-y-auto p-2">
{conversations.map((conversation: ConversationProps) => (
{conversations.map((conversation: ConversationProps): React.JSX.Element => (
<div key={conversation.id}
className="flex items-center justify-between p-3 mb-2 rounded-xl bg-secondary/30 hover:bg-secondary hover:shadow-md cursor-pointer transition-all duration-200 border border-secondary/50 hover:border-secondary hover:scale-102"
className="flex items-center justify-between p-3 mb-2 rounded-xl bg-tertiary hover:bg-secondary cursor-pointer transition-colors duration-150"
onClick={(): void => handleSelectConversation(conversation.id)}
>
<div className="flex items-center gap-3">
<div
className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)} shadow-sm`}></div>
<FontAwesomeIcon icon={faRobot} className="text-primary w-5 h-5"/>
className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)}`}></div>
<Bot className="text-primary w-5 h-5" strokeWidth={1.75}/>
<div>
<span className="text-text-primary font-medium">{conversation.title || "Sans titre"}</span>
<span
className="text-text-primary font-medium">{conversation.title || t('quillList.untitled')}</span>
{conversation.startDate && (
<p className="text-xs text-muted mt-0.5">{conversation.startDate}</p>
)}
</div>
</div>
{conversation.mode && (
<span
className="text-xs bg-primary/20 text-primary px-2.5 py-1 rounded-lg font-medium border border-primary/30">{conversation.mode}</span>
<Badge size="sm">{conversation.mode}</Badge>
)}
</div>
))}

152
components/quillsense/modes/Synonyms.tsx
View File

@@ -1,26 +1,28 @@
import {JSX, useContext, useState} from "react";
import {SessionContext} from "@/context/SessionContext";
import {AlertContext} from "@/context/AlertContext";
import {AISynonyms, SynonymAI, SynonymsAIResponse} from "@/lib/models/QuillSense";
import System from "@/lib/models/System";
import {faExchangeAlt, faLock, faSearch} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useTranslations} from "next-intl";
import React, {JSX, useContext, useState} from "react";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {AISynonyms, SynonymAI, SynonymsAIResponse} from "@/lib/types/quillsense";
import {apiPost} from '@/lib/api/client';
import {ArrowLeftRight, Search} from "lucide-react";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
import SearchInputWithSelect from "@/components/form/SearchInputWithSelect";
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
import EmptyState from "@/components/ui/EmptyState";
import PulseLoader from "@/components/ui/PulseLoader";
import LockCard from "@/components/ui/LockCard";
export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
const t = useTranslations();
const {session} = useContext(SessionContext);
const {lang} = useContext<LangContextProps>(LangContext);
const {errorMessage} = useContext(AlertContext);
const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
const [type, setType] = useState<string>('synonymes')
const [wordToCheck, setWordToCheck] = useState<string>('')
const [inProgress, setInProgress] = useState<boolean>(false);
const [aiResponse, setAiResponse] = useState<SynonymsAIResponse | null>(null)
async function handleSearch(): Promise<void> {
if (wordToCheck.trim() === '') {
errorMessage(t("synonyms.enterWordError"));
@@ -28,7 +30,7 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
}
setInProgress(true);
try {
const response: AISynonyms = await System.authPostToServer<AISynonyms>(`quillsense/synonyms`, {
const response: AISynonyms = await apiPost<AISynonyms>(`quillsense/synonyms`, {
word: wordToCheck,
type: type
}, session.accessToken, lang);
@@ -52,50 +54,17 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
setInProgress(false);
}
}
if (!hasKey) {
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
<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">
Accès requis
</h3>
<p className="text-muted leading-relaxed text-lg">
Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
activer le dictionnaire intelligent.
</p>
</div>
</div>
</div>
</div>
);
return <LockCard title={t('synonyms.locked.title')}
description={t('synonyms.locked.description')}/>;
}
return (
<div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
<div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
<div className="flex flex-col h-full overflow-hidden">
<div className="p-5 bg-darkest-background">
<div className="mb-3">
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shadow-sm">
<FontAwesomeIcon icon={faExchangeAlt} className="text-primary w-6 h-6"/>
</div>
<div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("synonyms.heading")}</h3>
<p className="text-sm text-muted">{t("synonyms.subheading")}</p>
</div>
</div>
<div className="mb-3">
<SearchInputWithSelect
<SearchInputWithSelect
selectValue={type}
setSelectValue={setType}
selectOptions={[
@@ -105,74 +74,53 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
inputValue={wordToCheck}
setInputValue={setWordToCheck}
inputPlaceholder={t("synonyms.inputPlaceholder")}
searchIcon={faSearch}
searchIcon={Search}
onSearch={handleSearch}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.key === 'Enter') {
handleSearch();
}
}}
/>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-4">
{inProgress && (
<div className="flex items-center justify-center h-32">
<div className="animate-pulse flex flex-col items-center">
<div
className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
<p className="text-text-secondary">{t("synonyms.loading")}</p>
</div>
</div>
<PulseLoader text={t("synonyms.loading")}/>
)}
{!inProgress && aiResponse && aiResponse.words.length > 0 && (
<div
className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
<div className="bg-primary/10 p-4 border-b border-secondary/30">
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<FontAwesomeIcon icon={faExchangeAlt} className="text-primary w-6 h-6"/>
<span>
{type === 'synonymes'
? t("synonyms.resultSynonyms", {word: wordToCheck})
: t("synonyms.resultAntonyms", {word: wordToCheck})}
</span>
</h3>
</div>
<div className="space-y-4">
<h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
<ArrowLeftRight className="text-primary w-5 h-5" strokeWidth={1.75}/>
<span>
{type === 'synonymes'
? t("synonyms.resultSynonyms", {word: wordToCheck})
: t("synonyms.resultAntonyms", {word: wordToCheck})}
</span>
</h3>
<div className="p-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{aiResponse.words.map((item: SynonymAI, index: number) => (
<div key={index}
className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 hover:border-primary/50 hover:shadow-md hover:scale-102 transition-all duration-200">
<div className="font-semibold text-primary mb-1.5">{item.word}</div>
<div className="text-sm text-muted leading-relaxed">{item.context}</div>
</div>
))}
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{aiResponse.words.map((item: SynonymAI, index: number): React.JSX.Element => (
<div key={index}
className="bg-tertiary rounded-xl p-4 hover:bg-secondary transition-colors duration-150">
<div className="font-semibold text-primary text-sm mb-1.5">{item.word}</div>
<div className="text-xs text-muted leading-relaxed">{item.context}</div>
</div>
))}
</div>
</div>
)}
{!inProgress && (!aiResponse || aiResponse.words.length === 0) && (
<div className="h-full flex flex-col items-center justify-center text-center p-8">
<div
className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
<FontAwesomeIcon icon={faExchangeAlt} className="w-10 h-10 text-primary"/>
</div>
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">
{type === 'synonymes' ? t("synonyms.emptySynonymsTitle") : t("synonyms.emptyAntonymsTitle")}
</h3>
<p className="text-muted max-w-md text-lg leading-relaxed">
{type === 'synonymes'
? t("synonyms.emptySynonymsDescription")
: t("synonyms.emptyAntonymsDescription")}
</p>
</div>
<EmptyState
icon={ArrowLeftRight}
title={type === 'synonymes' ? t("synonyms.emptySynonymsTitle") : t("synonyms.emptyAntonymsTitle")}
description={type === 'synonymes' ? t("synonyms.emptySynonymsDescription") : t("synonyms.emptyAntonymsDescription")}
/>
)}
</div>
</div>
);
}
}