@messenger-box/tailwind-ui-inbox 10.0.3-alpha.71 → 10.0.3-alpha.72

package/src/components/AIAgent/README.md

@@ -0,0 +1,82 @@
+# AI Agent Integration
+
+This component integrates an AI-powered chat agent using XState state machines to provide intelligent conversation capabilities within the messenger inbox.
+
+## Features
+
+-   **AI-Powered Conversations**: Uses Claude AI through the XState machine
+-   **Multi-Message Responses**: Automatically breaks down complex queries into multiple messages
+-   **Real-Time Data**: Integrates with MCP (Model Context Protocol) for web search and news
+-   **Smart Query Detection**: Automatically detects when queries need multi-message responses or real-time data
+-   **Toggle Mode**: Easy switch between regular messaging and AI agent mode
+
+## Components
+
+### AIAgent
+
+The main AI agent component that handles:
+
+-   Message display and input
+-   AI response generation
+-   Multi-message planning and execution
+-   Real-time data integration
+-   Error handling and retry mechanisms
+
+### aiAgentMachine
+
+XState machine that manages:
+
+-   Message flow and state transitions
+-   AI response generation
+-   Multi-message planning
+-   MCP data fetching
+-   Error handling
+
+## Usage
+
+The AI Agent is integrated into the main inbox interface with a toggle switch. When enabled:
+
+1. **Toggle AI Mode**: Use the toggle switch in the header to enable AI agent mode
+2. **Chat with AI**: Send messages to the AI agent and receive intelligent responses
+3. **Multi-Message**: Complex queries automatically trigger multi-message responses
+4. **Real-Time Data**: Queries needing current information automatically fetch web search and news data
+
+## Configuration
+
+The AI Agent requires:
+
+-   Anthropic API key configured on the server
+-   MCP server running for real-time data
+-   XState and @xstate/react packages
+
+## States
+
+The AI Agent machine has several states:
+
+-   `idle`: Waiting for user input
+-   `analyzing`: Determining response strategy
+-   `planningMultiMessage`: Creating multi-message plan
+-   `multiProcessing`: Generating multi-message responses
+-   `fetchingData`: Retrieving real-time data
+-   `processing`: Generating AI response
+-   `error`: Handling errors
+
+## Events
+
+Supported events:
+
+-   `SEND_MESSAGE`: Send a user message
+-   `FORCE_MULTI_MESSAGE`: Force multi-message response
+-   `INPUT_CHANGE`: Update input field
+-   `RETRY`: Retry failed operations
+-   `CLEAR_ERROR`: Clear error state
+
+## Integration Points
+
+The AI Agent integrates with:
+
+-   Main inbox interface
+-   Message handling system
+-   User authentication
+-   Channel management
+-   File upload system

package/src/components/AIAgent/index.ts

@@ -0,0 +1 @@
+export { AIAgent } from './AIAgent';

package/src/components/InboxMessage/InputComponent.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { config } from '../../config';
+import { UploadImageButton } from './UploadImageButton';
+import { FilesList } from '../inbox';
+
+type MessageInputProps = {
+    channelId?: string;
+    handleSend?: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+};
+
+export const InputComponent = ({ handleSend: handleSendProp, placeholder }: MessageInputProps) => {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const { t } = useTranslation('translations');
+
+    // Auto-focus the textarea when component mounts
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+
+    const showToastMessage = useCallback((message: string) => {
+        setToastMessage(message);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000);
+    }, []);
+
+    const handleSend = useCallback(() => {
+        if (!message.trim() && files.length === 0) return;
+
+        setSending(true);
+        handleSendProp(message, files)
+            .then(() => {
+                setMessage('');
+                setFiles([]);
+                // Auto-focus the textarea after sending a message
+                setTimeout(() => {
+                    if (textareaRef.current) {
+                        textareaRef.current.focus();
+                    }
+                }, 100);
+            })
+            .finally(() => setSending(false));
+    }, [files, handleSendProp, message]);
+
+    const handleKeyDown = useCallback(
+        (e) => {
+            const keyCode = e.which || e.keyCode;
+            if (keyCode == 13 && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        },
+        [handleSend],
+    );
+
+    const inputHeight = useMemo(() => {
+        const lines = message.split('\n').length;
+        return Math.max(120, Math.min(200, 120 + (lines - 1) * 20));
+    }, [message]);
+
+    const onUploadImageChange = useCallback(
+        ({ target }) => {
+            let fileList = [];
+            let index = 0;
+            if (files.length + target.files.length > config.FILES_PER_MESSAGE) {
+                showToastMessage(
+                    t('tailwind_ui_inbox.you_can_not_upload_more_than_files', {
+                        files_per_message: config.FILES_PER_MESSAGE,
+                    }),
+                );
+                return;
+            }
+            while (target.files[index]) {
+                fileList.push(target.files[index]);
+                index += 1;
+            }
+            setFiles((oldFiles) => [...oldFiles, ...fileList]);
+        },
+        [setFiles, files, showToastMessage, t],
+    );
+
+    const canSend = message.trim() || files.length > 0;
+    const hasContent = message.trim().length > 0;
+
+    return (
+        <div className="bg-gray-50 border-t border-gray-200">
+            {/* Toast notification */}
+            {showToast && (
+                <div className="fixed top-4 right-4 z-50 bg-orange-50 border border-orange-200 text-orange-800 px-4 py-3 rounded-lg shadow-lg animate-bounce">
+                    <div className="flex items-center">
+                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fillRule="evenodd"
+                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                                clipRule="evenodd"
+                            />
+                        </svg>
+                        {toastMessage}
+                    </div>
+                </div>
+            )}
+
+            {/* Files list */}
+            {files?.length > 0 && !sending && (
+                <div className="px-4 py-3 border-b border-gray-200">
+                    <FilesList files={files} />
+                </div>
+            )}
+
+            {/* Input container with textarea first, toolbar at bottom */}
+            <div className="px-4 py-3">
+                {/* Input field */}
+                <div className="relative mb-3">
+                    <textarea
+                        ref={textareaRef}
+                        className={`w-full text-base bg-white border-2 rounded-2xl pl-4 pr-4 py-3 resize-none focus:outline-none placeholder-gray-500 transition-all duration-200 ${
+                            isFocused ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'
+                        }`}
+                        style={{
+                            height: `${inputHeight}px`,
+                            minHeight: '120px',
+                            maxHeight: '200px',
+                        }}
+                        placeholder={placeholder || 'Message'}
+                        value={sending ? '' : message}
+                        onKeyDown={handleKeyDown}
+                        onChange={(e) => setMessage(e.target.value)}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => setIsFocused(false)}
+                        disabled={sending}
+                        rows={1}
+                    />
+                </div>
+
+                {/* Toolbar buttons row at bottom */}
+                <div className="flex items-center gap-2">
+                    <UploadImageButton onChange={onUploadImageChange}>
+                        <div className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                            <svg
+                                className="w-4 h-4 text-gray-600"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                            </svg>
+                        </div>
+                    </UploadImageButton>
+
+                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            />
+                        </svg>
+                    </button>
+
+                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                            />
+                        </svg>
+                    </button>
+
+                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                            />
+                        </svg>
+                    </button>
+
+                    <div className="flex-1"></div>
+
+                    <button className="flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors">
+                        <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                            />
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                            />
+                        </svg>
+                    </button>
+
+                    {/* Send button - updated to handle sending messages */}
+                    <button
+                        className={`flex items-center justify-center w-8 h-8 rounded-lg border transition-colors ${
+                            canSend && !sending
+                                ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white'
+                                : 'border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'
+                        }`}
+                        onClick={handleSend}
+                        disabled={!canSend || sending}
+                        type="button"
+                    >
+                        {sending ? (
+                            <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                ></circle>
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
+                            </svg>
+                        ) : (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                />
+                            </svg>
+                        )}
+                    </button>
+                </div>
+            </div>
+
+            {/* Beta text and notification icon */}
+            {/* <div className="px-4 py-2 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                <span className="text-sm text-gray-500">This feature is in beta. Send feedback</span>
+                <button className="p-1 hover:bg-gray-100 rounded transition-colors">
+                    <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 19V20H3V19L5 17V11C5 7.9 7.03 5.17 10 4.29C10 4.19 10 4.1 10 4C10 2.9 10.9 2 12 2C13.1 2 14 2.9 14 4C14 4.1 14 4.19 14 4.29C16.97 5.17 19 7.9 19 11V17L21 19ZM14 21C14 22.1 13.1 23 12 23C10.9 23 10 22.1 10 21" />
+                    </svg>
+                </button>
+            </div> */}
+        </div>
+    );
+};

package/src/components/InboxMessage/MessageInput.tsx

@@ -64,7 +64,7 @@ export const MessageInput = ({ handleSend: handleSendProp, placeholder }: Messag
 
     const inputHeight = useMemo(() => {
         const lines = message.split('\n').length;
-        return Math.max(48, Math.min(120, 48 + (lines - 1) * 20));
+        return Math.max(40, Math.min(120, 40 + (lines - 1) * 20));
     }, [message]);
 
     const onUploadImageChange = useCallback(
@@ -117,73 +117,80 @@ export const MessageInput = ({ handleSend: handleSendProp, placeholder }: Messag
 
             <div className="p-4">
                 <div
-                    className={`relative bg-gray-50 rounded-2xl transition-all duration-200 ease-in-out ${
-                        isFocused ? 'ring-2 ring-blue-500 ring-opacity-50 bg-white shadow-sm' : 'hover:bg-gray-100'
+                    className={`relative bg-white border rounded-lg transition-all duration-200 ease-in-out ${
+                        isFocused
+                            ? 'ring-2 ring-blue-500 ring-opacity-50 border-blue-300 shadow-sm'
+                            : 'border-gray-300 hover:border-gray-400'
                     }`}
                 >
-                    {/* Upload button */}
-                    <div className="absolute left-3 bottom-3 z-10">
-                        <UploadImageButton onChange={onUploadImageChange} />
-                    </div>
-
-                    {/* Textarea */}
-                    <textarea
-                        ref={textareaRef}
-                        className="w-full text-base pl-14 pr-20 py-3 bg-transparent border-none resize-none overflow-hidden placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
-                        style={{
-                            height: `${inputHeight}px`,
-                            minHeight: '48px',
-                            maxHeight: '120px',
-                        }}
-                        placeholder={placeholder || t('tailwind_ui_inbox.reminder_leave_a_review')}
-                        value={sending ? '' : message}
-                        onKeyDown={handleKeyDown}
-                        onChange={(e) => setMessage(e.target.value)}
-                        onFocus={() => setIsFocused(true)}
-                        onBlur={() => setIsFocused(false)}
-                        disabled={sending}
-                        rows={1}
-                    />
-
-                    {/* Send button */}
-                    <div className="absolute right-2 bottom-2">
-                        <button
-                            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 ease-in-out ${
-                                canSend && !sending
-                                    ? 'bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95'
-                                    : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                            }`}
-                            onClick={handleSend}
-                            disabled={!canSend || sending}
-                            type="button"
-                        >
-                            {sending ? (
-                                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                                    <circle
-                                        className="opacity-25"
-                                        cx="12"
-                                        cy="12"
-                                        r="10"
-                                        stroke="currentColor"
-                                        strokeWidth="4"
-                                    ></circle>
-                                    <path
-                                        className="opacity-75"
-                                        fill="currentColor"
-                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                    ></path>
-                                </svg>
-                            ) : (
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                                    />
-                                </svg>
-                            )}
-                        </button>
+                    {/* Input container with flex layout like Slack */}
+                    <div className="flex items-end gap-2 p-2">
+                        {/* Upload button - positioned like Slack */}
+                        <div className="flex-shrink-0 self-end pb-1">
+                            <UploadImageButton onChange={onUploadImageChange} />
+                        </div>
+
+                        {/* Textarea container */}
+                        <div className="flex-grow min-w-0">
+                            <textarea
+                                ref={textareaRef}
+                                className="w-full text-base px-3 py-2 bg-transparent border-none resize-none overflow-hidden placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"
+                                style={{
+                                    height: `${inputHeight}px`,
+                                    minHeight: '40px',
+                                    maxHeight: '120px',
+                                }}
+                                placeholder={placeholder || t('tailwind_ui_inbox.reminder_leave_a_review')}
+                                value={sending ? '' : message}
+                                onKeyDown={handleKeyDown}
+                                onChange={(e) => setMessage(e.target.value)}
+                                onFocus={() => setIsFocused(true)}
+                                onBlur={() => setIsFocused(false)}
+                                disabled={sending}
+                                rows={1}
+                            />
+                        </div>
+
+                        {/* Send button - positioned like Slack */}
+                        <div className="flex-shrink-0 self-end pb-1">
+                            <button
+                                className={`w-8 h-8 rounded-md flex items-center justify-center transition-all duration-200 ease-in-out ${
+                                    canSend && !sending
+                                        ? 'bg-green-600 hover:bg-green-700 text-white shadow-sm hover:shadow-md'
+                                        : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                                }`}
+                                onClick={handleSend}
+                                disabled={!canSend || sending}
+                                type="button"
+                            >
+                                {sending ? (
+                                    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                        <circle
+                                            className="opacity-25"
+                                            cx="12"
+                                            cy="12"
+                                            r="10"
+                                            stroke="currentColor"
+                                            strokeWidth="4"
+                                        ></circle>
+                                        <path
+                                            className="opacity-75"
+                                            fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                        ></path>
+                                    </svg>
+                                ) : (
+                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                        />
+                                    </svg>
+                                )}
+                            </button>
+                        </div>
                     </div>
                 </div>