Add keyboard shortcuts HUD

packages/frontend/src/components/ShortcutsDialog/Container.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useEventListener } from "@vueuse/core";
+import Dialog from "primevue/dialog";
+import { computed } from "vue";
+
+const visible = defineModel<boolean>("visible", { default: false });
+
+const props = defineProps<{
+  canSearchInstances: boolean;
+}>();
+
+const modKey = /Mac|iPhone|iPad/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+
+const shortcuts = computed(() => [
+  ...(props.canSearchInstances
+    ? [{ label: "Search instances", keys: [modKey, "K"] }]
+    : []),
+  { label: "Save changes", keys: [modKey, "S"] },
+  { label: "Close dialog or panel", keys: ["Esc"] },
+  { label: "Show keyboard shortcuts", keys: ["Shift", "?"] },
+]);
+
+const isEditableTarget = (target: EventTarget | null) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return (
+    target.isContentEditable ||
+    target.closest("input, textarea, select, [contenteditable='true']") !== null
+  );
+};
+
+useEventListener(document, "keydown", (event) => {
+  if (
+    event.key !== "?" ||
+    !event.shiftKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.altKey ||
+    isEditableTarget(event.target)
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+  visible.value = true;
+});
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    dismissable-mask
+    :draggable="false"
+    header="Keyboard shortcuts"
+    :style="{ width: 'min(26rem, calc(100vw - 2rem))' }"
+  >
+    <dl class="flex flex-col gap-1">
+      <div
+        v-for="item in shortcuts"
+        :key="item.label"
+        class="flex min-h-8 items-center justify-between gap-6"
+      >
+        <dt class="text-sm text-surface-700 dark:text-surface-200">
+          {{ item.label }}
+        </dt>
+        <dd class="flex shrink-0 items-center gap-1.5">
+          <kbd
+            v-for="key in item.keys"
+            :key="key"
+            class="inline-flex h-7 min-w-7 items-center justify-center whitespace-nowrap rounded-md border border-surface-200 bg-surface-50 px-2 text-xs font-medium leading-none text-surface-700 shadow-sm dark:border-surface-700 dark:bg-surface-800 dark:text-surface-200"
+          >
+            {{ key }}
+          </kbd>
+        </dd>
+      </div>
+    </dl>
+  </Dialog>
+</template>

packages/frontend/src/components/ShortcutsDialog/index.ts

@@ -0,0 +1 @@
+export { default as ShortcutsDialog } from "./Container.vue";

packages/frontend/src/layouts/AuthenticatedLayout/Container.vue

@@ -6,13 +6,15 @@ import { useRouter } from "vue-router";
 import { useAuthStore } from "../../stores/auth";
 import { useThemeStore } from "../../stores/theme";
 import { CommandPalette } from "@/components/CommandPalette";
+import { ShortcutsDialog } from "@/components/ShortcutsDialog";
 import { UserNoticeDialog } from "@/components/UserNoticeDialog";
 import { config } from "@/config";
 
 const authStore = useAuthStore();
 const themeStore = useThemeStore();
 const router = useRouter();
 const menu = ref();
+const shortcutsVisible = ref(false);
 
 const goSettings = async () => {
   await router.push({ name: "settings" });
@@ -40,6 +42,13 @@ const menuItems = computed(() => {
     : [];
 
   const linkItems = [
+    {
+      label: "Keyboard shortcuts",
+      icon: "pi pi-question-circle",
+      command: () => {
+        shortcutsVisible.value = true;
+      },
+    },
     {
       label: "API Docs",
       icon: "pi pi-book",
@@ -91,6 +100,10 @@ const goLogin = async () => {
 <template>
   <UserNoticeDialog />
   <CommandPalette v-if="authStore.hasSession" />
+  <ShortcutsDialog
+    v-model:visible="shortcutsVisible"
+    :can-search-instances="authStore.hasSession"
+  />
   <div class="flex h-dvh flex-col bg-surface-0 dark:bg-surface-800">
     <nav class="bg-surface-0 dark:bg-surface-800 shrink-0">
       <div class="mx-auto px-3 sm:px-6">

packages/frontend/src/stores/index.ts

@@ -3,5 +3,4 @@ export { useAssistantModelStore } from "./assistantModel";
 export { useResponseEditorStore } from "./responseEditor";
 export { useAgentsStore } from "./agents";
 export { useBuilderStore, DEFAULT_TEMPLATE, formatResponse } from "./builder";
-export { useInstanceDetailPreferencesStore } from "./instanceDetailPreferences";
 export { useThemeStore } from "./theme";