add button click and display

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/Ask-ANRG.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.9" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="PyDocumentationSettings">
+    <option name="format" value="PLAIN" />
+    <option name="myDocStringFormat" value="Plain" />
+  </component>
+</module>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Ask-ANRG.iml" filepath="$PROJECT_DIR$/.idea/Ask-ANRG.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

static/script.js

@@ -2,6 +2,16 @@ const sendBtn = document.getElementById('send-btn');
 const userInput = document.getElementById('user-input');
 const apiKeyInput = document.getElementById('api-key-input');
 const chatBox = document.getElementById('chat-box');
+const questionButtons = document.querySelectorAll('.question_btn');
+questionButtons.forEach(btn => {
+    console.log(btn)
+    btn.addEventListener('click', function() {
+        console.log("questionButtons clicked: ", this)
+        const buttonTextContent = this.innerHTML; // Get the content of the button
+        userInput.value = buttonTextContent; // Set the user input to the button's content
+        sendBtn.click(); // Trigger the sending process
+    });
+});
 
 sendBtn.addEventListener('click', () => {
     const message = userInput.value.trim();

static/style.css

@@ -12,8 +12,9 @@ body {
     margin: 50px auto;
     background-color: #fff;
     padding: 20px;
+    padding: 20px;
     border-radius: 5px;
-
+    width: 600px;
 }
 
 .chat-box {
@@ -24,6 +25,14 @@ body {
     margin-bottom: 10px;
 }
 
+.demo {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 20%;
+    flex-direction: column;
+}
+
 button {
     background-color: #007BFF;
     color: #fff;
@@ -31,11 +40,11 @@ button {
     padding: 10px 15px;
     border-radius: 5px;
     cursor: pointer;
-    width: 80%;
 }
 
 .user-message, .bot-message {
     margin: 10px 0;
+    width: 70%; /* Each message takes up half of the screen width */
     padding: 10px;
     border-radius: 5px;
 }