From 9e74daeaa5d0911f7bd8bc1b4e60172f979a57b5 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Mon, 16 Mar 2026 13:13:43 +0100
Subject: [PATCH] fixed source access tools

---
 src/pages/views/workspace/WorkspaceInput.tsx | 81 ++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/src/pages/views/workspace/WorkspaceInput.tsx b/src/pages/views/workspace/WorkspaceInput.tsx
index 6c07092..5088b23 100644
--- a/src/pages/views/workspace/WorkspaceInput.tsx
+++ b/src/pages/views/workspace/WorkspaceInput.tsx
@@ -106,6 +106,7 @@ export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({
     onSend(trimmed, allFileIds, attachedDataSourceIds);
     setPrompt('');
     setShowAutocomplete(false);
+    setShowSourcePicker(false);
     setAttachedFileIds([]);
     setAttachedDataSourceIds([]);
   }, [prompt, isProcessing, _extractFileRefs, attachedFileIds, attachedDataSourceIds, onSend]);
@@ -161,6 +162,14 @@ export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({
     setAttachedDataSourceIds(prev => prev.filter(id => id !== dsId));
   }, []);
 
+  const [showSourcePicker, setShowSourcePicker] = useState(false);
+
+  const _toggleDataSource = useCallback((dsId: string) => {
+    setAttachedDataSourceIds(prev =>
+      prev.includes(dsId) ? prev.filter(id => id !== dsId) : [...prev, dsId],
+    );
+  }, []);
+
   const _stopRecognition = useCallback(() => {
     if (recognitionRef.current) {
       try { recognitionRef.current.stop(); } catch { /* ignore */ }
@@ -441,6 +450,78 @@ export const WorkspaceInput: React.FC<WorkspaceInputProps> = ({
           {uploading ? '...' : '+'}
         </button>
 
+        {dataSources.length > 0 && (
+          <div style={{ position: 'relative' }}>
+            <button
+              onClick={() => setShowSourcePicker(prev => !prev)}
+              disabled={isProcessing}
+              title="Datenquellen anhängen"
+              style={{
+                width: 40, height: 40, borderRadius: 8, border: '1px solid var(--border-color, #ddd)',
+                background: attachedDataSourceIds.length > 0 ? '#e8f5e9' : 'var(--secondary-bg, #f5f5f5)',
+                color: attachedDataSourceIds.length > 0 ? '#2e7d32' : '#666',
+                cursor: isProcessing ? 'not-allowed' : 'pointer',
+                fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                opacity: isProcessing ? 0.5 : 1,
+                position: 'relative',
+              }}
+            >
+              🔗
+              {attachedDataSourceIds.length > 0 && (
+                <span style={{
+                  position: 'absolute', top: -4, right: -4,
+                  background: '#2e7d32', color: '#fff', fontSize: 9, fontWeight: 700,
+                  borderRadius: '50%', width: 16, height: 16,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {attachedDataSourceIds.length}
+                </span>
+              )}
+            </button>
+            {showSourcePicker && (
+              <div style={{
+                position: 'absolute', bottom: '100%', left: 0, marginBottom: 4,
+                background: '#fff', border: '1px solid var(--border-color, #e0e0e0)',
+                borderRadius: 8, boxShadow: '0 -2px 8px rgba(0,0,0,0.1)', zIndex: 20,
+                minWidth: 240, maxHeight: 260, overflowY: 'auto',
+              }}>
+                <div style={{ padding: '8px 12px', fontSize: 11, color: '#999', fontWeight: 600, borderBottom: '1px solid #f0f0f0' }}>
+                  Active Sources auswählen
+                </div>
+                {dataSources.map(ds => {
+                  const isSelected = attachedDataSourceIds.includes(ds.id);
+                  return (
+                    <div
+                      key={ds.id}
+                      onClick={() => _toggleDataSource(ds.id)}
+                      style={{
+                        padding: '8px 12px', cursor: 'pointer', fontSize: 13,
+                        display: 'flex', alignItems: 'center', gap: 8,
+                        background: isSelected ? '#e8f5e9' : 'transparent',
+                      }}
+                      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = '#f5f5f5'; }}
+                      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = ''; }}
+                    >
+                      <span style={{
+                        width: 16, height: 16, borderRadius: 3,
+                        border: isSelected ? '2px solid #2e7d32' : '2px solid #ccc',
+                        background: isSelected ? '#2e7d32' : 'transparent',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        color: '#fff', fontSize: 10, fontWeight: 700, flexShrink: 0,
+                      }}>
+                        {isSelected ? '✓' : ''}
+                      </span>
+                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {ds.label || ds.path || ds.id}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
         {onProvidersChange && (
           <ProviderMultiSelect
             selectedProviders={selectedProviders}