{hasError && (
-
{entry.errorContent}
+
{entry.errorContent}
)}
{entry.arguments && Object.keys(entry.arguments).length > 0 && (
-
{t("toolArguments")}
-
+ {t("toolArguments")}
+
{JSON.stringify(entry.arguments, null, 2)}
)}
{entry.result && (
-
{t("toolResult")}
-
+ {t("toolResult")}
+
{entry.result}
@@ -80,27 +78,20 @@ export function ToolCallCard({ entry }: ToolCallCardProps) {
}
function ToolIcon({ phase, isSkill }: { phase: ToolStreamEntry["phase"]; isSkill?: boolean }) {
+ const cls = "h-3.5 w-3.5";
if (isSkill) {
switch (phase) {
- case "calling":
- return
;
- case "completed":
- return
;
- case "error":
- return
;
- default:
- return
;
+ case "calling": return
;
+ case "completed": return
;
+ case "error": return
;
+ default: return
;
}
}
switch (phase) {
- case "calling":
- return
;
- case "completed":
- return
;
- case "error":
- return
;
- default:
- return
;
+ case "calling": return
;
+ case "completed": return
;
+ case "error": return
;
+ default: return
;
}
}
@@ -114,9 +105,5 @@ function PhaseLabel({ phase, isSkill }: { phase: ToolStreamEntry["phase"]; isSki
completed: "text-green-500",
error: "text-red-500",
};
- return (
-
- {labels[phase] ?? phase}
-
- );
+ return
{labels[phase] ?? phase};
}
diff --git a/ui/web/src/components/shared/markdown-renderer.tsx b/ui/web/src/components/shared/markdown-renderer.tsx
index 4330c0ff..f7015c72 100644
--- a/ui/web/src/components/shared/markdown-renderer.tsx
+++ b/ui/web/src/components/shared/markdown-renderer.tsx
@@ -4,8 +4,14 @@ import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import { useClipboard } from "@/hooks/use-clipboard";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, Download, FileText } from "lucide-react";
import { ImageLightbox } from "./image-lightbox";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
function CodeBlock({
className,
@@ -44,9 +50,50 @@ interface MarkdownRendererProps {
className?: string;
}
+/** Check if a URL points to a local file via /v1/files/ endpoint */
+function isFileLink(href: string | undefined): boolean {
+ return !!href && (href.startsWith("/v1/files/") || href.includes("/v1/files/"));
+}
+
+/** File type detection from name */
+function isMarkdownExt(name: string): boolean {
+ return /\.(md|mdx|markdown)$/i.test(name);
+}
+function isMediaFile(name: string): "image" | "audio" | "video" | null {
+ if (/\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i.test(name)) return "image";
+ if (/\.(mp3|wav|ogg|flac|aac|m4a|wma|opus)$/i.test(name)) return "audio";
+ if (/\.(mp4|webm|mkv|avi|mov|wmv)$/i.test(name)) return "video";
+ return null;
+}
+
+/** Extract filename from /v1/files/ URL */
+function fileNameFromHref(href: string): string {
+ const path = href.split("?")[0] ?? href;
+ const segments = path.split("/");
+ return segments[segments.length - 1] ?? "file";
+}
+
export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
const [lightbox, setLightbox] = useState<{ src: string; alt: string } | null>(null);
const openLightbox = useCallback((src: string, alt: string) => setLightbox({ src, alt }), []);
+ const [filePreview, setFilePreview] = useState<{ name: string; href: string; content: string; mediaType?: "image" | "audio" | "video" } | null>(null);
+ const [fileLoading, setFileLoading] = useState(false);
+
+ const handleFileClick = useCallback((href: string, name: string) => {
+ // Media files: open preview directly without fetching text content
+ const media = isMediaFile(name);
+ if (media) {
+ setFilePreview({ name, href, content: "", mediaType: media });
+ return;
+ }
+ // Text/code files: fetch content
+ setFileLoading(true);
+ fetch(href)
+ .then((res) => res.text())
+ .then((text) => setFilePreview({ name, href, content: text }))
+ .catch(() => window.open(href, "_blank"))
+ .finally(() => setFileLoading(false));
+ }, []);
return (
@@ -73,9 +120,32 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
);
},
- a({ href, children, ...props }) {
+ a({ href, children }) {
+ if (isFileLink(href)) {
+ const name = typeof children === "string" ? children : fileNameFromHref(href ?? "");
+ return (
+
+
+ e.stopPropagation()}
+ >
+
+
+
+ );
+ }
return (
-
+
{children}
);
@@ -134,6 +204,43 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
>
{content}
+
+ {fileLoading && (
+
+ )}
+
+
);
}
diff --git a/ui/web/src/pages/chat/chat-page.tsx b/ui/web/src/pages/chat/chat-page.tsx
index 048573cc..11e5ef13 100644
--- a/ui/web/src/pages/chat/chat-page.tsx
+++ b/ui/web/src/pages/chat/chat-page.tsx
@@ -8,6 +8,8 @@ import { cn } from "@/lib/utils";
import { ChatSidebar } from "./chat-sidebar";
import { ChatThread } from "./chat-thread";
import { ChatInput, type AttachedFile } from "@/components/chat/chat-input";
+import { ChatTopBar } from "@/components/chat/chat-top-bar";
+import { DropZone } from "@/components/chat/drop-zone";
import { useChatSessions } from "./hooks/use-chat-sessions";
import { useChatMessages } from "./hooks/use-chat-messages";
import { useChatSend } from "./hooks/use-chat-send";
@@ -46,6 +48,9 @@ export function ChatPage() {
toolStream,
isRunning,
loading: messagesLoading,
+ activity,
+ blockReplies,
+ teamTasks,
expectRun,
addLocalMessage,
} = useChatMessages(sessionKey, agentId);
@@ -200,35 +205,42 @@ export function ChatPage() {