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

components/app/windows/chatbot.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { History, Plus } from "lucide-vue-next";
 const { t } = useI18n();
 const cookie = useCookie("lastChatId");
 const lastChatId = cookie.value;
@@ -9,5 +10,20 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="justify-center align-center text-center flex flex-col">Hi</div>
+  <div class="justify-center align-center text-center flex flex-col">
+    <div class="flex flex-row justify-between">
+        <div>Chat Name</div>
+      <div class="flex flex-row justify-center align-center text-center">
+        <div class="flex flex-row justify-center align-center text-center gap-2">
+            <button class="p-2 rounded-lg hover:bg-gray-300">
+                <History class="h-4 w-4" />
+            </button>
+            <button class="p-2 rounded-lg hover:bg-gray-300">
+                <Plus class="h-4 w-4" />
+            </button>
+        </div>
+      </div>
+    </div>
+    <hr/>
+  </div>
 </template>

components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { toggleVariants } from "@/components/ui/toggle";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import {
+  ToggleGroupRoot,
+  type ToggleGroupRootEmits,
+  type ToggleGroupRootProps,
+  useForwardPropsEmits,
+} from "reka-ui";
+import { computed, type HTMLAttributes, provide } from "vue";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleGroupVariants["variant"];
+    size?: ToggleGroupVariants["size"];
+  }
+>();
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="cn('flex items-center justify-center gap-1', props.class)"
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>

components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+import {
+  ToggleGroupItem,
+  type ToggleGroupItemProps,
+  useForwardProps,
+} from "reka-ui";
+import { computed, type HTMLAttributes, inject } from "vue";
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleGroupVariants["variant"];
+    size?: ToggleGroupVariants["size"];
+  }
+>();
+
+const context = inject<ToggleGroupVariants>("toggleGroup");
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props;
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";

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>;