Fix full verbosity: show reasoning, tool calls expanded with results
- Full mode shows Thinking blocks with expand/collapse - Full mode shows all assistant messages including tool-only - Full mode expands tool calls by default with results (2000 char limit) - Session delete with confirm - Improved deploy script generates service files dynamically
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
|
||||
import { Wrench, ChevronDown, ChevronRight, Lightbulb } from "lucide-react";
|
||||
import type { Message, ToolCall } from "@/lib/types";
|
||||
|
||||
type Verbosity = "compact" | "normal" | "full";
|
||||
@@ -12,8 +12,36 @@ interface Props {
|
||||
verbosity?: Verbosity;
|
||||
}
|
||||
|
||||
function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { name: string; content: string }; showResult: boolean }) {
|
||||
const [open, setOpen] = useState(showResult);
|
||||
function ReasoningBlock({ text }: { text: string }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const preview = text.slice(0, 120);
|
||||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
|
||||
style={{ color: "#e0a030" }}
|
||||
>
|
||||
<Lightbulb size={10} />
|
||||
<span>Thinking</span>
|
||||
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
||||
</button>
|
||||
{open ? (
|
||||
<pre className="mt-1 text-[12px] whitespace-pre-wrap leading-relaxed max-h-[50vh] overflow-y-auto px-2" style={{ color: "var(--text-2)" }}>
|
||||
{text}
|
||||
</pre>
|
||||
) : (
|
||||
<p className="mt-0.5 text-[11px] px-2 line-clamp-1" style={{ color: "var(--text-3)" }}>
|
||||
{preview}{text.length > 120 ? "..." : ""}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolCallBlock({ tc, result, defaultOpen, showResult }: { tc: ToolCall; result?: { name: string; content: string }; defaultOpen: boolean; showResult: boolean }) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
let args: Record<string, unknown> = {};
|
||||
try { args = JSON.parse(tc.function.arguments); } catch {}
|
||||
|
||||
@@ -34,8 +62,8 @@ function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { na
|
||||
{JSON.stringify(args, null, 2)}
|
||||
</pre>
|
||||
{showResult && result && (
|
||||
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
|
||||
{result.content.slice(0, 1000)}{result.content.length > 1000 ? "..." : ""}
|
||||
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-48 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
|
||||
{result.content.slice(0, 2000)}{result.content.length > 2000 ? "..." : ""}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
@@ -47,17 +75,17 @@ function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { na
|
||||
export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
|
||||
const isUser = message.role === "user";
|
||||
const content = message.content || "";
|
||||
const reasoning = message.reasoning || "";
|
||||
|
||||
let toolCalls: ToolCall[] = [];
|
||||
if (message.tool_calls) {
|
||||
try { toolCalls = JSON.parse(message.tool_calls); } catch {}
|
||||
}
|
||||
|
||||
if (!content && toolCalls.length === 0) return null;
|
||||
if (!content && toolCalls.length === 0 && !reasoning) return null;
|
||||
|
||||
// Compact: no tool calls at all
|
||||
const showTools = verbosity !== "compact" && toolCalls.length > 0;
|
||||
// Full: expand tool calls and show results
|
||||
const showReasoning = verbosity === "full" && reasoning;
|
||||
const expandTools = verbosity === "full";
|
||||
|
||||
return (
|
||||
@@ -69,6 +97,10 @@ export function MessageBubble({ message, toolResults, verbosity = "normal" }: Pr
|
||||
color: isUser ? "white" : "var(--text-1)",
|
||||
}}
|
||||
>
|
||||
{/* Reasoning / thinking */}
|
||||
{showReasoning && <ReasoningBlock text={reasoning} />}
|
||||
|
||||
{/* Content */}
|
||||
{content && (
|
||||
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
|
||||
{verbosity === "compact" && content.length > 300
|
||||
@@ -76,24 +108,30 @@ export function MessageBubble({ message, toolResults, verbosity = "normal" }: Pr
|
||||
: content}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tool calls */}
|
||||
{showTools && (
|
||||
<div>
|
||||
{expandTools ? (
|
||||
// Full: show all tool calls expanded with results
|
||||
toolCalls.map((tc) => (
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={true} />
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={true} showResult={true} />
|
||||
))
|
||||
) : toolCalls.length <= 3 ? (
|
||||
// Normal: collapsed tool calls, no results
|
||||
toolCalls.map((tc) => (
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={false} showResult={false} />
|
||||
))
|
||||
) : (
|
||||
// Normal with many tools: collapsed summary
|
||||
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No content indicator for tool-only messages in full mode */}
|
||||
{!content && showTools && verbosity === "full" && (
|
||||
<div className="text-[11px] mt-1" style={{ color: "var(--text-3)" }}>
|
||||
(tool calls only)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -113,7 +151,7 @@ function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; too
|
||||
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
||||
</button>
|
||||
{open && toolCalls.map((tc) => (
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
|
||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={false} showResult={false} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user