);
@@ -159,110 +202,130 @@ export const ChatMessage = memo(function ChatMessage({ comment, label, className
// Agent message: icon on left, no card background
return (
-
+
{/* Content */}
-
-
{
- const content = getTextContent(children).replace(/\n$/, '');
- const hasLanguage = className?.startsWith('language-');
- const hasNewlines = content.includes('\n');
-
- // Code block if it has a language specifier OR has multiple lines
- if (hasLanguage || hasNewlines) {
- return {content};
- }
-
- // Inline code (single backticks, single line)
- return {content};
- },
- ol: ({ children }) => (
-
- {children}
-
- ),
- ul: ({ children }) => (
-
- ),
- li: ({ children }) => (
-
- {children}
-
- ),
- p: ({ children }) => (
-
- {children}
-
- ),
- h1: ({ children }) => (
-
- {children}
-
- ),
- h2: ({ children }) => (
-
- {children}
-
- ),
- h3: ({ children }) => (
-
- {children}
-
- ),
- h4: ({ children }) => (
-
- {children}
-
- ),
- h5: ({ children }) => (
-
- {children}
-
- ),
- table: ({ children }) => (
-
- ),
- thead: ({ children }) => (
-
- {children}
-
- ),
- tbody: ({ children }) => (
-
- {children}
-
- ),
- tr: ({ children }) => (
-
- {children}
-
- ),
- th: ({ children }) => (
-
- {children}
- |
- ),
- td: ({ children }) => (
-
- {children}
- |
- ),
- }}
- >
+ {showRaw ? (
+
{comment.content || '(empty)'}
-
- {showRichBlocks ?
: null}
-
+
+ ) : (
+
+
{
+ const content = getTextContent(children).replace(/\n$/, '');
+ const hasLanguage = className?.startsWith('language-');
+ const hasNewlines = content.includes('\n');
+
+ // Code block if it has a language specifier OR has multiple lines
+ if (hasLanguage || hasNewlines) {
+ return {content};
+ }
+
+ // Inline code (single backticks, single line)
+ return {content};
+ },
+ ol: ({ children }) => (
+
+ {children}
+
+ ),
+ ul: ({ children }) => (
+
+ ),
+ li: ({ children }) => (
+
+ {children}
+
+ ),
+ p: ({ children }) => (
+
+ {children}
+
+ ),
+ h1: ({ children }) => (
+
+ {children}
+
+ ),
+ h2: ({ children }) => (
+
+ {children}
+
+ ),
+ h3: ({ children }) => (
+
+ {children}
+
+ ),
+ h4: ({ children }) => (
+
+ {children}
+
+ ),
+ h5: ({ children }) => (
+
+ {children}
+
+ ),
+ hr: ({ children }) => (
+
+ {children}
+
+ ),
+ table: ({ children }) => (
+
+ ),
+ thead: ({ children }) => (
+
+ {children}
+
+ ),
+ tbody: ({ children }) => (
+
+ {children}
+
+ ),
+ tr: ({ children }) => (
+
+ {children}
+
+ ),
+ th: ({ children }) => (
+
+ {children}
+ |
+ ),
+ td: ({ children }) => (
+
+ {children}
+ |
+ ),
+ }}
+ >
+ {comment.content || '(empty)'}
+
+ {showRichBlocks ?
: null}
+
+ )}
+
setShowRaw(!showRaw)}
+ />
);
diff --git a/apps/web/components/task/chat/messages/code-block.tsx b/apps/web/components/task/chat/messages/code-block.tsx
index ec14775a15..0e97022304 100644
--- a/apps/web/components/task/chat/messages/code-block.tsx
+++ b/apps/web/components/task/chat/messages/code-block.tsx
@@ -1,6 +1,5 @@
'use client';
-import { useState } from 'react';
import { useTheme } from 'next-themes';
import CodeMirror from '@uiw/react-codemirror';
import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
@@ -8,6 +7,7 @@ import { EditorView } from '@codemirror/view';
import { IconCheck, IconCopy } from '@tabler/icons-react';
import { cn } from '@/lib/utils';
import { getCodeMirrorExtension } from '@/lib/languages';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
type CodeBlockProps = {
children: React.ReactNode;
@@ -21,7 +21,7 @@ const getLanguageExtension = (language?: string) => {
};
export function CodeBlock({ children, className }: CodeBlockProps) {
- const [copied, setCopied] = useState(false);
+ const { copied, copy } = useCopyToClipboard();
const { theme, systemTheme } = useTheme();
const effectiveTheme = theme === 'system' ? systemTheme : theme;
@@ -36,17 +36,11 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
});
const handleCopy = async () => {
- try {
- await navigator.clipboard.writeText(code);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- } catch (err) {
- console.error('Failed to copy:', err);
- }
+ await copy(code);
};
return (
-
+
{/* Copy button */}
diff --git a/apps/web/components/task/chat/virtualized-message-list.tsx b/apps/web/components/task/chat/virtualized-message-list.tsx
index 35eea7e97e..ae91603959 100644
--- a/apps/web/components/task/chat/virtualized-message-list.tsx
+++ b/apps/web/components/task/chat/virtualized-message-list.tsx
@@ -55,6 +55,19 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
overscan: 6,
});
+ // Scroll to a specific message by ID
+ const handleScrollToMessage = useCallback((messageId: string) => {
+ const index = items.findIndex(item => {
+ if (item.type === 'turn_group') {
+ return item.messages.some(msg => msg.id === messageId);
+ }
+ return item.message?.id === messageId;
+ });
+ if (index >= 0) {
+ virtualizer.scrollToIndex(index, { align: 'center' });
+ }
+ }, [items, virtualizer]);
+
// Use ref to track loading state to avoid recreating the scroll handler
const loadingRef = useRef({ hasMore, isLoadingMore });
loadingRef.current = { hasMore, isLoadingMore };
@@ -182,6 +195,8 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
onOpenFile={onOpenFile}
isLastGroup={item.id === lastTurnGroupId}
isTurnActive={isRunning}
+ allMessages={messages}
+ onScrollToMessage={handleScrollToMessage}
/>
) : (
)}
diff --git a/apps/web/hooks/use-copy-to-clipboard.ts b/apps/web/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 0000000000..417ea3fa23
--- /dev/null
+++ b/apps/web/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+export function useCopyToClipboard() {
+ const [copied, setCopied] = useState(false);
+
+ const copy = useCallback(async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ }, []);
+
+ return { copied, copy };
+}
diff --git a/apps/web/hooks/use-message-navigation.ts b/apps/web/hooks/use-message-navigation.ts
new file mode 100644
index 0000000000..1b763654e3
--- /dev/null
+++ b/apps/web/hooks/use-message-navigation.ts
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import type { Message } from '@/lib/types/http';
+
+export function useMessageNavigation(
+ messages: Message[],
+ currentMessageId: string,
+ filterType: 'user' | 'agent'
+) {
+ const currentIndex = useMemo(() => {
+ return messages.findIndex(msg => msg.id === currentMessageId);
+ }, [messages, currentMessageId]);
+
+ const filteredIndices = useMemo(() => {
+ return messages
+ .map((msg, idx) => (msg.author_type === filterType ? idx : -1))
+ .filter(idx => idx !== -1);
+ }, [messages, filterType]);
+
+ const previous = useMemo(() => {
+ const validPrev = filteredIndices.filter(idx => idx < currentIndex);
+ return validPrev.length > 0 ? messages[validPrev[validPrev.length - 1]] : null;
+ }, [filteredIndices, currentIndex, messages]);
+
+ const next = useMemo(() => {
+ const validNext = filteredIndices.filter(idx => idx > currentIndex);
+ return validNext.length > 0 ? messages[validNext[0]] : null;
+ }, [filteredIndices, currentIndex, messages]);
+
+ return {
+ hasPrevious: previous !== null,
+ hasNext: next !== null,
+ previous,
+ next,
+ };
+}