Merge pull request #4839 from continuedev/dallin/complex-tool-output-fix

Tools and settings fixes

Author: sestinj

core/config/load.ts

@@ -500,7 +500,7 @@ async function intermediateToFinalConfig(
     ...config,
     contextProviders,
     models,
-    tools: allTools,
+    tools: [...allTools],
     mcpServerStatuses: [],
     slashCommands: config.slashCommands ?? [],
     modelsByRole: {
@@ -529,7 +529,7 @@ async function intermediateToFinalConfig(
     (config.experimental?.modelContextProtocolServers ?? []).map(
       (server, index) => ({
         id: `continue-mcp-server-${index + 1}`,
-        name: `MCP Server ${index + 1}`,
+        name: `MCP Server`,
         ...server,
       }),
     ),

core/config/profile/doLoadConfig.ts

@@ -135,7 +135,6 @@ export default async function doLoadConfig(
         faviconUrl: server.faviconUrl,
         readonly: false,
         type: "function" as const,
-        wouldLikeTo: "",
         uri: encodeMCPToolUri(server.id, tool.name),
         group: server.name,
       }));

core/index.d.ts

@@ -903,7 +903,9 @@ export interface Tool {
   };
 
   displayTitle: string;
-  wouldLikeTo: string;
+  wouldLikeTo?: string;
+  isCurrently?: string;
+  hasAlready?: string;
   readonly: boolean;
   uri?: string;
   faviconUrl?: string;

core/llm/llm.test.ts

@@ -140,7 +140,9 @@ function testLLM(
                     },
                   },
                   type: "function",
-                  wouldLikeTo: "Say hello",
+                  wouldLikeTo: "say hello",
+                  isCurrently: "saying hello",
+                  hasAlready: "said hello",
                   readonly: true,
                   group: "Hello",
                 },

core/tools/definitions/createNewFile.ts

@@ -4,7 +4,9 @@ import { BUILT_IN_GROUP_NAME, BuiltInToolNames } from "../builtIn";
 export const createNewFileTool: Tool = {
   type: "function",
   displayTitle: "Create New File",
-  wouldLikeTo: "create a new file",
+  wouldLikeTo: "create a new file at {{{ filepath }}}",
+  isCurrently: "creating a new file at {{{ filepath }}}",
+  hasAlready: "created a new file at {{{ filepath }}}",
   group: BUILT_IN_GROUP_NAME,
   readonly: false,
   function: {

core/tools/definitions/exactSearch.ts

@@ -5,6 +5,8 @@ export const exactSearchTool: Tool = {
   type: "function",
   displayTitle: "Exact Search",
   wouldLikeTo: 'search for "{{{ query }}}" in the repository',
+  isCurrently: 'getting search results for "{{{ query }}}"',
+  hasAlready: 'retreived search results for "{{{ query }}}"',
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/readCurrentlyOpenFile.ts

@@ -5,6 +5,8 @@ export const readCurrentlyOpenFileTool: Tool = {
   type: "function",
   displayTitle: "Read Currently Open File",
   wouldLikeTo: "read the current file",
+  isCurrently: "reading the current file",
+  hasAlready: "read the current file",
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/readFile.ts

@@ -5,6 +5,8 @@ export const readFileTool: Tool = {
   type: "function",
   displayTitle: "Read File",
   wouldLikeTo: "read {{{ filepath }}}",
+  isCurrently: "reading {{{ filepath }}}",
+  hasAlready: "read {{{ filepath }}}",
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/runTerminalCommand.ts

@@ -4,7 +4,9 @@ import { BUILT_IN_GROUP_NAME, BuiltInToolNames } from "../builtIn";
 export const runTerminalCommandTool: Tool = {
   type: "function",
   displayTitle: "Run Terminal Command",
-  wouldLikeTo: "run a terminal command",
+  wouldLikeTo: "run the following terminal command:",
+  isCurrently: "running the following terminal command:",
+  hasAlready: "ran the following terminal command:",
   readonly: false,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/searchWeb.ts

@@ -6,6 +6,8 @@ export const searchWebTool: Tool = {
   type: "function",
   displayTitle: "Search Web",
   wouldLikeTo: 'search the web for "{{{ query }}}"',
+  isCurrently: 'searching the web for "{{{ query }}}"',
+  hasAlready: 'searched the web fore "{{{ query }}}"',
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/viewDiff.ts

@@ -5,7 +5,9 @@ import { BUILT_IN_GROUP_NAME, BuiltInToolNames } from "../builtIn";
 export const viewDiffTool: Tool = {
   type: "function",
   displayTitle: "View Diff",
-  wouldLikeTo: "view a diff",
+  wouldLikeTo: "view the git diff",
+  isCurrently: "getting the git diff",
+  hasAlready: "viewed the git diff",
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/viewRepoMap.ts

@@ -6,6 +6,8 @@ export const viewRepoMapTool: Tool = {
   type: "function",
   displayTitle: "View Repo Map",
   wouldLikeTo: "view the repository map",
+  isCurrently: "getting the repository map",
+  hasAlready: "viewed the repository map",
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

core/tools/definitions/viewSubdirectory.ts

@@ -4,7 +4,9 @@ import { BUILT_IN_GROUP_NAME, BuiltInToolNames } from "../builtIn";
 export const viewSubdirectoryTool: Tool = {
   type: "function",
   displayTitle: "View Subdirectory",
-  wouldLikeTo: 'view the contents of "{{{ directory_path }}}"',
+  wouldLikeTo: 'view a map of "{{{ directory_path }}}"',
+  isCurrently: 'getting a map of "{{{ directory_path }}}"',
+  hasAlready: 'viewed a map of "{{{ directory_path }}}"',
   readonly: true,
   group: BUILT_IN_GROUP_NAME,
   function: {

extensions/vscode/package-lock.json

@@ -224,7 +224,7 @@ export default function AssistantSelect() {
         >
           <div className="flex flex-row items-center gap-1.5">
             <div className="h-3 w-3 flex-shrink-0 select-none">
-              <AssistantIcon assistant={selectedProfile} />
+              <AssistantIcon size={3} assistant={selectedProfile} />
             </div>
             <span
               className={`line-clamp-1 select-none ${isLumpToolbarExpanded ? "xs:hidden sm:line-clamp-1" : ""}`}

gui/src/components/modelSelection/platform/AssistantSelect.tsx

@@ -63,20 +63,20 @@ export function UserSettingsForm() {
   }, [promptPath]);
 
   // TODO defaults are in multiple places, should be consolidated and probably not explicit here
-  const enableSessionTabs = config.ui?.showSessionTabs ?? false;
+  const showSessionTabs = config.ui?.showSessionTabs ?? false;
   const codeWrap = config.ui?.codeWrap ?? false;
   const showChatScrollbar = config.ui?.showChatScrollbar ?? false;
-  const formatMarkdownOutput = !(config.ui?.displayRawMarkdown ?? false);
-  const enableSessionTitles = !(config.disableSessionTitles ?? false);
   const readResponseTTS = config.experimental?.readResponseTTS ?? false;
+  const displayRawMarkdown = config.ui?.displayRawMarkdown ?? false;
+  const disableSessionTitles = config.disableSessionTitles ?? false;
 
   const allowAnonymousTelemetry = config.allowAnonymousTelemetry ?? true;
-  const enableIndexing = !(config.disableIndexing ?? false);
+  const disableIndexing = config.disableIndexing ?? false;
 
-  const useAutocompleteCache = config.tabAutocompleteOptions?.useCache ?? true;
-  const useChromiumForDocsCrawling =
-    config.experimental?.useChromiumForDocsCrawling ?? false;
-  const codeBlockToolbarPosition = config.ui?.codeBlockToolbarPosition ?? "top";
+  // const useAutocompleteCache = config.tabAutocompleteOptions?.useCache ?? true;
+  // const useChromiumForDocsCrawling =
+  //   config.experimental?.useChromiumForDocsCrawling ?? false;
+  // const codeBlockToolbarPosition = config.ui?.codeBlockToolbarPosition ?? "top";
   const useAutocompleteMultilineCompletions =
     config.tabAutocompleteOptions?.multilineCompletions ?? "auto";
   const fontSize = getFontSize();
@@ -112,10 +112,10 @@ export function UserSettingsForm() {
 
               <div className="flex flex-col gap-4">
                 <ToggleSwitch
-                  isToggled={enableSessionTabs}
+                  isToggled={showSessionTabs}
                   onToggle={() =>
                     handleUpdate({
-                      showSessionTabs: !enableSessionTabs,
+                      showSessionTabs: !showSessionTabs,
                     })
                   }
                   text="Show Session Tabs"
@@ -159,19 +159,19 @@ export function UserSettingsForm() {
                     text="Use Chromium for Docs Crawling"
                   /> */}
                 <ToggleSwitch
-                  isToggled={enableSessionTitles}
+                  isToggled={!disableSessionTitles}
                   onToggle={() =>
                     handleUpdate({
-                      disableSessionTitles: !enableSessionTitles,
+                      disableSessionTitles: !disableSessionTitles,
                     })
                   }
                   text="Enable Session Titles"
                 />
                 <ToggleSwitch
-                  isToggled={formatMarkdownOutput}
+                  isToggled={!displayRawMarkdown}
                   onToggle={() =>
                     handleUpdate({
-                      displayRawMarkdown: !formatMarkdownOutput,
+                      displayRawMarkdown: !displayRawMarkdown,
                     })
                   }
                   text="Format Markdown"
@@ -188,10 +188,10 @@ export function UserSettingsForm() {
                 />
 
                 <ToggleSwitch
-                  isToggled={enableIndexing}
+                  isToggled={!disableIndexing}
                   onToggle={() =>
                     handleUpdate({
-                      disableIndexing: !enableIndexing,
+                      disableIndexing: !disableIndexing,
                     })
                   }
                   text="Enable Indexing"

gui/src/pages/config/UserSettingsForm.tsx

@@ -1,7 +1,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 import { ToolCallDelta, ToolCallState } from "core";
 import Mustache from "mustache";
-import { useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import { ToolTip } from "../../../components/gui/Tooltip";
 import { useAppSelector } from "../../../redux/hooks";
 
@@ -22,14 +22,59 @@ export function ToolCallDisplay(props: ToolCallDisplayProps) {
     );
   }, [availableTools, props.toolCall]);
 
-  const wouldLikeToMessage = useMemo(() => {
-    if (!tool) return "";
+  const statusMessage = useMemo(() => {
+    if (!tool) return "Agent tool use";
 
-    const rendered = Mustache.render(
-      tool.wouldLikeTo,
-      props.toolCallState.parsedArgs,
+    const defaultToolDescription = (
+      <>
+        <code>{tool.displayTitle ?? tool.function.name}</code> <span>tool</span>
+      </>
+    );
+
+    const futureMessage = tool.wouldLikeTo ? (
+      Mustache.render(tool.wouldLikeTo, props.toolCallState.parsedArgs)
+    ) : (
+      <>
+        <span>use the</span> {defaultToolDescription}
+      </>
+    );
+
+    let intro = "";
+    let message: ReactNode = "";
+
+    if (props.toolCallState.status === "generating") {
+      intro = "is generating output to";
+      message = futureMessage;
+    } else if (props.toolCallState.status === "generated") {
+      intro = "wants to";
+      message = futureMessage;
+    } else if (props.toolCallState.status === "calling") {
+      intro = "is";
+      message = tool.isCurrently ? (
+        Mustache.render(tool.isCurrently, props.toolCallState.parsedArgs)
+      ) : (
+        <>
+          <span>using the</span> {defaultToolDescription}
+        </>
+      );
+    } else if (props.toolCallState.status === "done") {
+      intro = "";
+      message = tool.hasAlready ? (
+        Mustache.render(tool.hasAlready, props.toolCallState.parsedArgs)
+      ) : (
+        <>
+          <span>used the</span> {defaultToolDescription}
+        </>
+      );
+    } else if (props.toolCallState.status === "canceled") {
+      intro = "tried to";
+      message = futureMessage;
+    }
+    return (
+      <div className="block">
+        <span>Continue</span> {intro} {message}
+      </div>
     );
-    return rendered.trim();
   }, [props.toolCallState, tool]);
 
   const args: [string, any][] = useMemo(() => {
@@ -60,17 +105,7 @@ export function ToolCallDisplay(props: ToolCallDisplayProps) {
               {tool?.faviconUrl && (
                 <img src={tool.faviconUrl} className="h-4 w-4 rounded-sm" />
               )}
-              <div className="">
-                Continue wants to{" "}
-                {wouldLikeToMessage ? (
-                  <span>{wouldLikeToMessage}</span>
-                ) : (
-                  <>
-                    <span>use the</span> <code>{tool?.displayTitle}</code>{" "}
-                    <span>tool</span>
-                  </>
-                )}
-              </div>
+              <div className="flex">{statusMessage}</div>
             </div>
             {!!args.length ? (
               <div