first

src/apps/officer-web/state/useModels.ts

@@ -0,0 +1,68 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useClient } from 'hooks/useClient';
+import { useAuth } from 'hooks/useAuth';
+import { useSettings } from './useSettings';
+
+export type ModelOption = { id: string; name: string; provider?: string; providerId?: string };
+
+export const modelKey = (m: ModelOption) => (m.provider ? `${m.provider}:${m.id}` : m.id);
+
+// Hardcoded fallback in case the API call fails
+const CLAUDE_MODELS: ModelOption[] = [
+  { id: 'claude-sonnet-4-5', name: 'Claude Sonnet 4.5' },
+  { id: 'claude-opus-4-6', name: 'Claude Opus 4.6' },
+  { id: 'claude-haiku-4-5', name: 'Claude Haiku 4.5' },
+];
+
+export const useClaudeModels = () => {
+  const client = useClient();
+  const { isAuthenticated } = useAuth();
+
+  const { data: models = CLAUDE_MODELS } = useQuery<ModelOption[]>({
+    queryKey: ['CLAUDE_MODELS'],
+    enabled: isAuthenticated,
+    queryFn: async () => {
+      const data = await client.get<ModelOption[]>('/claude/models');
+      return data.length > 0 ? data : CLAUDE_MODELS;
+    },
+    staleTime: 10 * 60 * 1000,
+  });
+
+  return models;
+};
+
+/** @deprecated Use useClaudeModels() instead */
+export const claudeModels = CLAUDE_MODELS;
+
+export const useOpenCodeModels = () => {
+  const client = useClient();
+  const { isAuthenticated } = useAuth();
+
+  const { data: models = [] } = useQuery<ModelOption[]>({
+    queryKey: ['OC_MODELS'],
+    enabled: isAuthenticated,
+    queryFn: () => client.get<ModelOption[]>('/opencode/models'),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return models;
+};
+
+export const useVisibleClaudeModels = () => {
+  const models = useClaudeModels();
+  const { settings } = useSettings();
+  const enabled = settings.ai?.enabledModels ?? [];
+  return useMemo(() => models.filter((m) => enabled.includes(modelKey(m))), [models, enabled]);
+};
+
+export const useVisibleOpenCodeModels = () => {
+  const models = useOpenCodeModels();
+  const { settings } = useSettings();
+  const providers = settings.ai?.enabledProviders ?? [];
+  const enabled = settings.ai?.enabledModels ?? [];
+  return useMemo(
+    () => models.filter((m) => providers.includes(m.provider ?? '') && enabled.includes(modelKey(m))),
+    [models, providers, enabled],
+  );
+};