KBaba7/llama.cpp

1import { useEffect, useMemo, useState } from 'react';2import { classNames } from '../utils/misc';3import { Conversation } from '../utils/types';4import StorageUtils from '../utils/storage';5import { useNavigate, useParams } from 'react-router';6 7export default function Sidebar() {8  const params = useParams();9  const navigate = useNavigate();10  const currConv = useMemo(11    () => StorageUtils.getOneConversation(params.convId ?? ''),12    [params.convId]13  );14 15  const [conversations, setConversations] = useState<Conversation[]>([]);16 17  useEffect(() => {18    const handleConversationChange = () => {19      setConversations(StorageUtils.getAllConversations());20    };21    StorageUtils.onConversationChanged(handleConversationChange);22    handleConversationChange();23    return () => {24      StorageUtils.offConversationChanged(handleConversationChange);25    };26  }, []);27 28  return (29    <>30      <input31        id="toggle-drawer"32        type="checkbox"33        className="drawer-toggle"34        defaultChecked35      />36 37      <div className="drawer-side h-screen lg:h-screen z-50 lg:max-w-64">38        <label39          htmlFor="toggle-drawer"40          aria-label="close sidebar"41          className="drawer-overlay"42        ></label>43        <div className="flex flex-col bg-base-200 min-h-full max-w-64 py-4 px-4">44          <div className="flex flex-row items-center justify-between mb-4 mt-4">45            <h2 className="font-bold ml-4">Conversations</h2>46 47            {/* close sidebar button */}48            <label htmlFor="toggle-drawer" className="btn btn-ghost lg:hidden">49              <svg50                xmlns="http://www.w3.org/2000/svg"51                width="16"52                height="16"53                fill="currentColor"54                className="bi bi-arrow-bar-left"55                viewBox="0 0 16 16"56              >57                <path58                  fillRule="evenodd"59                  d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5"60                />61              </svg>62            </label>63          </div>64 65          {/* list of conversations */}66          <div67            className={classNames({68              'btn btn-ghost justify-start': true,69              'btn-active': !currConv,70            })}71            onClick={() => navigate('/')}72          >73            + New conversation74          </div>75          {conversations.map((conv) => (76            <div77              key={conv.id}78              className={classNames({79                'btn btn-ghost justify-start font-normal': true,80                'btn-active': conv.id === currConv?.id,81              })}82              onClick={() => navigate(`/chat/${conv.id}`)}83              dir="auto"84            >85              <span className="truncate">{conv.messages[0].content}</span>86            </div>87          ))}88          <div className="text-center text-xs opacity-40 mt-auto mx-4">89            Conversations are saved to browser's localStorage90          </div>91        </div>92      </div>93    </>94  );95}96