113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
/**
|
|
* ChatbotConfigSection Component
|
|
*
|
|
* Displays chatbot-specific configuration fields (connector, system prompt)
|
|
* Only shown when featureCode is "chatbot"
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { TextField } from '../../components/UiComponents/TextField';
|
|
import styles from './Admin.module.css';
|
|
|
|
export interface ChatbotConfig {
|
|
connector: string;
|
|
systemPrompt: string;
|
|
}
|
|
|
|
export interface ChatbotConfigSectionProps {
|
|
connectors: string[]; // Array of selected connector types (database connectors only)
|
|
systemPrompt: string;
|
|
enableWebResearch: boolean; // Enable Tavily web research
|
|
onConnectorsChange: (connectors: string[]) => void;
|
|
onSystemPromptChange: (prompt: string) => void;
|
|
onEnableWebResearchChange: (enabled: boolean) => void;
|
|
}
|
|
|
|
export const ChatbotConfigSection: React.FC<ChatbotConfigSectionProps> = ({
|
|
connectors,
|
|
systemPrompt,
|
|
enableWebResearch,
|
|
onConnectorsChange,
|
|
onSystemPromptChange,
|
|
onEnableWebResearchChange
|
|
}) => {
|
|
const availableConnectors = [
|
|
{ id: 'preprocessor', label: 'Althaus Preprocessor', value: 'preprocessor' }
|
|
];
|
|
|
|
const handleConnectorToggle = (connectorValue: string) => {
|
|
if (connectors.includes(connectorValue)) {
|
|
// Remove connector
|
|
onConnectorsChange(connectors.filter(c => c !== connectorValue));
|
|
} else {
|
|
// Add connector
|
|
onConnectorsChange([...connectors, connectorValue]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.chatbotConfigSection}>
|
|
<div className={styles.configField}>
|
|
<label className={styles.configLabel}>
|
|
Connector:
|
|
</label>
|
|
<div className={styles.multiselectContainer}>
|
|
{availableConnectors.map(connector => {
|
|
const isSelected = connectors.includes(connector.value);
|
|
return (
|
|
<label key={connector.id} className={styles.multiselectOption}>
|
|
<input
|
|
type="checkbox"
|
|
checked={isSelected}
|
|
onChange={() => handleConnectorToggle(connector.value)}
|
|
className={styles.multiselectCheckbox}
|
|
/>
|
|
<span className={styles.multiselectLabel}>{connector.label}</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
{connectors.length === 0 && (
|
|
<p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '0.5rem' }}>
|
|
Bitte wählen Sie mindestens einen Connector aus.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.configField}>
|
|
<label className={styles.configLabel} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={enableWebResearch}
|
|
onChange={(e) => onEnableWebResearchChange(e.target.checked)}
|
|
className={styles.multiselectCheckbox}
|
|
/>
|
|
<span>Web Research aktivieren (Tavily)</span>
|
|
</label>
|
|
<p className={styles.configHelpText}>
|
|
Wenn aktiviert, führt der Chatbot zusätzlich Web-Recherchen mit Tavily durch, um aktuelle Informationen aus dem Internet zu finden.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.configField}>
|
|
<label className={styles.configLabel}>
|
|
System Prompt: <span style={{ color: 'var(--error-color)' }}>*</span>
|
|
</label>
|
|
<TextField
|
|
type="text"
|
|
value={systemPrompt}
|
|
onChange={onSystemPromptChange}
|
|
placeholder="Benutzerdefinierter System-Prompt für den Chatbot..."
|
|
className={styles.configTextArea}
|
|
size="md"
|
|
rows={6}
|
|
required={true}
|
|
/>
|
|
<p className={styles.configHelpText}>
|
|
Dieser Prompt wird für Analyse und Antwort-Generierung verwendet (erforderlich).
|
|
Platzhalter: {'{userPrompt}'}, {'{context}'}, {'{db_results_part}'}, {'{web_results_part}'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|