mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-03 19:15:37 +08:00
Create command palette and add new features for search and actions (#728)
* refactor(ui): replace in-repo Command primitive with cmdk wrapper * feat(command-palette): add global Cmd+K palette with v1 actions * feat(command-palette): add session, file, and commit search sources * refactor: add provider names to model constants * feat(command-palette): add settings, navigation, message search, and ⌘K hints * feat(command-palette): add git fetch/pull/push and branch switch actions * refactor(command-palette): consolidate fetch source hooks behind useApiSource * refactor(command-palette): extract useCommandKey and SETTINGS_MAIN_TABS metadata * refactor(command-palette): extract groups into declarative registry * refactor(command-palette): wire openFile through PaletteOpsContext * refactor: migrate openSettings and refreshProjects from window.* to PaletteOpsContext * refactor(command-palette): inline groups and delete registry indirection * refactor(command-palette): return items array directly from source hooks * refactor(palette-ops): flatten Handle wrapper into ref-based registry * refactor: inline useCommandKey as MOD_KEY constant in two call sites * feat: introduce pages and fix bug on branch switching * fix: small labels * fix: coderabbit issues * fix: coderabbit comments * Update src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
Simos Mikelatos
373
src/components/command-palette/CommandPalette.tsx
Normal file
373
src/components/command-palette/CommandPalette.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
import * as React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ArrowDownToLine,
|
||||
ArrowUpFromLine,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
GitCommit,
|
||||
GitMerge,
|
||||
MessageSquare,
|
||||
MessageSquarePlus,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
SunMoon,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
} from '../../shared/view/ui';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
import { usePaletteOps } from '../../contexts/PaletteOpsContext';
|
||||
import { SETTINGS_MAIN_TABS } from '../settings/constants/constants';
|
||||
import type { AppTab, Project } from '../../types/app';
|
||||
|
||||
import { useSessionsSource } from './sources/useSessionsSource';
|
||||
import { useFilesSource } from './sources/useFilesSource';
|
||||
import { useCommitsSource } from './sources/useCommitsSource';
|
||||
import { useSessionMessageSearch } from './sources/useSessionMessageSearch';
|
||||
import { useBranchesSource } from './sources/useBranchesSource';
|
||||
import { useGitActions } from './sources/useGitActions';
|
||||
|
||||
type Page = 'actions' | 'files' | 'sessions' | 'commits' | 'branches';
|
||||
|
||||
const PAGE_LABELS: Record<Page, string> = {
|
||||
actions: 'Actions',
|
||||
files: 'Files',
|
||||
sessions: 'Sessions',
|
||||
commits: 'Commits',
|
||||
branches: 'Branches',
|
||||
};
|
||||
|
||||
type CommandPaletteProps = {
|
||||
selectedProject: Project | null;
|
||||
onStartNewChat: (project: Project) => void;
|
||||
onOpenSettings: (tab?: string) => void;
|
||||
onShowTab?: (tab: AppTab) => void;
|
||||
};
|
||||
|
||||
const NAV_TABS: Array<{ id: AppTab; label: string; keywords: string }> = [
|
||||
{ id: 'chat', label: 'Go to Chat', keywords: 'chat messages conversation' },
|
||||
{ id: 'files', label: 'Go to Files', keywords: 'files file tree explorer' },
|
||||
{ id: 'shell', label: 'Go to Shell', keywords: 'shell terminal console' },
|
||||
{ id: 'git', label: 'Go to Git', keywords: 'git diff branches' },
|
||||
{ id: 'tasks', label: 'Go to Tasks', keywords: 'tasks taskmaster' },
|
||||
];
|
||||
|
||||
export default function CommandPalette({
|
||||
selectedProject,
|
||||
onStartNewChat,
|
||||
onOpenSettings,
|
||||
onShowTab,
|
||||
}: CommandPaletteProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [search, setSearch] = React.useState('');
|
||||
const [pages, setPages] = React.useState<Page[]>([]);
|
||||
const { toggleDarkMode } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const ops = usePaletteOps();
|
||||
|
||||
const page = pages.at(-1);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const isCmdK = (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'k';
|
||||
if (!isCmdK) return;
|
||||
e.preventDefault();
|
||||
setOpen((prev) => !prev);
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
setSearch('');
|
||||
setPages([]);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const projectId = selectedProject?.projectId;
|
||||
|
||||
const showActions = !page || page === 'actions';
|
||||
const showSessions = !page || page === 'sessions';
|
||||
const showFiles = !page || page === 'files';
|
||||
const showCommits = !page || page === 'commits';
|
||||
const showBranches = !page || page === 'branches' || page === 'actions';
|
||||
|
||||
const sessions = useSessionsSource(projectId, open && showSessions);
|
||||
const messageMatches = useSessionMessageSearch(projectId, search, open && showSessions);
|
||||
const files = useFilesSource(projectId, open && showFiles);
|
||||
const commits = useCommitsSource(projectId, open && showCommits);
|
||||
const branches = useBranchesSource(projectId, open && showBranches);
|
||||
const git = useGitActions(projectId);
|
||||
|
||||
const sessionRows = React.useMemo(() => {
|
||||
if (!showSessions) return [];
|
||||
type Row = { id: string; label: string; provider?: string; snippet?: string };
|
||||
const byId = new Map<string, Row>();
|
||||
for (const s of sessions) {
|
||||
byId.set(s.id, { id: s.id, label: s.label, provider: s.provider });
|
||||
}
|
||||
for (const m of messageMatches) {
|
||||
const existing = byId.get(m.sessionId);
|
||||
if (existing) {
|
||||
existing.snippet = m.snippet;
|
||||
} else {
|
||||
byId.set(m.sessionId, {
|
||||
id: m.sessionId,
|
||||
label: m.label,
|
||||
provider: m.provider,
|
||||
snippet: m.snippet,
|
||||
});
|
||||
}
|
||||
}
|
||||
return Array.from(byId.values());
|
||||
}, [sessions, messageMatches, showSessions]);
|
||||
|
||||
const run = React.useCallback((fn: () => void) => {
|
||||
setOpen(false);
|
||||
fn();
|
||||
}, []);
|
||||
|
||||
const pushPage = React.useCallback((next: Page) => {
|
||||
setSearch('');
|
||||
setPages((prev) => [...prev, next]);
|
||||
}, []);
|
||||
|
||||
const popPage = React.useCallback(() => {
|
||||
setSearch('');
|
||||
setPages((prev) => prev.slice(0, -1));
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Backspace' && !search && pages.length > 0) {
|
||||
e.preventDefault();
|
||||
popPage();
|
||||
}
|
||||
}, [search, pages.length, popPage]);
|
||||
|
||||
const startNewChatDisabled = !selectedProject;
|
||||
const browseLimit = 5;
|
||||
const filesShown = page === 'files' ? files : files.slice(0, browseLimit);
|
||||
const commitsShown = page === 'commits' ? commits : commits.slice(0, browseLimit);
|
||||
const sessionsShown = page === 'sessions' ? sessionRows : sessionRows.slice(0, browseLimit);
|
||||
const branchesShown = page === 'branches' ? branches : branches.slice(0, browseLimit);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-xl overflow-hidden p-0">
|
||||
<DialogTitle>Command palette</DialogTitle>
|
||||
<Command label="Command palette" onKeyDown={handleKeyDown}>
|
||||
{page && (
|
||||
<div className="flex items-center gap-2 border-b px-3 py-2">
|
||||
<span className="inline-flex items-center gap-1 rounded-md bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground">
|
||||
{PAGE_LABELS[page]}
|
||||
<button
|
||||
type="button"
|
||||
onClick={popPage}
|
||||
aria-label="Back to all"
|
||||
className="ml-0.5 rounded-sm opacity-70 hover:opacity-100"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">Backspace to go back</span>
|
||||
</div>
|
||||
)}
|
||||
<CommandInput
|
||||
placeholder={page ? `Search ${PAGE_LABELS[page].toLowerCase()}…` : 'Type to search anything…'}
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No results.</CommandEmpty>
|
||||
|
||||
{showActions && (
|
||||
<CommandGroup heading="Actions">
|
||||
<CommandItem
|
||||
value="Start new chat"
|
||||
disabled={startNewChatDisabled}
|
||||
onSelect={() => {
|
||||
if (!selectedProject) return;
|
||||
run(() => onStartNewChat(selectedProject));
|
||||
}}
|
||||
>
|
||||
<MessageSquarePlus className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Start new chat</span>
|
||||
{startNewChatDisabled && (
|
||||
<span className="text-xs text-muted-foreground">Select a project first</span>
|
||||
)}
|
||||
</CommandItem>
|
||||
<CommandItem value="Open settings" onSelect={() => run(() => onOpenSettings())}>
|
||||
<Settings className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Open settings</span>
|
||||
</CommandItem>
|
||||
<CommandItem value="Toggle theme dark light mode" onSelect={() => run(toggleDarkMode)}>
|
||||
<SunMoon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Toggle theme</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showActions && (
|
||||
<CommandGroup heading="Navigate">
|
||||
{NAV_TABS.map((tab) => (
|
||||
<CommandItem
|
||||
key={tab.id as string}
|
||||
value={`${tab.label} ${tab.keywords}`}
|
||||
onSelect={() => run(() => onShowTab?.(tab.id))}
|
||||
>
|
||||
<span className="flex-1">{tab.label}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showActions && projectId && (
|
||||
<CommandGroup heading="Git">
|
||||
<CommandItem
|
||||
value="Git Fetch remote"
|
||||
onSelect={() => run(() => { void git.fetch(); onShowTab?.('git'); })}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Git: Fetch</span>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
value="Git Pull merge upstream"
|
||||
onSelect={() => run(() => { void git.pull(); onShowTab?.('git'); })}
|
||||
>
|
||||
<ArrowDownToLine className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Git: Pull</span>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
value="Git Push origin remote"
|
||||
onSelect={() => run(() => { void git.push(); onShowTab?.('git'); })}
|
||||
>
|
||||
<ArrowUpFromLine className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Git: Push</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showActions && (
|
||||
<CommandGroup heading="Settings">
|
||||
{SETTINGS_MAIN_TABS.map(({ id, label, keywords, icon: Icon }) => (
|
||||
<CommandItem
|
||||
key={id}
|
||||
value={`Settings ${label} ${keywords}`}
|
||||
onSelect={() => run(() => onOpenSettings(id))}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1">Settings: {label}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showSessions && projectId && sessionsShown.length > 0 && (
|
||||
<CommandGroup heading="Sessions">
|
||||
{sessionsShown.map((s) => (
|
||||
<CommandItem
|
||||
key={s.id}
|
||||
value={`${s.label} ${s.snippet ?? ''} ${s.id}`.trim()}
|
||||
onSelect={() => run(() => navigate(`/session/${s.id}`))}
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate">{s.label}</span>
|
||||
{s.snippet && (
|
||||
<span className="truncate text-xs text-muted-foreground">{s.snippet}</span>
|
||||
)}
|
||||
</div>
|
||||
{s.provider && (
|
||||
<span className="text-xs text-muted-foreground">{s.provider}</span>
|
||||
)}
|
||||
</CommandItem>
|
||||
))}
|
||||
{!page && sessionRows.length > browseLimit && (
|
||||
<BrowseAllItem label={`Browse all sessions (${sessionRows.length})`} onSelect={() => pushPage('sessions')} />
|
||||
)}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showFiles && projectId && filesShown.length > 0 && (
|
||||
<CommandGroup heading="Files">
|
||||
{filesShown.map((f) => (
|
||||
<CommandItem
|
||||
key={f.path}
|
||||
value={f.path}
|
||||
onSelect={() => run(() => ops.openFile(f.path))}
|
||||
>
|
||||
<FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1 truncate">{f.name}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">{f.path}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
{!page && files.length > browseLimit && (
|
||||
<BrowseAllItem label={`Browse all files (${files.length})`} onSelect={() => pushPage('files')} />
|
||||
)}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showCommits && projectId && commitsShown.length > 0 && (
|
||||
<CommandGroup heading="Commits">
|
||||
{commitsShown.map((c) => (
|
||||
<CommandItem
|
||||
key={c.hash}
|
||||
value={`${c.message} ${c.author} ${c.shortHash}`}
|
||||
onSelect={() => run(() => onShowTab?.('git'))}
|
||||
>
|
||||
<GitCommit className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="font-mono text-xs text-muted-foreground">{c.shortHash}</span>
|
||||
<span className="flex-1 truncate">{c.message}</span>
|
||||
<span className="truncate text-xs text-muted-foreground">{c.author}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
{!page && commits.length > browseLimit && (
|
||||
<BrowseAllItem label={`Browse all commits (${commits.length})`} onSelect={() => pushPage('commits')} />
|
||||
)}
|
||||
</CommandGroup>
|
||||
)}
|
||||
|
||||
{showBranches && projectId && branchesShown.length > 0 && (
|
||||
<CommandGroup heading="Branches">
|
||||
{branchesShown.map((b) => (
|
||||
<CommandItem
|
||||
key={`branch-${b.name}`}
|
||||
value={b.name}
|
||||
onSelect={() => run(() => { void git.checkout(b.name); onShowTab?.('git'); })}
|
||||
>
|
||||
<GitMerge className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1 truncate">Switch to: {b.name}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
{!page && branches.length > browseLimit && (
|
||||
<BrowseAllItem label={`Browse all branches (${branches.length})`} onSelect={() => pushPage('branches')} />
|
||||
)}
|
||||
</CommandGroup>
|
||||
)}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function BrowseAllItem({ label, onSelect }: { label: string; onSelect: () => void }) {
|
||||
return (
|
||||
<CommandItem value={label} onSelect={onSelect}>
|
||||
<ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<span className="flex-1 text-muted-foreground">{label}</span>
|
||||
</CommandItem>
|
||||
);
|
||||
}
|
||||
37
src/components/command-palette/sources/useApiSource.ts
Normal file
37
src/components/command-palette/sources/useApiSource.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useEffect, useState, type DependencyList } from 'react';
|
||||
|
||||
export function useApiSource<T, R = unknown>(opts: {
|
||||
enabled: boolean;
|
||||
deps: DependencyList;
|
||||
fetcher: (signal: AbortSignal) => Promise<Response>;
|
||||
parse: (raw: R) => T[];
|
||||
}): T[] {
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const { enabled, deps, fetcher, parse } = opts;
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled) {
|
||||
setItems([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const controller = new AbortController();
|
||||
|
||||
fetcher(controller.signal)
|
||||
.then((r) => r.json() as Promise<R>)
|
||||
.then((data) => {
|
||||
if (controller.signal.aborted) return;
|
||||
setItems(parse(data));
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (controller.signal.aborted) return;
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
setItems([]);
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [enabled, ...deps]);
|
||||
|
||||
return items;
|
||||
}
|
||||
21
src/components/command-palette/sources/useBranchesSource.ts
Normal file
21
src/components/command-palette/sources/useBranchesSource.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
|
||||
import { useApiSource } from './useApiSource';
|
||||
|
||||
export type BranchResult = { name: string };
|
||||
|
||||
interface BranchesResponse {
|
||||
localBranches?: string[];
|
||||
}
|
||||
|
||||
export function useBranchesSource(projectId: string | undefined, enabled: boolean) {
|
||||
return useApiSource<BranchResult, BranchesResponse>({
|
||||
enabled: enabled && !!projectId,
|
||||
deps: [projectId],
|
||||
fetcher: (signal) => {
|
||||
const params = new URLSearchParams({ project: projectId! });
|
||||
return authenticatedFetch(`/api/git/branches?${params.toString()}`, { signal });
|
||||
},
|
||||
parse: (data) => (data.localBranches ?? []).map((name) => ({ name })),
|
||||
});
|
||||
}
|
||||
35
src/components/command-palette/sources/useCommitsSource.ts
Normal file
35
src/components/command-palette/sources/useCommitsSource.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
|
||||
import { useApiSource } from './useApiSource';
|
||||
|
||||
export type CommitResult = {
|
||||
hash: string;
|
||||
shortHash: string;
|
||||
message: string;
|
||||
author: string;
|
||||
};
|
||||
|
||||
interface CommitsResponse {
|
||||
commits?: Array<{ hash: string; message: string; author: string }>;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useCommitsSource(projectId: string | undefined, enabled: boolean) {
|
||||
return useApiSource<CommitResult, CommitsResponse>({
|
||||
enabled: enabled && !!projectId,
|
||||
deps: [projectId],
|
||||
fetcher: (signal) => {
|
||||
const params = new URLSearchParams({ project: projectId!, limit: '50' });
|
||||
return authenticatedFetch(`/api/git/commits?${params.toString()}`, { signal });
|
||||
},
|
||||
parse: (data) => {
|
||||
if (!data.commits) return [];
|
||||
return data.commits.map<CommitResult>((c) => ({
|
||||
hash: c.hash,
|
||||
shortHash: c.hash.slice(0, 7),
|
||||
message: c.message,
|
||||
author: c.author,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
42
src/components/command-palette/sources/useFilesSource.ts
Normal file
42
src/components/command-palette/sources/useFilesSource.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { api } from '../../../utils/api';
|
||||
|
||||
import { useApiSource } from './useApiSource';
|
||||
|
||||
export type FileResult = {
|
||||
path: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
interface FileNode {
|
||||
type: 'file' | 'directory';
|
||||
name: string;
|
||||
path: string;
|
||||
children?: FileNode[];
|
||||
}
|
||||
|
||||
const MAX_FILES = 500;
|
||||
|
||||
function flatten(nodes: FileNode[], out: FileResult[]): void {
|
||||
for (const node of nodes) {
|
||||
if (out.length >= MAX_FILES) return;
|
||||
if (node.type === 'file') {
|
||||
out.push({ path: node.path, name: node.name });
|
||||
} else if (node.children && node.children.length > 0) {
|
||||
flatten(node.children, out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function useFilesSource(projectId: string | undefined, enabled: boolean) {
|
||||
return useApiSource<FileResult, unknown>({
|
||||
enabled: enabled && !!projectId,
|
||||
deps: [projectId],
|
||||
fetcher: (signal) => api.getFiles(projectId!, { signal }),
|
||||
parse: (data) => {
|
||||
const tree: FileNode[] = Array.isArray(data) ? (data as FileNode[]) : [];
|
||||
const flat: FileResult[] = [];
|
||||
flatten(tree, flat);
|
||||
return flat;
|
||||
},
|
||||
});
|
||||
}
|
||||
38
src/components/command-palette/sources/useGitActions.ts
Normal file
38
src/components/command-palette/sources/useGitActions.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
|
||||
async function postGit(path: string, body: Record<string, unknown>) {
|
||||
const res = await authenticatedFetch(path, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export function useGitActions(projectId: string | undefined) {
|
||||
const fetch = useCallback(() => {
|
||||
if (!projectId) return Promise.resolve();
|
||||
return postGit('/api/git/fetch', { project: projectId });
|
||||
}, [projectId]);
|
||||
|
||||
const pull = useCallback(() => {
|
||||
if (!projectId) return Promise.resolve();
|
||||
return postGit('/api/git/pull', { project: projectId });
|
||||
}, [projectId]);
|
||||
|
||||
const push = useCallback(() => {
|
||||
if (!projectId) return Promise.resolve();
|
||||
return postGit('/api/git/push', { project: projectId });
|
||||
}, [projectId]);
|
||||
|
||||
const checkout = useCallback(
|
||||
(branch: string) => {
|
||||
if (!projectId) return Promise.resolve();
|
||||
return postGit('/api/git/checkout', { project: projectId, branch });
|
||||
},
|
||||
[projectId],
|
||||
);
|
||||
|
||||
return { fetch, pull, push, checkout };
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { api } from '../../../utils/api';
|
||||
import type { LLMProvider } from '../../../types/app';
|
||||
|
||||
export type SessionMessageMatch = {
|
||||
sessionId: string;
|
||||
label: string;
|
||||
snippet: string;
|
||||
provider: LLMProvider;
|
||||
};
|
||||
|
||||
type ProjectResult = {
|
||||
projectId: string | null;
|
||||
projectName: string;
|
||||
sessions: Array<{
|
||||
sessionId: string;
|
||||
provider: LLMProvider;
|
||||
sessionSummary: string;
|
||||
matches: Array<{ snippet: string }>;
|
||||
}>;
|
||||
};
|
||||
|
||||
const MIN_QUERY = 2;
|
||||
const DEBOUNCE_MS = 250;
|
||||
|
||||
export function useSessionMessageSearch(
|
||||
projectId: string | undefined,
|
||||
query: string,
|
||||
enabled: boolean,
|
||||
) {
|
||||
const [items, setItems] = useState<SessionMessageMatch[]>([]);
|
||||
const seqRef = useRef(0);
|
||||
const esRef = useRef<EventSource | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const trimmed = query.trim();
|
||||
if (!enabled || !projectId || trimmed.length < MIN_QUERY) {
|
||||
setItems([]);
|
||||
esRef.current?.close();
|
||||
esRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
esRef.current?.close();
|
||||
esRef.current = null;
|
||||
seqRef.current++;
|
||||
|
||||
const handle = setTimeout(() => {
|
||||
const seq = ++seqRef.current;
|
||||
const url = api.searchConversationsUrl(trimmed);
|
||||
const es = new EventSource(url);
|
||||
esRef.current = es;
|
||||
const accumulated: SessionMessageMatch[] = [];
|
||||
|
||||
es.addEventListener('result', (evt) => {
|
||||
if (seq !== seqRef.current) {
|
||||
es.close();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = JSON.parse((evt as MessageEvent).data) as { projectResult: ProjectResult };
|
||||
const pr = data.projectResult;
|
||||
if (pr.projectId !== projectId) return;
|
||||
for (const s of pr.sessions) {
|
||||
accumulated.push({
|
||||
sessionId: s.sessionId,
|
||||
label: s.sessionSummary || s.sessionId,
|
||||
snippet: s.matches[0]?.snippet ?? '',
|
||||
provider: s.provider,
|
||||
});
|
||||
}
|
||||
setItems([...accumulated]);
|
||||
} catch {
|
||||
// ignore malformed
|
||||
}
|
||||
});
|
||||
|
||||
const finish = () => {
|
||||
if (seq !== seqRef.current) return;
|
||||
es.close();
|
||||
esRef.current = null;
|
||||
};
|
||||
es.addEventListener('done', finish);
|
||||
es.addEventListener('error', finish);
|
||||
}, DEBOUNCE_MS);
|
||||
|
||||
return () => {
|
||||
clearTimeout(handle);
|
||||
};
|
||||
}, [projectId, query, enabled]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
esRef.current?.close();
|
||||
esRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
|
||||
return items;
|
||||
}
|
||||
44
src/components/command-palette/sources/useSessionsSource.ts
Normal file
44
src/components/command-palette/sources/useSessionsSource.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import type { LLMProvider, ProjectSession } from '../../../types/app';
|
||||
|
||||
import { useApiSource } from './useApiSource';
|
||||
|
||||
export type SessionResult = {
|
||||
id: string;
|
||||
label: string;
|
||||
provider?: LLMProvider;
|
||||
};
|
||||
|
||||
interface SessionsResponse {
|
||||
sessions?: ProjectSession[];
|
||||
cursorSessions?: ProjectSession[];
|
||||
codexSessions?: ProjectSession[];
|
||||
geminiSessions?: ProjectSession[];
|
||||
}
|
||||
|
||||
export function useSessionsSource(projectId: string | undefined, enabled: boolean) {
|
||||
return useApiSource<SessionResult, SessionsResponse>({
|
||||
enabled: enabled && !!projectId,
|
||||
deps: [projectId],
|
||||
fetcher: (signal) => {
|
||||
const params = new URLSearchParams({ limit: '50', offset: '0' });
|
||||
return authenticatedFetch(
|
||||
`/api/projects/${encodeURIComponent(projectId!)}/sessions?${params.toString()}`,
|
||||
{ signal },
|
||||
);
|
||||
},
|
||||
parse: (data) => {
|
||||
const all: ProjectSession[] = [
|
||||
...(data.sessions ?? []),
|
||||
...(data.cursorSessions ?? []),
|
||||
...(data.codexSessions ?? []),
|
||||
...(data.geminiSessions ?? []),
|
||||
];
|
||||
return all.map<SessionResult>((s) => ({
|
||||
id: s.id,
|
||||
label: (s.title || s.summary || s.name || s.id) as string,
|
||||
provider: s.__provider,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user