|
|
|
@ -8,11 +8,15 @@ import Link from './assets/link.svg';
|
|
|
|
|
import { ActiveState } from './models/misc';
|
|
|
|
|
import APIKeyModal from './preferences/APIKeyModal';
|
|
|
|
|
import SelectDocsModal from './preferences/SelectDocsModal';
|
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
import {
|
|
|
|
|
selectApiKeyStatus,
|
|
|
|
|
selectSelectedDocs,
|
|
|
|
|
selectSelectedDocsStatus,
|
|
|
|
|
selectSourceDocs,
|
|
|
|
|
setSelectedDocs,
|
|
|
|
|
} from './preferences/preferenceSlice';
|
|
|
|
|
import { setLocalRecentDocs } from './preferences/preferenceApi';
|
|
|
|
|
|
|
|
|
|
//TODO - Need to replace Chat button to open secondary nav with scrollable past chats option and new chat at top
|
|
|
|
|
//TODO - Need to add Discord and Github links
|
|
|
|
@ -24,6 +28,12 @@ export default function Navigation({
|
|
|
|
|
navState: ActiveState;
|
|
|
|
|
setNavState: (val: ActiveState) => void;
|
|
|
|
|
}) {
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const docs = useSelector(selectSourceDocs);
|
|
|
|
|
const selectedDocs = useSelector(selectSelectedDocs);
|
|
|
|
|
|
|
|
|
|
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
|
|
|
|
|
|
|
|
|
|
const isApiKeySet = useSelector(selectApiKeyStatus);
|
|
|
|
|
const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
|
|
|
|
|
isApiKeySet ? 'INACTIVE' : 'ACTIVE',
|
|
|
|
@ -38,9 +48,9 @@ export default function Navigation({
|
|
|
|
|
<div
|
|
|
|
|
className={`${
|
|
|
|
|
navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem] lg:-ml-80'
|
|
|
|
|
} fixed z-10 flex h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all duration-200 lg:w-96`}
|
|
|
|
|
} fixed z-10 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-96`}
|
|
|
|
|
>
|
|
|
|
|
<div className={'h-16 w-full border-b-2 border-gray-100'}>
|
|
|
|
|
<div className={'h-16 w-full border-b-2'}>
|
|
|
|
|
<button
|
|
|
|
|
className="float-right mr-5 mt-5 h-5 w-5"
|
|
|
|
|
onClick={() =>
|
|
|
|
@ -56,33 +66,64 @@ export default function Navigation({
|
|
|
|
|
/>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex-grow border-b-2 border-gray-100"></div>
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-col gap-2 border-b-2 border-gray-100 py-2">
|
|
|
|
|
<div className="flex flex-grow flex-col-reverse border-b-2">
|
|
|
|
|
<div className="relative my-4 px-6 ">
|
|
|
|
|
<div
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
className="h-12 w-full cursor-pointer rounded-md border-2"
|
|
|
|
|
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
|
|
|
|
>
|
|
|
|
|
{selectedDocs && (
|
|
|
|
|
<p className="my-3 mx-4">
|
|
|
|
|
{selectedDocs.name} {selectedDocs.version}
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{isDocsListOpen && (
|
|
|
|
|
<div className="absolute top-12 left-0 right-0 mx-6 max-h-52 overflow-y-scroll bg-white shadow-lg">
|
|
|
|
|
{docs ? (
|
|
|
|
|
docs.map((doc, index) => {
|
|
|
|
|
if (doc.model) {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
key={index}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setApiKeyModalState('ACTIVE');
|
|
|
|
|
setLocalRecentDocs(doc);
|
|
|
|
|
dispatch(setSelectedDocs(doc));
|
|
|
|
|
setIsDocsListOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
|
|
|
|
|
>
|
|
|
|
|
<img src={Key} alt="key" className="ml-2 w-6" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Reset Key</p>
|
|
|
|
|
<p className="ml-5 py-3">
|
|
|
|
|
{doc.name} {doc.version}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
) : (
|
|
|
|
|
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
|
|
|
|
|
<p className="ml-5 py-3">No default documentation.</p>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<p className="ml-6 font-bold">Source Docs</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-col gap-2 border-b-2 py-2">
|
|
|
|
|
<div
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setSelectedDocsModalState('ACTIVE');
|
|
|
|
|
setApiKeyModalState('ACTIVE');
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<img src={Link} alt="key" className="ml-2 w-5" />
|
|
|
|
|
<p className="my-auto text-eerie-black">
|
|
|
|
|
Select Source Documentation
|
|
|
|
|
</p>
|
|
|
|
|
<img src={Key} alt="key" className="ml-2 w-6" />
|
|
|
|
|
<p className="my-auto text-eerie-black">Reset Key</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex h-48 flex-col border-b-2 border-gray-100">
|
|
|
|
|
<div className="flex flex-col gap-2 border-b-2 py-2">
|
|
|
|
|
<NavLink
|
|
|
|
|
to="/about"
|
|
|
|
|
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
|
|
|
|