feat:(#145) add start chat FAB

2026-04-04 15:31:48 +05:30
parent 0547e9513f
commit 4dab8bd812
4 changed files with 71 additions and 11 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+
+  const {
+    onclick = () => {},
+    className = "",
+    size = 54,
+  }: {
+    onclick?: () => void
+    className?: string
+    size?: number
+  } = $props()
+
+  const bubbleSize = $derived(Math.round(size * 0.55))
+  const plusSize = $derived(Math.round(size * 0.33))
+</script>
+
+<div class="fixed bottom-20 right-sai z-nav m-4 md:m-8 hide-on-keyboard {className}">
+  <Button
+    class="btn bg-[#7161ff] border-none text-white shadow-xl hover:bg-[#5e51d6] transition-all p-0"
+    style="width: {size}px; height: {size}px; border-radius: {size * 0.33}px;"
+    {onclick}>
+    <div class="relative" style="width: {bubbleSize}px; height: {bubbleSize}px;" data-node-id="2:8">
+      <svg
+        viewBox="0 0 24 24"
+        fill="white"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="absolute inset-0 size-full">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="#7161ff"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="absolute left-1/2 top-[42%] -translate-x-1/2 -translate-y-1/2"
+        style="width: {plusSize}px; height: {plusSize}px;">
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    </div>
+  </Button>
+</div>