Skip to content

Commit a91c6e0

Browse files
vishnoianilvishnoianil
committed
Minor UI fixes in knowledge form, chat and custom endpoint pages
- Knowledge document upload/success notification is shown in top right now - Fix the styling of custom endpoint page - Chat related error notification are show in top right. Signed-off-by: Anil Vishnoi <[email protected]>
1 parent ea2a077 commit a91c6e0

File tree

3 files changed

+158
-127
lines changed

3 files changed

+158
-127
lines changed

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

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ import {
2020
Form,
2121
FormGroup,
2222
TextInput,
23-
Alert
23+
Alert,
24+
AlertGroup,
25+
AlertActionCloseButton
2426
} from '@patternfly/react-core/';
2527
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2628
import { faBroom } from '@fortawesome/free-solid-svg-icons';
@@ -38,11 +40,11 @@ const ChatPage: React.FC = () => {
3840
const [messages, setMessages] = useState<Message[]>([]);
3941
const [isLoading, setIsLoading] = useState(false);
4042
const [isSelectOpen, setIsSelectOpen] = useState(false);
41-
const [isModelSelectedOnSend, setIsModelSelectedOnSend] = useState(true);
42-
const [isPromptOnSend, setIsPromptOnSend] = useState(true);
4343
const [selectedModel, setSelectedModel] = useState<Model | null>(null);
4444
const [customModels, setCustomModels] = useState<Model[]>([]);
4545
const [defaultModels, setDefaultModels] = useState<Model[]>([]);
46+
const [showNoModelAlert, setShowNoModelAlert] = useState<boolean>(false);
47+
const [showNoQuestionAlert, setShowNoQuestionAlert] = useState<boolean>(false);
4648
const messagesContainerRef = useRef<HTMLDivElement>(null);
4749

4850
useEffect(() => {
@@ -80,7 +82,7 @@ const ChatPage: React.FC = () => {
8082
const selected = [...defaultModels, ...customModels].find((model) => model.name === value) || null;
8183
setSelectedModel(selected);
8284
setIsSelectOpen(false);
83-
setIsModelSelectedOnSend(true);
85+
setShowNoModelAlert(false);
8486
};
8587

8688
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -102,17 +104,17 @@ const ChatPage: React.FC = () => {
102104
};
103105

104106
const handleQuestionFieldSelected = () => {
105-
setIsPromptOnSend(true);
107+
setShowNoQuestionAlert(false);
106108
};
107109

108110
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
109111
event.preventDefault();
110112
if (!selectedModel) {
111-
setIsModelSelectedOnSend(false);
113+
setShowNoModelAlert(true);
112114
return;
113115
}
114116
if (!question.trim()) {
115-
setIsPromptOnSend(false);
117+
setShowNoQuestionAlert(true);
116118
return;
117119
}
118120

@@ -326,14 +328,30 @@ const ChatPage: React.FC = () => {
326328
<Button variant="primary" type="submit">
327329
Send
328330
</Button>
329-
{!isModelSelectedOnSend && (
331+
{showNoModelAlert && (
330332
<div>
331-
<Alert variant="danger" title="No Model Selected" ouiaId="DangerAlert" />
333+
<AlertGroup isToast isLiveRegion>
334+
<Alert
335+
timeout
336+
variant="danger"
337+
title="No Model Selected. Please select the model from the dropdown list."
338+
ouiaId="DangerAlert"
339+
actionClose={<AlertActionCloseButton onClose={() => setShowNoModelAlert(false)} />}
340+
></Alert>
341+
</AlertGroup>
332342
</div>
333343
)}
334-
{!isPromptOnSend && (
344+
{showNoQuestionAlert && (
335345
<div>
336-
<Alert variant="danger" title="No Question Added!" ouiaId="DangerAlert" />
346+
<AlertGroup isToast isLiveRegion>
347+
<Alert
348+
timeout
349+
variant="danger"
350+
title="No Question Added. Please write a question in the provided text box."
351+
ouiaId="DangerAlert"
352+
actionClose={<AlertActionCloseButton onClose={() => setShowNoQuestionAlert(false)} />}
353+
/>
354+
</AlertGroup>
337355
</div>
338356
)}
339357
</Form>

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

Lines changed: 96 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
DataListItem,
1616
DataListItemCells,
1717
DataListItemRow,
18+
Flex,
19+
FlexItem,
1820
Form,
1921
FormGroup,
2022
InputGroup,
@@ -23,7 +25,6 @@ import {
2325
ModalFooter,
2426
ModalHeader,
2527
ModalVariant,
26-
Page,
2728
PageBreadcrumb,
2829
PageSection,
2930
TextInput,
@@ -137,107 +138,109 @@ const EndpointsPage: React.FC = () => {
137138
</PageBreadcrumb>
138139

139140
<PageSection hasBodyWrapper={false}>
140-
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
141-
Custom Model Endpoints
142-
</Title>
141+
<Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
142+
<FlexItem>
143+
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '5' }}>
144+
Custom Model Endpoints
145+
</Title>
146+
</FlexItem>
147+
</Flex>
143148
<Content>
144149
<br />
145150
Manage your own customer model endpoints. If you have a custom model that is served by an endpoint, you can add it here. This will allow you
146151
to use the custom model in the playground chat.
147152
</Content>
148153
</PageSection>
149-
<Page>
150-
<PageSection hasBodyWrapper={false}>
151-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
152-
<Title headingLevel="h1">Manage Endpoints</Title>
153-
<Button onClick={handleAddEndpoint}>Add Endpoint</Button>
154-
</div>
155-
<DataList aria-label="Endpoints list">
156-
{endpoints.map((endpoint) => (
157-
<DataListItem key={endpoint.id}>
158-
<DataListItemRow wrapModifier="breakWord">
159-
<DataListItemCells
160-
dataListCells={[
161-
<DataListCell key="url">
162-
<strong>URL:</strong> {endpoint.url}
163-
</DataListCell>,
164-
<DataListCell key="modelName">
165-
<strong>Model Name:</strong> {endpoint.modelName}
166-
</DataListCell>,
167-
<DataListCell key="apiKey">
168-
<strong>API Key:</strong> {renderApiKey(endpoint.apiKey, endpoint.isApiKeyVisible || false)}
169-
<Button variant="link" onClick={() => toggleApiKeyVisibility(endpoint.id)}>
170-
{endpoint.isApiKeyVisible ? <EyeSlashIcon /> : <EyeIcon />}
171-
</Button>
172-
</DataListCell>
173-
]}
174-
/>
175-
<DataListAction aria-labelledby="endpoint-actions" id="endpoint-actions" aria-label="Actions">
176-
<Button variant="primary" onClick={() => handleEditEndpoint(endpoint)}>
177-
Edit
178-
</Button>
179-
<Button variant="danger" onClick={() => handleDeleteEndpoint(endpoint.id)}>
180-
Delete
181-
</Button>
182-
</DataListAction>
183-
</DataListItemRow>
184-
</DataListItem>
185-
))}
186-
</DataList>
187-
</PageSection>
188-
{isModalOpen && (
189-
<Modal
190-
variant={ModalVariant.medium}
191-
title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'}
192-
isOpen={isModalOpen}
193-
onClose={() => handleModalToggle()}
194-
aria-labelledby="endpoint-modal-title"
195-
aria-describedby="endpoint-body-variant"
196-
>
197-
<ModalHeader title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'} labelId="endpoint-modal-title" titleIconVariant="info" />
198-
<ModalBody id="endpoint-body-variant">
199-
<Form>
200-
<FormGroup label="URL" isRequired fieldId="url">
201-
<TextInput isRequired type="text" id="url" name="url" value={url} onChange={(_, value) => setUrl(value)} placeholder="Enter URL" />
202-
</FormGroup>
203-
<FormGroup label="Model Name" isRequired fieldId="modelName">
154+
<PageSection hasBodyWrapper={false}>
155+
<Flex justifyContent={{ default: 'justifyContentFlexEnd' }} alignItems={{ default: 'alignItemsFlexEnd' }}>
156+
<FlexItem>
157+
<Button onClick={handleAddEndpoint}>Add Custom Endpoint</Button>
158+
</FlexItem>
159+
</Flex>
160+
<DataList aria-label="Endpoints list">
161+
{endpoints.map((endpoint) => (
162+
<DataListItem key={endpoint.id}>
163+
<DataListItemRow wrapModifier="breakWord">
164+
<DataListItemCells
165+
dataListCells={[
166+
<DataListCell key="url">
167+
<strong>URL:</strong> {endpoint.url}
168+
</DataListCell>,
169+
<DataListCell key="modelName">
170+
<strong>Model Name:</strong> {endpoint.modelName}
171+
</DataListCell>,
172+
<DataListCell key="apiKey">
173+
<strong>API Key:</strong> {renderApiKey(endpoint.apiKey, endpoint.isApiKeyVisible || false)}
174+
<Button variant="link" onClick={() => toggleApiKeyVisibility(endpoint.id)}>
175+
{endpoint.isApiKeyVisible ? <EyeSlashIcon /> : <EyeIcon />}
176+
</Button>
177+
</DataListCell>
178+
]}
179+
/>
180+
<DataListAction aria-labelledby="endpoint-actions" id="endpoint-actions" aria-label="Actions">
181+
<Button variant="primary" onClick={() => handleEditEndpoint(endpoint)}>
182+
Edit
183+
</Button>
184+
<Button variant="danger" onClick={() => handleDeleteEndpoint(endpoint.id)}>
185+
Delete
186+
</Button>
187+
</DataListAction>
188+
</DataListItemRow>
189+
</DataListItem>
190+
))}
191+
</DataList>
192+
</PageSection>
193+
{isModalOpen && (
194+
<Modal
195+
variant={ModalVariant.medium}
196+
title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'}
197+
isOpen={isModalOpen}
198+
onClose={() => handleModalToggle()}
199+
aria-labelledby="endpoint-modal-title"
200+
aria-describedby="endpoint-body-variant"
201+
>
202+
<ModalHeader title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'} labelId="endpoint-modal-title" titleIconVariant="info" />
203+
<ModalBody id="endpoint-body-variant">
204+
<Form>
205+
<FormGroup label="URL" isRequired fieldId="url">
206+
<TextInput isRequired type="text" id="url" name="url" value={url} onChange={(_, value) => setUrl(value)} placeholder="Enter URL" />
207+
</FormGroup>
208+
<FormGroup label="Model Name" isRequired fieldId="modelName">
209+
<TextInput
210+
isRequired
211+
type="text"
212+
id="modelName"
213+
name="modelName"
214+
value={modelName}
215+
onChange={(_, value) => setModelName(value)}
216+
placeholder="Enter Model Name"
217+
/>
218+
</FormGroup>
219+
<FormGroup label="API Key" isRequired fieldId="apiKey">
220+
<InputGroup>
204221
<TextInput
205222
isRequired
206-
type="text"
207-
id="modelName"
208-
name="modelName"
209-
value={modelName}
210-
onChange={(_, value) => setModelName(value)}
211-
placeholder="Enter Model Name"
223+
type="password"
224+
id="apiKey"
225+
name="apiKey"
226+
value={apiKey}
227+
onChange={(_, value) => setApiKey(value)}
228+
placeholder="Enter API Key"
212229
/>
213-
</FormGroup>
214-
<FormGroup label="API Key" isRequired fieldId="apiKey">
215-
<InputGroup>
216-
<TextInput
217-
isRequired
218-
type="password"
219-
id="apiKey"
220-
name="apiKey"
221-
value={apiKey}
222-
onChange={(_, value) => setApiKey(value)}
223-
placeholder="Enter API Key"
224-
/>
225-
</InputGroup>
226-
</FormGroup>
227-
</Form>
228-
</ModalBody>
229-
<ModalFooter>
230-
<Button key="save" variant="primary" onClick={handleSaveEndpoint}>
231-
Save
232-
</Button>
233-
,
234-
<Button key="cancel" variant="link" onClick={handleModalToggle}>
235-
Cancel
236-
</Button>
237-
</ModalFooter>
238-
</Modal>
239-
)}
240-
</Page>
230+
</InputGroup>
231+
</FormGroup>
232+
</Form>
233+
</ModalBody>
234+
<ModalFooter>
235+
<Button key="save" variant="primary" onClick={handleSaveEndpoint}>
236+
Save
237+
</Button>
238+
<Button key="cancel" variant="link" onClick={handleModalToggle}>
239+
Cancel
240+
</Button>
241+
</ModalFooter>
242+
</Modal>
243+
)}
241244
</AppLayout>
242245
);
243246
};

‎src/components/Contribute/Knowledge/Native/DocumentInformation/DocumentInformation.tsx‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
33
import { FormFieldGroupHeader, FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
44
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
55
import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
6-
import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core/dist/dynamic/components/Alert';
6+
import { Alert, AlertActionLink, AlertActionCloseButton, AlertGroup } from '@patternfly/react-core/dist/dynamic/components/Alert';
77
import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
88
import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
99
import ExclamationCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/exclamation-circle-icon';
@@ -327,30 +327,40 @@ const DocumentInformation: React.FC<Props> = ({
327327
</>
328328
)}
329329
{alertInfo && (
330-
<Alert variant={alertInfo.type} title={alertInfo.title} actionClose={<AlertActionCloseButton onClose={() => setAlertInfo(undefined)} />}>
331-
{alertInfo.message}
332-
{alertInfo.link && (
333-
<AlertActionLink href={alertInfo.link} target="_blank" rel="noopener noreferrer">
334-
View it here
335-
</AlertActionLink>
336-
)}
337-
</Alert>
338-
)}
339-
{successAlertTitle && successAlertMessage && (
340-
<Alert
341-
variant="success"
342-
title={successAlertTitle}
343-
actionClose={<AlertActionCloseButton onClose={onCloseSuccessAlert} />}
344-
actionLinks={
345-
successAlertLink ? (
346-
<AlertActionLink component="a" href={successAlertLink} target="_blank" rel="noopener noreferrer">
330+
<AlertGroup isToast isLiveRegion>
331+
<Alert
332+
timeout
333+
variant={alertInfo.type}
334+
title={alertInfo.title}
335+
actionClose={<AlertActionCloseButton onClose={() => setAlertInfo(undefined)} />}
336+
>
337+
{alertInfo.message}
338+
{alertInfo.link && (
339+
<AlertActionLink href={alertInfo.link} target="_blank" rel="noopener noreferrer">
347340
View it here
348341
</AlertActionLink>
349-
) : null
350-
}
351-
>
352-
{successAlertMessage}
353-
</Alert>
342+
)}
343+
</Alert>
344+
</AlertGroup>
345+
)}
346+
{successAlertTitle && successAlertMessage && (
347+
<AlertGroup isToast isLiveRegion>
348+
<Alert
349+
timeout
350+
variant="success"
351+
title={successAlertTitle}
352+
actionClose={<AlertActionCloseButton onClose={onCloseSuccessAlert} />}
353+
actionLinks={
354+
successAlertLink ? (
355+
<AlertActionLink component="a" href={successAlertLink} target="_blank" rel="noopener noreferrer">
356+
View it here
357+
</AlertActionLink>
358+
) : null
359+
}
360+
>
361+
{successAlertMessage}
362+
</Alert>
363+
</AlertGroup>
354364
)}
355365
{failureAlertTitle && failureAlertMessage && (
356366
<Alert variant="danger" title={failureAlertTitle} actionClose={<AlertActionCloseButton onClose={onCloseFailureAlert} />}>

0 commit comments

Comments
 (0)