feat: rag extension frontend consent
This commit is contained in:
parent
26958d1e16
commit
b61544d8b1
6 changed files with 1256 additions and 50 deletions
|
|
@ -4,6 +4,22 @@ import { ApiRequestOptions } from '../hooks/useApi';
|
||||||
// TYPES & INTERFACES
|
// TYPES & INTERFACES
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|
||||||
|
export interface KnowledgePreferences {
|
||||||
|
schemaVersion?: number;
|
||||||
|
neutralizeBeforeEmbed?: boolean;
|
||||||
|
mailContentDepth?: 'metadata' | 'snippet' | 'full';
|
||||||
|
mailIndexAttachments?: boolean;
|
||||||
|
filesIndexBinaries?: boolean;
|
||||||
|
mimeAllowlist?: string[];
|
||||||
|
clickupScope?: 'titles' | 'title_description' | 'with_comments';
|
||||||
|
clickupIndexAttachments?: boolean;
|
||||||
|
surfaceToggles?: {
|
||||||
|
google?: { gmail?: boolean; drive?: boolean };
|
||||||
|
msft?: { sharepoint?: boolean; outlook?: boolean };
|
||||||
|
};
|
||||||
|
maxAgeDays?: number;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Connection {
|
export interface Connection {
|
||||||
id: string;
|
id: string;
|
||||||
userId: string;
|
userId: string;
|
||||||
|
|
@ -15,6 +31,8 @@ export interface Connection {
|
||||||
connectedAt: number; // Backend uses float for UTC timestamp in seconds
|
connectedAt: number; // Backend uses float for UTC timestamp in seconds
|
||||||
lastChecked: number; // Backend uses float for UTC timestamp in seconds
|
lastChecked: number; // Backend uses float for UTC timestamp in seconds
|
||||||
expiresAt?: number; // Backend uses Optional[float] for UTC timestamp in seconds
|
expiresAt?: number; // Backend uses Optional[float] for UTC timestamp in seconds
|
||||||
|
knowledgeIngestionEnabled?: boolean;
|
||||||
|
knowledgePreferences?: KnowledgePreferences | null;
|
||||||
[key: string]: any; // Allow additional properties
|
[key: string]: any; // Allow additional properties
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,6 +76,8 @@ export interface CreateConnectionData {
|
||||||
externalUsername?: string;
|
externalUsername?: string;
|
||||||
externalEmail?: string;
|
externalEmail?: string;
|
||||||
status?: 'active' | 'expired' | 'revoked' | 'pending';
|
status?: 'active' | 'expired' | 'revoked' | 'pending';
|
||||||
|
knowledgeIngestionEnabled?: boolean;
|
||||||
|
knowledgePreferences?: KnowledgePreferences | null;
|
||||||
connectedAt?: number;
|
connectedAt?: number;
|
||||||
lastChecked?: number;
|
lastChecked?: number;
|
||||||
expiresAt?: number;
|
expiresAt?: number;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,467 @@
|
||||||
|
/* AddConnectionWizard styles */
|
||||||
|
|
||||||
|
.stepper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1rem 1.5rem 0;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDot {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--bg-secondary, #f0f0f0);
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
border: 2px solid var(--border-color, #ddd);
|
||||||
|
transition: background 0.2s, border-color 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDotActive {
|
||||||
|
background: var(--primary-color, #f25843);
|
||||||
|
border-color: var(--primary-color, #f25843);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDotDone {
|
||||||
|
background: var(--success-color, #22c55e);
|
||||||
|
border-color: var(--success-color, #22c55e);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepDotHidden {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
padding: 1.5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepTitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepBody {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepHint {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connector grid (Step 0) */
|
||||||
|
.connectorGrid {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connectorCard {
|
||||||
|
flex: 1 1 140px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.625rem;
|
||||||
|
padding: 1.25rem 1rem;
|
||||||
|
background: var(--surface-color);
|
||||||
|
border: 2px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connectorCard:hover {
|
||||||
|
border-color: var(--primary-color, #f25843);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connectorIcon {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connectorLabel {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Consent step (Step 1) */
|
||||||
|
.consentIcon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--primary-color, #f25843);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consentButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consentButtonYes {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: var(--primary-color, #f25843);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consentButtonYes:hover {
|
||||||
|
background: var(--primary-dark, #d94d3a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.consentButtonNo {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 2px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.2s, background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.consentButtonNo:hover {
|
||||||
|
border-color: var(--text-secondary, #888);
|
||||||
|
background: var(--bg-secondary, #f5f5f5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preferences step (Step 2) */
|
||||||
|
.prefGroup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
border-bottom: 1px solid var(--border-color, #eee);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefGroup:last-of-type {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefLabel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefLabelRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefIcon {
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefCheck {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
accent-color: var(--primary-color, #f25843);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefSelect {
|
||||||
|
padding: 0.375rem 0.5rem;
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefNumber {
|
||||||
|
width: 80px;
|
||||||
|
padding: 0.375rem 0.5rem;
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefHint {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Summary step (Step 3) */
|
||||||
|
.summary {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summaryRow {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.625rem 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
border-bottom: 1px solid var(--border-color, #eee);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summaryRow:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summaryKey {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summaryVal {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Back button (step 1 consent screen) */
|
||||||
|
.stepNavLeft {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBack {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBack:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cost estimate hint */
|
||||||
|
.costHint {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.625rem;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: var(--info-bg, #eff6ff);
|
||||||
|
border: 1px solid var(--info-border, #bfdbfe);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costHintIcon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: var(--info-color, #3b82f6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.costHint > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costHintTitle {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costTable {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costLabel {
|
||||||
|
color: var(--text-secondary, #555);
|
||||||
|
padding-right: 1rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costVal {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--info-color, #1d4ed8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.costRowNeut .costLabel,
|
||||||
|
.costRowNeut .costVal {
|
||||||
|
padding-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costRowNeut .costVal {
|
||||||
|
color: #b45309;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costHintWarn {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #b45309;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.costHintNote {
|
||||||
|
color: var(--text-secondary, #555);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .costHint {
|
||||||
|
background: rgba(59, 130, 246, 0.08);
|
||||||
|
border-color: rgba(59, 130, 246, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .costVal {
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .costRowNeut .costVal,
|
||||||
|
:global(.dark-theme) .costHintWarn {
|
||||||
|
color: #fbbf24;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
.stepNav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBack {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-secondary, #666);
|
||||||
|
border: 1px solid var(--border-color, #ddd);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBack:hover {
|
||||||
|
background: var(--bg-secondary, #f5f5f5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navNext {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
background: var(--primary-color, #f25843);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navNext:hover {
|
||||||
|
background: var(--primary-dark, #d94d3a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navConnect {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.625rem 1.5rem;
|
||||||
|
background: var(--primary-color, #f25843);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navConnect:hover:not(:disabled) {
|
||||||
|
background: var(--primary-dark, #d94d3a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navConnect:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme */
|
||||||
|
:global(.dark-theme) .connectorCard {
|
||||||
|
background: var(--surface-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .prefSelect,
|
||||||
|
:global(.dark-theme) .prefNumber {
|
||||||
|
background: var(--surface-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .summary {
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .summaryRow {
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
521
src/components/AddConnectionWizard/AddConnectionWizard.tsx
Normal file
521
src/components/AddConnectionWizard/AddConnectionWizard.tsx
Normal file
|
|
@ -0,0 +1,521 @@
|
||||||
|
/**
|
||||||
|
* AddConnectionWizard
|
||||||
|
*
|
||||||
|
* Multi-step modal for adding a new connector with optional knowledge
|
||||||
|
* ingestion consent and per-connection preferences (§2.6).
|
||||||
|
*
|
||||||
|
* Steps:
|
||||||
|
* 0 — Connector wählen
|
||||||
|
* 1 — Consent (Wissensdatenbank Ja/Nein)
|
||||||
|
* 2 — Präferenzen (nur wenn Ja)
|
||||||
|
* 3 — Zusammenfassung + OAuth starten
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Modal } from '../UiComponents/Modal/Modal';
|
||||||
|
import { FaGoogle, FaMicrosoft, FaTasks, FaDatabase, FaShieldAlt, FaCheck, FaArrowRight, FaInfoCircle } from 'react-icons/fa';
|
||||||
|
import type { KnowledgePreferences } from '../../api/connectionApi';
|
||||||
|
import styles from './AddConnectionWizard.module.css';
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Types
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export type ConnectorType = 'google' | 'msft' | 'clickup';
|
||||||
|
|
||||||
|
interface WizardState {
|
||||||
|
step: 0 | 1 | 2 | 3;
|
||||||
|
connector: ConnectorType | null;
|
||||||
|
knowledgeEnabled: boolean;
|
||||||
|
prefs: KnowledgePreferences;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_PREFS: KnowledgePreferences = {
|
||||||
|
schemaVersion: 1,
|
||||||
|
neutralizeBeforeEmbed: false,
|
||||||
|
mailContentDepth: 'full',
|
||||||
|
mailIndexAttachments: false,
|
||||||
|
filesIndexBinaries: true,
|
||||||
|
clickupScope: 'title_description',
|
||||||
|
clickupIndexAttachments: false,
|
||||||
|
maxAgeDays: 90,
|
||||||
|
};
|
||||||
|
|
||||||
|
const CONNECTOR_LABELS: Record<ConnectorType, string> = {
|
||||||
|
google: 'Google',
|
||||||
|
msft: 'Microsoft 365',
|
||||||
|
clickup: 'ClickUp',
|
||||||
|
};
|
||||||
|
|
||||||
|
const CONNECTOR_ICONS: Record<ConnectorType, React.ReactNode> = {
|
||||||
|
google: <FaGoogle style={{ color: '#4285f4' }} />,
|
||||||
|
msft: <FaMicrosoft style={{ color: '#00a4ef' }} />,
|
||||||
|
clickup: <FaTasks style={{ color: '#7b68ee' }} />,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Cost estimate helper
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a cost estimate broken into two lines:
|
||||||
|
*
|
||||||
|
* 1. Embedding (OpenAI text-embedding-3-small, $0.02 / 1M tokens) — always tiny.
|
||||||
|
* 2. Neutralization (Private LLM / qwen2.5 on-premise, CHF 0.01 per LLM call)
|
||||||
|
* — this is the DOMINANT cost when enabled. One call per email/task for
|
||||||
|
* short content; several calls for long threads or files.
|
||||||
|
*
|
||||||
|
* Numbers are conservative ranges. Subsequent syncs are cheaper because
|
||||||
|
* unchanged content is deduplicated before any LLM/embedding call.
|
||||||
|
*/
|
||||||
|
function computeCostEstimate(
|
||||||
|
connector: ConnectorType | null,
|
||||||
|
prefs: KnowledgePreferences,
|
||||||
|
): {
|
||||||
|
embeddingLow: string;
|
||||||
|
embeddingHigh: string;
|
||||||
|
neutralizationLow: string | null;
|
||||||
|
neutralizationHigh: string | null;
|
||||||
|
note: string;
|
||||||
|
} | null {
|
||||||
|
if (!connector) return null;
|
||||||
|
|
||||||
|
// ---- Embedding (OpenAI, USD) ----
|
||||||
|
const EMBED_USD_PER_M = 0.02;
|
||||||
|
const tokensPerMail: Record<string, number> = { metadata: 30, snippet: 120, full: 500 };
|
||||||
|
const depth = prefs.mailContentDepth ?? 'full';
|
||||||
|
const maxAge = prefs.maxAgeDays ?? 90;
|
||||||
|
const mailCount = Math.min(500, Math.round((maxAge / 90) * 500));
|
||||||
|
const taskCount = Math.min(500, Math.round((maxAge / 90) * 300));
|
||||||
|
|
||||||
|
let embedLowTokens = 0;
|
||||||
|
let embedHighTokens = 0;
|
||||||
|
|
||||||
|
if (connector === 'google' || connector === 'msft') {
|
||||||
|
const mailTokens = mailCount * tokensPerMail[depth];
|
||||||
|
embedLowTokens += mailTokens * 0.6;
|
||||||
|
embedHighTokens += mailTokens * 1.5 + 500_000; // Drive/SharePoint
|
||||||
|
if (prefs.mailIndexAttachments) embedHighTokens += 200_000;
|
||||||
|
} else if (connector === 'clickup') {
|
||||||
|
const scope = prefs.clickupScope ?? 'title_description';
|
||||||
|
const tpt = scope === 'titles' ? 30 : scope === 'title_description' ? 200 : 400;
|
||||||
|
embedLowTokens += taskCount * tpt * 0.6;
|
||||||
|
embedHighTokens += taskCount * tpt * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fmtUsd = (tokens: number) => {
|
||||||
|
const usd = (tokens / 1_000_000) * EMBED_USD_PER_M;
|
||||||
|
if (usd < 0.001) return '< 0.01 $';
|
||||||
|
if (usd < 0.10) return `~${usd.toFixed(3)} $`;
|
||||||
|
return `~${usd.toFixed(2)} $`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---- Neutralization (Private LLM, CHF 0.01/call) ----
|
||||||
|
// Each item (email / task / file) = 1 LLM call for short content,
|
||||||
|
// 2-4 for long threads/documents.
|
||||||
|
const NEUT_CHF_PER_CALL = 0.01;
|
||||||
|
let neutLow: string | null = null;
|
||||||
|
let neutHigh: string | null = null;
|
||||||
|
|
||||||
|
if (prefs.neutralizeBeforeEmbed) {
|
||||||
|
let lowCalls = 0;
|
||||||
|
let highCalls = 0;
|
||||||
|
|
||||||
|
if (connector === 'google' || connector === 'msft') {
|
||||||
|
lowCalls += mailCount * 1; // 1 call / short email
|
||||||
|
highCalls += mailCount * 3; // up to 3 calls / long thread
|
||||||
|
lowCalls += 20; // Drive/SharePoint files (low)
|
||||||
|
highCalls += 200; // Drive/SharePoint files (high, large PDFs)
|
||||||
|
} else if (connector === 'clickup') {
|
||||||
|
lowCalls += taskCount * 1;
|
||||||
|
highCalls += taskCount * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fmtChf = (calls: number) => {
|
||||||
|
const chf = calls * NEUT_CHF_PER_CALL;
|
||||||
|
if (chf < 0.01) return '< 0.01 CHF';
|
||||||
|
return `~${chf.toFixed(2)} CHF`;
|
||||||
|
};
|
||||||
|
|
||||||
|
neutLow = fmtChf(lowCalls);
|
||||||
|
neutHigh = fmtChf(highCalls);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
embeddingLow: fmtUsd(embedLowTokens),
|
||||||
|
embeddingHigh: fmtUsd(embedHighTokens),
|
||||||
|
neutralizationLow: neutLow,
|
||||||
|
neutralizationHigh: neutHigh,
|
||||||
|
note: 'Einmalig beim ersten Sync. Folge-Syncs kosten weniger (nur neue Inhalte).',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Props
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
interface AddConnectionWizardProps {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onConnect: (
|
||||||
|
type: ConnectorType,
|
||||||
|
knowledgeEnabled: boolean,
|
||||||
|
prefs: KnowledgePreferences | null,
|
||||||
|
) => Promise<void>;
|
||||||
|
isConnecting?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Component
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export const AddConnectionWizard: React.FC<AddConnectionWizardProps> = ({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
onConnect,
|
||||||
|
isConnecting = false,
|
||||||
|
}) => {
|
||||||
|
const [state, setState] = useState<WizardState>({
|
||||||
|
step: 0,
|
||||||
|
connector: null,
|
||||||
|
knowledgeEnabled: false,
|
||||||
|
prefs: { ...DEFAULT_PREFS },
|
||||||
|
});
|
||||||
|
|
||||||
|
const reset = () =>
|
||||||
|
setState({ step: 0, connector: null, knowledgeEnabled: false, prefs: { ...DEFAULT_PREFS } });
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
reset();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const setStep = (step: WizardState['step']) => setState(s => ({ ...s, step }));
|
||||||
|
const setConnector = (connector: ConnectorType) =>
|
||||||
|
setState(s => ({ ...s, connector, step: 1 }));
|
||||||
|
const setKnowledgeEnabled = (v: boolean) =>
|
||||||
|
setState(s => ({ ...s, knowledgeEnabled: v, step: v ? 2 : 3 }));
|
||||||
|
const updatePref = <K extends keyof KnowledgePreferences>(key: K, value: KnowledgePreferences[K]) =>
|
||||||
|
setState(s => ({ ...s, prefs: { ...s.prefs, [key]: value } }));
|
||||||
|
|
||||||
|
const handleConnect = async () => {
|
||||||
|
if (!state.connector) return;
|
||||||
|
await onConnect(
|
||||||
|
state.connector,
|
||||||
|
state.knowledgeEnabled,
|
||||||
|
state.knowledgeEnabled ? state.prefs : null,
|
||||||
|
);
|
||||||
|
reset();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const STEP_LABELS = ['Anbieter', 'Zustimmung', 'Einstellungen', 'Übersicht'];
|
||||||
|
const visibleSteps = state.knowledgeEnabled
|
||||||
|
? [0, 1, 2, 3]
|
||||||
|
: [0, 1, 3];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
title="Verbindung hinzufügen"
|
||||||
|
size="md"
|
||||||
|
closeOnEscape
|
||||||
|
>
|
||||||
|
{/* Stepper */}
|
||||||
|
<div className={styles.stepper}>
|
||||||
|
{[0, 1, 2, 3].map(i => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={[
|
||||||
|
styles.stepDot,
|
||||||
|
state.step === i ? styles.stepDotActive : '',
|
||||||
|
state.step > i ? styles.stepDotDone : '',
|
||||||
|
!visibleSteps.includes(i) ? styles.stepDotHidden : '',
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
{state.step > i ? <FaCheck size={10} /> : i + 1}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.body}>
|
||||||
|
{/* ---- Step 0: Connector ---- */}
|
||||||
|
{state.step === 0 && (
|
||||||
|
<div className={styles.stepContent}>
|
||||||
|
<h3 className={styles.stepTitle}>Anbieter wählen</h3>
|
||||||
|
<p className={styles.stepHint}>Welchen Dienst möchtest du verbinden?</p>
|
||||||
|
<div className={styles.connectorGrid}>
|
||||||
|
{(['google', 'msft', 'clickup'] as ConnectorType[]).map(type => (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
type="button"
|
||||||
|
className={styles.connectorCard}
|
||||||
|
onClick={() => setConnector(type)}
|
||||||
|
>
|
||||||
|
<span className={styles.connectorIcon}>{CONNECTOR_ICONS[type]}</span>
|
||||||
|
<span className={styles.connectorLabel}>{CONNECTOR_LABELS[type]}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---- Step 1: Consent ---- */}
|
||||||
|
{state.step === 1 && (
|
||||||
|
<div className={styles.stepContent}>
|
||||||
|
<div className={styles.consentIcon}><FaDatabase size={32} /></div>
|
||||||
|
<h3 className={styles.stepTitle}>Wissensdatenbank</h3>
|
||||||
|
<p className={styles.stepBody}>
|
||||||
|
Möchtest du Inhalte aus dieser Verbindung in deine persönliche
|
||||||
|
Wissensdatenbank aufnehmen, damit die KI beim Antworten auf Informationen
|
||||||
|
aus{' '}
|
||||||
|
{state.connector ? CONNECTOR_LABELS[state.connector] : 'diesem Dienst'}{' '}
|
||||||
|
zurückgreifen kann?
|
||||||
|
</p>
|
||||||
|
<p className={styles.stepHint}>
|
||||||
|
Du kannst diese Einstellung später in den Verbindungsdetails ändern.
|
||||||
|
</p>
|
||||||
|
<div className={styles.consentButtons}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.consentButtonYes}
|
||||||
|
onClick={() => setKnowledgeEnabled(true)}
|
||||||
|
>
|
||||||
|
<FaCheck /> Ja, aufnehmen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.consentButtonNo}
|
||||||
|
onClick={() => setKnowledgeEnabled(false)}
|
||||||
|
>
|
||||||
|
Nein, überspringen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className={styles.stepNavLeft}>
|
||||||
|
<button type="button" className={styles.navBack} onClick={() => setStep(0)}>
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---- Step 2: Preferences ---- */}
|
||||||
|
{state.step === 2 && (
|
||||||
|
<div className={styles.stepContent}>
|
||||||
|
<h3 className={styles.stepTitle}>Einstellungen</h3>
|
||||||
|
<p className={styles.stepHint}>
|
||||||
|
Steuere, welche Inhalte und in welcher Form sie indexiert werden.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className={styles.prefGroup}>
|
||||||
|
<label className={styles.prefLabel}>
|
||||||
|
<FaShieldAlt className={styles.prefIcon} />
|
||||||
|
Anonymisierung vor dem Indexieren
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={!!state.prefs.neutralizeBeforeEmbed}
|
||||||
|
onChange={e => updatePref('neutralizeBeforeEmbed', e.target.checked)}
|
||||||
|
className={styles.prefCheck}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<p className={styles.prefHint}>
|
||||||
|
Persönliche Daten (Namen, E-Mail-Adressen) werden vor dem Speichern ersetzt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(state.connector === 'google' || state.connector === 'msft') && (
|
||||||
|
<>
|
||||||
|
<div className={styles.prefGroup}>
|
||||||
|
<label className={styles.prefLabelRow}>
|
||||||
|
E-Mail-Inhalt
|
||||||
|
<select
|
||||||
|
value={state.prefs.mailContentDepth ?? 'full'}
|
||||||
|
onChange={e => updatePref('mailContentDepth', e.target.value as any)}
|
||||||
|
className={styles.prefSelect}
|
||||||
|
>
|
||||||
|
<option value="metadata">Nur Metadaten (Betreff, Absender, Datum)</option>
|
||||||
|
<option value="snippet">Vorschautext (ca. 250 Zeichen)</option>
|
||||||
|
<option value="full">Vollständiger Text</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className={styles.prefGroup}>
|
||||||
|
<label className={styles.prefLabel}>
|
||||||
|
E-Mail-Anhänge indexieren
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={!!state.prefs.mailIndexAttachments}
|
||||||
|
onChange={e => updatePref('mailIndexAttachments', e.target.checked)}
|
||||||
|
className={styles.prefCheck}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{state.connector === 'clickup' && (
|
||||||
|
<div className={styles.prefGroup}>
|
||||||
|
<label className={styles.prefLabelRow}>
|
||||||
|
Aufgaben-Inhalt
|
||||||
|
<select
|
||||||
|
value={state.prefs.clickupScope ?? 'title_description'}
|
||||||
|
onChange={e => updatePref('clickupScope', e.target.value as any)}
|
||||||
|
className={styles.prefSelect}
|
||||||
|
>
|
||||||
|
<option value="titles">Nur Aufgabentitel</option>
|
||||||
|
<option value="title_description">Titel + Beschreibung</option>
|
||||||
|
<option value="with_comments">Titel + Beschreibung + Kommentare</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={styles.prefGroup}>
|
||||||
|
<label className={styles.prefLabelRow}>
|
||||||
|
Zeitfenster (Tage)
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={3650}
|
||||||
|
value={state.prefs.maxAgeDays ?? 90}
|
||||||
|
onChange={e => updatePref('maxAgeDays', parseInt(e.target.value, 10) || 0)}
|
||||||
|
className={styles.prefNumber}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<p className={styles.prefHint}>0 = kein Limit</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.stepNav}>
|
||||||
|
<button type="button" className={styles.navBack} onClick={() => setStep(1)}>
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
<button type="button" className={styles.navNext} onClick={() => setStep(3)}>
|
||||||
|
Weiter <FaArrowRight size={12} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ---- Step 3: Summary ---- */}
|
||||||
|
{state.step === 3 && (
|
||||||
|
<div className={styles.stepContent}>
|
||||||
|
<h3 className={styles.stepTitle}>Zusammenfassung</h3>
|
||||||
|
<div className={styles.summary}>
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>Anbieter</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{CONNECTOR_ICONS[state.connector!]}
|
||||||
|
{state.connector ? CONNECTOR_LABELS[state.connector] : '—'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>Wissensdatenbank</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{state.knowledgeEnabled ? '✓ Aktiv' : '✗ Nicht aktiv'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{state.knowledgeEnabled && (
|
||||||
|
<>
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>Anonymisierung</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{state.prefs.neutralizeBeforeEmbed ? 'Ja' : 'Nein'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{(state.connector === 'google' || state.connector === 'msft') && (
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>E-Mail-Tiefe</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{{ metadata: 'Nur Metadaten', snippet: 'Vorschautext', full: 'Volltext' }[
|
||||||
|
state.prefs.mailContentDepth ?? 'full'
|
||||||
|
] ?? state.prefs.mailContentDepth}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{state.connector === 'clickup' && (
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>Aufgaben-Inhalt</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{{
|
||||||
|
titles: 'Nur Titel',
|
||||||
|
title_description: 'Titel + Beschreibung',
|
||||||
|
with_comments: 'Titel + Beschreibung + Kommentare',
|
||||||
|
}[state.prefs.clickupScope ?? 'title_description'] ?? state.prefs.clickupScope}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={styles.summaryRow}>
|
||||||
|
<span className={styles.summaryKey}>Zeitfenster</span>
|
||||||
|
<span className={styles.summaryVal}>
|
||||||
|
{state.prefs.maxAgeDays ? `${state.prefs.maxAgeDays} Tage` : 'Unbegrenzt'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cost estimate — only shown when knowledge ingestion is enabled */}
|
||||||
|
{state.knowledgeEnabled && (() => {
|
||||||
|
const est = computeCostEstimate(state.connector, state.prefs);
|
||||||
|
if (!est) return null;
|
||||||
|
return (
|
||||||
|
<div className={styles.costHint}>
|
||||||
|
<FaInfoCircle className={styles.costHintIcon} />
|
||||||
|
<div>
|
||||||
|
<span className={styles.costHintTitle}>Geschätzte Kosten (erster Sync)</span>
|
||||||
|
<table className={styles.costTable}>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td className={styles.costLabel}>Embedding</td>
|
||||||
|
<td className={styles.costVal}>
|
||||||
|
{est.embeddingLow} – {est.embeddingHigh}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{est.neutralizationLow && (
|
||||||
|
<tr className={styles.costRowNeut}>
|
||||||
|
<td className={styles.costLabel}>Anonymisierung (Private LLM)</td>
|
||||||
|
<td className={styles.costVal}>
|
||||||
|
{est.neutralizationLow} – {est.neutralizationHigh}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{est.neutralizationLow && (
|
||||||
|
<span className={styles.costHintWarn}>
|
||||||
|
⚠ Anonymisierung ist der Hauptkostentreiber (CHF 0.01 pro LLM-Aufruf, on-premise).
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className={styles.costHintNote}>{est.note}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
|
||||||
|
<div className={styles.stepNav}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.navBack}
|
||||||
|
onClick={() => setStep(state.knowledgeEnabled ? 2 : 1)}
|
||||||
|
>
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={styles.navConnect}
|
||||||
|
onClick={handleConnect}
|
||||||
|
disabled={isConnecting}
|
||||||
|
>
|
||||||
|
{isConnecting ? 'Verbinden…' : `Mit ${state.connector ? CONNECTOR_LABELS[state.connector] : '…'} verbinden`}
|
||||||
|
{!isConnecting && <FaArrowRight size={12} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddConnectionWizard;
|
||||||
|
|
@ -708,6 +708,90 @@ export function useConnections() {
|
||||||
}
|
}
|
||||||
}, [connections, request]);
|
}, [connections, request]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generic wizard entry-point: create a connection of any supported type with
|
||||||
|
* optional knowledge consent + preferences, then immediately open the OAuth
|
||||||
|
* popup. The three individual `create*ConnectionAndAuth` methods are preserved
|
||||||
|
* for backward-compat but new wizard code should call this.
|
||||||
|
*/
|
||||||
|
const createConnectionAndAuth = async (
|
||||||
|
type: 'google' | 'msft' | 'clickup',
|
||||||
|
knowledgeIngestionEnabled: boolean,
|
||||||
|
knowledgePreferences?: import('../api/connectionApi').KnowledgePreferences | null,
|
||||||
|
): Promise<void> => {
|
||||||
|
if (isConnecting) return;
|
||||||
|
setIsConnecting(true);
|
||||||
|
try {
|
||||||
|
const newConnection = await createConnection({
|
||||||
|
type,
|
||||||
|
authority: type,
|
||||||
|
knowledgeIngestionEnabled,
|
||||||
|
knowledgePreferences: knowledgePreferences ?? null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const connectResponse = await connectServiceApi(request, newConnection.id);
|
||||||
|
if (!connectResponse.authUrl) {
|
||||||
|
throw new Error('No OAuth URL received from backend');
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiBaseUrl = getApiBaseUrl();
|
||||||
|
let authUrl = connectResponse.authUrl;
|
||||||
|
if (authUrl.startsWith('/')) authUrl = `${apiBaseUrl}${authUrl}`;
|
||||||
|
|
||||||
|
return await new Promise<void>((resolve, reject) => {
|
||||||
|
const popup = window.open(authUrl, `${type}-wizard`, 'width=500,height=600,scrollbars=yes,resizable=yes');
|
||||||
|
if (!popup) {
|
||||||
|
setIsConnecting(false);
|
||||||
|
reject(new Error('Popup was blocked. Please allow popups and try again.'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SUCCESS_TYPES = new Set([
|
||||||
|
'google_connection_success', 'msft_connection_success', 'clickup_connection_success',
|
||||||
|
'google_auth_success',
|
||||||
|
]);
|
||||||
|
const ERROR_TYPES = new Set([
|
||||||
|
'google_connection_error', 'msft_connection_error', 'clickup_connection_error',
|
||||||
|
]);
|
||||||
|
|
||||||
|
const checkClosed = setInterval(() => {
|
||||||
|
if (popup.closed) {
|
||||||
|
clearInterval(checkClosed);
|
||||||
|
window.removeEventListener('message', messageListener);
|
||||||
|
setIsConnecting(false);
|
||||||
|
fetchConnections();
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
const messageListener = (event: MessageEvent) => {
|
||||||
|
const apiUrl = new URL(apiBaseUrl);
|
||||||
|
if (event.origin !== apiUrl.origin) return;
|
||||||
|
|
||||||
|
if (SUCCESS_TYPES.has(event.data.type)) {
|
||||||
|
clearInterval(checkClosed);
|
||||||
|
window.removeEventListener('message', messageListener);
|
||||||
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
|
fetchConnections();
|
||||||
|
resolve();
|
||||||
|
} else if (ERROR_TYPES.has(event.data.type)) {
|
||||||
|
clearInterval(checkClosed);
|
||||||
|
window.removeEventListener('message', messageListener);
|
||||||
|
popup.close();
|
||||||
|
setIsConnecting(false);
|
||||||
|
reject(new Error(event.data.error || `${type} connection failed`));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('message', messageListener);
|
||||||
|
});
|
||||||
|
} catch (error: any) {
|
||||||
|
setIsConnecting(false);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
connections,
|
connections,
|
||||||
data: connections, // Alias for FormGenerator compatibility
|
data: connections, // Alias for FormGenerator compatibility
|
||||||
|
|
@ -726,6 +810,7 @@ export function useConnections() {
|
||||||
createClickupConnectionAndAuth,
|
createClickupConnectionAndAuth,
|
||||||
createInfomaniakConnection,
|
createInfomaniakConnection,
|
||||||
submitInfomaniakToken,
|
submitInfomaniakToken,
|
||||||
|
createConnectionAndAuth,
|
||||||
isLoading,
|
isLoading,
|
||||||
loading: isLoading, // Alias for FormGenerator compatibility
|
loading: isLoading, // Alias for FormGenerator compatibility
|
||||||
isConnecting,
|
isConnecting,
|
||||||
|
|
|
||||||
90
src/pages/basedata/ConnectionsPage.module.css
Normal file
90
src/pages/basedata/ConnectionsPage.module.css
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
/* ConnectionsPage — supplemental styles for sync banner */
|
||||||
|
|
||||||
|
.syncBanner {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.875rem 1rem 0.875rem 1.125rem;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
background: linear-gradient(135deg, #fffbeb, #fef3c7);
|
||||||
|
border: 1px solid #fcd34d;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||||
|
animation: slidein 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slidein {
|
||||||
|
from { opacity: 0; transform: translateY(-6px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncSpinner {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 3px;
|
||||||
|
color: #d97706;
|
||||||
|
font-size: 1rem;
|
||||||
|
animation: spin 1.4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncText {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncTitle {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
color: #92400e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncDetail {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: #78350f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncDismiss {
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #b45309;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncDismiss:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme */
|
||||||
|
:global(.dark-theme) .syncBanner {
|
||||||
|
background: rgba(251, 191, 36, 0.08);
|
||||||
|
border-color: rgba(251, 191, 36, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .syncTitle {
|
||||||
|
color: #fcd34d;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .syncDetail {
|
||||||
|
color: #fde68a;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .syncDismiss {
|
||||||
|
color: #fbbf24;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark-theme) .syncSpinner {
|
||||||
|
color: #fbbf24;
|
||||||
|
}
|
||||||
|
|
@ -5,17 +5,22 @@
|
||||||
* Follows the pattern established in AdminUsersPage/WorkflowsPage.
|
* Follows the pattern established in AdminUsersPage/WorkflowsPage.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useMemo, useEffect } from 'react';
|
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
||||||
import { useConnections, type Connection } from '../../hooks/useConnections';
|
import { useConnections, type Connection } from '../../hooks/useConnections';
|
||||||
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
|
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
|
||||||
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
|
||||||
import { FaSync, FaGoogle, FaMicrosoft, FaLink, FaRedo, FaShieldAlt, FaTasks, FaCloud, FaSyncAlt } from 'react-icons/fa';
|
import { FaSync, FaLink, FaRedo, FaShieldAlt, FaPlus, FaSpinner, FaTimes, FaSyncAlt, FaCloud } from 'react-icons/fa';
|
||||||
import { getApiBaseUrl } from '../../../config/config';
|
import { getApiBaseUrl } from '../../../config/config';
|
||||||
import styles from '../admin/Admin.module.css';
|
import styles from '../admin/Admin.module.css';
|
||||||
|
import bannerStyles from './ConnectionsPage.module.css';
|
||||||
|
import { AddConnectionWizard } from '../../components/AddConnectionWizard/AddConnectionWizard';
|
||||||
|
import type { ConnectorType } from '../../components/AddConnectionWizard/AddConnectionWizard';
|
||||||
|
import type { KnowledgePreferences } from '../../api/connectionApi';
|
||||||
import { useLanguage } from '../../providers/language/LanguageContext';
|
import { useLanguage } from '../../providers/language/LanguageContext';
|
||||||
import { resolveColumnTypes } from '../../utils/columnTypeResolver';
|
import { resolveColumnTypes } from '../../utils/columnTypeResolver';
|
||||||
|
|
||||||
|
const SYNC_BANNER_TTL_MS = 10 * 60 * 1000; // 10 minutes — conservative upper bound for bootstrap
|
||||||
|
|
||||||
export const ConnectionsPage: React.FC = () => {
|
export const ConnectionsPage: React.FC = () => {
|
||||||
const { t } = useLanguage();
|
const { t } = useLanguage();
|
||||||
|
|
||||||
|
|
@ -32,9 +37,7 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
updateOptimistically,
|
updateOptimistically,
|
||||||
deleteConnection,
|
deleteConnection,
|
||||||
handleInlineUpdate,
|
handleInlineUpdate,
|
||||||
createGoogleConnectionAndAuth,
|
createConnectionAndAuth,
|
||||||
createMicrosoftConnectionAndAuth,
|
|
||||||
createClickupConnectionAndAuth,
|
|
||||||
createInfomaniakConnection,
|
createInfomaniakConnection,
|
||||||
submitInfomaniakToken,
|
submitInfomaniakToken,
|
||||||
connectWithPopup,
|
connectWithPopup,
|
||||||
|
|
@ -48,6 +51,23 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
const [refreshingConnections, setRefreshingConnections] = useState<Set<string>>(new Set());
|
const [refreshingConnections, setRefreshingConnections] = useState<Set<string>>(new Set());
|
||||||
const [reconnectingConnections, setReconnectingConnections] = useState<Set<string>>(new Set());
|
const [reconnectingConnections, setReconnectingConnections] = useState<Set<string>>(new Set());
|
||||||
const [adminConsentPending, setAdminConsentPending] = useState(false);
|
const [adminConsentPending, setAdminConsentPending] = useState(false);
|
||||||
|
const [wizardOpen, setWizardOpen] = useState(false);
|
||||||
|
// Banner shown while knowledge bootstrap is running in the background
|
||||||
|
const [syncBanner, setSyncBanner] = useState<{
|
||||||
|
connector: string;
|
||||||
|
startedAt: number;
|
||||||
|
} | null>(null);
|
||||||
|
const syncBannerTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
const showSyncBanner = (connector: string) => {
|
||||||
|
if (syncBannerTimer.current) clearTimeout(syncBannerTimer.current);
|
||||||
|
setSyncBanner({ connector, startedAt: Date.now() });
|
||||||
|
syncBannerTimer.current = setTimeout(() => setSyncBanner(null), SYNC_BANNER_TTL_MS);
|
||||||
|
};
|
||||||
|
const dismissSyncBanner = () => {
|
||||||
|
if (syncBannerTimer.current) clearTimeout(syncBannerTimer.current);
|
||||||
|
setSyncBanner(null);
|
||||||
|
};
|
||||||
|
|
||||||
// Infomaniak PAT modal: holds the pending connectionId (created up-front so the
|
// Infomaniak PAT modal: holds the pending connectionId (created up-front so the
|
||||||
// user only commits if they actually paste a valid token; on cancel we delete it).
|
// user only commits if they actually paste a valid token; on cancel we delete it).
|
||||||
|
|
@ -201,35 +221,20 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Guards prevent double-trigger while the OAuth popup is open, which would
|
const handleWizardConnect = async (
|
||||||
// otherwise create additional orphan PENDING connections on every click.
|
type: ConnectorType,
|
||||||
const handleCreateGoogle = async () => {
|
knowledgeEnabled: boolean,
|
||||||
if (isConnecting) return;
|
knowledgePreferences: KnowledgePreferences | null,
|
||||||
|
) => {
|
||||||
try {
|
try {
|
||||||
await createGoogleConnectionAndAuth();
|
await createConnectionAndAuth(type, knowledgeEnabled, knowledgePreferences);
|
||||||
refetch();
|
refetch();
|
||||||
|
if (knowledgeEnabled) {
|
||||||
|
const LABELS: Record<ConnectorType, string> = { google: 'Google', msft: 'Microsoft 365', clickup: 'ClickUp' };
|
||||||
|
showSyncBanner(LABELS[type] ?? type);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error creating Google connection:', error);
|
console.error('Error creating connection via wizard:', error);
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateMicrosoft = async () => {
|
|
||||||
if (isConnecting) return;
|
|
||||||
try {
|
|
||||||
await createMicrosoftConnectionAndAuth();
|
|
||||||
refetch();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error creating Microsoft connection:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateClickup = async () => {
|
|
||||||
if (isConnecting) return;
|
|
||||||
try {
|
|
||||||
await createClickupConnectionAndAuth();
|
|
||||||
refetch();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error creating ClickUp connection:', error);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -356,28 +361,13 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
</button>
|
</button>
|
||||||
{canCreate && (
|
{canCreate && (
|
||||||
<>
|
<>
|
||||||
<button
|
|
||||||
className={styles.googleButton}
|
|
||||||
onClick={handleCreateGoogle}
|
|
||||||
disabled={isConnecting}
|
|
||||||
>
|
|
||||||
<FaGoogle /> Google
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={styles.primaryButton}
|
|
||||||
onClick={handleCreateMicrosoft}
|
|
||||||
disabled={isConnecting}
|
|
||||||
>
|
|
||||||
<FaMicrosoft /> Microsoft
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={styles.clickupButton}
|
className={styles.primaryButton}
|
||||||
onClick={handleCreateClickup}
|
onClick={() => setWizardOpen(true)}
|
||||||
disabled={isConnecting}
|
disabled={isConnecting}
|
||||||
title={t('ClickUp-Konto verbinden (OAuth oder Personal Token nach Anmeldung)')}
|
|
||||||
>
|
>
|
||||||
<FaTasks /> ClickUp
|
<FaPlus /> {t('Verbindung hinzufügen')}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -393,6 +383,32 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Sync-in-progress banner */}
|
||||||
|
{syncBanner && (
|
||||||
|
<div className={bannerStyles.syncBanner}>
|
||||||
|
<FaSpinner className={bannerStyles.syncSpinner} />
|
||||||
|
<div className={bannerStyles.syncText}>
|
||||||
|
<span className={bannerStyles.syncTitle}>
|
||||||
|
{t('Wissensdatenbank wird synchronisiert')}
|
||||||
|
</span>
|
||||||
|
<span className={bannerStyles.syncDetail}>
|
||||||
|
{t(
|
||||||
|
'Inhalte aus {connector} werden im Hintergrund indexiert. Das kann je nach Datenmenge einige Minuten dauern. Die Wissensdatenbank steht danach vollständig zur Verfügung.',
|
||||||
|
{ connector: syncBanner.connector },
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={bannerStyles.syncDismiss}
|
||||||
|
onClick={dismissSyncBanner}
|
||||||
|
aria-label={t('Hinweis schließen')}
|
||||||
|
>
|
||||||
|
<FaTimes />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className={styles.tableContainer}>
|
<div className={styles.tableContainer}>
|
||||||
<FormGeneratorTable
|
<FormGeneratorTable
|
||||||
data={connections}
|
data={connections}
|
||||||
|
|
@ -623,6 +639,13 @@ export const ConnectionsPage: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<AddConnectionWizard
|
||||||
|
open={wizardOpen}
|
||||||
|
onClose={() => setWizardOpen(false)}
|
||||||
|
onConnect={handleWizardConnect}
|
||||||
|
isConnecting={isConnecting}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue