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,15 @@ import {
   CardBody,
   CardFooter,
   DarkModeContext,
+  Dialog,
+  DialogModal,
+  DialogModalOverlay,
+  DialogTrigger,
+  FieldGroup,
+  Input,
   Loader,
+  SearchField,
+  SearchFieldClearButton,
   Text,
 } from "@stacklok/ui-kit";
 import {
@@ -33,6 +41,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 { 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 +140,40 @@ function useCustomInstructionsValue({
   return { value, setValue };
 }
 
+function PromptPresetPicker() {
+  const [query, setQuery] = useState<string>("");
+
+  const fuse = new Fuse(systemPrompts, {
+    keys: ["name", "text"],
+  });
+
+  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 (
+            <div className="border rounded-md text-clip w-96 p-2 flex flex-col gap-2">
+              <h2 className="font-bold truncate">{item.name}</h2>
+              <pre className="h-40 overflow-hidden text-wrap text-sm">
+                {item.text}
+              </pre>
+              <Button variant="secondary">Activate</Button>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
 export function WorkspaceCustomInstructions({
   className,
   workspaceName,
@@ -209,6 +254,16 @@ 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 />
+              </Dialog>
+            </DialogModal>
+          </DialogModalOverlay>
+        </DialogTrigger>
         <Button
           isPending={isMutationPending}
           isDisabled={Boolean(isArchived ?? isCustomInstructionsPending)}