@sveda-ai/vue 0.1.0

package/src/components/chat/ReasoningStream.vue

@@ -0,0 +1,112 @@
+<script setup>
+  import { useAnimatedText } from '../../lib/useAnimatedText.js';
+  import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+  const props = defineProps({
+    animated: {
+      type: Boolean,
+      default: false,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emit = defineEmits(['content-resize']);
+
+  const contentRef = ref(null);
+  const translateY = ref(0);
+  const hasOverflow = ref(false);
+  let contentResizeObserver = null;
+
+  const stripFencedCode = raw => {
+    if (!raw || typeof raw !== 'string') return '';
+    return raw
+      .replace(/```[\w-]*\n?[\s\S]*?```/g, '\n')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
+  };
+
+  const displayedText = useAnimatedText(() => stripFencedCode(props.text), {
+    enabled: () => props.animated,
+  });
+
+  function updateTranslate() {
+    if (!contentRef.value) return;
+    const container = contentRef.value.parentElement;
+    if (!container) return;
+    const contentHeight = contentRef.value.offsetHeight;
+    const containerHeight = container.offsetHeight;
+    const overflow = Math.max(0, contentHeight - containerHeight);
+    hasOverflow.value = overflow > 0;
+    translateY.value = -overflow;
+    emit('content-resize');
+  }
+
+  const scheduleTranslateUpdate = () => {
+    nextTick(() => {
+      requestAnimationFrame(updateTranslate);
+    });
+  };
+
+  watch(displayedText, scheduleTranslateUpdate, { flush: 'post' });
+  watch(() => props.text, scheduleTranslateUpdate, { flush: 'post' });
+
+  onMounted(() => {
+    scheduleTranslateUpdate();
+    if (contentRef.value) {
+      contentResizeObserver = new ResizeObserver(scheduleTranslateUpdate);
+      contentResizeObserver.observe(contentRef.value);
+    }
+  });
+
+  onUnmounted(() => {
+    contentResizeObserver?.disconnect();
+    contentResizeObserver = null;
+  });
+</script>
+
+<template>
+  <div
+    class="reasoning-stream"
+    :class="{ 'reasoning-stream--masked': hasOverflow }"
+  >
+    <div
+      ref="contentRef"
+      class="reasoning-stream__content"
+      :class="{ 'reasoning-stream__content--following': animated }"
+      :style="{ transform: `translateY(${translateY}px)` }"
+    >
+      {{ displayedText }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .reasoning-stream {
+    max-height: 10rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .reasoning-stream--masked {
+    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
+  }
+
+  .reasoning-stream__content {
+    font-family: ui-monospace, monospace;
+    font-size: 0.7rem;
+    line-height: 1.5;
+    color: hsl(var(--muted-foreground) / 0.9);
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding: 0.25rem 0;
+    transition: transform 0.3s ease-out;
+  }
+
+  .reasoning-stream__content--following {
+    transition: none;
+  }
+</style>

package/src/components/chat/index.ts

@@ -0,0 +1,8 @@
+export { default as AnimatedStreamBlock } from './AnimatedStreamBlock.vue';
+export { default as ChatHistoryDropdown } from './ChatHistoryDropdown.vue';
+export { default as ChatInput } from './ChatInput.vue';
+export { default as ChatMessageActivityBlock } from './ChatMessageActivityBlock.vue';
+export { default as ChatMessageItem } from './ChatMessageItem.vue';
+export { default as ChatMessageList } from './ChatMessageList.vue';
+export { default as ChatPendingIndicator } from './ChatPendingIndicator.vue';
+export { default as ReasoningStream } from './ReasoningStream.vue';

package/src/components/shell/SvedaAgentCompletedNotice.vue

@@ -0,0 +1,25 @@
+<script setup>
+  import { Button } from '../../ui/button';
+  import { ArrowDown } from 'lucide-vue-next';
+
+  defineProps({
+    label: { type: String, required: true },
+  });
+
+  const emit = defineEmits(['scroll']);
+</script>
+
+<template>
+  <div class="flex shrink-0 justify-center px-4 py-2">
+    <Button
+      type="button"
+      variant="secondary"
+      size="sm"
+      class="h-8 gap-2 rounded-[var(--sveda-radius)] border border-border bg-background/95 px-3 text-xs shadow-sm backdrop-blur"
+      @click="emit('scroll')"
+    >
+      <span>{{ label }}</span>
+      <ArrowDown class="h-4 w-4" />
+    </Button>
+  </div>
+</template>

package/src/components/shell/SvedaAgentTasksPanel.vue

@@ -0,0 +1,146 @@
+<script setup>
+  import { Badge } from '../../ui/badge';
+  import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
+  import { CheckCircle2, CircleDashed, Loader2, Search, XCircle } from 'lucide-vue-next';
+  import { computed } from 'vue';
+  import { useSvedaT } from '../../i18n/index';
+
+  const props = defineProps({
+    phase: {
+      type: String,
+      default: '',
+    },
+    tasks: {
+      type: Array,
+      default: () => [],
+    },
+    showLiveStatus: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const t = useSvedaT();
+
+  const visible = computed(() => Array.isArray(props.tasks) && props.tasks.length > 0);
+
+  const phaseLabel = computed(() => {
+    if (props.phase === 'preflight') {
+      return t('phaseSearchSubagents');
+    }
+    if (props.phase === 'spawn') {
+      return t('agentTasksSpawnPhase');
+    }
+    if (props.phase === 'tool') {
+      return t('phaseToolCalling');
+    }
+    return t('agentTasksTitle');
+  });
+
+  const labelForTask = task => {
+    const type = String(task.type || '');
+    if (type) {
+      const key = `agentTaskType_${type}`;
+      const translated = t(key);
+      if (translated !== key) {
+        return translated;
+      }
+    }
+    return task.label || task.type;
+  };
+
+  const statusLabel = status => {
+    const key = `agentTaskStatus${String(status).charAt(0).toUpperCase()}${String(status).slice(1)}`;
+    const translated = t(key);
+    return translated !== key ? translated : status;
+  };
+
+  const isLiveTaskStatus = status =>
+    props.showLiveStatus && (status === 'running' || status === 'pending');
+
+  const statusIcon = status => {
+    if (isLiveTaskStatus(status)) {
+      return Loader2;
+    }
+    if (status === 'error' || status === 'failed') {
+      return XCircle;
+    }
+    if (status === 'success' || status === 'completed') {
+      return CheckCircle2;
+    }
+    return CircleDashed;
+  };
+
+  const statusVariant = status => {
+    if (status === 'error' || status === 'failed') {
+      return 'destructive';
+    }
+    if (status === 'success' || status === 'completed') {
+      return 'default';
+    }
+    return 'secondary';
+  };
+
+  const taskRowClass = status =>
+    [
+      'flex items-start gap-3 rounded-md border border-border/60 bg-background/80 px-3 py-2',
+      isLiveTaskStatus(status) ? 'border-sky-300/70' : '',
+    ].join(' ');
+
+  const statusIconClass = status =>
+    [
+      'mt-0.5 h-4 w-4 shrink-0',
+      isLiveTaskStatus(status) ? 'animate-spin text-sky-600' : '',
+      status === 'success' || status === 'completed' ? 'text-emerald-600' : '',
+      status === 'error' || status === 'failed' ? 'text-destructive' : '',
+    ].join(' ');
+</script>
+
+<template>
+  <Card
+    v-if="visible"
+    class="mb-3 border-sky-200/80 bg-sky-50/50 dark:border-sky-900/60 dark:bg-sky-950/30"
+  >
+    <CardHeader class="flex flex-row items-center gap-2 space-y-0 px-4 py-3">
+      <Search class="h-4 w-4 shrink-0 text-sky-700 dark:text-sky-300" />
+      <CardTitle class="text-sm font-medium text-sky-900 dark:text-sky-100">
+        {{ phaseLabel }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-2 px-4 pb-3 pt-0">
+      <div
+        v-for="task in tasks"
+        :key="task.id"
+        :class="taskRowClass(task.status)"
+      >
+        <component
+          :is="statusIcon(task.status)"
+          :class="statusIconClass(task.status)"
+        />
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="text-sm font-medium text-foreground">{{ labelForTask(task) }}</span>
+            <Badge
+              :variant="statusVariant(task.status)"
+              class="text-xs"
+            >
+              {{ statusLabel(task.status) }}
+            </Badge>
+          </div>
+          <p
+            v-if="task.summary"
+            class="mt-1 line-clamp-2 text-xs text-muted-foreground"
+          >
+            {{ task.summary }}
+          </p>
+          <p
+            v-else-if="task.error"
+            class="mt-1 line-clamp-2 text-xs text-destructive"
+          >
+            {{ task.error }}
+          </p>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>