diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx index f8ace1d..3ecd5d9 100644 --- a/src/components/MarkdownRenderer.tsx +++ b/src/components/MarkdownRenderer.tsx @@ -10,6 +10,7 @@ import { Globe, Settings, Image as ImageIcon, + BotIcon, } from 'lucide-react'; import Markdown, { MarkdownToJSX } from 'markdown-to-jsx'; import { useEffect, useState } from 'react'; @@ -92,6 +93,8 @@ const ToolCall = ({ case 'image': case 'image_search': return ; + case 'firefoxAI': + return ; default: return ; } @@ -147,6 +150,15 @@ const ToolCall = ({ ); } + if (type === 'firefoxAI') { + return ( + <> + {getIcon(type)} + Firefox AI detected, tools disabled + + ); + } + // Fallback for unknown tool types return ( <> diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx index 7360bd6..0c51232 100644 --- a/src/components/MessageBox.tsx +++ b/src/components/MessageBox.tsx @@ -1,6 +1,6 @@ import { cn } from '@/lib/utils'; import { Check, Pencil, X } from 'lucide-react'; -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Message } from './ChatWindow'; import MessageTabs from './MessageTabs'; @@ -39,6 +39,29 @@ const MessageBox = ({ // Local state for editing functionality const [isEditing, setIsEditing] = useState(false); const [editedContent, setEditedContent] = useState(''); + // State for truncation toggle of long user prompts + const [isExpanded, setIsExpanded] = useState(false); + const [isOverflowing, setIsOverflowing] = useState(false); + const contentRef = useRef(null); + + // Measure overflow compared to a 3-line clamped state + useEffect(() => { + const measureOverflow = () => { + const el = contentRef.current; + if (!el) return; + const hadClamp = el.classList.contains('line-clamp-3'); + if (!hadClamp) el.classList.add('line-clamp-3'); + const overflowing = el.scrollHeight > el.clientHeight + 1; + setIsOverflowing(overflowing); + if (!hadClamp) el.classList.remove('line-clamp-3'); + }; + + measureOverflow(); + window.addEventListener('resize', measureOverflow); + return () => { + window.removeEventListener('resize', measureOverflow); + }; + }, [message.content]); // Initialize editing const startEditMessage = () => { @@ -98,10 +121,43 @@ const MessageBox = ({ ) : ( <> -
-

- {message.content} -

+
+
+

{ + if (e.key === 'Enter' || e.key === ' ') { + if (e.key === ' ') e.preventDefault(); + startEditMessage(); + } + }} + > + {message.content} +

+ {isOverflowing && ( + + )} +