refactor: simplify template props usage

Author: ironunit

packages/elements/src/artifact/ArtifactAction.vue

@@ -27,7 +27,7 @@ const classes = computed(() => cn(
 </script>
 
 <template>
-  <TooltipProvider v-if="props.tooltip">
+  <TooltipProvider v-if="tooltip">
     <Tooltip>
       <TooltipTrigger as-child>
         <Button
@@ -38,16 +38,16 @@ const classes = computed(() => cn(
           }"
         >
           <component
-            :is="props.icon"
-            v-if="props.icon"
+            :is="icon"
+            v-if="icon"
             class="size-4"
           />
           <slot v-else />
-          <span class="sr-only">{{ props.label || props.tooltip }}</span>
+          <span class="sr-only">{{ label || tooltip }}</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent>
-        <p>{{ props.tooltip }}</p>
+        <p>{{ tooltip }}</p>
       </TooltipContent>
     </Tooltip>
   </TooltipProvider>
@@ -61,11 +61,11 @@ const classes = computed(() => cn(
     }"
   >
     <component
-      :is="props.icon"
-      v-if="props.icon"
+      :is="icon"
+      v-if="icon"
       class="size-4"
     />
     <slot v-else />
-    <span class="sr-only">{{ props.label || props.tooltip }}</span>
+    <span class="sr-only">{{ label || tooltip }}</span>
   </Button>
 </template>

packages/elements/src/chain-of-thought/ChainOfThoughtImage.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
       <slot />
     </div>
     <p v-if="caption" class="text-muted-foreground text-xs">
-      {{ props.caption }}
+      {{ caption }}
     </p>
   </div>
 </template>

packages/elements/src/chain-of-thought/ChainOfThoughtStep.vue

@@ -27,7 +27,7 @@ const statusStyles = {
     :class="
       cn(
         'flex gap-2 text-sm',
-        statusStyles[props.status],
+        statusStyles[status],
         'fade-in-0 slide-in-from-top-2 animate-in',
         props.class as string,
       )
@@ -41,12 +41,12 @@ const statusStyles = {
       />
     </div>
     <div class="flex-1 space-y-2">
-      <div>{{ props.label }}</div>
+      <div>{{ label }}</div>
       <div
-        v-if="props.description"
+        v-if="description"
         class="text-muted-foreground text-xs"
       >
-        {{ props.description }}
+        {{ description }}
       </div>
       <slot />
     </div>

packages/elements/src/checkpoint/CheckpointTrigger.vue

@@ -27,15 +27,15 @@ const buttonProps = {
 </script>
 
 <template>
-  <TooltipProvider v-if="props.tooltip">
+  <TooltipProvider v-if="tooltip">
     <Tooltip>
       <TooltipTrigger as-child>
         <Button v-bind="{ ...buttonProps, ...$attrs }">
           <slot />
         </Button>
       </TooltipTrigger>
       <TooltipContent align="start" side="bottom">
-        <p>{{ props.tooltip }}</p>
+        <p>{{ tooltip }}</p>
       </TooltipContent>
     </Tooltip>
   </TooltipProvider>

packages/elements/src/conversation/Conversation.vue

@@ -26,15 +26,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <StickToBottom
-    :aria-label="props.ariaLabel"
+    :aria-label="ariaLabel"
     :class="cn('relative flex-1 overflow-y-hidden', props.class)"
     role="log"
-    :initial="props.initial"
-    :resize="props.resize"
-    :damping="props.damping"
-    :stiffness="props.stiffness"
-    :mass="props.mass"
-    :anchor="props.anchor"
+    :initial="initial"
+    :resize="resize"
+    :damping="damping"
+    :stiffness="stiffness"
+    :mass="mass"
+    :anchor="anchor"
   >
     <slot />
   </StickToBottom>

packages/elements/src/conversation/ConversationEmptyState.vue

@@ -29,10 +29,10 @@ const props = withDefaults(defineProps<Props>(), {
 
       <div class="space-y-1">
         <h3 class="font-medium text-sm">
-          {{ props.title }}
+          {{ title }}
         </h3>
-        <p v-if="props.description" class="text-muted-foreground text-sm">
-          {{ props.description }}
+        <p v-if="description" class="text-muted-foreground text-sm">
+          {{ description }}
         </p>
       </div>
     </slot>

packages/elements/src/edge/Animated.vue

@@ -79,7 +79,7 @@ const path = computed(() => {
 <template>
   <g v-if="path">
     <BaseEdge
-      :id="props.id"
+      :id="id"
       :marker-end="markerEnd"
       :path="path"
       :style="style"

packages/elements/src/edge/Temporary.vue

@@ -20,7 +20,7 @@ const path = computed(() => {
 
 <template>
   <BaseEdge
-    :id="props.id"
+    :id="id"
     :path="path"
     class="stroke-1 stroke-ring"
     :style="{ strokeDasharray: '5, 5' }"

packages/elements/src/image/Image.vue

@@ -21,7 +21,7 @@ const src = computed(() => `data:${props.mediaType};base64,${props.base64}`)
 
 <template>
   <img
-    :alt="props.alt"
+    :alt="alt"
     :class="classes"
     :src="src"
     v-bind="attrs"

packages/elements/src/inline-citation/InlineCitationCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   closeDelay?: number
   openDelay?: number
 }>(), {
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-  <HoverCard :close-delay="props.closeDelay" :open-delay="props.openDelay">
+  <HoverCard :close-delay="closeDelay" :open-delay="openDelay">
     <slot />
   </HoverCard>
 </template>