131 lines
6.3 KiB
TypeScript
131 lines
6.3 KiB
TypeScript
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>
|
|
);
|
|
} |