Skip to content

Make tool call bubbles toggleable in chat UI #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Make tool call bubbles toggleable in chat UI #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9319832
Initial plan
Copilot Dec 9, 2025
a9f8c2d
add tool call visibility toggle controls
Copilot Dec 9, 2025
e2ef1d4
default tool call toggle to true
Copilot Dec 9, 2025
bf6fabf
add tool call toggle to ts-llamaindex and ts-vercel-ai
Copilot Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions py-langchain/frontend/src/components/chat-message-bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,12 @@ function ToolCallDisplay({
);
}

export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; allMessages?: Message[] }) {
export function ChatMessageBubble(props: {
message: Message;
aiEmoji?: string;
allMessages?: Message[];
showToolCalls?: boolean;
}) {
const toolCalls = props.message.type === 'ai' ? props.message.tool_calls || [] : [];

// Get message content as string
Expand Down Expand Up @@ -107,7 +112,7 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
const toolResultContent = getToolResultContent();

// Show tool calls if we have any
const shouldShowToolCalls = hasToolCalls;
const shouldShowToolCalls = (props.showToolCalls ?? true) && hasToolCalls;

if (!(['human', 'ai'].includes(props.message.type) && (hasContent || shouldShowToolCalls))) {
return null;
Expand Down Expand Up @@ -145,4 +150,4 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
</div>
</div>
);
}
}
24 changes: 22 additions & 2 deletions py-langchain/frontend/src/components/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,20 @@ function ChatMessages(props: {
emptyStateComponent: ReactNode;
aiEmoji?: string;
className?: string;
showToolCalls?: boolean;
}) {
const showToolCalls = props.showToolCalls ?? true;
return (
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
{props.messages.map((m) => {
return (
<ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} allMessages={props.messages} />
<ChatMessageBubble
key={m.id}
message={m}
aiEmoji={props.aiEmoji}
allMessages={props.messages}
showToolCalls={showToolCalls}
/>
);
})}
</div>
Expand Down Expand Up @@ -125,6 +133,7 @@ export function ChatWindow(props: {
}) {
const [threadId, setThreadId] = useQueryState("threadId");
const [input, setInput] = useState("");
const [showToolCalls, setShowToolCalls] = useState(true);

const fetchWithCredentials = (url: string | URL | Request, options = {}) => {
return fetch(url, {
Expand Down Expand Up @@ -184,6 +193,7 @@ export function ChatWindow(props: {
aiEmoji={props.emoji}
messages={chat.messages}
emptyStateComponent={props.emptyStateComponent}
showToolCalls={showToolCalls}
/>
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
{!!chat.interrupt?.value && (
Expand Down Expand Up @@ -229,7 +239,17 @@ export function ChatWindow(props: {
onSubmit={sendMessage}
loading={isChatLoading()}
placeholder={props.placeholder ?? "What can I help you with?"}
></ChatInput>
>
<label className="flex items-center gap-2 text-sm text-muted-foreground">
<input
type="checkbox"
className="w-4 h-4"
checked={showToolCalls}
onChange={(e) => setShowToolCalls(e.target.checked)}
/>
Show tool calls
</label>
</ChatInput>
</div>
}
></StickyToBottomContent>
Expand Down
11 changes: 8 additions & 3 deletions ts-langchain/src/components/chat-message-bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,12 @@ function ToolCallDisplay({
);
}

export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; allMessages?: Message[] }) {
export function ChatMessageBubble(props: {
message: Message;
aiEmoji?: string;
allMessages?: Message[];
showToolCalls?: boolean;
}) {
const toolCalls = props.message.type === 'ai' ? props.message.tool_calls || [] : [];

// Get message content as string
Expand Down Expand Up @@ -107,7 +112,7 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
const toolResultContent = getToolResultContent();

// Show tool calls if we have any
const shouldShowToolCalls = hasToolCalls;
const shouldShowToolCalls = (props.showToolCalls ?? true) && hasToolCalls;

if (!(['human', 'ai'].includes(props.message.type) && (hasContent || shouldShowToolCalls))) {
return null;
Expand Down Expand Up @@ -145,4 +150,4 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
</div>
</div>
);
}
}
26 changes: 24 additions & 2 deletions ts-langchain/src/components/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,21 @@ function ChatMessages(props: {
emptyStateComponent: ReactNode;
aiEmoji?: string;
className?: string;
showToolCalls?: boolean;
}) {
const showToolCalls = props.showToolCalls ?? true;
return (
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
{props.messages.map((m, i) => {
return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} allMessages={props.messages} />;
return (
<ChatMessageBubble
key={m.id}
message={m}
aiEmoji={props.aiEmoji}
allMessages={props.messages}
showToolCalls={showToolCalls}
/>
);
})}
</div>
);
Expand Down Expand Up @@ -116,6 +126,7 @@ export function ChatWindow(props: {
}) {
const [threadId, setThreadId] = useQueryState('threadId');
const [input, setInput] = useState('');
const [showToolCalls, setShowToolCalls] = useState(true);
const chat = useStream({
apiUrl: props.endpoint,
assistantId: 'agent',
Expand Down Expand Up @@ -160,6 +171,7 @@ export function ChatWindow(props: {
aiEmoji={props.emoji}
messages={chat.messages}
emptyStateComponent={props.emptyStateComponent}
showToolCalls={showToolCalls}
/>
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
<TokenVaultInterruptHandler interrupt={chat.interrupt} onFinish={() => chat.submit(null)} />
Expand All @@ -176,7 +188,17 @@ export function ChatWindow(props: {
onSubmit={sendMessage}
loading={isChatLoading()}
placeholder={props.placeholder ?? 'What can I help you with?'}
></ChatInput>
>
<label className="flex items-center gap-2 text-sm text-muted-foreground">
<input
type="checkbox"
className="w-4 h-4"
checked={showToolCalls}
onChange={(e) => setShowToolCalls(e.target.checked)}
/>
Show tool calls
</label>
</ChatInput>
</div>
}
></StickyToBottomContent>
Expand Down
7 changes: 4 additions & 3 deletions ts-llamaindex/src/components/chat-message-bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,11 @@ function ToolCallDisplay({ toolCall }: {
);
}

export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string }) {
export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string; showToolCalls?: boolean }) {
const { message, aiEmoji } = props;
const text = uiMessageToText(message);
const toolCalls = getToolCallsFromMessage(message);
const shouldShowToolCalls = (props.showToolCalls ?? true) && toolCalls.length > 0;

return (
<div
Expand All @@ -138,7 +139,7 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string

<div className="chat-message-bubble whitespace-pre-wrap flex flex-col prose dark:prose-invert max-w-none">
{/* Render tool calls if present */}
{toolCalls.length > 0 && (
{shouldShowToolCalls && (
<div className="mb-3">
{toolCalls.map((toolCall, index) => (
<ToolCallDisplay key={`${toolCall.toolCallId}-${index}`} toolCall={toolCall} />
Expand All @@ -151,4 +152,4 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
</div>
</div>
);
}
}
25 changes: 23 additions & 2 deletions ts-llamaindex/src/components/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,20 @@ function ChatMessages(props: {
emptyStateComponent: ReactNode;
aiEmoji?: string;
className?: string;
showToolCalls?: boolean;
}) {
const showToolCalls = props.showToolCalls ?? true;
return (
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
{props.messages.map((m, i) => {
return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} />;
return (
<ChatMessageBubble
key={m.id}
message={m}
aiEmoji={props.aiEmoji}
showToolCalls={showToolCalls}
/>
);
})}
</div>
);
Expand Down Expand Up @@ -125,6 +134,7 @@ export function ChatWindow(props: {
);

const [input, setInput] = useState('');
const [showToolCalls, setShowToolCalls] = useState(true);

const isChatLoading = status === 'streaming';

Expand All @@ -149,6 +159,7 @@ export function ChatWindow(props: {
aiEmoji={props.emoji}
messages={messages}
emptyStateComponent={props.emptyStateComponent}
showToolCalls={showToolCalls}
/>
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
<TokenVaultInterruptHandler interrupt={toolInterrupt} />
Expand All @@ -165,7 +176,17 @@ export function ChatWindow(props: {
onSubmit={onSubmit}
loading={isChatLoading}
placeholder={props.placeholder ?? 'What can I help you with?'}
></ChatInput>
>
<label className="flex items-center gap-2 text-sm text-muted-foreground">
<input
type="checkbox"
className="w-4 h-4"
checked={showToolCalls}
onChange={(e) => setShowToolCalls(e.target.checked)}
/>
Show tool calls
</label>
</ChatInput>
</div>
}
></StickyToBottomContent>
Expand Down
7 changes: 4 additions & 3 deletions ts-vercel-ai/src/components/chat-message-bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,11 @@ function ToolCallDisplay({ toolCall }: {
);
}

export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string }) {
export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string; showToolCalls?: boolean }) {
const { message, aiEmoji } = props;
const text = uiMessageToText(message);
const toolCalls = getToolCallsFromMessage(message);
const shouldShowToolCalls = (props.showToolCalls ?? true) && toolCalls.length > 0;

return (
<div
Expand All @@ -138,7 +139,7 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string

<div className="chat-message-bubble whitespace-pre-wrap flex flex-col prose dark:prose-invert max-w-none">
{/* Render tool calls if present */}
{toolCalls.length > 0 && (
{shouldShowToolCalls && (
<div className="mb-3">
{toolCalls.map((toolCall, index) => (
<ToolCallDisplay key={`${toolCall.toolCallId}-${index}`} toolCall={toolCall} />
Expand All @@ -151,4 +152,4 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
</div>
</div>
);
}
}
31 changes: 28 additions & 3 deletions ts-vercel-ai/src/components/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,20 @@ function ChatMessages(props: {
emptyStateComponent: ReactNode;
aiEmoji?: string;
className?: string;
showToolCalls?: boolean;
}) {
const showToolCalls = props.showToolCalls ?? true;
return (
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
{props.messages.map((m, i) => {
return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} />;
return (
<ChatMessageBubble
key={m.id}
message={m}
aiEmoji={props.aiEmoji}
showToolCalls={showToolCalls}
/>
);
})}
</div>
);
Expand Down Expand Up @@ -126,6 +135,7 @@ export function ChatWindow(props: {
);

const [input, setInput] = useState('');
const [showToolCalls, setShowToolCalls] = useState(true);

const isChatLoading = status === 'streaming';

Expand All @@ -146,7 +156,12 @@ export function ChatWindow(props: {
<div>{props.emptyStateComponent}</div>
) : (
<>
<ChatMessages aiEmoji={props.emoji} messages={messages} emptyStateComponent={props.emptyStateComponent} />
<ChatMessages
aiEmoji={props.emoji}
messages={messages}
emptyStateComponent={props.emptyStateComponent}
showToolCalls={showToolCalls}
/>
<div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
<TokenVaultInterruptHandler interrupt={toolInterrupt} />
</div>
Expand All @@ -162,7 +177,17 @@ export function ChatWindow(props: {
onSubmit={onSubmit}
loading={isChatLoading}
placeholder={props.placeholder ?? 'What can I help you with?'}
></ChatInput>
>
<label className="flex items-center gap-2 text-sm text-muted-foreground">
<input
type="checkbox"
className="w-4 h-4"
checked={showToolCalls}
onChange={(e) => setShowToolCalls(e.target.checked)}
/>
Show tool calls
</label>
</ChatInput>
</div>
}
></StickyToBottomContent>
Expand Down