@agent-platform/ui 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/agent/agent-container-model.d.ts +19 -0
- package/dist/components/agent/agent-container-model.js +17 -0
- package/dist/components/agent/agent-container-view.d.ts +19 -2
- package/dist/components/agent/agent-container-view.js +8 -10
- package/dist/components/agent/agent-container.d.ts +1 -1
- package/dist/components/agent/agent-container.js +19 -4
- package/dist/components/agent/agent-screen.js +1 -4
- package/dist/components/agent/approval-ui-model.d.ts +9 -6
- package/dist/components/agent/approval-ui-model.js +10 -10
- package/dist/components/agent/message/message-item.js +2 -2
- package/dist/components/agent/message/tool-call-card.js +3 -4
- package/dist/components/agent/tool-approval-panel.d.ts +9 -0
- package/dist/components/agent/tool-approval-panel.js +11 -0
- package/dist/components/agent/types.d.ts +0 -37
- package/dist/components/ui/button.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { AgentInputProps } from './types';
|
|
2
|
+
interface ResolveEffectiveInputPropsParams {
|
|
3
|
+
inputProps?: Omit<AgentInputProps, 'className'>;
|
|
4
|
+
sendMessage?: (message: string) => Promise<void>;
|
|
5
|
+
isLoading: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface ResolveAgentContainerLayoutStateInput {
|
|
8
|
+
messageCount: number;
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
hasActiveApprovalRequest: boolean;
|
|
11
|
+
}
|
|
12
|
+
interface AgentContainerLayoutState {
|
|
13
|
+
shouldShowMessages: boolean;
|
|
14
|
+
shouldShowToolApprovalPanel: boolean;
|
|
15
|
+
shouldShowInput: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare function resolveEffectiveInputProps({ inputProps, sendMessage, isLoading, }: ResolveEffectiveInputPropsParams): AgentInputProps;
|
|
18
|
+
export declare function resolveAgentContainerLayoutState(input: ResolveAgentContainerLayoutStateInput): AgentContainerLayoutState;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export function resolveEffectiveInputProps({ inputProps, sendMessage, isLoading, }) {
|
|
2
|
+
return {
|
|
3
|
+
...inputProps,
|
|
4
|
+
onSend: inputProps?.onSend ?? sendMessage,
|
|
5
|
+
isLoading: inputProps?.isLoading ?? isLoading,
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
export function resolveAgentContainerLayoutState(input) {
|
|
9
|
+
const shouldShowMessages = input.messageCount > 0 || input.isLoading;
|
|
10
|
+
const shouldShowToolApprovalPanel = input.hasActiveApprovalRequest;
|
|
11
|
+
const shouldShowInput = !input.hasActiveApprovalRequest;
|
|
12
|
+
return {
|
|
13
|
+
shouldShowMessages,
|
|
14
|
+
shouldShowToolApprovalPanel,
|
|
15
|
+
shouldShowInput,
|
|
16
|
+
};
|
|
17
|
+
}
|
|
@@ -1,3 +1,20 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { ActiveToolApprovalRequest, ToolApprovalLabels, ToolCallState } from './provider/types';
|
|
2
|
+
import type { AgentHomeCardProps, AgentInputProps } from './types';
|
|
3
|
+
export interface AgentContainerViewProps {
|
|
4
|
+
onNewChatClick?: () => void;
|
|
5
|
+
cards?: AgentHomeCardProps[];
|
|
6
|
+
onCardClick?: (cardId: string) => void;
|
|
7
|
+
inputProps: AgentInputProps;
|
|
8
|
+
className?: string;
|
|
9
|
+
messages: import('@agent-platform/server').AgentMessage[];
|
|
10
|
+
pendingToolCalls: ToolCallState[];
|
|
11
|
+
activeApprovalRequest: ActiveToolApprovalRequest | null;
|
|
12
|
+
approveToolCall: () => void;
|
|
13
|
+
rejectToolCall: () => void;
|
|
14
|
+
toolApprovalLabels?: ToolApprovalLabels;
|
|
15
|
+
toolNameLabels: Record<string, string>;
|
|
16
|
+
isLoading: boolean;
|
|
17
|
+
error: string | null;
|
|
18
|
+
}
|
|
19
|
+
declare function AgentContainerView({ onNewChatClick, cards, onCardClick, inputProps, className, messages, pendingToolCalls, activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, toolNameLabels, isLoading, error, }: AgentContainerViewProps): import("react/jsx-runtime").JSX.Element;
|
|
3
20
|
export { AgentContainerView };
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { resolveToolApprovalLabels, resolveToolApprovalRiskLabel } from './approval-ui-model';
|
|
4
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { resolveAgentContainerLayoutState } from './agent-container-model';
|
|
5
5
|
import { AgentGreeting } from './agent-greeting';
|
|
6
6
|
import { AgentHeader } from './agent-header';
|
|
7
7
|
import { AgentHomeCards } from './agent-home-cards';
|
|
8
8
|
import { AgentInput } from './agent-input';
|
|
9
|
-
import { resolveInputMode } from './input-mode';
|
|
10
9
|
import { MessageList } from './message';
|
|
11
|
-
import {
|
|
12
|
-
function AgentContainerView({
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
import { ToolApprovalPanel } from './tool-approval-panel';
|
|
11
|
+
function AgentContainerView({ onNewChatClick, cards, onCardClick, inputProps, className, messages, pendingToolCalls, activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, toolNameLabels, isLoading, error, }) {
|
|
12
|
+
const layoutState = resolveAgentContainerLayoutState({
|
|
13
|
+
messageCount: messages.length,
|
|
14
|
+
isLoading,
|
|
16
15
|
hasActiveApprovalRequest: Boolean(activeApprovalRequest),
|
|
17
16
|
});
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
return (_jsxs("div", { "data-slot": "agent-container", className: cn('flex flex-col w-full h-full', className), children: [showHeader && _jsx(AgentHeader, { ...effectiveHeaderProps }), children ? (children) : shouldShowMessages ? (_jsxs("div", { className: "flex-1 overflow-y-auto bg-white", children: [_jsx(MessageList, { messages: messages, pendingToolCalls: pendingToolCalls, toolNameLabels: mergedToolNameLabels, isLoading: isLoading }), error && (_jsx("div", { className: "mx-4 mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600", children: error }))] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 bg-background px-4 py-4", children: [showGreeting && _jsx(AgentGreeting, { ...greetingProps }), showHomeCards && cards && _jsx(AgentHomeCards, { cards: cards, onCardClick: onCardClick })] })), inputMode === 'input' && _jsx(AgentInput, { ...effectiveInputProps }), inputMode === 'approval' && activeApprovalRequest && (_jsx("div", { "data-slot": "agent-tool-approval", className: "w-full border-t border-border bg-muted px-3 pb-3 pt-2", children: _jsxs("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-primary-foreground p-3 shadow-sm", children: [_jsx("div", { className: "text-sm font-bold text-foreground text-balance", children: approvalLabels.title }), _jsx("div", { className: "text-sm font-medium text-foreground text-balance", children: activeApprovalRequest.actionLabel }), _jsxs("div", { className: "text-xs text-muted-foreground text-pretty", children: [approvalLabels.description, " (", riskText, ")"] }), _jsxs("div", { className: "flex gap-2 pt-1", children: [_jsx(Button, { type: "button", variant: "outline", onClick: rejectToolCall, className: "flex-1", children: approvalLabels.rejectButton }), _jsx(Button, { type: "button", onClick: approveToolCall, className: "flex-1", children: approvalLabels.approveButton })] })] }) }))] }));
|
|
17
|
+
const maxWidth = 1120;
|
|
18
|
+
return (_jsxs("div", { "data-slot": "agent-container", className: cn(`flex h-full w-full flex-col mx-auto max-w-[${maxWidth}px]`, className), children: [_jsx(AgentHeader, { onNewChatClick: onNewChatClick }), layoutState.shouldShowMessages ? (_jsxs("div", { className: "flex-1 overflow-y-auto bg-white pb-[97px]", children: [_jsx(MessageList, { messages: messages, pendingToolCalls: pendingToolCalls, toolNameLabels: toolNameLabels, isLoading: isLoading }), error && (_jsx("div", { className: "mx-4 mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600", children: error }))] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-6 bg-background px-4 py-4", children: [_jsx(AgentGreeting, {}), cards && _jsx(AgentHomeCards, { cards: cards, onCardClick: onCardClick })] })), _jsxs("div", { className: `fixed bottom-0 left-0 right-0 mx-auto w-full max-w-[${maxWidth}px] bg-background`, children: [layoutState.shouldShowInput && _jsx(AgentInput, { ...inputProps }), layoutState.shouldShowToolApprovalPanel && (_jsx(ToolApprovalPanel, { activeApprovalRequest: activeApprovalRequest, approveToolCall: approveToolCall, rejectToolCall: rejectToolCall, toolApprovalLabels: toolApprovalLabels }))] })] }));
|
|
21
19
|
}
|
|
22
20
|
export { AgentContainerView };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { AgentContainerProps } from './types';
|
|
2
|
-
declare function AgentContainer({
|
|
2
|
+
declare function AgentContainer({ cards, onCardClick, toolNameLabels, inputProps, className }: AgentContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export { AgentContainer };
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { resolveEffectiveInputProps } from './agent-container-model';
|
|
5
|
+
import { DEFAULT_TOOL_NAME_LABELS } from './defaults';
|
|
4
6
|
import { AgentContainerView } from './agent-container-view';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
import { useOptionalAgentContext } from './provider/agent-context';
|
|
8
|
+
function AgentContainer({ cards, onCardClick, toolNameLabels, inputProps, className }) {
|
|
9
|
+
const context = useOptionalAgentContext();
|
|
10
|
+
const messages = context?.messages ?? [];
|
|
11
|
+
const pendingToolCalls = context?.pendingToolCalls ?? [];
|
|
12
|
+
const activeApprovalRequest = context?.activeApprovalRequest ?? null;
|
|
13
|
+
const approveToolCall = context?.approveToolCall ?? (() => undefined);
|
|
14
|
+
const rejectToolCall = context?.rejectToolCall ?? (() => undefined);
|
|
15
|
+
const toolApprovalLabels = context?.config.toolApprovalLabels;
|
|
16
|
+
const error = context?.error ?? null;
|
|
17
|
+
const isLoading = context?.isLoading ?? false;
|
|
18
|
+
const sendMessage = context?.sendMessage;
|
|
19
|
+
const onNewChatClick = context?.clearChat;
|
|
20
|
+
const mergedToolNameLabels = useMemo(() => ({ ...DEFAULT_TOOL_NAME_LABELS, ...toolNameLabels }), [toolNameLabels]);
|
|
21
|
+
const effectiveInputProps = useMemo(() => resolveEffectiveInputProps({ inputProps, sendMessage, isLoading }), [inputProps, sendMessage, isLoading]);
|
|
22
|
+
return (_jsx(AgentContainerView, { onNewChatClick: onNewChatClick, cards: cards, onCardClick: onCardClick, inputProps: effectiveInputProps, className: className, messages: messages, pendingToolCalls: pendingToolCalls, activeApprovalRequest: activeApprovalRequest, approveToolCall: approveToolCall, rejectToolCall: rejectToolCall, toolApprovalLabels: toolApprovalLabels, toolNameLabels: mergedToolNameLabels, isLoading: isLoading, error: error }));
|
|
8
23
|
}
|
|
9
24
|
export { AgentContainer };
|
|
@@ -2,9 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { AgentContainer } from './agent-container';
|
|
4
4
|
import { AgentProvider } from './provider';
|
|
5
|
-
function AgentScreenController({ ...containerProps }) {
|
|
6
|
-
return _jsx(AgentContainer, { ...containerProps });
|
|
7
|
-
}
|
|
8
5
|
export function AgentScreen({ agentId, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, toolApprovalLabels, ...containerProps }) {
|
|
9
|
-
return (_jsx(AgentProvider, { agentId: agentId, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, toolApprovalLabels: toolApprovalLabels, children: _jsx(
|
|
6
|
+
return (_jsx(AgentProvider, { agentId: agentId, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, toolApprovalLabels: toolApprovalLabels, children: _jsx(AgentContainer, { ...containerProps }) }));
|
|
10
7
|
}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
import type { ToolApprovalLabels } from './provider/types';
|
|
2
|
-
type ToolApprovalRiskLevel = 'read' | 'write' | 'destructive';
|
|
1
|
+
import type { ActiveToolApprovalRequest, ToolApprovalLabels } from './provider/types';
|
|
3
2
|
declare function resolveToolApprovalLabels(toolApprovalLabels?: ToolApprovalLabels): {
|
|
4
3
|
readonly title: "この操作を実行してもよろしいでしょうか?";
|
|
5
|
-
readonly description: "この操作はデータを変更する可能性があります。内容を確認して、承認または非承認を選択してください。";
|
|
6
4
|
readonly approveButton: "実行する";
|
|
7
5
|
readonly rejectButton: "実行しない";
|
|
8
6
|
} | {
|
|
9
7
|
title: string;
|
|
10
|
-
description: string;
|
|
11
8
|
approveButton: string;
|
|
12
9
|
rejectButton: string;
|
|
13
10
|
};
|
|
14
|
-
declare function
|
|
15
|
-
|
|
11
|
+
declare function resolveToolApprovalPanelState(activeApprovalRequest: ActiveToolApprovalRequest | null): {
|
|
12
|
+
isActionable: boolean;
|
|
13
|
+
actionLabel?: undefined;
|
|
14
|
+
} | {
|
|
15
|
+
actionLabel: string;
|
|
16
|
+
isActionable: boolean;
|
|
17
|
+
};
|
|
18
|
+
export { resolveToolApprovalLabels, resolveToolApprovalPanelState };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
const DEFAULT_TOOL_APPROVAL_LABELS = {
|
|
2
2
|
title: 'この操作を実行してもよろしいでしょうか?',
|
|
3
|
-
description: 'この操作はデータを変更する可能性があります。内容を確認して、承認または非承認を選択してください。',
|
|
4
3
|
approveButton: '実行する',
|
|
5
4
|
rejectButton: '実行しない',
|
|
6
5
|
};
|
|
@@ -10,18 +9,19 @@ function resolveToolApprovalLabels(toolApprovalLabels) {
|
|
|
10
9
|
}
|
|
11
10
|
return {
|
|
12
11
|
title: toolApprovalLabels.title ?? DEFAULT_TOOL_APPROVAL_LABELS.title,
|
|
13
|
-
description: toolApprovalLabels.description ?? DEFAULT_TOOL_APPROVAL_LABELS.description,
|
|
14
12
|
approveButton: toolApprovalLabels.approveButton ?? DEFAULT_TOOL_APPROVAL_LABELS.approveButton,
|
|
15
13
|
rejectButton: toolApprovalLabels.rejectButton ?? DEFAULT_TOOL_APPROVAL_LABELS.rejectButton,
|
|
16
14
|
};
|
|
17
15
|
}
|
|
18
|
-
function
|
|
19
|
-
if (
|
|
20
|
-
return
|
|
16
|
+
function resolveToolApprovalPanelState(activeApprovalRequest) {
|
|
17
|
+
if (!activeApprovalRequest) {
|
|
18
|
+
return {
|
|
19
|
+
isActionable: false,
|
|
20
|
+
};
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
return {
|
|
23
|
+
actionLabel: activeApprovalRequest.actionLabel,
|
|
24
|
+
isActionable: true,
|
|
25
|
+
};
|
|
26
26
|
}
|
|
27
|
-
export { resolveToolApprovalLabels,
|
|
27
|
+
export { resolveToolApprovalLabels, resolveToolApprovalPanelState };
|
|
@@ -12,8 +12,8 @@ export function MessageItem({ message, pendingToolCalls, toolNameLabels }) {
|
|
|
12
12
|
if (!isUser && message.isStreaming && !textContent && toolCalls.length === 0) {
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
|
-
return (_jsx("div", { className: cn('flex', isUser ? 'justify-end' : 'justify-start'), children: _jsxs("div", { className: "max-w-
|
|
16
|
-
? 'bg-
|
|
15
|
+
return (_jsx("div", { className: cn('flex', isUser ? 'justify-end' : 'justify-start'), children: _jsxs("div", { className: "max-w-3/4 space-y-1.5", children: [textContent && (_jsx("div", { className: cn('rounded-lg px-3 py-2', isUser
|
|
16
|
+
? 'bg-muted text-foreground'
|
|
17
17
|
: 'border border-border bg-card text-card-foreground'), children: isUser ? (_jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: textContent })) : (_jsx(Markdown, { content: textContent })) })), !isUser && toolCalls.length > 0 && (_jsx("div", { className: "ml-2 space-y-1.5 border-l-2 border-border pl-2", children: toolCalls.map((tc) => {
|
|
18
18
|
const toolCallState = pendingToolCalls.find((p) => p.toolCall.toolCallId === tc.toolCallId);
|
|
19
19
|
if (toolCallState) {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { CheckCircle, XCircle } from '@phosphor-icons/react/dist/ssr';
|
|
4
3
|
import { cn } from '../../../lib/utils';
|
|
5
4
|
const defaultStatusLabels = {
|
|
6
5
|
pending: '待機中',
|
|
@@ -11,9 +10,9 @@ const defaultStatusLabels = {
|
|
|
11
10
|
};
|
|
12
11
|
const statusColors = {
|
|
13
12
|
pending: 'bg-muted text-muted-foreground',
|
|
14
|
-
'awaiting-approval': 'bg-amber-
|
|
13
|
+
'awaiting-approval': 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
|
|
15
14
|
executing: 'bg-primary/10 text-primary',
|
|
16
|
-
completed: 'bg-green-
|
|
15
|
+
completed: 'bg-green-50 text-green-600 dark:bg-green-950 dark:text-green-400',
|
|
17
16
|
error: 'bg-destructive/10 text-destructive',
|
|
18
17
|
};
|
|
19
18
|
export function ToolCallCard({ toolCallState, toolNameLabels = {}, statusLabels, parametersLabel = 'パラメータ', resultLabel = '結果を表示', }) {
|
|
@@ -23,5 +22,5 @@ export function ToolCallCard({ toolCallState, toolNameLabels = {}, statusLabels,
|
|
|
23
22
|
? { ...defaultStatusLabels, ...statusLabels }
|
|
24
23
|
: defaultStatusLabels;
|
|
25
24
|
const statusLabel = mergedStatusLabels[status];
|
|
26
|
-
return (_jsxs("div", { className: "rounded-md
|
|
25
|
+
return (_jsxs("div", { className: "rounded-md p-1 mt-3 bg-card", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: toolLabel }), status === 'executing' ? (_jsx("div", { className: "h-3 w-3 animate-spin rounded-full border border-primary border-t-transparent" })) : (_jsx("span", { className: cn('rounded-full px-2 py-0.5 text-[11px]', statusColors[status]), children: statusLabel }))] }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: parametersLabel }), _jsx("pre", { className: "mt-1 ml-4 overflow-x-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: JSON.stringify(toolCall.input, null, 2) })] }), status === 'completed' && result !== undefined && (_jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: resultLabel }), _jsx("pre", { className: "mt-1 ml-4 max-h-40 overflow-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: typeof result === 'string' ? result : JSON.stringify(result, null, 2) })] })), status === 'error' && error && (_jsx("div", { className: "mt-2 rounded bg-destructive/10 p-2 text-xs text-destructive", children: error }))] }));
|
|
27
26
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ActiveToolApprovalRequest, ToolApprovalLabels } from './provider/types';
|
|
2
|
+
interface ToolApprovalPanelProps {
|
|
3
|
+
activeApprovalRequest: ActiveToolApprovalRequest | null;
|
|
4
|
+
approveToolCall: () => void;
|
|
5
|
+
rejectToolCall: () => void;
|
|
6
|
+
toolApprovalLabels?: ToolApprovalLabels;
|
|
7
|
+
}
|
|
8
|
+
declare function ToolApprovalPanel({ activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, }: ToolApprovalPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { ToolApprovalPanel };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from '../../lib/utils';
|
|
4
|
+
import { Button } from '../ui/button';
|
|
5
|
+
import { resolveToolApprovalLabels, resolveToolApprovalPanelState } from './approval-ui-model';
|
|
6
|
+
function ToolApprovalPanel({ activeApprovalRequest, approveToolCall, rejectToolCall, toolApprovalLabels, }) {
|
|
7
|
+
const approvalLabels = resolveToolApprovalLabels(toolApprovalLabels);
|
|
8
|
+
const panelState = resolveToolApprovalPanelState(activeApprovalRequest);
|
|
9
|
+
return (_jsx("div", { "data-slot": "agent-tool-approval", className: "w-full border-t border-border bg-muted px-3 pb-3 pt-2", children: _jsxs("div", { "data-state": panelState.isActionable ? 'actionable' : 'idle', className: cn('flex flex-col gap-2 rounded-lg border border-border bg-primary-foreground p-3 shadow-sm', !panelState.isActionable && 'opacity-75'), children: [_jsx("div", { className: "text-sm font-bold text-foreground text-balance", children: approvalLabels.title }), _jsxs("div", { className: "flex flex-col gap-2 pt-1", children: [_jsx(Button, { type: "button", variant: "outline", onClick: approveToolCall, disabled: !panelState.isActionable, className: "justify-start", children: approvalLabels.approveButton }), _jsx(Button, { type: "button", variant: "outline", onClick: rejectToolCall, disabled: !panelState.isActionable, className: "justify-start", children: approvalLabels.rejectButton })] })] }) }));
|
|
10
|
+
}
|
|
11
|
+
export { ToolApprovalPanel };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { ActiveToolApprovalRequest, ToolApprovalLabels, ToolCallState } from './provider/types';
|
|
3
2
|
export interface AgentHeaderProps {
|
|
4
3
|
historyLabel?: string;
|
|
5
4
|
onHistoryClick?: () => void;
|
|
@@ -32,36 +31,7 @@ export interface AgentInputProps {
|
|
|
32
31
|
isLoading?: boolean;
|
|
33
32
|
className?: string;
|
|
34
33
|
}
|
|
35
|
-
export interface AgentChatStateShape {
|
|
36
|
-
showHeader: boolean;
|
|
37
|
-
effectiveHeaderProps: AgentHeaderProps;
|
|
38
|
-
showGreeting: boolean;
|
|
39
|
-
greetingProps?: AgentGreetingProps;
|
|
40
|
-
showHomeCards: boolean;
|
|
41
|
-
cards?: AgentHomeCardProps[];
|
|
42
|
-
onCardClick?: (cardId: string) => void;
|
|
43
|
-
autoShowMessages: boolean;
|
|
44
|
-
showInput: boolean;
|
|
45
|
-
effectiveInputProps: AgentInputProps;
|
|
46
|
-
className?: string;
|
|
47
|
-
children?: ReactNode;
|
|
48
|
-
messages: import('@agent-platform/server').AgentMessage[];
|
|
49
|
-
pendingToolCalls: ToolCallState[];
|
|
50
|
-
activeApprovalRequest: ActiveToolApprovalRequest | null;
|
|
51
|
-
approveToolCall: () => void;
|
|
52
|
-
rejectToolCall: () => void;
|
|
53
|
-
toolApprovalLabels?: ToolApprovalLabels;
|
|
54
|
-
error: string | null;
|
|
55
|
-
isLoading: boolean;
|
|
56
|
-
mergedToolNameLabels: Record<string, string>;
|
|
57
|
-
hasMessages: boolean;
|
|
58
|
-
}
|
|
59
34
|
export interface AgentContainerProps {
|
|
60
|
-
showHeader?: boolean;
|
|
61
|
-
headerProps?: Omit<AgentHeaderProps, 'className'>;
|
|
62
|
-
showGreeting?: boolean;
|
|
63
|
-
greetingProps?: AgentGreetingProps;
|
|
64
|
-
showHomeCards?: boolean;
|
|
65
35
|
cards?: AgentHomeCardProps[];
|
|
66
36
|
onCardClick?: (cardId: string) => void;
|
|
67
37
|
/**
|
|
@@ -69,13 +39,6 @@ export interface AgentContainerProps {
|
|
|
69
39
|
* DEFAULT_TOOL_NAME_LABELSとマージされる
|
|
70
40
|
*/
|
|
71
41
|
toolNameLabels?: Record<string, string>;
|
|
72
|
-
/**
|
|
73
|
-
* メッセージが存在する場合に自動でMessageList+errorを表示するか
|
|
74
|
-
* デフォルト: true
|
|
75
|
-
*/
|
|
76
|
-
autoShowMessages?: boolean;
|
|
77
|
-
showInput?: boolean;
|
|
78
42
|
inputProps?: Omit<AgentInputProps, 'className'>;
|
|
79
43
|
className?: string;
|
|
80
|
-
children?: ReactNode;
|
|
81
44
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
import type * as React from 'react';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
5
5
|
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|