at-mintel/packages/payload-ai/src/components/ChatWindow/index.tsx

'use client'

import React, { useState } from 'react'
import { useChat } from '@ai-sdk/react'
import './ChatWindow.scss'

export const ChatWindowProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <>
            {children}
            <ChatWindow />
        </>
    )
}

const ChatWindow: React.FC = () => {
    const [isOpen, setIsOpen] = useState(false)
    // @ts-ignore - AI hook version mismatch between core and react packages
    const { messages, input, handleInputChange, handleSubmit, setMessages } = useChat({
        api: '/api/mcp-chat',
        initialMessages: []
    } as any)

    // Basic implementation to toggle chat window and submit messages
    return (
        <div className="payload-mcp-chat-container">
            <button
                className="payload-mcp-chat-toggle"
                onClick={() => setIsOpen(!isOpen)}
                style={{
                    position: 'fixed',
                    bottom: '20px',
                    right: '20px',
                    zIndex: 9999,
                    padding: '12px 24px',
                    backgroundColor: '#000',
                    color: '#fff',
                    borderRadius: '8px',
                    border: 'none',
                    cursor: 'pointer',
                    fontWeight: 'bold'
                }}
            >
                {isOpen ? 'Close AI Chat' : 'Ask AI'}
            </button>

            {isOpen && (
                <div
                    className="payload-mcp-chat-window"
                    style={{
                        position: 'fixed',
                        bottom: '80px',
                        right: '20px',
                        width: '400px',
                        height: '600px',
                        backgroundColor: '#fff',
                        border: '1px solid #eaeaea',
                        borderRadius: '12px',
                        zIndex: 9999,
                        display: 'flex',
                        flexDirection: 'column',
                        boxShadow: '0 10px 40px rgba(0,0,0,0.1)'
                    }}
                >
                    <div className="chat-header" style={{ padding: '16px', borderBottom: '1px solid #eaeaea', backgroundColor: '#f9f9f9', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }}>
                        <h3 style={{ margin: 0, fontSize: '16px' }}>Payload MCP Chat</h3>
                    </div>

                    <div className="chat-messages" style={{ flex: 1, padding: '16px', overflowY: 'auto' }}>
                        {messages.map((m: any) => (
                            <div key={m.id} style={{
                                marginBottom: '12px',
                                textAlign: m.role === 'user' ? 'right' : 'left'
                            }}>
                                <div style={{
                                    display: 'inline-block',
                                    padding: '8px 12px',
                                    borderRadius: '8px',
                                    backgroundColor: m.role === 'user' ? '#000' : '#f0f0f0',
                                    color: m.role === 'user' ? '#fff' : '#000',
                                    maxWidth: '80%'
                                }}>
                                    {m.role === 'user' ? 'G: ' : 'AI: '}
                                    {m.content}
                                </div>
                            </div>
                        ))}
                    </div>

                    <form onSubmit={handleSubmit} style={{ padding: '16px', borderTop: '1px solid #eaeaea' }}>
                        <input
                            value={input}
                            placeholder="Ask me anything or use /commands..."
                            onChange={handleInputChange}
                            style={{
                                width: '100%',
                                padding: '12px',
                                borderRadius: '8px',
                                border: '1px solid #eaeaea',
                                boxSizing: 'border-box'
                            }}
                        />
                    </form>
                </div>
            )}
        </div>
    )
}