<template>
  <div
    v-if="!shouldHide"
    class="absolute left-0 w-0.5 -translate-x-[3px]"
    :class="[colorClass, positionClass]"
  ></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  isStreaming?: boolean
  index: number
  lastIndex: number
}

const props = defineProps<Props>()

const shouldHide = computed(() => props.index === 0 && props.index === props.lastIndex)

const colorClass = computed(() => {
  const idx = props.index
  const last = props.lastIndex
  if (props.isStreaming && idx === last - 1) {
    return 'bg-gradient-to-b from-primary to-muted-foreground/40 from-[50%] to-[50%]'
  }
  if (props.isStreaming && idx === last) {
    return 'bg-muted-foreground/40'
  }
  return 'bg-primary'
})

const positionClass = computed(() => {
  const idx = props.index
  const last = props.lastIndex
  if (idx === 0) return 'top-6.5 bottom-0'
  if (idx === last) return 'top-0 bottom-6.5'
  return 'top-0 bottom-0'
})
</script>

<style scoped></style>
