feat: update toggle components and enhance chatbot layout; upgrade dependencies and improve UI structure

components/ui/toggle/Toggle.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+  Toggle,
+  type ToggleEmits,
+  type ToggleProps,
+  useForwardPropsEmits,
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+import { type ToggleVariants, toggleVariants } from ".";
+
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: HTMLAttributes["class"];
+      variant?: ToggleVariants["variant"];
+      size?: ToggleVariants["size"];
+    }
+  >(),
+  {
+    variant: "default",
+    size: "default",
+    disabled: false,
+  },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>

components/ui/toggle/index.ts

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Toggle } from "./Toggle.vue";
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;