feat: adding stories for tool confirmation & better highlighting of r…

…ules and links
smallcloudai · Jan 13, 2025 · a5e81c3 · a5e81c3
1 parent 5c1676a
commit a5e81c3
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 7 deletions.
diff --git a/src/__fixtures__/confirmation.ts b/src/__fixtures__/confirmation.ts
@@ -0,0 +1,52 @@
+import { ToolConfirmationPauseReason } from "../services/refact";
+
+export const CONFIRMATIONAL_PAUSE_REASONS_WITH_PATH: ToolConfirmationPauseReason[] =
+  [
+    {
+      command: "SELECT *",
+      rule: "*",
+      type: "confirmation",
+      tool_call_id: "1",
+      integr_config_path:
+        "\\\\?\\d:\\work\\refact.ai\\refact-lsp\\.refact\\integrations\\postgres.yaml",
+    },
+  ];
+export const CONFIRMATIONAL_PAUSE_REASONS: ToolConfirmationPauseReason[] = [
+  {
+    command: "patch",
+    rule: "default",
+    type: "confirmation",
+    tool_call_id: "1",
+    integr_config_path: null,
+  },
+];
+
+export const DENIAL_PAUSE_REASONS_WITH_PATH: ToolConfirmationPauseReason[] = [
+  {
+    command: "SELECT *",
+    rule: "*",
+    type: "denial",
+    tool_call_id: "1",
+    integr_config_path:
+      "\\\\?\\d:\\work\\refact.ai\\refact-lsp\\.refact\\integrations\\postgres.yaml",
+  },
+];
+
+export const MIXED_PAUSE_REASONS: ToolConfirmationPauseReason[] = [
+  {
+    command: "SELECT *",
+    rule: "*",
+    type: "denial",
+    tool_call_id: "1",
+    integr_config_path:
+      "\\\\?\\d:\\work\\refact.ai\\refact-lsp\\.refact\\integrations\\postgres.yaml",
+  },
+  {
+    command: "DROP *",
+    rule: "*",
+    type: "confirmation",
+    tool_call_id: "1",
+    integr_config_path:
+      "\\\\?\\d:\\work\\refact.ai\\refact-lsp\\.refact\\integrations\\postgres.yaml",
+  },
+];
diff --git a/src/components/ChatForm/ToolConfirmation.stories.tsx b/src/components/ChatForm/ToolConfirmation.stories.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToolConfirmation } from "./ToolConfirmation";
+import { Provider } from "react-redux";
+import { setUpStore } from "../../app/store";
+import { Theme } from "../Theme";
+import { ToolConfirmationPauseReason } from "../../services/refact";
+import { AbortControllerProvider } from "../../contexts/AbortControllers";
+import {
+  CONFIRMATIONAL_PAUSE_REASONS,
+  CONFIRMATIONAL_PAUSE_REASONS_WITH_PATH,
+  DENIAL_PAUSE_REASONS_WITH_PATH,
+  MIXED_PAUSE_REASONS,
+} from "../../__fixtures__/confirmation";
+
+const MockedStore: React.FC<{
+  pauseReasons: ToolConfirmationPauseReason[];
+}> = ({ pauseReasons }) => {
+  const store = setUpStore({
+    confirmation: {
+      pauseReasons,
+      pause: true,
+      status: {
+        wasInteracted: false,
+        confirmationStatus: false,
+      },
+    },
+  });
+
+  return (
+    <Provider store={store}>
+      <AbortControllerProvider>
+        <Theme accentColor="gray">
+          <ToolConfirmation pauseReasons={pauseReasons} />
+        </Theme>
+      </AbortControllerProvider>
+    </Provider>
+  );
+};
+
+const meta: Meta<typeof MockedStore> = {
+  title: "ToolConfirmation",
+  component: MockedStore,
+  args: {
+    pauseReasons: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    pauseReasons: CONFIRMATIONAL_PAUSE_REASONS_WITH_PATH,
+  },
+};
+
+export const WithDenial: Story = {
+  args: {
+    pauseReasons: DENIAL_PAUSE_REASONS_WITH_PATH,
+  },
+};
+
+export const Patch: Story = {
+  args: {
+    pauseReasons: CONFIRMATIONAL_PAUSE_REASONS,
+  },
+};
+
+export const Mixed: Story = {
+  args: {
+    pauseReasons: MIXED_PAUSE_REASONS,
+  },
+};
diff --git a/src/components/ChatForm/ToolConfirmation.tsx b/src/components/ChatForm/ToolConfirmation.tsx
@@ -100,7 +100,7 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
             >{`${"```bash\n"}${command}${"\n```"}`}</Markdown>
           ))}
           <Text className={styles.ToolConfirmationText}>
-            <Markdown>{message.concat("\n\n")}</Markdown>
+            <Markdown color="indigo">{message.concat("\n\n")}</Markdown>
             {maybeIntegrationPath && (
               <Text className={styles.ToolConfirmationText} mt="3">
                 You can modify the ruleset on{" "}
@@ -114,6 +114,7 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({
                       }),
                     );
                   }}
+                  color="indigo"
                 >
                   Configuration Page
                 </Link>

diff --git a/src/components/Markdown/CodeBlock.tsx b/src/components/Markdown/CodeBlock.tsx
@@ -2,7 +2,7 @@ import React, { CSSProperties } from "react";
 import SyntaxHighlighter, {
   type SyntaxHighlighterProps,
 } from "react-syntax-highlighter";
-import { Code, Text } from "@radix-ui/themes";
+import { Code, CodeProps, Text } from "@radix-ui/themes";
 import classNames from "classnames";
 import { PreTag, PreTagProps } from "./Pre";
 // import "./highlightjs.css";
@@ -19,6 +19,7 @@ export type MarkdownCodeBlockProps = React.JSX.IntrinsicElements["code"] & {
   node?: Element | undefined;
   style?: Record<string, CSSProperties> | SyntaxHighlighterProps["style"];
   wrap?: boolean;
+  color?: CodeProps["color"];
 } & Pick<
     SyntaxHighlighterProps,
     "showLineNumbers" | "startingLineNumber" | "useInlineStyles"
@@ -31,6 +32,7 @@ const _MarkdownCodeBlock: React.FC<MarkdownCodeBlockProps> = ({
   style = hljsStyle,
   onCopyClick,
   wrap = false,
+  color = undefined,
 }) => {
   const codeRef = React.useRef<HTMLElement | null>(null);
   const match = /language-(\w+)/.exec(className ?? "");
@@ -76,7 +78,10 @@ const _MarkdownCodeBlock: React.FC<MarkdownCodeBlockProps> = ({
   }
 
   return (
-    <Code className={classNames(styles.code, styles.code_inline, className)}>
+    <Code
+      className={classNames(styles.code, styles.code_inline, className)}
+      color={color}
+    >
       {children}
     </Code>
   );

diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx
@@ -52,7 +52,11 @@ export type MarkdownProps = Pick<
 > &
   Pick<
     MarkdownCodeBlockProps,
-    "startingLineNumber" | "showLineNumbers" | "useInlineStyles" | "style"
+    | "startingLineNumber"
+    | "showLineNumbers"
+    | "useInlineStyles"
+    | "style"
+    | "color"
   > & {
     canHaveInteractiveElements?: boolean;
     wrap?: boolean;
@@ -237,6 +241,7 @@ const _Markdown: React.FC<MarkdownProps> = ({
   allowedElements,
   unwrapDisallowed,
   canHaveInteractiveElements,
+  color,
   ...rest
 }) => {
   const components: Partial<Components> = useMemo(() => {
@@ -251,8 +256,8 @@ const _Markdown: React.FC<MarkdownProps> = ({
           <ul {...props} className={classNames(styles.list, props.className)} />
         );
       },
-      code({ style: _style, ...props }) {
-        return <MarkdownCodeBlock {...props} {...rest} />;
+      code({ style: _style, color: _color, ...props }) {
+        return <MarkdownCodeBlock color={color} {...props} {...rest} />;
       },
       p({ color: _color, ref: _ref, node: _node, ...props }) {
         if (canHaveInteractiveElements) {
@@ -329,7 +334,7 @@ const _Markdown: React.FC<MarkdownProps> = ({
         return <Table.Cell {...props} />;
       },
     };
-  }, [rest, canHaveInteractiveElements]);
+  }, [rest, canHaveInteractiveElements, color]);
   return (
     <ReactMarkdown
       className={styles.markdown}