diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx index 4935245..6c21b11 100644 --- a/src/components/MessageItem.tsx +++ b/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 ( @@ -24,6 +37,13 @@ export function MessageItem({ message }: { message: Message }) { {message.role === "assistant" && } + {message.role === "assistant" && ( + + + {wordCount} words + + + )} @@ -35,6 +55,11 @@ export function MessageItem({ message }: { message: Message }) { + {/* + + + + */}