langflow-chatbot
Version:
Add a Langflow-powered chatbot to your website.
60 lines (59 loc) • 3.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ERROR_MESSAGE_TEMPLATE = exports.THINKING_BUBBLE_HTML = exports.DEFAULT_MESSAGE_TEMPLATE = exports.DEFAULT_INPUT_AREA_TEMPLATE = exports.DEFAULT_MAIN_CONTAINER_TEMPLATE = exports.DEFAULT_FLOATING_WIDGET_HEADER_TEMPLATE = exports.DEFAULT_WIDGET_HEADER_TEMPLATE = exports.DEFAULT_SYSTEM_SENDER = exports.DEFAULT_ERROR_SENDER = exports.DEFAULT_BOT_SENDER = exports.DEFAULT_USER_SENDER = exports.DEFAULT_WIDGET_TITLE = exports.DEFAULT_DATETIME_FORMAT = exports.DEFAULT_FLOAT_POSITION = exports.DEFAULT_USE_FLOATING = exports.DEFAULT_ENABLE_STREAM = exports.SVG_RESET_ICON = exports.SVG_MINIMIZE_ICON = exports.SVG_CHAT_ICON = void 0;
exports.SVG_CHAT_ICON = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path></svg>';
exports.SVG_MINIMIZE_ICON = '<svg viewBox="0 0 24 24" stroke-width="2"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"></path></svg>';
exports.SVG_RESET_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>';
// Default Chatbot Behaviors
exports.DEFAULT_ENABLE_STREAM = true;
exports.DEFAULT_USE_FLOATING = false;
exports.DEFAULT_FLOAT_POSITION = "bottom-right";
exports.DEFAULT_DATETIME_FORMAT = "relative";
// Default Labels
exports.DEFAULT_WIDGET_TITLE = "Chat Assistant";
exports.DEFAULT_USER_SENDER = "Me";
exports.DEFAULT_BOT_SENDER = "Assistant";
exports.DEFAULT_ERROR_SENDER = "Error";
exports.DEFAULT_SYSTEM_SENDER = "System";
// Default HTML Templates
exports.DEFAULT_WIDGET_HEADER_TEMPLATE = `
<div class="chat-widget-header">
<span class="chat-widget-title-text">{{widgetTitle}}</span>
<button class="chat-widget-reset-button">{{resetButton}}</button>
</div>
`;
exports.DEFAULT_FLOATING_WIDGET_HEADER_TEMPLATE = `
<div class="chat-widget-header">
<span class="chat-widget-title-text">{{widgetTitle}}</span>
<button class="chat-widget-reset-button">{{resetButton}}</button>
<button class="chat-widget-minimize-button">${exports.SVG_MINIMIZE_ICON}</button>
</div>
`;
exports.DEFAULT_MAIN_CONTAINER_TEMPLATE = `
<div class="chat-widget" style="display: flex; flex-direction: column; height: 100%;">
<div id="chat-widget-header-container" style="flex-shrink: 0;">
<!-- Widget header will be injected here -->
</div>
<div class="chat-messages" style="flex-grow: 1; overflow-y: auto;">
<!-- Messages will appear here -->
</div>
<div id="chat-input-area-container" style="flex-shrink: 0;"></div>
</div>
`;
exports.DEFAULT_INPUT_AREA_TEMPLATE = `
<div class="chat-input-area">
<input type="text" class="chat-input" placeholder="Type your message..." />
<button class="send-button">Send</button>
</div>
`;
exports.DEFAULT_MESSAGE_TEMPLATE = `
<div class="{{messageClasses}} message-block">
<div class="sender-name-display" style="font-size: 0.8em; color: #888; margin-bottom: 2px;">{{sender}}</div>
<div class="message-bubble">
<span class="message-text-content" style="white-space: pre-wrap;">{{message}}</span>
</div>
<div class="message-datetime">{{datetime}}</div>
</div>`;
exports.THINKING_BUBBLE_HTML = '<div class="thinking-bubble"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>';
const ERROR_MESSAGE_TEMPLATE = (errorMessage) => `<div style="color: red; padding: 10px;">Error initializing chatbot: ${errorMessage}</div>`;
exports.ERROR_MESSAGE_TEMPLATE = ERROR_MESSAGE_TEMPLATE;