|
| 1 | +import React, { useState } from 'react'; |
| 2 | +import { |
| 3 | + getLocale, injectIntl, intlShape, isRtl, |
| 4 | +} from '@edx/frontend-platform/i18n'; |
| 5 | + |
| 6 | +import { |
| 7 | + Button, |
| 8 | + Image, |
| 9 | + Form, |
| 10 | + ModalPopup, |
| 11 | + ModalCloseButton, |
| 12 | + useToggle, |
| 13 | + Icon, |
| 14 | + Avatar, |
| 15 | +} from '@edx/paragon'; |
| 16 | + |
| 17 | +import { Close } from '@edx/paragon/icons'; |
| 18 | +import AIInfoImage from '../../assets/images/AI-info.svg'; |
| 19 | +import { AIIcon, ArrowSquareUpIcon } from '../../Icons'; |
| 20 | +import messages from '../messages'; |
| 21 | + |
| 22 | +const aiData = [ |
| 23 | + { |
| 24 | + id: 'id_1', |
| 25 | + request: 'How can I attempt the exams?', |
| 26 | + response: `To approach exams successfully, |
| 27 | + it's important to adopt effective study strategies and time management skills. |
| 28 | + Here are some general tips: Create a Study Plan: |
| 29 | + Outline the topics you need to cover. |
| 30 | + Allocate specific time slots for studying each subject. |
| 31 | + Break down your study sessions into manageable chunks. |
| 32 | + Understand the Exam Format: |
| 33 | + Know the structure of the exam (multiple choice, essays, etc.). |
| 34 | + Understand the point distribution for each section.`, |
| 35 | + }, |
| 36 | + { |
| 37 | + id: 'id_2', |
| 38 | + request: 'request 2', |
| 39 | + response: 'response 2', |
| 40 | + }, |
| 41 | + { |
| 42 | + id: 'id_3', |
| 43 | + request: 'request 3', |
| 44 | + response: '', |
| 45 | + }, |
| 46 | +]; |
| 47 | + |
| 48 | +const AIWidget = ({ intl }) => { |
| 49 | + const [isOpen, open, close] = useToggle(false); |
| 50 | + const [target, setTarget] = useState(null); |
| 51 | + const [isFocused, setIsFocused] = useState(false); |
| 52 | + const [value, setValue] = useState(''); |
| 53 | + |
| 54 | + const inputLength = 200; |
| 55 | + const totalPrompts = 3; |
| 56 | + |
| 57 | + const isLocaleRtl = isRtl(getLocale()); |
| 58 | + |
| 59 | + const hanldeSubmit = (event) => { |
| 60 | + event.preventDefault(); |
| 61 | + }; |
| 62 | + |
| 63 | + const handleInputChange = (event) => { |
| 64 | + setValue(event.target.value); |
| 65 | + }; |
| 66 | + |
| 67 | + return ( |
| 68 | + <div className="ai-container" hidden> |
| 69 | + <Button |
| 70 | + ref={setTarget} |
| 71 | + className={`btn-ai ${isOpen ? 'btn-active' : ''}`} |
| 72 | + onClick={open} |
| 73 | + > |
| 74 | + <AIIcon /> |
| 75 | + </Button> |
| 76 | + <ModalPopup |
| 77 | + positionRef={target} |
| 78 | + isBlocking |
| 79 | + isOpen={isOpen} |
| 80 | + onClose={close} |
| 81 | + placement={`top-${isLocaleRtl ? 'start' : 'end'}`} |
| 82 | + > |
| 83 | + <div className="ai-widget"> |
| 84 | + <div className="ai-header"> |
| 85 | + <AIIcon /> |
| 86 | + <h4>{intl.formatMessage(messages.aiwidgetHeader)}</h4> |
| 87 | + <ModalCloseButton |
| 88 | + variant="black" |
| 89 | + className="ml-2" |
| 90 | + ><Icon src={Close} /> |
| 91 | + </ModalCloseButton> |
| 92 | + </div> |
| 93 | + <div className="ai-body"> |
| 94 | + { |
| 95 | + aiData.length > 0 ? ( |
| 96 | + <div className="chat-wrapper"> |
| 97 | + { |
| 98 | + aiData.map(({ id, request, response }) => ( |
| 99 | + <div className="box" key={id}> |
| 100 | + <div className="chat-row qestion"> |
| 101 | + <div className="icon"> |
| 102 | + <Avatar height="2rem" width="2rem" /> |
| 103 | + </div> |
| 104 | + <div className="text"> |
| 105 | + <p>{request}</p> |
| 106 | + </div> |
| 107 | + </div> |
| 108 | + { |
| 109 | + response.length > 0 && ( |
| 110 | + <div className="chat-row response"> |
| 111 | + <div className="icon"><AIIcon height="2rem" width="2rem" /></div> |
| 112 | + <div className="text"> |
| 113 | + <p>{response}</p> |
| 114 | + </div> |
| 115 | + </div> |
| 116 | + ) |
| 117 | + } |
| 118 | + </div> |
| 119 | + )) |
| 120 | + } |
| 121 | + </div> |
| 122 | + ) : ( |
| 123 | + <div className="no-data"> |
| 124 | + <Image |
| 125 | + src={AIInfoImage} |
| 126 | + alt="Image description" |
| 127 | + /> |
| 128 | + <h4>{intl.formatMessage(messages.aiwidgetLabel)}</h4> |
| 129 | + </div> |
| 130 | + ) |
| 131 | + } |
| 132 | + </div> |
| 133 | + <div className="ai-footer"> |
| 134 | + <div className="form-info text-right"> |
| 135 | + <span className="text-prompts">{intl.formatMessage(messages.aiwidgetPrompts, { prompts: totalPrompts - aiData.length })}</span> |
| 136 | + </div> |
| 137 | + <div className="form-wrapper"> |
| 138 | + <Form onSubmit={hanldeSubmit} className={`ai-form ${isFocused ? 'is-focused' : ''}`}> |
| 139 | + <Form.Control |
| 140 | + onFocus={() => { setIsFocused(true); }} |
| 141 | + onBlur={() => { setIsFocused(false); }} |
| 142 | + value={value} |
| 143 | + autoFocus |
| 144 | + maxLength={inputLength} |
| 145 | + onChange={handleInputChange} |
| 146 | + placeholder={`${intl.formatMessage(messages.aiwidgetLabel)}...`} |
| 147 | + /> |
| 148 | + <span className="word-count">{inputLength - value.length}</span> |
| 149 | + <button |
| 150 | + className="ai-submit-button" |
| 151 | + type="submit" |
| 152 | + > |
| 153 | + <ArrowSquareUpIcon /> |
| 154 | + </button> |
| 155 | + </Form> |
| 156 | + </div> |
| 157 | + </div> |
| 158 | + </div> |
| 159 | + </ModalPopup> |
| 160 | + </div> |
| 161 | + ); |
| 162 | +}; |
| 163 | + |
| 164 | +AIWidget.propTypes = { |
| 165 | + intl: intlShape.isRequired, |
| 166 | +}; |
| 167 | + |
| 168 | +export default injectIntl(AIWidget); |
0 commit comments