@agent-platform/ui 0.0.1

package/README.md

@@ -0,0 +1,41 @@
+# @agent-platform/ui
+
+Agent Platform の共有 UI コンポーネントライブラリです。
+
+## インストール
+
+```bash
+pnpm add @agent-platform/ui
+```
+
+```css
+@import "@agent-platform/ui/styles/globals.css";
+```
+
+## 公開方針（現運用）
+
+`@agent-platform/ui` の公開は、ローカル/CI どちらも **`NODE_AUTH_TOKEN` を使う token ベース運用**です。
+
+- 必須環境変数: `NODE_AUTH_TOKEN`
+- CI では GitHub Secret `NPM_TOKEN` を `NODE_AUTH_TOKEN` にマップして実行
+- ローカル公開時も同じスクリプトを実行
+
+## 公開手順
+
+1. 認証付き事前チェック
+
+```bash
+pnpm --filter @agent-platform/ui release:check
+```
+
+2. 公開
+
+```bash
+pnpm --filter @agent-platform/ui publish:public
+```
+
+3. 公開ドライラン
+
+```bash
+pnpm --filter @agent-platform/ui publish:public:dry-run
+```

package/dist/components/agent/agent-container.d.ts

@@ -0,0 +1,3 @@
+import type { AgentContainerProps } from './types';
+declare function AgentContainer({ showHeader, headerProps, showGreeting, greetingProps, showHomeCards, cards, onCardClick, toolNameLabels, autoShowMessages, showInput, inputProps, className, children, }: AgentContainerProps): import("react/jsx-runtime").JSX.Element;
+export { AgentContainer };

package/dist/components/agent/agent-container.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { AgentGreeting } from './agent-greeting';
+import { AgentHeader } from './agent-header';
+import { AgentHomeCards } from './agent-home-cards';
+import { AgentInput } from './agent-input';
+import { DEFAULT_TOOL_NAME_LABELS } from './defaults';
+import { MessageList } from './message';
+import { useAgentContext } from './provider';
+function AgentContainer({ showHeader = true, headerProps, showGreeting = true, greetingProps, showHomeCards = true, cards, onCardClick, toolNameLabels, autoShowMessages = true, showInput = true, inputProps, className, children, }) {
+    // AgentProvider配下で使用されている場合のみ有効
+    let messages = [];
+    let pendingToolCalls = [];
+    let error = null;
+    let sendMessage;
+    let clearChat;
+    let isLoading = false;
+    try {
+        const context = useAgentContext();
+        messages = context.messages;
+        pendingToolCalls = context.pendingToolCalls;
+        error = context.error;
+        sendMessage = context.sendMessage;
+        clearChat = context.clearChat;
+        isLoading = context.isLoading;
+    }
+    catch {
+        // AgentProvider外で使用されている場合は無視
+    }
+    // propsのデフォルト値をコンテキストから適用
+    const effectiveInputProps = {
+        ...inputProps,
+        onSend: inputProps?.onSend ?? sendMessage,
+        isLoading: inputProps?.isLoading ?? isLoading,
+    };
+    const effectiveHeaderProps = {
+        ...headerProps,
+        onNewChatClick: headerProps?.onNewChatClick ?? clearChat,
+    };
+    const hasMessages = messages.length > 0;
+    const mergedToolNameLabels = { ...DEFAULT_TOOL_NAME_LABELS, ...toolNameLabels };
+    // 自動メッセージ表示用コンテンツ
+    const autoMessagesContent = autoShowMessages && (hasMessages || isLoading) && (_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 }))] }));
+    return (_jsxs("div", { "data-slot": "agent-container", className: cn('flex flex-col w-full h-full', className), children: [showHeader && _jsx(AgentHeader, { ...effectiveHeaderProps }), children ? (children) : autoMessagesContent ? (autoMessagesContent) : (_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 })] })), showInput && _jsx(AgentInput, { ...effectiveInputProps })] }));
+}
+export { AgentContainer };

package/dist/components/agent/agent-greeting.d.ts

@@ -0,0 +1,3 @@
+import type { AgentGreetingProps } from "./types";
+declare function AgentGreeting({ greeting, subtext, className, }: AgentGreetingProps): import("react/jsx-runtime").JSX.Element;
+export { AgentGreeting };

package/dist/components/agent/agent-greeting.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function AgentGreeting({ greeting = "こんにちは 👋", subtext = "何かお手伝いできることはありますか？", className, }) {
+    return (_jsxs("div", { "data-slot": "agent-greeting", className: cn("flex flex-col items-center gap-1.5 text-center", className), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: greeting }), _jsx("p", { className: "text-lg font-semibold tracking-tight text-balance text-card-foreground", children: subtext })] }));
+}
+export { AgentGreeting };

package/dist/components/agent/agent-header.d.ts

@@ -0,0 +1,3 @@
+import type { AgentHeaderProps } from "./types";
+declare function AgentHeader({ historyLabel, onHistoryClick, onSettingsClick, onNewChatClick, newChatLabel, settingsAriaLabel, className, }: AgentHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { AgentHeader };

package/dist/components/agent/agent-header.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDown, Gear } from "@phosphor-icons/react/dist/ssr";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+function AgentHeader({ historyLabel = "履歴", onHistoryClick, onSettingsClick, onNewChatClick, newChatLabel = "新規チャット", settingsAriaLabel = "設定", className, }) {
+    return (_jsxs("div", { "data-slot": "agent-header", className: cn("flex w-full items-center justify-between bg-background px-4 py-2", className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: historyLabel }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onHistoryClick, "aria-label": historyLabel, children: _jsx(CaretDown, { className: "size-5" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onSettingsClick, "aria-label": settingsAriaLabel, className: "text-foreground", children: _jsx(Gear, { className: "size-5" }) }), _jsx(Button, { size: "sm", onClick: onNewChatClick, className: "bg-foreground text-background text-xs font-medium hover:bg-foreground/90", children: newChatLabel })] })] }));
+}
+export { AgentHeader };

package/dist/components/agent/agent-home-card.d.ts

@@ -0,0 +1,3 @@
+import type { AgentHomeCardProps } from "./types";
+declare function AgentHomeCard({ id, icon, title, description, onClick, className, }: AgentHomeCardProps): import("react/jsx-runtime").JSX.Element;
+export { AgentHomeCard };

package/dist/components/agent/agent-home-card.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function AgentHomeCard({ id, icon, title, description, onClick, className, }) {
+    return (_jsxs("button", { type: "button", "data-slot": "agent-home-card", "data-card-id": id, onClick: onClick, className: cn("flex flex-1 flex-col items-start gap-2.5 rounded-lg border border-border bg-card p-3 text-left transition-all hover:border-primary/30 hover:bg-accent focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", className), children: [_jsx("div", { className: "text-muted-foreground [&_svg]:size-5", children: icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-semibold leading-none text-card-foreground", children: title }), _jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: description })] })] }));
+}
+export { AgentHomeCard };

package/dist/components/agent/agent-home-cards.d.ts

@@ -0,0 +1,9 @@
+import type { AgentHomeCardProps } from "./types";
+interface AgentHomeCardsProps {
+    cards: AgentHomeCardProps[];
+    onCardClick?: (cardId: string) => void;
+    className?: string;
+}
+declare function AgentHomeCards({ cards, onCardClick, className, }: AgentHomeCardsProps): import("react/jsx-runtime").JSX.Element;
+export { AgentHomeCards };
+export type { AgentHomeCardsProps };

package/dist/components/agent/agent-home-cards.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { AgentHomeCard } from "./agent-home-card";
+function AgentHomeCards({ cards, onCardClick, className, }) {
+    return (_jsx("div", { "data-slot": "agent-home-cards", className: cn("flex w-full items-start justify-center gap-4 px-12", className), children: cards.map((card) => (_jsx(AgentHomeCard, { ...card, onClick: () => {
+                card.onClick?.();
+                onCardClick?.(card.id);
+            } }, card.id))) }));
+}
+export { AgentHomeCards };

package/dist/components/agent/agent-input.d.ts

@@ -0,0 +1,3 @@
+import type { AgentInputProps } from './types';
+declare function AgentInput({ value: controlledValue, onChange, onSend, onAttach, placeholder, disabled, isLoading, className, }: AgentInputProps): import("react/jsx-runtime").JSX.Element;
+export { AgentInput };

package/dist/components/agent/agent-input.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paperclip, PaperPlaneTilt } from '@phosphor-icons/react/dist/ssr';
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+function AgentInput({ value: controlledValue, onChange, onSend, onAttach, placeholder = 'AIに相談してみましょう', disabled = false, isLoading = false, className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = useState('');
+    const textareaRef = useRef(null);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const resetTextareaHeight = useCallback(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+        }
+    }, []);
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 160)}px`;
+        }
+    }, []);
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onChange?.(newValue);
+        adjustTextareaHeight();
+    }, [isControlled, onChange, adjustTextareaHeight]);
+    const handleSend = useCallback(() => {
+        if (value.trim() && !disabled && !isLoading) {
+            onSend?.(value.trim());
+            if (!isControlled) {
+                setUncontrolledValue('');
+            }
+            resetTextareaHeight();
+        }
+    }, [value, disabled, isLoading, onSend, isControlled, resetTextareaHeight]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+    const canSend = value.trim().length > 0 && !disabled && !isLoading;
+    return (_jsx("div", { "data-slot": "agent-input", className: cn('w-full border-t border-border bg-muted px-3 pb-3 pt-2', className), children: _jsxs("div", { className: "flex items-end gap-2 rounded-lg border border-border bg-background px-2.5 py-1.5 transition-colors focus-within:border-primary/40", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onAttach, disabled: disabled, "aria-label": "\u30D5\u30A1\u30A4\u30EB\u3092\u6DFB\u4ED8", className: "mb-0.5 text-muted-foreground hover:text-foreground", children: _jsx(Paperclip, { className: "size-5" }) }), _jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, className: "flex-1 resize-none bg-transparent text-sm leading-5 text-foreground placeholder:text-placeholder focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", style: { maxHeight: '160px' } }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: handleSend, disabled: !canSend, "aria-label": "\u9001\u4FE1 (\u2318+Enter)", className: "mb-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx(PaperPlaneTilt, { className: "size-5", weight: "fill" }) })] }) }));
+}
+export { AgentInput };

package/dist/components/agent/agent-popup-widget.d.ts

@@ -0,0 +1,15 @@
+import type { AgentProviderConfig } from './provider';
+import type { AgentContainerProps } from './types';
+export interface AgentPopupWidgetProps extends AgentProviderConfig {
+    containerProps?: AgentContainerProps;
+    defaultOpen?: boolean;
+    launcherLabel?: string;
+    launcherAriaLabel?: string;
+    closeLabel?: string;
+    className?: string;
+    launcherClassName?: string;
+    offsetBottom?: number | string;
+    offsetRight?: number | string;
+    zIndex?: number;
+}
+export declare function AgentPopupWidget({ endpoint, agentId, apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, containerProps, defaultOpen, launcherLabel, launcherAriaLabel, closeLabel, className, launcherClassName, offsetBottom, offsetRight, zIndex, }: AgentPopupWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/agent-popup-widget.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '../ui/button';
+import { cn } from '../../lib/utils';
+import { AgentContainer } from './agent-container';
+import { AgentProvider } from './provider';
+const DEFAULT_OFFSET = '1.5rem';
+const DEFAULT_Z_INDEX = 60;
+function toCssSize(value, fallback) {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (typeof value === 'string' && value.trim().length > 0)
+        return value;
+    return fallback;
+}
+export function AgentPopupWidget({ endpoint, agentId, apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, containerProps, defaultOpen = false, launcherLabel = 'AIアシスタント', launcherAriaLabel = 'AIアシスタントを開く', closeLabel = '閉じる', className, launcherClassName, offsetBottom, offsetRight, zIndex = DEFAULT_Z_INDEX, }) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const overlayStyle = useMemo(() => ({
+        '--agent-popup-right': toCssSize(offsetRight, DEFAULT_OFFSET),
+        '--agent-popup-bottom': toCssSize(offsetBottom, DEFAULT_OFFSET),
+        '--agent-popup-z-index': String(zIndex),
+    }), [offsetBottom, offsetRight, zIndex]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = originalOverflow;
+        };
+    }, [isOpen]);
+    return (_jsx(AgentProvider, { endpoint: endpoint, agentId: agentId, apiBaseUrl: apiBaseUrl, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, 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) => {
+                        if (event.key === 'Escape') {
+                            setIsOpen(false);
+                        }
+                    }, children: _jsxs("section", { role: "dialog", "aria-modal": "true", "aria-label": launcherLabel, className: cn('fixed inset-0 flex flex-col overflow-hidden bg-background animate-in fade-in zoom-in-95 duration-200', 'sm:inset-auto sm:right-[var(--agent-popup-right)] sm:bottom-[var(--agent-popup-bottom)] sm:h-[min(70vh,720px)] sm:w-[380px] sm:rounded-2xl sm:border sm:border-border sm:shadow-2xl', className), onClick: (event) => event.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": closeLabel, className: "absolute top-3 right-3 z-10", onClick: () => setIsOpen(false), children: "\u00D7" }), _jsx(AgentContainer, { ...containerProps, className: cn('h-full bg-background', containerProps?.className) })] }) }))] }) }));
+}

package/dist/components/agent/agent-screen.d.ts

@@ -0,0 +1,5 @@
+import type { AgentProviderConfig } from './provider';
+import type { AgentContainerProps } from './types';
+export interface AgentScreenProps extends AgentProviderConfig, AgentContainerProps {
+}
+export declare function AgentScreen({ endpoint, agentId, apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, ...containerProps }: AgentScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/agent-screen.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AgentContainer } from './agent-container';
+import { AgentProvider } from './provider';
+export function AgentScreen({ endpoint, agentId, apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, ...containerProps }) {
+    return (_jsx(AgentProvider, { endpoint: endpoint, agentId: agentId, apiBaseUrl: apiBaseUrl, executeClientTool: executeClientTool, onError: onError, authToken: authToken, getAuthToken: getAuthToken, children: _jsx(AgentContainer, { ...containerProps }) }));
+}

package/dist/components/agent/defaults.d.ts

@@ -0,0 +1,11 @@
+import type { AgentHomeCardProps } from './types';
+/**
+ * デフォルトのホームカード定義
+ * 消費側でカスタマイズ可能だが、デフォルトとして提供
+ */
+export declare const DEFAULT_HOME_CARDS: Omit<AgentHomeCardProps, 'icon'>[];
+/**
+ * デフォルトのツール名ラベル
+ * 消費側でマージ/上書き可能
+ */
+export declare const DEFAULT_TOOL_NAME_LABELS: Record<string, string>;

package/dist/components/agent/defaults.js

@@ -0,0 +1,23 @@
+/**
+ * デフォルトのホームカード定義
+ * 消費側でカスタマイズ可能だが、デフォルトとして提供
+ */
+export const DEFAULT_HOME_CARDS = [
+    {
+        id: 'chat',
+        title: 'チャットを開始',
+        description: 'AIアシスタントと会話を始めましょう',
+    },
+];
+/**
+ * デフォルトのツール名ラベル
+ * 消費側でマージ/上書き可能
+ */
+export const DEFAULT_TOOL_NAME_LABELS = {
+    // 汎用ツール名
+    search: '検索',
+    get: '取得',
+    create: '作成',
+    update: '更新',
+    delete: '削除',
+};

package/dist/components/agent/index.d.ts

@@ -0,0 +1,5 @@
+export { AgentScreen } from './agent-screen';
+export type { AgentScreenProps } from './agent-screen';
+export { AgentPopupWidget } from './agent-popup-widget';
+export type { AgentPopupWidgetProps } from './agent-popup-widget';
+export type { AgentHomeCardProps } from './types';

package/dist/components/agent/index.js

@@ -0,0 +1,2 @@
+export { AgentScreen } from './agent-screen';
+export { AgentPopupWidget } from './agent-popup-widget';

package/dist/components/agent/message/index.d.ts

@@ -0,0 +1,8 @@
+export { MessageList } from './message-list';
+export type { MessageListProps } from './message-list';
+export { MessageItem } from './message-item';
+export type { MessageItemProps } from './message-item';
+export { ToolCallCard } from './tool-call-card';
+export type { ToolCallCardProps } from './tool-call-card';
+export { MessageLoading, ThinkingDots } from './message-loading';
+export type { MessageLoadingProps } from './message-loading';

package/dist/components/agent/message/index.js

@@ -0,0 +1,4 @@
+export { MessageList } from './message-list';
+export { MessageItem } from './message-item';
+export { ToolCallCard } from './tool-call-card';
+export { MessageLoading, ThinkingDots } from './message-loading';

package/dist/components/agent/message/markdown.d.ts

@@ -0,0 +1,6 @@
+interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+export declare function Markdown({ content, className }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/agent/message/markdown.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../../../lib/utils';
+const listItemPattern = /^\s*(?:[-*+]\s+|\d+[.)]\s+)/;
+const codeFenceStartPattern = /^\s*```/;
+const blockquotePattern = /^\s*>/;
+function isListItemLine(line) {
+    return listItemPattern.test(line);
+}
+function isPotentialParagraphLine(line) {
+    if (!line.trim())
+        return false;
+    if (/^(?: {4,}|\t)/.test(line))
+        return false;
+    const normalizedLine = line.replace(/^[ \u3000]+/, '');
+    if (!normalizedLine)
+        return false;
+    if (isListItemLine(normalizedLine))
+        return false;
+    if (blockquotePattern.test(normalizedLine))
+        return false;
+    if (codeFenceStartPattern.test(normalizedLine))
+        return false;
+    return true;
+}
+function normalizeAgentMarkdown(content) {
+    const lines = content.replace(/\r\n?/g, '\n').split('\n');
+    const normalized = [];
+    for (const line of lines) {
+        const prevLine = normalized[normalized.length - 1] ?? '';
+        if (isListItemLine(prevLine) && isPotentialParagraphLine(line)) {
+            normalized.push('');
+        }
+        normalized.push(line);
+    }
+    return normalized.join('\n');
+}
+const components = {
+    pre: ({ children }) => (_jsx("pre", { className: "bg-background/50 rounded p-2 overflow-x-auto my-1.5 text-xs", children: children })),
+    code: ({ children, className }) => {
+        if (className) {
+            return _jsx("code", { className: cn('text-xs', className), children: children });
+        }
+        return (_jsx("code", { className: "bg-background/50 px-1 py-0.5 rounded text-xs", children: children }));
+    },
+    a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline hover:text-primary/80", children: children })),
+    ul: ({ children }) => (_jsx("ul", { className: "list-disc list-inside pl-1 my-1.5 space-y-0.5", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "list-decimal list-inside pl-1 my-1.5 space-y-0.5", children: children })),
+    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
+    p: ({ children }) => _jsx("p", { className: "my-1.5 first:mt-0 last:mb-0", children: children }),
+    h1: ({ children }) => (_jsx("h1", { className: "text-base font-bold mt-3 mb-1.5 first:mt-0", children: children })),
+    h2: ({ children }) => (_jsx("h2", { className: "text-sm font-bold mt-2.5 mb-1 first:mt-0", children: children })),
+    h3: ({ children }) => (_jsx("h3", { className: "text-sm font-semibold mt-2 mb-1 first:mt-0", children: children })),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-border pl-3 my-1.5 text-muted-foreground italic", children: children })),
+    table: ({ children }) => (_jsx("div", { className: "overflow-x-auto my-1.5", children: _jsx("table", { className: "min-w-full border-collapse border border-border text-xs", children: children }) })),
+    thead: ({ children }) => (_jsx("thead", { className: "bg-muted/50", children: children })),
+    th: ({ children }) => (_jsx("th", { className: "border border-border px-2 py-1.5 text-left font-semibold", children: children })),
+    td: ({ children }) => (_jsx("td", { className: "border border-border px-2 py-1.5", children: children })),
+    hr: () => _jsx("hr", { className: "my-3 border-border" }),
+};
+export function Markdown({ content, className }) {
+    const normalizedContent = normalizeAgentMarkdown(content);
+    return (_jsx("div", { className: cn('text-sm leading-relaxed', className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: normalizedContent }) }));
+}

package/dist/components/agent/message/message-item.d.ts

@@ -0,0 +1,7 @@
+import type { AgentMessage, ToolCallState } from '../provider/types';
+export interface MessageItemProps {
+    message: AgentMessage;
+    pendingToolCalls: ToolCallState[];
+    toolNameLabels?: Record<string, string>;
+}
+export declare function MessageItem({ message, pendingToolCalls, toolNameLabels, }: MessageItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/agent/message/message-item.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
+import { Markdown } from './markdown';
+import { ToolCallCard } from './tool-call-card';
+export function MessageItem({ message, pendingToolCalls, toolNameLabels, }) {
+    const isUser = message.role === 'user';
+    // メッセージからテキストを抽出
+    const textContent = message.content
+        .filter((c) => c.type === 'text')
+        .map((c) => c.text)
+        .join('');
+    // メッセージからツールコールを抽出
+    const toolCalls = message.content
+        .filter((c) => c.type === 'tool-call')
+        .map((c) => c.toolCall);
+    // 空のストリーミング中の assistant メッセージは非表示（MessageLoading が表示されるため）
+    if (!isUser && message.isStreaming && !textContent && toolCalls.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: cn('flex', isUser ? 'justify-end' : 'justify-start'), children: _jsxs("div", { className: "max-w-xl space-y-1.5", children: [textContent && (_jsx("div", { className: cn('rounded-lg px-3 py-2', isUser
+                        ? 'bg-primary text-primary-foreground'
+                        : '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) => {
+                        const toolCallState = pendingToolCalls.find((p) => p.toolCall.toolCallId === tc.toolCallId);
+                        if (toolCallState) {
+                            return (_jsx(ToolCallCard, { toolCallState: toolCallState, toolNameLabels: toolNameLabels }, tc.toolCallId));
+                        }
+                        return null;
+                    }) }))] }) }));
+}

package/dist/components/agent/message/message-list.d.ts

@@ -0,0 +1,8 @@
+import type { AgentMessage, ToolCallState } from '../provider/types';
+export interface MessageListProps {
+    messages: AgentMessage[];
+    pendingToolCalls: ToolCallState[];
+    toolNameLabels?: Record<string, string>;
+    isLoading?: boolean;
+}
+export declare function MessageList({ messages, pendingToolCalls, toolNameLabels, isLoading, }: MessageListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/agent/message/message-list.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { MessageItem } from './message-item';
+import { MessageLoading } from './message-loading';
+export function MessageList({ messages, pendingToolCalls, toolNameLabels, isLoading = false, }) {
+    const bottomRef = useRef(null);
+    // 新しいメッセージが追加されたら自動スクロール
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages, isLoading]);
+    if (messages.length === 0 && !isLoading) {
+        return null;
+    }
+    const lastMessage = messages[messages.length - 1];
+    // Check if the last assistant message has actual text content
+    const lastAssistantHasContent = lastMessage?.role === 'assistant' &&
+        lastMessage.content.some((c) => c.type === 'text' && c.text.length > 0);
+    // Show loading indicator when:
+    // 1. isLoading is true AND
+    // 2. No messages yet OR last message is from user OR last assistant has no content
+    const showLoadingIndicator = isLoading && (messages.length === 0 || lastMessage?.role === 'user' || !lastAssistantHasContent);
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-3", children: [messages.map((message) => (_jsx(MessageItem, { message: message, pendingToolCalls: pendingToolCalls, toolNameLabels: toolNameLabels }, message.id))), showLoadingIndicator && _jsx(MessageLoading, {}), _jsx("div", { ref: bottomRef })] }));
+}

package/dist/components/agent/message/message-loading.d.ts

@@ -0,0 +1,10 @@
+export interface MessageLoadingProps {
+    className?: string;
+}
+export declare function MessageLoading({ className }: MessageLoadingProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compact loading indicator for inline use (e.g., inside MessageItem during streaming)
+ */
+export declare function ThinkingDots({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/message/message-loading.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
+/** Reusable bouncing dots animation */
+function BouncingDots() {
+    return (_jsxs("span", { className: "flex gap-1", "aria-hidden": "true", children: [_jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" }), _jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]" }), _jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]" })] }));
+}
+export function MessageLoading({ className }) {
+    return (_jsx("div", { className: cn('flex justify-start', className), role: "status", "aria-label": "AI\u5FDC\u7B54\u3092\u5F85\u6A5F\u4E2D", children: _jsx("div", { className: "max-w-xl", children: _jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx("div", { className: "absolute h-4 w-4 animate-ping rounded-full bg-primary/20" }), _jsx("div", { className: "relative h-2 w-2 animate-pulse rounded-full bg-primary" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "\u8003\u3048\u4E2D" }), _jsx(BouncingDots, {})] })] }), _jsxs("div", { className: "mt-2 space-y-1.5", "aria-hidden": "true", children: [_jsx("div", { className: "h-2.5 w-full animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%]" }), _jsx("div", { className: "h-2.5 w-3/4 animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%] [animation-delay:100ms]" }), _jsx("div", { className: "h-2.5 w-1/2 animate-shimmer rounded bg-gradient-to-r from-muted via-muted-foreground/10 to-muted bg-[length:200%_100%] [animation-delay:200ms]" })] })] }) }) }));
+}
+/**
+ * Compact loading indicator for inline use (e.g., inside MessageItem during streaming)
+ */
+export function ThinkingDots({ className }) {
+    return (_jsxs("div", { className: cn('flex items-center gap-2', className), role: "status", "aria-label": "\u8003\u3048\u4E2D", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-primary" }), _jsx(BouncingDots, {})] }));
+}

package/dist/components/agent/message/tool-call-card.d.ts

@@ -0,0 +1,9 @@
+import type { ToolCallState } from '../provider/types';
+export interface ToolCallCardProps {
+    toolCallState: ToolCallState;
+    toolNameLabels?: Record<string, string>;
+    statusLabels?: Record<string, string>;
+    parametersLabel?: string;
+    resultLabel?: string;
+}
+export declare function ToolCallCard({ toolCallState, toolNameLabels, statusLabels, parametersLabel, resultLabel, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/agent/message/tool-call-card.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, XCircle } from '@phosphor-icons/react/dist/ssr';
+import { cn } from '../../../lib/utils';
+const defaultStatusLabels = {
+    pending: '待機中',
+    executing: '実行中',
+    completed: '完了',
+    error: 'エラー',
+};
+const statusColors = {
+    pending: 'bg-muted text-muted-foreground',
+    executing: 'bg-primary/10 text-primary',
+    completed: 'bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400',
+    error: 'bg-destructive/10 text-destructive',
+};
+export function ToolCallCard({ toolCallState, toolNameLabels = {}, statusLabels, parametersLabel = 'パラメータ', resultLabel = '結果を表示', }) {
+    const { toolCall, status, result, error } = toolCallState;
+    const toolLabel = toolNameLabels[toolCall.toolName] || toolCall.toolName;
+    const mergedStatusLabels = statusLabels
+        ? { ...defaultStatusLabels, ...statusLabels }
+        : defaultStatusLabels;
+    const statusLabel = mergedStatusLabels[status];
+    return (_jsxs("div", { className: "rounded-md border border-border bg-card p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground", children: toolLabel }), _jsx("span", { className: cn('rounded-full px-1.5 py-0.5 text-[10px]', statusColors[status]), children: statusLabel })] }), status === 'executing' && (_jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" })), status === 'completed' && (_jsx(CheckCircle, { className: "size-4 text-green-600", weight: "fill" })), status === 'error' && (_jsx(XCircle, { className: "size-4 text-destructive", weight: "fill" }))] }), _jsxs("details", { className: "mt-2", children: [_jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: parametersLabel }), _jsx("pre", { className: "mt-1 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-green-600 dark:text-green-400", children: resultLabel }), _jsx("pre", { className: "mt-1 max-h-40 overflow-auto rounded bg-green-50 p-2 text-xs text-muted-foreground dark:bg-green-950", 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 }))] }));
+}

package/dist/components/agent/provider/agent-context.d.ts

@@ -0,0 +1,3 @@
+import type { AgentContextValue } from './types';
+export declare const AgentContext: import("react").Context<AgentContextValue | null>;
+export declare function useAgentContext(): AgentContextValue;

package/dist/components/agent/provider/agent-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const AgentContext = createContext(null);
+export function useAgentContext() {
+    const context = useContext(AgentContext);
+    if (!context) {
+        throw new Error('useAgentContext must be used within an AgentProvider');
+    }
+    return context;
+}

package/dist/components/agent/provider/agent-provider.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { AgentProviderConfig } from './types';
+export interface AgentProviderProps extends AgentProviderConfig {
+    children: ReactNode;
+}
+/**
+ * エージェントチャット機能を提供する内部Provider
+ * 公開APIは AgentScreen / AgentPopupWidget を使用する。
+ */
+export declare function AgentProvider({ children, endpoint, agentId, apiBaseUrl, executeClientTool, onError, authToken, getAuthToken, }: AgentProviderProps): import("react/jsx-runtime").JSX.Element;