2024-01-09 03:11:39 -08:00
|
|
|
import type { AuthenticationChatOption, LoadPreviousSessionChatOption } from './types';
|
|
|
|
|
|
|
|
|
|
export function createPage({
|
|
|
|
|
instanceId,
|
|
|
|
|
webhookUrl,
|
|
|
|
|
showWelcomeScreen,
|
|
|
|
|
loadPreviousSession,
|
|
|
|
|
i18n: { en },
|
|
|
|
|
initialMessages,
|
|
|
|
|
authentication,
|
|
|
|
|
}: {
|
|
|
|
|
instanceId: string;
|
|
|
|
|
webhookUrl?: string;
|
|
|
|
|
showWelcomeScreen?: boolean;
|
|
|
|
|
loadPreviousSession?: LoadPreviousSessionChatOption;
|
|
|
|
|
i18n: {
|
|
|
|
|
en: Record<string, string>;
|
|
|
|
|
};
|
|
|
|
|
initialMessages: string[];
|
|
|
|
|
mode: 'test' | 'production';
|
|
|
|
|
authentication: AuthenticationChatOption;
|
|
|
|
|
}) {
|
|
|
|
|
const validAuthenticationOptions: AuthenticationChatOption[] = [
|
|
|
|
|
'none',
|
|
|
|
|
'basicAuth',
|
|
|
|
|
'n8nUserAuth',
|
|
|
|
|
];
|
|
|
|
|
const validLoadPreviousSessionOptions: LoadPreviousSessionChatOption[] = [
|
|
|
|
|
'manually',
|
|
|
|
|
'memory',
|
|
|
|
|
'notSupported',
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const sanitizedAuthentication = validAuthenticationOptions.includes(authentication)
|
|
|
|
|
? authentication
|
|
|
|
|
: 'none';
|
|
|
|
|
const sanitizedShowWelcomeScreen = !!showWelcomeScreen;
|
|
|
|
|
const sanitizedLoadPreviousSession = validLoadPreviousSessionOptions.includes(
|
|
|
|
|
loadPreviousSession as LoadPreviousSessionChatOption,
|
|
|
|
|
)
|
|
|
|
|
? loadPreviousSession
|
|
|
|
|
: 'notSupported';
|
|
|
|
|
|
2024-04-10 01:37:23 -07:00
|
|
|
return `<!doctype html>
|
2024-01-09 03:11:39 -08:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<title>Chat</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" rel="stylesheet" />
|
2024-07-05 05:44:19 -07:00
|
|
|
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
|
2024-06-07 02:47:23 -07:00
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
#n8n-chat {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2024-01-09 03:11:39 -08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="module">
|
2024-07-05 05:44:19 -07:00
|
|
|
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
|
2024-01-09 03:11:39 -08:00
|
|
|
|
|
|
|
|
(async function () {
|
|
|
|
|
const authentication = '${sanitizedAuthentication}';
|
|
|
|
|
let metadata;
|
|
|
|
|
if (authentication === 'n8nUserAuth') {
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch('/rest/login', {
|
2024-04-10 01:37:23 -07:00
|
|
|
method: 'GET',
|
|
|
|
|
headers: { 'browser-id': localStorage.getItem('n8n-browserId') }
|
2024-01-09 03:11:39 -08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (response.status !== 200) {
|
|
|
|
|
throw new Error('Not logged in');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const responseData = await response.json();
|
|
|
|
|
metadata = {
|
|
|
|
|
user: {
|
|
|
|
|
id: responseData.data.id,
|
|
|
|
|
firstName: responseData.data.firstName,
|
|
|
|
|
lastName: responseData.data.lastName,
|
|
|
|
|
email: responseData.data.email,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
} catch (error) {
|
|
|
|
|
window.location.href = '/signin?redirect=' + window.location.href;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
createChat({
|
|
|
|
|
mode: 'fullscreen',
|
|
|
|
|
webhookUrl: '${webhookUrl}',
|
|
|
|
|
showWelcomeScreen: ${sanitizedShowWelcomeScreen},
|
|
|
|
|
loadPreviousSession: ${sanitizedLoadPreviousSession !== 'notSupported'},
|
|
|
|
|
metadata: metadata,
|
|
|
|
|
webhookConfig: {
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
'X-Instance-Id': '${instanceId}',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
i18n: {
|
|
|
|
|
${en ? `en: ${JSON.stringify(en)},` : ''}
|
|
|
|
|
},
|
|
|
|
|
${initialMessages.length ? `initialMessages: ${JSON.stringify(initialMessages)},` : ''}
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>`;
|
|
|
|
|
}
|
