From c64ce0c91864d3f389b63f7d0014b7753bb601fc Mon Sep 17 00:00:00 2001 From: Marc McIntosh Date: Thu, 7 Mar 2024 14:52:37 +0100 Subject: [PATCH] ui(chat controls): give the controls more space and use the cursor position for file upload and symbols --- src/components/ChatForm/ChatControls.tsx | 6 +-- src/components/ChatForm/ChatForm.stories.tsx | 1 + src/components/ChatForm/ChatForm.test.tsx | 2 + src/components/ChatForm/ChatForm.tsx | 40 ++++++++++++++------ src/events/chat.ts | 1 + src/hooks/useEventBusForChat.ts | 1 + 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/components/ChatForm/ChatControls.tsx b/src/components/ChatForm/ChatControls.tsx index d31b3076..72dd2b49 100644 --- a/src/components/ChatForm/ChatControls.tsx +++ b/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 = ({ host, }) => { return ( - + {Object.entries(checkboxes).map(([key, checkbox]) => { if (host === "web" && checkbox.name === "file_upload") { return null; @@ -72,6 +72,6 @@ export const ChatControls: React.FC = ({ ); })} - + ); }; diff --git a/src/components/ChatForm/ChatForm.stories.tsx b/src/components/ChatForm/ChatForm.stories.tsx index c74fe0f6..90d3cfb4 100644 --- a/src/components/ChatForm/ChatForm.stories.tsx +++ b/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: [ { diff --git a/src/components/ChatForm/ChatForm.test.tsx b/src/components/ChatForm/ChatForm.test.tsx index 2a1a946e..8086ef01 100644 --- a/src/components/ChatForm/ChatForm.test.tsx +++ b/src/components/ChatForm/ChatForm.test.tsx @@ -33,6 +33,7 @@ const App: React.FC> = (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( , diff --git a/src/components/ChatForm/ChatForm.tsx b/src/components/ChatForm/ChatForm.tsx index e10aa443..8f3786fe 100644 --- a/src/components/ChatForm/ChatForm.tsx +++ b/src/components/ChatForm/ChatForm.tsx @@ -36,10 +36,24 @@ 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]); @@ -47,19 +61,19 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => { 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", @@ -67,7 +81,7 @@ const useControlsState = ({ activeFile, snippet }: useCheckboxStateProps) => { 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 { diff --git a/src/events/chat.ts b/src/events/chat.ts index 32fb1d71..a3945a52 100644 --- a/src/events/chat.ts +++ b/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 { diff --git a/src/hooks/useEventBusForChat.ts b/src/hooks/useEventBusForChat.ts index 8c23b7df..cd5d4ac9 100644 --- a/src/hooks/useEventBusForChat.ts +++ b/src/hooks/useEventBusForChat.ts @@ -401,6 +401,7 @@ function createInitialState(): ChatState { attach: false, can_paste: false, path: "", + cursor: null, }, tokens: null, };