mirror of
https://github.com/sourcebot-dev/sourcebot.git
synced 2025-12-13 12:55:19 +00:00
feat: add chat panel and enhance browse functionality
- Introduced a new ChatPanel component with collapsible functionality. - Updated BrowsePage to include chat panel alongside existing components. - Enhanced BrowseState to manage chat panel state and size. - Added keyboard shortcuts for toggling chat panel.
This commit is contained in:
Prateek Singh
parent
4899c9fbc7
commit
ca0fd3ec4c
7 changed files with 712 additions and 604 deletions
|
|
@ -7,76 +7,81 @@ import Image from "next/image";
|
|||
import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
|
||||
|
||||
interface CodePreviewPanelProps {
|
||||
path: string;
|
||||
repoName: string;
|
||||
revisionName?: string;
|
||||
path: string;
|
||||
repoName: string;
|
||||
revisionName?: string;
|
||||
}
|
||||
|
||||
export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePreviewPanelProps) => {
|
||||
const [fileSourceResponse, repoInfoResponse] = await Promise.all([
|
||||
getFileSource({
|
||||
fileName: path,
|
||||
repository: repoName,
|
||||
branch: revisionName,
|
||||
}),
|
||||
getRepoInfoByName(repoName),
|
||||
]);
|
||||
const [fileSourceResponse, repoInfoResponse] = await Promise.all([
|
||||
getFileSource({
|
||||
fileName: path,
|
||||
repository: repoName,
|
||||
branch: revisionName,
|
||||
}),
|
||||
getRepoInfoByName(repoName),
|
||||
]);
|
||||
|
||||
if (isServiceError(fileSourceResponse) || isServiceError(repoInfoResponse)) {
|
||||
return <div>Error loading file source</div>
|
||||
}
|
||||
if (isServiceError(fileSourceResponse) || isServiceError(repoInfoResponse)) {
|
||||
return <div>Error loading file source</div>
|
||||
}
|
||||
|
||||
const codeHostInfo = getCodeHostInfoForRepo({
|
||||
codeHostType: repoInfoResponse.codeHostType,
|
||||
name: repoInfoResponse.name,
|
||||
displayName: repoInfoResponse.displayName,
|
||||
webUrl: repoInfoResponse.webUrl,
|
||||
});
|
||||
const codeHostInfo = getCodeHostInfoForRepo({
|
||||
codeHostType: repoInfoResponse.codeHostType,
|
||||
name: repoInfoResponse.name,
|
||||
displayName: repoInfoResponse.displayName,
|
||||
webUrl: repoInfoResponse.webUrl,
|
||||
});
|
||||
|
||||
// @todo: this is a hack to support linking to files for ADO. ADO doesn't support web urls with HEAD so we replace it with main. THis
|
||||
// will break if the default branch is not main.
|
||||
const fileWebUrl = repoInfoResponse.codeHostType === "azuredevops" && fileSourceResponse.webUrl ?
|
||||
fileSourceResponse.webUrl.replace("version=GBHEAD", "version=GBmain") : fileSourceResponse.webUrl;
|
||||
// @todo: this is a hack to support linking to files for ADO. ADO doesn't support web urls with HEAD so we replace it with main. THis
|
||||
// will break if the default branch is not main.
|
||||
const fileWebUrl = repoInfoResponse.codeHostType === "azuredevops" && fileSourceResponse.webUrl ?
|
||||
fileSourceResponse.webUrl.replace("version=GBHEAD", "version=GBmain") : fileSourceResponse.webUrl;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row py-1 px-2 items-center justify-between">
|
||||
<PathHeader
|
||||
path={path}
|
||||
repo={{
|
||||
name: repoName,
|
||||
codeHostType: repoInfoResponse.codeHostType,
|
||||
displayName: repoInfoResponse.displayName,
|
||||
webUrl: repoInfoResponse.webUrl,
|
||||
}}
|
||||
branchDisplayName={revisionName}
|
||||
/>
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row py-1 px-2 items-center justify-between ">
|
||||
<div className="w-2/3">
|
||||
<PathHeader
|
||||
path={path}
|
||||
repo={{
|
||||
name: repoName,
|
||||
codeHostType: repoInfoResponse.codeHostType,
|
||||
displayName: repoInfoResponse.displayName,
|
||||
webUrl: repoInfoResponse.webUrl,
|
||||
}}
|
||||
branchDisplayName={revisionName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{(fileWebUrl && codeHostInfo) && (
|
||||
<div className="w-1/3 flex justify-end">
|
||||
{(fileWebUrl && codeHostInfo) && (
|
||||
<a
|
||||
href={fileWebUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-row items-center gap-4 px-2 py-0.5 rounded-md"
|
||||
>
|
||||
<Image
|
||||
src={codeHostInfo.icon}
|
||||
alt={codeHostInfo.codeHostName}
|
||||
className={cn('w-4 h-4 flex-shrink-0', codeHostInfo.iconClassName)}
|
||||
/>
|
||||
<span className="text-xs font-medium">Open in {codeHostInfo.codeHostName}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={fileWebUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-row items-center gap-2 px-2 py-0.5 rounded-md flex-shrink-0"
|
||||
>
|
||||
<Image
|
||||
src={codeHostInfo.icon}
|
||||
alt={codeHostInfo.codeHostName}
|
||||
className={cn('w-4 h-4 flex-shrink-0', codeHostInfo.iconClassName)}
|
||||
/>
|
||||
<span className="text-sm font-medium">Open in {codeHostInfo.codeHostName}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<PureCodePreviewPanel
|
||||
source={fileSourceResponse.source}
|
||||
language={fileSourceResponse.language}
|
||||
repoName={repoName}
|
||||
path={path}
|
||||
revisionName={revisionName ?? 'HEAD'}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<Separator />
|
||||
<PureCodePreviewPanel
|
||||
source={fileSourceResponse.source}
|
||||
language={fileSourceResponse.language}
|
||||
repoName={repoName}
|
||||
path={path}
|
||||
revisionName={revisionName ?? 'HEAD'}
|
||||
/>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,44 +66,44 @@ export async function generateMetadata({ params: paramsPromise }: Props): Promis
|
|||
}
|
||||
|
||||
interface BrowsePageProps {
|
||||
params: Promise<{
|
||||
path: string[];
|
||||
}>;
|
||||
params: Promise<{
|
||||
path: string[];
|
||||
}>;
|
||||
}
|
||||
|
||||
export default async function BrowsePage(props: BrowsePageProps) {
|
||||
const params = await props.params;
|
||||
const params = await props.params;
|
||||
|
||||
const {
|
||||
path: _rawPath,
|
||||
} = params;
|
||||
const {
|
||||
path: _rawPath,
|
||||
} = params;
|
||||
|
||||
const rawPath = _rawPath.join('/');
|
||||
const { repoName, revisionName, path, pathType } = getBrowseParamsFromPathParam(rawPath);
|
||||
const rawPath = _rawPath.join('/');
|
||||
const { repoName, revisionName, path, pathType } = getBrowseParamsFromPathParam(rawPath);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Suspense fallback={
|
||||
<div className="flex flex-col w-full min-h-full items-center justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
}>
|
||||
{pathType === 'blob' ? (
|
||||
<CodePreviewPanel
|
||||
path={path}
|
||||
repoName={repoName}
|
||||
revisionName={revisionName}
|
||||
/>
|
||||
) : (
|
||||
<TreePreviewPanel
|
||||
path={path}
|
||||
repoName={repoName}
|
||||
revisionName={revisionName}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Suspense fallback={
|
||||
<div className="flex flex-col w-full min-h-full items-center justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
)
|
||||
}>
|
||||
{pathType === 'blob' ? (
|
||||
<CodePreviewPanel
|
||||
path={path}
|
||||
repoName={repoName}
|
||||
revisionName={revisionName}
|
||||
/>
|
||||
) : (
|
||||
<TreePreviewPanel
|
||||
path={path}
|
||||
repoName={repoName}
|
||||
revisionName={revisionName}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,78 +4,82 @@ import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
|
|||
import { createContext, useCallback, useEffect, useState } from "react";
|
||||
|
||||
export interface BrowseState {
|
||||
selectedSymbolInfo?: {
|
||||
symbolName: string;
|
||||
repoName: string;
|
||||
revisionName: string;
|
||||
language: string;
|
||||
}
|
||||
isBottomPanelCollapsed: boolean;
|
||||
isFileTreePanelCollapsed: boolean;
|
||||
isFileSearchOpen: boolean;
|
||||
activeExploreMenuTab: "references" | "definitions";
|
||||
bottomPanelSize: number;
|
||||
selectedSymbolInfo?: {
|
||||
symbolName: string;
|
||||
repoName: string;
|
||||
revisionName: string;
|
||||
language: string;
|
||||
}
|
||||
isBottomPanelCollapsed: boolean;
|
||||
isChatPanelCollapsed: boolean;
|
||||
isFileTreePanelCollapsed: boolean;
|
||||
isFileSearchOpen: boolean;
|
||||
activeExploreMenuTab: "references" | "definitions";
|
||||
bottomPanelSize: number;
|
||||
chatPanelSize: number;
|
||||
}
|
||||
|
||||
const defaultState: BrowseState = {
|
||||
selectedSymbolInfo: undefined,
|
||||
isBottomPanelCollapsed: true,
|
||||
isFileTreePanelCollapsed: false,
|
||||
isFileSearchOpen: false,
|
||||
activeExploreMenuTab: "references",
|
||||
bottomPanelSize: 35,
|
||||
selectedSymbolInfo: undefined,
|
||||
isBottomPanelCollapsed: true,
|
||||
isFileTreePanelCollapsed: false,
|
||||
isFileSearchOpen: false,
|
||||
activeExploreMenuTab: "references",
|
||||
bottomPanelSize: 35,
|
||||
isChatPanelCollapsed: true,
|
||||
chatPanelSize: 20,
|
||||
};
|
||||
|
||||
export const SET_BROWSE_STATE_QUERY_PARAM = "setBrowseState";
|
||||
|
||||
export const BrowseStateContext = createContext<{
|
||||
state: BrowseState;
|
||||
updateBrowseState: (state: Partial<BrowseState>) => void;
|
||||
state: BrowseState;
|
||||
updateBrowseState: (state: Partial<BrowseState>) => void;
|
||||
}>({
|
||||
state: defaultState,
|
||||
updateBrowseState: () => {},
|
||||
state: defaultState,
|
||||
updateBrowseState: () => { },
|
||||
});
|
||||
|
||||
interface BrowseStateProviderProps {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const BrowseStateProvider = ({ children }: BrowseStateProviderProps) => {
|
||||
const [state, setState] = useState<BrowseState>(defaultState);
|
||||
const [state, setState] = useState<BrowseState>(defaultState);
|
||||
|
||||
const hydratedBrowseState = useNonEmptyQueryParam(SET_BROWSE_STATE_QUERY_PARAM);
|
||||
const hydratedBrowseState = useNonEmptyQueryParam(SET_BROWSE_STATE_QUERY_PARAM);
|
||||
|
||||
const onUpdateState = useCallback((state: Partial<BrowseState>) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
...state,
|
||||
}));
|
||||
}, []);
|
||||
const onUpdateState = useCallback((state: Partial<BrowseState>) => {
|
||||
setState((prevState) => ({
|
||||
...prevState,
|
||||
...state,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (hydratedBrowseState) {
|
||||
try {
|
||||
const parsedState = JSON.parse(hydratedBrowseState) as Partial<BrowseState>;
|
||||
onUpdateState(parsedState);
|
||||
} catch (error) {
|
||||
console.error("Error parsing hydratedBrowseState", error);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (hydratedBrowseState) {
|
||||
try {
|
||||
const parsedState = JSON.parse(hydratedBrowseState) as Partial<BrowseState>;
|
||||
onUpdateState(parsedState);
|
||||
} catch (error) {
|
||||
console.error("Error parsing hydratedBrowseState", error);
|
||||
}
|
||||
|
||||
// Remove the query param
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete(SET_BROWSE_STATE_QUERY_PARAM);
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
}
|
||||
}, [hydratedBrowseState, onUpdateState]);
|
||||
// Remove the query param
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete(SET_BROWSE_STATE_QUERY_PARAM);
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
}
|
||||
}, [hydratedBrowseState, onUpdateState]);
|
||||
|
||||
return (
|
||||
<BrowseStateContext.Provider
|
||||
value={{
|
||||
state,
|
||||
updateBrowseState: onUpdateState,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BrowseStateContext.Provider>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<BrowseStateContext.Provider
|
||||
value={{
|
||||
state,
|
||||
updateBrowseState: onUpdateState,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BrowseStateContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,120 +21,120 @@ export const BOTTOM_PANEL_MAX_SIZE = 65;
|
|||
const CODE_NAV_DOCS_URL = "https://docs.sourcebot.dev/docs/features/code-navigation";
|
||||
|
||||
interface BottomPanelProps {
|
||||
order: number;
|
||||
order: number;
|
||||
}
|
||||
|
||||
export const BottomPanel = ({ order }: BottomPanelProps) => {
|
||||
const panelRef = useRef<ImperativePanelHandle>(null);
|
||||
const hasCodeNavEntitlement = useHasEntitlement("code-nav");
|
||||
const domain = useDomain();
|
||||
const router = useRouter();
|
||||
const panelRef = useRef<ImperativePanelHandle>(null);
|
||||
const hasCodeNavEntitlement = useHasEntitlement("code-nav");
|
||||
const domain = useDomain();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
state: { selectedSymbolInfo, isBottomPanelCollapsed, bottomPanelSize },
|
||||
updateBrowseState,
|
||||
} = useBrowseState();
|
||||
const {
|
||||
state: { selectedSymbolInfo, isBottomPanelCollapsed, bottomPanelSize },
|
||||
updateBrowseState,
|
||||
} = useBrowseState();
|
||||
|
||||
useEffect(() => {
|
||||
if (isBottomPanelCollapsed) {
|
||||
panelRef.current?.collapse();
|
||||
} else {
|
||||
panelRef.current?.expand();
|
||||
}
|
||||
}, [isBottomPanelCollapsed]);
|
||||
useEffect(() => {
|
||||
if (isBottomPanelCollapsed) {
|
||||
panelRef.current?.collapse();
|
||||
} else {
|
||||
panelRef.current?.expand();
|
||||
}
|
||||
}, [isBottomPanelCollapsed]);
|
||||
|
||||
useHotkeys("shift+mod+e", (event) => {
|
||||
event.preventDefault();
|
||||
updateBrowseState({ isBottomPanelCollapsed: !isBottomPanelCollapsed });
|
||||
}, {
|
||||
enableOnFormTags: true,
|
||||
enableOnContentEditable: true,
|
||||
description: "Open Explore Panel",
|
||||
});
|
||||
useHotkeys("shift+mod+e", (event) => {
|
||||
event.preventDefault();
|
||||
updateBrowseState({ isBottomPanelCollapsed: !isBottomPanelCollapsed });
|
||||
}, {
|
||||
enableOnFormTags: true,
|
||||
enableOnContentEditable: true,
|
||||
description: "Open Explore Panel",
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-between">
|
||||
<div className="flex flex-row gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateBrowseState({
|
||||
isBottomPanelCollapsed: !isBottomPanelCollapsed,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<VscReferences className="w-4 h-4" />
|
||||
Explore
|
||||
<KeyboardShortcutHint shortcut="⇧ ⌘ E" />
|
||||
</Button>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-between">
|
||||
<div className="flex flex-row gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateBrowseState({
|
||||
isBottomPanelCollapsed: !isBottomPanelCollapsed,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<VscReferences className="w-4 h-4" />
|
||||
Explore
|
||||
<KeyboardShortcutHint shortcut="⇧ ⌘ E" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{!isBottomPanelCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateBrowseState({ isBottomPanelCollapsed: true })
|
||||
}}
|
||||
>
|
||||
<FaChevronDown className="w-4 h-4" />
|
||||
Hide
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<ResizablePanel
|
||||
minSize={BOTTOM_PANEL_MIN_SIZE}
|
||||
maxSize={BOTTOM_PANEL_MAX_SIZE}
|
||||
collapsible={true}
|
||||
ref={panelRef}
|
||||
defaultSize={isBottomPanelCollapsed ? 0 : bottomPanelSize}
|
||||
onCollapse={() => updateBrowseState({ isBottomPanelCollapsed: true })}
|
||||
onExpand={() => updateBrowseState({ isBottomPanelCollapsed: false })}
|
||||
onResize={(size) => {
|
||||
if (!isBottomPanelCollapsed) {
|
||||
updateBrowseState({ bottomPanelSize: size });
|
||||
}
|
||||
}}
|
||||
order={order}
|
||||
id={"bottom-panel"}
|
||||
{!isBottomPanelCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
updateBrowseState({ isBottomPanelCollapsed: true })
|
||||
}}
|
||||
>
|
||||
<FaChevronDown className="w-4 h-4" />
|
||||
Hide
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<ResizablePanel
|
||||
minSize={BOTTOM_PANEL_MIN_SIZE}
|
||||
maxSize={BOTTOM_PANEL_MAX_SIZE}
|
||||
collapsible={true}
|
||||
ref={panelRef}
|
||||
defaultSize={isBottomPanelCollapsed ? 0 : bottomPanelSize}
|
||||
onCollapse={() => updateBrowseState({ isBottomPanelCollapsed: true })}
|
||||
onExpand={() => updateBrowseState({ isBottomPanelCollapsed: false })}
|
||||
onResize={(size) => {
|
||||
if (!isBottomPanelCollapsed) {
|
||||
updateBrowseState({ bottomPanelSize: size });
|
||||
}
|
||||
}}
|
||||
order={order}
|
||||
id={"bottom-panel"}
|
||||
>
|
||||
{!hasCodeNavEntitlement ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<VscSymbolMisc className="w-6 h-6" />
|
||||
<p className="text-sm">
|
||||
Code navigation is not enabled for <span className="text-blue-500 hover:underline cursor-pointer" onClick={() => router.push(`/${domain}/settings/license`)}>your plan</span>.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href={CODE_NAV_DOCS_URL}
|
||||
target="_blank"
|
||||
className="text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
{!hasCodeNavEntitlement ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<VscSymbolMisc className="w-6 h-6" />
|
||||
<p className="text-sm">
|
||||
Code navigation is not enabled for <span className="text-blue-500 hover:underline cursor-pointer" onClick={() => router.push(`/${domain}/settings/license`)}>your plan</span>.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href={CODE_NAV_DOCS_URL}
|
||||
target="_blank"
|
||||
className="text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
) : !selectedSymbolInfo ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<VscSymbolMisc className="w-6 h-6" />
|
||||
<p className="text-sm">No symbol selected</p>
|
||||
<Link
|
||||
href={CODE_NAV_DOCS_URL}
|
||||
target="_blank"
|
||||
className="text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<ExploreMenu
|
||||
selectedSymbolInfo={selectedSymbolInfo}
|
||||
/>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</>
|
||||
)
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
) : !selectedSymbolInfo ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<VscSymbolMisc className="w-6 h-6" />
|
||||
<p className="text-sm">No symbol selected</p>
|
||||
<Link
|
||||
href={CODE_NAV_DOCS_URL}
|
||||
target="_blank"
|
||||
className="text-sm text-blue-500 hover:underline"
|
||||
>
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<ExploreMenu
|
||||
selectedSymbolInfo={selectedSymbolInfo}
|
||||
/>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
'use client'
|
||||
|
||||
import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { RiRobot3Line } from "react-icons/ri";
|
||||
import { useBrowseState } from "../hooks/useBrowseState";
|
||||
import { ImperativePanelHandle } from "react-resizable-panels";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ResizablePanel } from "@/components/ui/resizable";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
|
||||
export const CHAT_PANEL_MIN_SIZE = 5;
|
||||
export const CHAT_PANEL_MAX_SIZE = 50;
|
||||
|
||||
interface ChatPanelProps {
|
||||
order: number;
|
||||
}
|
||||
|
||||
export const ChatPanel = ({ order }: ChatPanelProps) => {
|
||||
const panelRef = useRef<ImperativePanelHandle>(null);
|
||||
const {
|
||||
state: { isChatPanelCollapsed, chatPanelSize },
|
||||
updateBrowseState
|
||||
} = useBrowseState();
|
||||
|
||||
useEffect(() => {
|
||||
if (isChatPanelCollapsed) {
|
||||
panelRef.current?.collapse();
|
||||
} else {
|
||||
panelRef.current?.expand();
|
||||
}
|
||||
}, [isChatPanelCollapsed]);
|
||||
|
||||
useHotkeys("shift+mod+o", (event) => {
|
||||
event.preventDefault();
|
||||
updateBrowseState({ isChatPanelCollapsed: !isChatPanelCollapsed });
|
||||
}, {
|
||||
enableOnFormTags: true,
|
||||
enableOnContentEditable: true,
|
||||
description: "Open Chat Panel"
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResizablePanel
|
||||
minSize={CHAT_PANEL_MIN_SIZE}
|
||||
maxSize={CHAT_PANEL_MAX_SIZE}
|
||||
collapsible={true}
|
||||
ref={panelRef}
|
||||
defaultSize={isChatPanelCollapsed ? 0 : chatPanelSize}
|
||||
onCollapse={() => updateBrowseState({ isChatPanelCollapsed: true })}
|
||||
onExpand={() => updateBrowseState({ isChatPanelCollapsed: false })}
|
||||
onResize={(size) => {
|
||||
if (!isChatPanelCollapsed) {
|
||||
updateBrowseState({ chatPanelSize: size });
|
||||
}
|
||||
}}
|
||||
order={order}
|
||||
id={"chat-panel"}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2 p-4">
|
||||
<p className="text-sm">Chat goes here</p>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
{isChatPanelCollapsed && (
|
||||
<div className="flex flex-col items-center h-full p-2">
|
||||
<Tooltip
|
||||
delayDuration={100}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => {
|
||||
panelRef.current?.expand();
|
||||
}}
|
||||
>
|
||||
<RiRobot3Line className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="flex flex-row items-center gap-2">
|
||||
<KeyboardShortcutHint shortcut="⇧ ⌘ O" />
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<span>Open AI Chat</span>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
||||
import { BottomPanel } from "./components/bottomPanel";
|
||||
import { ChatPanel } from "./components/chatPanel";
|
||||
import { AnimatedResizableHandle } from "@/components/ui/animatedResizableHandle";
|
||||
import { BrowseStateProvider } from "./browseStateProvider";
|
||||
import { FileTreePanel } from "@/features/fileTree/components/fileTreePanel";
|
||||
|
|
@ -12,58 +13,62 @@ import { useDomain } from "@/hooks/useDomain";
|
|||
import { SearchBar } from "../components/searchBar";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function Layout({
|
||||
children,
|
||||
children,
|
||||
}: LayoutProps) {
|
||||
const { repoName, revisionName } = useBrowseParams();
|
||||
const domain = useDomain();
|
||||
const { repoName, revisionName } = useBrowseParams();
|
||||
const domain = useDomain();
|
||||
|
||||
return (
|
||||
<BrowseStateProvider>
|
||||
<div className="flex flex-col h-screen">
|
||||
<TopBar
|
||||
domain={domain}
|
||||
>
|
||||
<SearchBar
|
||||
size="sm"
|
||||
defaultQuery={`repo:${repoName}${revisionName ? ` rev:${revisionName}` : ''} `}
|
||||
className="w-full"
|
||||
/>
|
||||
</TopBar>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
>
|
||||
<FileTreePanel order={1} />
|
||||
return (
|
||||
<BrowseStateProvider>
|
||||
<div className="flex flex-col h-screen">
|
||||
<TopBar
|
||||
domain={domain}
|
||||
>
|
||||
<SearchBar
|
||||
size="sm"
|
||||
defaultQuery={`repo:${repoName}${revisionName ? ` rev:${revisionName}` : ''} `}
|
||||
className="w-full"
|
||||
/>
|
||||
</TopBar>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
>
|
||||
<FileTreePanel order={1} />
|
||||
|
||||
<AnimatedResizableHandle />
|
||||
<AnimatedResizableHandle />
|
||||
|
||||
<ResizablePanel
|
||||
order={2}
|
||||
minSize={10}
|
||||
defaultSize={80}
|
||||
id="code-preview-panel-container"
|
||||
>
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
>
|
||||
<ResizablePanel
|
||||
order={1}
|
||||
id="code-preview-panel"
|
||||
>
|
||||
{children}
|
||||
</ResizablePanel>
|
||||
<AnimatedResizableHandle />
|
||||
<BottomPanel
|
||||
order={2}
|
||||
/>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<FileSearchCommandDialog />
|
||||
</BrowseStateProvider>
|
||||
);
|
||||
<ResizablePanel
|
||||
order={2}
|
||||
minSize={20}
|
||||
defaultSize={60}
|
||||
id="code-preview-panel-container"
|
||||
>
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
>
|
||||
<ResizablePanel
|
||||
order={1}
|
||||
id="code-preview-panel"
|
||||
>
|
||||
{children}
|
||||
</ResizablePanel>
|
||||
<AnimatedResizableHandle />
|
||||
<BottomPanel
|
||||
order={2}
|
||||
/>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
|
||||
<AnimatedResizableHandle />
|
||||
|
||||
<ChatPanel order={3} />
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<FileSearchCommandDialog />
|
||||
</BrowseStateProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,27 +4,27 @@ import { useClickListener } from "@/hooks/useClickListener";
|
|||
import { SearchQueryParams } from "@/lib/types";
|
||||
import { cn, createPathWithQueryParams } from "@/lib/utils";
|
||||
import {
|
||||
cursorCharLeft,
|
||||
cursorCharRight,
|
||||
cursorDocEnd,
|
||||
cursorDocStart,
|
||||
cursorLineBoundaryBackward,
|
||||
cursorLineBoundaryForward,
|
||||
deleteCharBackward,
|
||||
deleteCharForward,
|
||||
deleteGroupBackward,
|
||||
deleteGroupForward,
|
||||
deleteLineBoundaryBackward,
|
||||
deleteLineBoundaryForward,
|
||||
history,
|
||||
historyKeymap,
|
||||
selectAll,
|
||||
selectCharLeft,
|
||||
selectCharRight,
|
||||
selectDocEnd,
|
||||
selectDocStart,
|
||||
selectLineBoundaryBackward,
|
||||
selectLineBoundaryForward
|
||||
cursorCharLeft,
|
||||
cursorCharRight,
|
||||
cursorDocEnd,
|
||||
cursorDocStart,
|
||||
cursorLineBoundaryBackward,
|
||||
cursorLineBoundaryForward,
|
||||
deleteCharBackward,
|
||||
deleteCharForward,
|
||||
deleteGroupBackward,
|
||||
deleteGroupForward,
|
||||
deleteLineBoundaryBackward,
|
||||
deleteLineBoundaryForward,
|
||||
history,
|
||||
historyKeymap,
|
||||
selectAll,
|
||||
selectCharLeft,
|
||||
selectCharRight,
|
||||
selectDocEnd,
|
||||
selectDocStart,
|
||||
selectLineBoundaryBackward,
|
||||
selectLineBoundaryForward
|
||||
} from "@codemirror/commands";
|
||||
import { tags as t } from '@lezer/highlight';
|
||||
import { createTheme } from '@uiw/codemirror-themes';
|
||||
|
|
@ -47,321 +47,321 @@ import { createAuditAction } from "@/ee/features/audit/actions";
|
|||
import tailwind from "@/tailwind";
|
||||
|
||||
interface SearchBarProps {
|
||||
className?: string;
|
||||
size?: "default" | "sm";
|
||||
defaultQuery?: string;
|
||||
autoFocus?: boolean;
|
||||
className?: string;
|
||||
size?: "default" | "sm";
|
||||
defaultQuery?: string;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
const searchBarKeymap: readonly KeyBinding[] = ([
|
||||
{ key: "ArrowLeft", run: cursorCharLeft, shift: selectCharLeft, preventDefault: true },
|
||||
{ key: "ArrowRight", run: cursorCharRight, shift: selectCharRight, preventDefault: true },
|
||||
{ key: "ArrowLeft", run: cursorCharLeft, shift: selectCharLeft, preventDefault: true },
|
||||
{ key: "ArrowRight", run: cursorCharRight, shift: selectCharRight, preventDefault: true },
|
||||
|
||||
{ key: "Home", run: cursorLineBoundaryBackward, shift: selectLineBoundaryBackward, preventDefault: true },
|
||||
{ key: "Mod-Home", run: cursorDocStart, shift: selectDocStart },
|
||||
{ key: "Home", run: cursorLineBoundaryBackward, shift: selectLineBoundaryBackward, preventDefault: true },
|
||||
{ key: "Mod-Home", run: cursorDocStart, shift: selectDocStart },
|
||||
|
||||
{ key: "End", run: cursorLineBoundaryForward, shift: selectLineBoundaryForward, preventDefault: true },
|
||||
{ key: "Mod-End", run: cursorDocEnd, shift: selectDocEnd },
|
||||
{ key: "End", run: cursorLineBoundaryForward, shift: selectLineBoundaryForward, preventDefault: true },
|
||||
{ key: "Mod-End", run: cursorDocEnd, shift: selectDocEnd },
|
||||
|
||||
{ key: "Mod-a", run: selectAll },
|
||||
{ key: "Mod-a", run: selectAll },
|
||||
|
||||
{ key: "Backspace", run: deleteCharBackward, shift: deleteCharBackward },
|
||||
{ key: "Delete", run: deleteCharForward },
|
||||
{ key: "Mod-Backspace", mac: "Alt-Backspace", run: deleteGroupBackward },
|
||||
{ key: "Mod-Delete", mac: "Alt-Delete", run: deleteGroupForward },
|
||||
{ mac: "Mod-Backspace", run: deleteLineBoundaryBackward },
|
||||
{ mac: "Mod-Delete", run: deleteLineBoundaryForward }
|
||||
{ key: "Backspace", run: deleteCharBackward, shift: deleteCharBackward },
|
||||
{ key: "Delete", run: deleteCharForward },
|
||||
{ key: "Mod-Backspace", mac: "Alt-Backspace", run: deleteGroupBackward },
|
||||
{ key: "Mod-Delete", mac: "Alt-Delete", run: deleteGroupForward },
|
||||
{ mac: "Mod-Backspace", run: deleteLineBoundaryBackward },
|
||||
{ mac: "Mod-Delete", run: deleteLineBoundaryForward }
|
||||
] as KeyBinding[]).concat(historyKeymap);
|
||||
|
||||
const searchBarContainerVariants = cva(
|
||||
"search-bar-container flex items-center justify-center py-0.5 px-2 border rounded-md relative",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
default: "min-h-10",
|
||||
sm: "min-h-8"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "default",
|
||||
}
|
||||
"search-bar-container flex items-center justify-center py-0.5 px-2 border rounded-md relative",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
default: "min-h-10",
|
||||
sm: "min-h-8"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "default",
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const SearchBar = ({
|
||||
className,
|
||||
size,
|
||||
defaultQuery,
|
||||
autoFocus,
|
||||
className,
|
||||
size,
|
||||
defaultQuery,
|
||||
autoFocus,
|
||||
}: SearchBarProps) => {
|
||||
const router = useRouter();
|
||||
const domain = useDomain();
|
||||
const suggestionBoxRef = useRef<HTMLDivElement>(null);
|
||||
const editorRef = useRef<ReactCodeMirrorRef>(null);
|
||||
const [cursorPosition, setCursorPosition] = useState(0);
|
||||
const [isSuggestionsEnabled, setIsSuggestionsEnabled] = useState(false);
|
||||
const [isSuggestionsBoxFocused, setIsSuggestionsBoxFocused] = useState(false);
|
||||
const [isHistorySearchEnabled, setIsHistorySearchEnabled] = useState(false);
|
||||
const router = useRouter();
|
||||
const domain = useDomain();
|
||||
const suggestionBoxRef = useRef<HTMLDivElement>(null);
|
||||
const editorRef = useRef<ReactCodeMirrorRef>(null);
|
||||
const [cursorPosition, setCursorPosition] = useState(0);
|
||||
const [isSuggestionsEnabled, setIsSuggestionsEnabled] = useState(false);
|
||||
const [isSuggestionsBoxFocused, setIsSuggestionsBoxFocused] = useState(false);
|
||||
const [isHistorySearchEnabled, setIsHistorySearchEnabled] = useState(false);
|
||||
|
||||
const focusEditor = useCallback(() => editorRef.current?.view?.focus(), []);
|
||||
const focusSuggestionsBox = useCallback(() => suggestionBoxRef.current?.focus(), []);
|
||||
const focusEditor = useCallback(() => editorRef.current?.view?.focus(), []);
|
||||
const focusSuggestionsBox = useCallback(() => suggestionBoxRef.current?.focus(), []);
|
||||
|
||||
const [_query, setQuery] = useState(defaultQuery ?? "");
|
||||
const query = useMemo(() => {
|
||||
// Replace any newlines with spaces to handle
|
||||
// copy & pasting text with newlines.
|
||||
return _query.replaceAll(/\n/g, " ");
|
||||
}, [_query]);
|
||||
const [_query, setQuery] = useState(defaultQuery ?? "");
|
||||
const query = useMemo(() => {
|
||||
// Replace any newlines with spaces to handle
|
||||
// copy & pasting text with newlines.
|
||||
return _query.replaceAll(/\n/g, " ");
|
||||
}, [_query]);
|
||||
|
||||
// When the user navigates backwards/forwards while on the
|
||||
// search page (causing the `query` search param to change),
|
||||
// we want to update what query is displayed in the search bar.
|
||||
useEffect(() => {
|
||||
if (defaultQuery) {
|
||||
setQuery(defaultQuery);
|
||||
// When the user navigates backwards/forwards while on the
|
||||
// search page (causing the `query` search param to change),
|
||||
// we want to update what query is displayed in the search bar.
|
||||
useEffect(() => {
|
||||
if (defaultQuery) {
|
||||
setQuery(defaultQuery);
|
||||
}
|
||||
}, [defaultQuery])
|
||||
|
||||
const { suggestionMode, suggestionQuery } = useSuggestionModeAndQuery({
|
||||
isSuggestionsEnabled,
|
||||
isHistorySearchEnabled,
|
||||
cursorPosition,
|
||||
query,
|
||||
});
|
||||
|
||||
const suggestionData = useSuggestionsData({
|
||||
suggestionMode,
|
||||
suggestionQuery,
|
||||
});
|
||||
|
||||
const theme = useMemo(() => {
|
||||
return createTheme({
|
||||
theme: 'light',
|
||||
settings: {
|
||||
background: tailwind.theme.colors.background,
|
||||
foreground: tailwind.theme.colors.foreground,
|
||||
caret: '#AEAFAD',
|
||||
},
|
||||
styles: [
|
||||
{
|
||||
tag: t.keyword,
|
||||
color: tailwind.theme.colors.highlight,
|
||||
},
|
||||
{
|
||||
tag: t.string,
|
||||
color: '#2aa198',
|
||||
},
|
||||
{
|
||||
tag: t.operator,
|
||||
color: '#d33682',
|
||||
},
|
||||
{
|
||||
tag: t.paren,
|
||||
color: tailwind.theme.colors.highlight,
|
||||
},
|
||||
],
|
||||
});
|
||||
}, []);
|
||||
|
||||
const extensions = useMemo(() => {
|
||||
return [
|
||||
keymap.of(searchBarKeymap),
|
||||
history(),
|
||||
zoekt(),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.updateListener.of(update => {
|
||||
if (update.selectionSet) {
|
||||
const selection = update.state.selection.main;
|
||||
if (selection.empty) {
|
||||
setCursorPosition(selection.anchor);
|
||||
}
|
||||
}
|
||||
}, [defaultQuery])
|
||||
})
|
||||
];
|
||||
}, []);
|
||||
|
||||
const { suggestionMode, suggestionQuery } = useSuggestionModeAndQuery({
|
||||
isSuggestionsEnabled,
|
||||
isHistorySearchEnabled,
|
||||
cursorPosition,
|
||||
query,
|
||||
});
|
||||
// Hotkey to focus the search bar.
|
||||
useHotkeys('/', (event) => {
|
||||
event.preventDefault();
|
||||
focusEditor();
|
||||
setIsSuggestionsEnabled(true);
|
||||
if (editorRef.current?.view) {
|
||||
cursorDocEnd({
|
||||
state: editorRef.current.view.state,
|
||||
dispatch: editorRef.current.view.dispatch,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const suggestionData = useSuggestionsData({
|
||||
suggestionMode,
|
||||
suggestionQuery,
|
||||
});
|
||||
// Collapse the suggestions box if the user clicks outside of the search bar container.
|
||||
useClickListener('.search-bar-container', (isElementClicked) => {
|
||||
if (!isElementClicked) {
|
||||
setIsSuggestionsEnabled(false);
|
||||
} else {
|
||||
setIsSuggestionsEnabled(true);
|
||||
}
|
||||
});
|
||||
|
||||
const theme = useMemo(() => {
|
||||
return createTheme({
|
||||
theme: 'light',
|
||||
settings: {
|
||||
background: tailwind.theme.colors.background,
|
||||
foreground: tailwind.theme.colors.foreground,
|
||||
caret: '#AEAFAD',
|
||||
},
|
||||
styles: [
|
||||
{
|
||||
tag: t.keyword,
|
||||
color: tailwind.theme.colors.highlight,
|
||||
},
|
||||
{
|
||||
tag: t.string,
|
||||
color: '#2aa198',
|
||||
},
|
||||
{
|
||||
tag: t.operator,
|
||||
color: '#d33682',
|
||||
},
|
||||
{
|
||||
tag: t.paren,
|
||||
color: tailwind.theme.colors.highlight,
|
||||
},
|
||||
],
|
||||
});
|
||||
}, []);
|
||||
const onSubmit = useCallback((query: string) => {
|
||||
setIsSuggestionsEnabled(false);
|
||||
setIsHistorySearchEnabled(false);
|
||||
|
||||
const extensions = useMemo(() => {
|
||||
return [
|
||||
keymap.of(searchBarKeymap),
|
||||
history(),
|
||||
zoekt(),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.updateListener.of(update => {
|
||||
if (update.selectionSet) {
|
||||
const selection = update.state.selection.main;
|
||||
if (selection.empty) {
|
||||
setCursorPosition(selection.anchor);
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
}, []);
|
||||
createAuditAction({
|
||||
action: "user.performed_code_search",
|
||||
metadata: {
|
||||
message: query,
|
||||
},
|
||||
}, domain)
|
||||
|
||||
// Hotkey to focus the search bar.
|
||||
useHotkeys('/', (event) => {
|
||||
event.preventDefault();
|
||||
focusEditor();
|
||||
setIsSuggestionsEnabled(true);
|
||||
if (editorRef.current?.view) {
|
||||
cursorDocEnd({
|
||||
state: editorRef.current.view.state,
|
||||
dispatch: editorRef.current.view.dispatch,
|
||||
});
|
||||
const url = createPathWithQueryParams(`/${domain}/search`,
|
||||
[SearchQueryParams.query, query],
|
||||
);
|
||||
router.push(url);
|
||||
}, [domain, router]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(searchBarContainerVariants({ size, className }))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(false);
|
||||
onSubmit(query);
|
||||
}
|
||||
});
|
||||
|
||||
// Collapse the suggestions box if the user clicks outside of the search bar container.
|
||||
useClickListener('.search-bar-container', (isElementClicked) => {
|
||||
if (!isElementClicked) {
|
||||
setIsSuggestionsEnabled(false);
|
||||
} else {
|
||||
setIsSuggestionsEnabled(true);
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(false);
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = useCallback((query: string) => {
|
||||
setIsSuggestionsEnabled(false);
|
||||
setIsHistorySearchEnabled(false);
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(true);
|
||||
focusSuggestionsBox();
|
||||
}
|
||||
|
||||
createAuditAction({
|
||||
action: "user.performed_code_search",
|
||||
metadata: {
|
||||
message: query,
|
||||
},
|
||||
}, domain)
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SearchHistoryButton
|
||||
isToggled={isHistorySearchEnabled}
|
||||
onClick={() => {
|
||||
setQuery("");
|
||||
setIsHistorySearchEnabled(!isHistorySearchEnabled);
|
||||
setIsSuggestionsEnabled(true);
|
||||
focusEditor();
|
||||
}}
|
||||
/>
|
||||
<Separator
|
||||
className="mx-1 h-6"
|
||||
orientation="vertical"
|
||||
/>
|
||||
<CodeMirror
|
||||
ref={editorRef}
|
||||
className="w-full"
|
||||
placeholder={isHistorySearchEnabled ? "Filter history..." : "Search (/) through repos..."}
|
||||
value={query}
|
||||
onChange={(value) => {
|
||||
setQuery(value);
|
||||
// Whenever the user types, we want to re-enable
|
||||
// the suggestions box.
|
||||
setIsSuggestionsEnabled(true);
|
||||
}}
|
||||
theme={theme}
|
||||
basicSetup={false}
|
||||
extensions={extensions}
|
||||
indentWithTab={false}
|
||||
autoFocus={autoFocus ?? false}
|
||||
/>
|
||||
<Tooltip
|
||||
delayDuration={100}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<KeyboardShortcutHint shortcut="/" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="flex flex-row items-center gap-2">
|
||||
Focus search bar
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<SearchSuggestionsBox
|
||||
ref={suggestionBoxRef}
|
||||
query={query}
|
||||
suggestionQuery={suggestionQuery}
|
||||
suggestionMode={suggestionMode}
|
||||
onCompletion={(newQuery: string, newCursorPosition: number, autoSubmit = false) => {
|
||||
setQuery(newQuery);
|
||||
|
||||
const url = createPathWithQueryParams(`/${domain}/search`,
|
||||
[SearchQueryParams.query, query],
|
||||
);
|
||||
router.push(url);
|
||||
}, [domain, router]);
|
||||
// Move the cursor to it's new position.
|
||||
// @note : normally, react-codemirror handles syncing `query`
|
||||
// and the document state, but this happens on re-render. Since
|
||||
// we want to move the cursor before the component re-renders,
|
||||
// we manually update the document state inline.
|
||||
editorRef.current?.view?.dispatch({
|
||||
changes: { from: 0, to: query.length, insert: newQuery },
|
||||
annotations: [Annotation.define<boolean>().of(true)],
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(searchBarContainerVariants({ size, className }))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(false);
|
||||
onSubmit(query);
|
||||
}
|
||||
editorRef.current?.view?.dispatch({
|
||||
selection: { anchor: newCursorPosition, head: newCursorPosition },
|
||||
});
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(false);
|
||||
}
|
||||
// Re-focus the editor since suggestions cause focus to be lost (both click & keyboard)
|
||||
editorRef.current?.view?.focus();
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setIsSuggestionsEnabled(true);
|
||||
focusSuggestionsBox();
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SearchHistoryButton
|
||||
isToggled={isHistorySearchEnabled}
|
||||
onClick={() => {
|
||||
setQuery("");
|
||||
setIsHistorySearchEnabled(!isHistorySearchEnabled);
|
||||
setIsSuggestionsEnabled(true);
|
||||
focusEditor();
|
||||
}}
|
||||
/>
|
||||
<Separator
|
||||
className="mx-1 h-6"
|
||||
orientation="vertical"
|
||||
/>
|
||||
<CodeMirror
|
||||
ref={editorRef}
|
||||
className="w-full"
|
||||
placeholder={isHistorySearchEnabled ? "Filter history..." : "Search (/) through repos..."}
|
||||
value={query}
|
||||
onChange={(value) => {
|
||||
setQuery(value);
|
||||
// Whenever the user types, we want to re-enable
|
||||
// the suggestions box.
|
||||
setIsSuggestionsEnabled(true);
|
||||
}}
|
||||
theme={theme}
|
||||
basicSetup={false}
|
||||
extensions={extensions}
|
||||
indentWithTab={false}
|
||||
autoFocus={autoFocus ?? false}
|
||||
/>
|
||||
<Tooltip
|
||||
delayDuration={100}
|
||||
>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<KeyboardShortcutHint shortcut="/" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="flex flex-row items-center gap-2">
|
||||
Focus search bar
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<SearchSuggestionsBox
|
||||
ref={suggestionBoxRef}
|
||||
query={query}
|
||||
suggestionQuery={suggestionQuery}
|
||||
suggestionMode={suggestionMode}
|
||||
onCompletion={(newQuery: string, newCursorPosition: number, autoSubmit = false) => {
|
||||
setQuery(newQuery);
|
||||
|
||||
// Move the cursor to it's new position.
|
||||
// @note : normally, react-codemirror handles syncing `query`
|
||||
// and the document state, but this happens on re-render. Since
|
||||
// we want to move the cursor before the component re-renders,
|
||||
// we manually update the document state inline.
|
||||
editorRef.current?.view?.dispatch({
|
||||
changes: { from: 0, to: query.length, insert: newQuery },
|
||||
annotations: [Annotation.define<boolean>().of(true)],
|
||||
});
|
||||
|
||||
editorRef.current?.view?.dispatch({
|
||||
selection: { anchor: newCursorPosition, head: newCursorPosition },
|
||||
});
|
||||
|
||||
// Re-focus the editor since suggestions cause focus to be lost (both click & keyboard)
|
||||
editorRef.current?.view?.focus();
|
||||
|
||||
if (autoSubmit) {
|
||||
onSubmit(newQuery);
|
||||
}
|
||||
}}
|
||||
isEnabled={isSuggestionsEnabled}
|
||||
onReturnFocus={() => {
|
||||
focusEditor();
|
||||
}}
|
||||
isFocused={isSuggestionsBoxFocused}
|
||||
onFocus={() => {
|
||||
setIsSuggestionsBoxFocused(document.activeElement === suggestionBoxRef.current);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setIsSuggestionsBoxFocused(document.activeElement === suggestionBoxRef.current);
|
||||
}}
|
||||
cursorPosition={cursorPosition}
|
||||
{...suggestionData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
if (autoSubmit) {
|
||||
onSubmit(newQuery);
|
||||
}
|
||||
}}
|
||||
isEnabled={isSuggestionsEnabled}
|
||||
onReturnFocus={() => {
|
||||
focusEditor();
|
||||
}}
|
||||
isFocused={isSuggestionsBoxFocused}
|
||||
onFocus={() => {
|
||||
setIsSuggestionsBoxFocused(document.activeElement === suggestionBoxRef.current);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setIsSuggestionsBoxFocused(document.activeElement === suggestionBoxRef.current);
|
||||
}}
|
||||
cursorPosition={cursorPosition}
|
||||
{...suggestionData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const SearchHistoryButton = ({
|
||||
isToggled,
|
||||
onClick,
|
||||
isToggled,
|
||||
onClick,
|
||||
}: {
|
||||
isToggled: boolean,
|
||||
onClick: () => void
|
||||
isToggled: boolean,
|
||||
onClick: () => void
|
||||
}) => {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
asChild={true}
|
||||
>
|
||||
{/* @see : https://github.com/shadcn-ui/ui/issues/1988#issuecomment-1980597269 */}
|
||||
<div>
|
||||
<Toggle
|
||||
pressed={isToggled}
|
||||
className="h-6 w-6 min-w-6 px-0 p-1 cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
<CounterClockwiseClockIcon />
|
||||
</Toggle>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
>
|
||||
Search history
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
asChild={true}
|
||||
>
|
||||
{/* @see : https://github.com/shadcn-ui/ui/issues/1988#issuecomment-1980597269 */}
|
||||
<div>
|
||||
<Toggle
|
||||
pressed={isToggled}
|
||||
className="h-6 w-6 min-w-6 px-0 p-1 cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
<CounterClockwiseClockIcon />
|
||||
</Toggle>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="bottom"
|
||||
>
|
||||
Search history
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue