From 5d857a5112d3aaad55eabf4641f6d3cb0825e2a9 Mon Sep 17 00:00:00 2001 From: pablonyx Date: Mon, 3 Mar 2025 22:17:28 -0800 Subject: [PATCH] k --- web/package-lock.json | 433 ++++++++++++++++++ web/package.json | 1 + .../sets/DocumentSetCreationForm.tsx | 340 +++++--------- web/src/app/chat/input/ChatInputBar.tsx | 11 +- web/src/components/ConnectorMultiSelect.tsx | 220 +++++++++ .../components/NonSelectableConnectors.tsx | 52 +++ .../admin/connectors/ConnectorTitle.tsx | 14 +- web/src/components/ui/command.tsx | 153 +++++++ 8 files changed, 983 insertions(+), 241 deletions(-) create mode 100644 web/src/components/ConnectorMultiSelect.tsx create mode 100644 web/src/components/NonSelectableConnectors.tsx create mode 100644 web/src/components/ui/command.tsx diff --git a/web/package-lock.json b/web/package-lock.json index 069bcebd3..5c2862f74 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -44,6 +44,7 @@ "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "cmdk": "^1.0.0", "date-fns": "^3.6.0", "favicon-fetch": "^1.0.0", "formik": "^2.2.9", @@ -9313,6 +9314,438 @@ "node": ">=6" } }, + "node_modules/cmdk": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz", + "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-dialog": "1.0.5", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/cmdk/node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz", + "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/cmdk/node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "license": "MIT", + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", diff --git a/web/package.json b/web/package.json index 080764eef..b67ada8a4 100644 --- a/web/package.json +++ b/web/package.json @@ -47,6 +47,7 @@ "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "cmdk": "^1.0.0", "date-fns": "^3.6.0", "favicon-fetch": "^1.0.0", "formik": "^2.2.9", diff --git a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx index 1542a5b3c..db2601fcf 100644 --- a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx +++ b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { ArrayHelpers, FieldArray, Form, Formik } from "formik"; +import { Form, Formik } from "formik"; import * as Yup from "yup"; import { PopupSpec } from "@/components/admin/connectors/Popup"; import { @@ -10,13 +10,14 @@ import { } from "./lib"; import { ConnectorStatus, DocumentSet, UserGroup, UserRole } from "@/lib/types"; import { TextFormField } from "@/components/admin/connectors/Field"; -import { ConnectorTitle } from "@/components/admin/connectors/ConnectorTitle"; import { Separator } from "@/components/ui/separator"; import { Button } from "@/components/ui/button"; import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled"; import { IsPublicGroupSelector } from "@/components/IsPublicGroupSelector"; import React, { useEffect, useState } from "react"; import { useUser } from "@/components/user/UserProvider"; +import { ConnectorMultiSelect } from "@/components/ConnectorMultiSelect"; +import { NonSelectableConnectors } from "@/components/NonSelectableConnectors"; interface SetCreationPopupProps { ccPairs: ConnectorStatus[]; @@ -45,7 +46,7 @@ export const DocumentSetCreationForm = ({ }, [existingDocumentSet?.is_public]); return ( -
+
initialValues={{ name: existingDocumentSet?.name ?? "", @@ -104,243 +105,122 @@ export const DocumentSetCreationForm = ({ }} > {(props) => { + // Filter visible cc pairs for curator role + const visibleCcPairs = + user?.role === UserRole.CURATOR + ? localCcPairs.filter( + (ccPair) => + ccPair.access_type === "public" || + (ccPair.groups.length > 0 && + props.values.groups.every((group) => + ccPair.groups.includes(group) + )) + ) + : localCcPairs; + + // Filter non-visible cc pairs for curator role + const nonVisibleCcPairs = + user?.role === UserRole.CURATOR + ? localCcPairs.filter( + (ccPair) => + !(ccPair.access_type === "public") && + (ccPair.groups.length === 0 || + !props.values.groups.every((group) => + ccPair.groups.includes(group) + )) + ) + : []; + + // Deselect filtered out cc pairs + if (user?.role === UserRole.CURATOR) { + const visibleCcPairIds = visibleCcPairs.map( + (ccPair) => ccPair.cc_pair_id + ); + props.values.cc_pair_ids = props.values.cc_pair_ids.filter((id) => + visibleCcPairIds.includes(id) + ); + } + return ( -
- - - - {isPaidEnterpriseFeaturesEnabled && ( - +
+ + - )} - - - {user?.role === UserRole.CURATOR ? ( - <> -
-

- These are the connectors available to{" "} - {userGroups && userGroups.length > 1 - ? "the selected group" - : "the group you curate"} - : -

- -

- All documents indexed by these selected connectors will be - a part of this document set. -

- { - // Filter visible cc pairs - const visibleCcPairs = localCcPairs.filter( - (ccPair) => - ccPair.access_type === "public" || - (ccPair.groups.length > 0 && - props.values.groups.every((group) => - ccPair.groups.includes(group) - )) - ); - - // Deselect filtered out cc pairs - const visibleCcPairIds = visibleCcPairs.map( - (ccPair) => ccPair.cc_pair_id - ); - props.values.cc_pair_ids = - props.values.cc_pair_ids.filter((id) => - visibleCcPairIds.includes(id) - ); - - return ( -
- {visibleCcPairs.map((ccPair) => { - const ind = props.values.cc_pair_ids.indexOf( - ccPair.cc_pair_id - ); - const isSelected = ind !== -1; - return ( -
{ - if (isSelected) { - arrayHelpers.remove(ind); - } else { - arrayHelpers.push(ccPair.cc_pair_id); - } - }} - > -
- -
-
- ); - })} -
- ); - }} - /> -
- -
- { - // Filter non-visible cc pairs - const nonVisibleCcPairs = localCcPairs.filter( - (ccPair) => - !(ccPair.access_type === "public") && - (ccPair.groups.length === 0 || - !props.values.groups.every((group) => - ccPair.groups.includes(group) - )) - ); - - return nonVisibleCcPairs.length > 0 ? ( - <> - -

- These connectors are not available to the{" "} - {userGroups && userGroups.length > 1 - ? `group${ - props.values.groups.length > 1 ? "s" : "" - } you have selected` - : "group you curate"} - : -

-

- Only connectors that are directly assigned to the - group you are trying to add the document set to - will be available. -

-
- {nonVisibleCcPairs.map((ccPair) => ( -
-
- -
-
- ))} -
- - ) : null; - }} - /> -
- - ) : ( -
-

- Pick your connectors: -

-

- All documents indexed by the selected connectors will be a - part of this document set. -

- ( -
- {ccPairs.map((ccPair) => { - const ind = props.values.cc_pair_ids.indexOf( - ccPair.cc_pair_id - ); - const isSelected = ind !== -1; - return ( -
{ - if (isSelected) { - arrayHelpers.remove(ind); - } else { - arrayHelpers.push(ccPair.cc_pair_id); - } - }} - > -
- -
-
- ); - })} -
- )} + {isPaidEnterpriseFeaturesEnabled && ( + -
- )} + )} +
-
+ + +
+ {user?.role === UserRole.CURATOR ? ( + <> + 1 + ? "the selected group" + : "the group you curate" + }`} + connectors={visibleCcPairs} + selectedIds={props.values.cc_pair_ids} + onChange={(selectedIds) => { + props.setFieldValue("cc_pair_ids", selectedIds); + }} + placeholder="Search for connectors..." + /> + + 1 + ? `group${ + props.values.groups.length > 1 ? "s" : "" + } you have selected` + : "group you curate" + }`} + description="Only connectors that are directly assigned to the group you are trying to add the document set to will be available." + /> + + ) : ( + { + props.setFieldValue("cc_pair_ids", selectedIds); + }} + placeholder="Search for connectors..." + /> + )} +
+ +
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx index 358362274..2366e30e2 100644 --- a/web/src/app/chat/input/ChatInputBar.tsx +++ b/web/src/app/chat/input/ChatInputBar.tsx @@ -403,7 +403,8 @@ export function ChatInputBar({ setTabbingIconIndex((tabbingIconIndex) => Math.min( tabbingIconIndex + 1, - showPrompts ? filteredPrompts.length : assistantTagOptions.length + // showPrompts ? filteredPrompts.length : + assistantTagOptions.length ) ); } else if (e.key === "ArrowUp") { @@ -436,8 +437,8 @@ export function ChatInputBar({ +
+ + {/* Dropdown for unselected connectors */} + {open && ( +
+ {filteredUnselectedConnectors.length === 0 ? ( +
+ {searchQuery + ? "No matching connectors found" + : "No more connectors available"} +
+ ) : ( +
+ {filteredUnselectedConnectors.map((connector) => ( +
selectConnector(connector.cc_pair_id)} + > +
+ +
+
+ +
+
+ ))} +
+ )} +
+ )} +
+ + {/* Selected connectors display */} + {selectedConnectors.length > 0 ? ( +
+
+ Selected connectors: +
+
+ {selectedConnectors.map((connector) => ( +
+
+
+ +
+
+ +
+ ))} +
+
+ ) : ( +
+ No connectors selected. Search and select connectors above. +
+ )} + +

+ All documents indexed by the selected connectors will be part of this + document set. +

+ + +
+ ); +}; diff --git a/web/src/components/NonSelectableConnectors.tsx b/web/src/components/NonSelectableConnectors.tsx new file mode 100644 index 000000000..bbe1a14a0 --- /dev/null +++ b/web/src/components/NonSelectableConnectors.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { ConnectorStatus } from "@/lib/types"; +import { ConnectorTitle } from "@/components/admin/connectors/ConnectorTitle"; +import { Label } from "@/components/ui/label"; +import { LockIcon } from "lucide-react"; + +interface NonSelectableConnectorsProps { + connectors: ConnectorStatus[]; + title: string; + description: string; +} + +export const NonSelectableConnectors = ({ + connectors, + title, + description, +}: NonSelectableConnectorsProps) => { + if (connectors.length === 0) { + return null; + } + + return ( +
+ +

{description}

+
+
+ + Unavailable connectors: +
+
+ {connectors.map((connector) => ( +
+
+ +
+
+ ))} +
+
+
+ ); +}; diff --git a/web/src/components/admin/connectors/ConnectorTitle.tsx b/web/src/components/admin/connectors/ConnectorTitle.tsx index 2b947644a..525f7f226 100644 --- a/web/src/components/admin/connectors/ConnectorTitle.tsx +++ b/web/src/components/admin/connectors/ConnectorTitle.tsx @@ -20,6 +20,7 @@ interface ConnectorTitleProps { owner?: string; isLink?: boolean; showMetadata?: boolean; + className?: string; } export const ConnectorTitle = ({ @@ -30,6 +31,7 @@ export const ConnectorTitle = ({ isPublic = true, isLink = true, showMetadata = true, + className = "", }: ConnectorTitleProps) => { const sourceMetadata = getSourceMetadata(connector.source); @@ -88,17 +90,17 @@ export const ConnectorTitle = ({ ); } - const mainSectionClassName = "text-blue-500 dark:text-blue-100 flex w-fit"; + const mainSectionClassName = `text-blue-500 dark:text-blue-100 flex w-fit ${className}`; const mainDisplay = ( <> - {sourceMetadata.icon({ size: 20 })} -
+ {sourceMetadata.icon({ size: 16 })} +
{ccPairName || sourceMetadata.displayName}
); return ( -
+
{isLink ? ( {mainDisplay}
)} {showMetadata && additionalMetadata.size > 0 && ( -
+
{Array.from(additionalMetadata.entries()).map(([key, value]) => { return ( -
+
{key}: {value}
); diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx new file mode 100644 index 000000000..c0fce4d3b --- /dev/null +++ b/web/src/components/ui/command.tsx @@ -0,0 +1,153 @@ +"use client"; + +import * as React from "react"; +import { type DialogProps } from "@radix-ui/react-dialog"; +import { Command as CommandPrimitive } from "cmdk"; +import { Search } from "lucide-react"; + +import { cn } from "@/lib/utils"; +import { Dialog, DialogContent } from "@/components/ui/dialog"; + +const Command = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Command.displayName = CommandPrimitive.displayName; + +const CommandDialog = ({ children, ...props }: DialogProps) => { + return ( + + + + {children} + + + + ); +}; + +const CommandInput = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
+ + +
+)); + +CommandInput.displayName = CommandPrimitive.Input.displayName; + +const CommandList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); + +CommandList.displayName = CommandPrimitive.List.displayName; + +const CommandEmpty = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>((props, ref) => ( + +)); + +CommandEmpty.displayName = CommandPrimitive.Empty.displayName; + +const CommandGroup = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); + +CommandGroup.displayName = CommandPrimitive.Group.displayName; + +const CommandSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +CommandSeparator.displayName = CommandPrimitive.Separator.displayName; + +const CommandItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); + +CommandItem.displayName = CommandPrimitive.Item.displayName; + +const CommandShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ); +}; +CommandShortcut.displayName = "CommandShortcut"; + +export { + Command, + CommandDialog, + CommandInput, + CommandList, + CommandEmpty, + CommandGroup, + CommandItem, + CommandShortcut, + CommandSeparator, +};