Pin button (#122)

* wip(patch show apply): fetch the patch data from the lsp

* fix(patchResult type guard): add proper type checks for patchResult.

* feat(pin open): open an unsaved file in the ide.

* refactor(pin): use a stricter regexp for detecting the end of the markdown.

* feat(pins): add apply button and share chunks cache with diffs.

* feat(pins): allow the ide to reset the diff cache when applying / saving diffs

* ui(markdown): limit pin messages to only assistant messages.

* ui(pin buttons): wrap buttons above long 📍 message

* chore(pins): remove todos and hide show button in web host

* refactor(pin): lazily fetch chunks and show warning / error message if result doesn't work.

* ui(pin): move callout to bellow the button

* chore(dev max age for dev tools): decrease to 500

* refactor(pin warning): reuse diff warning callout

* refactor(pin callout): add click handler and timeout props.

Author: MarcMcIntosh

src/app/store.ts

@@ -39,6 +39,7 @@ import {
 import { errorSlice } from "../features/Errors/errorsSlice";
 import { warningSlice } from "../features/Errors/warningSlice";
 import { pagesSlice } from "../features/Pages/pagesSlice";
+import { openFilesSlice } from "../features/OpenFiles/openFilesSlice";
 import mergeInitialState from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 import { listenerMiddleware } from "./middleware";
 
@@ -78,6 +79,7 @@ const rootReducer = combineSlices(
   errorSlice,
   warningSlice,
   pagesSlice,
+  openFilesSlice,
 );
 
 const rootPersistConfig = {
@@ -104,7 +106,7 @@ export function setUpStore(preloadedState?: Partial<RootState>) {
     reducer: persistedReducer,
     preloadedState: initialState,
     devTools: {
-      maxAge: 1000,
+      maxAge: 500,
     },
     middleware: (getDefaultMiddleware) => {
       const production = import.meta.env.MODE === "production";

src/components/ChatContent/AssistantInput.tsx

@@ -55,6 +55,7 @@ export const AssistantInput: React.FC<ChatInputProps> = ({
             onNewFileClick={newFile}
             onPasteClick={diffPasteBack}
             canPaste={activeFile.can_paste}
+            canHavePins={true}
           >
             {message}
           </Markdown>

src/components/Markdown/Markdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { Key, useCallback, useMemo, useState } from "react";
 import ReactMarkdown, { Components } from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import classNames from "classnames";
@@ -18,10 +18,22 @@ import {
   Link,
   Quote,
   Strong,
+  Button,
+  Flex,
+  Box,
 } from "@radix-ui/themes";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 import "katex/dist/katex.min.css";
+import { diffApi } from "../../services/refact";
+import {
+  useConfig,
+  useDiffApplyMutation,
+  useEventsBusForIDE,
+} from "../../hooks";
+import { selectOpenFiles } from "../../features/OpenFiles/openFilesSlice";
+import { useSelector } from "react-redux";
+import { ErrorCallout, DiffWarningCallout } from "../Callout";
 
 export type MarkdownProps = Pick<
   React.ComponentProps<typeof ReactMarkdown>,
@@ -31,15 +43,184 @@ export type MarkdownProps = Pick<
   Pick<
     MarkdownCodeBlockProps,
     "startingLineNumber" | "showLineNumbers" | "useInlineStyles" | "style"
-  >;
+  > & { canHavePins?: boolean };
+
+const MaybePinButton: React.FC<{
+  key?: Key | null;
+  children?: React.ReactNode;
+  getMarkdown: (pin: string) => string | undefined;
+}> = ({ children, getMarkdown }) => {
+  const { host } = useConfig();
+
+  const { diffPreview } = useEventsBusForIDE();
+  const { onSubmit, result: _result } = useDiffApplyMutation();
+  const openFiles = useSelector(selectOpenFiles);
+  const isPin = typeof children === "string" && children.startsWith("📍");
+  const markdown = getMarkdown(String(children));
+
+  const [errorMessage, setErrorMessage] = useState<{
+    type: "warning" | "error";
+    text: string;
+  } | null>(null);
+
+  const [getPatch, _patchResult] =
+    diffApi.useLazyPatchSingleFileFromTicketQuery();
+
+  const handleShow = useCallback(() => {
+    if (typeof children !== "string") return;
+    if (!markdown) return;
+
+    getPatch({ pin: children, markdown })
+      .unwrap()
+      .then((patch) => {
+        if (patch.chunks.length === 0) {
+          throw new Error("No Chunks to show");
+        }
+        diffPreview(patch);
+      })
+      .catch(() => {
+        setErrorMessage({ type: "warning", text: "No patch to show" });
+      });
+  }, [children, diffPreview, getPatch, markdown]);
+
+  const handleApply = useCallback(() => {
+    if (typeof children !== "string") return;
+    if (!markdown) return;
+    getPatch({ pin: children, markdown })
+      .unwrap()
+      .then((patch) => {
+        const files = patch.results.reduce<string[]>((acc, cur) => {
+          const { file_name_add, file_name_delete, file_name_edit } = cur;
+          if (file_name_add) acc.push(file_name_add);
+          if (file_name_delete) acc.push(file_name_delete);
+          if (file_name_edit) acc.push(file_name_edit);
+          return acc;
+        }, []);
+
+        if (files.length === 0) {
+          setErrorMessage({ type: "warning", text: "No chunks to apply" });
+          return;
+        }
+
+        const fileIsOpen = files.some((file) => openFiles.includes(file));
+
+        if (fileIsOpen) {
+          diffPreview(patch);
+        } else {
+          const chunks = patch.chunks;
+          const toApply = chunks.map(() => true);
+          void onSubmit({ chunks, toApply });
+        }
+      })
+      .catch((error: Error) => {
+        setErrorMessage({
+          type: "error",
+          text: error.message
+            ? "Failed to apply patch: " + error.message
+            : "Failed to apply patch.",
+        });
+      });
+  }, [children, diffPreview, getPatch, markdown, onSubmit, openFiles]);
+
+  const handleCalloutClick = useCallback(() => {
+    setErrorMessage(null);
+  }, []);
+
+  if (isPin) {
+    return (
+      <Box>
+        <Flex my="2" gap="2" wrap="wrap-reverse">
+          <Text
+            as="p"
+            wrap="wrap"
+            style={{ lineBreak: "anywhere", wordBreak: "break-all" }}
+          >
+            {children}
+          </Text>
+          <Flex gap="2" justify="end" ml="auto">
+            {host !== "web" && (
+              <Button
+                size="1"
+                // loading={patchResult.isFetching}
+                onClick={handleShow}
+                title="Show Patch"
+                disabled={!!errorMessage}
+              >
+                Open
+              </Button>
+            )}
+            <Button
+              size="1"
+              // loading={patchResult.isFetching}
+              onClick={handleApply}
+              disabled={!!errorMessage}
+              title="Apply patch"
+            >
+              Apply
+            </Button>
+          </Flex>
+        </Flex>
+        {errorMessage && errorMessage.type === "error" && (
+          <ErrorCallout onClick={handleCalloutClick} timeout={3000}>
+            {errorMessage.text}
+          </ErrorCallout>
+        )}
+        {errorMessage && errorMessage.type === "warning" && (
+          <DiffWarningCallout
+            timeout={3000}
+            onClick={handleCalloutClick}
+            message={errorMessage.text}
+          />
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Text my="2" as="p">
+      {children}
+    </Text>
+  );
+};
+
+function processPinAndMarkdown(message?: string | null): Map<string, string> {
+  if (!message) return new Map<string, string>();
+
+  const regexp = /📍[\s\S]*?\n```\n/g;
+
+  const results = message.match(regexp) ?? [];
+
+  const pinsAndMarkdown = results.map<[string, string]>((result) => {
+    const firstNewLine = result.indexOf("\n");
+    const pin = result.slice(0, firstNewLine);
+    const markdown = result.slice(firstNewLine + 1);
+    return [pin, markdown];
+  });
+
+  const hashMap = new Map(pinsAndMarkdown);
+
+  return hashMap;
+}
 
 const _Markdown: React.FC<MarkdownProps> = ({
   children,
   allowedElements,
   unwrapDisallowed,
-
+  canHavePins,
   ...rest
 }) => {
+  const pinsAndMarkdown = useMemo<Map<string, string>>(
+    () => processPinAndMarkdown(children),
+    [children],
+  );
+
+  const getMarkDownForPin = useCallback(
+    (pin: string) => {
+      return pinsAndMarkdown.get(pin);
+    },
+    [pinsAndMarkdown],
+  );
+
   const components: Partial<Components> = useMemo(() => {
     return {
       ol(props) {
@@ -56,6 +237,9 @@ const _Markdown: React.FC<MarkdownProps> = ({
         return <MarkdownCodeBlock {...props} {...rest} />;
       },
       p({ color: _color, ref: _ref, node: _node, ...props }) {
+        if (canHavePins) {
+          return <MaybePinButton {...props} getMarkdown={getMarkDownForPin} />;
+        }
         return <Text my="2" as="p" {...props} />;
       },
       h1({ color: _color, ref: _ref, node: _node, ...props }) {
@@ -101,7 +285,7 @@ const _Markdown: React.FC<MarkdownProps> = ({
         return <Em {...props} />;
       },
     };
-  }, [rest]);
+  }, [getMarkDownForPin, rest, canHavePins]);
   return (
     <ReactMarkdown
       className={styles.markdown}

src/events/index.ts

@@ -13,15 +13,21 @@ import type { TipOfTheDayState } from "../features/TipOfTheDay";
 import type { PageSliceState } from "../features/Pages/pagesSlice";
 import type { TourState } from "../features/Tour";
 import type { FIMDebugState } from "../hooks";
+
 // import { rootReducer } from "../app/store";
 export { updateConfig, type Config } from "../features/Config/configSlice";
 export { type FileInfo, setFileInfo } from "../features/Chat/activeFile";
+export {
+  setOpenFiles,
+  type OpenFilesState,
+} from "../features/OpenFiles/openFilesSlice";
 export {
   type Snippet,
   setSelectedSnippet,
 } from "../features/Chat/selectedSnippet";
 export type { FimDebugData } from "../services/refact/fim";
 export type { ChatHistoryItem } from "../features/History/historySlice";
+export { resetDiffApi } from "../services/refact/diffs";
 // TODO: re-exporting from redux seems to break things :/
 export type InitialState = {
   fim: FIMDebugState;

src/features/OpenFiles/openFilesSlice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type OpenFilesState = {
+  files: string[];
+};
+
+const initialState: OpenFilesState = {
+  files: [],
+};
+
+export const openFilesSlice = createSlice({
+  name: "openFiles",
+  initialState,
+  reducers: {
+    setOpenFiles: (state, action: PayloadAction<string[]>) => {
+      state.files = action.payload;
+    },
+  },
+  selectors: {
+    selectOpenFiles: (state) => state.files,
+  },
+});
+
+export const { setOpenFiles } = openFilesSlice.actions;
+export const { selectOpenFiles } = openFilesSlice.selectors;

src/hooks/useEventBusForApp.ts

@@ -5,12 +5,14 @@ import { useConfig } from "./useConfig";
 import { updateConfig } from "../features/Config/configSlice";
 import { setFileInfo } from "../features/Chat/activeFile";
 import { setSelectedSnippet } from "../features/Chat/selectedSnippet";
-import { newChatAction } from "../events";
+import { setOpenFiles } from "../features/OpenFiles/openFilesSlice";
+import { newChatAction } from "../features/Chat/Thread/actions";
 import {
   isPageInHistory,
   push,
   selectPages,
 } from "../features/Pages/pagesSlice";
+import { diffApi, resetDiffApi } from "../services/refact/diffs";
 
 export function useEventBusForApp() {
   const config = useConfig();
@@ -37,6 +39,14 @@ export function useEventBusForApp() {
         }
         dispatch(newChatAction(event.data.payload));
       }
+
+      if (setOpenFiles.match(event.data)) {
+        dispatch(event.data);
+      }
+
+      if (resetDiffApi.match(event.data)) {
+        dispatch(diffApi.util.resetApiState());
+      }
     };
 
     window.addEventListener("message", listener);

src/services/refact/consts.ts

@@ -15,3 +15,4 @@ export const DOCUMENTATION_LIST = `/v1/docs-list`;
 export const DOCUMENTATION_ADD = `/v1/docs-add`;
 export const DOCUMENTATION_REMOVE = `/v1/docs-remove`;
 export const PING_URL = `/v1/ping`;
+export const PATCH_URL = `/v1/patch-single-file-from-ticket`;