feat: add task component

Author: peoray

apps/test/app/examples/index.ts

@@ -9,3 +9,4 @@ export { default as Message } from './message.vue'
 export { default as PromptInput } from './prompt-input.vue'
 export { default as Response } from './response.vue'
 export { default as Shimmer } from './shimmer.vue'
+export { default as Task } from './task.vue'

apps/test/app/examples/task.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger } from '@repo/elements/task'
+import { nanoid } from 'nanoid'
+import { ref } from 'vue'
+
+interface TaskEntry {
+  key: string
+  type?: 'text' | 'file'
+  text?: string
+  filename?: string
+}
+
+const tasks = ref<TaskEntry[]>([
+  { key: nanoid(), text: 'Searching "app/page.tsx, components structure"' },
+  { key: nanoid(), type: 'file', text: 'Read', filename: 'index.vue' },
+  { key: nanoid(), text: 'Scanning 52 files' },
+  { key: nanoid(), text: 'Scanning 2 files' },
+  { key: nanoid(), type: 'file', text: 'Reading files', filename: 'layout.vue' },
+])
+</script>
+
+<template>
+  <div style="height: 200px">
+    <Task class="w-full">
+      <TaskTrigger title="Found project files" />
+      <TaskContent>
+        <TaskItem
+          v-for="task in tasks"
+          :key="task.key"
+        >
+          <!-- If task is text -->
+          <template v-if="!task.type">
+            {{ task.text }}
+          </template>
+
+          <!-- If task includes a file -->
+          <template v-else>
+            <span class="inline-flex items-center gap-1">
+              {{ task.text }}
+              <TaskItemFile>
+                <svg
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="size-4"
+                >
+                  <path d="M2 4L16 28L30 4H24.5L16 18.5L7.5 4H2Z" fill="#41B883" />
+                  <path
+                    d="M7.5 4L16 18.5L24.5 4H19.5L16.0653 10.0126L12.5 4H7.5Z"
+                    fill="#35495E"
+                  />
+                </svg>
+                <span>{{ task.filename }}</span>
+              </TaskItemFile>
+            </span>
+          </template>
+        </TaskItem>
+      </TaskContent>
+    </Task>
+  </div>
+</template>

apps/test/app/pages/index.vue

@@ -11,6 +11,7 @@ import Message from '~/examples/message.vue'
 import PromptInput from '~/examples/prompt-input.vue'
 import Response from '~/examples/response.vue'
 import Shimmer from '~/examples/shimmer.vue'
+import Task from '~/examples/task.vue'
 
 const components = [
   { name: 'Message', Component: Message },
@@ -24,6 +25,7 @@ const components = [
   { name: 'CodeBlock', Component: CodeBlock },
   { name: 'Image', Component: Image },
   { name: 'Shimmer', Component: Shimmer },
+  { name: 'Task', Component: Task },
 ]
 </script>