added loki form to agents

2026-03-18 08:59:54 +08:00
parent 7745c83bbd
commit 3487a71153
15 changed files with 657 additions and 412 deletions
--- a/frontend/src/app/components/customCheckbox/styles.module.css
+++ b/frontend/src/app/components/customCheckbox/styles.module.css
@@ -0,0 +1,105 @@
+.checkboxMainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.checkbox {
+  display: flex;
+  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
+    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  flex: 1 0 0;
+  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.check {
+  display: flex;
+  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+}
+.hiddenCheckbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
+  border: 1px solid
+    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Color, #e5e7eb);
+
+  background: var(--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Color, #fff);
+}
+.hiddenCheckbox:checked {
+  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
+  border: 1px solid
+    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
+  border: 1px solid
+    var(
+      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
+      color(display-p3 0.1451 0.3882 0.9216)
+    );
+  background: var(
+    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
+    #0067fd
+  );
+  background: var(
+    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
+    color(display-p3 0.1451 0.3882 0.9216)
+  );
+}
+.hiddenCheckbox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0;
+}
+.hiddenCheckbox:checked::after {
+  opacity: 1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.placeholderTxt {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.08px;
+}
+.secondaryTxt {
+  align-self: stretch;
+  color: #697281;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: 0.07px;
+}