+ {/* Placeholder keeps layout stable while overlay is shown */}
+
+ { if (e.target === e.currentTarget) setEnlarged(false); }}
+ >
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
function downloadTextFile(filename: string, text: string): void {
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);
@@ -238,6 +333,14 @@ function StreamdownBlock(props: BlockProps) {
);
}
+ if (props.isIncomplete && codeFence && isHtmlFence(codeFence)) {
+ return (
+
+ Loading preview...
+
+ );
+ }
+
if (mermaidSource) {
return (
@@ -249,6 +352,7 @@ function StreamdownBlock(props: BlockProps) {
if (codeFence) {
const svgSource = !props.isIncomplete && isSvgFence(codeFence) ? sanitizeSvg(codeFence.source) : null;
+ const htmlSource = !props.isIncomplete && isHtmlFence(codeFence) ? codeFence.source : null;
return (
<>
| null>(null);
+
+ const reasoningText = useAuiState(({ message }) => {
+ return message.parts
+ .slice(startIndex, endIndex + 1)
+ .filter((p) => p.type === "reasoning")
+ .map((p) => ("text" in p ? (p as { text: string }).text : ""))
+ .join("\n");
+ });
+
+ const handleCopy = useCallback(() => {
+ if (copyToClipboard(reasoningText)) {
+ setCopied(true);
+ if (resetRef.current) clearTimeout(resetRef.current);
+ resetRef.current = setTimeout(() => setCopied(false), COPY_RESET_MS);
+ }
+ }, [reasoningText]);
+
+ return (
+
+ );
+}
+
const ReasoningGroupImpl: ReasoningGroupComponent = ({
children,
startIndex,
@@ -328,10 +368,15 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
onOpenChange={handleOpenChange}
variant={variant}
>
- {
+ try {
+ return new URL(url).hostname.replace(/^www\./, "");
+ } catch {
+ return url;
+ }
+};
+
+const getDomainInitial = (url: string): string => {
+ const domain = extractDomain(url);
+ return domain.charAt(0).toUpperCase();
+};
+
+function SourceIcon({
+ url,
+ className,
+ ...props
+}: ComponentProps<"span"> & { url: string }) {
+ const [hasError, setHasError] = useState(false);
+ const domain = extractDomain(url);
+
+ if (hasError) {
+ return (
+
+ {getDomainInitial(url)}
+
+ );
+ }
+
+ return (
+ 
setHasError(true)}
+ {...(props as ComponentProps<"img">)}
+ />
+ );
+}
+
+function SourceTitle({ className, ...props }: ComponentProps<"span">) {
+ return (
+
+ );
+}
+
+export type SourceProps = Omit &
+ ComponentProps<"a"> & {
+ asChild?: boolean;
+ };
+
+function Source({
+ className,
+ variant,
+ size,
+ asChild = false,
+ target = "_blank",
+ rel = "noopener noreferrer",
+ ...props
+}: SourceProps) {
+ return (
+
+ )}
+ />
+
+ );
+}
+
+const SourcesImpl: SourceMessagePartComponent = ({
+ url,
+ title,
+ sourceType,
+}) => {
+ if (sourceType !== "url" || !url) return null;
+
+ const domain = extractDomain(url);
+ const displayTitle = title || domain;
+
+ return (
+
+
+ {displayTitle}
+
+
+ );
+};
+
+const Sources = memo(SourcesImpl) as unknown as SourceMessagePartComponent & {
+ Root: typeof Source;
+ Icon: typeof SourceIcon;
+ Title: typeof SourceTitle;
+};
+
+Sources.displayName = "Sources";
+Sources.Root = Source;
+Sources.Icon = SourceIcon;
+Sources.Title = SourceTitle;
+
+export {
+ Sources,
+ Source,
+ SourceIcon,
+ SourceTitle,
+ badgeVariants as sourceVariants,
+};
diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index a16d1f3c2e..567c25b53f 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -9,7 +9,12 @@ import {
import { MessageTiming } from "@/components/assistant-ui/message-timing";
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning";
+import { Sources } from "@/components/assistant-ui/sources";
import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import { ToolGroup } from "@/components/assistant-ui/tool-group";
+import { WebSearchToolUI } from "@/components/assistant-ui/tool-ui-web-search";
+import { PythonToolUI } from "@/components/assistant-ui/tool-ui-python";
+import { TerminalToolUI } from "@/components/assistant-ui/tool-ui-terminal";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { Button } from "@/components/ui/button";
import { sentAudioNames } from "@/features/chat/api/chat-adapter";
@@ -52,7 +57,7 @@ import {
TerminalIcon,
XIcon,
} from "lucide-react";
-import { type FC, useCallback, useRef, useState } from "react";
+import { type FC, useCallback, useEffect, useRef, useState } from "react";
import { useChatRuntimeStore } from "@/features/chat/stores/chat-runtime-store";
export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
@@ -384,6 +389,20 @@ const CodeToolsToggle: FC = () => {
const ToolStatusDisplay: FC = () => {
const toolStatus = useChatRuntimeStore((s) => s.toolStatus);
+ const [elapsed, setElapsed] = useState(0);
+
+ useEffect(() => {
+ if (!toolStatus) {
+ setElapsed(0);
+ return;
+ }
+ setElapsed(0);
+ const interval = setInterval(() => {
+ setElapsed((prev) => prev + 1);
+ }, 1000);
+ return () => clearInterval(interval);
+ }, [toolStatus]);
+
if (!toolStatus) return null;
const isRunning = toolStatus.startsWith("Running");
const StatusIcon = isRunning ? TerminalIcon : GlobeIcon;
@@ -392,6 +411,7 @@ const ToolStatusDisplay: FC = () => {
);
@@ -485,7 +505,16 @@ const AssistantMessage: FC = () => {
Text: MarkdownText,
Reasoning: Reasoning,
ReasoningGroup: ReasoningGroup,
- tools: { Fallback: ToolFallback },
+ Source: Sources,
+ ToolGroup: ToolGroup,
+ tools: {
+ by_name: {
+ web_search: WebSearchToolUI,
+ python: PythonToolUI,
+ terminal: TerminalToolUI,
+ },
+ Fallback: ToolFallback,
+ },
}}
/>
@@ -260,6 +364,7 @@ function StreamdownBlock(props: BlockProps) {
/>
{svgSource &&
+
+ {children}
+
+
+
+ {markdown}
+
+
+ );
+}
+
+const PythonToolUIImpl: ToolCallMessagePartComponent = ({
+ args,
+ result,
+ status,
+}) => {
+ const code = (args as { code?: string })?.code ?? "";
+ const firstLine = code.split("\n")[0]?.slice(0, 60) ?? "";
+ const isRunning = status?.type === "running";
+ const output =
+ typeof result === "string"
+ ? result
+ : result
+ ? JSON.stringify(result, null, 2)
+ : "";
+
+ return (
+
+ {/* Code + copy */}
+ {code && (
+
+
+
+ )}
+
+
+ ) : output ? (
+
+
+ ) : null}
+
+ output
+
+
+ {truncate(output)}
+
+
+ {isRunning ? (
+
+
+
+ ) : output ? (
+
+
+ ) : null}
+
+ output
+
+
+ {truncate(output)}
+
+
+
+ ) : sources.length > 0 ? (
+
+ {sources.map((source) => (
+
+
+ {source.title}
+
+
+ ))}
+
+ ) : result ? (
+
+
+ ) : null}
+
+ {typeof result === "string"
+ ? result
+ : JSON.stringify(result, null, 2)}
+
+
+
+ );
+}
+
function ChatTemplateSection({
onReloadModel,
}: {
diff --git a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
index 43736d6257..b7f222e3bf 100644
--- a/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
+++ b/studio/frontend/src/features/chat/stores/chat-runtime-store.ts
@@ -10,6 +10,9 @@ import {
} from "../types/runtime";
const AUTO_TITLE_KEY = "unsloth_chat_auto_title";
+const AUTO_HEAL_TOOL_CALLS_KEY = "unsloth_auto_heal_tool_calls";
+const MAX_TOOL_CALLS_KEY = "unsloth_max_tool_calls_per_message";
+const TOOL_CALL_TIMEOUT_KEY = "unsloth_tool_call_timeout";
function canUseStorage(): boolean {
return typeof window !== "undefined";
@@ -35,6 +38,27 @@ function saveBool(key: string, value: boolean): void {
}
}
+function loadInt(key: string, fallback: number): number {
+ if (!canUseStorage()) return fallback;
+ try {
+ const raw = localStorage.getItem(key);
+ if (raw === null) return fallback;
+ const parsed = parseInt(raw, 10);
+ return Number.isNaN(parsed) ? fallback : parsed;
+ } catch {
+ return fallback;
+ }
+}
+
+function saveInt(key: string, value: number): void {
+ if (!canUseStorage()) return;
+ try {
+ localStorage.setItem(key, String(value));
+ } catch {
+ // ignore
+ }
+}
+
type ChatRuntimeStore = {
params: InferenceParams;
models: ChatModelSummary[];
@@ -51,6 +75,9 @@ type ChatRuntimeStore = {
codeToolsEnabled: boolean;
toolStatus: string | null;
generatingStatus: string | null;
+ autoHealToolCalls: boolean;
+ maxToolCallsPerMessage: number;
+ toolCallTimeout: number;
kvCacheDtype: string | null;
defaultChatTemplate: string | null;
chatTemplateOverride: string | null;
@@ -73,6 +100,9 @@ type ChatRuntimeStore = {
setCodeToolsEnabled: (enabled: boolean) => void;
setToolStatus: (status: string | null) => void;
setGeneratingStatus: (status: string | null) => void;
+ setAutoHealToolCalls: (enabled: boolean) => void;
+ setMaxToolCallsPerMessage: (value: number) => void;
+ setToolCallTimeout: (value: number) => void;
setKvCacheDtype: (dtype: string | null) => void;
setChatTemplateOverride: (template: string | null) => void;
setPendingAudio: (base64: string, name: string) => void;
@@ -95,6 +125,9 @@ export const useChatRuntimeStore = create
+
+ Auto Heal Tool Calls 🦥
+
+ Fix malformed tool calls from the model automatically.
+
+