@haro/pochidesk-react 0.1.0

package/dist/ChatBridge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ChatBridgeProps } from './types';
+export declare const ChatBridge: React.FC<ChatBridgeProps>;

package/dist/ChatBridge.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { useChatSession } from './hooks/useChatSession';
+import { useStreaming } from './hooks/useStreaming';
+import { useChatMessages } from './hooks/useChatMessages';
+import { ChatPanel } from './components/ChatPanel';
+const DEFAULT_THEME = {
+    primaryColor: '#6366f1',
+    textColor: '#1f2937',
+    backgroundColor: '#ffffff',
+    userBubbleColor: '#6366f1',
+    assistantBubbleColor: '#f3f4f6',
+    fontFamily: '"Noto Sans JP", "Helvetica Neue", Arial, sans-serif',
+    fontSize: 14,
+    borderRadius: 12,
+    panelWidth: 400,
+    panelHeight: 600,
+};
+export const ChatBridge = ({ botId, token, apiUrl = '', position = 'bottom-right', theme: themeOverride, onToolCall, onSessionCreate, onError, }) => {
+    const [isOpen, setIsOpen] = useState(position === 'inline');
+    const theme = useMemo(() => ({ ...DEFAULT_THEME, ...themeOverride }), [themeOverride]);
+    const sessionHook = useChatSession(botId, token, apiUrl);
+    const streamingHook = useStreaming(botId, token, apiUrl, sessionHook.session?.id ?? null, onToolCall);
+    const messagesHook = useChatMessages(botId, token, apiUrl, sessionHook.session?.id ?? null);
+    // Auto-create session on mount if none exists
+    useEffect(() => {
+        if (!sessionHook.session && !sessionHook.isLoading) {
+            sessionHook.createSession();
+        }
+    }, [sessionHook.session, sessionHook.isLoading]);
+    // Notify parent when session is created
+    useEffect(() => {
+        if (sessionHook.session && onSessionCreate) {
+            onSessionCreate(sessionHook.session.id);
+        }
+    }, [sessionHook.session?.id]);
+    // Forward errors
+    useEffect(() => {
+        if (sessionHook.error && onError) {
+            onError(sessionHook.error);
+        }
+    }, [sessionHook.error]);
+    // Merge history messages with streaming messages
+    const allMessages = useMemo(() => {
+        if (streamingHook.messages.length > 0) {
+            return streamingHook.messages;
+        }
+        return messagesHook.messages;
+    }, [messagesHook.messages, streamingHook.messages]);
+    // Handle Escape key
+    useEffect(() => {
+        if (position === 'inline')
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, position]);
+    // Inline mode: render panel directly
+    if (position === 'inline') {
+        return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(ChatPanel, { messages: allMessages, isStreaming: streamingHook.isStreaming, onSend: streamingHook.sendMessage, theme: theme, pendingToolCall: streamingHook.pendingToolCall, onConfirmToolCall: streamingHook.confirmToolCall }) }));
+    }
+    // Floating mode
+    const isRight = position === 'bottom-right';
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { style: {
+                    position: 'fixed',
+                    bottom: '80px',
+                    ...(isRight ? { right: '20px' } : { left: '20px' }),
+                    width: `${theme.panelWidth}px`,
+                    height: `${theme.panelHeight}px`,
+                    zIndex: 9999,
+                }, children: _jsx(ChatPanel, { messages: allMessages, isStreaming: streamingHook.isStreaming, onSend: streamingHook.sendMessage, onClose: () => setIsOpen(false), theme: theme, pendingToolCall: streamingHook.pendingToolCall, onConfirmToolCall: streamingHook.confirmToolCall }) })), _jsx("button", { type: "button", "aria-label": isOpen ? 'チャットを閉じる' : 'チャットを開く', onClick: () => setIsOpen((prev) => !prev), style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    ...(isRight ? { right: '20px' } : { left: '20px' }),
+                    width: '56px',
+                    height: '56px',
+                    borderRadius: '50%',
+                    border: 'none',
+                    backgroundColor: theme.primaryColor,
+                    color: '#ffffff',
+                    cursor: 'pointer',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '24px',
+                    zIndex: 9999,
+                    transition: 'transform 0.2s ease',
+                }, children: isOpen ? '\u2715' : '\u{1F4AC}' })] }));
+};

package/dist/PochiDesk.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PochiDeskProps } from './types';
+export declare const PochiDesk: React.FC<PochiDeskProps>;

package/dist/PochiDesk.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { useChatSession } from './hooks/useChatSession';
+import { useStreaming } from './hooks/useStreaming';
+import { useChatMessages } from './hooks/useChatMessages';
+import { resolvePreset } from './presets';
+import { CLOSE_SVG } from './assets/icons';
+import { ChatPanel } from './components/ChatPanel';
+export const PochiDesk = ({ botId, token, apiUrl = '', position = 'bottom-right', preset, theme: themeOverride, onToolCall, onSessionCreate, onError, }) => {
+    const [isOpen, setIsOpen] = useState(position === 'inline');
+    const { theme, preset: presetConfig } = useMemo(() => resolvePreset(preset, themeOverride), [preset, themeOverride]);
+    const sessionHook = useChatSession(botId, token, apiUrl);
+    const streamingHook = useStreaming(botId, token, apiUrl, sessionHook.session?.id ?? null, onToolCall);
+    const messagesHook = useChatMessages(botId, token, apiUrl, sessionHook.session?.id ?? null);
+    // Auto-create session on mount if none exists
+    useEffect(() => {
+        if (!sessionHook.session && !sessionHook.isLoading) {
+            sessionHook.createSession();
+        }
+    }, [sessionHook.session, sessionHook.isLoading]);
+    // Notify parent when session is created
+    useEffect(() => {
+        if (sessionHook.session && onSessionCreate) {
+            onSessionCreate(sessionHook.session.id);
+        }
+    }, [sessionHook.session?.id]);
+    // Forward errors
+    useEffect(() => {
+        if (sessionHook.error && onError) {
+            onError(sessionHook.error);
+        }
+    }, [sessionHook.error]);
+    // Merge history messages with streaming messages
+    const allMessages = useMemo(() => {
+        if (streamingHook.messages.length > 0) {
+            return streamingHook.messages;
+        }
+        return messagesHook.messages;
+    }, [messagesHook.messages, streamingHook.messages]);
+    // Handle Escape key
+    useEffect(() => {
+        if (position === 'inline')
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, position]);
+    // Inline mode: render panel directly
+    if (position === 'inline') {
+        return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(ChatPanel, { messages: allMessages, isStreaming: streamingHook.isStreaming, onSend: streamingHook.sendMessage, theme: theme, presetConfig: presetConfig, pendingToolCall: streamingHook.pendingToolCall, onConfirmToolCall: streamingHook.confirmToolCall }) }));
+    }
+    // Floating mode
+    const isRight = position === 'bottom-right';
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { style: {
+                    position: 'fixed',
+                    bottom: '80px',
+                    ...(isRight ? { right: '20px' } : { left: '20px' }),
+                    width: `${theme.panelWidth}px`,
+                    height: `${theme.panelHeight}px`,
+                    zIndex: 9999,
+                }, children: _jsx(ChatPanel, { messages: allMessages, isStreaming: streamingHook.isStreaming, onSend: streamingHook.sendMessage, onClose: () => setIsOpen(false), theme: theme, presetConfig: presetConfig, pendingToolCall: streamingHook.pendingToolCall, onConfirmToolCall: streamingHook.confirmToolCall }) })), _jsx("button", { type: "button", "aria-label": isOpen ? 'チャットを閉じる' : 'チャットを開く', onClick: () => setIsOpen((prev) => !prev), style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    ...(isRight ? { right: '20px' } : { left: '20px' }),
+                    width: '56px',
+                    height: '56px',
+                    borderRadius: '50%',
+                    border: 'none',
+                    backgroundColor: theme.primaryColor,
+                    color: '#ffffff',
+                    cursor: 'pointer',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    zIndex: 9999,
+                    transition: 'transform 0.2s ease',
+                }, children: _jsx("span", { style: { width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, dangerouslySetInnerHTML: { __html: isOpen ? CLOSE_SVG : presetConfig.fabIconSvg } }) })] }));
+};

package/dist/assets/icons.d.ts

@@ -0,0 +1,6 @@
+/** Pochi (dog) face icon — friendly mascot for FAB, header, and avatar */
+export declare const POCHI_DOG_SVG = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\">\n  <ellipse cx=\"12\" cy=\"13.5\" rx=\"7\" ry=\"6.5\" opacity=\"0.15\"/>\n  <path d=\"M4.5 3C3.5 3 2.5 4 2.5 5.5C2.5 7 3.2 8.5 4.5 10C5.5 8 7.5 6.5 10 6C8 5 6 3.5 4.5 3Z\"/>\n  <path d=\"M19.5 3C20.5 3 21.5 4 21.5 5.5C21.5 7 20.8 8.5 19.5 10C18.5 8 16.5 6.5 14 6C16 5 18 3.5 19.5 3Z\"/>\n  <ellipse cx=\"12\" cy=\"14\" rx=\"6.5\" ry=\"6\"/>\n  <ellipse cx=\"9.5\" cy=\"12.5\" rx=\"1\" ry=\"1.1\" fill=\"#fff\"/>\n  <ellipse cx=\"14.5\" cy=\"12.5\" rx=\"1\" ry=\"1.1\" fill=\"#fff\"/>\n  <ellipse cx=\"12\" cy=\"15\" rx=\"1.5\" ry=\"1\" opacity=\"0.3\"/>\n  <circle cx=\"12\" cy=\"14.8\" r=\"0.6\" opacity=\"0.5\"/>\n  <path d=\"M10.5 16.5Q12 17.5 13.5 16.5\" stroke=\"#fff\" stroke-width=\"0.5\" fill=\"none\" stroke-linecap=\"round\"/>\n</svg>";
+/** Chat bubble icon — used for business preset FAB */
+export declare const CHAT_BUBBLE_SVG = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\">\n  <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n</svg>";
+/** Close (X) icon */
+export declare const CLOSE_SVG = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\">\n  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n</svg>";

package/dist/assets/icons.js

@@ -0,0 +1,20 @@
+/** Pochi (dog) face icon — friendly mascot for FAB, header, and avatar */
+export const POCHI_DOG_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <ellipse cx="12" cy="13.5" rx="7" ry="6.5" opacity="0.15"/>
+  <path d="M4.5 3C3.5 3 2.5 4 2.5 5.5C2.5 7 3.2 8.5 4.5 10C5.5 8 7.5 6.5 10 6C8 5 6 3.5 4.5 3Z"/>
+  <path d="M19.5 3C20.5 3 21.5 4 21.5 5.5C21.5 7 20.8 8.5 19.5 10C18.5 8 16.5 6.5 14 6C16 5 18 3.5 19.5 3Z"/>
+  <ellipse cx="12" cy="14" rx="6.5" ry="6"/>
+  <ellipse cx="9.5" cy="12.5" rx="1" ry="1.1" fill="#fff"/>
+  <ellipse cx="14.5" cy="12.5" rx="1" ry="1.1" fill="#fff"/>
+  <ellipse cx="12" cy="15" rx="1.5" ry="1" opacity="0.3"/>
+  <circle cx="12" cy="14.8" r="0.6" opacity="0.5"/>
+  <path d="M10.5 16.5Q12 17.5 13.5 16.5" stroke="#fff" stroke-width="0.5" fill="none" stroke-linecap="round"/>
+</svg>`;
+/** Chat bubble icon — used for business preset FAB */
+export const CHAT_BUBBLE_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/>
+</svg>`;
+/** Close (X) icon */
+export const CLOSE_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+</svg>`;

package/dist/components/ChatPanel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChatMessage, PochiDeskTheme, ToolUseEvent } from '../types';
+import type { PresetConfig } from '../presets';
+interface ChatPanelProps {
+    messages: ChatMessage[];
+    isStreaming: boolean;
+    onSend: (message: string) => void;
+    onClose?: () => void;
+    theme: PochiDeskTheme;
+    presetConfig: PresetConfig;
+    pendingToolCall: ToolUseEvent | null;
+    onConfirmToolCall: (toolCallId: string, approved: boolean) => void;
+}
+export declare const ChatPanel: React.FC<ChatPanelProps>;
+export {};

package/dist/components/ChatPanel.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CLOSE_SVG } from '../assets/icons';
+import { MessageList } from './MessageList';
+import { MessageInput } from './MessageInput';
+import { ToolConfirmDialog } from './ToolConfirmDialog';
+export const ChatPanel = ({ messages, isStreaming, onSend, onClose, theme, presetConfig, pendingToolCall, onConfirmToolCall, }) => {
+    return (_jsxs("div", { role: "complementary", "aria-label": "\u30C1\u30E3\u30C3\u30C8\u30B5\u30DD\u30FC\u30C8", style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            backgroundColor: theme.backgroundColor,
+            borderRadius: `${theme.borderRadius}px`,
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.12)',
+            overflow: 'hidden',
+            position: 'relative',
+            fontFamily: theme.fontFamily,
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '14px 16px',
+                    backgroundColor: theme.primaryColor,
+                    color: '#ffffff',
+                    fontWeight: 600,
+                    fontSize: `${theme.fontSize + 2}px`,
+                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [presetConfig.showHeaderIcon && (_jsx("span", { style: { width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, dangerouslySetInnerHTML: { __html: presetConfig.headerIconSvg } })), _jsx("span", { children: presetConfig.headerTitle })] }), onClose && (_jsx("button", { type: "button", "aria-label": "\u30C1\u30E3\u30C3\u30C8\u3092\u9589\u3058\u308B", onClick: onClose, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#ffffff',
+                            cursor: 'pointer',
+                            padding: '4px',
+                            minWidth: '44px',
+                            minHeight: '44px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: _jsx("span", { style: { width: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, dangerouslySetInnerHTML: { __html: CLOSE_SVG } }) }))] }), _jsx(MessageList, { messages: messages, theme: theme, presetConfig: presetConfig }), _jsx(MessageInput, { onSend: onSend, disabled: isStreaming, theme: theme }), pendingToolCall && (_jsx(ToolConfirmDialog, { toolCall: pendingToolCall, onConfirm: onConfirmToolCall, theme: theme })), _jsx("style", { children: `
+        @keyframes pochidesk-blink {
+          50% { opacity: 0; }
+        }
+      ` })] }));
+};

package/dist/components/MessageInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PochiDeskTheme } from '../types';
+interface MessageInputProps {
+    onSend: (message: string) => void;
+    disabled: boolean;
+    theme: PochiDeskTheme;
+}
+export declare const MessageInput: React.FC<MessageInputProps>;
+export {};

package/dist/components/MessageInput.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+export const MessageInput = ({ onSend, disabled, theme }) => {
+    const [value, setValue] = useState('');
+    const textareaRef = useRef(null);
+    const handleSubmit = () => {
+        const trimmed = value.trim();
+        if (!trimmed || disabled)
+            return;
+        onSend(trimmed);
+        setValue('');
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    const handleInput = (e) => {
+        setValue(e.target.value);
+        // Auto-resize
+        const textarea = e.target;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
+    };
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            gap: '8px',
+            padding: '12px 16px',
+            borderTop: '1px solid #e5e7eb',
+            backgroundColor: theme.backgroundColor,
+        }, children: [_jsx("textarea", { ref: textareaRef, role: "textbox", "aria-label": "\u30E1\u30C3\u30BB\u30FC\u30B8\u3092\u5165\u529B", value: value, onChange: handleInput, onKeyDown: handleKeyDown, disabled: disabled, placeholder: "\u30E1\u30C3\u30BB\u30FC\u30B8\u3092\u5165\u529B...", rows: 1, style: {
+                    flex: 1,
+                    resize: 'none',
+                    border: '1px solid #d1d5db',
+                    borderRadius: `${theme.borderRadius}px`,
+                    padding: '10px 12px',
+                    fontFamily: theme.fontFamily,
+                    fontSize: `${theme.fontSize}px`,
+                    lineHeight: 1.5,
+                    outline: 'none',
+                    backgroundColor: '#ffffff',
+                    color: theme.textColor,
+                    maxHeight: '120px',
+                } }), _jsx("button", { type: "button", "aria-label": "\u9001\u4FE1", onClick: handleSubmit, disabled: disabled || !value.trim(), style: {
+                    width: '44px',
+                    height: '44px',
+                    minWidth: '44px',
+                    borderRadius: '50%',
+                    border: 'none',
+                    backgroundColor: disabled || !value.trim() ? '#d1d5db' : theme.primaryColor,
+                    color: '#ffffff',
+                    cursor: disabled || !value.trim() ? 'default' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '18px',
+                    lineHeight: 1,
+                }, children: "\u25B6" })] }));
+};

package/dist/components/MessageList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChatMessage, PochiDeskTheme } from '../types';
+import type { PresetConfig } from '../presets';
+interface MessageListProps {
+    messages: ChatMessage[];
+    theme: PochiDeskTheme;
+    presetConfig: PresetConfig;
+}
+export declare const MessageList: React.FC<MessageListProps>;
+export {};

package/dist/components/MessageList.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+const avatarStyle = {
+    width: '28px',
+    height: '28px',
+    minWidth: '28px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    marginTop: '2px',
+    color: '#ffffff',
+};
+const avatarIconStyle = {
+    width: '18px',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+export const MessageList = ({ messages, theme, presetConfig }) => {
+    const bottomRef = useRef(null);
+    const showAvatar = presetConfig.showAssistantAvatar;
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+    const renderBubble = (msg) => (_jsxs("div", { style: {
+            maxWidth: showAvatar && msg.role === 'assistant' ? '100%' : '80%',
+            padding: '10px 14px',
+            borderRadius: `${theme.borderRadius}px`,
+            backgroundColor: msg.role === 'user' ? theme.userBubbleColor : theme.assistantBubbleColor,
+            color: msg.role === 'user' ? '#ffffff' : theme.textColor,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            lineHeight: 1.5,
+        }, children: [msg.content, msg.isStreaming && (_jsx("span", { style: {
+                    display: 'inline-block',
+                    width: '6px',
+                    height: '14px',
+                    backgroundColor: 'currentColor',
+                    marginLeft: '2px',
+                    animation: 'pochidesk-blink 1s step-end infinite',
+                    verticalAlign: 'text-bottom',
+                } }))] }));
+    return (_jsxs("div", { role: "log", "aria-live": "polite", style: {
+            flex: 1,
+            overflowY: 'auto',
+            padding: '16px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            fontFamily: theme.fontFamily,
+            fontSize: `${theme.fontSize}px`,
+            color: theme.textColor,
+        }, children: [messages.length === 0 && (_jsx("div", { style: { textAlign: 'center', color: '#9ca3af', marginTop: '32px' }, children: "\u30E1\u30C3\u30BB\u30FC\u30B8\u3092\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044" })), messages.map((msg) => (_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start',
+                    ...(msg.role === 'assistant' && showAvatar ? { maxWidth: '85%' } : {}),
+                }, children: [msg.role === 'assistant' && showAvatar && (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: '8px' }, children: [_jsx("span", { style: { ...avatarStyle, backgroundColor: theme.primaryColor }, children: _jsx("span", { style: avatarIconStyle, dangerouslySetInnerHTML: { __html: presetConfig.avatarIconSvg } }) }), renderBubble(msg)] })), msg.role === 'assistant' && !showAvatar && renderBubble(msg), msg.role === 'user' && renderBubble(msg)] }, msg.id))), _jsx("div", { ref: bottomRef })] }));
+};

package/dist/components/ToolConfirmDialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ToolUseEvent, PochiDeskTheme } from '../types';
+interface ToolConfirmDialogProps {
+    toolCall: ToolUseEvent;
+    onConfirm: (toolCallId: string, approved: boolean) => void;
+    theme: PochiDeskTheme;
+}
+export declare const ToolConfirmDialog: React.FC<ToolConfirmDialogProps>;
+export {};

package/dist/components/ToolConfirmDialog.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ToolConfirmDialog = ({ toolCall, onConfirm, theme, }) => {
+    return (_jsx("div", { role: "alertdialog", "aria-describedby": "pochidesk-tool-confirm-desc", style: {
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            zIndex: 10,
+        }, children: _jsxs("div", { style: {
+                backgroundColor: theme.backgroundColor,
+                borderRadius: `${theme.borderRadius}px`,
+                padding: '24px',
+                maxWidth: '320px',
+                width: '90%',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                fontFamily: theme.fontFamily,
+                fontSize: `${theme.fontSize}px`,
+                color: theme.textColor,
+            }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '12px' }, children: "\u30C4\u30FC\u30EB\u5B9F\u884C\u306E\u78BA\u8A8D" }), _jsxs("div", { id: "pochidesk-tool-confirm-desc", style: { marginBottom: '20px', lineHeight: 1.5 }, children: [_jsx("strong", { children: toolCall.name }), " \u3092\u5B9F\u884C\u3057\u307E\u3059\u304B\uFF1F"] }), _jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", onClick: () => onConfirm(toolCall.tool_use_id, false), style: {
+                                padding: '8px 16px',
+                                border: '1px solid #d1d5db',
+                                borderRadius: `${theme.borderRadius}px`,
+                                backgroundColor: '#ffffff',
+                                color: theme.textColor,
+                                cursor: 'pointer',
+                                fontFamily: theme.fontFamily,
+                                fontSize: `${theme.fontSize}px`,
+                                minWidth: '44px',
+                                minHeight: '44px',
+                            }, children: "\u62D2\u5426" }), _jsx("button", { type: "button", onClick: () => onConfirm(toolCall.tool_use_id, true), style: {
+                                padding: '8px 16px',
+                                border: 'none',
+                                borderRadius: `${theme.borderRadius}px`,
+                                backgroundColor: theme.primaryColor,
+                                color: '#ffffff',
+                                cursor: 'pointer',
+                                fontFamily: theme.fontFamily,
+                                fontSize: `${theme.fontSize}px`,
+                                minWidth: '44px',
+                                minHeight: '44px',
+                            }, children: "\u627F\u8A8D" })] })] }) }));
+};

package/dist/hooks/useChatMessages.d.ts

@@ -0,0 +1,9 @@
+import type { ChatMessage, PochiDeskError } from '../types';
+interface UseChatMessagesReturn {
+    messages: ChatMessage[];
+    isLoading: boolean;
+    error: PochiDeskError | null;
+    refetch: () => Promise<void>;
+}
+export declare function useChatMessages(botId: string, token: string, apiUrl: string | undefined, sessionId: string | null): UseChatMessagesReturn;
+export {};

package/dist/hooks/useChatMessages.js

@@ -0,0 +1,50 @@
+import { useState, useCallback, useEffect } from 'react';
+export function useChatMessages(botId, token, apiUrl = '', sessionId) {
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const baseUrl = `${apiUrl}/api/v1/chat/support/${botId}`;
+    const loadMessages = useCallback(async () => {
+        if (!sessionId)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/sessions/${sessionId}/messages`, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                setError({
+                    code: body.error?.code ?? 'REQUEST_FAILED',
+                    message: body.error?.message ?? `HTTP ${res.status}`,
+                });
+                return;
+            }
+            const body = (await res.json());
+            setMessages(body.data);
+        }
+        catch (err) {
+            setError({
+                code: 'NETWORK_ERROR',
+                message: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [baseUrl, sessionId, token]);
+    // Auto-load when sessionId changes
+    useEffect(() => {
+        if (sessionId) {
+            loadMessages();
+        }
+        else {
+            setMessages([]);
+        }
+    }, [sessionId, loadMessages]);
+    return { messages, isLoading, error, refetch: loadMessages };
+}

package/dist/hooks/useChatSession.d.ts

@@ -0,0 +1,2 @@
+import type { UseChatSessionReturn } from '../types';
+export declare function useChatSession(botId: string, token: string, apiUrl?: string): UseChatSessionReturn;

package/dist/hooks/useChatSession.js

@@ -0,0 +1,138 @@
+import { useState, useCallback, useEffect } from 'react';
+const STORAGE_KEY_PREFIX = 'pochidesk_session_';
+function getStoredSession(botId) {
+    try {
+        const raw = localStorage.getItem(`${STORAGE_KEY_PREFIX}${botId}`);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+function storeSession(botId, stored) {
+    try {
+        localStorage.setItem(`${STORAGE_KEY_PREFIX}${botId}`, JSON.stringify(stored));
+    }
+    catch {
+        // localStorage unavailable
+    }
+}
+function removeStoredSession(botId) {
+    try {
+        localStorage.removeItem(`${STORAGE_KEY_PREFIX}${botId}`);
+    }
+    catch {
+        // localStorage unavailable
+    }
+}
+export function useChatSession(botId, token, apiUrl = '') {
+    const [session, setSession] = useState(null);
+    const [sessions, setSessions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const baseUrl = `${apiUrl}/api/v1/chat/support/${botId}`;
+    const authHeaders = {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+    };
+    // Restore session from localStorage on mount
+    useEffect(() => {
+        const stored = getStoredSession(botId);
+        if (stored) {
+            setSession({
+                id: stored.sessionId,
+                botId,
+                createdAt: stored.createdAt,
+            });
+        }
+    }, [botId]);
+    const createSession = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/sessions`, {
+                method: 'POST',
+                headers: authHeaders,
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                const err = {
+                    code: body.error?.code ?? 'REQUEST_FAILED',
+                    message: body.error?.message ?? `HTTP ${res.status}`,
+                };
+                setError(err);
+                return;
+            }
+            const body = (await res.json());
+            const newSession = body.data;
+            setSession(newSession);
+            storeSession(botId, {
+                sessionId: newSession.id,
+                createdAt: newSession.createdAt,
+                lastMessageAt: newSession.createdAt,
+            });
+        }
+        catch (err) {
+            setError({
+                code: 'NETWORK_ERROR',
+                message: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [baseUrl, botId, token]);
+    const loadSessions = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/sessions`, {
+                method: 'GET',
+                headers: authHeaders,
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                const err = {
+                    code: body.error?.code ?? 'REQUEST_FAILED',
+                    message: body.error?.message ?? `HTTP ${res.status}`,
+                };
+                setError(err);
+                return;
+            }
+            const body = (await res.json());
+            setSessions(body.data);
+        }
+        catch (err) {
+            setError({
+                code: 'NETWORK_ERROR',
+                message: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [baseUrl, token]);
+    const selectSession = useCallback((sessionId) => {
+        const found = sessions.find((s) => s.id === sessionId);
+        if (found) {
+            setSession(found);
+            storeSession(botId, {
+                sessionId: found.id,
+                createdAt: found.createdAt,
+                lastMessageAt: new Date().toISOString(),
+            });
+        }
+        else {
+            // Allow selecting a session not yet in the list
+            setSession({ id: sessionId, botId, createdAt: new Date().toISOString() });
+            storeSession(botId, {
+                sessionId,
+                createdAt: new Date().toISOString(),
+                lastMessageAt: new Date().toISOString(),
+            });
+        }
+    }, [sessions, botId]);
+    return { session, sessions, isLoading, error, createSession, loadSessions, selectSession };
+}

package/dist/hooks/useStreaming.d.ts

@@ -0,0 +1,2 @@
+import type { UseStreamingReturn } from '../types';
+export declare function useStreaming(botId: string, token: string, apiUrl: string | undefined, sessionId: string | null, onToolCall?: (toolName: string, params: Record<string, unknown>) => void): UseStreamingReturn;

package/dist/hooks/useStreaming.js

@@ -0,0 +1,111 @@
+import { useState, useCallback, useRef } from 'react';
+import { connectSSE } from '../lib/sse-client';
+export function useStreaming(botId, token, apiUrl = '', sessionId, onToolCall) {
+    const [messages, setMessages] = useState([]);
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [pendingToolCall, setPendingToolCall] = useState(null);
+    const abortRef = useRef(null);
+    const streamingContentRef = useRef('');
+    const baseUrl = `${apiUrl}/api/v1/chat/support/${botId}`;
+    const sendMessage = useCallback(async (message) => {
+        if (!sessionId || isStreaming)
+            return;
+        // Add user message
+        const userMessage = {
+            id: `user-${Date.now()}`,
+            role: 'user',
+            content: message,
+            createdAt: new Date().toISOString(),
+        };
+        // Add placeholder assistant message for streaming
+        const assistantId = `assistant-${Date.now()}`;
+        const assistantMessage = {
+            id: assistantId,
+            role: 'assistant',
+            content: '',
+            createdAt: new Date().toISOString(),
+            isStreaming: true,
+        };
+        setMessages((prev) => [...prev, userMessage, assistantMessage]);
+        setIsStreaming(true);
+        streamingContentRef.current = '';
+        // Abort previous connection if any
+        abortRef.current?.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        const url = `${baseUrl}/sessions/${sessionId}/messages`;
+        const headers = {
+            Authorization: `Bearer ${token}`,
+        };
+        await connectSSE(url, { content: message }, headers, (event) => {
+            try {
+                const parsed = JSON.parse(event.data);
+                switch (event.event) {
+                    case 'content_delta': {
+                        const delta = parsed;
+                        streamingContentRef.current += delta.delta;
+                        const content = streamingContentRef.current;
+                        setMessages((prev) => prev.map((msg) => msg.id === assistantId ? { ...msg, content } : msg));
+                        break;
+                    }
+                    case 'tool_use': {
+                        const toolEvent = parsed;
+                        if (toolEvent.execution_mode === 'client' && onToolCall) {
+                            onToolCall(toolEvent.name, toolEvent.input);
+                        }
+                        if (toolEvent.requires_confirmation) {
+                            setPendingToolCall(toolEvent);
+                        }
+                        break;
+                    }
+                    case 'message_end': {
+                        const endEvent = parsed;
+                        setMessages((prev) => prev.map((msg) => msg.id === assistantId
+                            ? { ...msg, id: endEvent.message_id, isStreaming: false }
+                            : msg));
+                        setIsStreaming(false);
+                        break;
+                    }
+                    case 'error': {
+                        const errorEvent = parsed;
+                        setMessages((prev) => prev.map((msg) => msg.id === assistantId
+                            ? { ...msg, content: `Error: ${errorEvent.message}`, isStreaming: false }
+                            : msg));
+                        setIsStreaming(false);
+                        break;
+                    }
+                    // tool_result and ping are handled silently
+                }
+            }
+            catch {
+                // Ignore malformed events
+            }
+        }, (_error) => {
+            setIsStreaming(false);
+            setMessages((prev) => prev.map((msg) => msg.id === assistantId
+                ? { ...msg, isStreaming: false }
+                : msg));
+        }, controller.signal);
+    }, [sessionId, isStreaming, baseUrl, token, onToolCall]);
+    const confirmToolCall = useCallback(async (toolCallId, approved) => {
+        if (!sessionId)
+            return;
+        setPendingToolCall(null);
+        const url = `${baseUrl}/sessions/${sessionId}/tool-confirm`;
+        const headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        };
+        try {
+            await fetch(url, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ tool_use_id: toolCallId, approved }),
+            });
+        }
+        catch {
+            // Error handled silently; the SSE stream will report issues
+        }
+    }, [sessionId, baseUrl, token]);
+    return { messages, isStreaming, sendMessage, pendingToolCall, confirmToolCall };
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { PochiDesk } from './PochiDesk';
+export { useChatSession } from './hooks/useChatSession';
+export { useStreaming } from './hooks/useStreaming';
+export { useChatMessages } from './hooks/useChatMessages';
+export type { PresetName } from './presets';
+export type { PochiDeskProps, PochiDeskTheme, PochiDeskError, ChatMessage, ChatSession, SSEEvent, ContentDeltaEvent, ToolUseEvent, ToolResultEvent, MessageEndEvent, ErrorEvent, StoredSession, UseChatSessionReturn, UseStreamingReturn, } from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { PochiDesk } from './PochiDesk';
+export { useChatSession } from './hooks/useChatSession';
+export { useStreaming } from './hooks/useStreaming';
+export { useChatMessages } from './hooks/useChatMessages';

package/dist/lib/sse-client.d.ts

@@ -0,0 +1,2 @@
+import type { SSEEvent } from '../types';
+export declare function connectSSE(url: string, body: Record<string, unknown>, headers: Record<string, string>, onEvent: (event: SSEEvent) => void, onError: (error: Error) => void, signal?: AbortSignal): Promise<void>;

package/dist/lib/sse-client.js

@@ -0,0 +1,55 @@
+export async function connectSSE(url, body, headers, onEvent, onError, signal) {
+    let response;
+    try {
+        response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...headers,
+            },
+            body: JSON.stringify(body),
+            signal,
+        });
+    }
+    catch (err) {
+        onError(err instanceof Error ? err : new Error(String(err)));
+        return;
+    }
+    if (!response.ok || !response.body) {
+        onError(new Error(`SSE connection failed: ${response.status}`));
+        return;
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    try {
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+                break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() ?? '';
+            let currentEvent = '';
+            let currentData = '';
+            for (const line of lines) {
+                if (line.startsWith('event: ')) {
+                    currentEvent = line.slice(7);
+                }
+                else if (line.startsWith('data: ')) {
+                    currentData = line.slice(6);
+                }
+                else if (line === '' && currentEvent) {
+                    onEvent({ event: currentEvent, data: currentData });
+                    currentEvent = '';
+                    currentData = '';
+                }
+            }
+        }
+    }
+    catch (err) {
+        if (signal?.aborted)
+            return;
+        onError(err instanceof Error ? err : new Error(String(err)));
+    }
+}

package/dist/presets/index.d.ts

@@ -0,0 +1,22 @@
+import type { PochiDeskTheme } from '../types';
+export type PresetName = 'pochi' | 'business';
+export interface PresetConfig {
+    /** Base theme values */
+    theme: PochiDeskTheme;
+    /** Header title text */
+    headerTitle: string;
+    /** Show avatar icon next to assistant messages */
+    showAssistantAvatar: boolean;
+    /** Show icon in header */
+    showHeaderIcon: boolean;
+    /** SVG string for FAB button (open state) */
+    fabIconSvg: string;
+    /** SVG string for assistant avatar */
+    avatarIconSvg: string;
+    /** SVG string for header icon */
+    headerIconSvg: string;
+}
+export declare function resolvePreset(presetName?: PresetName, themeOverride?: Partial<PochiDeskTheme>): {
+    theme: PochiDeskTheme;
+    preset: PresetConfig;
+};

package/dist/presets/index.js

@@ -0,0 +1,50 @@
+import { POCHI_DOG_SVG, CHAT_BUBBLE_SVG } from '../assets/icons';
+const POCHI_PRESET = {
+    theme: {
+        primaryColor: '#6366f1',
+        textColor: '#1f2937',
+        backgroundColor: '#ffffff',
+        userBubbleColor: '#6366f1',
+        assistantBubbleColor: '#f3f4f6',
+        fontFamily: '"Noto Sans JP", "Helvetica Neue", Arial, sans-serif',
+        fontSize: 14,
+        borderRadius: 12,
+        panelWidth: 400,
+        panelHeight: 600,
+    },
+    headerTitle: 'ポチに聞いてみよう！',
+    showAssistantAvatar: true,
+    showHeaderIcon: true,
+    fabIconSvg: POCHI_DOG_SVG,
+    avatarIconSvg: POCHI_DOG_SVG,
+    headerIconSvg: POCHI_DOG_SVG,
+};
+const BUSINESS_PRESET = {
+    theme: {
+        primaryColor: '#1e293b',
+        textColor: '#334155',
+        backgroundColor: '#ffffff',
+        userBubbleColor: '#1e293b',
+        assistantBubbleColor: '#f1f5f9',
+        fontFamily: '"Noto Sans JP", "Helvetica Neue", Arial, sans-serif',
+        fontSize: 14,
+        borderRadius: 8,
+        panelWidth: 400,
+        panelHeight: 600,
+    },
+    headerTitle: 'チャットサポート',
+    showAssistantAvatar: false,
+    showHeaderIcon: false,
+    fabIconSvg: CHAT_BUBBLE_SVG,
+    avatarIconSvg: '',
+    headerIconSvg: '',
+};
+const PRESETS = {
+    pochi: POCHI_PRESET,
+    business: BUSINESS_PRESET,
+};
+export function resolvePreset(presetName, themeOverride) {
+    const preset = PRESETS[presetName ?? 'pochi'];
+    const theme = { ...preset.theme, ...themeOverride };
+    return { theme, preset };
+}

package/dist/types.d.ts

@@ -0,0 +1,97 @@
+import type { PresetName } from './presets';
+export interface PochiDeskProps {
+    botId: string;
+    token: string;
+    apiUrl?: string;
+    position?: 'bottom-right' | 'bottom-left' | 'inline';
+    preset?: PresetName;
+    theme?: Partial<PochiDeskTheme>;
+    onToolCall?: (toolName: string, params: Record<string, unknown>) => void;
+    onSessionCreate?: (sessionId: string) => void;
+    onError?: (error: PochiDeskError) => void;
+}
+export interface PochiDeskTheme {
+    primaryColor: string;
+    textColor: string;
+    backgroundColor: string;
+    userBubbleColor: string;
+    assistantBubbleColor: string;
+    fontFamily: string;
+    fontSize: number;
+    borderRadius: number;
+    panelWidth: number;
+    panelHeight: number;
+}
+export interface PochiDeskError {
+    code: string;
+    message: string;
+}
+export interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    createdAt: string;
+    isStreaming?: boolean;
+}
+export interface ChatSession {
+    id: string;
+    botId: string;
+    userId?: string;
+    createdAt: string;
+}
+export interface SSEEvent {
+    event: string;
+    data: string;
+}
+export interface ContentDeltaEvent {
+    type: 'content_delta';
+    delta: string;
+}
+export interface ToolUseEvent {
+    type: 'tool_use';
+    tool_use_id: string;
+    name: string;
+    input: Record<string, unknown>;
+    requires_confirmation: boolean;
+    execution_mode: 'server' | 'client';
+}
+export interface ToolResultEvent {
+    type: 'tool_result';
+    tool_use_id: string;
+    result: unknown;
+    is_error: boolean;
+}
+export interface MessageEndEvent {
+    type: 'message_end';
+    message_id: string;
+    usage: {
+        input_tokens: number;
+        output_tokens: number;
+    };
+}
+export interface ErrorEvent {
+    type: 'error';
+    code: string;
+    message: string;
+}
+export interface StoredSession {
+    sessionId: string;
+    createdAt: string;
+    lastMessageAt: string;
+}
+export interface UseChatSessionReturn {
+    session: ChatSession | null;
+    sessions: ChatSession[];
+    isLoading: boolean;
+    error: PochiDeskError | null;
+    createSession: () => Promise<void>;
+    loadSessions: () => Promise<void>;
+    selectSession: (sessionId: string) => void;
+}
+export interface UseStreamingReturn {
+    messages: ChatMessage[];
+    isStreaming: boolean;
+    sendMessage: (message: string) => Promise<void>;
+    pendingToolCall: ToolUseEvent | null;
+    confirmToolCall: (toolCallId: string, approved: boolean) => Promise<void>;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@haro/pochidesk-react",
+  "version": "0.1.0",
+  "description": "PochiDesk React SDK — AIチャットボットをReact/Next.jsに簡単統合",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.0"
+  },
+  "keywords": [
+    "chatbot",
+    "ai",
+    "claude",
+    "react",
+    "nextjs",
+    "support",
+    "pochidesk",
+    "haro"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Haronoya/pochidesk.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://pochidesk.com"
+}