Merge pull request #153 from AddSearch/sc-12487/change-size-of-toggle-button-in-ai-answers

haoAddsearch · web-flow · commit cc6294dad43b · 2025-08-18T13:01:41.000+03:00
feat: [sc-12487] Changing the size of the toggle button in AI Answers
diff --git a/examples/aianswers/index.html b/examples/aianswers/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>AddSearch Search UI: AI Answers Result</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@1.1/dist/addsearch-js-client.min.js"
+          integrity="sha384-bMenmxFJb5gJmf+h89NT/Ai405PPITc8yqHYIlW7kqRYta/ZBwVjx5C67BC88njD"
+          crossorigin="anonymous"></script>
+  <script src="../../dist/addsearch-search-ui.min.js"></script>
+  <link rel="stylesheet" href="../../dist/addsearch-search-ui.min.css" />
+
+  <style type="text/css">
+    body {
+      font-family: 'Lato', sans-serif;
+      min-width: 320px;
+    }
+  </style>
+</head>
+<body>
+
+<!-- Containers. Search UI components will be added inside these divs -->
+<div id="searchfield"></div>
+<div id="ai-answers-result-container"></div>
+
+<script>
+  // AddSearch JS client with an example index. Get your own SITEKEY by signing up at www.addsearch.com
+  var client = new AddSearchClient('490c606d6377e1876fa7fecb5f7e6420');
+  var config = {
+    hasAiAnswers: true,
+  }
+
+  // Search UI instance
+  var searchui = new AddSearchUI(client, config);
+
+  // Add components
+  searchui.searchField({
+    containerId: 'searchfield',
+    placeholder: 'Keyword..',
+    button: 'Search',
+    searchAsYouType: false
+  });
+
+  searchui.aiAnswersResult({
+    containerId: 'ai-answers-result-container',
+    mainHeadlineText: 'AI-generated answer',
+    answerMaxHeight: 150,
+    sourcesHeadlineText: 'Based on the following sources:',
+    hasHideToggle: true
+  });
+
+
+  // All components added. Start
+  searchui.start();
+</script>
+
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "addsearch-search-ui",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "JavaScript library to develop Search UIs for the web",
   "repository": {
     "type": "git",
diff --git a/src/components/aianswersresult/aianswersresult.scss b/src/components/aianswersresult/aianswersresult.scss
@@ -74,7 +74,7 @@
   .header-right-hand-side-container {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 10px;
   }
 
   .ai-explanation-text {
@@ -111,8 +111,8 @@
   .toggle-switch {
     position: relative;
     display: inline-block;
-    width: 60px;
-    height: 34px;
+    width: 30px;
+    height: 17px;
 
     input {
       opacity: 0;
@@ -128,7 +128,7 @@
       }
 
       &:checked + .slider:before {
-        transform: translateX(26px);
+        transform: translateX(12px);
       }
     }
 
@@ -145,10 +145,10 @@
       &:before {
         position: absolute;
         content: '';
-        height: 26px;
-        width: 26px;
-        left: 4px;
-        bottom: 4px;
+        height: 13px;
+        width: 13px;
+        left: 3px;
+        bottom: 2px;
         background-color: white;
         transition: 0.4s;
       }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "addsearch-search-ui",`
`3`		`- "version": "0.9.8",`
	`3`	`+ "version": "0.9.9",`
`4`	`4`	`"description": "JavaScript library to develop Search UIs for the web",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`