@agent-platform/ui 0.0.1 → 0.0.3
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-popup-widget.d.ts +1 -1
- package/dist/components/agent/agent-popup-widget.js +2 -2
- package/dist/components/agent/agent-screen.d.ts +1 -1
- package/dist/components/agent/agent-screen.js +2 -2
- package/dist/components/agent/provider/agent-provider.d.ts +1 -1
- package/dist/components/agent/provider/agent-provider.js +7 -3
- package/dist/components/agent/provider/runtime-config.d.ts +5 -0
- package/dist/components/agent/provider/runtime-config.js +8 -0
- package/dist/components/agent/provider/types.d.ts +14 -9
- package/dist/components/agent/provider/use-agent-chat.d.ts +2 -2
- package/dist/components/agent/provider/use-agent-chat.js +25 -15
- package/package.json +1 -1
|
@@ -12,4 +12,4 @@ export interface AgentPopupWidgetProps extends AgentProviderConfig {
|
|
|
12
12
|
offsetRight?: number | string;
|
|
13
13
|
zIndex?: number;
|
|
14
14
|
}
|
|
15
|
-
export declare function AgentPopupWidget({
|
|
15
|
+
export declare function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, containerProps, defaultOpen, launcherLabel, launcherAriaLabel, closeLabel, className, launcherClassName, offsetBottom, offsetRight, zIndex, }: AgentPopupWidgetProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,7 +14,7 @@ function toCssSize(value, fallback) {
|
|
|
14
14
|
return value;
|
|
15
15
|
return fallback;
|
|
16
16
|
}
|
|
17
|
-
export function AgentPopupWidget({
|
|
17
|
+
export function AgentPopupWidget({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, containerProps, defaultOpen = false, launcherLabel = 'AIアシスタント', launcherAriaLabel = 'AIアシスタントを開く', closeLabel = '閉じる', className, launcherClassName, offsetBottom, offsetRight, zIndex = DEFAULT_Z_INDEX, }) {
|
|
18
18
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
19
19
|
const overlayStyle = useMemo(() => ({
|
|
20
20
|
'--agent-popup-right': toCssSize(offsetRight, DEFAULT_OFFSET),
|
|
@@ -41,7 +41,7 @@ export function AgentPopupWidget({ endpoint, agentId, apiBaseUrl, executeClientT
|
|
|
41
41
|
document.body.style.overflow = originalOverflow;
|
|
42
42
|
};
|
|
43
43
|
}, [isOpen]);
|
|
44
|
-
return (_jsx(AgentProvider, {
|
|
44
|
+
return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, children: _jsxs("div", { "data-slot": "agent-popup-widget", style: overlayStyle, children: [!isOpen && (_jsx(Button, { type: "button", "aria-label": launcherAriaLabel, onClick: () => setIsOpen(true), className: cn('fixed right-[var(--agent-popup-right)] bottom-[var(--agent-popup-bottom)] z-[var(--agent-popup-z-index)] h-12 rounded-full px-5 shadow-lg', launcherClassName), children: launcherLabel })), isOpen && (_jsx("div", { className: "fixed inset-0 z-[var(--agent-popup-z-index)] bg-black/45 animate-in fade-in duration-200", onClick: () => setIsOpen(false), onKeyDown: (event) => {
|
|
45
45
|
if (event.key === 'Escape') {
|
|
46
46
|
setIsOpen(false);
|
|
47
47
|
}
|
|
@@ -2,4 +2,4 @@ import type { AgentProviderConfig } from './provider';
|
|
|
2
2
|
import type { AgentContainerProps } from './types';
|
|
3
3
|
export interface AgentScreenProps extends AgentProviderConfig, AgentContainerProps {
|
|
4
4
|
}
|
|
5
|
-
export declare function AgentScreen({
|
|
5
|
+
export declare function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,6 +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
|
-
export function AgentScreen({
|
|
6
|
-
return (_jsx(AgentProvider, {
|
|
5
|
+
export function AgentScreen({ agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, ...containerProps }) {
|
|
6
|
+
return (_jsx(AgentProvider, { agentId: agentId, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, getAgentHeaders: getAgentHeaders, disableToolApiAuthHeader: disableToolApiAuthHeader, children: _jsx(AgentContainer, { ...containerProps }) }));
|
|
7
7
|
}
|
|
@@ -7,4 +7,4 @@ export interface AgentProviderProps extends AgentProviderConfig {
|
|
|
7
7
|
* エージェントチャット機能を提供する内部Provider
|
|
8
8
|
* 公開APIは AgentScreen / AgentPopupWidget を使用する。
|
|
9
9
|
*/
|
|
10
|
-
export declare function AgentProvider({ children,
|
|
10
|
+
export declare function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { AgentContext } from './agent-context';
|
|
4
|
+
import { resolveAgentRuntimeConfig } from './runtime-config';
|
|
4
5
|
import { useAgentChatInternal } from './use-agent-chat';
|
|
5
6
|
/**
|
|
6
7
|
* エージェントチャット機能を提供する内部Provider
|
|
7
8
|
* 公開APIは AgentScreen / AgentPopupWidget を使用する。
|
|
8
9
|
*/
|
|
9
|
-
export function AgentProvider({ children,
|
|
10
|
+
export function AgentProvider({ children, agentId, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader, }) {
|
|
11
|
+
const runtimeConfig = resolveAgentRuntimeConfig();
|
|
10
12
|
const value = useAgentChatInternal({
|
|
11
13
|
config: {
|
|
12
|
-
endpoint,
|
|
14
|
+
endpoint: runtimeConfig.endpoint,
|
|
13
15
|
agentId,
|
|
14
|
-
apiBaseUrl,
|
|
16
|
+
apiBaseUrl: runtimeConfig.apiBaseUrl,
|
|
15
17
|
executeClientTool,
|
|
16
18
|
onError,
|
|
17
19
|
authToken,
|
|
18
20
|
getAuthToken,
|
|
21
|
+
getAgentHeaders,
|
|
22
|
+
disableToolApiAuthHeader,
|
|
19
23
|
},
|
|
20
24
|
});
|
|
21
25
|
return _jsx(AgentContext.Provider, { value: value, children: children });
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const FIXED_AGENT_ENDPOINT = 'https://agent-server-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api/agent';
|
|
2
|
+
const FIXED_API_BASE_URL = 'https://demo-scout-api-prod--agent-platform-dev-8e3ae.asia-east1.hosted.app/api';
|
|
3
|
+
export function resolveAgentRuntimeConfig() {
|
|
4
|
+
return {
|
|
5
|
+
endpoint: FIXED_AGENT_ENDPOINT,
|
|
6
|
+
apiBaseUrl: FIXED_API_BASE_URL,
|
|
7
|
+
};
|
|
8
|
+
}
|
|
@@ -19,20 +19,14 @@ export type ClientToolExecutor = (toolCall: import('@agent-platform/server').Too
|
|
|
19
19
|
output: unknown;
|
|
20
20
|
isError?: boolean;
|
|
21
21
|
}>;
|
|
22
|
+
export type AgentHeadersProvider = () => Record<string, string> | Promise<Record<string, string>>;
|
|
22
23
|
/**
|
|
23
24
|
* AgentProvider設定
|
|
24
25
|
*/
|
|
25
26
|
export interface AgentProviderConfig {
|
|
26
|
-
endpoint: string;
|
|
27
27
|
agentId?: string;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
30
|
-
* tool-callのapiEndpoint.pathと組み合わせて使用
|
|
31
|
-
* 例: apiBaseUrl="http://localhost:3001/api" + path="/candidates/{id}"
|
|
32
|
-
*/
|
|
33
|
-
apiBaseUrl?: string;
|
|
34
|
-
/**
|
|
35
|
-
* @deprecated apiBaseUrlを使用してください。
|
|
29
|
+
* @deprecated 旧実装との後方互換用。
|
|
36
30
|
* executeOn: 'client' のツールをブラウザ側で実行するコールバック
|
|
37
31
|
*/
|
|
38
32
|
executeClientTool?: ClientToolExecutor;
|
|
@@ -41,6 +35,17 @@ export interface AgentProviderConfig {
|
|
|
41
35
|
authToken?: string;
|
|
42
36
|
/** 動的にトークンを取得する関数(authTokenより優先) */
|
|
43
37
|
getAuthToken?: () => string | Promise<string>;
|
|
38
|
+
/** Agent Server リクエストにのみ追加するヘッダー */
|
|
39
|
+
getAgentHeaders?: AgentHeadersProvider;
|
|
40
|
+
/** trueの場合、Tool APIへのAuthorizationヘッダー付与を無効化する */
|
|
41
|
+
disableToolApiAuthHeader?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Agent通信先を解決済みの内部設定
|
|
45
|
+
*/
|
|
46
|
+
export interface ResolvedAgentRuntimeConfig extends AgentProviderConfig {
|
|
47
|
+
endpoint: string;
|
|
48
|
+
apiBaseUrl: string;
|
|
44
49
|
}
|
|
45
50
|
/**
|
|
46
51
|
* AgentContext値
|
|
@@ -54,5 +59,5 @@ export interface AgentContextValue {
|
|
|
54
59
|
sendMessage: (message: string) => Promise<void>;
|
|
55
60
|
loadThread: (threadId: string) => Promise<void>;
|
|
56
61
|
clearChat: () => void;
|
|
57
|
-
config:
|
|
62
|
+
config: ResolvedAgentRuntimeConfig;
|
|
58
63
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { AgentContextValue,
|
|
1
|
+
import type { AgentContextValue, ResolvedAgentRuntimeConfig } from './types';
|
|
2
2
|
interface UseAgentChatOptions {
|
|
3
|
-
config:
|
|
3
|
+
config: ResolvedAgentRuntimeConfig;
|
|
4
4
|
}
|
|
5
5
|
export declare function useAgentChatInternal(options: UseAgentChatOptions): AgentContextValue;
|
|
6
6
|
export {};
|
|
@@ -163,21 +163,29 @@ async function executeApiEndpoint(toolCall, apiBaseUrl, authHeaders) {
|
|
|
163
163
|
}
|
|
164
164
|
export function useAgentChatInternal(options) {
|
|
165
165
|
const { config } = options;
|
|
166
|
-
const { endpoint, agentId = 'assistant', apiBaseUrl, executeClientTool, onError, authToken, getAuthToken } = config;
|
|
166
|
+
const { endpoint, agentId = 'assistant', apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, getAgentHeaders, disableToolApiAuthHeader = false, } = config;
|
|
167
167
|
const [messages, setMessages] = useState([]);
|
|
168
168
|
const [threadId, setThreadId] = useState(null);
|
|
169
169
|
const [isLoading, setIsLoading] = useState(false);
|
|
170
170
|
const [error, setError] = useState(null);
|
|
171
171
|
const [pendingToolCalls, setPendingToolCalls] = useState(new Map());
|
|
172
172
|
const abortControllerRef = useRef(null);
|
|
173
|
-
const
|
|
173
|
+
const buildAgentHeaders = useCallback(async () => {
|
|
174
174
|
const headers = { 'Content-Type': 'application/json' };
|
|
175
175
|
const token = getAuthToken ? await getAuthToken() : authToken;
|
|
176
176
|
if (token) {
|
|
177
177
|
headers['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
|
|
178
178
|
}
|
|
179
|
+
const customHeaders = getAgentHeaders ? await getAgentHeaders() : undefined;
|
|
180
|
+
if (customHeaders) {
|
|
181
|
+
for (const [key, value] of Object.entries(customHeaders)) {
|
|
182
|
+
if (value) {
|
|
183
|
+
headers[key] = value;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
179
187
|
return headers;
|
|
180
|
-
}, [authToken, getAuthToken]);
|
|
188
|
+
}, [authToken, getAuthToken, getAgentHeaders]);
|
|
181
189
|
const handleError = useCallback((errorMessage) => {
|
|
182
190
|
setError(errorMessage);
|
|
183
191
|
onError?.(errorMessage);
|
|
@@ -244,14 +252,16 @@ export function useAgentChatInternal(options) {
|
|
|
244
252
|
console.log('[processStream] apiEndpoint:', JSON.stringify(tc.apiEndpoint, null, 2));
|
|
245
253
|
}
|
|
246
254
|
// 認証ヘッダーを構築
|
|
247
|
-
const
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
255
|
+
const toolApiHeaders = {};
|
|
256
|
+
if (!disableToolApiAuthHeader) {
|
|
257
|
+
const token = getAuthToken ? await getAuthToken() : authToken;
|
|
258
|
+
if (token) {
|
|
259
|
+
toolApiHeaders['Authorization'] = token.startsWith('Bearer ') ? token : `Bearer ${token}`;
|
|
260
|
+
}
|
|
251
261
|
}
|
|
252
262
|
for (const tc of unresolvedCalls) {
|
|
253
263
|
// apiBaseUrlとapiEndpointがある場合は自動実行
|
|
254
|
-
const canAutoExecute =
|
|
264
|
+
const canAutoExecute = Boolean(tc.apiEndpoint);
|
|
255
265
|
// 従来のexecuteClientToolがある場合はそれを使用
|
|
256
266
|
const canLegacyExecute = executeClientTool;
|
|
257
267
|
if (!canAutoExecute && !canLegacyExecute) {
|
|
@@ -271,7 +281,7 @@ export function useAgentChatInternal(options) {
|
|
|
271
281
|
let result;
|
|
272
282
|
if (canAutoExecute) {
|
|
273
283
|
// 新しい自動実行パス
|
|
274
|
-
result = await executeApiEndpoint(tc, apiBaseUrl,
|
|
284
|
+
result = await executeApiEndpoint(tc, apiBaseUrl, toolApiHeaders);
|
|
275
285
|
}
|
|
276
286
|
else if (canLegacyExecute) {
|
|
277
287
|
// 従来のexecuteClientToolを使用(後方互換性)
|
|
@@ -304,7 +314,7 @@ export function useAgentChatInternal(options) {
|
|
|
304
314
|
}
|
|
305
315
|
}
|
|
306
316
|
return { clientToolResults, clientToolCalls: executedClientToolCalls };
|
|
307
|
-
}, [apiBaseUrl, executeClientTool, authToken, getAuthToken, handleError]);
|
|
317
|
+
}, [apiBaseUrl, executeClientTool, authToken, getAuthToken, disableToolApiAuthHeader, handleError]);
|
|
308
318
|
const sendMessage = useCallback(async (message) => {
|
|
309
319
|
if (!message.trim() || isLoading)
|
|
310
320
|
return;
|
|
@@ -327,7 +337,7 @@ export function useAgentChatInternal(options) {
|
|
|
327
337
|
setMessages((prev) => [...prev, assistantMessage]);
|
|
328
338
|
try {
|
|
329
339
|
abortControllerRef.current = new AbortController();
|
|
330
|
-
const headers = await
|
|
340
|
+
const headers = await buildAgentHeaders();
|
|
331
341
|
const response = await fetch(`${endpoint}/chat`, {
|
|
332
342
|
method: 'POST',
|
|
333
343
|
headers,
|
|
@@ -364,7 +374,7 @@ export function useAgentChatInternal(options) {
|
|
|
364
374
|
...prev,
|
|
365
375
|
{ id: continueMessageId, role: 'assistant', content: [], isStreaming: true },
|
|
366
376
|
]);
|
|
367
|
-
const continueHeaders = await
|
|
377
|
+
const continueHeaders = await buildAgentHeaders();
|
|
368
378
|
const continueResponse = await fetch(`${endpoint}/chat/continue`, {
|
|
369
379
|
method: 'POST',
|
|
370
380
|
headers: continueHeaders,
|
|
@@ -400,12 +410,12 @@ export function useAgentChatInternal(options) {
|
|
|
400
410
|
setIsLoading(false);
|
|
401
411
|
abortControllerRef.current = null;
|
|
402
412
|
}
|
|
403
|
-
}, [isLoading, threadId, endpoint, agentId, processStream, handleError,
|
|
413
|
+
}, [isLoading, threadId, endpoint, agentId, processStream, handleError, buildAgentHeaders]);
|
|
404
414
|
const loadThread = useCallback(async (loadThreadId) => {
|
|
405
415
|
setIsLoading(true);
|
|
406
416
|
setError(null);
|
|
407
417
|
try {
|
|
408
|
-
const threadHeaders = await
|
|
418
|
+
const threadHeaders = await buildAgentHeaders();
|
|
409
419
|
const response = await fetch(`${endpoint}/threads/${loadThreadId}/messages`, {
|
|
410
420
|
headers: threadHeaders,
|
|
411
421
|
credentials: 'include',
|
|
@@ -428,7 +438,7 @@ export function useAgentChatInternal(options) {
|
|
|
428
438
|
finally {
|
|
429
439
|
setIsLoading(false);
|
|
430
440
|
}
|
|
431
|
-
}, [endpoint,
|
|
441
|
+
}, [endpoint, buildAgentHeaders]);
|
|
432
442
|
const clearChat = useCallback(() => {
|
|
433
443
|
if (abortControllerRef.current) {
|
|
434
444
|
abortControllerRef.current.abort();
|