UI fixes 19 02 25 (#509)

* ordered code_completion_models and code_chat_models

* pass default system prompt into UI

* chore: fix prettier errors

* fix: tool use changing based on if models support tools and agent & fixes for types and stubs in caps

* fix: proper checks for default system prompt

* fix: interacted state for switching tool use manually

* fix: setting local state for first tool use set if no models, then user can click and change tool use

* fix: setting wasAdjusted even if no tool use prederermined

---------

Co-authored-by: alashchev17 <[email protected]>

Author: mitya52

refact-agent/engine/src/caps.rs

@@ -1,5 +1,6 @@
 use std::path::PathBuf;
 use std::collections::HashMap;
+use indexmap::IndexMap;
 use std::fs::File;
 use std::io::Read;
 use std::sync::Arc;
@@ -25,7 +26,7 @@ pub struct ModelRecord {
     #[serde(default)]
     pub n_ctx: usize,
     #[serde(default)]
-    pub supports_scratchpads: HashMap<String, serde_json::Value>,
+    pub supports_scratchpads: HashMap<String, Value>,
     #[serde(default)]
     pub default_scratchpad: String,
     #[serde(default)]
@@ -42,8 +43,8 @@ pub struct ModelRecord {
 
 #[derive(Debug, Deserialize)]
 pub struct ModelsOnly {
-    pub code_completion_models: HashMap<String, ModelRecord>,
-    pub code_chat_models: HashMap<String, ModelRecord>,
+    pub code_completion_models: IndexMap<String, ModelRecord>,
+    pub code_chat_models: IndexMap<String, ModelRecord>,
     pub tokenizer_rewrite_path: HashMap<String, String>,
 }
 
@@ -110,7 +111,7 @@ pub struct CodeAssistantCaps {
     #[serde(default = "default_telemetry_basic_retrieve_my_own")]
     pub telemetry_basic_retrieve_my_own: String,
     #[serde(default)]
-    pub code_completion_models: HashMap<String, ModelRecord>,
+    pub code_completion_models: IndexMap<String, ModelRecord>,
     #[serde(default)]
     #[serde(alias = "completion_model")]
     pub code_completion_default_model: String,
@@ -121,7 +122,7 @@ pub struct CodeAssistantCaps {
     #[serde(alias = "completion_n_ctx")]
     pub code_completion_n_ctx: usize,
     #[serde(default)]
-    pub code_chat_models: HashMap<String, ModelRecord>,
+    pub code_chat_models: IndexMap<String, ModelRecord>,
     #[serde(default)]
     #[serde(alias = "chat_model")]
     pub code_chat_default_model: String,
@@ -147,8 +148,8 @@ pub struct CodeAssistantCaps {
     pub running_models: Vec<String>,  // check there if a model is available or not, not in other places
     #[serde(default)]
     pub caps_version: i64,  // need to reload if it increases on server, that happens when server configuration changes
-    // #[serde(default)]
-    // pub code_chat_default_system_prompt: String,
+    #[serde(default)]
+    pub code_chat_default_system_prompt: String,
 
     #[serde(default)]
     pub customization: String,  // on self-hosting server, allows to customize yaml_configs & friends for all engineers
@@ -463,7 +464,7 @@ fn _inherit_r1_from_r0(
 }
 
 pub fn which_model_to_use<'a>(
-    models: &'a HashMap<String, ModelRecord>,
+    models: &'a IndexMap<String, ModelRecord>,
     user_wants_model: &str,
     default_model: &str,
 ) -> Result<(String, &'a ModelRecord), String> {
@@ -473,15 +474,15 @@ pub fn which_model_to_use<'a>(
     }
     let no_finetune = strip_model_from_finetune(&take_this_one.to_string());
     if let Some(model_rec) = models.get(&take_this_one.to_string()) {
-        return Ok((take_this_one.to_string(), model_rec));
+        Ok((take_this_one.to_string(), model_rec))
     } else if let Some(model_rec) = models.get(&no_finetune) {
-        return Ok((take_this_one.to_string(), model_rec));
+        Ok((take_this_one.to_string(), model_rec))
     } else {
-        return Err(format!(
+        Err(format!(
             "Model '{}' not found. Server has these models: {:?}",
             take_this_one,
             models.keys()
-        ));
+        ))
     }
 }
 

refact-agent/gui/src/__fixtures__/caps.ts

@@ -339,13 +339,15 @@ export const STUB_CAPS_RESPONSE: CapsResponse = {
     "groq-llama-3.1-8b",
     "groq-llama-3.1-70b",
   ],
+  code_chat_default_system_prompt: "default",
   caps_version: 0,
 };
 
 export const EMPTY_CAPS_RESPONSE: CapsResponse = {
   caps_version: 0,
   cloud_name: "",
   code_chat_default_model: "",
+  code_chat_default_system_prompt: "",
   code_chat_models: {},
   code_completion_default_model: "",
   code_completion_models: {},

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

@@ -6,6 +6,7 @@ import {
   useAppDispatch,
   useAppSelector,
   useGetPromptsQuery,
+  useGetCapsQuery,
 } from "../../hooks";
 import { getSelectedSystemPrompt } from "../../features/Chat/Thread/selectors";
 import { setSystemPrompt } from "../../features/Chat/Thread/actions";
@@ -30,9 +31,21 @@ export const PromptSelect: React.FC = () => {
     [onSetSelectedSystemPrompt, promptsRequest.data],
   );
 
+  const caps = useGetCapsQuery();
+
+  const default_system_prompt = useMemo(() => {
+    if (
+      caps.data?.code_chat_default_system_prompt &&
+      caps.data.code_chat_default_system_prompt !== ""
+    ) {
+      return caps.data.code_chat_default_system_prompt;
+    }
+    return "default";
+  }, [caps.data?.code_chat_default_system_prompt]);
+
   const val = useMemo(
-    () => Object.keys(selectedSystemPrompt)[0] ?? "default",
-    [selectedSystemPrompt],
+    () => Object.keys(selectedSystemPrompt)[0] ?? default_system_prompt,
+    [selectedSystemPrompt, default_system_prompt],
   );
 
   const options = useMemo(() => {
@@ -44,6 +57,12 @@ export const PromptSelect: React.FC = () => {
     });
   }, [promptsRequest.data]);
 
+  const isLoading = useMemo(
+    () =>
+      promptsRequest.isLoading || promptsRequest.isFetching || caps.isLoading,
+    [promptsRequest.isLoading, promptsRequest.isFetching, caps.isLoading],
+  );
+
   return (
     <Flex
       gap="2"
@@ -56,7 +75,7 @@ export const PromptSelect: React.FC = () => {
       <Text size="2" wrap="nowrap">
         System Prompt:
       </Text>
-      <Skeleton loading={promptsRequest.isLoading || promptsRequest.isFetching}>
+      <Skeleton loading={isLoading}>
         <Box flexGrow="1" flexShrink="0">
           <Select
             name="system prompt"

refact-agent/gui/src/hooks/useCapsForToolUse.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { selectThreadToolUse } from "../features/Chat/Thread/selectors";
 import {
   useAppSelector,
@@ -8,7 +8,12 @@ import {
   useGetUser,
 } from ".";
 
-import { getSelectedChatModel, setChatModel } from "../features/Chat";
+import {
+  getSelectedChatModel,
+  setChatModel,
+  setToolUse,
+  ToolUse,
+} from "../features/Chat";
 
 // TODO: hard coded for now.
 const PAID_AGENT_LIST = [
@@ -20,6 +25,7 @@ const PAID_AGENT_LIST = [
 ];
 
 export function useCapsForToolUse() {
+  const [wasAdjusted, setWasAdjusted] = useState(false);
   const caps = useGetCapsQuery();
   const toolUse = useAppSelector(selectThreadToolUse);
   const usage = useAgentUsage();
@@ -48,6 +54,20 @@ export function useCapsForToolUse() {
     return true;
   }, [caps.data?.code_chat_models, currentModel]);
 
+  const modelsSupportingTools = useMemo(() => {
+    const models = caps.data?.code_chat_models ?? {};
+    return Object.entries(models)
+      .filter(([_, value]) => value.supports_tools)
+      .map(([key]) => key);
+  }, [caps.data?.code_chat_models]);
+
+  const modelsSupportingAgent = useMemo(() => {
+    const models = caps.data?.code_chat_models ?? {};
+    return Object.entries(models)
+      .filter(([_, value]) => value.supports_agent)
+      .map(([key]) => key);
+  }, [caps.data?.code_chat_models]);
+
   const usableModels = useMemo(() => {
     const models = caps.data?.code_chat_models ?? {};
     const items = Object.entries(models).reduce<string[]>(
@@ -95,6 +115,37 @@ export function useCapsForToolUse() {
     }
   }, [currentModel, setCapModel, usableModels, usableModelsForPlan]);
 
+  useEffect(() => {
+    const determineNewToolUse = (): ToolUse | null => {
+      if (toolUse === "agent" && modelsSupportingAgent.length === 0) {
+        return "explore";
+      }
+      if (toolUse === "explore" && modelsSupportingTools.length === 0) {
+        return "quick";
+      }
+      return null;
+    };
+
+    const handleAutomaticToolUseChange = () => {
+      if (!caps.isSuccess || wasAdjusted) return;
+
+      const newToolUse = determineNewToolUse();
+      if (newToolUse) {
+        dispatch(setToolUse(newToolUse));
+      }
+      setWasAdjusted(true);
+    };
+
+    handleAutomaticToolUseChange();
+  }, [
+    dispatch,
+    wasAdjusted,
+    caps.isSuccess,
+    toolUse,
+    modelsSupportingAgent,
+    modelsSupportingTools,
+  ]);
+
   return {
     usableModels,
     usableModelsForPlan,

refact-agent/gui/src/services/refact/caps.ts

@@ -79,6 +79,7 @@ export type CapsResponse = {
   caps_version: number;
   cloud_name: string;
   code_chat_default_model: string;
+  code_chat_default_system_prompt: string;
   code_chat_models: Record<string, CodeChatModel>;
   code_completion_default_model: string;
   code_completion_models: Record<string, CodeCompletionModel>;