mmintel/at-mintel
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

ci: fix unhandled typescript exceptions and strict eslint errors caught by the pipeline
Some checks failed
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 2s
Details
Monorepo Pipeline / 🧹 Lint (push) Failing after 9s
Details
Monorepo Pipeline / 🏗️ Build (push) Failing after 9s
Details
Monorepo Pipeline / 🧪 Test (push) Failing after 9s
Details
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Details
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-03-06 15:49:45 +01:00
parent 2dc61e4937
commit 61f2f83e0c
10 changed files with 1914 additions and 1223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
packages/payload-ai/src/components/ChatWindow/index.tsx
View File

@@ -1,136 +1,158 @@
'use client'
"use client";
import React, { useState, useEffect } from 'react'
import { useChat } from '@ai-sdk/react'
import './ChatWindow.scss'
import React, { useState, useEffect } from "react";
import { useChat } from "@ai-sdk/react";
import "./ChatWindow.scss";
export const ChatWindowProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<>
{children}
<ChatWindow />
</>
)
}
export const ChatWindowProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return (
<>
{children}
<ChatWindow />
</>
);
};
const ChatWindow: React.FC = () => {
const [isOpen, setIsOpen] = useState(false)
const [pageContext, setPageContext] = useState<any>({ url: '' })
const [isOpen, setIsOpen] = useState(false);
const [pageContext, setPageContext] = useState<any>({ url: "" });
useEffect(() => {
if (typeof window !== 'undefined') {
const path = window.location.pathname;
let collectionSlug = null;
let id = null;
// Payload admin URLs are usually /admin/collections/:slug/:id
const match = path.match(/\/collections\/([^/]+)(?:\/([^/]+))?/);
if (match) {
collectionSlug = match[1];
if (match[2] && match[2] !== 'create') {
id = match[2];
}
}
setPageContext({
url: window.location.href,
title: document.title,
collectionSlug,
id
})
useEffect(() => {
if (typeof window !== "undefined") {
const path = window.location.pathname;
let collectionSlug = null;
let id = null;
// Payload admin URLs are usually /admin/collections/:slug/:id
const match = path.match(/\/collections\/([^/]+)(?:\/([^/]+))?/);
if (match) {
collectionSlug = match[1];
if (match[2] && match[2] !== "create") {
id = match[2];
}
}, [isOpen]) // Refresh context when chat is opened
}
// @ts-ignore - AI hook version mismatch between core and react packages
const { messages, input, handleInputChange, handleSubmit, setMessages } = useChat({
api: '/api/mcp-chat',
initialMessages: [],
body: {
pageContext
}
} as any)
setPageContext({
url: window.location.href,
title: document.title,
collectionSlug,
id,
});
}
}, [isOpen]); // Refresh context when chat is opened
// 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)}
// @ts-expect-error - AI hook version mismatch between core and react packages
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: "/api/mcp-chat",
initialMessages: [],
body: {
pageContext,
},
} 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: "450px",
height: "650px",
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={{
position: 'fixed',
bottom: '20px',
right: '20px',
zIndex: 9999,
padding: '12px 24px',
backgroundColor: '#000',
color: '#fff',
borderRadius: '8px',
border: 'none',
cursor: 'pointer',
fontWeight: 'bold'
marginBottom: "12px",
textAlign: m.role === "user" ? "right" : "left",
}}
>
{isOpen ? 'Close AI Chat' : 'Ask AI'}
</button>
{isOpen && (
>
<div
className="payload-mcp-chat-window"
style={{
position: 'fixed',
bottom: '80px',
right: '20px',
width: '450px',
height: '650px',
backgroundColor: '#fff',
border: '1px solid #eaeaea',
borderRadius: '12px',
zIndex: 9999,
display: 'flex',
flexDirection: 'column',
boxShadow: '0 10px 40px rgba(0,0,0,0.1)'
}}
style={{
display: "inline-block",
padding: "8px 12px",
borderRadius: "8px",
backgroundColor: m.role === "user" ? "#000" : "#f0f0f0",
color: m.role === "user" ? "#fff" : "#000",
maxWidth: "80%",
}}
>
<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>
{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>
);
};