fix: send current model to at-command-preview & requested changes

Author: alashchev17

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

@@ -57,6 +57,7 @@ import { push } from "../../features/Pages/pagesSlice";
 import { AgentCapabilities } from "./AgentCapabilities";
 import { TokensPreview } from "./TokensPreview";
 import { useUsageCounter } from "../UsageCounter/useUsageCounter";
+import classNames from "classnames";
 
 export type ChatFormProps = {
   onSubmit: (str: string) => void;
@@ -68,7 +69,7 @@ export type ChatFormProps = {
 export const ChatForm: React.FC<ChatFormProps> = ({
   onSubmit,
   onClose,
-  // className,
+  className,
   unCalledTools,
 }) => {
   const dispatch = useAppDispatch();
@@ -349,7 +350,7 @@ export const ChatForm: React.FC<ChatFormProps> = ({
         {shouldAgentCapabilitiesBeShown && <AgentCapabilities />}
         <Form
           disabled={disableSend}
-          className={styles.chatForm__form}
+          className={classNames(styles.chatForm__form, className)}
           onSubmit={handleSubmit}
         >
           <FilesPreview files={previewFiles} />

refact-agent/gui/src/components/ChatForm/useCommandCompletionAndPreviewFiles.ts

@@ -21,6 +21,7 @@ import {
   selectChatId,
   selectIsStreaming,
   selectMessages,
+  selectModel,
   selectThreadMode,
   setUsageTokensOnCommandPreview,
 } from "../../features/Chat";
@@ -90,6 +91,7 @@ function useGetCommandPreviewQuery(
   const chatId = useAppSelector(selectChatId);
   const isStreaming = useAppSelector(selectIsStreaming);
   const currentThreadMode = useAppSelector(selectThreadMode);
+  const currentModel = useAppSelector(selectModel);
 
   const userMessage = maybeAddImagesToQuestion(query);
 
@@ -101,7 +103,7 @@ function useGetCommandPreviewQuery(
   };
 
   const { data } = commandsApi.useGetCommandPreviewQuery(
-    { messages: messagesToSend, meta: metaToSend },
+    { messages: messagesToSend, meta: metaToSend, model: currentModel },
     {
       skip: !hasCaps || isStreaming,
     },

refact-agent/gui/src/components/UsageCounter/UsageCounter.tsx

@@ -43,32 +43,30 @@ const InlineHoverCard: React.FC = () => {
   const { prompt_tokens } = currentThreadUsage;
 
   return (
-    <div>
-      <HoverCard.Content
-        size="1"
-        maxHeight="50vh"
-        avoidCollisions
-        align="start"
-        side="top"
-      >
-        <Flex direction="column" align="start" gap="2">
-          {maximumThreadContextTokens && (
-            <TokenDisplay
-              label="Current chat thread context size:"
-              value={maximumThreadContextTokens}
-            />
-          )}
-          <TokenDisplay
-            label="Potential tokens from current message:"
-            value={prompt_tokens}
-          />
+    <HoverCard.Content
+      size="1"
+      maxHeight="50vh"
+      avoidCollisions
+      align="start"
+      side="top"
+    >
+      <Flex direction="column" align="start" gap="2">
+        {maximumThreadContextTokens && (
           <TokenDisplay
-            label="Updated prompt tokens for this thread:"
-            value={totalInputTokens}
+            label="Current chat thread context size:"
+            value={maximumThreadContextTokens}
           />
-        </Flex>
-      </HoverCard.Content>
-    </div>
+        )}
+        <TokenDisplay
+          label="Potential tokens from current message:"
+          value={prompt_tokens}
+        />
+        <TokenDisplay
+          label="Updated prompt tokens for this thread:"
+          value={totalInputTokens}
+        />
+      </Flex>
+    </HoverCard.Content>
   );
 };
 

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

@@ -85,7 +85,7 @@ export const commandsApi = createApi({
       CommandPreviewRequest
     >({
       queryFn: async (args, api, _opts, baseQuery) => {
-        const { messages, meta } = args;
+        const { messages, meta, model } = args;
         const state = api.getState() as RootState;
         const port = state.config.lspPort;
         const url = `http://127.0.0.1:${port}${AT_COMMAND_PREVIEW}`;
@@ -94,7 +94,7 @@ export const commandsApi = createApi({
           method: "POST",
           credentials: "same-origin",
           redirect: "follow",
-          body: { messages, meta },
+          body: { messages, meta, model },
         });
 
         if (response.error) return { error: response.error };
@@ -185,6 +185,7 @@ function isCommandPreviewContent(json: unknown): json is CommandPreviewContent {
 export type CommandPreviewRequest = {
   messages: ChatMessages;
   meta: ChatMeta;
+  model: string;
 };
 
 export type CommandPreviewResponse = {