feat: add prompt picker

package.json

@@ -30,6 +30,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "fuse.js": "^7.0.0",
     "highlight.js": "^11.11.1",
     "lucide-react": "^0.471.1",
     "prismjs": "^1.29.0",

src/features/workspace/components/workspace-custom-instructions.tsx

@@ -5,7 +5,16 @@ import {
   CardBody,
   CardFooter,
   DarkModeContext,
+  Dialog,
+  DialogModal,
+  DialogModalOverlay,
+  DialogTrigger,
+  FieldGroup,
+  Input,
+  Link,
   Loader,
+  SearchField,
+  SearchFieldClearButton,
   Text,
 } from "@stacklok/ui-kit";
 import {
@@ -33,6 +42,9 @@ import {
 import { v1GetWorkspaceCustomInstructionsQueryKey } from "@/api/generated/@tanstack/react-query.gen";
 import { useQueryGetWorkspaceCustomInstructions } from "../hooks/use-query-get-workspace-custom-instructions";
 import { useMutationSetWorkspaceCustomInstructions } from "../hooks/use-mutation-set-workspace-custom-instructions";
+import { Download, Search } from "lucide-react";
+import Fuse from "fuse.js";
+import systemPrompts from "../constants/built-in-system-prompts.json";
 
 type DarkModeContextValue = {
   preference: "dark" | "light" | null;
@@ -129,6 +141,79 @@ function useCustomInstructionsValue({
   return { value, setValue };
 }
 
+type PromptPresetPickerProps = {
+  onActivate: (text: string) => void;
+};
+
+function PromptPresetPicker({ onActivate }: PromptPresetPickerProps) {
+  const [query, setQuery] = useState<string>("");
+
+  const fuse = new Fuse(systemPrompts, {
+    keys: ["name", "text"],
+  });
+
+  const handleActivate = useCallback(
+    (prompt: string) => {
+      onActivate(prompt);
+    },
+    [onActivate],
+  );
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <SearchField className="max-w-96" value={query} onChange={setQuery}>
+          <FieldGroup>
+            <Input icon={<Search />} />
+            <SearchFieldClearButton />
+          </FieldGroup>
+        </SearchField>
+      </div>
+      <div className="flex flex-wrap gap-6 overflow-auto justify-around ">
+        {fuse.search(query.length > 0 ? query : " ").map(({ item }) => {
+          return (
+            <Card className="w-96 flex flex-col">
+              <h2 className="font-bold truncate p-2">{item.name}</h2>
+              <pre className="h-72 overflow-hidden text-wrap text-sm bg-gray-50 p-2 overflow-y-auto">
+                {item.text}
+              </pre>
+              <div className="flex gap-4 justify-between p-2">
+                <div className="h-full items-center">
+                  <div className="flex h-full items-center max-w-52 text-clip">
+                    {item.contributors.map((contributor) => (
+                      <Link
+                        className="font-bold text-sm no-underline text-secondary flex gap-1 items-center hover:bg-gray-200 h-full px-2 rounded-md"
+                        target="_blank"
+                        href={`https://github.com/${contributor}/`}
+                      >
+                        <img
+                          className="size-6 rounded-full"
+                          src={`https://github.com/${contributor}.png?size=24`}
+                        />
+                        <span className="truncate">{contributor}</span>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+                <Button
+                  isIcon
+                  slot="close"
+                  variant="secondary"
+                  onPress={() => {
+                    handleActivate(item.text);
+                  }}
+                >
+                  <Download />
+                </Button>
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
 export function WorkspaceCustomInstructions({
   className,
   workspaceName,
@@ -209,6 +294,20 @@ export function WorkspaceCustomInstructions({
         </div>
       </CardBody>
       <CardFooter className="justify-end gap-2">
+        <DialogTrigger>
+          <Button>Use a preset</Button>
+          <DialogModalOverlay isDismissable>
+            <DialogModal>
+              <Dialog width="lg" className="flex flex-col p-4 gap-4">
+                <PromptPresetPicker
+                  onActivate={(prompt: string) => {
+                    setValue(prompt);
+                  }}
+                />
+              </Dialog>
+            </DialogModal>
+          </DialogModalOverlay>
+        </DialogTrigger>
         <Button
           isPending={isMutationPending}
           isDisabled={Boolean(isArchived ?? isCustomInstructionsPending)}