#9729

Committed 03 Jan 2025 09:34AM UTC coverage: 5.783%. First build

Build # #9729

Build Type

Pull #7381

travis-ci

Pull Request Pull Request #7381: WIP: Knowledge base BoK instead of Subspace in Written Knowledge creation

Run Details

190 of 10858 branches covered (1.75%)

Branch coverage included in aggregate %.

0 of 91 new or added lines in 4 files covered. (0.0%)

1523 of 18763 relevant lines covered (8.12%)

0.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/main/topLevelPages/myDashboard/newVirtualContributorWizard/CreateNewVirtualContributor.tsx

import { MouseEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Form, Formik } from 'formik';
import * as yup from 'yup';
import { Box, Button, ButtonProps, DialogContent, Tooltip } from '@mui/material';
import LibraryBooksOutlined from '@mui/icons-material/LibraryBooksOutlined';
import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
import { FormikInputField } from '@/core/ui/forms/FormikInputField/FormikInputField';
import DialogHeader from '@/core/ui/dialog/DialogHeader';
import { Caption } from '@/core/ui/typography';
import { gutters } from '@/core/ui/grid/utils';
import Gutters from '@/core/ui/grid/Gutters';
import Loading from '@/core/ui/loading/Loading';
import LogoSmallImage from '@/main/ui/logo/logoSmall.svg?react';
import GridContainer from '@/core/ui/grid/GridContainer';
import GridProvider from '@/core/ui/grid/GridProvider';
import GridItem from '@/core/ui/grid/GridItem';
import { Actions } from '@/core/ui/actions/Actions';
import { theme } from '@/core/ui/themes/default/Theme';
import { useColumns } from '@/core/ui/grid/GridContext';
import FormikMarkdownField from '@/core/ui/forms/MarkdownInput/FormikMarkdownField';
import { TranslatedValidatedMessageWithPayload } from '@/domain/shared/i18n/ValidationMessageTranslation';
import FormikVisualUpload from '@/core/ui/upload/FormikVisualUpload/FormikVisualUpload';
import { VisualUploadModel } from '@/core/ui/upload/VisualUpload/VisualUpload.model';
import {
  VisualType,
  AiPersonaEngine,
  VirtualContributorBodyOfKnowledgeType,
} from '@/core/apollo/generated/graphql-schema';
import { useScreenSize } from '@/core/ui/grid/constants';

type CreateNewVirtualContributorProps = {
  onClose: () => void;
  onChangeAvatar: (visual: VisualUploadModel) => void;
  onCreateKnowledge: (values: VirtualContributorFromProps) => void;
  onUseExistingKnowledge: (values: VirtualContributorFromProps) => void;
  onUseExternal: (values: VirtualContributorFromProps) => void;
  loading?: boolean;
  titleId?: string;
};

enum VCSourceOptions {
  WRITTEN_KNOWLEDGE = 'createSpace',
  EXISTING_SPACE = 'existingSpace',
  EXTERNAL = 'external',
}

export interface VirtualContributorFromProps {
  name: string;
  tagline: string;
  description: string;
  externalConfig?: {
    apiKey?: string;
    assistantId?: string;
  };
  engine: AiPersonaEngine;
  bodyOfKnowledgeType: VirtualContributorBodyOfKnowledgeType;
}

const BigButton = ({
  tooltipDisabled,
  selected,
  startIcon,
  ...props
}: ButtonProps & { tooltipDisabled?: string; selected?: boolean }) => {
  const button = (
    <Box display="flex" flexBasis="50%">
      <Button
        variant="outlined"
        startIcon={startIcon}
        sx={{
          flexDirection: 'column',
          justifyContent: 'space-between',
          flexGrow: 1,
          gap: gutters(0.5),
          textTransform: 'none',
          borderColor: selected ? 'primary.main' : 'divider',
          opacity: selected ? 1 : 0.9,
          paddingTop: gutters(0.5),
          '&:active': { border: `1px solid ${theme.palette.text.primary};` },
        }}
        {...props}
      />
    </Box>
  );

  return tooltipDisabled && props.disabled ? <Tooltip title={tooltipDisabled}>{button}</Tooltip> : button;
};

const CreateNewVirtualContributor = ({
  onClose,
  onCreateKnowledge,
  onUseExistingKnowledge,
  onUseExternal,
  loading,
  onChangeAvatar,
  titleId,
}: CreateNewVirtualContributorProps) => {
  const { t } = useTranslation();
  const { isSmallScreen } = useScreenSize();

  const cols = useColumns();
  const isMobile = cols < 5;

  const initialValues: VirtualContributorFromProps = {
    name: '',
    tagline: '',
    description: '',
    engine: AiPersonaEngine.Expert,
    bodyOfKnowledgeType: VirtualContributorBodyOfKnowledgeType.AlkemioKnowledgeBase,
  };

  const validationSchema = yup.object().shape({
    name: yup
      .string()
      .trim()
      .min(3, ({ min }) => TranslatedValidatedMessageWithPayload('forms.validations.minLength')({ min }))
      .required(),
    tagline: yup.string(),
    description: yup.string(),
  });

  const [source, setSource] = useState<VCSourceOptions>();
  const selectVCSource = (event: MouseEvent<HTMLButtonElement>) => {
    setSource(event.currentTarget.value as VCSourceOptions);
  };

  const handleSubmit = (values: VirtualContributorFromProps) => {
    const name = values.name.trim();
    const newValues = { ...values, name };

    switch (source) {
      case VCSourceOptions.WRITTEN_KNOWLEDGE:
        onCreateKnowledge(newValues);
        break;
      case VCSourceOptions.EXISTING_SPACE:
        onUseExistingKnowledge(newValues);
        break;
      case VCSourceOptions.EXTERNAL:
        onUseExternal(newValues);
        break;
    }
  };

  return (
    <>
      <DialogHeader id={titleId} onClose={onClose} title={t('createVirtualContributorWizard.initial.title')} />
      <DialogContent sx={{ paddingTop: 0 }}>
        {loading && <Loading />}

        {!loading && (
          <Gutters disablePadding>
            <Caption>{t('createVirtualContributorWizard.initial.profileDescription')}</Caption>

            <GridContainer disablePadding sx={{ display: 'contents' }}>
              <GridProvider columns={12}>
                <Formik
                  initialValues={initialValues}
                  validationSchema={validationSchema}
                  enableReinitialize
                  onSubmit={handleSubmit}
                >
                  {({ isValid }) => {
                    return (
                      <Form noValidate>
                        <GridItem columns={isMobile ? cols : 8}>
                          <Gutters disablePadding>
                            <Gutters disablePadding flexDirection="row">
                              <FormikVisualUpload
                                flex={1}
                                name="visuals.avatar"
                                visualType={VisualType.Avatar}
                                onChangeAvatar={onChangeAvatar}
                              />

                              <Gutters disablePadding flex={2}>
                                <FormikInputField
                                  name="name"
                                  title={t('components.nameSegment.name')}
                                  placeholder={t('components.nameSegment.name')}
                                  required
                                />

                                <FormikInputField
                                  name="tagline"
                                  title={t('components.profileSegment.tagline.name')}
                                  placeholder={t('components.profileSegment.tagline.placeholder')}
                                />
                              </Gutters>
                            </Gutters>

                            <FormikMarkdownField
                              name="description"
                              title={t('components.profileSegment.description.name')}
                              placeholder={t('components.profileSegment.description.placeholder')}
                              rows={10}
                              multiline
                              hideImageOptions
                            />
                          </Gutters>
                        </GridItem>
                        <GridItem columns={isMobile ? cols : 8}>
                          <Gutters disablePadding paddingTop={gutters()}>
                            <Caption>{t('createVirtualContributorWizard.initial.description')}</Caption>
                            <Box
                              display="flex"
                              flexDirection={isSmallScreen ? 'column' : 'row'}
                              width="100%"
                              gap={gutters()}
                            >
                              <BigButton
                                onClick={selectVCSource}
                                value={VCSourceOptions.WRITTEN_KNOWLEDGE}
                                startIcon={<LibraryBooksOutlined />}
                                selected={source === VCSourceOptions.WRITTEN_KNOWLEDGE}
                              >
                                {t('createVirtualContributorWizard.initial.createSpace')}
                                <Caption fontSize={9}>{t('createVirtualContributorWizard.initial.ownAI')}</Caption>
                              </BigButton>
                              <BigButton
                                onClick={selectVCSource}
                                value={VCSourceOptions.EXISTING_SPACE}
                                startIcon={
                                  <Box sx={{ svg: { height: gutters(1.2) } }}>
                                    <LogoSmallImage />
                                  </Box>
                                }
                                selected={source === VCSourceOptions.EXISTING_SPACE}
                              >
                                {t('createVirtualContributorWizard.initial.useExistingSpace')}
                                <Caption fontSize={9}>{t('createVirtualContributorWizard.initial.ownAI')}</Caption>
                              </BigButton>
                              <BigButton
                                onClick={selectVCSource}
                                value={VCSourceOptions.EXTERNAL}
                                startIcon={<CloudDownloadOutlinedIcon />}
                                selected={source === VCSourceOptions.EXTERNAL}
                              >
                                {t('createVirtualContributorWizard.initial.useExternalAI')}
                                <Caption fontSize={9}>{t('createVirtualContributorWizard.initial.externalAI')}</Caption>
                              </BigButton>
                            </Box>
                          </Gutters>
                        </GridItem>
                        <Actions marginTop={theme.spacing(2)} sx={{ justifyContent: 'end', flexBasis: '100%' }}>
                          <Button type="submit" variant="contained" disabled={!isValid || !source}>
                            {t('buttons.create')}
                          </Button>
                        </Actions>
                      </Form>
                    );
                  }}
                </Formik>
              </GridProvider>
            </GridContainer>
          </Gutters>
        )}
      </DialogContent>
    </>
  );
};

export default CreateNewVirtualContributor;

1	import { MouseEvent, useState } from 'react';
2	import { useTranslation } from 'react-i18next';
3	import { Form, Formik } from 'formik';
4	import * as yup from 'yup';
5	import { Box, Button, ButtonProps, DialogContent, Tooltip } from '@mui/material';
6	import LibraryBooksOutlined from '@mui/icons-material/LibraryBooksOutlined';
7	import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
8	import { FormikInputField } from '@/core/ui/forms/FormikInputField/FormikInputField';
9	import DialogHeader from '@/core/ui/dialog/DialogHeader';
10	import { Caption } from '@/core/ui/typography';
11	import { gutters } from '@/core/ui/grid/utils';
12	import Gutters from '@/core/ui/grid/Gutters';
13	import Loading from '@/core/ui/loading/Loading';
14	import LogoSmallImage from '@/main/ui/logo/logoSmall.svg?react';
15	import GridContainer from '@/core/ui/grid/GridContainer';
16	import GridProvider from '@/core/ui/grid/GridProvider';
17	import GridItem from '@/core/ui/grid/GridItem';
18	import { Actions } from '@/core/ui/actions/Actions';
19	import { theme } from '@/core/ui/themes/default/Theme';
20	import { useColumns } from '@/core/ui/grid/GridContext';
21	import FormikMarkdownField from '@/core/ui/forms/MarkdownInput/FormikMarkdownField';
22	import { TranslatedValidatedMessageWithPayload } from '@/domain/shared/i18n/ValidationMessageTranslation';
23	import FormikVisualUpload from '@/core/ui/upload/FormikVisualUpload/FormikVisualUpload';
24	import { VisualUploadModel } from '@/core/ui/upload/VisualUpload/VisualUpload.model';
25	import {
26	VisualType,
27	AiPersonaEngine,
28	VirtualContributorBodyOfKnowledgeType,
29	} from '@/core/apollo/generated/graphql-schema';
30	import { useScreenSize } from '@/core/ui/grid/constants';
31
32	type CreateNewVirtualContributorProps = {
33	onClose: () => void;	×
34	onChangeAvatar: (visual: VisualUploadModel) => void;	×
35	onCreateKnowledge: (values: VirtualContributorFromProps) => void;	×
36	onUseExistingKnowledge: (values: VirtualContributorFromProps) => void;	×
37	onUseExternal: (values: VirtualContributorFromProps) => void;
38	loading?: boolean;
39	titleId?: string;
40	};
41
42	enum VCSourceOptions {
43	WRITTEN_KNOWLEDGE = 'createSpace',
44	EXISTING_SPACE = 'existingSpace',
45	EXTERNAL = 'external',
46	}
47
48	export interface VirtualContributorFromProps {
49	name: string;
50	tagline: string;
51	description: string;	×
52	externalConfig?: {
53	apiKey?: string;
54	assistantId?: string;
55	};
56	engine: AiPersonaEngine;
57	bodyOfKnowledgeType: VirtualContributorBodyOfKnowledgeType;
58	}	×
59
60	const BigButton = ({
61	tooltipDisabled,
62	selected,
63	startIcon,
64	...props
65	}: ButtonProps & { tooltipDisabled?: string; selected?: boolean }) => {
66	const button = (
67	<Box display="flex" flexBasis="50%">
68	<Button	×
69	variant="outlined"	×
70	startIcon={startIcon}
71	sx={{
72	flexDirection: 'column',
73	justifyContent: 'space-between',
74	flexGrow: 1,
75	gap: gutters(0.5),
76	textTransform: 'none',
77	borderColor: selected ? 'primary.main' : 'divider',
78	opacity: selected ? 1 : 0.9,	×
79	paddingTop: gutters(0.5),
80	'&:active': { border: `1px solid ${theme.palette.text.primary};` },
81	}}	×
82	{...props}
83	/>
84	</Box>
85	);
86
87	return tooltipDisabled && props.disabled ? <Tooltip title={tooltipDisabled}>{button}</Tooltip> : button;
88	};	×
89		×
90	const CreateNewVirtualContributor = ({
91	onClose,	×
92	onCreateKnowledge,	×
93	onUseExistingKnowledge,
94	onUseExternal,	×
95	loading,
96	onChangeAvatar,
97	titleId,
98	}: CreateNewVirtualContributorProps) => {
99	const { t } = useTranslation();
100	const { isSmallScreen } = useScreenSize();
101
102	const cols = useColumns();	×
103	const isMobile = cols < 5;
104
105	const initialValues: VirtualContributorFromProps = {
106	name: '',
107	tagline: '',
108	description: '',	×
109	engine: AiPersonaEngine.Expert,	×
110	bodyOfKnowledgeType: VirtualContributorBodyOfKnowledgeType.AlkemioKnowledgeBase,	×
111	};
112
113	const validationSchema = yup.object().shape({	×
114	name: yup	×
115	.string()	×
116	.trim()	×
117	.min(3, ({ min }) => TranslatedValidatedMessageWithPayload('forms.validations.minLength')({ min }))
NEW 118	.required(),	×
119	tagline: yup.string(),	×
120	description: yup.string(),
121	});	×
122		×
123	const [source, setSource] = useState<VCSourceOptions>();
124	const selectVCSource = (event: MouseEvent<HTMLButtonElement>) => {	×
125	setSource(event.currentTarget.value as VCSourceOptions);	×
126	};
127
128	const handleSubmit = (values: VirtualContributorFromProps) => {
129	const name = values.name.trim();	×
130	const newValues = { ...values, name };
131
132	switch (source) {
133	case VCSourceOptions.WRITTEN_KNOWLEDGE:	×
134	onCreateKnowledge(newValues);	×
135	break;
136	case VCSourceOptions.EXISTING_SPACE:
137	onUseExistingKnowledge(newValues);
138	break;
139	case VCSourceOptions.EXTERNAL:
140	onUseExternal(newValues);
141	break;
142	}
143	};
144
145	return (
146	<>	×
147	<DialogHeader id={titleId} onClose={onClose} title={t('createVirtualContributorWizard.initial.title')} />
148	<DialogContent sx={{ paddingTop: 0 }}>	×
149	{loading && <Loading />}
150
151	{!loading && (
152	<Gutters disablePadding>
153	<Caption>{t('createVirtualContributorWizard.initial.profileDescription')}</Caption>
154
155	<GridContainer disablePadding sx={{ display: 'contents' }}>
156	<GridProvider columns={12}>
157	<Formik
158	initialValues={initialValues}
159	validationSchema={validationSchema}
160	enableReinitialize
161	onSubmit={handleSubmit}
162	>
163	{({ isValid }) => {
164	return (
165	<Form noValidate>
166	<GridItem columns={isMobile ? cols : 8}>
167	<Gutters disablePadding>
168	<Gutters disablePadding flexDirection="row">
169	<FormikVisualUpload
170	flex={1}
171	name="visuals.avatar"	×
172	visualType={VisualType.Avatar}
173	onChangeAvatar={onChangeAvatar}
174	/>
175
176	<Gutters disablePadding flex={2}>	×
177	<FormikInputField
178	name="name"
179	title={t('components.nameSegment.name')}
180	placeholder={t('components.nameSegment.name')}
181	required
182	/>
183
184	<FormikInputField
185	name="tagline"
186	title={t('components.profileSegment.tagline.name')}
187	placeholder={t('components.profileSegment.tagline.placeholder')}
188	/>
189	</Gutters>
190	</Gutters>
191
192	<FormikMarkdownField
193	name="description"
194	title={t('components.profileSegment.description.name')}
195	placeholder={t('components.profileSegment.description.placeholder')}
196	rows={10}
197	multiline
198	hideImageOptions
199	/>
200	</Gutters>
201	</GridItem>
202	<GridItem columns={isMobile ? cols : 8}>
203	<Gutters disablePadding paddingTop={gutters()}>
204	<Caption>{t('createVirtualContributorWizard.initial.description')}</Caption>
205	<Box
206	display="flex"
207	flexDirection={isSmallScreen ? 'column' : 'row'}
208	width="100%"
209	gap={gutters()}
210	>
211	<BigButton
212	onClick={selectVCSource}
213	value={VCSourceOptions.WRITTEN_KNOWLEDGE}
214	startIcon={<LibraryBooksOutlined />}
215	selected={source === VCSourceOptions.WRITTEN_KNOWLEDGE}	×
216	>
217	{t('createVirtualContributorWizard.initial.createSpace')}
218	<Caption fontSize={9}>{t('createVirtualContributorWizard.initial.ownAI')}</Caption>
219	</BigButton>
220	<BigButton
221	onClick={selectVCSource}
222	value={VCSourceOptions.EXISTING_SPACE}
223	startIcon={
224	<Box sx={{ svg: { height: gutters(1.2) } }}>
225	<LogoSmallImage />
226	</Box>
227	}
228	selected={source === VCSourceOptions.EXISTING_SPACE}
229	>
230	{t('createVirtualContributorWizard.initial.useExistingSpace')}
231	<Caption fontSize={9}>{t('createVirtualContributorWizard.initial.ownAI')}</Caption>
232	</BigButton>
233	<BigButton
234	onClick={selectVCSource}
235	value={VCSourceOptions.EXTERNAL}
236	startIcon={<CloudDownloadOutlinedIcon />}
237	selected={source === VCSourceOptions.EXTERNAL}
238	>
239	{t('createVirtualContributorWizard.initial.useExternalAI')}
240	<Caption fontSize={9}>{t('createVirtualContributorWizard.initial.externalAI')}</Caption>
241	</BigButton>
242	</Box>
243	</Gutters>
244	</GridItem>
245	<Actions marginTop={theme.spacing(2)} sx={{ justifyContent: 'end', flexBasis: '100%' }}>
246	<Button type="submit" variant="contained" disabled={!isValid \|\| !source}>
247	{t('buttons.create')}
248	</Button>
249	</Actions>
250	</Form>
251	);
252	}}
253	</Formik>
254	</GridProvider>
255	</GridContainer>
256	</Gutters>
257	)}
258	</DialogContent>
259	</>
260	);
261	};
262
263	export default CreateNewVirtualContributor;

alkem-io / client-web / #9729

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous