Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
131
components/quillsense/QuillSenseComponent.tsx
Normal file
131
components/quillsense/QuillSenseComponent.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React, {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 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 Conjugator from "@/components/quillsense/modes/Conjugator";
|
||||
|
||||
interface QSOption {
|
||||
view: QSView;
|
||||
icon: IconDefinition;
|
||||
}
|
||||
|
||||
export default function QuillSenseComponent() {
|
||||
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 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},
|
||||
];
|
||||
|
||||
function handleSetView(view: QSView): void {
|
||||
setView(view);
|
||||
}
|
||||
|
||||
function handleSelectConversation(conversationId: string) {
|
||||
setSelectedConversation(conversationId);
|
||||
setView('chat');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
|
||||
<div
|
||||
className="px-3 py-3 flex items-center justify-between border-b border-secondary/50 bg-secondary/30 shadow-sm">
|
||||
<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>
|
||||
<div className="flex items-center gap-1">
|
||||
{
|
||||
qsOptions.map((option: QSOption) => (
|
||||
<button
|
||||
key={option.view}
|
||||
disabled={!isBringYourKeys && 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>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
isBringYourKeys || subLevel >= 1 ? (
|
||||
<>
|
||||
{view === 'list' ? (
|
||||
<QuillList handleSelectConversation={handleSelectConversation}/>
|
||||
) : view === 'chat' ? (
|
||||
<QuillConversation
|
||||
disabled={!isBringYourKeys && subLevel < 2}
|
||||
selectedConversation={selectedConversation}
|
||||
setSelectConversation={setSelectedConversation}
|
||||
/>
|
||||
) : view === 'dictionary' ? (
|
||||
<Dictionary hasKey={hasAccess}/>
|
||||
) : view === 'synonyms' ? (
|
||||
<Synonyms hasKey={hasAccess}/>
|
||||
) : view === 'conjugator' ? (
|
||||
<Conjugator hasKey={hasAccess}/>
|
||||
) : view === 'inspiration' ? (
|
||||
<InspireMe hasKey={hasAccess}/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
262
components/quillsense/modes/Conjugator.tsx
Normal file
262
components/quillsense/modes/Conjugator.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import System from "@/lib/models/System";
|
||||
import {ChangeEvent, JSX, useContext, useState} from "react";
|
||||
import InputField from "@/components/form/InputField";
|
||||
import {faLanguage, faLock, faMagnifyingGlass} from "@fortawesome/free-solid-svg-icons";
|
||||
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 {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;
|
||||
};
|
||||
}
|
||||
|
||||
export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage} = useContext(AlertContext);
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const t = useTranslations();
|
||||
const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
|
||||
const [verbToConjugate, setVerbToConjugate] = useState<string>('');
|
||||
const [inProgress, setInProgress] = useState<boolean>(false);
|
||||
const [conjugationResponse, setConjugationResponse] = useState<ConjugationResponse | null>(null);
|
||||
|
||||
async function handleConjugation(): Promise<void> {
|
||||
if (verbToConjugate.trim() === '') {
|
||||
return;
|
||||
}
|
||||
setInProgress(true);
|
||||
try {
|
||||
const response: AIVerbConjugation = await System.authPostToServer<AIVerbConjugation>(
|
||||
`quillsense/verb-conjugation`,
|
||||
{verb: verbToConjugate},
|
||||
session.accessToken,
|
||||
lang
|
||||
);
|
||||
if (!response) {
|
||||
errorMessage(t("conjugator.error.noResponse"));
|
||||
return;
|
||||
}
|
||||
if (response.useYourKey) {
|
||||
setTotalPrice((prevState: number): number => prevState + response.totalPrice)
|
||||
} else {
|
||||
setTotalCredits(response.totalPrice)
|
||||
}
|
||||
setConjugationResponse(response.data as ConjugationResponse);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("conjugator.error.unknown"));
|
||||
}
|
||||
} finally {
|
||||
setInProgress(false);
|
||||
}
|
||||
}
|
||||
|
||||
function renderConjugationTable(tense: string, conjugations: ConjugationTenses[string]): 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">
|
||||
<span className="text-text-primary">{conjugations}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (typeof conjugations === 'object' && conjugations !== null) {
|
||||
const hasPersonConjugations = conjugations.firstPersonSingular || conjugations.secondPersonSingular ||
|
||||
conjugations.thirdPersonSingular || conjugations.firstPersonPlural ||
|
||||
conjugations.secondPersonPlural || conjugations.thirdPersonPlural;
|
||||
if (hasPersonConjugations) {
|
||||
return (
|
||||
<div key={tense} className="mb-6">
|
||||
<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="grid grid-cols-2 gap-2">
|
||||
{conjugations.firstPersonSingular && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.je')}</span>
|
||||
<span className="text-text-primary">{conjugations.firstPersonSingular}</span>
|
||||
</div>
|
||||
)}
|
||||
{conjugations.firstPersonPlural && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.nous')}</span>
|
||||
<span className="text-text-primary">{conjugations.firstPersonPlural}</span>
|
||||
</div>
|
||||
)}
|
||||
{conjugations.secondPersonSingular && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.tu')}</span>
|
||||
<span className="text-text-primary">{conjugations.secondPersonSingular}</span>
|
||||
</div>
|
||||
)}
|
||||
{conjugations.secondPersonPlural && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.vous')}</span>
|
||||
<span className="text-text-primary">{conjugations.secondPersonPlural}</span>
|
||||
</div>
|
||||
)}
|
||||
{conjugations.thirdPersonSingular && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.il')}</span>
|
||||
<span className="text-text-primary">{conjugations.thirdPersonSingular}</span>
|
||||
</div>
|
||||
)}
|
||||
{conjugations.thirdPersonPlural && (
|
||||
<div className="flex">
|
||||
<span className="text-text-secondary w-20">{t('conjugator.persons.ils')}</span>
|
||||
<span className="text-text-primary">{conjugations.thirdPersonPlural}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <div key={tense}></div>;
|
||||
}
|
||||
|
||||
function renderMode(mode: string, tenses: ConjugationTenses): 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">
|
||||
{mode}
|
||||
</h3>
|
||||
<div className="ml-4 space-y-4">
|
||||
{Object.entries(tenses).map(([tense, conjugation]: [string, string | ConjugationTenses[string]]) => (
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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">
|
||||
{mode}
|
||||
</h3>
|
||||
<div className="ml-4">
|
||||
{Object.entries(tenses).map(([tense, conjugations]) =>
|
||||
renderConjugationTable(tense, conjugations)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<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">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={verbToConjugate}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setVerbToConjugate(e.target.value)}
|
||||
placeholder={t('conjugator.input.placeholder')}
|
||||
/>
|
||||
}
|
||||
icon={faLanguage}
|
||||
fieldName={t('conjugator.input.label')}
|
||||
actionLabel={t('conjugator.input.action')}
|
||||
actionIcon={faMagnifyingGlass}
|
||||
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>
|
||||
)}
|
||||
{!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]) =>
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
158
components/quillsense/modes/Dictionary.tsx
Normal file
158
components/quillsense/modes/Dictionary.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import System from "@/lib/models/System";
|
||||
import {ChangeEvent, JSX, useContext, useState} from "react";
|
||||
import {AIDictionary, DictionaryAIResponse} from "@/lib/models/QuillSense";
|
||||
import InputField from "@/components/form/InputField";
|
||||
import {faLock, faMagnifyingGlass, faSpellCheck} from "@fortawesome/free-solid-svg-icons";
|
||||
import TextInput from "@/components/form/TextInput";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
|
||||
|
||||
export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage} = useContext(AlertContext);
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext)
|
||||
const {setTotalCredits,setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
|
||||
const [wordToCheck, setWordToCheck] = useState<string>('');
|
||||
const [inProgress, setInProgress] = useState<boolean>(false);
|
||||
const [aiResponse, setAiResponse] = useState<DictionaryAIResponse | null>(null);
|
||||
|
||||
async function handleSearch(): Promise<void> {
|
||||
if (wordToCheck.trim() === '') {
|
||||
return;
|
||||
}
|
||||
setInProgress(true);
|
||||
try {
|
||||
const response: AIDictionary = await System.authPostToServer<AIDictionary>(
|
||||
`quillsense/dictionary`,
|
||||
{word: wordToCheck},
|
||||
session.accessToken,
|
||||
lang
|
||||
);
|
||||
if (!response) {
|
||||
errorMessage(t("dictionary.errorNoResponse"));
|
||||
return;
|
||||
}
|
||||
if (response.useYourKey){
|
||||
setTotalPrice((prevState:number):number => prevState + response.totalPrice)
|
||||
} else {
|
||||
setTotalCredits(response.totalPrice)
|
||||
}
|
||||
setAiResponse(response.data);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("dictionary.errorUnknown"));
|
||||
}
|
||||
} finally {
|
||||
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 (
|
||||
<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">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={wordToCheck}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setWordToCheck(e.target.value)}
|
||||
placeholder={t("dictionary.searchPlaceholder")}
|
||||
/>
|
||||
}
|
||||
icon={faSpellCheck}
|
||||
fieldName={t("dictionary.fieldName")}
|
||||
actionLabel={t("dictionary.searchAction")}
|
||||
actionIcon={faMagnifyingGlass}
|
||||
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>
|
||||
)}
|
||||
|
||||
{!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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
223
components/quillsense/modes/InspireMe.tsx
Normal file
223
components/quillsense/modes/InspireMe.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import React, {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 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 {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import {EditorContext} from "@/context/EditorContext";
|
||||
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
|
||||
|
||||
export default function InspireMe({hasKey}: { hasKey: boolean }) {
|
||||
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 [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);
|
||||
} else {
|
||||
setHideHelp(false);
|
||||
}
|
||||
}, [prompt]);
|
||||
|
||||
async function handleInspireMe(): Promise<void> {
|
||||
if (prompt.trim() === '') {
|
||||
errorMessage(t("inspireMe.emptyPromptError"));
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setInspirations([]);
|
||||
|
||||
try {
|
||||
let content: string = '';
|
||||
if (editor) {
|
||||
try {
|
||||
content = editor.getHTML();
|
||||
content = System.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.');
|
||||
} else {
|
||||
errorMessage('Erreur inconnue lors de la récupération du contenu.')
|
||||
console.error('Erreur inconnue lors de la récupération du contenu.');
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!book?.bookId) {
|
||||
errorMessage('Aucun livre sélectionné.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
if (chapter?.chapterOrder === undefined) {
|
||||
errorMessage('Aucun chapitre sélectionné.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const inspire: AIInspire = await System.authPostToServer<AIInspire>(
|
||||
`quillsense/inspire`,
|
||||
{
|
||||
prompt: prompt,
|
||||
bookId: book.bookId,
|
||||
chapterOrder: chapter.chapterOrder,
|
||||
currentContent: content,
|
||||
},
|
||||
session.accessToken,
|
||||
lang
|
||||
)
|
||||
if (inspire.useYourKey) {
|
||||
setTotalPrice((prevState: number): number => prevState + inspire.totalPrice)
|
||||
} else {
|
||||
setTotalCredits(inspire.totalPrice)
|
||||
}
|
||||
setInspirations(inspire.data.ideas);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(`Une erreur inconnue est survenue lors de la génération.`);
|
||||
}
|
||||
} 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 (
|
||||
<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">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={prompt}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setPrompt(e.target.value)}
|
||||
placeholder={t("inspireMe.inputPlaceholder")}
|
||||
/>
|
||||
}
|
||||
icon={faLightbulb}
|
||||
fieldName={t("inspireMe.fieldName")}
|
||||
actionLabel={t("inspireMe.actionLabel")}
|
||||
actionIcon={faLightbulb}
|
||||
action={async () => 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>
|
||||
)}
|
||||
|
||||
{!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="p-5 space-y-6">
|
||||
{inspirations.map((idea, index) => (
|
||||
<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>
|
||||
|
||||
<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"/>
|
||||
<span>{t("inspireMe.justificationHeading")}</span>
|
||||
</div>
|
||||
<p className="text-text-primary 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"/>
|
||||
<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">
|
||||
{idea.relatedTo}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
452
components/quillsense/modes/QuillConversation.tsx
Normal file
452
components/quillsense/modes/QuillConversation.tsx
Normal file
@@ -0,0 +1,452 @@
|
||||
import {
|
||||
faBook,
|
||||
faBookOpen,
|
||||
faExclamationTriangle,
|
||||
faLock,
|
||||
faPaperPlane,
|
||||
faRobot,
|
||||
faUser
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import React, {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/>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
84
components/quillsense/modes/QuillList.tsx
Normal file
84
components/quillsense/modes/QuillList.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import {faRobot} from '@fortawesome/free-solid-svg-icons';
|
||||
import React, {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 {BookContext, BookContextProps} from "@/context/BookContext";
|
||||
import {LangContext} from "@/context/LangContext";
|
||||
|
||||
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);
|
||||
|
||||
const [conversations, setConversations] = useState<ConversationProps[]>([]);
|
||||
|
||||
useEffect((): void => {
|
||||
getConversations().then();
|
||||
}, []);
|
||||
|
||||
async function getConversations(): Promise<void> {
|
||||
try {
|
||||
const response: ConversationProps[] = await System.authGetQueryToServer<ConversationProps[]>(
|
||||
`quillsense/conversations`,
|
||||
session.accessToken,
|
||||
lang,
|
||||
{
|
||||
id: book?.bookId,
|
||||
}
|
||||
);
|
||||
if (response.length > 0) {
|
||||
setConversations(response);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusColorClass(status: number): string {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'bg-muted';
|
||||
case 2:
|
||||
return 'bg-blue-500';
|
||||
case 3:
|
||||
return 'bg-primary';
|
||||
case 4:
|
||||
return 'bg-error';
|
||||
default:
|
||||
return 'bg-muted';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto p-2">
|
||||
{conversations.map((conversation: ConversationProps) => (
|
||||
<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"
|
||||
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"/>
|
||||
<div>
|
||||
<span className="text-text-primary font-medium">{conversation.title || "Sans titre"}</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>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
components/quillsense/modes/Synonyms.tsx
Normal file
178
components/quillsense/modes/Synonyms.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import React, {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 {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import SearchInputWithSelect from "@/components/form/SearchInputWithSelect";
|
||||
import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
|
||||
|
||||
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 [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"));
|
||||
return;
|
||||
}
|
||||
setInProgress(true);
|
||||
try {
|
||||
const response: AISynonyms = await System.authPostToServer<AISynonyms>(`quillsense/synonyms`, {
|
||||
word: wordToCheck,
|
||||
type: type
|
||||
}, session.accessToken, lang);
|
||||
if (!response) {
|
||||
errorMessage(t("synonyms.errorNoResponse"));
|
||||
return;
|
||||
}
|
||||
if (response.useYourKey) {
|
||||
setTotalPrice((prevState: number): number => prevState + response.totalPrice)
|
||||
} else {
|
||||
setTotalCredits(response.totalPrice)
|
||||
}
|
||||
setAiResponse(response.data);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("synonyms.errorUnknown"));
|
||||
}
|
||||
} finally {
|
||||
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 (
|
||||
<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="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
|
||||
selectValue={type}
|
||||
setSelectValue={setType}
|
||||
selectOptions={[
|
||||
{value: "synonymes", label: t("synonyms.optionSynonyms")},
|
||||
{value: "antonymes", label: t("synonyms.optionAntonyms")}
|
||||
]}
|
||||
inputValue={wordToCheck}
|
||||
setInputValue={setWordToCheck}
|
||||
inputPlaceholder={t("synonyms.inputPlaceholder")}
|
||||
searchIcon={faSearch}
|
||||
onSearch={handleSearch}
|
||||
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
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>
|
||||
)}
|
||||
|
||||
{!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="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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user