├── API.txt
├── Custom Bot
├── README.md
├── index.html
├── main.js
└── style.css


/API.txt:
--------------------------------------------------------------------------------
 1 | <script>
 2 |         const chatContent = document.getElementById("chat-content");
 3 |         const chatForm = document.getElementById("chat-form");
 4 |         const userInput = document.getElementById("user-input");
 5 | 
 6 |         function createMessageElement(message, fromUser) {
 7 |             const messageElement = document.createElement("div");
 8 |             messageElement.classList.add("max-w-md", "break-words", "px-4", "py-2", "rounded-full");
 9 |             messageElement.classList.add(fromUser ? "bg-blue-500" : "bg-white");
10 |             messageElement.classList.add(fromUser ? "text-white" : "text-gray-800");
11 |             messageElement.classList.add(fromUser ? "ml-auto" : "mr-auto");
12 |             messageElement.textContent = message;
13 | 
14 |             return messageElement;
15 |         }
16 | 
17 |         async function fetchResponse(userMessage) {
18 |             try {
19 |                 const response = await fetch("https://backend.buildpicoapps.com/aero/run/llm-api?pk=v1-Z0FBQUFBQm5IZkJDMlNyYUVUTjIyZVN3UWFNX3BFTU85SWpCM2NUMUk3T2dxejhLSzBhNWNMMXNzZlp3c09BSTR6YW1Sc1BmdGNTVk1GY0liT1RoWDZZX1lNZlZ0Z1dqd3c9PQ==", {
20 |                     method: "POST",
21 |                     headers: {
22 |                         "Content-Type": "application/json"
23 |                     },
24 |                     body: JSON.stringify({
25 |                         prompt: userMessage
26 |                     })
27 |                 });
28 | 
29 |                 if (!response.ok) {
30 |                     console.error("Error:", response.statusText);
31 |                     return "There was an error. Please try again later.";
32 |                 }
33 | 
34 |                 const data = await response.json();
35 | 
36 |                 if (data.status === "success") {
37 |                     return data.text;
38 |                 } else {
39 |                     console.error("Error:", data);
40 |                     return "There was an error. Please try again later.";
41 |                 }
42 |             } catch (error) {
43 |                 console.error("Error:", error);
44 |                 return "There was an error. Please try again later.";
45 |             }
46 |         }
47 | 
48 |         chatForm.addEventListener("submit", async (event) => {
49 |             event.preventDefault();
50 | 
51 |             const userMessage = userInput.value.trim();
52 |             if (!userMessage) {
53 |                 return;
54 |             }
55 | 
56 |             chatContent.appendChild(createMessageElement(userMessage, true));
57 |             userInput.value = "";
58 | 
59 |             const botResponse = await fetchResponse(userMessage);
60 |             chatContent.appendChild(createMessageElement(botResponse, false));
61 |         });
62 |     </script>


--------------------------------------------------------------------------------
/Custom Bot:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     const chatContent = document.getElementById("chat-content");
 3 |     const chatForm = document.getElementById("chat-form");
 4 |     const userInput = document.getElementById("user-input");
 5 | 
 6 |     async function fetchResponse(userMessage) {
 7 |         const assistantDetails = `YOUR PROPMT`;
 8 | 
 9 |         try {
10 |             const response = await fetch("https://backend.buildpicoapps.com/aero/run/llm-api?pk=v1-Z0FBQUFBQm5IZkJDMlNyYUVUTjIyZVN3UWFNX3BFTU85SWpCM2NUMUk3T2dxejhLSzBhNWNMMXNzZlp3c09BSTR6YW1Sc1BmdGNTVk1GY0liT1RoWDZZX1lNZlZ0Z1dqd3c9PQ==", {
11 |                 method: "POST",
12 |                 headers: {
13 |                     "Content-Type": "application/json"
14 |                 },
15 |                 body: JSON.stringify({
16 |                     prompt: `${assistantDetails}\nUser: ${userMessage}\nRiya Sharma:`
17 |                 })
18 |             });
19 | 
20 |             if (!response.ok) {
21 |                 return "Error: Please try again later.";
22 |             }
23 | 
24 |             const data = await response.json();
25 |             return data.status === "success" ? data.text : "Error: Please try again later.";
26 |         } catch (error) {
27 |             console.error("Error:", error);
28 |             return "Error: Please try again later.";
29 |         }
30 |     }
31 | 
32 |     chatForm.addEventListener("submit", async (event) => {
33 |         event.preventDefault();
34 | 
35 |         const userMessage = userInput.value.trim();
36 |         if (!userMessage) return;
37 | 
38 |         // Display user message
39 |         const userMessageElement = document.createElement("div");
40 |         userMessageElement.textContent = userMessage;
41 |         userMessageElement.classList.add("user-message");
42 |         chatContent.appendChild(userMessageElement);
43 | 
44 |         userInput.value = ""; // Clear input field
45 | 
46 |         // Fetch and display bot response
47 |         const botResponse = await fetchResponse(userMessage);
48 |         const botMessageElement = document.createElement("div");
49 |         botMessageElement.textContent = botResponse;
50 |         botMessageElement.classList.add("bot-message");
51 |         chatContent.appendChild(botMessageElement);
52 | 
53 |         // Scroll to bottom
54 |         chatContent.scrollTop = chatContent.scrollHeight;
55 |     });
56 | </script>
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Chat Assistant
 2 | 
 3 | A simple web-based chat assistant built with HTML, CSS, and JavaScript. This application allows users to interact with an AI assistant, send messages, and receive responses in real-time. The assistant can handle both text and image generation requests through a backend API.
 4 | 
 5 | ## Features
 6 | 
 7 | - **User Interface**: 
 8 |   - A clean and modern design using Material Design principles.
 9 |   - Responsive layout that adjusts to different screen sizes.
10 |   - Dark and light mode styling for better user experience.
11 | 
12 | - **Chat Functionality**:
13 |   - Users can type messages in an input field and send them using the "Send" button.
14 |   - Messages from the user and the assistant are visually differentiated with distinct styles.
15 |   - The chatbox scrolls automatically to show the latest messages.
16 | 
17 | - **Typing Indicator**: 
18 |   - A visual typing indicator appears when the assistant is generating a response, simulating a real-time chat experience.
19 | 
20 | - **API Integration**:
21 |   - The application sends user messages to a backend API for processing.
22 |   - Supports text and image generation requests based on user input.
23 | 
24 | ## Technologies Used
25 | 
26 | - HTML5: Markup language for structuring the application.
27 | - CSS3: Styling the application for a modern look and feel.
28 | - JavaScript: Adding interactivity and handling API requests.
29 | - Font Awesome: Icons for the user interface.
30 | - Material Design Lite: A CSS framework for consistent styling.
31 | 
32 | ## Getting Started
33 | 
34 | To run this application locally, follow these steps:
35 | 
36 | 1. Help & Business (Telegram): https://t.me/You_B_Tech_Coding
37 | 2. Help & Business (Instagram): https://instagram.com/you_b_tech
38 | 
39 | Follow & Chat with us:
40 | - Telegram Channel → https://t.me/You_B_Tech
41 | - YouTube → https://youtube.com/@You_B_Tech
42 | - Instagram → https://instagram.com/you_b_tech
43 | - Wedsite → https://youbtech.xyz
44 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous">
  5 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css">
  6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.css">
  7 |     <meta charset="UTF-8">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |     <title>Chat Assistant</title>
 10 |     <style>
 11 |         body {
 12 |             margin: 0;
 13 |             font-family: Roboto, sans-serif;
 14 |             background-color: #FAFAFA; /* Light background */
 15 |             color: #212121;
 16 |         }
 17 |         .header {
 18 |             background-color: #6200EA; /* Purple 500 */
 19 |             color: white;
 20 |             padding: 16px;
 21 |             text-align: center;
 22 |             font-size: 24px;
 23 |         }
 24 |         .container {
 25 |             display: flex;
 26 |             flex-direction: column;
 27 |             height: 100vh;
 28 |             max-width: 400px;
 29 |             margin: auto;
 30 |             border: 1px solid #E0E0E0;
 31 |             border-radius: 8px;
 32 |             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 33 |             background-color: white;
 34 |         }
 35 |         .chatbox {
 36 |             flex: 1;
 37 |             padding: 16px;
 38 |             overflow-y: auto;
 39 |             display: flex;
 40 |             flex-direction: column;
 41 |             gap: 8px;
 42 |         }
 43 |         .chat-message {
 44 |             padding: 10px 15px;
 45 |             border-radius: 20px;
 46 |             max-width: 80%;
 47 |             word-wrap: break-word; /* Ensure long words break */
 48 |             animation: fadeIn 0.3s ease forwards; /* Apply fade-in animation */
 49 |         }
 50 |         .user-message {
 51 |             align-self: flex-end;
 52 |             background-color: #6200EA; /* Purple 500 */
 53 |             color: white;
 54 |             border-top-left-radius: 0;
 55 |         }
 56 |         .assistant-message {
 57 |             align-self: flex-start;
 58 |             background-color: #E0E0E0; /* Light grey */
 59 |             color: #212121;
 60 |             border-top-right-radius: 0;
 61 |         }
 62 |         .input-area {
 63 |             padding: 10px;
 64 |             border-top: 1px solid #E0E0E0;
 65 |             background-color: #F5F5F5; /* Slightly darker grey */
 66 |             display: flex;
 67 |             align-items: center;
 68 |         }
 69 |         .input-area input {
 70 |             flex: 1;
 71 |             padding: 10px;
 72 |             border: 1px solid #E0E0E0;
 73 |             border-radius: 20px;
 74 |             margin-right: 10px;
 75 |             transition: border-color 0.3s;
 76 |         }
 77 |         .input-area input:focus {
 78 |             outline: none;
 79 |             border-color: #6200EA; /* Purple 500 */
 80 |         }
 81 |         .input-area button {
 82 |             padding: 10px 15px;
 83 |             border: none;
 84 |             border-radius: 20px;
 85 |             background-color: #6200EA; /* Purple 500 */
 86 |             color: white;
 87 |             cursor: pointer;
 88 |             display: flex;
 89 |             align-items: center;
 90 |         }
 91 |         .input-area button:hover {
 92 |             background-color: #3700B3; /* Darker Purple 700 */
 93 |         }
 94 |         .input-area .material-icons {
 95 |             margin-right: 5px;
 96 |         }
 97 |         .spinner {
 98 |             display: none;
 99 |             border: 4px solid rgba(0, 0, 0, 0.1);
100 |             width: 24px;
101 |             height: 24px;
102 |             border-radius: 50%;
103 |             border-top-color: #6200EA; /* Purple 500 */
104 |             animation: spin 1s linear infinite;
105 |         }
106 |         @keyframes spin {
107 |             0% {
108 |                 transform: rotate(0deg);
109 |             }
110 |             100% {
111 |                 transform: rotate(360deg);
112 |             }
113 |         }
114 |         @keyframes fadeIn {
115 |             from {
116 |                 opacity: 0;
117 |                 transform: translateY(10px);
118 |             }
119 |             to {
120 |                 opacity: 1;
121 |                 transform: translateY(0);
122 |             }
123 |         }
124 |     </style>
125 | </head>
126 | <body>
127 |     <div class="header">Chat Assistant</div>
128 |     <div class="container">
129 |         <div id="chatbox" class="chatbox"></div>
130 |         <div class="input-area">
131 |             <input id="chatInput" type="text" placeholder="Type your message" />
132 |             <button id="sendButton">
133 |                 <span class="material-icons">send</span> Send
134 |             </button>
135 |         </div>
136 |     </div>
137 | 
138 |     <script>
139 |         const sendButton = document.getElementById("sendButton");
140 |         const chatInput = document.getElementById('chatInput');
141 |         const chatbox = document.getElementById('chatbox');
142 | 
143 |         async function displayMessage(message, isUser) {
144 |             const msgElem = document.createElement('div');
145 |             msgElem.textContent = message;
146 |             msgElem.className = `chat-message ${isUser ? 'user-message' : 'assistant-message'}`;
147 |             chatbox.appendChild(msgElem);
148 |             chatbox.scrollTop = chatbox.scrollHeight; // Scroll to the bottom
149 |             
150 |             // For assistant messages, add a slight delay before displaying
151 |             if (!isUser) {
152 |                 msgElem.style.opacity = 0; // Start with opacity 0
153 |                 await new Promise(resolve => setTimeout(resolve, 300)); // Delay
154 |                 msgElem.style.opacity = 1; // Fade in
155 |             }
156 |         }
157 | 
158 |         async function callApi(apiUrl, prompt) {
159 |             chatInput.value = "Typing...";
160 |             chatInput.disabled = true;
161 |             sendButton.disabled = true;
162 |             const response = await fetch(apiUrl, {
163 |                 method: 'POST',
164 |                 headers: {'Content-Type': 'application/json'},
165 |                 body: JSON.stringify({prompt})
166 |             });
167 | 
168 |             chatInput.value = "";
169 |             chatInput.disabled = false;
170 |             sendButton.disabled = false;
171 |             chatInput.focus();
172 |             return response.json();
173 |         }
174 | 
175 |         chatInput.focus();
176 | 
177 |         sendButton.addEventListener('click', async () => {
178 |             const message = chatInput.value.trim();
179 |             if (!message) return;
180 | 
181 |             displayMessage(message, true);
182 |             chatInput.value = '';
183 | 
184 |             const apiUrl = message.startsWith('/image') ? 
185 |                 'https://backend.buildpicoapps.com/aero/run/image-generation-api?pk=v1-Z0FBQUFBQm5HUEtMSjJkakVjcF9IQ0M0VFhRQ0FmSnNDSHNYTlJSblE0UXo1Q3RBcjFPcl9YYy1OZUhteDZWekxHdWRLM1M1alNZTkJMWEhNOWd4S1NPSDBTWC12M0U2UGc9PQ==' : 
186 |                 'https://backend.buildpicoapps.com/aero/run/llm-api?pk=v1-Z0FBQUFBQm5HUEtMSjJkakVjcF9IQ0M0VFhRQ0FmSnNDSHNYTlJSblE0UXo1Q3RBcjFPcl9YYy1OZUhteDZWekxHdWRLM1M1alNZTkJMWEhNOWd4S1NPSDBTWC12M0U2UGc9PQ==';
187 | 
188 |             try {
189 |                 const data = await callApi(apiUrl, message);
190 |                 if (data.status === 'success') {
191 |                     displayMessage(data.text, false);
192 |                 } else {
193 |                     displayMessage('An error occurred. Please try again.', false);
194 |                 } 
195 |             } catch (error) {
196 |                 console.error('Error:', error);
197 | displayMessage('An error occurred. Please try again.', false);
198 | }
199 | });
200 | </script> <
201 | /body> <
202 | /html>


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | console.log('Hello World!');
2 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |     font-size: 15pt;
3 | }


--------------------------------------------------------------------------------