├── LICENSE
├── README.md
├── index.html
├── index.js
└── style.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Armand Benjamin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ChatGPT Bot AI
2 |
3 | ### ChatGPT Bot
4 | this project is how to use chatgpt api to code a chatgpt bot with javascript. we create a project that you can ask anything from chatgpt with javascript❗️
5 | Also we use Rapidapi in this bot too! we use official chatgpt api.
6 |
7 | ## Warning
8 | You need to get your own api key and replace it in index.js file on line 46 :
9 |
10 | ```javascript
11 | 'X-RapidAPI-Key': 'Your Key',
12 | ```
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | ChatGPT Bot | BenDev
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const chatLog = document.getElementById('chat-log');
2 | const userInput = document.getElementById('user-input');
3 | const sendButton = document.getElementById('send-button');
4 | const buttonIcon = document.getElementById('button-icon');
5 | const info = document.querySelector('.info');
6 |
7 | sendButton.addEventListener('click', sendMessage);
8 | userInput.addEventListener('keydown', (event) => {
9 | if (event.key === 'Enter') {
10 | sendMessage();
11 | }
12 | });
13 |
14 | function sendMessage() {
15 | const message = userInput.value.trim();
16 | if (message === '') {
17 | return;
18 | }
19 |
20 | appendMessage('user', message);
21 | userInput.value = '';
22 |
23 | if (message.toLowerCase() === 'developer') {
24 | setTimeout(() => {
25 | appendMessage('bot', 'This Source Coded By Armand Benjamin \nGithub : BenDev202');
26 | }, 2000);
27 | return;
28 | }
29 |
30 | const options = {
31 | method: 'POST',
32 | headers: {
33 | 'x-rapidapi-key': '{YOUR RAPIDAPI-KEY}',
34 | 'x-rapidapi-host': 'chatgpt-chatgpt3-5.p.rapidapi.com',
35 | 'Content-Type': 'application/json'
36 | },
37 | body: JSON.stringify({
38 | model: 'gpt-3.5-turbo-0613',
39 | messages: [
40 | {
41 | role: 'user',
42 | content: message
43 | }
44 | ]
45 | })
46 | };
47 |
48 | fetch('https://chatgpt-chatgpt3-5.p.rapidapi.com/', options)
49 | .then(response => {
50 | if (!response.ok) {
51 | throw new Error(`HTTP error! status: ${response.status}`);
52 | }
53 | return response.json();
54 | })
55 | .then(data => {
56 | console.log('API Response:', data); // Log the entire response for debugging
57 | if (data && data.choices && data.choices.length > 0 && data.choices[0].message && data.choices[0].message.content) {
58 | appendMessage('bot', data.choices[0].message.content);
59 | } else {
60 | throw new Error('Unexpected response structure: ' + JSON.stringify(data));
61 | }
62 | })
63 | .catch(err => {
64 | console.error('Error:', err);
65 | appendMessage('bot', `An error occurred: ${err.message}. Please try again later.`);
66 | })
67 | .finally(() => {
68 | buttonIcon.classList.add('fa-solid', 'fa-paper-plane');
69 | buttonIcon.classList.remove('fas', 'fa-spinner', 'fa-pulse');
70 | });
71 | }
72 |
73 | function appendMessage(sender, message) {
74 | info.style.display = "none";
75 | buttonIcon.classList.remove('fa-solid', 'fa-paper-plane');
76 | buttonIcon.classList.add('fas', 'fa-spinner', 'fa-pulse');
77 |
78 | const messageElement = document.createElement('div');
79 | const iconElement = document.createElement('div');
80 | const chatElement = document.createElement('div');
81 | const icon = document.createElement('i');
82 |
83 | chatElement.classList.add("chat-box");
84 | iconElement.classList.add("icon");
85 | messageElement.classList.add(sender);
86 | messageElement.innerText = message;
87 |
88 | if (sender === 'user') {
89 | icon.classList.add('fa-regular', 'fa-user');
90 | iconElement.setAttribute('id', 'user-icon');
91 | } else {
92 | icon.classList.add('fa-solid', 'fa-robot');
93 | iconElement.setAttribute('id', 'bot-icon');
94 | }
95 |
96 | iconElement.appendChild(icon);
97 | chatElement.appendChild(iconElement);
98 | chatElement.appendChild(messageElement);
99 | chatLog.appendChild(chatElement);
100 | chatLog.scrollTop = chatLog.scrollHeight;
101 | }
102 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
2 |
3 | *{
4 | font-family: 'Poppins', sans-serif;
5 | }
6 |
7 | body{
8 | margin: 0;
9 | padding: 0;
10 | background-color: #343541;
11 | }
12 |
13 | .header{
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | color: #ccc;
18 | border-bottom: 1px solid #5c5c66;
19 | height: 45px;
20 | }
21 |
22 | .header h3{
23 | font-size: 17px;
24 | font-weight: 500;
25 | }
26 |
27 | .container{
28 | max-width: 920px;
29 | height: 100vh;
30 | display: flex;
31 | flex-direction: column;
32 | justify-content: space-between;
33 | margin: 0 auto;
34 | }
35 |
36 | .info{
37 | display: flex;
38 | align-items: center;
39 | justify-content: center;
40 | flex: 20;
41 | }
42 |
43 | .info a{
44 | color: #fff;
45 | text-decoration: none;
46 | font-size: 25px;
47 | font-weight: bold;
48 | transition: all 0.3s ease;
49 | }
50 |
51 | .info a:hover{
52 | color: #4caf50;
53 | }
54 |
55 | .input-container{
56 | background-color: #343541;
57 | padding: 10px;
58 | display: flex;
59 | justify-content: space-between;
60 | border-top: 1px solid #5c5c66;
61 | position: sticky;
62 | bottom: 0;
63 | }
64 |
65 | #user-input{
66 | background-color: #40414f;
67 | color: #fff;
68 | border: none;
69 | outline: none;
70 | padding: 8px;
71 | flex: 9;
72 | font-size: 14px;
73 | font-weight: 400;
74 | border-radius: 5px;
75 | }
76 |
77 | #user-input::placeholder{
78 | color: #8e8e8e;
79 | font-weight: 400;
80 | }
81 |
82 | #send-button{
83 | display: flex;
84 | align-items: center;
85 | justify-content: center;
86 | padding: 8px 20px;
87 | border: none;
88 | border-radius: 5px;
89 | background-color: #4caf50;
90 | color: #fff;
91 | cursor: pointer;
92 | margin-left: 15px;
93 | transition: all 0.3s ease;
94 | }
95 |
96 | #send-button:hover{
97 | background-color: #388e3c;
98 | }
99 |
100 | .chat-container{
101 | flex: 1;
102 | }
103 |
104 | .chat-box{
105 | display: flex;
106 | align-items: center;
107 | padding: 10px 15px;
108 | }
109 |
110 | #chat-log{
111 | margin-bottom: 10px;
112 | font-size: 14px;
113 | line-height: 1.6;
114 | }
115 |
116 | #chat-log i{
117 | margin-right: 10px;
118 | color: #fff;
119 | border-radius: 5px;
120 | }
121 |
122 | .bot, .user{
123 | display: flex;
124 | align-items: flex-start;
125 | color: #eee;
126 | width: 100%;
127 | padding: 15px 7px 15px 10px;
128 | border-radius: 6px;
129 | }
130 |
131 | .bot{
132 | background-color: #444654;
133 | }
134 |
135 | #chat-log #user-icon i{
136 | background-color: #19c37d;
137 | padding: 10px 11px;
138 | }
139 |
140 | #chat-log #bot-icon i{
141 | background-color: #9859b7;
142 | padding: 10px 8px 11px;
143 | }
--------------------------------------------------------------------------------