alkem-io/client-web | Build 9644 | src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx | Coveralls

1

import React, { useMemo, useCallback } from 'react';

2

import { groupBy } from 'lodash';

3

import { Button, Tooltip } from '@mui/material';

4

import { useTranslation } from 'react-i18next';

5

import PageContent from '@/core/ui/content/PageContent';

6

import PageContentBlock from '@/core/ui/content/PageContentBlock';

7

import PageContentColumn from '@/core/ui/content/PageContentColumn';

8

import ProfileDetail from '@/domain/community/profile/ProfileDetail/ProfileDetail';

9

import ContributorCardHorizontal from '@/core/ui/card/ContributorCardHorizontal';

10

import PageContentBlockHeader from '@/core/ui/content/PageContentBlockHeader';

13

import { Caption, CardText } from '@/core/ui/typography';

15

import { isSocialNetworkSupported } from '@/domain/shared/components/SocialLinks/models/SocialNetworks';

16

import { gutters } from '@/core/ui/grid/utils';

17

import useNavigate from '@/core/routing/useNavigate';

18

import { KNOWLEDGE_BASE_PATH } from '@/main/routing/urlBuilders';

19

import useKnowledgeBase from '../knowledgeBase/useKnowledgeBase';

21

  AiPersonaEngine,

22

  SpaceLevel,

23

  VirtualContributorBodyOfKnowledgeType,

24

} from '@/core/apollo/generated/graphql-schema';

25

import SpaceCardHorizontal from '@/domain/space/components/cards/SpaceCardHorizontal';

26

import { VirtualContributorModelFull } from '../model/VirtualContributorModelFull';

27

import { SpaceBodyOfKnowledgeModel } from '../model/SpaceBodyOfKnowledgeModel';

28

import { EMPTY_MODEL_CARD } from '../model/VirtualContributorModelCardModel';

29

import { useScreenSize } from '@/core/ui/grid/constants';

30

31

const OTHER_LINK_GROUP = 'other';

32

const SOCIAL_LINK_GROUP = 'social';

33

const bokVisitButtonStyles = { width: 'fit-content', marginTop: gutters(1) };

34

35

export type VCProfilePageViewProps = {

36

  bokProfile?: SpaceBodyOfKnowledgeModel;

37

  virtualContributor?: VirtualContributorModelFull;

38

  navigateToKnowledgeBase?: boolean;

39

  openKnowledgeBaseDialog?: boolean;

40

};

41

42

export const VCProfilePageView = ({ virtualContributor, ...rest }: VCProfilePageViewProps) => {

43

  const navigate = useNavigate();

44

45

  const { t } = useTranslation();

46

47

  const { isMediumSmallScreen } = useScreenSize();

48

49

  const { hasReadAccess, knowledgeBaseDescription } = useKnowledgeBase({ id: virtualContributor?.id });

50

51

  const modelCard = virtualContributor?.modelCard || EMPTY_MODEL_CARD;

52

53

  const references = virtualContributor?.profile?.references;

54

  const bodyOfKnowledgeType = virtualContributor?.bodyOfKnowledgeType;

55

  const engine = virtualContributor?.aiPersona?.engine;

56

57

  const isExternal = modelCard.aiEngine.isExternal;

58

59

  const hasSpaceKnowledge = bodyOfKnowledgeType === VirtualContributorBodyOfKnowledgeType.AlkemioSpace;

60

  const hasKnowledgeBase = bodyOfKnowledgeType === VirtualContributorBodyOfKnowledgeType.AlkemioKnowledgeBase;

61

  const isAssistant = engine === AiPersonaEngine.OpenaiAssistant;

62

63

  const links = useMemo(() => {

64

    return groupBy(references, reference =>

65

      isSocialNetworkSupported(reference.name) ? SOCIAL_LINK_GROUP : OTHER_LINK_GROUP

66

);

67

  }, [references]);

68

69

  const onClickHandleKnowledgeBase = useCallback(() => {

70

    if (virtualContributor) {

71

      navigate(`${virtualContributor.profile.url}/${KNOWLEDGE_BASE_PATH}`);

72

73

  }, [navigate, virtualContributor]);

74

75

  const defaultProfile = { displayName: t('components.card.privacy.private', { entity: 'space' }), url: '' };

76

77

  const renderBokVisitButton = useCallback(

78

    () =>

79

      hasReadAccess ? (

80

        <Button color="primary" variant="outlined" sx={bokVisitButtonStyles} onClick={onClickHandleKnowledgeBase}>

81

          {t('buttons.visit')}

82

        </Button>

83

      ) : (

84

        <Tooltip title={t('components.profile.fields.bodyOfKnowledge.privateBokTooltip')} placement="bottom-start">

85

          <Gutters disableGap disablePadding>

86

            <Button disabled color="primary" variant="outlined" sx={bokVisitButtonStyles}>

87

              {t('buttons.visit')}

88

            </Button>

89

          </Gutters>

90

        </Tooltip>

91

),

92

    [hasReadAccess, t, onClickHandleKnowledgeBase]

93

);

94

95

  return (

96

    <PageContent>

97

      <PageContentColumn columns={isMediumSmallScreen ? 12 : 3}>

98

        <PageContentBlock disableGap>

99

          <ProfileDetail

100

            title={t('components.profile.fields.description.title')}

101

            value={virtualContributor?.profile?.description ?? ''}

102

            aria-label="description"

103

/>

104

        </PageContentBlock>

105

106

        <PageContentBlock>

107

          <PageContentBlockHeader title={t('pages.virtualContributorProfile.host')} />

108

          <ContributorCardHorizontal profile={virtualContributor?.provider?.profile} seamless />

109

        </PageContentBlock>

110

111

        <PageContentBlock>

112

          <Gutters disableGap disablePadding>

113

            <Gutters disableGap disablePadding marginBottom={gutters(1)}>

114

              <ProfileDetail title={t('components.profile.fields.references.title')} aria-label="references" />

115

            </Gutters>

116

117

            <References

118

              references={links[OTHER_LINK_GROUP]}

119

              noItemsView={<CardText color="neutral.main">{t('common.no-references')}</CardText>}

120

/>

121

          </Gutters>

122

        </PageContentBlock>

123

124

        {hasKnowledgeBase && (

125

          <PageContentBlock>

126

            <Gutters disableGap disablePadding>

127

              <Gutters disableGap disablePadding>

128

                <ProfileDetail

129

                  title={t('components.profile.fields.bodyOfKnowledge.title')}

130

                  value={knowledgeBaseDescription || t('virtualContributorSpaceSettings.placeholder')}

131

                  aria-label="body-of-knowledge"

132

/>

133

134

                {renderBokVisitButton()}

135

              </Gutters>

136

            </Gutters>

137

          </PageContentBlock>

138

)}

139

140

        {hasSpaceKnowledge && (

141

          <PageContentBlock>

142

            <Gutters disableGap disablePadding>

143

              <Gutters disableGap disablePadding>

144

                <ProfileDetail

145

                  title={t('components.profile.fields.bodyOfKnowledge.title')}

146

                  value={virtualContributor?.bodyOfKnowledgeDescription || ''}

147

                  aria-label="body-of-knowledge"

148

/>

149

150

                <Caption sx={{ marginTop: gutters(1) }}>

151

                  {t('components.profile.fields.bodyOfKnowledge.spaceBokDescription', {

152

                    vcName: virtualContributor?.profile?.displayName,

153

})}

154

                </Caption>

155

156

                <Gutters disableGap disablePadding paddingTop={1}>

157

                  <SpaceCardHorizontal

158

                    space={{

159

                      id: virtualContributor?.bodyOfKnowledgeID,

160

                      about: { profile: rest?.bokProfile || defaultProfile },

161

                      level: SpaceLevel.L0,

162

}}

163

                    size="small"

164

                    deepness={0}

165

                    seamless

166

                    sx={{ display: 'inline-block', maxWidth: '100%', padding: 0 }}

167

                    disableHoverState

168

                    disableTagline

169

/>

170

                </Gutters>

171

              </Gutters>

172

            </Gutters>

173

          </PageContentBlock>

174

)}

175

176

        {isExternal && (

177

          <PageContentBlock>

178

            <Gutters disableGap disablePadding>

179

              <Gutters disableGap disablePadding>

180

                <ProfileDetail

181

                  title={t('components.profile.fields.bodyOfKnowledge.title')}

182

                  value={t('components.profile.fields.engines.externalVCDescription', {

183

                    engineName: isAssistant

184

                      ? t('components.profile.fields.engines.externalAssistant')

185

                      : t('components.profile.fields.engines.external'),

186

})}

187

                  aria-label="body-of-knowledge"

188

/>

189

              </Gutters>

190

            </Gutters>

191

          </PageContentBlock>

192

)}

193

      </PageContentColumn>

194

195

      <PageContentColumn columns={9}>

196

        <VCProfileContentView virtualContributor={virtualContributor} {...rest} />

197

      </PageContentColumn>

198

    </PageContent>

199

);

200

};

201

202

export default VCProfilePageView;

alkem-io / client-web / #9644

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

1	import React, { useMemo, useCallback } from 'react';
2	import { groupBy } from 'lodash';
3	import { Button, Tooltip } from '@mui/material';
4	import { useTranslation } from 'react-i18next';
5	import PageContent from '@/core/ui/content/PageContent';
6	import PageContentBlock from '@/core/ui/content/PageContentBlock';
7	import PageContentColumn from '@/core/ui/content/PageContentColumn';
8	import ProfileDetail from '@/domain/community/profile/ProfileDetail/ProfileDetail';
9	import ContributorCardHorizontal from '@/core/ui/card/ContributorCardHorizontal';
10	import PageContentBlockHeader from '@/core/ui/content/PageContentBlockHeader';
NEW 11	import VCProfileContentView from './VCProfileContentView';	×
12	import Gutters from '@/core/ui/grid/Gutters';	×
13	import { Caption, CardText } from '@/core/ui/typography';
14	import References from '@/domain/shared/components/References/References';	×
15	import { isSocialNetworkSupported } from '@/domain/shared/components/SocialLinks/models/SocialNetworks';
16	import { gutters } from '@/core/ui/grid/utils';
17	import useNavigate from '@/core/routing/useNavigate';
18	import { KNOWLEDGE_BASE_PATH } from '@/main/routing/urlBuilders';
19	import useKnowledgeBase from '../knowledgeBase/useKnowledgeBase';
20	import {	×
21	AiPersonaEngine,
22	SpaceLevel,
23	VirtualContributorBodyOfKnowledgeType,
24	} from '@/core/apollo/generated/graphql-schema';
25	import SpaceCardHorizontal from '@/domain/space/components/cards/SpaceCardHorizontal';
26	import { VirtualContributorModelFull } from '../model/VirtualContributorModelFull';
27	import { SpaceBodyOfKnowledgeModel } from '../model/SpaceBodyOfKnowledgeModel';
28	import { EMPTY_MODEL_CARD } from '../model/VirtualContributorModelCardModel';
29	import { useScreenSize } from '@/core/ui/grid/constants';
30
31	const OTHER_LINK_GROUP = 'other';
32	const SOCIAL_LINK_GROUP = 'social';
33	const bokVisitButtonStyles = { width: 'fit-content', marginTop: gutters(1) };
34
35	export type VCProfilePageViewProps = {
36	bokProfile?: SpaceBodyOfKnowledgeModel;
37	virtualContributor?: VirtualContributorModelFull;
38	navigateToKnowledgeBase?: boolean;
39	openKnowledgeBaseDialog?: boolean;
40	};
41
42	export const VCProfilePageView = ({ virtualContributor, ...rest }: VCProfilePageViewProps) => {
43	const navigate = useNavigate();
44
45	const { t } = useTranslation();
46
47	const { isMediumSmallScreen } = useScreenSize();
48
49	const { hasReadAccess, knowledgeBaseDescription } = useKnowledgeBase({ id: virtualContributor?.id });
50
51	const modelCard = virtualContributor?.modelCard \|\| EMPTY_MODEL_CARD;
52
53	const references = virtualContributor?.profile?.references;
54	const bodyOfKnowledgeType = virtualContributor?.bodyOfKnowledgeType;
55	const engine = virtualContributor?.aiPersona?.engine;
56
57	const isExternal = modelCard.aiEngine.isExternal;
58
59	const hasSpaceKnowledge = bodyOfKnowledgeType === VirtualContributorBodyOfKnowledgeType.AlkemioSpace;
60	const hasKnowledgeBase = bodyOfKnowledgeType === VirtualContributorBodyOfKnowledgeType.AlkemioKnowledgeBase;
61	const isAssistant = engine === AiPersonaEngine.OpenaiAssistant;
62
63	const links = useMemo(() => {
64	return groupBy(references, reference =>
65	isSocialNetworkSupported(reference.name) ? SOCIAL_LINK_GROUP : OTHER_LINK_GROUP
66	);
67	}, [references]);
68
69	const onClickHandleKnowledgeBase = useCallback(() => {
70	if (virtualContributor) {
71	navigate(`${virtualContributor.profile.url}/${KNOWLEDGE_BASE_PATH}`);
72	}
73	}, [navigate, virtualContributor]);
74
75	const defaultProfile = { displayName: t('components.card.privacy.private', { entity: 'space' }), url: '' };
76
77	const renderBokVisitButton = useCallback(
78	() =>
79	hasReadAccess ? (
80	<Button color="primary" variant="outlined" sx={bokVisitButtonStyles} onClick={onClickHandleKnowledgeBase}>
81	{t('buttons.visit')}
82	</Button>
83	) : (
84	<Tooltip title={t('components.profile.fields.bodyOfKnowledge.privateBokTooltip')} placement="bottom-start">
85	<Gutters disableGap disablePadding>
86	<Button disabled color="primary" variant="outlined" sx={bokVisitButtonStyles}>
87	{t('buttons.visit')}
88	</Button>
89	</Gutters>
90	</Tooltip>
91	),
92	[hasReadAccess, t, onClickHandleKnowledgeBase]
93	);
94
95	return (
96	<PageContent>
97	<PageContentColumn columns={isMediumSmallScreen ? 12 : 3}>
98	<PageContentBlock disableGap>
99	<ProfileDetail
100	title={t('components.profile.fields.description.title')}
101	value={virtualContributor?.profile?.description ?? ''}
102	aria-label="description"
103	/>
104	</PageContentBlock>
105
106	<PageContentBlock>
107	<PageContentBlockHeader title={t('pages.virtualContributorProfile.host')} />
108	<ContributorCardHorizontal profile={virtualContributor?.provider?.profile} seamless />
109	</PageContentBlock>
110
111	<PageContentBlock>
112	<Gutters disableGap disablePadding>
113	<Gutters disableGap disablePadding marginBottom={gutters(1)}>
114	<ProfileDetail title={t('components.profile.fields.references.title')} aria-label="references" />
115	</Gutters>
116
117	<References
118	references={links[OTHER_LINK_GROUP]}
119	noItemsView={<CardText color="neutral.main">{t('common.no-references')}</CardText>}
120	/>
121	</Gutters>
122	</PageContentBlock>
123
124	{hasKnowledgeBase && (
125	<PageContentBlock>
126	<Gutters disableGap disablePadding>
127	<Gutters disableGap disablePadding>
128	<ProfileDetail
129	title={t('components.profile.fields.bodyOfKnowledge.title')}
130	value={knowledgeBaseDescription \|\| t('virtualContributorSpaceSettings.placeholder')}
131	aria-label="body-of-knowledge"
132	/>
133
134	{renderBokVisitButton()}
135	</Gutters>
136	</Gutters>
137	</PageContentBlock>
138	)}
139
140	{hasSpaceKnowledge && (
141	<PageContentBlock>
142	<Gutters disableGap disablePadding>
143	<Gutters disableGap disablePadding>
144	<ProfileDetail
145	title={t('components.profile.fields.bodyOfKnowledge.title')}
146	value={virtualContributor?.bodyOfKnowledgeDescription \|\| ''}
147	aria-label="body-of-knowledge"
148	/>
149
150	<Caption sx={{ marginTop: gutters(1) }}>
151	{t('components.profile.fields.bodyOfKnowledge.spaceBokDescription', {
152	vcName: virtualContributor?.profile?.displayName,
153	})}
154	</Caption>
155
156	<Gutters disableGap disablePadding paddingTop={1}>
157	<SpaceCardHorizontal
158	space={{
159	id: virtualContributor?.bodyOfKnowledgeID,
160	about: { profile: rest?.bokProfile \|\| defaultProfile },
161	level: SpaceLevel.L0,
162	}}
163	size="small"
164	deepness={0}
165	seamless
166	sx={{ display: 'inline-block', maxWidth: '100%', padding: 0 }}
167	disableHoverState
168	disableTagline
169	/>
170	</Gutters>
171	</Gutters>
172	</Gutters>
173	</PageContentBlock>
174	)}
175
176	{isExternal && (
177	<PageContentBlock>
178	<Gutters disableGap disablePadding>
179	<Gutters disableGap disablePadding>
180	<ProfileDetail
181	title={t('components.profile.fields.bodyOfKnowledge.title')}
182	value={t('components.profile.fields.engines.externalVCDescription', {
183	engineName: isAssistant
184	? t('components.profile.fields.engines.externalAssistant')
185	: t('components.profile.fields.engines.external'),
186	})}
187	aria-label="body-of-knowledge"
188	/>
189	</Gutters>
190	</Gutters>
191	</PageContentBlock>
192	)}
193	</PageContentColumn>
194
195	<PageContentColumn columns={9}>
196	<VCProfileContentView virtualContributor={virtualContributor} {...rest} />
197	</PageContentColumn>
198	</PageContent>
199	);
200	};
201
202	export default VCProfilePageView;

alkem-io / client-web / #9644

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