feat: display total number of tokens in conversation

fixes #126

src/components/Chat/ChatContent/Message/MessageContent.tsx

@@ -26,6 +26,7 @@ import useSubmit from '@hooks/useSubmit';
 import { ChatInterface } from '@type/chat';
 
 import PopupModal from '@components/PopupModal';
+import TokenCount from '@components/TokenCount';
 import CommandPrompt from './CommandPrompt';
 import CodeBlock from './CodeBlock';
 import { codeLanguageSubset } from '@constants/chat';
@@ -512,6 +513,7 @@ const EditViewButtons = React.memo(
             </button>
           )}
         </div>
+        {sticky && <TokenCount />}
         <CommandPrompt _setContent={_setContent} />
       </div>
     );

src/components/TokenCount/TokenCount.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import useStore from '@store/store';
+import { shallow } from 'zustand/shallow';
+
+import { countMessagesToken } from '@utils/messageUtils';
+
+const TokenCount = React.memo(() => {
+  const [tokenCount, setTokenCount] = useState<number>(0);
+  const generating = useStore((state) => state.generating);
+  const messages = useStore(
+    (state) =>
+      state.chats ? state.chats[state.currentChatIndex].messages : [],
+    shallow
+  );
+
+  useEffect(() => {
+    if (!generating) setTokenCount(countMessagesToken(messages));
+  }, [messages, generating]);
+
+  return (
+    <div className='absolute top-[-16px] right-0'>
+      <div className='text-xs italic text-gray-900 dark:text-gray-300'>
+        Tokens: {tokenCount}
+      </div>
+    </div>
+  );
+});
+
+export default TokenCount;

src/components/TokenCount/index.ts

@@ -0,0 +1 @@
+export { default } from './TokenCount';

src/utils/messageUtils.ts

@@ -17,3 +17,10 @@ export const limitMessageTokens = (
 
   return limitedMessages;
 };
+
+export const countMessagesToken = (messages: MessageInterface[]) => {
+  return messages.reduce(
+    (tokenCount, message) => (tokenCount += countTokens(message.content)),
+    0
+  );
+};