Merge pull request #8 from smallcloudai/system-prompt

System prompt

src/__fixtures__/chat.ts

@@ -3,6 +3,10 @@ import { ChatThread } from "../events";
 export const MARS_ROVER_CHAT: ChatThread = {
   id: "9afd6fef-3e49-40df-8aca-688af3621514",
   messages: [
+    // [
+    //   "system",
+    //   "Use backquotes for code blocks. Pay close attention to indent when editing code blocks: indent must be exactly the same as in the original code block.",
+    // ],
     ["user", "mars rover kata"],
     [
       "assistant",

src/__fixtures__/index.ts

@@ -2,3 +2,4 @@ export { STUB_CAPS_RESPONSE } from "./caps";
 export { MARS_ROVER_CHAT } from "./chat";
 export { TABLE } from "./table";
 export * from "./context_files";
+export * from "./prompts";

src/__fixtures__/prompts.ts

@@ -0,0 +1,245 @@
+import { CustomPromptsResponse, SystemPrompts } from "../services/refact";
+
+export const SYSTEM_PROMPTS: SystemPrompts = {
+  write_pseudo_code: {
+    description: "User-defined: write pseudo code",
+    text: "You are a programming assistant. Use backquotes for code blocks, but write pseudo code in comments instead of code. Replace real code offered by the user with pseudo code when you rewrite it.",
+  },
+  default: {
+    description: "",
+    text: "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+  },
+  insert_jokes: {
+    description: "User-defined: write funny comments",
+    text: "You are a programming assistant. Use backquotes for code blocks, but insert into comments inside code blocks funny remarks, a joke inspired by the code or play on words. For example ```\n// Hocus, pocus\ngetTheFocus();\n```.",
+  },
+};
+
+export const CUSTOM_PROMPTS_RESPONSE: CustomPromptsResponse = {
+  system_prompts: SYSTEM_PROMPTS,
+  toolbox_commands: {
+    explain: {
+      description: "Explain code",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nExplain this specific code block:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    user0: {
+      description: "User-defined: translate to horrible code",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE_PATH_COLON_CURSOR%\nRewrite this specific code block into a very inefficient and cryptic one, but still correct:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    typos: {
+      description: "Fix typos",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nRewrite this specific code block to fix typos, especially inside strings and comments:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    comment: {
+      description: "Comment each line",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nComment each line of this specific code block:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    shorter: {
+      description: "Make code shorter",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nMake this specific code block shorter:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    naming: {
+      description: "Improve variable names",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nImprove variable names in this specific code block:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    summarize: {
+      description: "Summarize code in 1 paragraph",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nSummarize this specific code block in 1 paragraph:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    edit: {
+      description: "Edit code, write instruction after the command",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nRe-write this specific code block, making this edit: %ARGS%\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    typehints: {
+      description: "Add type hints",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nAdd type hints to this specific code block:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    improve: {
+      description: "Rewrite this specific code block of code to improve it",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nRewrite this specific code block of code to improve it:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    bugs: {
+      description: "Find and fix bugs",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a programming assistant. Use backquotes for code blocks, give links to documentation at the end of the response.",
+        },
+        {
+          role: "user",
+          content:
+            "@file %CURRENT_FILE%:%CURSOR_LINE%\nFind and fix bugs in this specific code block:\n\n```\n%CODE_SELECTION%```\n",
+        },
+      ],
+      selection_needed: [1, 50],
+      selection_unwanted: false,
+      insert_at_cursor: false,
+    },
+    gen: {
+      description: "Create new code, provide a description after the command",
+      messages: [
+        {
+          role: "system",
+          content:
+            "You are a fill-in-the middle model, analyze suffix and prefix, generate code that goes exactly between suffix and prefix. Never rewrite existing code. Watch indent level carefully. Never fix anything outside of your generated code. Stop after writing just one thing.",
+        },
+        {
+          role: "user",
+          content: "@file %CURRENT_FILE%:%CURSOR_LINE%-\n",
+        },
+        {
+          role: "user",
+          content: "@file %CURRENT_FILE%:-%CURSOR_LINE%\n",
+        },
+        {
+          role: "user",
+          content: "%ARGS%",
+        },
+      ],
+      selection_needed: [],
+      selection_unwanted: true,
+      insert_at_cursor: true,
+    },
+  },
+};

src/components/Chart/Chart.tsx

@@ -61,9 +61,6 @@ export const Chart: React.FC<{
       {
         type: "category",
         data: dates,
-        axisLabel: {
-          fontSize: 8,
-        },
       },
     ],
     yAxis: [

src/components/ChatContent/AssistantInput.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Markdown, MarkdownProps } from "../Markdown";
+
+import { Box } from "@radix-ui/themes";
+
+type ChatInputProps = Pick<
+  MarkdownProps,
+  "onNewFileClick" | "onPasteClick" | "canPaste"
+> & {
+  children: string;
+};
+
+export const AssistantInput: React.FC<ChatInputProps> = (props) => {
+  return (
+    <Box p="2" position="relative" width="100%" style={{ maxWidth: "100%" }}>
+      <Markdown
+        onCopyClick={(text: string) => {
+          window.navigator.clipboard.writeText(text).catch(() => {
+            // eslint-disable-next-line no-console
+            console.log("failed to copy to clipboard");
+          });
+        }}
+        onNewFileClick={props.onNewFileClick}
+        onPasteClick={props.onPasteClick}
+        canPaste={props.canPaste}
+      >
+        {props.children}
+      </Markdown>
+    </Box>
+  );
+};

src/components/ChatContent/ChatContent.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChatContent } from ".";
+import { MARS_ROVER_CHAT } from "../../__fixtures__";
+
+const noop = () => ({});
+
+const meta = {
+  title: "Chat Content",
+  component: ChatContent,
+  args: {
+    messages: MARS_ROVER_CHAT.messages,
+    onRetry: noop,
+    isWaiting: false,
+    canPaste: true,
+    onNewFileClick: noop,
+    onPasteClick: noop,
+  },
+} satisfies Meta<typeof ChatContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/components/ChatContent/ChatContent.tsx

@@ -4,42 +4,16 @@ import { Markdown, MarkdownProps } from "../Markdown";
 import { UserInput } from "./UserInput";
 import { ScrollArea } from "../ScrollArea";
 import { Spinner } from "../Spinner";
-import { Box, Flex, Text } from "@radix-ui/themes";
+import { Flex, Text } from "@radix-ui/themes";
 import styles from "./ChatContent.module.css";
 import { ContextFiles } from "./ContextFiles";
+import { AssistantInput } from "./AssistantInput";
+import { SystemInput } from "./SystemInput";
 
 const PlaceHolderText: React.FC = () => (
   <Text>Welcome to Refact chat! How can I assist you today?</Text>
 );
 
-type ChatInputProps = Pick<
-  MarkdownProps,
-  "onNewFileClick" | "onPasteClick" | "canPaste"
-> & {
-  children: string;
-};
-
-const ChatInput: React.FC<ChatInputProps> = (props) => {
-  // TODO: new file button?
-  return (
-    <Box p="2" position="relative" width="100%" style={{ maxWidth: "100%" }}>
-      <Markdown
-        onCopyClick={(text: string) => {
-          window.navigator.clipboard.writeText(text).catch(() => {
-            // eslint-disable-next-line no-console
-            console.log("failed to copy to clipboard");
-          });
-        }}
-        onNewFileClick={props.onNewFileClick}
-        onPasteClick={props.onPasteClick}
-        canPaste={props.canPaste}
-      >
-        {props.children}
-      </Markdown>
-    </Box>
-  );
-};
-
 export type ChatContentProps = {
   messages: ChatMessages;
   onRetry: (question: ChatMessages) => void;
@@ -91,18 +65,20 @@ export const ChatContent = React.forwardRef<HTMLDivElement, ChatContentProps>(
                   {text}
                 </UserInput>
               );
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             } else if (role === "assistant") {
               return (
-                <ChatInput
+                <AssistantInput
                   onNewFileClick={onNewFileClick}
                   onPasteClick={onPasteClick}
                   canPaste={canPaste}
                   key={index}
                 >
                   {text}
-                </ChatInput>
+                </AssistantInput>
               );
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            } else if (role === "system") {
+              return <SystemInput key={index}>{text}</SystemInput>;
             } else {
               return <Markdown key={index}>{text}</Markdown>;
             }