diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index da126c7..51227ff 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -78,6 +78,10 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session const userSentRef = useRef(false); const [showScrollBtn, setShowScrollBtn] = useState(false); const [newMessageCount, setNewMessageCount] = useState(0); + const [replyTo, setReplyTo] = useState<{ preview: string } | null>(null); + + // Clear reply context on session switch + useEffect(() => { setReplyTo(null); }, [sessionKey]); // eslint-disable-line react-hooks/set-state-in-effect const prevMessageCountRef = useRef(messages.length); const checkIfNearBottom = useCallback(() => { @@ -335,7 +339,7 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session )}
- toggleBookmark(msg.id, sessionKey, (msg.content || '').slice(0, 120), msg.timestamp) : undefined} /> + { setReplyTo({ preview }); document.getElementById('chat-input')?.focus(); }} agentAvatarUrl={agentAvatarUrl} isFirstInGroup={isFirstInGroup} isBookmarked={isBookmarked(msg.id)} onToggleBookmark={sessionKey ? () => toggleBookmark(msg.id, sessionKey, (msg.content || '').slice(0, 120), msg.timestamp) : undefined} />
); @@ -418,7 +422,7 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session )} - + setReplyTo(null)} /> ); } diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx index 930166c..5a302cd 100644 --- a/src/components/ChatInput.tsx +++ b/src/components/ChatInput.tsx @@ -1,5 +1,5 @@ import { useState, useRef, useEffect, useCallback, lazy, Suspense } from 'react'; -import { Send, Square, Paperclip, X, FileText, Eye, EyeOff } from 'lucide-react'; +import { Send, Square, Paperclip, X, FileText, Eye, EyeOff, Reply } from 'lucide-react'; import { useT } from '../hooks/useLocale'; import { useSendShortcut } from '../hooks/useSendShortcut'; import { SlashCommandMenu } from './SlashCommands'; @@ -18,12 +18,18 @@ interface FileAttachment { preview?: string; // data url thumbnail for images } +export interface ReplyContext { + preview: string; +} + interface Props { onSend: (text: string, attachments?: Array<{ mimeType: string; fileName: string; content: string }>) => void; onAbort: () => void; isGenerating: boolean; disabled: boolean; sessionKey?: string; + replyTo?: ReplyContext | null; + onCancelReply?: () => void; } const MAX_BASE64_CHARS = 300 * 1024; // ~225KB real, well under 512KB WS limit (JSON overhead + base64 bloat) @@ -88,7 +94,7 @@ function formatSize(bytes: number): string { return `${(bytes / (1024 * 1024)).toFixed(1)}MB`; } -export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey }: Props) { +export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey, replyTo, onCancelReply }: Props) { const t = useT(); const { sendOnEnter, toggle: toggleSendShortcut } = useSendShortcut(); const [text, setText] = useState(''); @@ -176,10 +182,17 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey fileName: f.file.name, content: f.base64, })) : undefined; - onSend(trimmed || ' ', attachments); + // Prepend quote if replying + let finalText = trimmed || ' '; + if (replyTo?.preview) { + const quoteLine = replyTo.preview.split('\n')[0].slice(0, 80); + finalText = `> ${quoteLine}\n\n${finalText}`; + } + onSend(finalText, attachments); setText(''); setFiles([]); setShowSlash(false); + onCancelReply?.(); // Clear draft for this session after sending if (sessionKey) draftsRef.current.delete(sessionKey); }; @@ -252,6 +265,20 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey onSelect={(cmd) => { setText(cmd); setShowSlash(shouldShowSlashMenu(cmd)); textareaRef.current?.focus(); }} onClose={() => setShowSlash(false)} /> + {/* Reply context banner */} + {replyTo && ( +
+ + {replyTo.preview || '…'} + +
+ )} {/* File previews */} {files.length > 0 && (
diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx index ae4dfc5..534d2c9 100644 --- a/src/components/ChatMessage.tsx +++ b/src/components/ChatMessage.tsx @@ -10,7 +10,7 @@ import { CodeBlock } from './CodeBlock'; import { ToolCall } from './ToolCall'; import { ImageBlock } from './ImageBlock'; import { buildImageSrc } from '../lib/image'; -import { Bot, User, Wrench, Copy, Check, CheckCheck, RefreshCw, Zap, Info, Webhook, Braces, Clock, AlertCircle, Bookmark, ChevronDown } from 'lucide-react'; +import { Bot, User, Wrench, Copy, Check, CheckCheck, RefreshCw, Zap, Info, Webhook, Braces, Clock, AlertCircle, Bookmark, ChevronDown, Reply } from 'lucide-react'; import { t, getLocale } from '../lib/i18n'; import { useLocale } from '../hooks/useLocale'; import { stripWebhookScaffolding, hasWebhookScaffolding } from '../lib/systemEvent'; @@ -455,7 +455,7 @@ function SystemEventMessage({ message }: { message: ChatMessageType }) { ); } -export const ChatMessageComponent = memo(function ChatMessageComponent({ message: rawMessage, onRetry, agentAvatarUrl, isFirstInGroup = true, isBookmarked = false, onToggleBookmark }: { message: ChatMessageType; onRetry?: (text: string) => void; agentAvatarUrl?: string; isFirstInGroup?: boolean; isBookmarked?: boolean; onToggleBookmark?: () => void }) { +export const ChatMessageComponent = memo(function ChatMessageComponent({ message: rawMessage, onRetry, onReply, agentAvatarUrl, isFirstInGroup = true, isBookmarked = false, onToggleBookmark }: { message: ChatMessageType; onRetry?: (text: string) => void; onReply?: (preview: string) => void; agentAvatarUrl?: string; isFirstInGroup?: boolean; isBookmarked?: boolean; onToggleBookmark?: () => void }) { useLocale(); // re-render on locale change const { resolvedTheme } = useTheme(); const isLight = resolvedTheme === 'light'; @@ -534,6 +534,16 @@ export const ChatMessageComponent = memo(function ChatMessageComponent({ message )}
+ {onReply && ( + + )} {onToggleBookmark && (