feat: update Active file info, change layout for snippet button and a…

…llow user to attach file during a chat
smallcloudai · Feb 26, 2024 · 6f226f6 · 6f226f6
1 parent 0fa0fbf
commit 6f226f6
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 30 deletions.
diff --git a/TODO.md b/TODO.md
@@ -122,6 +122,10 @@
 [x] bug: add text, add file go back and edit the text fixed by prepending the command to the value
 [x] ctrl-z then enter, cursor is at wrong position
 [x] @, enter, enter, ctrl-z, enter
+[x] allow paste when no code is selected (A convenient way to insert code from the chat into the active tab (where the cursor is) is needed.)
+[ ] combobox theme not working in vscode
+[x] use a different way to disable attach than if context file is there
+[ ] remove snippet
 
 ### EVENTS TODO FOR IDEs
 

diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx
@@ -40,12 +40,11 @@ export const RightButton: React.FC<ButtonProps & { className?: string }> = (
   );
 };
 
-export const RightButtonGroup: React.FC<
-  React.PropsWithChildren & {
-    className?: string;
-    direction?: "row" | "column";
-  }
-> = (props) => {
+type FlexProps = React.ComponentProps<typeof Flex>;
+
+export const RightButtonGroup: React.FC<React.PropsWithChildren & FlexProps> = (
+  props,
+) => {
   return (
     <Flex
       {...props}

diff --git a/src/components/ChatForm/CharForm.test.tsx b/src/components/ChatForm/CharForm.test.tsx
@@ -28,6 +28,8 @@ const App: React.FC<Partial<ChatFormProps>> = (props) => {
     requestCommandsCompletion: noop,
     attachFile: {
       name: "",
+      line1: null,
+      line2: null,
       can_paste: false,
       attach: false,
     },

diff --git a/src/components/ChatForm/ChatForm.stories.tsx b/src/components/ChatForm/ChatForm.stories.tsx
@@ -75,6 +75,8 @@ const meta = {
       name: "todo.md",
       can_paste: true,
       attach: false,
+      line1: 1,
+      line2: 100,
     },
     filesInPreview: [
       {

diff --git a/src/components/ChatForm/ChatForm.tsx b/src/components/ChatForm/ChatForm.tsx
@@ -77,7 +77,6 @@ export const ChatForm: React.FC<ChatFormProps> = ({
   canChangeModel,
   isStreaming,
   onStopStreaming,
-  hasContextFile,
   commands,
   attachFile,
   requestCommandsCompletion,
@@ -129,26 +128,34 @@ export const ChatForm: React.FC<ChatFormProps> = ({
     );
   }
 
-  const checked = value.includes(`@file ${attachFile.name}`);
+  // TODO: handle multiple files?
+  const commandUpToWhiteSpace = /@file ([^\s]+)/;
+  const checked = commandUpToWhiteSpace.test(value);
+  const lines =
+    attachFile.line1 !== null && attachFile.line2 !== null
+      ? `:${attachFile.line1}-${attachFile.line2}`
+      : "";
+  const nameWithLines = `${attachFile.name}${lines}`;
 
   return (
     <Box mt="1" position="relative">
       {!isOnline && <Callout type="info">Offline</Callout>}
-      {config.host !== "web" && !hasContextFile && (
+      {config.host !== "web" && (
         <FileUpload
-          fileName={attachFile.name}
+          fileName={nameWithLines}
           onClick={() =>
             setValue((preValue) => {
-              const command = `@file ${attachFile.name}${
-                value.length > 0 ? "\n" : ""
-              }`;
               if (checked) {
-                return preValue.replace(command, "");
+                return preValue.replace(commandUpToWhiteSpace, "");
               }
+              const command = `@file ${nameWithLines}${
+                value.length > 0 ? "\n" : ""
+              }`;
               return `${command}${preValue}`;
             })
           }
           checked={checked}
+          disabled={!attachFile.can_paste}
         />
       )}
       <Flex>

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
@@ -5,14 +5,15 @@ export const FileUpload: React.FC<{
   onClick: (value: boolean) => void;
   fileName?: string;
   checked: boolean;
-}> = ({ onClick, fileName, checked }) => {
+  disabled?: boolean;
+}> = ({ onClick, fileName, ...props }) => {
   return (
     <Text as="label" size="2">
       <Flex gap="2">
         <Checkbox
-          checked={checked}
+          {...props}
           onCheckedChange={() => {
-            onClick(!checked);
+            onClick(!props.checked);
           }}
         />{" "}
         Attach {fileName ?? "a file"}

diff --git a/src/components/Markdown/Pre.tsx b/src/components/Markdown/Pre.tsx
@@ -28,20 +28,30 @@ const PreTagWithButtons: React.FC<
         {config.host === "web" ? (
           <RightButton onClick={onCopyClick}>Copy</RightButton>
         ) : (
-          <RightButtonGroup direction="column">
-            <Flex gap="1" justify="end">
+          <RightButtonGroup
+            direction="column"
+            style={{
+              position: "static",
+              minHeight: "var(--space-5)",
+            }}
+          >
+            <Flex
+              gap="1"
+              justify="end"
+              style={{ position: "absolute", right: "var(--space-1)" }}
+            >
               <Button variant="surface" size="1" onClick={onNewFileClick}>
                 New File
               </Button>
               <Button size="1" variant="surface" onClick={onCopyClick}>
                 Copy
               </Button>
+              {canPaste && (
+                <Button variant="surface" size="1" onClick={onPasteClick}>
+                  Paste
+                </Button>
+              )}
             </Flex>
-            {canPaste && (
-              <Button variant="surface" size="1" onClick={onPasteClick}>
-                Paste
-              </Button>
-            )}
           </RightButtonGroup>
         )}
         {children}

diff --git a/src/events/chat.ts b/src/events/chat.ts
@@ -232,7 +232,16 @@ export function isToggleActiveFile(
 }
 export interface ActiveFileInfo extends ActionToChat {
   type: EVENT_NAMES_TO_CHAT.ACTIVE_FILE_INFO;
-  payload: { id: string; name: string; can_paste: boolean };
+  payload: {
+    id: string;
+    file: Partial<{
+      name: string;
+      line1: number | null;
+      line2: number | null;
+      can_paste: boolean;
+      attach: boolean;
+    }>;
+  };
 }
 
 export function isActiveFileInfo(action: unknown): action is ActiveFileInfo {
@@ -286,7 +295,9 @@ export function isBackupMessages(action: unknown): action is BackUpMessages {
 
 export interface RestoreChat extends ActionToChat {
   type: EVENT_NAMES_TO_CHAT.RESTORE_CHAT;
-  payload: ChatThread & { snippet?: Snippet };
+  payload: (ChatThread & { snippet?: Snippet }) & {
+    messages: ChatThread["messages"] | [string, string][];
+  };
 }
 
 export function isRestoreChat(action: unknown): action is RestoreChat {

diff --git a/src/hooks/useEventBusForChat.ts b/src/hooks/useEventBusForChat.ts
@@ -240,13 +240,11 @@ function reducer(state: ChatState, action: ActionToChat): ChatState {
   }
 
   if (isThisChat && isActiveFileInfo(action)) {
-    const { name, can_paste } = action.payload;
     return {
       ...state,
       active_file: {
-        name,
-        can_paste,
-        attach: state.active_file.attach,
+        ...state.active_file,
+        ...action.payload.file,
       },
     };
   }
@@ -355,6 +353,8 @@ export type ChatState = {
     name: string;
     attach: boolean;
     can_paste: boolean;
+    line1: null | number;
+    line2: null | number;
   };
   selected_snippet: Snippet;
 };
@@ -390,6 +390,8 @@ function createInitialState(): ChatState {
 
     active_file: {
       name: "",
+      line1: null,
+      line2: null,
       attach: false,
       can_paste: false,
     },