Load terminal keybindings via React Query server config helper

- add `serverConfigQueryOptions` in new `serverReactQuery` utility - switch `ChatView` from manual `getConfig` effect/state to `useQuery` - default to empty keybindings while config is unavailable

Julius Marminge committed 9 months ago

Commit e94a47a1 parent ea140aa2 files · +28 −26Browse files

Unified · Split

2 files

apps/web/src/components/ChatView.tsx +8 −26
apps/web/src/lib/serverReactQuery.ts +20 −0

apps/web/src/components/ChatView.tsx+8−26

   PROVIDER_SEND_TURN_MAX_IMAGE_BYTES,
   type ProviderApprovalDecision,
   type ProviderSendTurnAttachmentInput,
+  type KeybindingsConfig,
 } from "@t3tools/contracts";
 import {
   type ClipboardEvent,
   gitBranchesQueryOptions,
   gitCreateWorktreeMutationOptions,
 } from "~/lib/gitReactQuery";
+import { serverConfigQueryOptions } from "~/lib/serverReactQuery";
 import { isElectron } from "../env";
 import { buildBootstrapInput } from "../historyBootstrap";
   isTerminalNewShortcut,
   isTerminalSplitShortcut,
   isTerminalToggleShortcut,
-  type ResolvedTerminalKeybindings,
   shortcutLabelForCommand,
 } from "../keybindings";
 import ChatMarkdown from "./ChatMarkdown";
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
 const IMAGE_ONLY_BOOTSTRAP_PROMPT =
   "[User attached one or more images without additional text. Respond using the conversation context and the attached image(s).]";
+const EMPTY_KEYBINDINGS: KeybindingsConfig = [];
 function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
   if (tone === "error") return "text-rose-300/50 dark:text-rose-300/50";
   const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});
   const [nowTick, setNowTick] = useState(() => Date.now());
   const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
-  const [terminalKeybindings, setTerminalKeybindings] = useState<ResolvedTerminalKeybindings>([]);
   const messagesScrollRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
         } as const);
   const gitCwd = activeThread?.worktreePath ?? activeProject?.cwd ?? null;
   const branchesQuery = useQuery(gitBranchesQueryOptions(api, gitCwd));
+  const terminalKeybindingsQuery = useQuery({
+    ...serverConfigQueryOptions(api),
+    select: (config) => config.keybindings,
+  });
+  const terminalKeybindings = terminalKeybindingsQuery.data ?? EMPTY_KEYBINDINGS;
   // Default true while loading to avoid toolbar flicker.
   const isGitRepo = branchesQuery.data?.isRepo ?? true;
   const splitTerminalShortcutLabel = useMemo(
       (activeThread.session !== null && activeThread.session.status !== "closed")),
   );
-  useEffect(() => {
-    if (!api || !api.server || typeof api.server.getConfig !== "function") {
-      setTerminalKeybindings([]);
-      return;
-    }
-    let disposed = false;
-    void api.server
-      .getConfig()
-      .then((config) => {
-        if (disposed) return;
-        setTerminalKeybindings(config.keybindings);
-      })
-      .catch(() => {
-        if (disposed) return;
-        setTerminalKeybindings([]);
-      });
-    return () => {
-      disposed = true;
-    };
-  }, [api]);
   const revokePreviewUrls = useCallback((images: Array<{ previewUrl?: string }>) => {
     for (const image of images) {
       if (!image.previewUrl) continue;

apps/web/src/lib/serverReactQuery.ts+20−0

@@ -0,0 +1,20 @@
	1	import type { NativeApi } from "@t3tools/contracts";
	2	import { queryOptions } from "@tanstack/react-query";
	3
	4	export const serverQueryKeys = {
	5	all: ["server"] as const,
	6	config: () => ["server", "config"] as const,
	7	};
	8
	9	export function serverConfigQueryOptions(api: NativeApi \| undefined) {
	10	return queryOptions({
	11	queryKey: serverQueryKeys.config(),
	12	queryFn: async () => {
	13	if (!api \|\| !api.server \|\| typeof api.server.getConfig !== "function") {
	14	throw new Error("Server config is unavailable.");
	15	}
	16	return api.server.getConfig();
	17	},
	18	enabled: !!api && !!api.server && typeof api.server.getConfig === "function",
	19	});
	20	}