feat: prompt menu improvements (#139)

packages/backend/src/api/v1/templates.ts

@@ -14,7 +14,7 @@ templates.get("/", async (ctx: Context) => {
     left join template_version tv on tv.template_id = t.id
     where t.project_id = ${ctx.state.projectId}
     group by t.id, t.name, t.slug, t.mode, t.created_at, t.group, t.project_id
-    order by max(tv.created_at) desc
+    order by t.created_at desc
   `
 
   // uncamel each template's versions' extras' keys

packages/frontend/components/Blocks/DataTable.tsx

@@ -17,7 +17,7 @@ import {
 
 import { useLocalStorage } from "@mantine/hooks"
 import { useVirtual } from "@tanstack/react-virtual"
-import { useFixedColorScheme } from "@/utils/colors"
+import { useFixedColorScheme } from "@/utils/hooks"
 
 // outside for reference
 const emptyArray = []

packages/frontend/components/Blocks/Feedback.tsx

@@ -9,7 +9,7 @@ import {
 } from "@tabler/icons-react"
 import { useEffect } from "react"
 import analytics from "../../utils/analytics"
-import { useFixedColorScheme } from "@/utils/colors"
+import { useFixedColorScheme } from "@/utils/hooks"
 
 export default function Feedback({ data = {} }: { data: Record<string, any> }) {
   const scheme = useFixedColorScheme()

packages/frontend/components/Blocks/SearchBar.tsx

@@ -1,12 +1,21 @@
-import { ActionIcon, Input, Kbd, Text } from "@mantine/core"
-import { useFocusWithin, useHotkeys } from "@mantine/hooks"
+import { Input } from "@mantine/core"
+import { useFocusWithin } from "@mantine/hooks"
 import { IconSearch, IconX } from "@tabler/icons-react"
 import HotkeysInfo from "./HotkeysInfo"
 
+import { useGlobalShortcut } from "@/utils/hooks"
+
 export default function SearchBar({ query, setQuery, ...props }) {
   const { ref, focused } = useFocusWithin()
 
-  useHotkeys([["mod+K", () => ref.current.focus()]])
+  useGlobalShortcut([
+    [
+      "mod+K",
+      () => {
+        if (ref.current?.focus) ref.current.focus()
+      },
+    ],
+  ])
 
   const showCross = query && query.length > 0
 

packages/frontend/components/Prompts/TemplateMenu.tsx

@@ -25,6 +25,8 @@ import { notifications } from "@mantine/notifications"
 
 import { cleanSlug, formatCompactFromNow } from "@/utils/format"
 import Router from "next/router"
+import { useEffect, useState } from "react"
+import SearchBar from "../Blocks/SearchBar"
 
 export const defaultTemplateVersion = {
   content: [
@@ -256,6 +258,17 @@ const TemplateList = ({
 }) => {
   const { templates, loading, isInserting } = useTemplates()
 
+  const [filter, setFilter] = useState("")
+  const [filteredTemplates, setFilteredTemplates] = useState(templates)
+
+  useEffect(() => {
+    if (templates) {
+      setFilteredTemplates(
+        templates.filter((t) => t.slug.includes(filter.toLowerCase())),
+      )
+    }
+  }, [filter, templates])
+
   if (loading) return <Loader />
 
   return (
@@ -278,7 +291,18 @@ const TemplateList = ({
           </ActionIcon>
         }
       />
-      {templates?.map((template, index) => (
+
+      <SearchBar
+        placeholder="Filter..."
+        query={filter}
+        size="xs"
+        w="fit-content"
+        mx="md"
+        my="xs"
+        setQuery={setFilter}
+      />
+
+      {filteredTemplates?.map((template, index) => (
         <TemplateListItem
           key={index}
           template={template}

packages/frontend/components/SmartViewer/Message.tsx

@@ -1,4 +1,4 @@
-import { getColorForRole, useFixedColorScheme } from "@/utils/colors"
+import { getColorForRole } from "@/utils/colors"
 import {
   Box,
   Code,

packages/frontend/pages/prompts/[[...id]].tsx

@@ -19,7 +19,7 @@ import {
   Textarea,
   Tooltip,
 } from "@mantine/core"
-import { useHotkeys } from "@mantine/hooks"
+
 import {
   IconBolt,
   IconBracketsAngle,
@@ -52,6 +52,7 @@ import Empty from "@/components/Layout/Empty"
 import { MODELS } from "shared"
 import { usePromptVariables } from "@/utils/promptsHooks"
 import { openConfirmModal } from "@mantine/modals"
+import { useGlobalShortcut } from "@/utils/hooks"
 
 const ParamItem = ({ name, value }) => (
   <Group justify="space-between">
@@ -106,7 +107,7 @@ function Playground() {
 
   const [rename, setRename] = useState(null)
 
-  useHotkeys([
+  useGlobalShortcut([
     [
       "mod+S",
       () => {

packages/frontend/utils/colors.ts

@@ -48,23 +48,3 @@ export function getUserColor(scheme, theme, id: string) {
   const finalColor = theme.colors[userColor][scheme === "dark" ? 8 : 4]
   return finalColor
 }
-
-// fixes the stutter effect in dark mode
-// needs to be outside the hook as window.computedColorScheme doesn't reflect the update
-// but we need to update the ddefault value
-// TODO FIX: THIS ACTUALLY DOESNT WORK WELL WITH MANTINE CSS VARS
-let defaultColorScheme =
-  typeof window !== "undefined" ? window?.computedColorScheme : null
-
-export function useFixedColorScheme() {
-  const [scheme, setScheme] = useState(defaultColorScheme)
-
-  const mantineScheme = useColorScheme()
-
-  useDidUpdate(() => {
-    defaultColorScheme = mantineScheme
-    setScheme(mantineScheme)
-  }, [mantineScheme])
-
-  return scheme
-}

packages/frontend/utils/dataHooks.ts

@@ -3,11 +3,12 @@ import { useContext } from "react"
 import useSWR, { SWRConfiguration, useSWRConfig } from "swr"
 import useSWRInfinite from "swr/infinite"
 import useSWRMutation, { SWRMutationConfiguration } from "swr/mutation"
-import { getUserColor, useFixedColorScheme } from "./colors"
+import { getUserColor } from "./colors"
 import { ProjectContext } from "./context"
 
 import { useAuth } from "./auth"
 import { fetcher } from "./fetcher"
+import { useFixedColorScheme } from "./hooks"
 
 type KeyType = string | ((...args: any[]) => string)
 

packages/frontend/utils/hooks.ts

@@ -0,0 +1,49 @@
+// fixes the stutter effect in dark mode
+// needs to be outside the hook as window.computedColorScheme doesn't reflect the update
+// but we need to update the ddefault value
+
+import { useColorScheme, useDidUpdate } from "@mantine/hooks"
+import { useEffect, useState } from "react"
+
+// TODO FIX: THIS ACTUALLY DOESNT WORK WELL WITH MANTINE CSS VARS
+let defaultColorScheme =
+  typeof window !== "undefined" ? window?.computedColorScheme : null
+
+export function useFixedColorScheme() {
+  const [scheme, setScheme] = useState(defaultColorScheme)
+
+  const mantineScheme = useColorScheme()
+
+  useDidUpdate(() => {
+    defaultColorScheme = mantineScheme
+    setScheme(mantineScheme)
+  }, [mantineScheme])
+
+  return scheme
+}
+
+type Shortcut = [string, () => void]
+
+export function useGlobalShortcut(shortcuts: Shortcut[]) {
+  useEffect(() => {
+    const handleKeyDown = (evt: KeyboardEvent) => {
+      console.log("useGlobalShortcut", evt)
+      shortcuts.forEach(([keyCombination, action]) => {
+        const [mod, key] = keyCombination.split("+")
+        const isModPressed =
+          mod === "mod" ? evt.ctrlKey || evt.metaKey : evt[`${mod}Key`]
+        if (isModPressed && evt.key.toLowerCase() === key.toLowerCase()) {
+          console.log("useGlobalShortcut", keyCombination)
+          action()
+          evt.preventDefault()
+        }
+      })
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [shortcuts])
+}