dallins feedback

Author: Patrick-Erichsen

gui/src/pages/gui/ToolCallDiv/ToolCallDisplay.tsx

@@ -1,5 +1,9 @@
 import { Tool, ToolCallState } from "core";
+import { useContext, useMemo } from "react";
+import { openContextItem } from "../../../components/mainInput/belowMainInput/ContextItemsPeek";
+import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { ToolCallStatusMessage } from "./ToolCallStatusMessage";
+import { toolCallStateToContextItems } from "./utils";
 
 interface ToolCallDisplayProps {
   children: React.ReactNode;
@@ -16,11 +20,29 @@ export function ToolCallDisplay({
   icon,
   historyIndex,
 }: ToolCallDisplayProps) {
+  const ideMessenger = useContext(IdeMessengerContext);
+  const shownContextItems = useMemo(() => {
+    const contextItems = toolCallStateToContextItems(toolCallState);
+    return contextItems.filter((item) => !item.hidden);
+  }, [toolCallState]);
+
+  const isClickable = shownContextItems.length > 0;
+
+  function handleClick() {
+    if (shownContextItems.length > 0) {
+      openContextItem(shownContextItems[0], ideMessenger);
+    }
+  }
   return (
     <div className="flex flex-col justify-center px-4">
       <div className="mb-2 flex flex-col">
         <div className="flex flex-row items-center justify-between gap-1.5">
-          <div className="flex min-w-0 flex-row items-center gap-2">
+          <div
+            className={`flex min-w-0 flex-row items-center gap-2 transition-colors duration-200 ease-in-out ${
+              isClickable ? "cursor-pointer hover:brightness-125" : ""
+            }`}
+            onClick={isClickable ? handleClick : undefined}
+          >
             <div className="mt-[1px] h-4 w-4 flex-shrink-0 font-semibold">
               {icon}
             </div>

gui/src/pages/gui/ToolCallDiv/ToolCallStatusMessage.tsx

@@ -1,9 +1,6 @@
 import { Tool, ToolCallState } from "core";
 import Mustache from "mustache";
-import { useContext } from "react";
-import { openContextItem } from "../../../components/mainInput/belowMainInput/ContextItemsPeek";
-import { IdeMessengerContext } from "../../../context/IdeMessenger";
-import { getStatusIntro, toolCallStateToContextItems } from "./utils";
+import { getStatusIntro } from "./utils";
 
 interface ToolCallStatusMessageProps {
   tool: Tool | undefined;
@@ -14,13 +11,6 @@ export function ToolCallStatusMessage({
   tool,
   toolCallState,
 }: ToolCallStatusMessageProps) {
-  const ideMessenger = useContext(IdeMessengerContext);
-
-  function handleClick() {
-    if (contextItems.length > 0) {
-      openContextItem(contextItems[0], ideMessenger);
-    }
-  }
 
   if (!tool) return "Agent tool use";
 
@@ -62,18 +52,10 @@ export function ToolCallStatusMessage({
     }
   }
 
-  const contextItems = toolCallStateToContextItems(toolCallState).filter(
-    (item) => !item.hidden,
-  );
-  const isClickable = contextItems.length > 0;
-
   return (
     <div
-      className={`text-description line-clamp-4 min-w-0 break-all transition-colors duration-200 ease-in-out ${
-        isClickable ? "cursor-pointer hover:brightness-125" : ""
-      }`}
+      className="text-description line-clamp-4 min-w-0 break-all"
       data-testid="tool-call-title"
-      onClick={isClickable ? handleClick : undefined}
     >
       {`Continue ${intro} ${message}`}
     </div>