picklist ksfolders

src/components/DynamicPicker.vue

@@ -60,6 +60,63 @@
                 </template>
             </MultiSelect>
 
+            <!-- KS Folders MultiSelect -->
+            <MultiSelect
+                v-else-if="dataSource === 'ksFolders'"
+                v-model="selectedValue"
+                :options="safeOptions"
+                optionLabel="name"
+                :filter="true"
+                :placeholder="placeholder || 'Select Folders'"
+                :disabled="disabled"
+                :loading="loading"
+                :virtualScrollerOptions="{ itemSize: 50 }"
+                class="w-full ks-folders-multiselect"
+                panelClass="ks-folders-panel"
+                @change="onSelectionChange"
+            >
+                <template #option="slotProps">
+                    <div class="flex align-items-center justify-between p-3 hover:bg-gray-50">
+                        <div class="flex align-items-center flex-1">
+                            <i class="pi pi-folder mr-3 text-violet-600"></i>
+                            <div class="flex-1">
+                                <div class="font-medium text-sm">{{ slotProps.option.name }}</div>
+                                <small class="text-muted">
+                                    {{ slotProps.option.itemCount }} items
+                                    <span v-if="slotProps.option.subfolderCount > 0">
+                                        • {{ slotProps.option.subfolderCount }} subfolders
+                                    </span>
+                                </small>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                
+                <template #value="slotProps">
+                    <div v-if="!slotProps.value || slotProps.value.length === 0" class="p-multiselect-placeholder">
+                        {{ placeholder || 'Select Folders' }}
+                    </div>
+                    <div v-else class="p-multiselect-label">
+                        {{ slotProps.value.length }} folder{{ slotProps.value.length > 1 ? 's' : '' }} selected
+                    </div>
+                </template>
+            </MultiSelect>
+            
+            <!-- Custom Clickable Chips for ksFolders -->
+            <div v-if="dataSource === 'ksFolders' && selectedValue && selectedValue.length > 0" class="ks-folders-chips-container">
+                <div 
+                    v-for="folder in selectedValue" 
+                    :key="folder.id || folder.path"
+                    class="ks-folder-chip"
+                    @click="removeFolder(folder)"
+                    :title="`Click to remove ${folder.name}`"
+                >
+                    <i class="pi pi-folder mr-2"></i>
+                    <span class="folder-name">{{ folder.name }}</span>
+                    <i class="pi pi-times ml-2 remove-icon"></i>
+                </div>
+            </div>
+
             <!-- Dropdown per selezione singola -->
             <Dropdown
                 v-else-if="multiple === false"
@@ -74,9 +131,9 @@
                 @change="onSelectionChange"
             />
 
-            <!-- MultiSelect generico per altri tipi -->
+            <!-- MultiSelect generico per altri tipi (esclusi videoGroups, ksDocuments, ksFolders) -->
             <MultiSelect
-                v-else-if="safeOptions && safeOptions.length > 0"
+                v-else-if="dataSource !== 'videoGroups' && dataSource !== 'ksDocuments' && dataSource !== 'ksFolders'"
                 v-model="selectedValue"
                 :options="safeOptions"
                 optionLabel="name"
@@ -186,6 +243,20 @@ const safeOptions = computed(() => {
     return Array.isArray(props.options) ? props.options : [];
 });
 
+// Funzione per rimuovere una folder dalla selezione
+const removeFolder = (folderToRemove) => {
+    if (!selectedValue.value || !Array.isArray(selectedValue.value)) return;
+    
+    const newValue = selectedValue.value.filter(folder => {
+        const currentPath = folder.path || folder.id || folder;
+        const removePathKey = folderToRemove.path || folderToRemove.id || folderToRemove;
+        return currentPath !== removePathKey;
+    });
+    
+    selectedValue.value = newValue;
+    emit('change', newValue);
+};
+
 const getFileIcon = (document) => {
     if (!document) return 'pi pi-file';
 
@@ -228,7 +299,7 @@ const onSelectionChange = (event) => {
 <style scoped>
 .input-wrapper {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 0.5em;
     margin-top: 10px;
 }
@@ -236,12 +307,78 @@ const onSelectionChange = (event) => {
 .text-muted {
     color: #6c757d;
 }
+
+/* Custom Clickable Chips Container */
+.ks-folders-chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    min-height: 40px;
+}
+
+/* Custom Folder Chip */
+.ks-folder-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    background: linear-gradient(135deg, #a100ff 0%, #7b00cc 100%);
+    color: white;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(161, 0, 255, 0.3);
+    user-select: none;
+}
+
+.ks-folder-chip:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(161, 0, 255, 0.4);
+    background: linear-gradient(135deg, #8a00db 0%, #6600a8 100%);
+}
+
+.ks-folder-chip:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(161, 0, 255, 0.35);
+}
+
+.ks-folder-chip .pi-folder {
+    font-size: 0.875rem;
+}
+
+.ks-folder-chip .folder-name {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ks-folder-chip .remove-icon {
+    font-size: 0.75rem;
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.ks-folder-chip:hover .remove-icon {
+    opacity: 1;
+}
+
+/* Hide default chips display for ksFolders */
+.ks-folders-multiselect :deep(.p-multiselect-token) {
+    display: none;
+}
 </style>
 
 <style>
 /* Personalizzazione delle panel dei MultiSelect per migliorare la visualizzazione */
 .ks-documents-panel .p-multiselect-panel,
 .video-groups-panel .p-multiselect-panel,
+.ks-folders-panel .p-multiselect-panel,
 .generic-multiselect-panel .p-multiselect-panel {
     min-width: 350px;
     max-width: 500px;
@@ -249,12 +386,14 @@ const onSelectionChange = (event) => {
 
 .ks-documents-panel .p-multiselect-items,
 .video-groups-panel .p-multiselect-items,
+.ks-folders-panel .p-multiselect-items,
 .generic-multiselect-panel .p-multiselect-items {
     max-height: 300px;
 }
 
 .ks-documents-panel .p-multiselect-item,
 .video-groups-panel .p-multiselect-item,
+.ks-folders-panel .p-multiselect-item,
 .generic-multiselect-panel .p-multiselect-item {
     padding: 0.75rem;
     border-bottom: 1px solid #e9ecef;
@@ -265,12 +404,14 @@ const onSelectionChange = (event) => {
 
 .ks-documents-panel .p-multiselect-item:last-child,
 .video-groups-panel .p-multiselect-item:last-child,
+.ks-folders-panel .p-multiselect-item:last-child,
 .generic-multiselect-panel .p-multiselect-item:last-child {
     border-bottom: none;
 }
 
 .ks-documents-panel .p-multiselect-item:hover,
 .video-groups-panel .p-multiselect-item:hover,
+.ks-folders-panel .p-multiselect-item:hover,
 .generic-multiselect-panel .p-multiselect-item:hover {
     background-color: #f8f9fa;
 }
@@ -285,4 +426,29 @@ const onSelectionChange = (event) => {
     font-size: 1.2rem;
     min-width: 1.5rem;
 }
+
+/* Stili per le folder chips */
+.ks-folders-panel .p-multiselect-chip {
+    background-color: #a100ff15;
+    color: #a100ff;
+    padding: 0.25rem 0.5rem;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.ks-folders-panel .p-multiselect-chip .pi-folder {
+    font-size: 0.875rem;
+}
+
+.ks-folders-panel .p-multiselect-token {
+    background-color: #a100ff15;
+    color: #a100ff;
+    border-radius: 6px;
+}
+
+.ks-folders-panel .p-multiselect-token-icon {
+    color: #a100ff;
+}
 </style>

src/components/ExecutionInputTable.vue

@@ -17,9 +17,15 @@ const emit = defineEmits(['download-file']);
 const filteredInputs = computed(() => {
     const filtered = {};
     for (const [key, value] of Object.entries(props.inputs)) {
-        if (!(key.includes('input_multiselect') && key.endsWith('_id'))) {
+        // Escludi le chiavi _id per multiselect
-            filtered[key] = value;
+        if (key.includes('input_multiselect') && key.endsWith('_id')) {
+            continue;
         }
+        // Escludi selectedFolders_name e selectedFolders_id
+        if (key === 'selectedFolders_name' || key === 'selectedFolders_id') {
+            continue;
+        }
+        filtered[key] = value;
     }
     return filtered;
 });

src/views/pages/ScenarioExec.vue

@@ -55,6 +55,8 @@ const uploadUrlOther = computed(() => `${uploadUrlBase}/uploadListFiles/${folder
 const loadingOptionsFor = reactive({});
 const ksDocuments = ref([]);
 const videoGroups = ref([]);
+const ksFolders = ref([]);
+const folderToItemsMap = ref({});
 
 // ============= File Output State =============
 const fileType = ref('');
@@ -135,6 +137,122 @@ const loadVideoGroups = async () => {
     videoGroups.value = await Promise.all(videoGroups.value);
 };
 
+// Estrae tutte le folder/subfolder uniche dai documenti e video
+const extractFoldersFromItems = (items) => {
+    const folderMap = {};
+    const folderSet = new Set();
+
+    items.forEach((item) => {
+        // Filtra solo gli items che hanno il campo ingestionStatusV2
+        if (!item.ingestionStatusV2) {
+            return;
+        }
+        
+        const path = item.ingestionInfo?.metadata?.ksKnowledgePath;
+        
+        // Gestisci item nella root (senza path o con path vuoto o "/")
+        if (!path || path === '/' || path.trim() === '') {
+            const rootPath = '/';
+            folderSet.add(rootPath);
+            
+            if (!folderMap[rootPath]) {
+                folderMap[rootPath] = [];
+            }
+            
+            folderMap[rootPath].push({
+                id: item.id,
+                type: item.fileName ? 'document' : 'video',
+                name: item.fileName || item.name
+            });
+            return;
+        }
+
+        // Rimuovi il leading slash se presente
+        const cleanPath = path.startsWith('/') ? path.substring(1) : path;
+        if (!cleanPath) {
+            const rootPath = '/';
+            folderSet.add(rootPath);
+            
+            if (!folderMap[rootPath]) {
+                folderMap[rootPath] = [];
+            }
+            
+            folderMap[rootPath].push({
+                id: item.id,
+                type: item.fileName ? 'document' : 'video',
+                name: item.fileName || item.name
+            });
+            return;
+        }
+
+        // Dividi il path in parti
+        const parts = cleanPath.split('/');
+        
+        // Crea tutte le combinazioni di folder/subfolder
+        let currentPath = '';
+        parts.forEach((part, index) => {
+            currentPath = index === 0 ? part : `${currentPath}/${part}`;
+            const fullPath = `/${currentPath}`;
+            
+            folderSet.add(fullPath);
+            
+            if (!folderMap[fullPath]) {
+                folderMap[fullPath] = [];
+            }
+            
+            if (fullPath === path) {
+                folderMap[fullPath].push({
+                    id: item.id,
+                    type: item.fileName ? 'document' : 'video',
+                    name: item.fileName || item.name
+                });
+            }
+        });
+    });
+
+    return { folders: Array.from(folderSet).sort(), folderMap };
+};
+
+const loadKsFolders = async () => {
+    try {
+        const docsResponse = await KSDocumentService.getKSDocuments();
+        const documents = docsResponse.data || [];
+        
+        const allItems = [...documents, ...videoGroups.value];
+        const { folders, folderMap } = extractFoldersFromItems(allItems);
+        
+        // Calcola il numero di subfolder per ogni folder
+        const subfolderCounts = {};
+        folders.forEach((folderPath) => {
+            const subfolderCount = folders.filter((otherPath) => {
+                if (otherPath === folderPath) return false;
+                
+                if (folderPath === '/') {
+                    return otherPath !== '/' && otherPath.substring(1).indexOf('/') === -1;
+                }
+                
+                const relativePath = otherPath.substring(folderPath.length);
+                return relativePath.startsWith('/') && relativePath.substring(1).split('/').length === 1;
+            }).length;
+            subfolderCounts[folderPath] = subfolderCount;
+        });
+        
+        ksFolders.value = folders.map((path) => ({
+            id: path,
+            name: path === '/' ? '/ (Root)' : path,
+            path: path,
+            itemCount: folderMap[path]?.length || 0,
+            subfolderCount: subfolderCounts[path] || 0
+        }));
+        
+        folderToItemsMap.value = folderMap;
+        
+        console.log(`Loaded ${ksFolders.value.length} folders with items:`, folderToItemsMap.value);
+    } catch (error) {
+        console.error('Error loading KS folders:', error);
+    }
+};
+
 const loadOptionsForScenario = async () => {
     if (!scenario.value.inputs) return;
 
@@ -160,6 +278,13 @@ const loadOptionsForScenario = async () => {
                     break;
                 }
 
+                case 'ksFolders':
+                    if (videoGroups.value.length === 0) {
+                        await loadVideoGroups();
+                    }
+                    await loadKsFolders();
+                    break;
+
                 default:
                     console.warn(`Unknown dataSource: ${dataSource}`);
             }
@@ -179,6 +304,8 @@ const getOptionsForInput = (input) => {
             return videoGroups.value;
         case 'ksDocuments':
             return ksDocuments.value;
+        case 'ksFolders':
+            return ksFolders.value;
         default:
             return [];
     }
@@ -195,8 +322,37 @@ const getInputComponent = (type) => {
     return components[type] || InputText;
 };
 
-const onDynamicPickerChange = (inputName, value) => {
+const onDynamicPickerChange = (inputName, value, dataSource) => {
+    console.log(`Dynamic picker changed for ${inputName}:`, value);
+    
+    // Gestione speciale per ksFolders: espande automaticamente le subfolder
+    if (dataSource === 'ksFolders' && Array.isArray(value)) {
+        const expandedSelection = new Set();
+        
+        // Aggiungi tutte le folder selezionate dall'utente
+        value.forEach(folder => {
+            const folderPath = folder.path || folder.id || folder;
+            expandedSelection.add(folderPath);
+            
+            // Trova e aggiungi tutte le subfolder ricorsivamente
+            ksFolders.value.forEach(subfolder => {
+                const subfolderPath = subfolder.path;
+                if (subfolderPath !== folderPath && subfolderPath.startsWith(folderPath + '/')) {
+                    expandedSelection.add(subfolderPath);
+                }
+            });
+        });
+        
+        // Converti il Set in un array di oggetti folder completi
+        const expandedFolders = Array.from(expandedSelection).map(path => 
+            ksFolders.value.find(f => f.path === path)
+        ).filter(f => f !== undefined);
+        
+        console.log(`Expanded selection from ${value.length} to ${expandedFolders.length} folders`);
+        formData.value[inputName] = expandedFolders;
+    } else {
         formData.value[inputName] = value;
+    }
 };
 
 // ============= File Upload Handlers =============
@@ -265,8 +421,32 @@ const processFormData = () => {
                 const selectedItems = processedData[input.name];
 
                 if (Array.isArray(selectedItems) && selectedItems.length > 0) {
+                    // Elaborazione speciale per ksFolders
+                    if (input.dataSource === 'ksFolders') {
+                        const allItemIds = [];
+                        const allItemNames = [];
+                        
+                        selectedItems.forEach((folder) => {
+                            const folderPath = folder.path || folder.id || folder;
+                            const items = folderToItemsMap.value[folderPath] || [];
+                            
+                            items.forEach((item) => {
+                                allItemIds.push(item.id);
+                                allItemNames.push(item.name);
+                            });
+                        });
+                        
+                        processedData[`${input.name}_id`] = JSON.stringify(allItemIds);
+                        processedData[`${input.name}_name`] = JSON.stringify(allItemNames);
+                        processedData[`${input.name}_folders`] = JSON.stringify(selectedItems.map((item) => item.path || item.id || item));
+                        
+                        console.log(`Folder selection - Total items: ${allItemIds.length}`, allItemIds);
+                    } else {
+                        // Elaborazione standard per videoGroups e ksDocuments
                         processedData[`${input.name}_id`] = JSON.stringify(selectedItems.map((item) => item.id || item));
                         processedData[`${input.name}_name`] = JSON.stringify(selectedItems.map((item) => item.name || item.fileName || item));
+                    }
+
                     delete processedData[input.name];
                 }
             }
@@ -432,7 +612,7 @@ const chatDisabled = () => {
                                         :loading="loadingOptionsFor[input.dataSource] || false"
                                         :show-status="input.dataSource === 'ksDocuments'"
                                         no-margin
-                                        @change="onDynamicPickerChange(input.name, $event)"
+                                        @change="onDynamicPickerChange(input.name, $event, input.dataSource)"
                                     />
                                 </div>