Now users can add chatbot to their website.

Author: 0xkerem

app/src/App.css

@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter&family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+Kannada&display=swap');
 
-
 * {
   margin: 0;
   padding: 0;
@@ -698,7 +697,7 @@
 }
 
 .message {
-  border-radius: 10px;
+  border-radius: 5px;
   padding: 8px;
   margin: 4px;
   max-width: 85%;
@@ -846,15 +845,6 @@
   width: 60%;
 }
 
-.message-container {
-  margin-bottom: 10px;
-}
-
-.message {
-  padding: 8px;
-  border-radius: 5px;
-}
-
 .chat-buttons > button {
   background-color: transparent;
   border: none;

app/src/components/Chat.js

@@ -18,13 +18,34 @@ export default function Chat({ botId }) {
   }, [botId]);
 
   const generateCode = () => {
-    // Generate code to add chatbot to user's webpage
-    // Copy code to clipboard (use document.execCommand('copy'))
-    // Alert the user that the code has been copied
-    const generatedCode = `<Your chatbot code>`;
-    // Copy code to clipboard (implementation required)
-    // Alert message (implementation required)
+    const generatedCode = `
+      <div id="semantiq-chatbot"></div>
+      <script data-bot-id="${botId}" defer="defer" src="http://localhost:8080/static/main.ea9881ca.js"></script>
+      <script>
+        var link = document.createElement("link");
+        link.href = "http://localhost:8080/static/main.ba187d75.css";
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      </script>
+    `;
+
+    copyToClipboard(generatedCode);
+  
+    // Alert message to indicate code has been copied
+    alert('Code successfully copied to clipboard! To integrate the chatbox, insert the script elements just before the closing </body> tag, and place the div with the ID "seamntiq-chatbot" wherever you want the chatbox to appear.');
   };
+
+  function copyToClipboard(text) {
+    const el = document.createElement('textarea');
+    el.value = text;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  }
 
   const votePositive = () => {
     sendVote(1);
@@ -114,7 +135,7 @@ export default function Chat({ botId }) {
               </div>
             ))}
           </div>
-
+          
           <form onSubmit={sendMessage} className="message-input">
             <input
               className='Chat-input'

server/src/main/java/com/semantiq/server/controller/BotDataController.java

@@ -17,6 +17,7 @@
 
 @RestController
 @RequestMapping("/api/botdata")
+@CrossOrigin(origins = "*")
 public class BotDataController {
     private final BotDataService botDataService;
     private final ChatBotService chatBotService;

server/src/main/java/com/semantiq/server/controller/ChatBotController.java

@@ -17,7 +17,7 @@
 
 @RestController
 @RequestMapping("/api/bots")
-
+@CrossOrigin(origins = "*")
 public class ChatBotController {
     private final ChatBotService chatbotService;
     private final UserService userService;

server/src/main/java/com/semantiq/server/controller/EmailController.java

@@ -9,7 +9,6 @@
 
 @Controller
 @RequestMapping("/api/email")
-
 public class EmailController {
     private final EmailService emailService;
     private final UserService userService;
@@ -20,7 +19,6 @@ public EmailController(EmailService emailService, UserService userService) {
         this.userService = userService;
     }
 
-
     @PostMapping("/send")
     public ResponseEntity <?> sendEmail(@RequestParam int userId, @RequestParam String message) {
 

server/src/main/java/com/semantiq/server/controller/FileController.java

@@ -0,0 +1,55 @@
+package com.semantiq.server.controller;
+
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.UrlResource;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import java.net.MalformedURLException;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+
+@Controller
+@RequestMapping("/static")
+@CrossOrigin(origins = "*")
+public class FileController {
+
+    private static final String FILES_DIRECTORY = "src/main/resources/Files/static/";
+
+    @GetMapping("/{file}")
+    public ResponseEntity<Resource> serveChatbotBundle(@PathVariable String file) {
+        return serveFile(file);
+    }
+
+    private ResponseEntity<Resource> serveFile(String fileName) {
+        Resource file = loadFileAsResource(fileName);
+
+        if (file == null) {
+            return ResponseEntity.notFound().build();
+        }
+
+        return ResponseEntity.ok()
+                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
+                .body(file);
+    }
+
+    private Resource loadFileAsResource(String fileName) {
+        try {
+            Path filePath = Paths.get(FILES_DIRECTORY).resolve(fileName).normalize();
+            Resource resource = new UrlResource(filePath.toUri());
+
+            if (resource.exists()) {
+                return resource;
+            } else {
+                return null;
+            }
+        } catch (MalformedURLException ex) {
+            return null;
+        }
+    }
+}

server/src/main/java/com/semantiq/server/service/configuration/WebConfig.java

@@ -0,0 +1,33 @@
+package com.semantiq.server.service.configuration;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        // CORS configuration for /api/bots/**
+        registry.addMapping("/api/bots/")
+                .allowedOriginPatterns("*") // Use allowedOriginPatterns instead of allowedOrigins
+                .allowedMethods("GET", "POST", "PUT", "DELETE")
+                // Add more configurations if needed
+                .allowCredentials(true);
+
+        // CORS configuration for /static/**
+        registry.addMapping("/static/")
+                .allowedOriginPatterns("*") // Use allowedOriginPatterns instead of allowedOrigins
+                .allowedMethods("GET", "POST", "PUT", "DELETE")
+                // Add more configurations if needed
+                .allowCredentials(true);
+
+        // CORS configuration for /static/**
+        registry.addMapping("/api/botdata/")
+                .allowedOriginPatterns("*") // Use allowedOriginPatterns instead of allowedOrigins
+                .allowedMethods("GET", "POST", "PUT", "DELETE")
+                // Add more configurations if needed
+                .allowCredentials(true);
+    }
+}
+