Skip to content

Commit 1343cee

Browse files
rsergeenkorsergeenko
committed
#RI-5746 - add text to chatbot form, fix styles
1 parent bb32e52 commit 1343cee

File tree

3 files changed

+84
-72
lines changed

3 files changed

+84
-72
lines changed

‎redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx‎

Lines changed: 77 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -86,80 +86,86 @@ const ChatForm = (props: Props) => {
8686
}
8787

8888
return (
89-
<EuiToolTip
90-
content={validation ? (
91-
<div className={styles.tooltipContent}>
92-
<div>
93-
{validation.title && (
94-
<>
95-
<EuiTitle size="xxs"><span>{validation.title}</span></EuiTitle>
96-
<EuiSpacer size="s" />
97-
</>
98-
)}
99-
{validation.content && (<EuiText size="xs">{validation.content}</EuiText>)}
89+
<div>
90+
<EuiToolTip
91+
content={validation ? (
92+
<div className={styles.tooltipContent}>
93+
<div>
94+
{validation.title && (
95+
<>
96+
<EuiTitle size="xxs"><span>{validation.title}</span></EuiTitle>
97+
<EuiSpacer size="s" />
98+
</>
99+
)}
100+
{validation.content && (<EuiText size="xs">{validation.content}</EuiText>)}
101+
</div>
102+
{validation.icon}
100103
</div>
101-
{validation.icon}
102-
</div>
103-
) : undefined}
104-
className={styles.validationTooltip}
105-
display="block"
106-
>
107-
<EuiForm
108-
className={cx(styles.wrapper, { [styles.isFormDisabled]: validation })}
109-
component="form"
110-
onSubmit={handleSubmitForm}
111-
onKeyDown={handleKeyDown}
104+
) : undefined}
105+
className={styles.validationTooltip}
106+
display="block"
112107
>
113-
<EuiTextArea
114-
inputRef={textAreaRef}
115-
placeholder={placeholder || 'Ask me about Redis'}
116-
className={styles.textarea}
117-
value={value}
118-
onChange={handleChange}
119-
disabled={!!validation}
120-
data-testid="ai-message-textarea"
121-
/>
122-
<EuiPopover
123-
ownFocus
124-
initialFocus={false}
125-
isOpen={isAgreementsPopoverOpen}
126-
anchorPosition="downRight"
127-
closePopover={() => setIsAgreementsPopoverOpen(false)}
128-
panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
129-
anchorClassName={styles.popoverAnchor}
130-
button={(
131-
<EuiButton
132-
fill
133-
size="s"
134-
color="secondary"
135-
disabled={!value.length || isDisabled}
136-
className={styles.submitBtn}
137-
iconType={SendIcon}
138-
type="submit"
139-
aria-label="submit"
140-
data-testid="ai-submit-message-btn"
141-
/>
142-
)}
108+
<EuiForm
109+
className={cx(styles.wrapper, { [styles.isFormDisabled]: validation })}
110+
component="form"
111+
onSubmit={handleSubmitForm}
112+
onKeyDown={handleKeyDown}
143113
>
144-
<>
145-
{agreements}
146-
<EuiSpacer size="m" />
147-
<EuiButton
148-
fill
149-
color="secondary"
150-
size="s"
151-
className={styles.agreementsAccept}
152-
onClick={submitMessage}
153-
onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
154-
type="button"
155-
data-testid="ai-accept-agreements"
156-
>
157-
I accept
158-
</EuiButton>
159-
</>
160-
</EuiPopover>
161-
</EuiForm>
162-
</EuiToolTip>
114+
<EuiTextArea
115+
inputRef={textAreaRef}
116+
placeholder={placeholder || 'Ask me about Redis'}
117+
className={styles.textarea}
118+
value={value}
119+
onChange={handleChange}
120+
disabled={!!validation}
121+
data-testid="ai-message-textarea"
122+
/>
123+
<EuiPopover
124+
ownFocus
125+
initialFocus={false}
126+
isOpen={isAgreementsPopoverOpen}
127+
anchorPosition="downRight"
128+
closePopover={() => setIsAgreementsPopoverOpen(false)}
129+
panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
130+
anchorClassName={styles.popoverAnchor}
131+
button={(
132+
<EuiButton
133+
fill
134+
size="s"
135+
color="secondary"
136+
disabled={!value.length || isDisabled}
137+
className={styles.submitBtn}
138+
iconType={SendIcon}
139+
type="submit"
140+
aria-label="submit"
141+
data-testid="ai-submit-message-btn"
142+
/>
143+
)}
144+
>
145+
<>
146+
{agreements}
147+
<EuiSpacer size="m" />
148+
<EuiButton
149+
fill
150+
color="secondary"
151+
size="s"
152+
className={styles.agreementsAccept}
153+
onClick={submitMessage}
154+
onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
155+
type="button"
156+
data-testid="ai-accept-agreements"
157+
>
158+
I accept
159+
</EuiButton>
160+
</>
161+
</EuiPopover>
162+
</EuiForm>
163+
</EuiToolTip>
164+
<EuiText textAlign="center" size="xs" className={styles.agreementText}>
165+
Verify the accuracy of any information provided by Redis Copilot before using it
166+
</EuiText>
167+
</div>
168+
163169
)
164170
}
165171

‎redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/styles.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,10 @@
8585
margin-left: auto;
8686
}
8787
}
88+
89+
.agreementText {
90+
margin-top: 6px;
91+
font-size: 10px !important;
92+
line-height: 1.15 !important;
93+
color: var(--euiColorMediumShade) !important;
94+
}

‎redisinsight/ui/src/components/side-panels/styles.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ $animation-duration: 300ms;
3939
height: calc(100% - 60px);
4040
display: flex;
4141
flex-direction: column;
42-
padding-bottom: 12px;
4342
}
4443

4544
.trigger {

0 commit comments

Comments
 (0)