add word count

src/components/MessageItem.tsx

@@ -1,6 +1,15 @@
-import { ActionIcon, Box, Card, Flex, ThemeIcon, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Card,
+  Flex,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { IconCopy, IconUser } from "@tabler/icons-react";
+import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import { Message } from "../db";
 import "../styles/markdown.scss";
@@ -11,6 +20,10 @@ import { ScrollIntoView } from "./ScrollIntoView";
 
 export function MessageItem({ message }: { message: Message }) {
   const clipboard = useClipboard({ timeout: 500 });
+  const wordCount = useMemo(() => {
+    var matches = message.content.match(/[\w\d\’\'-\(\)]+/gi);
+    return matches ? matches.length : 0;
+  }, [message.content]);
 
   return (
     <ScrollIntoView>
@@ -24,6 +37,13 @@ export function MessageItem({ message }: { message: Message }) {
           {message.role === "assistant" && <LogoIcon style={{ height: 32 }} />}
           <Box sx={{ flex: 1, width: 0 }} className="markdown">
             <ReactMarkdown children={message.content} />
+            {message.role === "assistant" && (
+              <Box>
+                <Text size="sm" color="dimmed">
+                  {wordCount} words
+                </Text>
+              </Box>
+            )}
           </Box>
           <Box>
             <CreatePromptModal content={message.content} />
@@ -35,6 +55,11 @@ export function MessageItem({ message }: { message: Message }) {
                 <IconCopy opacity={0.5} size={20} />
               </ActionIcon>
             </Tooltip>
+            {/* <Tooltip label={`${wordCount} words`} position="left">
+              <ActionIcon>
+                <IconInfoCircle opacity={0.5} size={20} />
+              </ActionIcon>
+            </Tooltip> */}
           </Box>
         </Flex>
       </Card>