mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-04-23 22:11:33 +00:00
refactor: add primitives, plan mode display, and new session model selector
This commit is contained in:
simosmik
@@ -1,8 +1,11 @@
|
||||
import React, { memo, useMemo, useCallback } from 'react';
|
||||
|
||||
import type { Project } from '../../../types/app';
|
||||
import type { SubagentChildTool } from '../types/types';
|
||||
|
||||
import { getToolConfig } from './configs/toolConfigs';
|
||||
import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
|
||||
import { PlanDisplay } from './components/PlanDisplay';
|
||||
|
||||
type DiffLine = {
|
||||
type: string;
|
||||
@@ -119,6 +122,33 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
|
||||
);
|
||||
}
|
||||
|
||||
if (displayConfig.type === 'plan') {
|
||||
const title = typeof displayConfig.title === 'function'
|
||||
? displayConfig.title(parsedData)
|
||||
: displayConfig.title || 'Plan';
|
||||
|
||||
const contentProps = displayConfig.getContentProps?.(parsedData, {
|
||||
selectedProject,
|
||||
createDiff,
|
||||
onFileOpen
|
||||
}) || {};
|
||||
|
||||
const isStreaming = mode === 'input' && !toolResult;
|
||||
|
||||
return (
|
||||
<PlanDisplay
|
||||
title={title}
|
||||
content={contentProps.content || ''}
|
||||
defaultOpen={displayConfig.defaultOpen ?? autoExpandTools}
|
||||
isStreaming={isStreaming}
|
||||
showRawParameters={mode === 'input' && showRawParameters}
|
||||
rawContent={rawToolInput}
|
||||
toolName={toolName}
|
||||
toolId={toolId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (displayConfig.type === 'collapsible') {
|
||||
const title = typeof displayConfig.title === 'function'
|
||||
? displayConfig.title(parsedData)
|
||||
|
||||
135
src/components/chat/tools/components/PlanDisplay.tsx
Normal file
135
src/components/chat/tools/components/PlanDisplay.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import React from 'react';
|
||||
import { ChevronsUpDown, FileText } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
Button,
|
||||
Collapsible,
|
||||
CollapsibleTrigger,
|
||||
CollapsibleContent,
|
||||
Shimmer,
|
||||
} from '../../../../shared/view/ui';
|
||||
import { usePermission } from '../../../../contexts/PermissionContext';
|
||||
|
||||
import { MarkdownContent } from './ContentRenderers';
|
||||
|
||||
interface PlanDisplayProps {
|
||||
title: string;
|
||||
content: string;
|
||||
defaultOpen?: boolean;
|
||||
isStreaming?: boolean;
|
||||
showRawParameters?: boolean;
|
||||
rawContent?: string;
|
||||
toolName: string;
|
||||
toolId?: string;
|
||||
}
|
||||
|
||||
export const PlanDisplay: React.FC<PlanDisplayProps> = ({
|
||||
title,
|
||||
content,
|
||||
defaultOpen = false,
|
||||
isStreaming = false,
|
||||
showRawParameters = false,
|
||||
rawContent,
|
||||
toolName: _toolName,
|
||||
}) => {
|
||||
const permissionCtx = usePermission();
|
||||
|
||||
const pendingRequest = permissionCtx?.pendingPermissionRequests.find(
|
||||
(r) => r.toolName === 'ExitPlanMode' || r.toolName === 'exit_plan_mode'
|
||||
);
|
||||
|
||||
const handleBuild = () => {
|
||||
if (pendingRequest && permissionCtx) {
|
||||
permissionCtx.handlePermissionDecision(pendingRequest.requestId, { allow: true });
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevise = () => {
|
||||
if (pendingRequest && permissionCtx) {
|
||||
permissionCtx.handlePermissionDecision(pendingRequest.requestId, {
|
||||
allow: false,
|
||||
message: 'User asked to revise the plan',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Collapsible defaultOpen={defaultOpen}>
|
||||
<Card className="my-1 flex flex-col shadow-none">
|
||||
{/* Header — always visible */}
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 px-4 pb-0 pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<CardTitle className="text-sm font-semibold">
|
||||
{isStreaming ? <Shimmer>{title}</Shimmer> : title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<CollapsibleTrigger className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
|
||||
<ChevronsUpDown className="h-4 w-4" />
|
||||
<span className="sr-only">Toggle plan</span>
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
|
||||
{/* Collapsible content */}
|
||||
<CollapsibleContent>
|
||||
<CardContent className="px-4 pb-4 pt-3">
|
||||
{content ? (
|
||||
<MarkdownContent
|
||||
content={content}
|
||||
className="prose prose-sm max-w-none dark:prose-invert"
|
||||
/>
|
||||
) : isStreaming ? (
|
||||
<div className="py-2">
|
||||
<Shimmer>Generating plan...</Shimmer>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{showRawParameters && rawContent && (
|
||||
<details className="group/raw relative mt-3">
|
||||
<summary className="flex cursor-pointer items-center gap-1.5 py-0.5 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
|
||||
<svg
|
||||
className="h-2.5 w-2.5 transition-transform duration-150 group-open/raw:rotate-90"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
raw params
|
||||
</summary>
|
||||
<pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-gray-200/40 bg-gray-50 p-2 font-mono text-[11px] text-gray-600 dark:border-gray-700/40 dark:bg-gray-900/50 dark:text-gray-400">
|
||||
{rawContent}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
|
||||
{/* Footer — always visible when permission is pending */}
|
||||
{pendingRequest && (
|
||||
<CardFooter className="justify-end gap-2 border-t border-border/40 px-4 pb-3 pt-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleRevise}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
Revise
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleBuild}>
|
||||
Build{' '}
|
||||
<kbd className="ml-1 rounded bg-primary-foreground/20 px-1 py-0.5 font-mono text-[10px]">
|
||||
⌘↩
|
||||
</kbd>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
)}
|
||||
</Card>
|
||||
</Collapsible>
|
||||
);
|
||||
};
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
export interface ToolDisplayConfig {
|
||||
input: {
|
||||
type: 'one-line' | 'collapsible' | 'hidden';
|
||||
type: 'one-line' | 'collapsible' | 'plan' | 'hidden';
|
||||
// One-line config
|
||||
icon?: string;
|
||||
label?: string;
|
||||
@@ -31,7 +31,7 @@ export interface ToolDisplayConfig {
|
||||
result?: {
|
||||
hidden?: boolean;
|
||||
hideOnSuccess?: boolean;
|
||||
type?: 'one-line' | 'collapsible' | 'special';
|
||||
type?: 'one-line' | 'collapsible' | 'plan' | 'special';
|
||||
title?: string | ((result: any) => string);
|
||||
defaultOpen?: boolean;
|
||||
// Special result handlers
|
||||
@@ -494,7 +494,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
|
||||
|
||||
exit_plan_mode: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
type: 'plan',
|
||||
title: 'Implementation plan',
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
@@ -503,29 +503,14 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'markdown',
|
||||
getContentProps: (result) => {
|
||||
try {
|
||||
let parsed = result.content;
|
||||
if (typeof parsed === 'string') {
|
||||
parsed = JSON.parse(parsed);
|
||||
}
|
||||
return {
|
||||
content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
|
||||
};
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse plan content:', e);
|
||||
return { content: '' };
|
||||
}
|
||||
}
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
|
||||
// Also register as ExitPlanMode (the actual tool name used by Claude)
|
||||
ExitPlanMode: {
|
||||
input: {
|
||||
type: 'collapsible',
|
||||
type: 'plan',
|
||||
title: 'Implementation plan',
|
||||
defaultOpen: true,
|
||||
contentType: 'markdown',
|
||||
@@ -534,22 +519,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
|
||||
})
|
||||
},
|
||||
result: {
|
||||
type: 'collapsible',
|
||||
contentType: 'markdown',
|
||||
getContentProps: (result) => {
|
||||
try {
|
||||
let parsed = result.content;
|
||||
if (typeof parsed === 'string') {
|
||||
parsed = JSON.parse(parsed);
|
||||
}
|
||||
return {
|
||||
content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
|
||||
};
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse plan content:', e);
|
||||
return { content: '' };
|
||||
}
|
||||
}
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
|
||||
import PermissionContext from '../../../contexts/PermissionContext';
|
||||
import { QuickSettingsPanel } from '../../quick-settings-panel';
|
||||
import type { ChatInterfaceProps, Provider } from '../types/types';
|
||||
import type { LLMProvider } from '../../../types/app';
|
||||
@@ -9,6 +11,7 @@ import { useChatSessionState } from '../hooks/useChatSessionState';
|
||||
import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
|
||||
import { useChatComposerState } from '../hooks/useChatComposerState';
|
||||
import { useSessionStore } from '../../../stores/useSessionStore';
|
||||
|
||||
import ChatMessagesPane from './subcomponents/ChatMessagesPane';
|
||||
import ChatComposer from './subcomponents/ChatComposer';
|
||||
|
||||
@@ -267,6 +270,11 @@ function ChatInterface({
|
||||
};
|
||||
}, [resetStreamingState]);
|
||||
|
||||
const permissionContextValue = useMemo(() => ({
|
||||
pendingPermissionRequests,
|
||||
handlePermissionDecision,
|
||||
}), [pendingPermissionRequests, handlePermissionDecision]);
|
||||
|
||||
if (!selectedProject) {
|
||||
const selectedProviderLabel =
|
||||
provider === 'cursor'
|
||||
@@ -292,7 +300,7 @@ function ChatInterface({
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PermissionContext.Provider value={permissionContextValue}>
|
||||
<div className="flex h-full flex-col">
|
||||
<ChatMessagesPane
|
||||
scrollContainerRef={scrollContainerRef}
|
||||
@@ -410,7 +418,7 @@ function ChatInterface({
|
||||
</div>
|
||||
|
||||
<QuickSettingsPanel />
|
||||
</>
|
||||
</PermissionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { formatUsageLimitText } from '../../utils/chatFormatting';
|
||||
import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
|
||||
import type { Project } from '../../../../types/app';
|
||||
import { ToolRenderer, shouldHideToolResult } from '../../tools';
|
||||
import { Reasoning, ReasoningTrigger, ReasoningContent } from '../../../../shared/view/ui';
|
||||
import { Markdown } from './Markdown';
|
||||
import MessageCopyControl from './MessageCopyControl';
|
||||
|
||||
@@ -68,7 +69,8 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
|
||||
const shouldShowUserCopyControl = message.type === 'user' && userCopyContent.trim().length > 0;
|
||||
const shouldShowAssistantCopyControl = message.type === 'assistant' &&
|
||||
assistantCopyContent.trim().length > 0 &&
|
||||
!isCommandOrFileEditToolResponse;
|
||||
!isCommandOrFileEditToolResponse &&
|
||||
!message.isThinking;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
@@ -378,36 +380,30 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
|
||||
</div>
|
||||
</div>
|
||||
) : message.isThinking ? (
|
||||
/* Thinking messages - collapsible by default */
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
||||
<details className="group">
|
||||
<summary className="flex cursor-pointer items-center gap-2 font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<svg className="h-3 w-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span>{t('thinking.emoji')}</span>
|
||||
</summary>
|
||||
<div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm text-gray-600 dark:border-gray-600 dark:text-gray-400">
|
||||
<Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
|
||||
{message.content}
|
||||
</Markdown>
|
||||
/* Thinking messages — Reasoning component (ai-elements pattern) */
|
||||
<Reasoning defaultOpen={false}>
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>
|
||||
<Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
|
||||
{message.content}
|
||||
</Markdown>
|
||||
<div className="mt-3 flex items-center text-[11px]">
|
||||
<MessageCopyControl content={String(message.content || '')} messageType="assistant" />
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</ReasoningContent>
|
||||
</Reasoning>
|
||||
) : (
|
||||
<div className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{/* Thinking accordion for reasoning */}
|
||||
{/* Reasoning accordion */}
|
||||
{showThinking && message.reasoning && (
|
||||
<details className="mb-3">
|
||||
<summary className="cursor-pointer font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
{t('thinking.emoji')}
|
||||
</summary>
|
||||
<div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm italic text-gray-600 dark:border-gray-600 dark:text-gray-400">
|
||||
<Reasoning className="mb-3" defaultOpen={false}>
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>
|
||||
<div className="whitespace-pre-wrap">
|
||||
{message.reasoning}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</ReasoningContent>
|
||||
</Reasoning>
|
||||
)}
|
||||
|
||||
{(() => {
|
||||
|
||||
@@ -1,9 +1,18 @@
|
||||
import React from 'react';
|
||||
import { ShieldAlertIcon } from 'lucide-react';
|
||||
|
||||
import type { PendingPermissionRequest } from '../../types/types';
|
||||
import { buildClaudeToolPermissionEntry, formatToolInputForDisplay } from '../../utils/chatPermissions';
|
||||
import { getClaudeSettings } from '../../utils/chatStorage';
|
||||
import { getPermissionPanel, registerPermissionPanel } from '../../tools/configs/permissionPanelRegistry';
|
||||
import { AskUserQuestionPanel } from '../../tools/components/InteractiveRenderers';
|
||||
import {
|
||||
Confirmation,
|
||||
ConfirmationTitle,
|
||||
ConfirmationRequest,
|
||||
ConfirmationActions,
|
||||
ConfirmationAction,
|
||||
} from '../../../../shared/view/ui';
|
||||
|
||||
registerPermissionPanel('AskUserQuestion', AskUserQuestionPanel);
|
||||
|
||||
@@ -21,13 +30,18 @@ export default function PermissionRequestsBanner({
|
||||
handlePermissionDecision,
|
||||
handleGrantToolPermission,
|
||||
}: PermissionRequestsBannerProps) {
|
||||
if (!pendingPermissionRequests.length) {
|
||||
// Filter out plan tool requests — they are handled inline by PlanDisplay
|
||||
const filteredRequests = pendingPermissionRequests.filter(
|
||||
(r) => r.toolName !== 'ExitPlanMode' && r.toolName !== 'exit_plan_mode'
|
||||
);
|
||||
|
||||
if (!filteredRequests.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-3 space-y-2">
|
||||
{pendingPermissionRequests.map((request) => {
|
||||
{filteredRequests.map((request) => {
|
||||
const CustomPanel = getPermissionPanel(request.toolName);
|
||||
if (CustomPanel) {
|
||||
return (
|
||||
@@ -54,69 +68,61 @@ export default function PermissionRequestsBanner({
|
||||
: [request.requestId];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={request.requestId}
|
||||
className="rounded-lg border border-amber-200 bg-amber-50 p-3 shadow-sm dark:border-amber-800 dark:bg-amber-900/20"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-amber-900 dark:text-amber-100">Permission required</div>
|
||||
<div className="text-xs text-amber-800 dark:text-amber-200">
|
||||
Tool: <span className="font-mono">{request.toolName}</span>
|
||||
<Confirmation key={request.requestId} approval="pending">
|
||||
<ConfirmationTitle className="flex items-start gap-3">
|
||||
<ShieldAlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<ConfirmationRequest>
|
||||
<div>
|
||||
<span className="font-medium text-foreground">Permission required</span>
|
||||
<span className="ml-2 text-muted-foreground">
|
||||
Tool: <code className="rounded bg-muted px-1.5 py-0.5 text-xs">{request.toolName}</code>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{permissionEntry && (
|
||||
<div className="text-xs text-amber-700 dark:text-amber-300">
|
||||
Allow rule: <span className="font-mono">{permissionEntry}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{permissionEntry && (
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Allow rule: <code className="rounded bg-muted px-1 py-0.5 text-xs">{permissionEntry}</code>
|
||||
</div>
|
||||
)}
|
||||
{rawInput && (
|
||||
<details className="mt-2">
|
||||
<summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
|
||||
View tool input
|
||||
</summary>
|
||||
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border bg-muted/50 p-2 text-xs text-muted-foreground">
|
||||
{rawInput}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</ConfirmationRequest>
|
||||
</ConfirmationTitle>
|
||||
|
||||
{rawInput && (
|
||||
<details className="mt-2">
|
||||
<summary className="cursor-pointer text-xs text-amber-800 hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100">
|
||||
View tool input
|
||||
</summary>
|
||||
<pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border border-amber-200/60 bg-white/80 p-2 text-xs text-amber-900 dark:border-amber-800/60 dark:bg-gray-900/60 dark:text-amber-100">
|
||||
{rawInput}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-amber-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-amber-700"
|
||||
<ConfirmationActions>
|
||||
<ConfirmationAction
|
||||
variant="outline"
|
||||
onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
|
||||
>
|
||||
Allow once
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
Deny
|
||||
</ConfirmationAction>
|
||||
<ConfirmationAction
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
if (permissionEntry && !alreadyAllowed) {
|
||||
handleGrantToolPermission({ entry: permissionEntry, toolName: request.toolName });
|
||||
}
|
||||
handlePermissionDecision(matchingRequestIds, { allow: true, rememberEntry: permissionEntry });
|
||||
}}
|
||||
className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
|
||||
permissionEntry
|
||||
? 'border-amber-300 text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:text-amber-100 dark:hover:bg-amber-900/30'
|
||||
: 'cursor-not-allowed border-gray-300 text-gray-400'
|
||||
}`}
|
||||
disabled={!permissionEntry}
|
||||
>
|
||||
{rememberLabel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-red-300 px-3 py-1.5 text-xs font-medium text-red-700 transition-colors hover:bg-red-50 dark:border-red-800 dark:text-red-200 dark:hover:bg-red-900/30"
|
||||
</ConfirmationAction>
|
||||
<ConfirmationAction
|
||||
variant="default"
|
||||
onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
|
||||
>
|
||||
Deny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Allow once
|
||||
</ConfirmationAction>
|
||||
</ConfirmationActions>
|
||||
</Confirmation>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
|
||||
import {
|
||||
CLAUDE_MODELS,
|
||||
@@ -10,6 +11,19 @@ import {
|
||||
} from "../../../../../shared/modelConstants";
|
||||
import type { ProjectSession, LLMProvider } from "../../../../types/app";
|
||||
import { NextTaskBanner } from "../../../task-master";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Command,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
Card,
|
||||
} from "../../../../shared/view/ui";
|
||||
|
||||
type ProviderSelectionEmptyStateProps = {
|
||||
selectedSession: ProjectSession | null;
|
||||
@@ -31,48 +45,17 @@ type ProviderSelectionEmptyStateProps = {
|
||||
setInput: React.Dispatch<React.SetStateAction<string>>;
|
||||
};
|
||||
|
||||
type ProviderDef = {
|
||||
interface ProviderGroup {
|
||||
id: LLMProvider;
|
||||
name: string;
|
||||
infoKey: string;
|
||||
accent: string;
|
||||
ring: string;
|
||||
check: string;
|
||||
};
|
||||
models: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
const PROVIDERS: ProviderDef[] = [
|
||||
{
|
||||
id: "claude",
|
||||
name: "Claude Code",
|
||||
infoKey: "providerSelection.providerInfo.anthropic",
|
||||
accent: "border-primary",
|
||||
ring: "ring-primary/15",
|
||||
check: "bg-primary text-primary-foreground",
|
||||
},
|
||||
{
|
||||
id: "cursor",
|
||||
name: "Cursor",
|
||||
infoKey: "providerSelection.providerInfo.cursorEditor",
|
||||
accent: "border-violet-500 dark:border-violet-400",
|
||||
ring: "ring-violet-500/15",
|
||||
check: "bg-violet-500 text-white",
|
||||
},
|
||||
{
|
||||
id: "codex",
|
||||
name: "Codex",
|
||||
infoKey: "providerSelection.providerInfo.openai",
|
||||
accent: "border-emerald-600 dark:border-emerald-400",
|
||||
ring: "ring-emerald-600/15",
|
||||
check: "bg-emerald-600 dark:bg-emerald-500 text-white",
|
||||
},
|
||||
{
|
||||
id: "gemini",
|
||||
name: "Gemini",
|
||||
infoKey: "providerSelection.providerInfo.google",
|
||||
accent: "border-blue-500 dark:border-blue-400",
|
||||
ring: "ring-blue-500/15",
|
||||
check: "bg-blue-500 text-white",
|
||||
},
|
||||
const PROVIDER_GROUPS: ProviderGroup[] = [
|
||||
{ id: "claude", name: "Anthropic", models: CLAUDE_MODELS.OPTIONS },
|
||||
{ id: "cursor", name: "Cursor", models: CURSOR_MODELS.OPTIONS },
|
||||
{ id: "codex", name: "OpenAI", models: CODEX_MODELS.OPTIONS },
|
||||
{ id: "gemini", name: "Google", models: GEMINI_MODELS.OPTIONS },
|
||||
];
|
||||
|
||||
function getModelConfig(p: LLMProvider) {
|
||||
@@ -82,7 +65,7 @@ function getModelConfig(p: LLMProvider) {
|
||||
return CURSOR_MODELS;
|
||||
}
|
||||
|
||||
function getModelValue(
|
||||
function getCurrentModel(
|
||||
p: LLMProvider,
|
||||
c: string,
|
||||
cu: string,
|
||||
@@ -95,6 +78,13 @@ function getModelValue(
|
||||
return cu;
|
||||
}
|
||||
|
||||
function getProviderDisplayName(p: LLMProvider) {
|
||||
if (p === "claude") return "Claude";
|
||||
if (p === "cursor") return "Cursor";
|
||||
if (p === "codex") return "Codex";
|
||||
return "Gemini";
|
||||
}
|
||||
|
||||
export default function ProviderSelectionEmptyState({
|
||||
selectedSession,
|
||||
currentSessionId,
|
||||
@@ -115,34 +105,12 @@ export default function ProviderSelectionEmptyState({
|
||||
setInput,
|
||||
}: ProviderSelectionEmptyStateProps) {
|
||||
const { t } = useTranslation("chat");
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const nextTaskPrompt = t("tasks.nextTaskPrompt", {
|
||||
defaultValue: "Start the next task",
|
||||
});
|
||||
|
||||
const selectProvider = (next: LLMProvider) => {
|
||||
setProvider(next);
|
||||
localStorage.setItem("selected-provider", next);
|
||||
setTimeout(() => textareaRef.current?.focus(), 100);
|
||||
};
|
||||
|
||||
const handleModelChange = (value: string) => {
|
||||
if (provider === "claude") {
|
||||
setClaudeModel(value);
|
||||
localStorage.setItem("claude-model", value);
|
||||
} else if (provider === "codex") {
|
||||
setCodexModel(value);
|
||||
localStorage.setItem("codex-model", value);
|
||||
} else if (provider === "gemini") {
|
||||
setGeminiModel(value);
|
||||
localStorage.setItem("gemini-model", value);
|
||||
} else {
|
||||
setCursorModel(value);
|
||||
localStorage.setItem("cursor-model", value);
|
||||
}
|
||||
};
|
||||
|
||||
const modelConfig = getModelConfig(provider);
|
||||
const currentModel = getModelValue(
|
||||
const currentModel = getCurrentModel(
|
||||
provider,
|
||||
claudeModel,
|
||||
cursorModel,
|
||||
@@ -150,7 +118,42 @@ export default function ProviderSelectionEmptyState({
|
||||
geminiModel,
|
||||
);
|
||||
|
||||
/* ── New session — provider picker ── */
|
||||
const currentModelLabel = useMemo(() => {
|
||||
const config = getModelConfig(provider);
|
||||
const found = config.OPTIONS.find(
|
||||
(o: { value: string; label: string }) => o.value === currentModel,
|
||||
);
|
||||
return found?.label || currentModel;
|
||||
}, [provider, currentModel]);
|
||||
|
||||
const handleModelSelect = useCallback(
|
||||
(providerId: LLMProvider, modelValue: string) => {
|
||||
// Set provider
|
||||
setProvider(providerId);
|
||||
localStorage.setItem("selected-provider", providerId);
|
||||
|
||||
// Set model for the correct provider
|
||||
if (providerId === "claude") {
|
||||
setClaudeModel(modelValue);
|
||||
localStorage.setItem("claude-model", modelValue);
|
||||
} else if (providerId === "codex") {
|
||||
setCodexModel(modelValue);
|
||||
localStorage.setItem("codex-model", modelValue);
|
||||
} else if (providerId === "gemini") {
|
||||
setGeminiModel(modelValue);
|
||||
localStorage.setItem("gemini-model", modelValue);
|
||||
} else {
|
||||
setCursorModel(modelValue);
|
||||
localStorage.setItem("cursor-model", modelValue);
|
||||
}
|
||||
|
||||
setDialogOpen(false);
|
||||
setTimeout(() => textareaRef.current?.focus(), 100);
|
||||
},
|
||||
[setProvider, setClaudeModel, setCursorModel, setCodexModel, setGeminiModel, textareaRef],
|
||||
);
|
||||
|
||||
/* ── New session — provider + model picker ── */
|
||||
if (!selectedSession && !currentSessionId) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center px-4">
|
||||
@@ -165,96 +168,100 @@ export default function ProviderSelectionEmptyState({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Provider cards — horizontal row, equal width */}
|
||||
<div className="mb-6 grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-2.5">
|
||||
{PROVIDERS.map((p) => {
|
||||
const active = provider === p.id;
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => selectProvider(p.id)}
|
||||
className={`
|
||||
relative flex flex-col items-center gap-2.5 rounded-xl border-[1.5px] px-2
|
||||
pb-4 pt-5 transition-all duration-150
|
||||
active:scale-[0.97]
|
||||
${
|
||||
active
|
||||
? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
|
||||
: "border-border bg-card/60 hover:border-border/80 hover:bg-card"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Model selector trigger — hero card style */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Card
|
||||
className="group mx-auto max-w-sm cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="flex items-center gap-3 p-4">
|
||||
<SessionProviderLogo
|
||||
provider={p.id}
|
||||
className={`h-9 w-9 transition-transform duration-150 ${active ? "scale-110" : ""}`}
|
||||
provider={provider}
|
||||
className="h-8 w-8 shrink-0"
|
||||
/>
|
||||
<div className="text-center">
|
||||
<p className="text-[13px] font-semibold leading-none text-foreground">
|
||||
{p.name}
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] leading-tight text-muted-foreground">
|
||||
{t(p.infoKey)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{getProviderDisplayName(provider)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">·</span>
|
||||
<span className="truncate text-sm text-foreground">
|
||||
{currentModelLabel}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">
|
||||
{t("providerSelection.clickToChange", {
|
||||
defaultValue: "Click to change model",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
{/* Check badge */}
|
||||
{active && (
|
||||
<div
|
||||
className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" />
|
||||
</div>
|
||||
</Card>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="max-w-md overflow-hidden p-0">
|
||||
<DialogTitle>Model Selector</DialogTitle>
|
||||
<Command>
|
||||
<CommandInput placeholder={t("providerSelection.searchModels", { defaultValue: "Search models..." })} />
|
||||
<CommandList className="max-h-[350px]">
|
||||
<CommandEmpty>
|
||||
{t("providerSelection.noModelsFound", { defaultValue: "No models found." })}
|
||||
</CommandEmpty>
|
||||
{PROVIDER_GROUPS.map((group) => (
|
||||
<CommandGroup
|
||||
key={group.id}
|
||||
heading={
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SessionProviderLogo provider={group.id} className="h-3.5 w-3.5 shrink-0" />
|
||||
{group.name}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Check className="h-2.5 w-2.5" strokeWidth={3} />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{group.models.map((model) => {
|
||||
const isSelected =
|
||||
provider === group.id && currentModel === model.value;
|
||||
return (
|
||||
<CommandItem
|
||||
key={`${group.id}-${model.value}`}
|
||||
value={`${group.name} ${model.label}`}
|
||||
onSelect={() => handleModelSelect(group.id, model.value)}
|
||||
>
|
||||
<span className="flex-1 truncate">{model.label}</span>
|
||||
{isSelected && (
|
||||
<Check className="ml-auto h-4 w-4 shrink-0 text-primary" />
|
||||
)}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
))}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Model picker — appears after provider is chosen */}
|
||||
<div
|
||||
className={`transition-all duration-200 ${provider ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0"}`}
|
||||
>
|
||||
<div className="mb-5 flex items-center justify-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t("providerSelection.selectModel")}
|
||||
</span>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={currentModel}
|
||||
onChange={(e) => handleModelChange(e.target.value)}
|
||||
tabIndex={-1}
|
||||
className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
>
|
||||
{modelConfig.OPTIONS.map(
|
||||
({ value, label }: { value: string; label: string }) => (
|
||||
<option key={value + label} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
),
|
||||
)}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground/70">
|
||||
{/* Ready prompt */}
|
||||
<p className="mt-4 text-center text-sm text-muted-foreground/70">
|
||||
{
|
||||
{
|
||||
{
|
||||
claude: t("providerSelection.readyPrompt.claude", {
|
||||
model: claudeModel,
|
||||
}),
|
||||
cursor: t("providerSelection.readyPrompt.cursor", {
|
||||
model: cursorModel,
|
||||
}),
|
||||
codex: t("providerSelection.readyPrompt.codex", {
|
||||
model: codexModel,
|
||||
}),
|
||||
gemini: t("providerSelection.readyPrompt.gemini", {
|
||||
model: geminiModel,
|
||||
}),
|
||||
}[provider]
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
claude: t("providerSelection.readyPrompt.claude", {
|
||||
model: claudeModel,
|
||||
}),
|
||||
cursor: t("providerSelection.readyPrompt.cursor", {
|
||||
model: cursorModel,
|
||||
}),
|
||||
codex: t("providerSelection.readyPrompt.codex", {
|
||||
model: codexModel,
|
||||
}),
|
||||
gemini: t("providerSelection.readyPrompt.gemini", {
|
||||
model: geminiModel,
|
||||
}),
|
||||
}[provider]
|
||||
}
|
||||
</p>
|
||||
|
||||
{/* Task banner */}
|
||||
{provider && tasksEnabled && isTaskMasterInstalled && (
|
||||
|
||||
19
src/contexts/PermissionContext.tsx
Normal file
19
src/contexts/PermissionContext.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
|
||||
import type { PendingPermissionRequest } from '../components/chat/types/types';
|
||||
|
||||
export interface PermissionContextValue {
|
||||
pendingPermissionRequests: PendingPermissionRequest[];
|
||||
handlePermissionDecision: (
|
||||
requestIds: string | string[],
|
||||
decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
|
||||
) => void;
|
||||
}
|
||||
|
||||
const PermissionContext = createContext<PermissionContextValue | null>(null);
|
||||
|
||||
export function usePermission(): PermissionContextValue | null {
|
||||
return useContext(PermissionContext);
|
||||
}
|
||||
|
||||
export default PermissionContext;
|
||||
64
src/shared/view/ui/Alert.tsx
Normal file
64
src/shared/view/ui/Alert.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import * as React from 'react';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
const alertVariants = cva(
|
||||
'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-card text-card-foreground',
|
||||
destructive:
|
||||
'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
|
||||
|
||||
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
|
||||
({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
role="alert"
|
||||
data-slot="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Alert.displayName = 'Alert';
|
||||
|
||||
const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-slot="alert-title"
|
||||
className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
AlertTitle.displayName = 'AlertTitle';
|
||||
|
||||
const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
AlertDescription.displayName = 'AlertDescription';
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription, alertVariants };
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
const badgeVariants = cva(
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
// Keep visual variants centralized so all button usages stay consistent.
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium touch-manipulation transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
'inline-flex touch-manipulation items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
78
src/shared/view/ui/Card.tsx
Normal file
78
src/shared/view/ui/Card.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Card.displayName = 'Card';
|
||||
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn('flex flex-col space-y-1.5 p-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardHeader.displayName = 'CardHeader';
|
||||
|
||||
const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn('font-semibold leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardTitle.displayName = 'CardTitle';
|
||||
|
||||
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardDescription.displayName = 'CardDescription';
|
||||
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
|
||||
)
|
||||
);
|
||||
CardContent.displayName = 'CardContent';
|
||||
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
|
||||
)
|
||||
);
|
||||
CardFooter.displayName = 'CardFooter';
|
||||
|
||||
/**
|
||||
* Use inside a CardHeader with `className="flex flex-row items-start justify-between"`.
|
||||
* Positions an action (button/icon) at the trailing edge of the header.
|
||||
*/
|
||||
const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn('ml-auto shrink-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardAction.displayName = 'CardAction';
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction };
|
||||
103
src/shared/view/ui/Collapsible.tsx
Normal file
103
src/shared/view/ui/Collapsible.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
interface CollapsibleContextValue {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null);
|
||||
|
||||
function useCollapsible() {
|
||||
const ctx = React.useContext(CollapsibleContext);
|
||||
if (!ctx) throw new Error('Collapsible components must be used within <Collapsible>');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
|
||||
({ defaultOpen = false, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, children, ...props }, ref) => {
|
||||
const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const open = isControlled ? controlledOpen : internalOpen;
|
||||
const onOpenChange = React.useCallback(
|
||||
(next: boolean) => {
|
||||
if (!isControlled) setInternalOpen(next);
|
||||
controlledOnOpenChange?.(next);
|
||||
},
|
||||
[isControlled, controlledOnOpenChange]
|
||||
);
|
||||
|
||||
const value = React.useMemo(() => ({ open, onOpenChange }), [open, onOpenChange]);
|
||||
|
||||
return (
|
||||
<CollapsibleContext.Provider value={value}>
|
||||
<div ref={ref} data-state={open ? 'open' : 'closed'} className={className} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
</CollapsibleContext.Provider>
|
||||
);
|
||||
}
|
||||
);
|
||||
Collapsible.displayName = 'Collapsible';
|
||||
|
||||
const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
|
||||
({ onClick, children, className, ...props }, ref) => {
|
||||
const { open, onOpenChange } = useCollapsible();
|
||||
|
||||
const handleClick = React.useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onOpenChange(!open);
|
||||
onClick?.(e);
|
||||
},
|
||||
[open, onOpenChange, onClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
data-state={open ? 'open' : 'closed'}
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
CollapsibleTrigger.displayName = 'CollapsibleTrigger';
|
||||
|
||||
const CollapsibleContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, children, ...props }, ref) => {
|
||||
const { open } = useCollapsible();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-state={open ? 'open' : 'closed'}
|
||||
className={cn(
|
||||
'grid transition-[grid-template-rows] duration-200 ease-out',
|
||||
open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
CollapsibleContent.displayName = 'CollapsibleContent';
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible };
|
||||
320
src/shared/view/ui/Command.tsx
Normal file
320
src/shared/view/ui/Command.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
import * as React from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
/*
|
||||
* Lightweight command palette — inspired by cmdk but no external deps.
|
||||
*
|
||||
* Architecture:
|
||||
* - Command owns the search string and a flat list of registered item values.
|
||||
* - Items register via context on mount and deregister on unmount.
|
||||
* - Filtering, active index, and keyboard nav happen centrally in Command.
|
||||
* - Items read their "is visible" / "is active" state from context.
|
||||
*/
|
||||
|
||||
interface ItemEntry {
|
||||
id: string;
|
||||
value: string; // searchable text (lowercase)
|
||||
onSelect: () => void;
|
||||
element: HTMLElement | null;
|
||||
}
|
||||
|
||||
interface CommandContextValue {
|
||||
search: string;
|
||||
setSearch: (value: string) => void;
|
||||
/** Set of visible item IDs after filtering (derived state, not a ref). */
|
||||
visibleIds: Set<string>;
|
||||
activeId: string | null;
|
||||
setActiveId: (id: string | null) => void;
|
||||
register: (entry: ItemEntry) => void;
|
||||
unregister: (id: string) => void;
|
||||
updateEntry: (id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => void;
|
||||
}
|
||||
|
||||
const CommandContext = React.createContext<CommandContextValue | null>(null);
|
||||
|
||||
function useCommand() {
|
||||
const ctx = React.useContext(CommandContext);
|
||||
if (!ctx) throw new Error('Command components must be used within <Command>');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
/* ─── Command (root) ─────────────────────────────────────────────── */
|
||||
|
||||
type CommandProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
const Command = React.forwardRef<HTMLDivElement, CommandProps>(
|
||||
({ className, children, ...props }, ref) => {
|
||||
const [search, setSearch] = React.useState('');
|
||||
const entriesRef = React.useRef<Map<string, ItemEntry>>(new Map());
|
||||
// Bump this counter whenever the entry set changes so derived state recalculates
|
||||
const [revision, setRevision] = React.useState(0);
|
||||
|
||||
const register = React.useCallback((entry: ItemEntry) => {
|
||||
entriesRef.current.set(entry.id, entry);
|
||||
setRevision(r => r + 1);
|
||||
}, []);
|
||||
|
||||
const unregister = React.useCallback((id: string) => {
|
||||
entriesRef.current.delete(id);
|
||||
setRevision(r => r + 1);
|
||||
}, []);
|
||||
|
||||
const updateEntry = React.useCallback((id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => {
|
||||
const existing = entriesRef.current.get(id);
|
||||
if (existing) {
|
||||
Object.assign(existing, patch);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Derive visible IDs from search + entries
|
||||
const visibleIds = React.useMemo(() => {
|
||||
const lowerSearch = search.toLowerCase();
|
||||
const ids = new Set<string>();
|
||||
for (const [id, entry] of entriesRef.current) {
|
||||
if (!lowerSearch || entry.value.includes(lowerSearch)) {
|
||||
ids.add(id);
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [search, revision]);
|
||||
|
||||
// Ordered list of visible entries (preserves DOM order via insertion order)
|
||||
const visibleEntries = React.useMemo(() => {
|
||||
const result: ItemEntry[] = [];
|
||||
for (const [, entry] of entriesRef.current) {
|
||||
if (visibleIds.has(entry.id)) result.push(entry);
|
||||
}
|
||||
return result;
|
||||
}, [visibleIds]);
|
||||
|
||||
// Active item tracking
|
||||
const [activeId, setActiveId] = React.useState<string | null>(null);
|
||||
|
||||
// Reset active to first visible item when search or visible set changes
|
||||
React.useEffect(() => {
|
||||
setActiveId(visibleEntries.length > 0 ? visibleEntries[0].id : null);
|
||||
}, [visibleEntries]);
|
||||
|
||||
const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
const entries = visibleEntries;
|
||||
if (entries.length === 0) return;
|
||||
|
||||
if (e.key === 'Enter') {
|
||||
const active = entries.find(entry => entry.id === activeId);
|
||||
active?.onSelect();
|
||||
return;
|
||||
}
|
||||
|
||||
const currentIndex = entries.findIndex(entry => entry.id === activeId);
|
||||
let nextIndex: number;
|
||||
if (e.key === 'ArrowDown') {
|
||||
nextIndex = currentIndex < entries.length - 1 ? currentIndex + 1 : 0;
|
||||
} else {
|
||||
nextIndex = currentIndex > 0 ? currentIndex - 1 : entries.length - 1;
|
||||
}
|
||||
const nextId = entries[nextIndex].id;
|
||||
setActiveId(nextId);
|
||||
|
||||
// Scroll the active item into view
|
||||
const nextEntry = entries[nextIndex];
|
||||
nextEntry.element?.scrollIntoView({ block: 'nearest' });
|
||||
}, [visibleEntries, activeId]);
|
||||
|
||||
const value = React.useMemo<CommandContextValue>(
|
||||
() => ({ search, setSearch, visibleIds, activeId, setActiveId, register, unregister, updateEntry }),
|
||||
[search, visibleIds, activeId, register, unregister, updateEntry]
|
||||
);
|
||||
|
||||
return (
|
||||
<CommandContext.Provider value={value}>
|
||||
<div
|
||||
ref={ref}
|
||||
role="combobox"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
className={cn('flex flex-col', className)}
|
||||
onKeyDown={handleKeyDown}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CommandContext.Provider>
|
||||
);
|
||||
}
|
||||
);
|
||||
Command.displayName = 'Command';
|
||||
|
||||
/* ─── CommandInput ───────────────────────────────────────────────── */
|
||||
|
||||
type CommandInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'>;
|
||||
|
||||
const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
|
||||
({ className, placeholder = 'Search...', ...props }, ref) => {
|
||||
const { search, setSearch } = useCommand();
|
||||
|
||||
return (
|
||||
<div className="flex items-center border-b px-3" role="presentation">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
|
||||
<input
|
||||
ref={ref}
|
||||
type="text"
|
||||
role="searchbox"
|
||||
aria-autocomplete="list"
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none',
|
||||
'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
CommandInput.displayName = 'CommandInput';
|
||||
|
||||
/* ─── CommandList ────────────────────────────────────────────────── */
|
||||
|
||||
const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
role="listbox"
|
||||
className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CommandList.displayName = 'CommandList';
|
||||
|
||||
/* ─── CommandEmpty ───────────────────────────────────────────────── */
|
||||
|
||||
const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => {
|
||||
const { search, visibleIds } = useCommand();
|
||||
|
||||
// Only show when there's a search term and zero matches
|
||||
if (!search || visibleIds.size > 0) return null;
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn('py-6 text-center text-sm text-muted-foreground', className)} {...props} />
|
||||
);
|
||||
}
|
||||
);
|
||||
CommandEmpty.displayName = 'CommandEmpty';
|
||||
|
||||
/* ─── CommandGroup ───────────────────────────────────────────────── */
|
||||
|
||||
interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
heading?: React.ReactNode;
|
||||
}
|
||||
|
||||
const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
|
||||
({ className, heading, children, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('overflow-hidden p-1', className)} role="group" aria-label={typeof heading === 'string' ? heading : undefined} {...props}>
|
||||
{heading && (
|
||||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground" role="presentation">
|
||||
{heading}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
CommandGroup.displayName = 'CommandGroup';
|
||||
|
||||
/* ─── CommandItem ────────────────────────────────────────────────── */
|
||||
|
||||
interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
value?: string;
|
||||
onSelect?: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
|
||||
({ className, value, onSelect, disabled, children, ...props }, ref) => {
|
||||
const { visibleIds, activeId, setActiveId, register, unregister, updateEntry } = useCommand();
|
||||
const stableId = React.useId();
|
||||
const elementRef = React.useRef<HTMLElement | null>(null);
|
||||
const searchableText = value || (typeof children === 'string' ? children : '');
|
||||
|
||||
// Register on mount, unregister on unmount
|
||||
React.useEffect(() => {
|
||||
register({
|
||||
id: stableId,
|
||||
value: searchableText.toLowerCase(),
|
||||
onSelect: onSelect || (() => {}),
|
||||
element: elementRef.current,
|
||||
});
|
||||
return () => unregister(stableId);
|
||||
// Only re-register when the identity changes, not onSelect
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [stableId, searchableText, register, unregister]);
|
||||
|
||||
// Keep onSelect up-to-date without re-registering
|
||||
React.useEffect(() => {
|
||||
updateEntry(stableId, { onSelect: onSelect || (() => {}) });
|
||||
}, [stableId, onSelect, updateEntry]);
|
||||
|
||||
// Keep element ref up-to-date
|
||||
const setRef = React.useCallback((node: HTMLDivElement | null) => {
|
||||
elementRef.current = node;
|
||||
updateEntry(stableId, { element: node });
|
||||
if (typeof ref === 'function') ref(node);
|
||||
else if (ref) ref.current = node;
|
||||
}, [stableId, updateEntry, ref]);
|
||||
|
||||
// Hidden by filter
|
||||
if (!visibleIds.has(stableId)) return null;
|
||||
|
||||
const isActive = activeId === stableId;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setRef}
|
||||
role="option"
|
||||
aria-selected={isActive}
|
||||
aria-disabled={disabled || undefined}
|
||||
data-active={isActive || undefined}
|
||||
className={cn(
|
||||
'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
|
||||
isActive && 'bg-accent text-accent-foreground',
|
||||
disabled && 'pointer-events-none opacity-50',
|
||||
className
|
||||
)}
|
||||
onPointerMove={() => { if (!disabled && activeId !== stableId) setActiveId(stableId); }}
|
||||
onClick={() => !disabled && onSelect?.()}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
CommandItem.displayName = 'CommandItem';
|
||||
|
||||
/* ─── CommandSeparator ───────────────────────────────────────────── */
|
||||
|
||||
const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
|
||||
)
|
||||
);
|
||||
CommandSeparator.displayName = 'CommandSeparator';
|
||||
|
||||
export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator };
|
||||
139
src/shared/view/ui/Confirmation.tsx
Normal file
139
src/shared/view/ui/Confirmation.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
import { Alert } from './Alert';
|
||||
import { Button } from './Button';
|
||||
|
||||
/* ─── Context ────────────────────────────────────────────────────── */
|
||||
|
||||
type ApprovalState = 'pending' | 'approved' | 'rejected' | undefined;
|
||||
|
||||
interface ConfirmationContextValue {
|
||||
approval: ApprovalState;
|
||||
}
|
||||
|
||||
const ConfirmationContext = React.createContext<ConfirmationContextValue | null>(null);
|
||||
|
||||
const useConfirmation = () => {
|
||||
const context = React.useContext(ConfirmationContext);
|
||||
if (!context) {
|
||||
throw new Error('Confirmation components must be used within Confirmation');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
/* ─── Confirmation (root) ────────────────────────────────────────── */
|
||||
|
||||
export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
approval?: ApprovalState;
|
||||
}
|
||||
|
||||
export const Confirmation: React.FC<ConfirmationProps> = ({
|
||||
className,
|
||||
approval = 'pending',
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const contextValue = React.useMemo(() => ({ approval }), [approval]);
|
||||
|
||||
return (
|
||||
<ConfirmationContext.Provider value={contextValue}>
|
||||
<Alert className={cn('flex flex-col gap-2', className)} {...props}>
|
||||
{children}
|
||||
</Alert>
|
||||
</ConfirmationContext.Provider>
|
||||
);
|
||||
};
|
||||
Confirmation.displayName = 'Confirmation';
|
||||
|
||||
/* ─── ConfirmationTitle ──────────────────────────────────────────── */
|
||||
|
||||
export type ConfirmationTitleProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<div
|
||||
data-slot="confirmation-title"
|
||||
className={cn('text-muted-foreground inline text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
ConfirmationTitle.displayName = 'ConfirmationTitle';
|
||||
|
||||
/* ─── ConfirmationRequest — visible only when pending ────────────── */
|
||||
|
||||
export interface ConfirmationRequestProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ConfirmationRequest: React.FC<ConfirmationRequestProps> = ({ children }) => {
|
||||
const { approval } = useConfirmation();
|
||||
if (approval !== 'pending') return null;
|
||||
return <>{children}</>;
|
||||
};
|
||||
ConfirmationRequest.displayName = 'ConfirmationRequest';
|
||||
|
||||
/* ─── ConfirmationAccepted — visible only when approved ──────────── */
|
||||
|
||||
export interface ConfirmationAcceptedProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ConfirmationAccepted: React.FC<ConfirmationAcceptedProps> = ({ children }) => {
|
||||
const { approval } = useConfirmation();
|
||||
if (approval !== 'approved') return null;
|
||||
return <>{children}</>;
|
||||
};
|
||||
ConfirmationAccepted.displayName = 'ConfirmationAccepted';
|
||||
|
||||
/* ─── ConfirmationRejected — visible only when rejected ──────────── */
|
||||
|
||||
export interface ConfirmationRejectedProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ConfirmationRejected: React.FC<ConfirmationRejectedProps> = ({ children }) => {
|
||||
const { approval } = useConfirmation();
|
||||
if (approval !== 'rejected') return null;
|
||||
return <>{children}</>;
|
||||
};
|
||||
ConfirmationRejected.displayName = 'ConfirmationRejected';
|
||||
|
||||
/* ─── ConfirmationActions — visible only when pending ────────────── */
|
||||
|
||||
export type ConfirmationActionsProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const { approval } = useConfirmation();
|
||||
if (approval !== 'pending') return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="confirmation-actions"
|
||||
className={cn('flex items-center justify-end gap-2 self-end', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
ConfirmationActions.displayName = 'ConfirmationActions';
|
||||
|
||||
/* ─── ConfirmationAction — styled button ─────────────────────────── */
|
||||
|
||||
export type ConfirmationActionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
variant?: 'default' | 'outline' | 'ghost' | 'destructive';
|
||||
};
|
||||
|
||||
export const ConfirmationAction: React.FC<ConfirmationActionProps> = ({
|
||||
variant = 'default',
|
||||
...props
|
||||
}) => (
|
||||
<Button className="h-8 px-3 text-sm" variant={variant} type="button" {...props} />
|
||||
);
|
||||
ConfirmationAction.displayName = 'ConfirmationAction';
|
||||
|
||||
export { useConfirmation };
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Moon, Sun } from 'lucide-react';
|
||||
|
||||
import { useTheme } from '../../../contexts/ThemeContext';
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
|
||||
217
src/shared/view/ui/Dialog.tsx
Normal file
217
src/shared/view/ui/Dialog.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import * as React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
interface DialogContextValue {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
triggerRef: React.MutableRefObject<HTMLElement | null>;
|
||||
}
|
||||
|
||||
const DialogContext = React.createContext<DialogContextValue | null>(null);
|
||||
|
||||
function useDialog() {
|
||||
const ctx = React.useContext(DialogContext);
|
||||
if (!ctx) throw new Error('Dialog components must be used within <Dialog>');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
interface DialogProps {
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
defaultOpen?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Dialog: React.FC<DialogProps> = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children }) => {
|
||||
const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
|
||||
const triggerRef = React.useRef<HTMLElement | null>(null) as React.MutableRefObject<HTMLElement | null>;
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const open = isControlled ? controlledOpen : internalOpen;
|
||||
const onOpenChange = React.useCallback(
|
||||
(next: boolean) => {
|
||||
if (!isControlled) setInternalOpen(next);
|
||||
controlledOnOpenChange?.(next);
|
||||
},
|
||||
[isControlled, controlledOnOpenChange]
|
||||
);
|
||||
|
||||
const value = React.useMemo(() => ({ open, onOpenChange, triggerRef }), [open, onOpenChange]);
|
||||
|
||||
return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
|
||||
};
|
||||
|
||||
const DialogTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(
|
||||
({ onClick, children, asChild, ...props }, ref) => {
|
||||
const { onOpenChange, triggerRef } = useDialog();
|
||||
|
||||
const handleClick = React.useCallback(
|
||||
(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
onOpenChange(true);
|
||||
onClick?.(e);
|
||||
},
|
||||
[onOpenChange, onClick]
|
||||
);
|
||||
|
||||
// asChild: clone child element and compose onClick + capture ref
|
||||
if (asChild && React.isValidElement(children)) {
|
||||
const child = children as React.ReactElement<any>;
|
||||
return React.cloneElement(child, {
|
||||
onClick: (e: React.MouseEvent<HTMLElement>) => {
|
||||
onOpenChange(true);
|
||||
child.props.onClick?.(e);
|
||||
},
|
||||
ref: (node: HTMLElement | null) => {
|
||||
triggerRef.current = node;
|
||||
// Forward the outer ref
|
||||
if (typeof ref === 'function') ref(node as any);
|
||||
else if (ref) (ref as React.MutableRefObject<any>).current = node;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={(node) => {
|
||||
triggerRef.current = node;
|
||||
if (typeof ref === 'function') ref(node);
|
||||
else if (ref) ref.current = node;
|
||||
}}
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
DialogTrigger.displayName = 'DialogTrigger';
|
||||
|
||||
interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
onEscapeKeyDown?: () => void;
|
||||
onPointerDownOutside?: () => void;
|
||||
}
|
||||
|
||||
const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
||||
|
||||
const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
|
||||
({ className, children, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
|
||||
const { open, onOpenChange, triggerRef } = useDialog();
|
||||
const contentRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const previousFocusRef = React.useRef<HTMLElement | null>(null);
|
||||
|
||||
// Save the element that had focus before opening, restore on close
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
previousFocusRef.current = document.activeElement as HTMLElement;
|
||||
} else if (previousFocusRef.current) {
|
||||
// Prefer the trigger, fall back to whatever was focused before
|
||||
const restoreTarget = triggerRef.current || previousFocusRef.current;
|
||||
restoreTarget?.focus();
|
||||
previousFocusRef.current = null;
|
||||
}
|
||||
}, [open, triggerRef]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
onEscapeKeyDown?.();
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Focus trap: Tab / Shift+Tab cycle within the dialog
|
||||
if (e.key === 'Tab' && contentRef.current) {
|
||||
const focusable = Array.from(
|
||||
contentRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
|
||||
);
|
||||
if (focusable.length === 0) return;
|
||||
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown, true);
|
||||
|
||||
// Prevent body scroll
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown, true);
|
||||
document.body.style.overflow = prev;
|
||||
};
|
||||
}, [open, onOpenChange, onEscapeKeyDown]);
|
||||
|
||||
// Auto-focus first focusable element on open
|
||||
React.useEffect(() => {
|
||||
if (open && contentRef.current) {
|
||||
// Small delay to let the portal render
|
||||
requestAnimationFrame(() => {
|
||||
const first = contentRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
|
||||
first?.focus();
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50">
|
||||
{/* Overlay */}
|
||||
<div
|
||||
className="fixed inset-0 animate-dialog-overlay-show bg-black/50 backdrop-blur-sm"
|
||||
onClick={() => {
|
||||
onPointerDownOutside?.();
|
||||
onOpenChange(false);
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
{/* Content */}
|
||||
<div
|
||||
ref={(node) => {
|
||||
contentRef.current = node;
|
||||
if (typeof ref === 'function') ref(node);
|
||||
else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
|
||||
}}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
className={cn(
|
||||
'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
|
||||
'rounded-xl border bg-popover text-popover-foreground shadow-lg',
|
||||
'animate-dialog-content-show',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
);
|
||||
DialogContent.displayName = 'DialogContent';
|
||||
|
||||
const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h2 ref={ref} className={cn('sr-only', className)} {...props} />
|
||||
)
|
||||
);
|
||||
DialogTitle.displayName = 'DialogTitle';
|
||||
|
||||
export { Dialog, DialogTrigger, DialogContent, DialogTitle, useDialog };
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Languages } from 'lucide-react';
|
||||
|
||||
import { languages } from '../../../i18n/languages';
|
||||
|
||||
type LanguageSelectorProps = {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
/* ── Container ─────────────────────────────────────────────────── */
|
||||
|
||||
198
src/shared/view/ui/Reasoning.tsx
Normal file
198
src/shared/view/ui/Reasoning.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import { BrainIcon, ChevronDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
|
||||
import { Shimmer } from './Shimmer';
|
||||
|
||||
/* ─── Context ────────────────────────────────────────────────────── */
|
||||
|
||||
interface ReasoningContextValue {
|
||||
isStreaming: boolean;
|
||||
isOpen: boolean;
|
||||
setIsOpen: (open: boolean) => void;
|
||||
duration: number | undefined;
|
||||
}
|
||||
|
||||
const ReasoningContext = React.createContext<ReasoningContextValue | null>(null);
|
||||
|
||||
export const useReasoning = () => {
|
||||
const context = React.useContext(ReasoningContext);
|
||||
if (!context) {
|
||||
throw new Error('Reasoning components must be used within Reasoning');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
/* ─── Reasoning (root) ───────────────────────────────────────────── */
|
||||
|
||||
const AUTO_CLOSE_DELAY = 1000;
|
||||
const MS_IN_S = 1000;
|
||||
|
||||
export interface ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
isStreaming?: boolean;
|
||||
open?: boolean;
|
||||
defaultOpen?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export const Reasoning = React.memo<ReasoningProps>(
|
||||
({
|
||||
className,
|
||||
isStreaming = false,
|
||||
open: controlledOpen,
|
||||
defaultOpen,
|
||||
onOpenChange,
|
||||
duration: durationProp,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const resolvedDefaultOpen = defaultOpen ?? isStreaming;
|
||||
const isExplicitlyClosed = defaultOpen === false;
|
||||
|
||||
// Controllable open state
|
||||
const [internalOpen, setInternalOpen] = React.useState(resolvedDefaultOpen);
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const isOpen = isControlled ? controlledOpen : internalOpen;
|
||||
const setIsOpen = React.useCallback(
|
||||
(next: boolean) => {
|
||||
if (!isControlled) setInternalOpen(next);
|
||||
onOpenChange?.(next);
|
||||
},
|
||||
[isControlled, onOpenChange]
|
||||
);
|
||||
|
||||
// Duration tracking
|
||||
const [duration, setDuration] = React.useState<number | undefined>(durationProp);
|
||||
const hasEverStreamedRef = React.useRef(isStreaming);
|
||||
const [hasAutoClosed, setHasAutoClosed] = React.useState(false);
|
||||
const startTimeRef = React.useRef<number | null>(null);
|
||||
|
||||
// Sync external duration prop
|
||||
React.useEffect(() => {
|
||||
if (durationProp !== undefined) setDuration(durationProp);
|
||||
}, [durationProp]);
|
||||
|
||||
// Track streaming start/end for duration
|
||||
React.useEffect(() => {
|
||||
if (isStreaming) {
|
||||
hasEverStreamedRef.current = true;
|
||||
if (startTimeRef.current === null) {
|
||||
startTimeRef.current = Date.now();
|
||||
}
|
||||
} else if (startTimeRef.current !== null) {
|
||||
setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
|
||||
startTimeRef.current = null;
|
||||
}
|
||||
}, [isStreaming]);
|
||||
|
||||
// Auto-open when streaming starts
|
||||
React.useEffect(() => {
|
||||
if (isStreaming && !isOpen && !isExplicitlyClosed) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
}, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
|
||||
|
||||
// Auto-close after streaming ends
|
||||
React.useEffect(() => {
|
||||
if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
|
||||
const timer = setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
setHasAutoClosed(true);
|
||||
}, AUTO_CLOSE_DELAY);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
|
||||
|
||||
const contextValue = React.useMemo(
|
||||
() => ({ duration, isOpen, isStreaming, setIsOpen }),
|
||||
[duration, isOpen, isStreaming, setIsOpen]
|
||||
);
|
||||
|
||||
return (
|
||||
<ReasoningContext.Provider value={contextValue}>
|
||||
<Collapsible
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
className={cn('not-prose', className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Collapsible>
|
||||
</ReasoningContext.Provider>
|
||||
);
|
||||
}
|
||||
);
|
||||
Reasoning.displayName = 'Reasoning';
|
||||
|
||||
/* ─── ReasoningTrigger ───────────────────────────────────────────── */
|
||||
|
||||
export interface ReasoningTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
|
||||
}
|
||||
|
||||
const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number): React.ReactNode => {
|
||||
if (isStreaming || duration === 0) {
|
||||
return <Shimmer>Thinking...</Shimmer>;
|
||||
}
|
||||
if (duration === undefined) {
|
||||
return <p>Thought for a few seconds</p>;
|
||||
}
|
||||
return <p>Thought for {duration} seconds</p>;
|
||||
};
|
||||
|
||||
export const ReasoningTrigger = React.memo<ReasoningTriggerProps>(
|
||||
({
|
||||
className,
|
||||
children,
|
||||
getThinkingMessage = defaultGetThinkingMessage,
|
||||
...props
|
||||
}) => {
|
||||
const { isStreaming, isOpen, duration } = useReasoning();
|
||||
|
||||
return (
|
||||
<CollapsibleTrigger
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? (
|
||||
<>
|
||||
<BrainIcon className="h-4 w-4" />
|
||||
{getThinkingMessage(isStreaming, duration)}
|
||||
<ChevronDownIcon
|
||||
className={cn(
|
||||
'h-4 w-4 transition-transform',
|
||||
isOpen ? 'rotate-180' : 'rotate-0'
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
);
|
||||
}
|
||||
);
|
||||
ReasoningTrigger.displayName = 'ReasoningTrigger';
|
||||
|
||||
/* ─── ReasoningContent ───────────────────────────────────────────── */
|
||||
|
||||
export interface ReasoningContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const ReasoningContent = React.memo<ReasoningContentProps>(
|
||||
({ className, children, ...props }) => (
|
||||
<CollapsibleContent
|
||||
className={cn('mt-4 text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</CollapsibleContent>
|
||||
)
|
||||
);
|
||||
ReasoningContent.displayName = 'ReasoningContent';
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
26
src/shared/view/ui/Shimmer.tsx
Normal file
26
src/shared/view/ui/Shimmer.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
interface ShimmerProps {
|
||||
children: string;
|
||||
className?: string;
|
||||
as?: React.ElementType;
|
||||
}
|
||||
|
||||
const Shimmer = React.memo<ShimmerProps>(({ children, className, as: Component = 'span' }) => {
|
||||
return (
|
||||
<Component
|
||||
className={cn(
|
||||
'animate-shimmer inline-block bg-[length:250%_100%] bg-clip-text text-transparent',
|
||||
'bg-[linear-gradient(90deg,transparent_33%,hsl(var(--foreground))_50%,transparent_67%),linear-gradient(hsl(var(--muted-foreground)),hsl(var(--muted-foreground)))]',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
Shimmer.displayName = 'Shimmer';
|
||||
|
||||
export { Shimmer };
|
||||
@@ -1,5 +1,6 @@
|
||||
import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
|
||||
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
export { Alert, AlertTitle, AlertDescription, alertVariants } from './Alert';
|
||||
export { Badge, badgeVariants } from './Badge';
|
||||
export { Button, buttonVariants } from './Button';
|
||||
export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from './Confirmation';
|
||||
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from './Card';
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
|
||||
export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from './Command';
|
||||
export { default as DarkModeToggle } from './DarkModeToggle';
|
||||
export { Dialog, DialogTrigger, DialogContent, DialogTitle } from './Dialog';
|
||||
export { Input } from './Input';
|
||||
export { ScrollArea } from './ScrollArea';
|
||||
export { Reasoning, ReasoningTrigger, ReasoningContent, useReasoning } from './Reasoning';
|
||||
export { Shimmer } from './Shimmer';
|
||||
export { default as Tooltip } from './Tooltip';
|
||||
export { PillBar, Pill } from './PillBar';
|
||||
|
||||
Reference in New Issue
Block a user