feat: slash commands with autocomplete dropdown

Type / at start of message to see available commands. Commands: /shrug, /tableflip, /unflip, /lenny, /bear, /disapprove, /facepalm, /cry, /dance, /hug, /greet, /me (action text), /spoiler (hidden text). Autocomplete dropdown with tab-complete. Commands transform input text client-side before sending. Unknown /commands pass through as regular messages.
2026-07-02 12:22:43 -04:00
parent 722eab8e94
commit d8b4defaff
4 changed files with 114 additions and 2 deletions
@@ -0,0 +1,35 @@
+import { SLASH_COMMANDS } from "../lib/slashCommands";
+
+interface CommandDropdownProps {
+  query: string;
+  onSelect: (command: string) => void;
+}
+
+export function CommandDropdown({ query, onSelect }: CommandDropdownProps) {
+  const q = query.toLowerCase();
+  const filtered = SLASH_COMMANDS.filter((c) => c.name.startsWith(q)).slice(0, 8);
+
+  if (filtered.length === 0) return null;
+
+  return (
+    <div className="absolute bottom-full left-0 mb-1 z-50 w-72 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
+      <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
+        COMMANDS
+      </div>
+      {filtered.map((cmd) => (
+        <button
+          key={cmd.name}
+          type="button"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onSelect(cmd.name);
+          }}
+          className="w-full text-left px-2 py-1 text-sm font-mono hover:bg-gb-bg-t text-gb-fg flex items-center gap-2"
+        >
+          <span className="text-gb-orange">/{cmd.name}</span>
+          <span className="text-gb-fg-f text-xs truncate">{cmd.description}</span>
+        </button>
+      ))}
+    </div>
+  );
+}