chore: sync lockfile and payload-ai extensions for release v1.9.10

2026-03-03 12:40:41 +01:00
parent 24fde20030
commit 79d221de5e
22 changed files with 838 additions and 325 deletions
--- a/packages/payload-ai/src/components/ChatWindow/index.tsx
+++ b/packages/payload-ai/src/components/ChatWindow/index.tsx
@@ -0,0 +1,108 @@
+'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>
+    )
+}