Skip to content

Commit 1893fa2

Browse files
vishnoianilvishnoianil
authored
Merge pull request #811 from jeff-phillips-18/in-app-docs
Add In-App Documentation
2 parents 8ddbb6b + f2f4a4f commit 1893fa2

35 files changed

+567
-168
lines changed

‎src/app/playground/chat/page.tsx‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,32 @@
22
'use client';
33

44
import React from 'react';
5-
import { useRouter } from 'next/navigation';
6-
import { Button, PageSection, Content } from '@patternfly/react-core/';
7-
import { t_global_spacer_sm as SmSpacerSize } from '@patternfly/react-tokens';
5+
import { PageSection, Content } from '@patternfly/react-core/';
86
import { AppLayout } from '@/components/AppLayout';
7+
import ChatPageSidePanelHelp from '@/components/SidePanelContents/ChatPageSidePanelHelp';
8+
import PageDescriptionWithHelp from '@/components/Common/PageDescriptionWithHelp';
99
import ModelsContextProvider from '../../../components/Chat/ModelsContext';
1010
import ChatBotContainer from '../../../components/Chat/ChatBotContainer';
1111

1212
import './chatbotPage.css';
1313

14-
const ChatPage: React.FC = () => {
15-
const router = useRouter();
16-
17-
return (
18-
<AppLayout className="chatBotPage">
19-
<PageSection>
20-
<Content component="h1">Chat with a model</Content>
21-
<Content style={{ marginBottom: SmSpacerSize.var }}>
22-
{`Before you start adding new skills and knowledge to your model, you can check its baseline
14+
const ChatPage: React.FC = () => (
15+
<AppLayout className="chatBotPage">
16+
<PageSection>
17+
<Content component="h1">Chat with a model</Content>
18+
<PageDescriptionWithHelp
19+
description={`Before you start adding new skills and knowledge to your model, you can check its baseline
2320
performance by chatting with a language model that's hosted on your cloud. Choose a supported model
2421
from the model selector or configure your own custom endpoints to gain direct access
2522
to a specific model you've trained.`}
26-
</Content>
27-
<Button
28-
component="a"
29-
href="/playground/endpoints"
30-
variant="link"
31-
isInline
32-
onClick={(e) => {
33-
e.preventDefault();
34-
router.push('/playground/endpoints');
35-
}}
36-
>
37-
Learn more about managing custom model endpoints
38-
</Button>
39-
</PageSection>
40-
<ModelsContextProvider>
41-
<ChatBotContainer />
42-
</ModelsContextProvider>
43-
</AppLayout>
44-
);
45-
};
23+
helpText="Learn more about chatting with models"
24+
sidePanelContent={<ChatPageSidePanelHelp />}
25+
/>
26+
</PageSection>
27+
<ModelsContextProvider>
28+
<ChatBotContainer />
29+
</ModelsContextProvider>
30+
</AppLayout>
31+
);
4632

4733
export default ChatPage;

‎src/app/playground/endpoints/page.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,18 @@ import {
1414
Flex,
1515
FlexItem,
1616
PageSection,
17-
Title,
1817
Truncate,
1918
ClipboardCopy
2019
} from '@patternfly/react-core';
2120
import { BanIcon, CheckCircleIcon, EyeSlashIcon, EyeIcon, QuestionCircleIcon } from '@patternfly/react-icons';
22-
import { AppLayout } from '@/components/AppLayout';
2321
import { Endpoint, ModelEndpointStatus } from '@/types';
22+
import { fetchEndpointStatus } from '@/services/modelService';
23+
import { AppLayout } from '@/components/AppLayout';
24+
import CustomEndpointsSidePanelHelp from '@/components/SidePanelContents/CustomEndpointsSidePanelHelp';
2425
import EditEndpointModal from '@/app/playground/endpoints/EditEndpointModal';
2526
import DeleteEndpointModal from '@/app/playground/endpoints/DeleteEndpoinModal';
2627
import EndpointActions from '@/app/playground/endpoints/EndpointActions';
27-
import { fetchEndpointStatus } from '@/services/modelService';
28+
import PageDescriptionWithHelp from '@/components/Common/PageDescriptionWithHelp';
2829

2930
const iconForStatus = (status: ModelEndpointStatus) => {
3031
switch (status) {
@@ -188,22 +189,22 @@ const EndpointsPage: React.FC = () => {
188189

189190
return (
190191
<AppLayout>
191-
<PageSection hasBodyWrapper={false}>
192-
<Flex direction={{ default: 'column' }}>
192+
<PageSection>
193+
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }} gap={{ default: 'gapMd' }}>
193194
<FlexItem>
194-
<Title headingLevel="h1">Custom model endpoints</Title>
195+
<Content component="h1">Custom model endpoints</Content>
195196
</FlexItem>
196197
<FlexItem>
197-
<Content component="p">Custom model endpoints enable you to interact with and test fine-tuned models using the chat interface.</Content>
198+
<Button onClick={handleAddEndpoint}>Add custom endpoint</Button>
198199
</FlexItem>
199200
</Flex>
201+
<PageDescriptionWithHelp
202+
description="Custom model endpoints enable you to interact with and test fine-tuned models using the chat interface."
203+
helpText="Learn more about chatting with models"
204+
sidePanelContent={<CustomEndpointsSidePanelHelp />}
205+
/>
200206
</PageSection>
201207
<PageSection hasBodyWrapper={false}>
202-
<Flex justifyContent={{ default: 'justifyContentFlexEnd' }}>
203-
<FlexItem>
204-
<Button onClick={handleAddEndpoint}>Add custom endpoint</Button>
205-
</FlexItem>
206-
</Flex>
207208
<DataList aria-label="Endpoints list">
208209
<DataListItem key="property-headers">
209210
<DataListItemRow wrapModifier="breakWord">

‎src/components/AppLayout.tsx‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import { usePathname, useRouter } from 'next/navigation';
66
import Link from 'next/link';
77
import { useSession } from 'next-auth/react';
88
import {
9+
AlertGroup,
10+
Alert,
11+
AlertVariant,
12+
AlertActionCloseButton,
913
Bullseye,
14+
Drawer,
15+
DrawerContent,
16+
DrawerContentBody,
1017
Spinner,
1118
Masthead,
1219
MastheadMain,
@@ -24,20 +31,17 @@ import {
2431
PageSidebar,
2532
PageSidebarBody,
2633
SkipToContent,
27-
Page,
28-
AlertGroup,
29-
Alert,
30-
AlertVariant,
31-
AlertActionCloseButton
34+
Page
3235
} from '@patternfly/react-core';
3336
import { BarsIcon } from '@patternfly/react-icons';
37+
import { useFeatureFlags } from '@/context/FeatureFlagsContext';
38+
import { useAlerts } from '@/context/AlertContext';
39+
import { useSideDrawer } from '@/context/SideDrawerContext';
3440
import ThemePreference from '@/components/ThemePreference/ThemePreference';
3541
import HelpDropdown from './HelpDropdown/HelpDropdown';
3642
import UserMenu from './UserMenu/UserMenu';
3743

3844
import '../styles/globals.scss';
39-
import { useFeatureFlags } from '@/context/FeatureFlagsContext';
40-
import { useAlerts } from '@/context/AlertContext';
4145

4246
interface IAppLayout {
4347
children: React.ReactNode;
@@ -62,6 +66,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
6266
featureFlags: { playgroundFeaturesEnabled, experimentalFeaturesEnabled }
6367
} = useFeatureFlags();
6468
const { alerts, removeAlert } = useAlerts();
69+
const sideDrawerContext = useSideDrawer();
6570

6671
const router = useRouter();
6772
const pathname = usePathname();
@@ -183,28 +188,34 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
183188
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
184189

185190
return (
186-
<Page
187-
className={className}
188-
mainContainerId={pageId}
189-
masthead={Header}
190-
isManagedSidebar
191-
sidebar={Sidebar}
192-
skipToContent={PageSkipToContent}
193-
isContentFilled
194-
>
195-
{children}
196-
<AlertGroup isToast isLiveRegion>
197-
{alerts.map((alert) => (
198-
<Alert
199-
variant={alert.variant ? AlertVariant[alert.variant] : undefined}
200-
title={alert.title}
201-
timeout={true}
202-
actionClose={<AlertActionCloseButton title={alert.title} onClose={() => removeAlert(alert.key)} />}
203-
key={alert.key}
204-
/>
205-
))}
206-
</AlertGroup>
207-
</Page>
191+
<Drawer isExpanded={!!sideDrawerContext.setSideDrawerContent} isInline>
192+
<DrawerContent panelContent={sideDrawerContext.sideDrawerContent}>
193+
<DrawerContentBody>
194+
<Page
195+
className={className}
196+
mainContainerId={pageId}
197+
masthead={Header}
198+
isManagedSidebar
199+
sidebar={Sidebar}
200+
skipToContent={PageSkipToContent}
201+
isContentFilled
202+
>
203+
{children}
204+
<AlertGroup isToast isLiveRegion>
205+
{alerts.map((alert) => (
206+
<Alert
207+
variant={alert.variant ? AlertVariant[alert.variant] : undefined}
208+
title={alert.title}
209+
timeout={true}
210+
actionClose={<AlertActionCloseButton title={alert.title} onClose={() => removeAlert(alert.key)} />}
211+
key={alert.key}
212+
/>
213+
))}
214+
</AlertGroup>
215+
</Page>
216+
</DrawerContentBody>
217+
</DrawerContent>
218+
</Drawer>
208219
);
209220
};
210221

‎src/components/ClientProviders.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ThemeProvider } from '@/context/ThemeContext';
77
import { EnvConfigProvider } from '@/context/EnvConfigContext';
88
import { FeatureFlagsProvider } from '@/context/FeatureFlagsContext';
99
import { AlertProvider } from '@/context/AlertContext';
10+
import { SideDrawerProvider } from '@/context/SideDrawerContext';
1011

1112
interface ClientProviderProps {
1213
children: ReactNode;
@@ -18,7 +19,9 @@ const ClientProvider = ({ children }: ClientProviderProps) => {
1819
<EnvConfigProvider>
1920
<FeatureFlagsProvider>
2021
<ThemeProvider>
21-
<AlertProvider>{children}</AlertProvider>
22+
<SideDrawerProvider>
23+
<AlertProvider>{children}</AlertProvider>
24+
</SideDrawerProvider>
2225
</ThemeProvider>
2326
</FeatureFlagsProvider>
2427
</EnvConfigProvider>

‎src/components/Common/PageDescriptionWithHelp.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// src/app/components/Common/PageDescriptionWithHelp.tsx
2+
'use client';
3+
4+
import * as React from 'react';
5+
import { Button, Flex, FlexItem } from '@patternfly/react-core';
6+
import { useSideDrawer } from '@/context/SideDrawerContext';
7+
import XsOpenDrawerRightIcon from '@/components/Common/XsOpenDrawerRightIcon';
8+
9+
interface Props {
10+
description: React.ReactNode;
11+
helpText: React.ReactNode;
12+
sidePanelContent: React.ReactNode;
13+
}
14+
15+
const PageDescriptionWithHelp: React.FC<Props> = ({ description, helpText, sidePanelContent }) => {
16+
const sideDrawerContext = useSideDrawer();
17+
18+
return (
19+
<Flex direction={{ default: 'column' }} gap={{ default: 'gapSm' }}>
20+
<FlexItem>{description}</FlexItem>
21+
<FlexItem>
22+
<Button
23+
variant="link"
24+
isInline
25+
icon={<XsOpenDrawerRightIcon />}
26+
iconPosition="end"
27+
onClick={() => sideDrawerContext.setSideDrawerContent(sidePanelContent)}
28+
>
29+
{helpText}
30+
</Button>
31+
</FlexItem>
32+
</Flex>
33+
);
34+
};
35+
36+
export default PageDescriptionWithHelp;

‎src/components/Common/XsOpenDrawerRightIcon.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
import { OpenDrawerRightIcon } from '@patternfly/react-icons';
3+
import { t_global_font_size_xs as FontSizeXs } from '@patternfly/react-tokens';
4+
5+
const XsExternalLinkAltIcon: React.FC = () => <OpenDrawerRightIcon style={{ width: FontSizeXs.var, height: FontSizeXs.var }} />;
6+
7+
export default XsExternalLinkAltIcon;

‎src/components/Contribute/ContributePageHeader.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
'use client';
33

44
import * as React from 'react';
5-
import { EditFormData, KnowledgeFormData, SkillFormData } from '@/types';
65
import { useRouter } from 'next/navigation';
7-
import { PageSection, Flex, FlexItem, Title, Content, PageBreadcrumb, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
6+
import { PageSection, Flex, FlexItem, Title, PageBreadcrumb, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
7+
import { EditFormData, KnowledgeFormData, SkillFormData } from '@/types';
8+
import PageDescriptionWithHelp from '@/components/Common/PageDescriptionWithHelp';
89
import {
910
DraftContributionLabel,
1011
KnowledgeContributionLabel,
@@ -17,12 +18,22 @@ interface Props {
1718
isEdit?: boolean;
1819
isSkill?: boolean;
1920
description: React.ReactNode;
21+
helpText: React.ReactNode;
22+
sidePanelContent: React.ReactNode;
2023
actions: React.ReactNode;
2124
}
2225

23-
const ContributePageHeader: React.FC<Props> = ({ editFormData, isEdit = false, isSkill = false, description, actions }) => {
26+
const ContributePageHeader: React.FC<Props> = ({
27+
editFormData,
28+
isEdit = false,
29+
isSkill = false,
30+
description,
31+
helpText,
32+
sidePanelContent,
33+
actions
34+
}) => {
2435
const router = useRouter();
25-
const contributionType = isSkill ? 'skills' : 'knowledge';
36+
const contributionType = isSkill ? 'skill' : 'knowledge';
2637
const viewUrl = `/contribute/${isSkill ? 'skill' : 'knowledge'}/${editFormData?.formData.branchName}${editFormData?.isDraft ? '/isDraft' : ''}`;
2738
const contributionTitle = editFormData?.formData?.submissionSummary || `Draft ${contributionType} contribution`;
2839

@@ -67,7 +78,7 @@ const ContributePageHeader: React.FC<Props> = ({ editFormData, isEdit = false, i
6778
<Title headingLevel="h1" size="2xl">
6879
{!editFormData
6980
? `Submit ${contributionType} contribution`
70-
: editFormData?.formData?.submissionSummary || `Draft ${isSkill ? 'skills' : 'knowledge'} contribution`}
81+
: editFormData?.formData?.submissionSummary || `Draft ${isSkill ? 'skill' : 'knowledge'} contribution`}
7182
</Title>
7283
</FlexItem>
7384
<FlexItem>{isSkill ? <SkillContributionLabel /> : <KnowledgeContributionLabel />}</FlexItem>
@@ -84,7 +95,7 @@ const ContributePageHeader: React.FC<Props> = ({ editFormData, isEdit = false, i
8495
</Flex>
8596
</FlexItem>
8697
<FlexItem>
87-
<Content component="p">{description}</Content>
98+
<PageDescriptionWithHelp description={description} helpText={helpText} sidePanelContent={sidePanelContent} />
8899
</FlexItem>
89100
</Flex>
90101
</FlexItem>

‎src/components/Contribute/ContributionLabels.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const KnowledgeContributionLabel: React.FC<LabelProps> = ({ isCompact }) => (
1616

1717
const SkillContributionLabel: React.FC<LabelProps> = ({ isCompact }) => (
1818
<Label className="skill-contribution-label" icon={<TaskIcon />} variant="outline" isCompact={isCompact}>
19-
Skills
19+
Skill
2020
</Label>
2121
);
2222

‎src/components/Contribute/Knowledge/Edit/KnowledgeForm.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '@patternfly/react-core';
1919
import { KnowledgeEditFormData, KnowledgeFormData } from '@/types';
2020
import { ActionGroupAlertContent } from '@/components/Contribute/types';
21+
import KnowledgeContributionSidePanelHelp from '@/components/SidePanelContents/KnowledgeContributionSidePanelHelp';
2122
import ContributePageHeader from '@/components/Contribute/ContributePageHeader';
2223
import ContributeAlertGroup from '@/components/Contribute/ContributeAlertGroup';
2324
import { storeDraftData, deleteDraftData, doSaveDraft, isDraftDataExist } from '@/components/Contribute/Utils/autoSaveUtils';
@@ -37,6 +38,7 @@ export interface KnowledgeFormProps {
3738

3839
export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ knowledgeEditFormData }) => {
3940
const router = useRouter();
41+
4042
const { data: session } = useSession();
4143
const [knowledgeFormData, setKnowledgeFormData] = React.useState<KnowledgeFormData>(
4244
knowledgeEditFormData?.formData
@@ -133,14 +135,16 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
133135
<ContributePageHeader
134136
isEdit
135137
editFormData={knowledgeEditFormData}
136-
description="Knowledge contributions improve a model’s ability to answer questions accurately. They consist of questions and answers, and
137-
documents which back up that data."
138+
description="Knowledge contributions improve a model’s ability to answer questions accurately. They consist of questions and answers, and documents
139+
which back up that data. To autofill this form from a document, upload a YAML file."
140+
sidePanelContent={<KnowledgeContributionSidePanelHelp />}
141+
helpText="Learn more about knowledge contributions"
138142
actions={
139143
<KnowledgeFormActions
140144
contributionTitle={knowledgeEditFormData?.formData.submissionSummary ?? 'New contribution'}
141145
knowledgeFormData={knowledgeFormData}
142146
isDraft={knowledgeEditFormData?.isDraft}
143-
isSubmitted={knowledgeEditFormData?.isDraft}
147+
isSubmitted={knowledgeEditFormData?.isSubmitted}
144148
setActionGroupAlertContent={setActionGroupAlertContent}
145149
setKnowledgeFormData={setKnowledgeFormData}
146150
/>

0 commit comments

Comments
 (0)