From 35ca07c419c7d92e45f5115c0ff592c3a27db386 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 14:20:33 +0400 Subject: [PATCH 1/7] fix: integrations page design --- apps/ui/src/Route.tsx | 8 +- .../AgentForm/components/CopyScript.tsx | 4 +- .../src/pages/Integrations/Integrations.tsx | 141 ++++++++++++++---- .../src/pages/Navigation/MainNavigation.tsx | 1 + .../pages/Voice/VoiceView/VoiceView.tsx | 124 ++++++++------- apps/ui/src/routes/ChatRouteLayout.tsx | 2 +- 6 files changed, 184 insertions(+), 96 deletions(-) diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx index 1cf10c525..b22505f77 100644 --- a/apps/ui/src/Route.tsx +++ b/apps/ui/src/Route.tsx @@ -258,12 +258,8 @@ const Route = () => { /> - } - key={document.location.href} - > - } key={document.location.href} /> + } key={document.location.href}> + {/* } key={document.location.href} /> */} } diff --git a/apps/ui/src/pages/Agents/AgentForm/components/CopyScript.tsx b/apps/ui/src/pages/Agents/AgentForm/components/CopyScript.tsx index 626b65d66..797caaed7 100644 --- a/apps/ui/src/pages/Agents/AgentForm/components/CopyScript.tsx +++ b/apps/ui/src/pages/Agents/AgentForm/components/CopyScript.tsx @@ -71,7 +71,7 @@ const CopyScript = () => { openLinkTab(import.meta.env.REACT_APP_MAIN_API_DOCS)}> @@ -79,7 +79,7 @@ const CopyScript = () => { openLinkTab(import.meta.env.REACT_APP_PR_API_DOCS)}> diff --git a/apps/ui/src/pages/Integrations/Integrations.tsx b/apps/ui/src/pages/Integrations/Integrations.tsx index 317a459cb..0eac0ea48 100644 --- a/apps/ui/src/pages/Integrations/Integrations.tsx +++ b/apps/ui/src/pages/Integrations/Integrations.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import Toolkit from 'pages/Toolkit' import Voices from 'plugins/contact/pages/Voice' @@ -12,6 +12,25 @@ import { StyledTabListWrapper, StyledTabRootWrapper } from 'styles/tabStyles.css import { useGetAccountModule } from 'utils/useGetAccountModule' import { useLocation, useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' +import { StyledAppContainer } from 'components/Layout/LayoutStyle' +import { + StyledChatWrapper, + StyledContainer, + StyledDivider, + StyledHorizontalDivider, + StyledLeftColumn, + StyledMainWrapper, + StyledRightColumn, +} from 'routes/ChatRouteLayout' +import { useToolsService } from 'services/tool/useToolsService' +import ListHeader from 'routes/components/ListHeader' +import ToolCard from 'pages/Toolkit/components/ToolCard' +import MiniToolCard from 'components/ChatCards/MiniToolCard' +import { toolLogos } from 'pages/Toolkit/constants' +import { useVoicesService } from 'plugins/contact/services/voice/useVoicesService' +import { voiceLogos } from 'plugins/contact/pages/Voice/constants' +import ToolView from 'pages/Toolkit/ToolView' +import VoiceView from 'plugins/contact/pages/Voice/VoiceView' const Integrations = () => { const { getIntegrationModules } = useGetAccountModule() @@ -25,45 +44,101 @@ const Integrations = () => { const navigate = useNavigate() const location = useLocation() const urlParams = new URLSearchParams(location.search) - const tabQuery = urlParams.get('tab') + const toolQuery = urlParams.get('tool') || '' + const voiceQuery = urlParams.get('voice') || '' - const defaultActiveTab = () => { - if (!isToolkit) return 1 - - if (tabQuery === 'toolkit') return 0 - if (tabQuery === 'voice') return 1 - } - - const [activeTab, setActiveTab] = useState(defaultActiveTab || 0) - const handleTabClick = (tabId: number, tabName: string) => { + const [activeTab, setActiveTab] = useState(0) + const handleTabClick = (tabId: number) => { setActiveTab(tabId) - navigate(`/integrations?tab=${tabName}`) } const { t } = useTranslation() + const { data: tools } = useToolsService() + + const { data: voiceTools } = useVoicesService() + + useEffect(() => { + navigate(`/integrations?tool=${tools?.[0]?.slug}`) + }, [tools]) + return ( - - {isVoice && isToolkit && ( - - - handleTabClick(0, 'toolkit')} disabled={!isToolkit}> - {t('toolkit')} - - handleTabClick(1, 'voice')} disabled={!isVoice}> - {t('voices')} - - - - )} - - - - {isToolkit && } - {isVoice && } - - - + <> + + + + + + + {tools?.map((tool: any, index: number) => { + const filteredLogos = toolLogos.filter( + (toolLogo: any) => toolLogo.toolName === tool.name, + ) + + const logoSrc = filteredLogos?.[0]?.logoSrc || '' + + return ( + navigate(`/integrations?tool=${tool.slug}`)} + name={tool.name} + logo={logoSrc} + picked={toolQuery === tool.slug} + /> + ) + })} + + + + + + {voiceTools?.map((voice: any, index: number) => { + const filteredLogos = voiceLogos.filter( + (toolLogo: any) => toolLogo.voiceName === voice.name, + ) + + const logoSrc = filteredLogos?.[0]?.logoSrc || '' + + return ( + navigate(`/integrations?voice=${voice.slug}`)} + name={voice.name} + logo={logoSrc} + picked={voiceQuery === voice.slug} + /> + ) + })} + + + + + + + handleTabClick(0)}>{t('How it works')} + handleTabClick(1)}>{t('settings')} + + + + + + {toolQuery && } + + {voiceQuery && } + + + {toolQuery && } + {voiceQuery && } + + + + + + + + + + ) } diff --git a/apps/ui/src/pages/Navigation/MainNavigation.tsx b/apps/ui/src/pages/Navigation/MainNavigation.tsx index 4ecb65d75..30297a985 100644 --- a/apps/ui/src/pages/Navigation/MainNavigation.tsx +++ b/apps/ui/src/pages/Navigation/MainNavigation.tsx @@ -202,6 +202,7 @@ const MainNavigation = ({ user }: { user: any }) => { onClick={() => onHandleClick('/integrations')} > + {includes(active, 'integrations') && } )} diff --git a/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx b/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx index 4cc072acb..bbaa8fb0b 100644 --- a/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx +++ b/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx @@ -23,7 +23,15 @@ import TypographyPrimary from 'components/Typography/Primary' import { ButtonPrimary } from 'components/Button/Button' import { useVoiceView } from './useVoiceView' -const VoiceView = ({ voiceSlug }: { voiceSlug?: string }) => { +const VoiceView = ({ + voiceSlug, + hideInfo, + hideForm, +}: { + voiceSlug?: string + hideInfo?: boolean + hideForm?: boolean +}) => { const { t } = useTranslation() const { voice, formik, handleSubmit, isLoading } = useVoiceView({ voiceSlug: voiceSlug, @@ -60,61 +68,69 @@ const VoiceView = ({ voiceSlug }: { voiceSlug?: string }) => { )} - {/* */} - - - - - - - - - - - - {fields?.map((field: any, index: number) => { - return ( - + {/* */} + + - ) - })} - - {voiceSlug && fields?.length > 0 && ( - - { - await handleSubmit(formik?.values) - closeModal('toolkit-modal') - }} - disabled={isLoading} - size={Button.sizes?.SMALL} - > - {isLoading ? : t('save')} - - + + + + + + + + )} + + {!hideForm && ( + <> + + {fields?.map((field: any, index: number) => { + return ( + + ) + })} + + + {voiceSlug && fields?.length > 0 && ( + + { + await handleSubmit(formik?.values) + closeModal('toolkit-modal') + }} + disabled={isLoading} + size={Button.sizes?.SMALL} + > + {isLoading ? : t('save')} + + + )} + )} diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index 7c9a8a426..aac39289b 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -487,7 +487,7 @@ export const StyledLeftColumn = styled.div<{ opacity: 0; `} ` -const StyledRightColumn = styled.div<{ isHidden: boolean }>` +export const StyledRightColumn = styled.div<{ isHidden?: boolean }>` backdrop-filter: blur(100px); overflow-y: auto; From 71beaf4c005eba4555970827f125c56bbbaddc62 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 14:20:52 +0400 Subject: [PATCH 2/7] fix: integration form design --- .../src/pages/Integrations/Integrations.tsx | 1 - .../src/pages/Toolkit/ToolView/ToolView.tsx | 151 +++++++++--------- .../pages/Voice/VoiceView/VoiceView.tsx | 64 ++------ 3 files changed, 90 insertions(+), 126 deletions(-) diff --git a/apps/ui/src/pages/Integrations/Integrations.tsx b/apps/ui/src/pages/Integrations/Integrations.tsx index 0eac0ea48..d71cee386 100644 --- a/apps/ui/src/pages/Integrations/Integrations.tsx +++ b/apps/ui/src/pages/Integrations/Integrations.tsx @@ -123,7 +123,6 @@ const Integrations = () => { {toolQuery && } - {voiceQuery && } diff --git a/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx b/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx index 27a8eeff6..4876a7713 100644 --- a/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx +++ b/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx @@ -15,7 +15,7 @@ import { toolLogos } from '../constants' import FormikTextField from 'components/TextFieldFormik' import { useToolView } from './useToolView' import { FormikProvider } from 'formik' -import { StyledButtonWrapper } from 'pages/Agents/AgentForm/CreateAgentForm' +// import { StyledButtonWrapper } from 'pages/Agents/AgentForm/CreateAgentForm' import BackButton from 'components/BackButton' import { useModal } from 'hooks' import TypographySecondary from 'components/Typography/Secondary' @@ -67,72 +67,71 @@ const ToolView = ({ )} - - - {!hideInfo && ( - <> - - - - - - - + {!hideInfo && ( + <> + + + + + + + + + + + + )} + + {!hideForm && ( + + {fields?.map((field: any, index: number) => { + return ( + - - - - )} - - {!hideForm && ( - - {fields?.map((field: any, index: number) => { - return ( - - ) - })} - - )} - - {!hideForm && toolSlug && fields?.length > 0 && ( - - { - await handleSubmit(formik?.values) - closeModal('toolkit-modal') - }} - disabled={isLoading} - size={Button.sizes?.SMALL} - > - {isLoading ? : t('save')} - - - )} - - + ) + })} + + )} + + {!hideForm && toolSlug && fields?.length > 0 && ( + + { + await handleSubmit(formik?.values) + closeModal('toolkit-modal') + }} + disabled={isLoading} + size={Button.sizes?.MEDIUM} + > + {isLoading ? : t('save')} + + + )} + ) @@ -140,9 +139,11 @@ const ToolView = ({ export default ToolView -const StyledInnerWrapper = styled.div` +export const StyledInnerWrapper = styled.div` padding: 0 20px; + height: 100%; + display: flex; flex-direction: column; align-items: center; @@ -150,19 +151,19 @@ const StyledInnerWrapper = styled.div` gap: 5px; ` -const StyledImg = styled.img` +export const StyledImg = styled.img` width: 48px; height: 48px; border-radius: 10px; ` -const StyledTextWrapper = styled.div` +export const StyledTextWrapper = styled.div` display: flex; gap: 4px; align-items: center; margin-bottom: 10px; ` -const StyledMainTextWrapper = styled.div` +export const StyledMainTextWrapper = styled.div` /* text-align: center; */ display: flex; flex-direction: column; @@ -174,14 +175,20 @@ const StyledMainTextWrapper = styled.div` max-width: 400px; ` -const StyledFieldsWrapper = styled.div` +export const StyledFieldsWrapper = styled.div` margin-top: 20px; width: 100%; - max-width: 600px; + display: flex; flex-direction: column; gap: 15px; + + height: 100%; + overflow: auto; + + padding: 0 10px; ` -const StyledModalButton = styled.div` +export const StyledButtonWrapper = styled.div` margin-left: auto; + margin-top: auto; ` diff --git a/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx b/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx index bbaa8fb0b..e3c5bdcc7 100644 --- a/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx +++ b/apps/ui/src/plugins/contact/pages/Voice/VoiceView/VoiceView.tsx @@ -15,13 +15,20 @@ import styled from 'styled-components' import FormikTextField from 'components/TextFieldFormik' import { FormikProvider } from 'formik' -import { StyledButtonWrapper } from 'pages/Agents/AgentForm/CreateAgentForm' + import BackButton from 'components/BackButton' import { useModal } from 'hooks' import TypographySecondary from 'components/Typography/Secondary' import TypographyPrimary from 'components/Typography/Primary' import { ButtonPrimary } from 'components/Button/Button' import { useVoiceView } from './useVoiceView' +import { + StyledButtonWrapper, + StyledFieldsWrapper, + StyledInnerWrapper, + StyledMainTextWrapper, + StyledTextWrapper, +} from 'pages/Toolkit/ToolView/ToolView' const VoiceView = ({ voiceSlug, @@ -117,18 +124,18 @@ const VoiceView = ({ {voiceSlug && fields?.length > 0 && ( - + { await handleSubmit(formik?.values) closeModal('toolkit-modal') }} disabled={isLoading} - size={Button.sizes?.SMALL} + size={Button.sizes?.MEDIUM} > {isLoading ? : t('save')} - + )} )} @@ -140,52 +147,3 @@ const VoiceView = ({ } export default VoiceView - -const StyledInnerWrapper = styled.div` - padding: 0 20px; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - gap: 5px; -` -// const StyledImg = styled.img` -// width: 48px; -// height: 48px; -// border-radius: 10px; -// ` -const StyledTextWrapper = styled.div` - display: flex; - gap: 4px; - align-items: center; - - margin-bottom: 10px; -` -const StyledMainTextWrapper = styled.div` - /* text-align: center; */ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: 10px; - - width: 100%; - max-width: 400px; -` - -const StyledFieldsWrapper = styled.div` - margin-top: 20px; - width: 100%; - max-width: 600px; - display: flex; - flex-direction: column; - gap: 15px; - - height: calc(100vh - 400px); - overflow: auto; -` -const StyledModalButton = styled.div` - margin-left: auto; -` From ddd92cc281a4329a5c63c2d3a128b5706d33d994 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 15:17:20 +0400 Subject: [PATCH 3/7] fix: datasource page design --- apps/ui/src/Route.tsx | 8 +- apps/ui/src/pages/Datasource/Datasource.tsx | 155 ++++++++++++------ .../DatasourceForm/CreateDatasourceForm.tsx | 40 ++--- .../DatasourceForm/DatasourceForm.tsx | 34 +--- .../DatasourceForm/EditDatasourceForm.tsx | 40 ++--- .../pages/Datasource/useCreateDatasource.ts | 2 +- .../src/pages/Navigation/MainNavigation.tsx | 1 + apps/ui/src/styles/formStyles.css.ts | 8 +- 8 files changed, 150 insertions(+), 138 deletions(-) diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx index b22505f77..96dcf2b89 100644 --- a/apps/ui/src/Route.tsx +++ b/apps/ui/src/Route.tsx @@ -213,12 +213,8 @@ const Route = () => { /> - } - key={document.location.href} - > - } key={document.location.href} /> + } key={document.location.href}> + {/* } key={document.location.href} /> */} } diff --git a/apps/ui/src/pages/Datasource/Datasource.tsx b/apps/ui/src/pages/Datasource/Datasource.tsx index ceb624cc3..560ad13bf 100644 --- a/apps/ui/src/pages/Datasource/Datasource.tsx +++ b/apps/ui/src/pages/Datasource/Datasource.tsx @@ -9,7 +9,7 @@ import { StyledSectionTitle, StyledSectionWrapper, } from 'pages/Home/homeStyle.css' -import { useNavigate } from 'react-router-dom' + import { DATA_LOADER_IMAGES } from './constants' import DatasourceCard from './DatasourceCard' @@ -18,68 +18,115 @@ import { ButtonPrimary } from 'components/Button/Button' import { t } from 'i18next' import DatasourceDemoButton from './DatasourceForm/components/DatasourceDemoButton' import { StyledCombiner } from './DatasourceForm/CreateDatasourceForm' +import { StyledAppContainer } from 'components/Layout/LayoutStyle' +import { + StyledChatWrapper, + StyledContainer, + StyledLeftColumn, + StyledMainWrapper, + StyledRightColumn, +} from 'routes/ChatRouteLayout' +import ListHeader from 'routes/components/ListHeader' + +import { Navigate, useLocation, useNavigate, useOutlet, useParams } from 'react-router-dom' +import MiniToolCard from 'components/ChatCards/MiniToolCard' +import { useEffect } from 'react' const Datasource = () => { + const outlet = useOutlet() + const params = useParams() + + const { datasourceId } = params + const { datasources, deleteDatasourceHandler } = useDatasource() const navigate = useNavigate() + useEffect(() => { + if (datasources?.length > 0) navigate(`/datasources/${datasources?.[0].id}/edit-datasource`) + }, [datasources]) + return ( - - -
- {`${t('datasource')}`} - - {`${t('datasource-description')}`} - - -
-
- navigate('/datasources/create-datasource')} - size={Button.sizes?.SMALL} - > - {t('add-datasource')} - -
- - - - {datasources?.map((datasource, index: number) => { - const filteredLogos = DATA_LOADER_IMAGES.filter( - loaderImages => loaderImages.sourceName === datasource.source_type, - ) - - const imageSrc = filteredLogos?.[0]?.imageSrc || '' - - return ( - navigate(`/datasources/${datasource.id}/edit-datasource`)} - onDeleteClick={() => deleteDatasourceHandler(datasource.id)} - imageSrc={imageSrc} + <> + + + + + navigate('/datasources/create-datasource')} /> - ) - })} - - - + {datasources?.map((datasource: any) => { + const filteredLogos = DATA_LOADER_IMAGES.filter( + loaderImages => loaderImages.sourceName === datasource.source_type, + ) + + const imageSrc = filteredLogos?.[0]?.imageSrc || '' + + return ( + navigate(`/datasources/${datasource.id}/edit-datasource`)} + name={datasource.name} + logo={imageSrc} + picked={datasource.id === datasourceId} + onDeleteClick={() => deleteDatasourceHandler(datasource.id)} + /> + ) + })} + + + {outlet} + + + + + + + // + // + //
+ // {`${t('datasource')}`} + // + // {`${t('datasource-description')}`} + // + // + //
+ //
+ // navigate('/datasources/create-datasource')} + // size={Button.sizes?.SMALL} + // > + // {t('add-datasource')} + // + //
+ // + // + // + // {datasources?.map((datasource, index: number) => { + // const filteredLogos = DATA_LOADER_IMAGES.filter( + // loaderImages => loaderImages.sourceName === datasource.source_type, + // ) + + // const imageSrc = filteredLogos?.[0]?.imageSrc || '' + + // return ( + // navigate(`/datasources/${datasource.id}/edit-datasource`)} + // onDeleteClick={() => deleteDatasourceHandler(datasource.id)} + // imageSrc={imageSrc} + // /> + // ) + // })} + // + // + // ) } export default Datasource - -// const StyledDatasourceCardsWrapper = styled.div` -// display: flex; -// align-items: center; -// flex-wrap: wrap; -// gap: 16px; - -// height: calc(100vh - 325px); -// overflow-y: auto; -// padding: 0 20px; -// ` diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx index 84d95112b..27229de36 100644 --- a/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx +++ b/apps/ui/src/pages/Datasource/DatasourceForm/CreateDatasourceForm.tsx @@ -30,33 +30,27 @@ const CreateDatasourceForm = () => { -
+ {`${t('add-datasource')}`} - - - {`${t('datasource-description')}`} - - - -
- - - - {isLoading ? : 'Save'} - - + + - - - - - + + + + + + + + {isLoading ? : 'Save'} + + diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx index 7306180a3..6bafda253 100644 --- a/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx +++ b/apps/ui/src/pages/Datasource/DatasourceForm/DatasourceForm.tsx @@ -22,6 +22,7 @@ import DataSourceDropdown from './components/DataSourceDropdown' import TypographyPrimary from 'components/Typography/Primary' import { ButtonPrimary } from 'components/Button/Button' import TextareaFormik from 'components/TextareaFormik' +import { StyledFormInputWrapper, StyledFormRoot } from 'styles/formStyles.css' type DatasourceFormProps = { formik: any @@ -78,8 +79,8 @@ const DatasourceForm = ({ formik, isLoading, isEdit = false }: DatasourceFormPro }, [datasource_source_type]) return ( - - + + )} - - + + ) } export default DatasourceForm -const StyledFormContainer = styled.div` - display: flex; - flex-direction: column; - /* justify-content: center; */ - align-items: center; - overflow-y: auto; - height: 100%; - width: 100%; -` - -const StyledInputWrapper = styled.div` - display: flex; - flex-direction: column; - - gap: 25px; - - width: 100%; - max-width: 800px; - /* max-width: 600px; */ - /* margin: auto; */ - height: calc(100% - 100px); - /* max-height: 800px; */ - - padding: 0 20px; -` const StyledSourceTypeWrapper = styled.div` display: flex; flex-direction: column; diff --git a/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx b/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx index 9e5fb7564..ebceff223 100644 --- a/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx +++ b/apps/ui/src/pages/Datasource/DatasourceForm/EditDatasourceForm.tsx @@ -30,33 +30,25 @@ const EditDatasourceForm = () => { -
+ {`${t('edit-datasource')}`} - - - {`${t('datasource-description')}`} - - - -
- - - - - {isLoading ? : t('save')} - - + - - - - - + + + + + + + + {isLoading ? : t('save')} + + diff --git a/apps/ui/src/pages/Datasource/useCreateDatasource.ts b/apps/ui/src/pages/Datasource/useCreateDatasource.ts index d72f1f906..1c089a236 100644 --- a/apps/ui/src/pages/Datasource/useCreateDatasource.ts +++ b/apps/ui/src/pages/Datasource/useCreateDatasource.ts @@ -120,7 +120,7 @@ export const useCreateDatasource = () => { type: 'positive', open: true, }) - navigate('/datasources') + navigate(`/datasources/${datasource.id}/edit-datasource`) } catch (e) { setToast({ message: 'Failed To Add Datasource!', diff --git a/apps/ui/src/pages/Navigation/MainNavigation.tsx b/apps/ui/src/pages/Navigation/MainNavigation.tsx index 30297a985..a97cebb50 100644 --- a/apps/ui/src/pages/Navigation/MainNavigation.tsx +++ b/apps/ui/src/pages/Navigation/MainNavigation.tsx @@ -152,6 +152,7 @@ const MainNavigation = ({ user }: { user: any }) => { onClick={() => onHandleClick('/datasources')} > + {includes(active, 'datasources') && } )} diff --git a/apps/ui/src/styles/formStyles.css.ts b/apps/ui/src/styles/formStyles.css.ts index 51a015338..1ef93b5ad 100644 --- a/apps/ui/src/styles/formStyles.css.ts +++ b/apps/ui/src/styles/formStyles.css.ts @@ -19,5 +19,11 @@ export const StyledFormRoot = styled.div` export const StyledFormInputWrapper = styled.div` display: flex; flex-direction: column; - gap: 10px; + + padding: 0 20px; + + gap: 20px; + width: 100%; + + height: 100%; ` From 6cd4a4582bd97ef1511cccbc9b47935d7146db71 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 17:04:00 +0400 Subject: [PATCH 4/7] fix: datasource divider --- apps/ui/src/pages/Datasource/Datasource.tsx | 3 + .../src/pages/Integrations/Integrations.tsx | 56 +++++++++++++------ 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/apps/ui/src/pages/Datasource/Datasource.tsx b/apps/ui/src/pages/Datasource/Datasource.tsx index 560ad13bf..0bb2f4f86 100644 --- a/apps/ui/src/pages/Datasource/Datasource.tsx +++ b/apps/ui/src/pages/Datasource/Datasource.tsx @@ -22,6 +22,7 @@ import { StyledAppContainer } from 'components/Layout/LayoutStyle' import { StyledChatWrapper, StyledContainer, + StyledDivider, StyledLeftColumn, StyledMainWrapper, StyledRightColumn, @@ -76,6 +77,8 @@ const Datasource = () => { })} + + {outlet} diff --git a/apps/ui/src/pages/Integrations/Integrations.tsx b/apps/ui/src/pages/Integrations/Integrations.tsx index d71cee386..514fce9b1 100644 --- a/apps/ui/src/pages/Integrations/Integrations.tsx +++ b/apps/ui/src/pages/Integrations/Integrations.tsx @@ -31,10 +31,28 @@ import { useVoicesService } from 'plugins/contact/services/voice/useVoicesServic import { voiceLogos } from 'plugins/contact/pages/Voice/constants' import ToolView from 'pages/Toolkit/ToolView' import VoiceView from 'plugins/contact/pages/Voice/VoiceView' +import { useToolView } from 'pages/Toolkit/ToolView/useToolView' const Integrations = () => { const { getIntegrationModules } = useGetAccountModule() + const [show, setShow] = useState(false) + + const { refetchConfigs, configsData } = useToolView({}) + + const handleShow = async () => { + if (configsData) { + setShow(true) + } else { + await refetchConfigs() + setShow(true) + } + } + + useEffect(() => { + handleShow() + }, []) + const toolkitModule = getIntegrationModules('toolkit') const voiceModule = getIntegrationModules('voices') @@ -114,23 +132,27 @@ const Integrations = () => { - - handleTabClick(0)}>{t('How it works')} - handleTabClick(1)}>{t('settings')} - - - - - - {toolQuery && } - {voiceQuery && } - - - {toolQuery && } - {voiceQuery && } - - - + {show && ( + <> + + handleTabClick(0)}>{t('How it works')} + handleTabClick(1)}>{t('settings')} + + + + + + {toolQuery && } + {voiceQuery && } + + + {toolQuery && } + {voiceQuery && } + + + + + )} From a9e9a32e01955d39abbcf15f90d4fc45f7d50627 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 17:17:46 +0400 Subject: [PATCH 5/7] feat: datasource remove button on details --- apps/ui/src/routes/ChatRouteLayout.tsx | 4 +- .../routes/components/DatasourceDetails.tsx | 63 +++++++++++++++++-- 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/apps/ui/src/routes/ChatRouteLayout.tsx b/apps/ui/src/routes/ChatRouteLayout.tsx index aac39289b..b3285b4c4 100644 --- a/apps/ui/src/routes/ChatRouteLayout.tsx +++ b/apps/ui/src/routes/ChatRouteLayout.tsx @@ -428,9 +428,7 @@ const ChatRouteLayout = () => { {agentById && } {/* {agentById && } */} - {agentById && agentById.agent.agent_type === 'text' && ( - - )} + {agentById && agentById.agent.agent_type === 'text' && } {/* { - const datasourceIds = agentData?.configs?.datasources - +const DatasourceDetails = () => { + const { openModal, closeModal } = useModal() const { datasources } = useDatasource() + const { formik } = useEditAgent() + + const { setFieldValue, values } = formik + + const { agent_datasources } = values + const filteredDatasources = datasources?.filter((datasource: any) => - datasourceIds?.includes(datasource?.id), + agent_datasources?.includes(datasource?.id), ) + const handleRemoveDatasource = async ({ id }: { id: string }) => { + const filteredValues = agent_datasources?.filter((datasourceId: string) => datasourceId !== id) + + await setFieldValue('agent_datasources', filteredValues) + + formik.submitForm() + } + + const handleConfirmation = async ({ event, id }: { event: any; id: string }) => { + event.stopPropagation() + + openModal({ + name: 'delete-confirmation-modal', + data: { + deleteItem: async () => { + try { + await handleRemoveDatasource({ id }) + + closeModal('delete-confirmation-modal') + } catch (e) { + closeModal('delete-confirmation-modal') + } + }, + label: `${t('remove')} ${t('integration')}?`, + }, + }) + } + return ( @@ -39,7 +78,10 @@ const DatasourceDetails = ({ agentData }: { agentData: AgentWithConfigs }) => { const imageSrc = filteredLogos?.[0]?.imageSrc || '' return ( - + handleOpenToolIntegrationModal(tool?.value)} + > { type={Typography.types.LABEL} size={Typography.sizes.xss} /> - + + + } + onClick={(event: any) => handleConfirmation({ event: event, id: datasource.id })} + /> + + ) })} From 332198fb3fdf9c89b355ffbc3dc8a11a50961b61 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 18:19:06 +0400 Subject: [PATCH 6/7] feat: datasource list modal --- apps/ui/src/Route.tsx | 2 + apps/ui/src/modals/DatasourceListModal.tsx | 131 ++++++++++++++++++ apps/ui/src/modals/IntegrationListModal.tsx | 12 +- .../src/pages/Agents/AgentForm/AgentForm.tsx | 42 +++--- .../routes/components/DatasourceDetails.tsx | 8 ++ 5 files changed, 168 insertions(+), 27 deletions(-) create mode 100644 apps/ui/src/modals/DatasourceListModal.tsx diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx index 96dcf2b89..ee20127c2 100644 --- a/apps/ui/src/Route.tsx +++ b/apps/ui/src/Route.tsx @@ -100,6 +100,7 @@ import CreateCampaignForm from 'plugins/contact/pages/Campaign/CampaignForm/Crea import EditCampaignForm from 'plugins/contact/pages/Campaign/CampaignForm/EditCampaignForm' import TwilioPhoneNumberSidConfirmationModal from 'modals/TwilioPhoneNumberSidConfirmationModal' import IntegrationListModal from 'modals/IntegrationListModal' +import DatasourceListModal from 'modals/DatasourceListModal' const Route = () => { const { loading } = useContext(AuthContext) @@ -412,6 +413,7 @@ const Route = () => { + { + const { closeModal } = useModal() + + const [pickedDatasource, setPickedDatasource] = useState(null as any) + + const { data: datasources } = useDatasourcesService() + + const { agentById, isLoading, formik } = useEditAgent() + + const agentDatasources = agentById?.configs.datasources + + const installedDatasources = datasources?.filter((datasource: any) => + agentDatasources?.includes(datasource.id), + ) + const notInstalledDatasources = datasources?.filter( + (datasource: any) => !agentDatasources?.includes(datasource.id), + ) + + const handleUpdateDatasource = async () => { + if (!agentDatasources) return + let updatedValues + if (agentDatasources.includes(pickedDatasource)) { + updatedValues = agentDatasources?.filter((toolId: string) => toolId !== pickedDatasource) + } else { + updatedValues = [...agentDatasources, pickedDatasource] + } + + await formik.setFieldValue('agent_datasources', updatedValues) + formik.submitForm() + } + + useEffect(() => { + if (installedDatasources?.length > 0) setPickedDatasource(installedDatasources?.[0]?.id) + else if (notInstalledDatasources?.length > 0) + setPickedDatasource(notInstalledDatasources?.[0]?.id) + }, [agentDatasources]) + + return ( + closeModal('datasource-list-modal')} + show + backgroundColor='light' + noOverlay + > + + + + + {installedDatasources?.map((datasource: any) => { + const filteredLogos = DATA_LOADER_IMAGES.filter( + loaderImages => loaderImages.sourceName === datasource.source_type, + ) + + const imageSrc = filteredLogos?.[0]?.imageSrc || '' + + return ( + setPickedDatasource(datasource.id)} + picked={pickedDatasource === datasource.id} + name={datasource.name} + logo={imageSrc} + /> + ) + })} + + + + + {notInstalledDatasources?.map((datasource: any) => { + const filteredLogos = DATA_LOADER_IMAGES.filter( + loaderImages => loaderImages.sourceName === datasource.source_type, + ) + + const imageSrc = filteredLogos?.[0]?.imageSrc || '' + + return ( + setPickedDatasource(datasource.id)} + picked={pickedDatasource === datasource.id} + name={datasource.name} + logo={imageSrc} + /> + ) + })} + + + + + + + + + {agentDatasources?.includes(pickedDatasource) ? t('remove') : t('install')} + + + + + + + + ) +} + +export default withRenderModal('datasource-list-modal')(DatasourceListModal) diff --git a/apps/ui/src/modals/IntegrationListModal.tsx b/apps/ui/src/modals/IntegrationListModal.tsx index 46be9bd66..ec16d7bd2 100644 --- a/apps/ui/src/modals/IntegrationListModal.tsx +++ b/apps/ui/src/modals/IntegrationListModal.tsx @@ -169,7 +169,7 @@ const IntegrationListModal = () => { {agentToolsData && ( - + @@ -181,7 +181,7 @@ const IntegrationListModal = () => { {agentToolsData.includes(pickedTool?.id) ? t('remove') : t('install')} - + )} @@ -200,11 +200,11 @@ const IntegrationListModal = () => { export default withRenderModal('integration-list-modal')(IntegrationListModal) -const StyledModalBody = styled.div` +export const StyledModalBody = styled.div` width: 50vw; height: 70vh; ` -const StyledFooter = styled.div` +export const StyledFooter = styled.div` width: 100%; display: flex; @@ -216,10 +216,10 @@ const StyledFooter = styled.div` bottom: 0; ` -const StyledTextFieldWrapper = styled.div` +export const StyledTextFieldWrapper = styled.div` padding: 4px; ` -const StyledInnerTabWrapper = styled.div` +export const StyledInnerWrapper = styled.div` position: relative; height: 100%; diff --git a/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx b/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx index 6cfcb71d3..6214bdffa 100644 --- a/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx +++ b/apps/ui/src/pages/Agents/AgentForm/AgentForm.tsx @@ -237,28 +237,28 @@ const AgentForm = ({ formik, isVoice = true }: AgentFormProps) => { /> */} {agentType === 'text' && ( - - + // + // + // - { - setFieldValue('agent_source_flow', '') - }} - optionSize={'small'} - /> - + { + setFieldValue('agent_source_flow', '') + }} + optionSize={'small'} + /> )} diff --git a/apps/ui/src/routes/components/DatasourceDetails.tsx b/apps/ui/src/routes/components/DatasourceDetails.tsx index 8fa5e82ec..a6aa69bda 100644 --- a/apps/ui/src/routes/components/DatasourceDetails.tsx +++ b/apps/ui/src/routes/components/DatasourceDetails.tsx @@ -17,6 +17,7 @@ import { StyledCloseIcon } from 'pages/Home/GetStarted/GetStartedContainer' import { useEditDatasource } from 'pages/Datasource/useEditDatasource' import { useEditAgent } from 'pages/Agents/useEditAgent' import { useModal } from 'hooks' +import { StyledSearchOutlineIcon } from 'components/ChatSwitcher/ChatSwitcher' const DatasourceDetails = () => { const { openModal, closeModal } = useModal() @@ -68,6 +69,13 @@ const DatasourceDetails = () => { type={Typography.types.LABEL} size={Typography.sizes.md} /> + + openModal({ name: 'datasource-list-modal' })} + icon={() => } + kind={IconButton.kinds?.TERTIARY} + size={IconButton.sizes?.SMALL} + /> {filteredDatasources?.map((datasource: any) => { From 0806eb6442465af3dd44c5d6ee357d4e2c4096b4 Mon Sep 17 00:00:00 2001 From: levanion Date: Mon, 12 Feb 2024 18:23:02 +0400 Subject: [PATCH 7/7] fix: voice integration form width --- apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx b/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx index 4876a7713..e9c35f31e 100644 --- a/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx +++ b/apps/ui/src/pages/Toolkit/ToolView/ToolView.tsx @@ -143,6 +143,7 @@ export const StyledInnerWrapper = styled.div` padding: 0 20px; height: 100%; + width: 100%; display: flex; flex-direction: column;