Enhance ToolUseSwitch component and improve Chat test coverage

refact-agent/gui/src/components/ChatForm/ToolUseSwitch.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { Flex, SegmentedControl, Text, HoverCard } from "@radix-ui/themes";
+import React, { useMemo } from "react";
+import { Flex, Text } from "@radix-ui/themes";
 import { ToolUse } from "../../features/Chat/Thread";
-import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { Select, type ItemProps } from "../Select";
 
 type ToolUseSwitchProps = {
   toolUse: ToolUse;
@@ -12,50 +12,64 @@ export const ToolUseSwitch = React.forwardRef<
   HTMLDivElement,
   ToolUseSwitchProps
 >(({ toolUse, setToolUse }, ref) => {
+  const options: ItemProps[] = useMemo(() => [
+    {
+      value: "quick",
+      children: "Quick",
+      tooltip: (
+        <div>
+          <Text weight="bold" as="div">Quick</Text>
+          <Text as="p" size="2">
+            The model doesn&apos;t have access to any tools and answers
+            immediately. You still can provide context using @-commands, try
+            @help.
+          </Text>
+        </div>
+      ),
+    },
+    {
+      value: "explore",
+      children: "Explore",
+      tooltip: (
+        <div>
+          <Text weight="bold" as="div">Explore</Text>
+          <Text as="p" size="2">
+            The model has access to exploration tools and collects the
+            necessary context for you.
+          </Text>
+        </div>
+      ),
+    },
+    {
+      value: "agent",
+      children: "Agent",
+      tooltip: (
+        <div>
+          <Text weight="bold" as="div">Agent</Text>
+          <Text as="p" size="2">
+            The model has agent capabilities, might take a long time to
+            respond. For example it can provide a high-quality context to
+            solve a problem.
+          </Text>
+        </div>
+      ),
+    },
+  ], []);
+
+  const handleChange = (value: string) => {
+    setToolUse(value as ToolUse);
+  };
+
   return (
     <Flex direction="column" gap="3" mb="2" align="start" ref={ref}>
       <Text size="2">How fast do you want the answer:</Text>
-      <Flex direction="row" gap="1" align="center">
-        <SegmentedControl.Root
-          defaultValue="quick"
-          value={toolUse}
-          onValueChange={(x) => {
-            setToolUse(x as ToolUse);
-          }}
-        >
-          <SegmentedControl.Item value="quick">Quick</SegmentedControl.Item>
-          <SegmentedControl.Item value="explore">Explore</SegmentedControl.Item>
-          <SegmentedControl.Item value="agent">Agent</SegmentedControl.Item>
-        </SegmentedControl.Root>
-        <HoverCard.Root>
-          <HoverCard.Trigger>
-            <QuestionMarkCircledIcon style={{ marginLeft: 4 }} />
-          </HoverCard.Trigger>
-          <HoverCard.Content size="2" maxWidth="280px">
-            <Text weight="bold">Quick</Text>
-            <Text as="p" size="2">
-              The model doesn&apos;t have access to any tools and answers
-              immediately. You still can provide context using @-commands, try
-              @help.
-            </Text>
-            <Text as="div" mt="2" weight="bold">
-              Explore
-            </Text>
-            <Text as="p" size="2">
-              The model has access to exploration tools and collects the
-              necessary context for you.
-            </Text>
-            <Text as="div" mt="2" weight="bold">
-              Agent
-            </Text>
-            <Text as="p" size="2">
-              The model has agent capabilities, might take a long time to
-              respond. For example it can provide a high-quality context to
-              solve a problem.
-            </Text>
-          </HoverCard.Content>
-        </HoverCard.Root>
-      </Flex>
+      <Select
+        title="Response speed mode"
+        options={options}
+        value={toolUse}
+        onChange={handleChange}
+        contentPosition="popper"
+      />
     </Flex>
   );
 });

refact-agent/gui/src/features/Chat/Chat.test.tsx

@@ -234,9 +234,13 @@
 
     expect(textarea).not.toBeNull();
 
-    const quickButtons = app.getAllByText(/quick/i);
+    // Click on the response mode dropdown trigger
+    const dropdownTrigger = app.getByTitle("Response speed mode");
+    await user.click(dropdownTrigger);
 
-    await user.click(quickButtons[0]);
+    // Select "Quick" option from the dropdown
+    const quickOption = app.getByRole("option", { name: /quick/i });
+    await user.click(quickOption);
 
     await user.type(textarea, "hello");
 
@@ -417,9 +421,13 @@
 
     expect(textarea).not.toBeNull();
 
-    const quickButtons = app.getAllByText(/quick/i);
+    // Click on the response mode dropdown trigger
+    const dropdownTrigger = app.getByTitle("Response speed mode");
+    await user.click(dropdownTrigger);
 
-    await user.click(quickButtons[0]);
+    // Select "Quick" option from the dropdown
+    const quickOption = app.getByRole("option", { name: /quick/i });
+    await user.click(quickOption);
 
     await user.type(textarea, "hello");