LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 09:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve tool call result handling and display in conversation components

Browse Source
This commit is contained in:
Siddhant Rai
2025-06-11 19:28:15 +05:30
parent aaecf52c99
commit 9b839655a7
4 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -26,7 +26,9 @@ import UserIcon from '../assets/user.svg';
import Accordion from '../components/Accordion';
import Avatar from '../components/Avatar';
import CopyButton from '../components/CopyButton';
import MermaidRenderer from '../components/MermaidRenderer';
import Sidebar from '../components/Sidebar';
import Spinner from '../components/Spinner';
import SpeakButton from '../components/TextToSpeechButton';
import { useDarkTheme, useOutsideAlerter } from '../hooks';
import {
@@ -36,7 +38,6 @@ import {
import classes from './ConversationBubble.module.css';
import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
import { ToolCallsType } from './types';
import MermaidRenderer from '../components/MermaidRenderer';
const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
@@ -741,7 +742,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
</button>
</div>
{isToolCallsOpen && (
<div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
<div className="fade-in ml-3 mr-5 w-[90vw] md:w-[70vw] lg:w-[50vw]">
<div className="grid grid-cols-1 gap-2">
{toolCalls.map((toolCall, index) => (
<Accordion
@@ -778,14 +779,21 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
textToCopy={JSON.stringify(toolCall.result, null, 2)}
/>
</p>
<p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
<span
className="leading-[23px] text-black dark:text-gray-400"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
{JSON.stringify(toolCall.result, null, 2)}
{toolCall.status === 'pending' && (
<span className="flex w-full items-center justify-center rounded-b-2xl p-2 dark:bg-[#222327]">
<Spinner size="small" />
</span>
</p>
)}
{toolCall.status === 'completed' && (
<p className="break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
<span
className="leading-[23px] text-black dark:text-gray-400"
style={{ fontFamily: 'IBMPlexMono-Medium' }}
>
{JSON.stringify(toolCall.result, null, 2)}
</span>
</p>
)}
</div>
</div>
</Accordion>

2
frontend/src/conversation/ConversationMessages.tsx
View File

@@ -131,7 +131,7 @@ export default function ConversationMessages({
? LAST_BUBBLE_MARGIN
: DEFAULT_BUBBLE_MARGIN;
if (query.thought || query.response) {
if (query.thought || query.response || query.tool_calls) {
const isCurrentlyStreaming =
status === 'loading' && index === queries.length - 1;
return (

9
frontend/src/conversation/conversationSlice.ts
View File

@@ -293,10 +293,11 @@ export const conversationSlice = createSlice({
);
if (existingIndex !== -1) {
Object.assign(
state.queries[index].tool_calls[existingIndex],
tool_call,
);
const existingCall = state.queries[index].tool_calls[existingIndex];
state.queries[index].tool_calls[existingIndex] = {
...existingCall,
...tool_call,
};
} else state.queries[index].tool_calls.push(tool_call);
},
updateQuery(