From 5306ff697c5b7204c3b210f8e0953239ee14e24e Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 14:44:37 +0200 Subject: [PATCH 01/20] feat(chat): add topics --- .../Marketplace/ApplicationCard.tsx | 87 ++++++++++--------- .../ApplicationDetails/ApplicationHeader.tsx | 11 ++- .../components/Marketplace/ApplicationTag.tsx | 28 ------ .../Marketplace/ApplicationTopic.tsx | 17 ++++ apps/chat/src/store/models/models.epics.ts | 17 +++- apps/chat/src/styles/globals.css | 12 +++ apps/chat/src/types/models.ts | 6 ++ 7 files changed, 99 insertions(+), 79 deletions(-) delete mode 100644 apps/chat/src/components/Marketplace/ApplicationTag.tsx create mode 100644 apps/chat/src/components/Marketplace/ApplicationTopic.tsx diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx index 6548bcebe2..07d8eceded 100644 --- a/apps/chat/src/components/Marketplace/ApplicationCard.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationCard.tsx @@ -28,7 +28,7 @@ import { MarketplaceTabs } from '@/src/constants/marketplace'; import { ModelIcon } from '@/src/components/Chatbar/ModelIcon'; import ContextMenu from '@/src/components/Common/ContextMenu'; import { EntityMarkdownDescription } from '@/src/components/Common/MarkdownDescription'; -import { ApplicationTag } from '@/src/components/Marketplace/ApplicationTag'; +import { ApplicationTopic } from '@/src/components/Marketplace/ApplicationTopic'; import UnpublishIcon from '@/public/images/icons/unpublish.svg'; import { PublishActions } from '@epam/ai-dial-shared'; @@ -38,17 +38,21 @@ const SMALL_ICON_SIZE = 56; export const Divider = () =>
; -export const CardFooter = () => { +interface CardFooterProps { + entity: DialAIEntityModel; +} + +export const CardFooter = ({ entity }: CardFooterProps) => { return ( -
- +
+ {/* Capabilities: Conversation - + */}
- - - + {entity.topics.map((topic) => ( + + ))}
); @@ -150,51 +154,48 @@ export const ApplicationCard = ({
onClick(entity)} className={classNames( - 'relative cursor-pointer rounded border border-primary p-3 hover:border-hover', + 'relative cursor-pointer divide-y divide-secondary rounded border border-primary p-3 hover:border-hover', { '!border-accent-primary': selected, }, )} data-qa="application" > -
- e.stopPropagation()} - size={18} - className="stroke-primary group-hover:stroke-accent-primary" - /> - } - className="m-0" - /> -
- -
-
- +
+
+ e.stopPropagation()} + size={18} + className="stroke-primary group-hover:stroke-accent-primary" + /> + } + className="m-0" + />
-
-

- {entity.name} -

- - {entity.description ?? ''} - + +
+
+ +
+
+

+ {entity.name} +

+ + {entity.description ?? ''} + +
- {/*{!isMobile && (*/} - {/* <>*/} - {/* */} - {/* */} - {/* */} - {/*)}*/} + {!isMobile && }
); }; diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx index 4f7fd828ed..1abc049d6d 100644 --- a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx @@ -1,6 +1,7 @@ import { DialAIEntityModel } from '@/src/types/models'; import { ModelIcon } from '../../Chatbar/ModelIcon'; +import { ApplicationTopic } from '../ApplicationTopic'; interface Props { entity: DialAIEntityModel; @@ -50,10 +51,12 @@ export const ApplicationDetailsHeader = ({ entity, isMobileView }: Props) => { />
-
- {/* {application.tags.map((tag) => ( - - ))} */} +
+
+ {entity.topics.map((topic) => ( + + ))} +

{ - return ( - - {tag} - - ); -}; diff --git a/apps/chat/src/components/Marketplace/ApplicationTopic.tsx b/apps/chat/src/components/Marketplace/ApplicationTopic.tsx new file mode 100644 index 0000000000..239042f87e --- /dev/null +++ b/apps/chat/src/components/Marketplace/ApplicationTopic.tsx @@ -0,0 +1,17 @@ +interface Props { + topic: string; +} + +export const ApplicationTopic = ({ topic }: Props) => { + return ( + + {topic} + + ); +}; diff --git a/apps/chat/src/store/models/models.epics.ts b/apps/chat/src/store/models/models.epics.ts index a30f82158d..44147c1863 100644 --- a/apps/chat/src/store/models/models.epics.ts +++ b/apps/chat/src/store/models/models.epics.ts @@ -25,7 +25,10 @@ import { DataService } from '@/src/utils/app/data/data-service'; import { getRootId } from '@/src/utils/app/id'; import { FeatureType } from '@/src/types/common'; -import { DialAIEntityModel } from '@/src/types/models'; +import { + BackendDialAIEntityModel, + DialAIEntityModel, +} from '@/src/types/models'; import { AppEpic } from '@/src/types/store'; import { PublicationActions } from '../publication/publication.reducers'; @@ -104,19 +107,25 @@ const getModelsEpic: AppEpic = (action$, state$) => } return from(resp.json()); }), - switchMap((response: DialAIEntityModel[]) => { + map((backendModels: BackendDialAIEntityModel[]) => + backendModels.map((model) => ({ + ...model, + topics: model.description_keywords, + })), + ), + switchMap((models) => { const isOverlay = SettingsSelectors.selectIsOverlay(state$.value); const isHeaderFeatureEnabled = SettingsSelectors.isFeatureEnabled( state$.value, Feature.Header, ); - if (response.length === 0 && isOverlay && !isHeaderFeatureEnabled) { + if (models.length === 0 && isOverlay && !isHeaderFeatureEnabled) { signOut(); } return concat( - of(ModelsActions.getModelsSuccess({ models: response })), + of(ModelsActions.getModelsSuccess({ models })), of( PublicationActions.uploadAllPublishedWithMeItems({ featureType: FeatureType.Application, diff --git a/apps/chat/src/styles/globals.css b/apps/chat/src/styles/globals.css index d5f18cefcc..861b8dd716 100644 --- a/apps/chat/src/styles/globals.css +++ b/apps/chat/src/styles/globals.css @@ -147,6 +147,18 @@ pre:has(div.codeblock) { } } +@layer components { + .topic-dev { + @apply bg-topic-dev; + } + .topic-sql { + @apply bg-topic-sql; + } + .topic-data { + @apply bg-topic-data; + } +} + @layer components { .sidebar-left, .context-menu-chat { diff --git a/apps/chat/src/types/models.ts b/apps/chat/src/types/models.ts index 8bff851362..5bf682dca3 100644 --- a/apps/chat/src/types/models.ts +++ b/apps/chat/src/types/models.ts @@ -77,6 +77,12 @@ export interface DialAIEntityModel extends Omit { type: EntityType; reference: string; isDefault: boolean; + topics: string[]; +} + +export interface BackendDialAIEntityModel + extends Omit { + description_keywords: string[]; } export interface DialAIEntityAddon extends Omit { From 21ef2b1309dde251a4fae56064022de2a1158d77 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 14:45:43 +0200 Subject: [PATCH 02/20] remove Divider component --- apps/chat/src/components/Marketplace/ApplicationCard.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx index 07d8eceded..80f02484ff 100644 --- a/apps/chat/src/components/Marketplace/ApplicationCard.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationCard.tsx @@ -36,8 +36,6 @@ import { PublishActions } from '@epam/ai-dial-shared'; const DESKTOP_ICON_SIZE = 96; const SMALL_ICON_SIZE = 56; -export const Divider = () =>
; - interface CardFooterProps { entity: DialAIEntityModel; } From f9ddab52a4b8f58dfece8b6da05b4cf89b559bad Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 14:47:45 +0200 Subject: [PATCH 03/20] remove css layer --- apps/chat/src/styles/globals.css | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/apps/chat/src/styles/globals.css b/apps/chat/src/styles/globals.css index 861b8dd716..d5f18cefcc 100644 --- a/apps/chat/src/styles/globals.css +++ b/apps/chat/src/styles/globals.css @@ -147,18 +147,6 @@ pre:has(div.codeblock) { } } -@layer components { - .topic-dev { - @apply bg-topic-dev; - } - .topic-sql { - @apply bg-topic-sql; - } - .topic-data { - @apply bg-topic-data; - } -} - @layer components { .sidebar-left, .context-menu-chat { From e44dcfb6e486cad466d3b54a19bdee83c1e837ef Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 15:03:15 +0200 Subject: [PATCH 04/20] fix docker build --- apps/chat/src/components/Chat/AssistantSubModelSelector.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx b/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx index 5c54c63a27..ddae7dd4fb 100644 --- a/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx +++ b/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx @@ -48,6 +48,7 @@ export const AssistantSubModelSelector = ({ type: EntityType.Model, id: assistantModelId, reference: assistantModelId, + topics: [], } } getItemLabel={(model: DialAIEntityModel) => From c9d607ca527610c1e8a90fd1cf89bd86e00434c6 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 15:13:40 +0200 Subject: [PATCH 05/20] mock topics --- apps/chat/src/components/Common/ApplicationDialog.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/chat/src/components/Common/ApplicationDialog.tsx b/apps/chat/src/components/Common/ApplicationDialog.tsx index f3f91509a0..21c48fc980 100644 --- a/apps/chat/src/components/Common/ApplicationDialog.tsx +++ b/apps/chat/src/components/Common/ApplicationDialog.tsx @@ -287,6 +287,7 @@ const ApplicationDialogView: React.FC = ({ type: EntityType.Application, isDefault: false, folderId: '', + topics: [], }; if ( From a4e7df1e592ae065c1ad250d21793c82e2d33152 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 15:20:33 +0200 Subject: [PATCH 06/20] refactor --- apps/chat/src/store/models/models.epics.ts | 17 ++++------------- apps/chat/src/types/models.ts | 6 +----- .../src/utils/server/get-sorted-entities.ts | 1 + 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/apps/chat/src/store/models/models.epics.ts b/apps/chat/src/store/models/models.epics.ts index 44147c1863..a30f82158d 100644 --- a/apps/chat/src/store/models/models.epics.ts +++ b/apps/chat/src/store/models/models.epics.ts @@ -25,10 +25,7 @@ import { DataService } from '@/src/utils/app/data/data-service'; import { getRootId } from '@/src/utils/app/id'; import { FeatureType } from '@/src/types/common'; -import { - BackendDialAIEntityModel, - DialAIEntityModel, -} from '@/src/types/models'; +import { DialAIEntityModel } from '@/src/types/models'; import { AppEpic } from '@/src/types/store'; import { PublicationActions } from '../publication/publication.reducers'; @@ -107,25 +104,19 @@ const getModelsEpic: AppEpic = (action$, state$) => } return from(resp.json()); }), - map((backendModels: BackendDialAIEntityModel[]) => - backendModels.map((model) => ({ - ...model, - topics: model.description_keywords, - })), - ), - switchMap((models) => { + switchMap((response: DialAIEntityModel[]) => { const isOverlay = SettingsSelectors.selectIsOverlay(state$.value); const isHeaderFeatureEnabled = SettingsSelectors.isFeatureEnabled( state$.value, Feature.Header, ); - if (models.length === 0 && isOverlay && !isHeaderFeatureEnabled) { + if (response.length === 0 && isOverlay && !isHeaderFeatureEnabled) { signOut(); } return concat( - of(ModelsActions.getModelsSuccess({ models })), + of(ModelsActions.getModelsSuccess({ models: response })), of( PublicationActions.uploadAllPublishedWithMeItems({ featureType: FeatureType.Application, diff --git a/apps/chat/src/types/models.ts b/apps/chat/src/types/models.ts index 5bf682dca3..ec031ec60a 100644 --- a/apps/chat/src/types/models.ts +++ b/apps/chat/src/types/models.ts @@ -40,6 +40,7 @@ export interface CoreAIEntity { allow_resume?: boolean; }; tokenizer_model?: TokenizerModel; + description_keywords: string[]; } export interface DialAIEntityFeatures { @@ -80,11 +81,6 @@ export interface DialAIEntityModel extends Omit { topics: string[]; } -export interface BackendDialAIEntityModel - extends Omit { - description_keywords: string[]; -} - export interface DialAIEntityAddon extends Omit { type: EntityType.Addon; } diff --git a/apps/chat/src/utils/server/get-sorted-entities.ts b/apps/chat/src/utils/server/get-sorted-entities.ts index 404b2aa9fb..5890f62a85 100644 --- a/apps/chat/src/utils/server/get-sorted-entities.ts +++ b/apps/chat/src/utils/server/get-sorted-entities.ts @@ -156,6 +156,7 @@ export const getSortedEntities = async (token: JWT | null) => { iconUrl: entity.icon_url, type: entity.object, selectedAddons: entity.addons, + topics: entity.description_keywords, limits: maxRequestTokens && maxResponseTokens && maxTotalTokens ? { From 8f7916223d7276c37790d28f924d78c6265220db Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 15:44:47 +0200 Subject: [PATCH 07/20] make field options, register topicColors field --- apps/chat/src/components/Chat/AssistantSubModelSelector.tsx | 1 - apps/chat/src/components/Marketplace/ApplicationCard.tsx | 2 +- .../Marketplace/ApplicationDetails/ApplicationHeader.tsx | 2 +- apps/chat/src/pages/api/themes/styles.ts | 1 + apps/chat/src/types/models.ts | 4 ++-- apps/chat/src/types/themes.ts | 1 + 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx b/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx index ddae7dd4fb..5c54c63a27 100644 --- a/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx +++ b/apps/chat/src/components/Chat/AssistantSubModelSelector.tsx @@ -48,7 +48,6 @@ export const AssistantSubModelSelector = ({ type: EntityType.Model, id: assistantModelId, reference: assistantModelId, - topics: [], } } getItemLabel={(model: DialAIEntityModel) => diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx index 80f02484ff..84c5075ffc 100644 --- a/apps/chat/src/components/Marketplace/ApplicationCard.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationCard.tsx @@ -48,7 +48,7 @@ export const CardFooter = ({ entity }: CardFooterProps) => { */}
- {entity.topics.map((topic) => ( + {entity.topics?.map((topic) => ( ))}
diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx index 1abc049d6d..2dcb44bf43 100644 --- a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx @@ -53,7 +53,7 @@ export const ApplicationDetailsHeader = ({ entity, isMobileView }: Props) => {
- {entity.topics.map((topic) => ( + {entity.topics?.map((topic) => ( ))}
diff --git a/apps/chat/src/pages/api/themes/styles.ts b/apps/chat/src/pages/api/themes/styles.ts index 8385e9d3bb..bd7359c7b9 100644 --- a/apps/chat/src/pages/api/themes/styles.ts +++ b/apps/chat/src/pages/api/themes/styles.ts @@ -126,6 +126,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { ...json.themes.map((theme) => wrapCssContents(`.${theme.id}`, [ generateColorsCssVariables(theme.colors), + generateColorsCssVariables(theme.topicColors), generateUrlsCssVariables({ 'app-logo': theme['app-logo'] }), generateFontCssVariables({ 'theme-font': theme['font-family'], diff --git a/apps/chat/src/types/models.ts b/apps/chat/src/types/models.ts index ec031ec60a..d5ddca500f 100644 --- a/apps/chat/src/types/models.ts +++ b/apps/chat/src/types/models.ts @@ -40,7 +40,7 @@ export interface CoreAIEntity { allow_resume?: boolean; }; tokenizer_model?: TokenizerModel; - description_keywords: string[]; + description_keywords?: string[]; } export interface DialAIEntityFeatures { @@ -78,7 +78,7 @@ export interface DialAIEntityModel extends Omit { type: EntityType; reference: string; isDefault: boolean; - topics: string[]; + topics?: string[]; } export interface DialAIEntityAddon extends Omit { diff --git a/apps/chat/src/types/themes.ts b/apps/chat/src/types/themes.ts index 3087dfe6d8..908f442ae9 100644 --- a/apps/chat/src/types/themes.ts +++ b/apps/chat/src/types/themes.ts @@ -1,6 +1,7 @@ export interface Theme { displayName: string; colors: Record; + topicColors: Record; 'app-logo': string; 'font-family'?: string; 'font-codeblock'?: string; From e96f414729941f1fcefb6f8d1a870a14bb18d31f Mon Sep 17 00:00:00 2001 From: Aliaksandr Kezik Date: Wed, 2 Oct 2024 15:47:59 +0200 Subject: [PATCH 08/20] getTopicColors --- apps/chat/src/components/Marketplace/ApplicationTopic.tsx | 7 +++---- apps/chat/src/utils/app/style-helpers.ts | 5 +++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/chat/src/components/Marketplace/ApplicationTopic.tsx b/apps/chat/src/components/Marketplace/ApplicationTopic.tsx index 239042f87e..0cff97af66 100644 --- a/apps/chat/src/components/Marketplace/ApplicationTopic.tsx +++ b/apps/chat/src/components/Marketplace/ApplicationTopic.tsx @@ -1,3 +1,5 @@ +import { getTopicColors } from '@/src/utils/app/style-helpers'; + interface Props { topic: string; } @@ -6,10 +8,7 @@ export const ApplicationTopic = ({ topic }: Props) => { return ( {topic} diff --git a/apps/chat/src/utils/app/style-helpers.ts b/apps/chat/src/utils/app/style-helpers.ts index 87f6ec773b..2a1a64f32d 100644 --- a/apps/chat/src/utils/app/style-helpers.ts +++ b/apps/chat/src/utils/app/style-helpers.ts @@ -3,3 +3,8 @@ import { FocusEvent } from 'react'; export const onBlur = (e: FocusEvent) => { e.target.classList.add('submitted', 'input-invalid'); }; + +export const getTopicColors = (topic: string) => ({ + backgroundColor: `var(--bg-topic-${topic.toLowerCase()}, var(--bg-accent-primary-alpha))`, + borderColor: `var(--stroke-topic-${topic.toLowerCase()}, var(--stroke-accent-primary))`, +}); From 4995c4c834ddabaa75930ebcd2bae9c63e561321 Mon Sep 17 00:00:00 2001 From: Alexander <98586297+Alexander-Kezik@users.noreply.github.com> Date: Wed, 2 Oct 2024 16:32:19 +0200 Subject: [PATCH 09/20] feat(chat): add topics and capabilities fields to custom apps (Issue #2086) (#2215) --- .../components/Common/ApplicationDialog.tsx | 112 ++++- .../components/Common/DropdownSelector.tsx | 159 +++++++ apps/chat/src/types/common.ts | 8 + apps/chat/src/utils/app/style-helpers.ts | 15 +- package-lock.json | 418 +++++++++++++++--- package.json | 1 + 6 files changed, 631 insertions(+), 82 deletions(-) create mode 100644 apps/chat/src/components/Common/DropdownSelector.tsx diff --git a/apps/chat/src/components/Common/ApplicationDialog.tsx b/apps/chat/src/components/Common/ApplicationDialog.tsx index 21c48fc980..d03f9c9bd8 100644 --- a/apps/chat/src/components/Common/ApplicationDialog.tsx +++ b/apps/chat/src/components/Common/ApplicationDialog.tsx @@ -13,10 +13,11 @@ import classNames from 'classnames'; import { notAllowedSymbols } from '@/src/utils/app/file'; import { getFolderIdFromEntityId } from '@/src/utils/app/folders'; +import { getTopicColors } from '@/src/utils/app/style-helpers'; import { ApiUtils } from '@/src/utils/server/api'; import { CustomApplicationModel } from '@/src/types/applications'; -import { EntityType } from '@/src/types/common'; +import { DropdownSelectorOption, EntityType } from '@/src/types/common'; import { ModalState } from '@/src/types/modal'; import { DialAIEntityFeatures } from '@/src/types/models'; import { SharingType } from '@/src/types/share'; @@ -36,6 +37,7 @@ import Modal from '@/src/components/Common/Modal'; import { PublishModal } from '../Chat/Publish/PublishWizard'; import { CustomLogoSelect } from '../Settings/CustomLogoSelect'; import { ConfirmDialog } from './ConfirmDialog'; +import { DropdownSelector } from './DropdownSelector'; import { MultipleComboBox } from './MultipleComboBox'; import { Spinner } from './Spinner'; import Tooltip from './Tooltip'; @@ -48,6 +50,8 @@ interface FormData { description: string; version: string; iconUrl: string; + topics: string[]; + // capabilities: string[]; inputAttachmentTypes: string[]; maxInputAttachments: number | undefined; completionUrl: string; @@ -115,6 +119,8 @@ const ApplicationDialogView: React.FC = ({ const [featuresInput, setFeaturesInput] = useState( safeStringify(selectedApplication?.features), ); + const [topics, setTopics] = useState([]); + // const [capabilities, setCapabilities] = useState([]); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isPublishing, setIsPublishing] = useState(false); const [maxInputAttachmentsValue, setMaxInputAttachmentsValue] = useState( @@ -219,6 +225,8 @@ const ApplicationDialogView: React.FC = ({ 'inputAttachmentTypes', selectedApplication.inputAttachmentTypes, ); + setTopics(selectedApplication.topics ?? []); + setValue('topics', selectedApplication.topics ?? []); } if (selectedApplication.iconUrl) { setLocalLogoFile(selectedApplication.iconUrl); @@ -229,6 +237,10 @@ const ApplicationDialogView: React.FC = ({ setValue('inputAttachmentTypes', []); setLocalLogoFile(undefined); setValue('iconUrl', ''); + setTopics([]); + setValue('topics', []); + // setCapabilities([]); + // setValue('capabilities', []); } }, [isEdit, selectedApplication, setValue]); @@ -265,6 +277,24 @@ const ApplicationDialogView: React.FC = ({ } }; + const handleChangeTopics = useCallback( + (option: readonly DropdownSelectorOption[]) => { + const values = option.map((option) => option.value); + setTopics(values); + setValue('topics', values); + }, + [setValue], + ); + + // const handleChangeCapabilities = useCallback( + // (option: readonly DropdownSelectorOption[]) => { + // const values = option.map((option) => option.value); + // setCapabilities(values); + // setValue('capabilities', values); + // }, + // [setValue], + // ); + const handleChangeHandlerAttachments = ( event: React.ChangeEvent, ) => { @@ -287,7 +317,8 @@ const ApplicationDialogView: React.FC = ({ type: EntityType.Application, isDefault: false, folderId: '', - topics: [], + topics, + // capabilities, }; if ( @@ -433,6 +464,74 @@ const ApplicationDialogView: React.FC = ({ )}
+
+ + ( + + getTopicColors(value, { + defaultBgColor: 'var(--bg-layer-4)', + }).backgroundColor + } + onGetOptionBorderColor={(value) => + getTopicColors(value, { + defaultBorderColor: 'var(--bg-layer-4)', + }).borderColor + } + options={[ + { value: 'dev', label: 'dev' }, + { value: 'dev1', label: 'dev1' }, + ]} + /> + )} + /> + {!localLogoFile && errors.iconUrl && ( + + {errors.iconUrl.message} + + )} +
+ + {/*
+ + ( + + )} + /> + {!localLogoFile && errors.iconUrl && ( + + {errors.iconUrl.message} + + )} +
*/} +