From ee0f68828e3673602d2d9c739a32ed81f41c1d2f Mon Sep 17 00:00:00 2001
From: snowbitx <WangXiaoYu_1995@outlook.com>
Date: Wed, 3 Dec 2025 01:12:23 +0800
Subject: [PATCH] feat(InlineCitation): add loop mode support for circular
 scrolling

---
 .../3.components/1.chatbot/inline-citation.md        |  2 +-
 .../src/inline-citation/InlineCitationCarousel.vue   |  2 +-
 .../shadcn-vue/components/ui/carousel/useCarousel.ts | 12 +++++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/www/content/3.components/1.chatbot/inline-citation.md b/apps/www/content/3.components/1.chatbot/inline-citation.md
index eb211c8..e296635 100644
--- a/apps/www/content/3.components/1.chatbot/inline-citation.md
+++ b/apps/www/content/3.components/1.chatbot/inline-citation.md
@@ -135,7 +135,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Carousel :class="cn('w-full', props.class)">
+  <Carousel :class="cn('w-full', props.class)" :opts="{ loop: true }">
     <slot />
   </Carousel>
 </template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarousel.vue b/packages/elements/src/inline-citation/InlineCitationCarousel.vue
index 42e9920..4c45295 100644
--- a/packages/elements/src/inline-citation/InlineCitationCarousel.vue
+++ b/packages/elements/src/inline-citation/InlineCitationCarousel.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <Carousel :class="cn('w-full', props.class)">
+  <Carousel :class="cn('w-full', props.class)" :opts="{ loop: true }">
     <slot />
   </Carousel>
 </template>
diff --git a/packages/shadcn-vue/components/ui/carousel/useCarousel.ts b/packages/shadcn-vue/components/ui/carousel/useCarousel.ts
index 4c86651..82c0cbf 100644
--- a/packages/shadcn-vue/components/ui/carousel/useCarousel.ts
+++ b/packages/shadcn-vue/components/ui/carousel/useCarousel.ts
@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 import { createInjectionState } from '@vueuse/core'
 import emblaCarouselVue from 'embla-carousel-vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, unref } from 'vue'
 
 interface CarouselContext {
   carouselRef: Ref<HTMLElement | undefined>
@@ -36,8 +36,14 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
     const canScrollPrev = ref(false)
 
     function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
+      if (unref(opts)?.loop) {
+        canScrollNext.value = true
+        canScrollPrev.value = true
+      }
+      else {
+        canScrollNext.value = api?.canScrollNext() || false
+        canScrollPrev.value = api?.canScrollPrev() || false
+      }
     }
 
     onMounted(() => {