feat: add inline-citation component

Author: cwandev

apps/test/app/examples/index.ts

@@ -5,6 +5,7 @@ export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as CodeBlock } from './code-block.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as Image } from './image.vue'
+export { default as InlineCitation } from './inline-citation.vue'
 export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'

apps/test/app/examples/inline-citation.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationCarousel,
+  InlineCitationCarouselContent,
+  InlineCitationCarouselHeader,
+  InlineCitationCarouselIndex,
+  InlineCitationCarouselItem,
+  InlineCitationCarouselNext,
+  InlineCitationCarouselPrev,
+  InlineCitationSource,
+  InlineCitationText,
+} from '@repo/elements/inline-citation'
+
+const citation = {
+  text: 'The technology continues to evolve rapidly, with new breakthroughs being announced regularly',
+  sources: [
+    {
+      title: 'Advances in Natural Language Processing',
+      url: 'https://example.com/nlp-advances',
+      description:
+        'A comprehensive study on the recent developments in natural language processing technologies and their applications.',
+    },
+    {
+      title: 'Breakthroughs in Machine Learning',
+      url: 'https://mlnews.org/breakthroughs',
+      description:
+        'An overview of the most significant machine learning breakthroughs in the past year.',
+    },
+    {
+      title: 'AI in Healthcare: Current Trends',
+      url: 'https://healthai.com/trends',
+      description:
+        'A report on how artificial intelligence is transforming healthcare and diagnostics.',
+    },
+    {
+      title: 'Ethics of Artificial Intelligence',
+      url: 'https://aiethics.org/overview',
+      description:
+        'A discussion on the ethical considerations and challenges in the development of AI.',
+    },
+    {
+      title: 'Scaling Deep Learning Models',
+      url: 'https://deeplearninghub.com/scaling-models',
+      description:
+        'Insights into the technical challenges and solutions for scaling deep learning architectures.',
+    },
+    {
+      title: 'Natural Language Understanding Benchmarks',
+      url: 'https://nlubenchmarks.com/latest',
+      description:
+        'A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.',
+    },
+  ],
+}
+</script>
+
+<template>
+  <p class="text-sm leading-relaxed">
+    According to recent studies, artificial intelligence has shown remarkable
+    progress in natural language processing.
+    <InlineCitation>
+      <InlineCitationText>{{ citation.text }}</InlineCitationText>
+      <InlineCitationCard>
+        <InlineCitationCardTrigger
+          :sources="citation.sources.map((source) => source.url)"
+        />
+        <InlineCitationCardBody>
+          <InlineCitationCarousel>
+            <InlineCitationCarouselHeader>
+              <InlineCitationCarouselPrev />
+              <InlineCitationCarouselNext />
+              <InlineCitationCarouselIndex />
+            </InlineCitationCarouselHeader>
+            <InlineCitationCarouselContent>
+              <InlineCitationCarouselItem
+                v-for="source in citation.sources"
+                :key="source.url"
+              >
+                <InlineCitationSource
+                  :description="source.description"
+                  :title="source.title"
+                  :url="source.url"
+                />
+              </InlineCitationCarouselItem>
+            </InlineCitationCarouselContent>
+          </InlineCitationCarousel>
+        </InlineCitationCardBody>
+      </InlineCitationCard>
+    </InlineCitation>.
+  </p>
+</template>

apps/test/app/pages/index.vue

@@ -7,6 +7,7 @@ import ChainOfThought from '~/examples/chain-of-thought.vue'
 import CodeBlock from '~/examples/code-block.vue'
 import Conversation from '~/examples/conversation.vue'
 import Image from '~/examples/image.vue'
+import InlineCitation from '~/examples/inline-citation.vue'
 import Loader from '~/examples/loader.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
@@ -40,6 +41,7 @@ const components = [
   { name: 'ChainOfThought', Component: ChainOfThought },
   { name: 'Queue', Component: Queue },
   { name: 'Plan', Component: Plan },
+  { name: 'InlineCitation', Component: InlineCitation },
 ]
 </script>
 

apps/www/content/1.overview/1.Introduction.md

@@ -45,4 +45,22 @@ You can install it with:
 :::ComponentLoader{label="OpenInChat" componentName="OpenInChat"}
 :::
 
+:::ComponentLoader{label="Task" componentName="Task"}
+:::
+
+:::ComponentLoader{label="Sources" componentName="Sources"}
+:::
+
+:::ComponentLoader{label="Plan" componentName="Plan"}
+:::
+
+:::ComponentLoader{label="Queue" componentName="Queue"}
+:::
+
+:::ComponentLoader{label="ChainOfThought" componentName="ChainOfThought"}
+:::
+
+:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.

apps/www/content/2.components/chain-of-thought.md

@@ -1,7 +1,7 @@
 ---
 title: Chain of Thought
 description:
-icon: lucide:code
+icon: lucide:brain
 ---
 
 The `ChainOfThought` component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.