From c74d69bcd718c352b4b353ff4155bab727557b55 Mon Sep 17 00:00:00 2001 From: Willie Zutz Date: Fri, 15 Aug 2025 13:37:15 -0600 Subject: [PATCH] feat(agent): Enhance MarkdownRenderer with Firefox AI detection and disable tools - Added BotIcon for Firefox AI in ToolCall component. - Implemented UI feedback for Firefox AI detection, indicating tools are disabled. - Updated SimplifiedAgent to handle Firefox AI detection and disable tools accordingly. - Created new prompts for Firefox AI mode to ensure responses are tailored to detected prompts. - Refactored existing prompts for chat and web search modes for better structure and clarity. - Introduced truncation toggle for long user prompts in MessageBox component. --- src/components/MarkdownRenderer.tsx | 12 + src/components/MessageBox.tsx | 66 ++- src/lib/prompts/simplifiedAgent/chat.ts | 61 +++ src/lib/prompts/simplifiedAgent/firefoxAI.ts | 60 +++ .../prompts/simplifiedAgent/localResearch.ts | 107 +++++ src/lib/prompts/simplifiedAgent/webSearch.ts | 155 +++++++ src/lib/search/simplifiedAgent.ts | 392 +++--------------- 7 files changed, 523 insertions(+), 330 deletions(-) create mode 100644 src/lib/prompts/simplifiedAgent/chat.ts create mode 100644 src/lib/prompts/simplifiedAgent/firefoxAI.ts create mode 100644 src/lib/prompts/simplifiedAgent/localResearch.ts create mode 100644 src/lib/prompts/simplifiedAgent/webSearch.ts 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 && ( + + )} +