From 98db7d3fc8f16dce6fd49569cc3bdede0981bf43 Mon Sep 17 00:00:00 2001
From: Nate <sestinj@gmail.com>
Date: Thu, 21 Nov 2024 23:07:01 -0800
Subject: [PATCH] tool use ui improvements

---
 .continueignore                               |  3 ++-
 .../StepContainer/StepContainer.tsx           |  5 +---
 gui/src/hooks/useChatHandler.ts               | 13 ++++++++++
 gui/src/pages/gui/Chat.tsx                    | 25 ++++++++-----------
 .../ToolCallDiv/FunctionSpecificHeader.tsx    |  2 +-
 gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx  | 22 ++++------------
 6 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/.continueignore b/.continueignore
index 7e0d0c115f..79e924012d 100644
--- a/.continueignore
+++ b/.continueignore
@@ -4,4 +4,5 @@ docs/docs/languages
 .idea/
 .vscode/
 .archive/
-**/*.scm
\ No newline at end of file
+**/*.scm
+**/*.diff
\ No newline at end of file
diff --git a/gui/src/components/StepContainer/StepContainer.tsx b/gui/src/components/StepContainer/StepContainer.tsx
index d3adcb388d..593fef7321 100644
--- a/gui/src/components/StepContainer/StepContainer.tsx
+++ b/gui/src/components/StepContainer/StepContainer.tsx
@@ -77,10 +77,7 @@ export default function StepContainer(props: StepContainerProps) {
 
   return (
     <div
-      // className={isStepAheadOfCurCheckpoint ? "opacity-25" : "relative"}
-      style={{
-        minHeight: props.isLast ? "50vh" : 0,
-      }}
+    // className={isStepAheadOfCurCheckpoint ? "opacity-25" : "relative"}
     >
       <ContentDiv>
         {uiConfig?.displayRawMarkdown ? (
diff --git a/gui/src/hooks/useChatHandler.ts b/gui/src/hooks/useChatHandler.ts
index 45b3912335..8fcbb2749f 100644
--- a/gui/src/hooks/useChatHandler.ts
+++ b/gui/src/hooks/useChatHandler.ts
@@ -29,6 +29,7 @@ import { defaultModelSelector } from "../redux/selectors/modelSelectors";
 import {
   abortStream,
   acceptToolCall,
+  addContextItemsAtIndex,
   addPromptCompletionPair,
   clearLastEmptyResponse,
   initNewActiveMessage,
@@ -398,6 +399,18 @@ function useChatHandler(dispatch: Dispatch, ideMessenger: IIdeMessenger) {
       };
 
       dispatch(streamUpdate(newMessage));
+      dispatch(
+        addContextItemsAtIndex({
+          index: history.length,
+          contextItems: toolOutput.map((contextItem) => ({
+            ...contextItem,
+            id: {
+              providerTitle: "toolCall",
+              itemId: toolCallId,
+            },
+          })),
+        }),
+      );
       dispatch(acceptToolCall());
       activeRef.current = true;
       dispatch(setActive());
diff --git a/gui/src/pages/gui/Chat.tsx b/gui/src/pages/gui/Chat.tsx
index 47135f7d5e..a858c09a8f 100644
--- a/gui/src/pages/gui/Chat.tsx
+++ b/gui/src/pages/gui/Chat.tsx
@@ -6,16 +6,8 @@ import {
 } from "@heroicons/react/24/outline";
 import { JSONContent } from "@tiptap/react";
 import { InputModifiers } from "core";
-import { renderChatMessage } from "core/util/messageContent";
 import { usePostHog } from "posthog-js/react";
-import {
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
@@ -28,6 +20,7 @@ import {
 import { ChatScrollAnchor } from "../../components/ChatScrollAnchor";
 import { useFindWidget } from "../../components/find/FindWidget";
 import TimelineItem from "../../components/gui/TimelineItem";
+import ChatIndexingPeeks from "../../components/indexing/ChatIndexingPeeks";
 import ContinueInputBox from "../../components/mainInput/ContinueInputBox";
 import { NewSessionButton } from "../../components/mainInput/NewSessionButton";
 import { TutorialCard } from "../../components/mainInput/TutorialCard";
@@ -60,11 +53,10 @@ import {
 } from "../../util";
 import { FREE_TRIAL_LIMIT_REQUESTS } from "../../util/freeTrial";
 import { getLocalStorage, setLocalStorage } from "../../util/localStorage";
+import ConfigErrorIndicator from "./ConfigError";
 import { ToolCallDiv } from "./ToolCallDiv";
 import { ToolCallButtons } from "./ToolCallDiv/ToolCallButtonsDiv";
 import ToolOutput from "./ToolCallDiv/ToolOutput";
-import ConfigErrorIndicator from "./ConfigError";
-import ChatIndexingPeeks from "../../components/indexing/ChatIndexingPeeks";
 
 const StopButton = styled.div`
   background-color: ${vscBackground};
@@ -332,7 +324,12 @@ export function Chat() {
       >
         {highlights}
         {state.history.map((item, index: number) => (
-          <Fragment key={item.message.id}>
+          <div
+            key={item.message.id}
+            style={{
+              minHeight: index === state.history.length - 1 ? "50vh" : 0,
+            }}
+          >
             <ErrorBoundary
               FallbackComponent={fallbackRender}
               onReset={() => {
@@ -351,7 +348,7 @@ export function Chat() {
                 />
               ) : item.message.role === "tool" ? (
                 <ToolOutput
-                  output={renderChatMessage(item.message)}
+                  contextItems={item.contextItems}
                   toolCallId={item.message.toolCallId}
                 />
               ) : item.message.role === "assistant" &&
@@ -401,7 +398,7 @@ export function Chat() {
                 </div>
               )}
             </ErrorBoundary>
-          </Fragment>
+          </div>
         ))}
         <ChatScrollAnchor
           scrollAreaRef={stepsDivRef}
diff --git a/gui/src/pages/gui/ToolCallDiv/FunctionSpecificHeader.tsx b/gui/src/pages/gui/ToolCallDiv/FunctionSpecificHeader.tsx
index fea85ca9f8..896e9f81a2 100644
--- a/gui/src/pages/gui/ToolCallDiv/FunctionSpecificHeader.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/FunctionSpecificHeader.tsx
@@ -14,7 +14,7 @@ export function FunctionSpecificHeader(props: FunctionSpecificHeaderProps) {
 
   switch (props.toolCall.function.name) {
     case "create_new_file":
-      message = "Continue wants to create a new file";
+      message = "Continue wants to write to a file";
       break;
     case "run_terminal_command":
       message = "Continue wants to run a terminal command.";
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx b/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx
index 44a3d4d08a..46057e90c5 100644
--- a/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/ToolOutput.tsx
@@ -1,33 +1,21 @@
+import { ContextItemWithId } from "core";
 import ContextItemsPeek from "../../../components/mainInput/ContextItemsPeek";
 
 interface ToolOutputProps {
-  output: string;
+  contextItems: ContextItemWithId[];
   toolCallId: string;
 }
 
 function ToolOutput(props: ToolOutputProps) {
-  if (
-    props.output === undefined ||
-    props.output === null ||
-    props.output.trim() === ""
-  ) {
+  if (props.contextItems.length === 0) {
     return null;
   }
+
   return (
     <div>
       <ContextItemsPeek
         isCurrentContextPeek={false}
-        contextItems={[
-          {
-            content: props.output,
-            name: "Tool Call",
-            id: {
-              itemId: props.toolCallId,
-              providerTitle: "tool-call",
-            },
-            description: "Tool Call",
-          },
-        ]}
+        contextItems={props.contextItems}
       />
     </div>
   );