Skip to content

Commit f95d431

Browse files
harshilp24harshilp24
authored
feat: Ask AI using Agents (#2886)
## Description Provide a concise summary of the changes made in this pull request - ## Pull request type Check the appropriate box: - [ ] Review Fixes - [ ] Documentation Overhaul - [ ] Feature/Story - Link one or more Engineering Tickets * - [ ] A-Force - [ ] Error in documentation - [ ] Maintenance ## Documentation tickets Link to one or more documentation tickets: - ## Checklist From the below options, select the ones that are applicable: - [ ] Checked for Grammarly suggestions. - [ ] Adhered to the writing checklist. - [ ] Adhered to the media checklist. - [ ] Verified and updated cross-references or added redirect rules. - [ ] Tested the redirect rules on deploy preview. - [ ] Validated the modifications made to the content on the deploy preview. - [ ] Validated the CSS modifications on different screen sizes.
1 parent c261980 commit f95d431

File tree

3 files changed

+225
-64
lines changed

3 files changed

+225
-64
lines changed

‎website/src/components/ask-ai/AISearchButton.jsx‎

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,32 @@
1+
// src/components/ask-ai/AISearchButton.jsx
2+
13
import React, { Component } from 'react';
24
import AISearchModal from './AISearchModal';
35

46
class AISearchButton extends Component {
5-
constructor(props) {
6-
super(props);
7-
this.state = {
8-
isModalOpen: false,
9-
inputValue: ''
10-
};
11-
}
12-
13-
toggleModal = () => {
14-
this.setState((prevState) => ({
15-
isModalOpen: !prevState.isModalOpen
16-
}));
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
isModalOpen: false,
1711
};
12+
}
1813

19-
handleInputChange = (event) => {
20-
this.setState({
21-
inputValue: event.target.value
22-
});
23-
};
14+
toggleModal = () => {
15+
this.setState((prevState) => ({
16+
isModalOpen: !prevState.isModalOpen,
17+
}));
18+
};
2419

25-
render() {
26-
return (
27-
<div className='search-link'>
28-
<button className='custom-doc-Search-bar hideSearchButtons' onClick={this.toggleModal}>Ask Appsmith AI</button>
29-
<AISearchModal
30-
show={this.state.isModalOpen}
31-
closeModal={this.toggleModal}
32-
/>
33-
</div>
34-
);
35-
}
20+
render() {
21+
return (
22+
<div className='search-link'>
23+
<button className='custom-doc-Search-bar hideSearchButtons' onClick={this.toggleModal}>
24+
Ask Appsmith AI
25+
</button>
26+
<AISearchModal show={this.state.isModalOpen} closeModal={this.toggleModal} />
27+
</div>
28+
);
29+
}
3630
}
3731

3832
export default AISearchButton;

‎website/src/components/ask-ai/AISearchModal.jsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
11
import React, { useEffect, useRef } from 'react';
22
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
3-
import AISearch from '@site/src/components/ask-ai/AISearch';
43
import './css/AISearch.css';
54

65
const AISearchModal = ({ show, closeModal }) => {
7-
const modalRef = useRef();
8-
const childRef = useRef();
6+
const modalRef = useRef();
97

10-
const handleResetModal = () => {
11-
if (childRef.current) {
12-
childRef.current.resetModal();
8+
useEffect(() => {
9+
if (ExecutionEnvironment.canUseDOM) {
10+
const checkIfClickedOutside = (e) => {
11+
if (modalRef.current && !modalRef.current.contains(e.target) && show) {
12+
closeModal();
1313
}
14-
};
15-
16-
17-
useEffect(() => {
18-
if (ExecutionEnvironment.canUseDOM) {
19-
const checkIfClickedOutside = (e) => {
20-
if (modalRef.current && !modalRef.current.contains(e.target) && show) {
21-
handleResetModal();
22-
closeModal();
23-
}
24-
};
25-
26-
document.addEventListener('mousedown', checkIfClickedOutside);
27-
28-
return () => {
29-
document.removeEventListener('mousedown', checkIfClickedOutside);
30-
};
31-
}
32-
}, [show, closeModal]);
33-
34-
return (
35-
<div className={`ai-search-modal ${show ? 'show' : ''}`}>
36-
<div className="ai-search-modal-content" ref={modalRef}>
37-
<div className="">
38-
<AISearch ref={childRef} />
39-
</div>
40-
</div>
41-
</div>
42-
);
14+
};
15+
document.addEventListener('mousedown', checkIfClickedOutside);
16+
return () => document.removeEventListener('mousedown', checkIfClickedOutside);
17+
}
18+
}, [show, closeModal]);
19+
20+
return (
21+
<div className={`ai-search-modal ${show ? 'show' : ''}`}>
22+
<div className="ai-search-modal-content no-padding" ref={modalRef}>
23+
<iframe
24+
src="https://harshil.appsmithai.com/app/ai-agent-5/page-6837e5ba8de6fb4180ad8c5b?embed=true"
25+
title="Ask AI Agent"
26+
width="100%"
27+
height="100%"
28+
style={{
29+
border: 'none',
30+
margin: 0,
31+
padding: 0,
32+
display: 'block',
33+
}}
34+
allow="clipboard-write"
35+
></iframe>
36+
</div>
37+
</div>
38+
);
4339
};
4440

4541
export default AISearchModal;

‎website/src/components/ask-ai/css/AISearch.css‎

Lines changed: 172 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,4 +315,175 @@ h5 {
315315
margin-left: 10px;
316316
padding: 0;
317317
margin-bottom: 10px;
318-
}
318+
}
319+
320+
.ai-feedback-widget {
321+
margin: 20px;
322+
padding-top: 12px;
323+
border-top: 1px solid #eee;
324+
font-family: inherit;
325+
text-align: left;
326+
}
327+
328+
.ai-feedback-label {
329+
font-weight: 600;
330+
font-size: 14px;
331+
margin-bottom: 8px;
332+
}
333+
334+
.ai-feedback-buttons {
335+
display: flex;
336+
gap: 12px;
337+
margin-bottom: 8px;
338+
}
339+
340+
.thumb-button {
341+
font-size: 20px;
342+
border: 1px solid #ccc;
343+
border-radius: 8px;
344+
padding: 6px 12px;
345+
cursor: pointer;
346+
background-color: #f9f9f9;
347+
transition: background 0.2s ease;
348+
}
349+
350+
.thumb-button.selected {
351+
background-color: #def;
352+
border-color: #09f;
353+
}
354+
355+
.ai-feedback-widget textarea {
356+
width: 100%;
357+
resize: vertical;
358+
padding: 10px;
359+
border: 1px solid #ccc;
360+
border-radius: 6px;
361+
font-size: 14px;
362+
margin-bottom: 10px;
363+
font-family: inherit;
364+
}
365+
366+
.submit-feedback-btn {
367+
background-color: #0b5fff;
368+
color: white;
369+
border: none;
370+
padding: 8px 16px;
371+
border-radius: 6px;
372+
font-size: 14px;
373+
cursor: pointer;
374+
font-weight: 500;
375+
}
376+
377+
.submit-feedback-btn:disabled {
378+
background-color: #ccc;
379+
cursor: not-allowed;
380+
}
381+
382+
.ai-feedback-widget {
383+
margin: 20px;
384+
padding-top: 12px;
385+
border-top: 1px solid #eee;
386+
font-family: inherit;
387+
text-align: left;
388+
}
389+
390+
.ai-feedback-label {
391+
font-weight: 600;
392+
font-size: 14px;
393+
margin-bottom: 8px;
394+
}
395+
396+
.ai-feedback-buttons {
397+
display: flex;
398+
gap: 12px;
399+
margin-bottom: 8px;
400+
}
401+
402+
.thumb-button {
403+
font-size: 20px;
404+
border: 1px solid #ccc;
405+
border-radius: 8px;
406+
padding: 6px 12px;
407+
cursor: pointer;
408+
background-color: #f9f9f9;
409+
transition: background 0.2s ease;
410+
}
411+
412+
.thumb-button.selected {
413+
background-color: #def;
414+
border-color: #09f;
415+
}
416+
417+
.ai-feedback-widget textarea {
418+
width: 100%;
419+
resize: vertical;
420+
padding: 10px;
421+
border: 1px solid #ccc;
422+
border-radius: 6px;
423+
font-size: 14px;
424+
margin-bottom: 10px;
425+
font-family: inherit;
426+
}
427+
428+
.submit-feedback-btn {
429+
background-color: #0b5fff;
430+
color: white;
431+
border: none;
432+
padding: 8px 16px;
433+
border-radius: 6px;
434+
font-size: 14px;
435+
cursor: pointer;
436+
font-weight: 500;
437+
}
438+
439+
440+
.ai-toast {
441+
position: fixed;
442+
bottom: 30px;
443+
left: 50%;
444+
transform: translateX(-50%);
445+
background-color: #2e7d32;
446+
color: white;
447+
padding: 12px 24px;
448+
border-radius: 8px;
449+
font-size: 14px;
450+
font-weight: 500;
451+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
452+
z-index: 9999;
453+
animation: fadeInOut 3s ease forwards;
454+
}
455+
456+
@keyframes fadeInOut {
457+
0% {
458+
opacity: 0;
459+
transform: translateX(-50%) translateY(20px);
460+
}
461+
10% {
462+
opacity: 1;
463+
transform: translateX(-50%) translateY(0);
464+
}
465+
90% {
466+
opacity: 1;
467+
transform: translateX(-50%) translateY(0);
468+
}
469+
100% {
470+
opacity: 0;
471+
transform: translateX(-50%) translateY(20px);
472+
}
473+
}
474+
475+
.ai-search-modal-content.no-padding {
476+
position: fixed;
477+
top: 50%;
478+
left: 50%;
479+
transform: translate(-50%, -50%);
480+
width: 80vw; /* Reduced from 90% for tighter layout */
481+
max-width: 960px;
482+
height: 85vh;
483+
background: #fff;
484+
padding: 0;
485+
margin: 0;
486+
border: none;
487+
border-radius: 6px;
488+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
489+
}

0 commit comments

Comments
 (0)