ui(chat controls): give the controls more space and use the cursor po…

…sition for file upload and symbols

src/components/ChatForm/ChatControls.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, Grid, Text, Flex } from "@radix-ui/themes";
+import { Checkbox, Text, Flex } from "@radix-ui/themes";
 import { Select } from "../Select";
 import { type Config } from "../../contexts/config-context";
 
@@ -53,7 +53,7 @@ export const ChatControls: React.FC<ChatControlsProps> = ({
   host,
 }) => {
   return (
-    <Grid pt="4" pb="4" columns="2" width="auto" gap="2">
+    <Flex pt="2" pb="2" gap="2" direction="column">
       {Object.entries(checkboxes).map(([key, checkbox]) => {
         if (host === "web" && checkbox.name === "file_upload") {
           return null;
@@ -72,6 +72,6 @@ export const ChatControls: React.FC<ChatControlsProps> = ({
         );
       })}
       <CapsSelect {...selectProps} />
-    </Grid>
+    </Flex>
   );
 };

src/components/ChatForm/ChatForm.stories.tsx

@@ -78,6 +78,7 @@ const meta = {
       line1: 1,
       line2: 100,
       path: "/Users/refact/Projects/smallcloudai/refact-chat-js/todo.md",
+      cursor: 50,
     },
     filesInPreview: [
       {

src/components/ChatForm/ChatForm.test.tsx

@@ -33,6 +33,7 @@ const App: React.FC<Partial<ChatFormProps>> = (props) => {
       can_paste: false,
       attach: false,
       path: "",
+      cursor: null,
     },
     setSelectedCommand: noop,
     filesInPreview: [],
@@ -98,6 +99,7 @@ describe("ChatForm", () => {
       can_paste: false,
       attach: false,
       path: "path/to/foo.txt",
+      cursor: 2,
     };
     const { user, ...app } = render(
       <App onSubmit={fakeOnSubmit} attachFile={activeFile} />,

src/components/ChatForm/ChatForm.tsx

@@ -36,38 +36,52 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => {
     return `${activeFile.name}${lines}`;
   }, [activeFile.name, lines]);
 
+  const nameWithCursor = useMemo(() => {
+    if (activeFile.cursor === null) {
+      return activeFile.name;
+    }
+    return `${activeFile.name}:${activeFile.cursor}`;
+  }, [activeFile.name, activeFile.cursor]);
+
   const fullPathWithLines = useMemo(() => {
     return activeFile.path + lines;
   }, [activeFile.path, lines]);
 
+  const fullPathWithCursor = useMemo(() => {
+    if (activeFile.cursor === null) {
+      return activeFile.path;
+    }
+    return `${activeFile.path}:${activeFile.cursor}`;
+  }, [activeFile.path, activeFile.cursor]);
+
   const markdown = useMemo(() => {
     return "```" + snippet.language + "\n" + snippet.code + "\n```\n";
   }, [snippet.language, snippet.code]);
 
   const [checkboxes, setCheckboxes] = React.useState<
     ChatControlsProps["checkboxes"]
   >({
+    search_workspace: {
+      name: "search_workspace",
+      checked: false,
+      label: "Search workspace",
+      disabled: false,
+    },
     file_upload: {
       name: "file_upload",
       checked: false,
       label: "Attach",
       value: fullPathWithLines,
       disabled: !activeFile.name,
-      fileName: nameWithLines,
-    },
-    search_workspace: {
-      name: "search_workspace",
-      checked: false,
-      label: "Search workspace",
-      disabled: false,
+      fileName: nameWithCursor,
     },
     lookup_symbols: {
       name: "lookup_symbols",
       checked: false,
       label: "Lookup symbols ",
       value: fullPathWithLines,
       disabled: !activeFile.name,
-      fileName: nameWithLines,
+      fileName: nameWithCursor,
     },
     selected_lines: {
       name: "selected_lines",
@@ -94,11 +108,11 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => {
     setCheckboxes((prev) => {
       const lookupValue = prev.lookup_symbols.checked
         ? prev.lookup_symbols.value
-        : fullPathWithLines;
+        : fullPathWithCursor;
 
       const lookupFileName = prev.lookup_symbols.checked
         ? prev.lookup_symbols.fileName
-        : nameWithLines;
+        : nameWithCursor;
 
       const lookupDisabled = prev.lookup_symbols.checked
         ? false
@@ -118,11 +132,11 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => {
 
       const fileUploadValue = prev.file_upload.checked
         ? prev.file_upload.value
-        : fullPathWithLines;
+        : fullPathWithCursor;
 
       const fileUploadFileName = prev.file_upload.checked
         ? prev.file_upload.fileName
-        : nameWithLines;
+        : nameWithCursor;
 
       const fileUploadDisabled = prev.file_upload.checked
         ? false
@@ -156,9 +170,11 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => {
   }, [
     markdown,
     nameWithLines,
+    nameWithCursor,
     activeFile.name,
     snippet.code,
     fullPathWithLines,
+    fullPathWithCursor,
   ]);
 
   return {

src/events/chat.ts

@@ -243,6 +243,7 @@ export type FileInfo = {
   path: string;
   content?: string;
   usefulness?: number;
+  cursor: number | null;
 };
 
 export interface ActiveFileInfo extends ActionToChat {

src/hooks/useEventBusForChat.ts

@@ -401,6 +401,7 @@ function createInitialState(): ChatState {
       attach: false,
       can_paste: false,
       path: "",
+      cursor: null,
     },
     tokens: null,
   };