DocsGPT/frontend/src/Navigation.tsx

import { useEffect, useRef, useState } from 'react';
import { NavLink } from 'react-router-dom';
import Arrow1 from './assets/arrow.svg';
import Arrow2 from './assets/dropdown-arrow.svg';
import Exit from './assets/exit.svg';
import Message from './assets/message.svg';
import Hamburger from './assets/hamburger.svg';
import Key from './assets/key.svg';
import Info from './assets/info.svg';
import Link from './assets/link.svg';
import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectApiKeyStatus,
  selectSelectedDocs,
  selectSelectedDocsStatus,
  selectSourceDocs,
  setSelectedDocs,
  selectConversations,
  setConversations,
  selectConversationId,
} from './preferences/preferenceSlice';
import {
  setConversation,
  updateConversationId,
} from './conversation/conversationSlice';
import { useOutsideAlerter } from './hooks';
import Upload from './upload/Upload';
import { Doc, getConversations } from './preferences/preferenceApi';
import SelectDocsModal from './preferences/SelectDocsModal';

export default function Navigation({
  navState,
  setNavState,
}: {
  navState: ActiveState;
  setNavState: React.Dispatch<React.SetStateAction<ActiveState>>;
}) {
  const dispatch = useDispatch();
  const docs = useSelector(selectSourceDocs);
  const selectedDocs = useSelector(selectSelectedDocs);
  const conversations = useSelector(selectConversations);
  const conversationId = useSelector(selectConversationId);

  const [isDocsListOpen, setIsDocsListOpen] = useState(false);

  const isApiKeySet = useSelector(selectApiKeyStatus);
  const [apiKeyModalState, setApiKeyModalState] =
    useState<ActiveState>('INACTIVE');

  const isSelectedDocsSet = useSelector(selectSelectedDocsStatus);
  const [selectedDocsModalState, setSelectedDocsModalState] =
    useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');

  const [uploadModalState, setUploadModalState] =
    useState<ActiveState>('INACTIVE');

  const navRef = useRef(null);
  const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
  const embeddingsName = import.meta.env.VITE_EMBEDDINGS_NAME || 'openai_text-embedding-ada-002';

  useEffect(() => {
    if (!conversations) {
      getConversations()
        .then((fetchedConversations) => {
          dispatch(setConversations(fetchedConversations));
        })
        .catch((error) => {
          console.error('Failed to fetch conversations: ', error);
        });
    }
  }, [conversations, dispatch]);

  const handleDeleteConversation = (id: string) => {
    fetch(`${apiHost}/api/delete_conversation?id=${id}`, {
      method: 'POST',
    })
      .then(() => {
        // remove the image element from the DOM
        const imageElement = document.querySelector(
          `#img-${id}`,
        ) as HTMLElement;
        const parentElement = imageElement.parentNode as HTMLElement;
        parentElement.parentNode?.removeChild(parentElement);
      })
      .catch((error) => console.error(error));
  };

  const handleDeleteClick = (index: number, doc: Doc) => {
    const docPath = 'indexes/' + 'local' + '/' + doc.name;

    fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
      method: 'GET',
    })
      .then(() => {
        // remove the image element from the DOM
        const imageElement = document.querySelector(
          `#img-${index}`,
        ) as HTMLElement;
        const parentElement = imageElement.parentNode as HTMLElement;
        parentElement.parentNode?.removeChild(parentElement);
      })
      .catch((error) => console.error(error));
  };

  const handleConversationClick = (index: string) => {
    // fetch the conversation from the server and setConversation in the store
    fetch(`${apiHost}/api/get_single_conversation?id=${index}`, {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((data) => {
        dispatch(setConversation(data));
        dispatch(
          updateConversationId({
            query: { conversationId: index },
          }),
        );
      });
  };
  useOutsideAlerter(
    navRef,
    () => {
      if (
        window.matchMedia('(max-width: 768px)').matches &&
        navState === 'ACTIVE' &&
        apiKeyModalState === 'INACTIVE'
      ) {
        setNavState('INACTIVE');
        setIsDocsListOpen(false);
      }
    },
    [navState, isDocsListOpen, apiKeyModalState],
  );

  /*
    Needed to fix bug where if mobile nav was closed and then window was resized to desktop, nav would still be closed but the button to open would be gone, as per #1 on issue #146
  */
  useEffect(() => {
    window.addEventListener('resize', () => {
      if (window.matchMedia('(min-width: 768px)').matches) {
        setNavState('ACTIVE');
      } else {
        setNavState('INACTIVE');
      }
    });
  }, []);

  return (
    <>
      <div
        ref={navRef}
        className={`${
          navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem]'
        } duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
      >
        <div className={'visible h-16 w-full border-b-2 md:hidden'}>
          <button
            className="float-right mr-5 mt-5 h-5 w-5"
            onClick={() =>
              setNavState(navState === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')
            }
          >
            <img
              src={Arrow1}
              alt="menu toggle"
              className={`${
                navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
              } m-auto w-3 transition-all duration-200`}
            />
          </button>
        </div>
        <NavLink
          to={'/'}
          onClick={() => {
            dispatch(setConversation([]));
            dispatch(updateConversationId({ query: { conversationId: null } }));
          }}
          className={({ isActive }) =>
            `${
              isActive && conversationId === null ? 'bg-gray-3000' : ''
            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
          }
        >
          <img src={Message} className="ml-4 w-5"></img>
          <p className="my-auto text-eerie-black">New Chat</p>
        </NavLink>
        <div className="conversations-container max-h-[25rem] overflow-y-auto">
          {conversations
            ? conversations.map((conversation) => {
                return (
                  <div
                    key={conversation.id}
                    onClick={() => {
                      handleConversationClick(conversation.id);
                    }}
                    className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
                      conversationId === conversation.id ? 'bg-gray-100' : ''
                    }`}
                  >
                    <div className="flex gap-4">
                      <img src={Message} className="ml-2 w-5"></img>
                      <p className="my-auto text-eerie-black">
                        {conversation.name}
                      </p>
                    </div>

                    {conversationId === conversation.id ? (
                      <img
                        src={Exit}
                        alt="Exit"
                        className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
                        id={`img-${conversation.id}`}
                        onClick={(event) => {
                          event.stopPropagation();
                          handleDeleteConversation(conversation.id);
                        }}
                      />
                    ) : null}
                  </div>
                );
              })
            : null}
        </div>

        <div className="flex-grow border-b-2 border-gray-100"></div>
        <div className="flex flex-col-reverse border-b-2">
          <div className="relative my-4 flex gap-2 px-2">
            <div
              className="flex h-12 w-full cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
              onClick={() => setIsDocsListOpen(!isDocsListOpen)}
            >
              {selectedDocs && (
                <p className="my-3 mx-4">
                  {selectedDocs.name} {selectedDocs.version}
                </p>
              )}
              <img
                src={Arrow2}
                alt="arrow"
                className={`${
                  isDocsListOpen ? 'rotate-0' : 'rotate-180'
                } ml-auto mr-3 w-3 transition-all`}
              />
            </div>
            <img
              className="mt-2 h-9 w-9 hover:cursor-pointer"
              src={UploadIcon}
              onClick={() => setUploadModalState('ACTIVE')}
            ></img>
            {isDocsListOpen && (
              <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
                {docs ? (
                  docs.map((doc, index) => {
                    if (doc.model === embeddingsName) {
                      return (
                        <div
                          key={index}
                          onClick={() => {
                            dispatch(setSelectedDocs(doc));
                            setIsDocsListOpen(false);
                          }}
                          className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
                        >
                          <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
                            {doc.name} {doc.version}
                          </p>
                          {doc.location === 'local' ? (
                            <img
                              src={Exit}
                              alt="Exit"
                              className="mr-4 h-3 w-3 cursor-pointer hover:opacity-50"
                              id={`img-${index}`}
                              onClick={(event) => {
                                event.stopPropagation();
                                handleDeleteClick(index, doc);
                              }}
                            />
                          ) : null}
                        </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 mt-3 font-bold text-jet">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-3xl hover:bg-gray-100"
            onClick={() => {
              setApiKeyModalState('ACTIVE');
            }}
          >
            <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 flex-col gap-2 border-b-2 py-2">
          <NavLink
            to="/about"
            className={({ isActive }) =>
              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
                isActive ? 'bg-gray-3000' : ''
              }`
            }
          >
            <img src={Info} alt="info" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">About</p>
          </NavLink>

          <a
            href="https://discord.gg/WHJdfbQDR4"
            target="_blank"
            rel="noreferrer"
            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
          >
            <img src={Link} alt="link" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Discord</p>
          </a>

          <a
            href="https://github.com/arc53/DocsGPT"
            target="_blank"
            rel="noreferrer"
            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
          >
            <img src={Link} alt="link" className="ml-2 w-5" />
            <p className="my-auto text-eerie-black">Github</p>
          </a>
        </div>
      </div>
      <div className="fixed h-16 w-full border-b-2 bg-gray-50 md:hidden">
        <button
          className="mt-5 ml-6 h-6 w-6 md:hidden"
          onClick={() => setNavState('ACTIVE')}
        >
          <img src={Hamburger} alt="menu toggle" className="w-7" />
        </button>
      </div>
      <SelectDocsModal
        modalState={selectedDocsModalState}
        setModalState={setSelectedDocsModalState}
        isCancellable={isSelectedDocsSet}
      />
      <APIKeyModal
        modalState={apiKeyModalState}
        setModalState={setApiKeyModalState}
        isCancellable={isApiKeySet}
      />
      <Upload
        modalState={uploadModalState}
        setModalState={setUploadModalState}
      ></Upload>
    </>
  );
}