Minor Fix and refactor

Author: blazickjp

frontend/components/ChatBox.js

@@ -2,16 +2,11 @@ import React, { useRef, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import { get_encoding } from "@dqbd/tiktoken";
 import ReactTooltip from 'react-tooltip';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { Virtuoso } from 'react-virtuoso';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FaClipboardCheck } from 'react-icons/fa';
 
-const encoding = get_encoding("cl100k_base");
-
 const CodeBlock = React.memo(({ node, inline, className, children }) => {
     const match = /language-(\w+)/.exec(className || '');
     const lang = match && match[1] ? match[1] : '';
@@ -40,18 +35,13 @@ const Chatbox = ({ messages }) => {
     const chatboxRef = useRef(null);
     const Row = ({ index, data }) => {
         const message = data[index];
-        if (!message.text || !encoding) {
+        if (!message.text) {
             return null;
         }
 
-        const tokens = encoding.encode(message.text);
         return (
             <div className={message.user === 'human' ? "bg-gray-700 text-white p-5" : "bg-gray-600 p-5 text-white"}>
                 <div className='flex flex-row w-1/2 mx-auto'>
-                    <FontAwesomeIcon icon={faInfoCircle} className="cursor-pointer mr-5" data-tip data-for={`tokenTip${index}`} />
-                    <ReactTooltip id={`tokenTip${index}`} place="top" effect='solid' delayHide={500} globalEventOff='mouseout'>
-                        Tokens: {tokens.length}
-                    </ReactTooltip>
                     <ReactMarkdown children={message.text} className='flex-grow overflow-x-auto' components={{ code: CodeBlock }} />
                 </div>
             </div>

frontend/components/ChatInput.js

@@ -2,31 +2,33 @@ import React, { useState } from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 
 const ChatInput = ({ onSubmit }) => {
-    const [input, setInput] = useState("");
+    const [input, setInput] = useState('');
 
     const handleSubmit = (e) => {
-        console.log("input", input);
         e.preventDefault();
         onSubmit(input);
-        setInput("");
+        setInput('');
     };
 
     return (
         <div className="flex flex-row bg-gray-800 text-center justify-center items-center w-full text-black pb-5">
-            <form onSubmit={handleSubmit} className='flex w-1/2'>
+            <form onSubmit={handleSubmit} className="flex w-1/2 relative">
                 <input
                     type="text"
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type a message..."
-                    className="p-2 rounded mr-2 flex-grow"
+                    className="p-2 rounded mr-2 flex-grow pr-10"
                 />
-                <button type="submit" className=" text-purple-700 font-bold py-2 px-4 rounded text-xl">
+                <button
+                    type="submit"
+                    className="absolute right-0 top-0 bottom-0 m-auto text-purple-700 font-bold py-2 px-4 rounded text-xl"
+                >
                     <AiOutlineSend />
                 </button>
             </form>
         </div>
     );
 };
 
-export default ChatInput;
+export default ChatInput;

frontend/components/ModalBar.js

@@ -3,9 +3,9 @@ import { get_encoding } from "@dqbd/tiktoken";
 // import CustomModal from './CustomModal';
 import ReactModal from 'react-modal';
 
+ReactModal.setAppElement('#__next');
 
 const encoding = get_encoding("cl100k_base");
-ReactModal.setAppElement('#__next');
 
 const ModalBar = () => {
     const [systemPrompt, setSystemPrompt] = useState("");

frontend/components/RightSidebar.js

@@ -56,7 +56,7 @@ const RightSidebar = ({ isSidebarOpen }) => {
 
 
     return (
-        <div className={`fixed h-full w-1/3 right-0 bg-neutral-800 transition-all duration-500 overflow-y-scroll p-6 text-gray-200 transform ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'} overflow-x-visible`}>
+        <div className={`fixed h-full z-10 w-1/3 right-0 bg-neutral-800 transition-all duration-500 overflow-y-scroll p-6 text-gray-200 transform ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'} overflow-x-visible`}>
             <div className="flex flex-row justify-between items-center mb-2">
                 <h2 className="text-xl font-bold mb-4 text-gray-100">Files and Summaries</h2>
             </div>