@sveda-ai/vue 0.1.0

package/src/components/shell/SvedaInputSection.vue

@@ -0,0 +1,53 @@
+<script setup>
+  import SvedaContextUsageBar from './SvedaContextUsageBar.vue';
+  import SvedaModelControls from './SvedaModelControls.vue';
+  import ChatInput from '../chat/ChatInput.vue';
+
+  const inputMessage = defineModel('inputMessage', { type: String, default: '' });
+  const pendingFiles = defineModel('pendingFiles', { type: Array, default: () => [] });
+  const selectedChatModel = defineModel('selectedChatModel', { type: String, required: true });
+  const thinkingEnabled = defineModel('thinkingEnabled', { type: Boolean, default: true });
+
+  defineProps({
+    isLoading: { type: Boolean, default: false },
+    hasCurrentChat: { type: Boolean, default: false },
+    isStreaming: { type: Boolean, default: false },
+    statusBanner: { type: String, default: '' },
+    modelSelectPlaceholder: { type: String, required: true },
+    models: { type: Array, default: () => [] },
+    thinkingTooltip: { type: String, required: true },
+    contextWindowUsagePercent: { type: Number, required: true },
+    contextWindowTooltip: { type: String, required: true },
+  });
+
+  const emit = defineEmits(['send', 'stop']);
+</script>
+
+<template>
+  <ChatInput
+    v-model="inputMessage"
+    v-model:pending-files="pendingFiles"
+    :is-loading="isLoading"
+    :has-current-chat="hasCurrentChat"
+    :is-streaming="isStreaming"
+    :status-banner="statusBanner"
+    @send="emit('send')"
+    @stop="emit('stop')"
+  >
+    <template #bottom-left>
+      <SvedaModelControls
+        v-model="selectedChatModel"
+        v-model:thinking-enabled="thinkingEnabled"
+        :placeholder="modelSelectPlaceholder"
+        :models="models"
+        :thinking-tooltip="thinkingTooltip"
+      />
+    </template>
+    <template #bottom-outside>
+      <SvedaContextUsageBar
+        :percent="contextWindowUsagePercent"
+        :tooltip="contextWindowTooltip"
+      />
+    </template>
+  </ChatInput>
+</template>

package/src/components/shell/SvedaLandingView.vue

@@ -0,0 +1,93 @@
+<script setup>
+  import SvedaContextUsageBar from './SvedaContextUsageBar.vue';
+  import SvedaModelControls from './SvedaModelControls.vue';
+  import SvedaQuickPrompts from './SvedaQuickPrompts.vue';
+  import ChatInput from '../chat/ChatInput.vue';
+  import { useSvedaT } from '../../i18n/index';
+
+  const t = useSvedaT();
+
+  defineProps({
+    inputMessage: String,
+    isLoading: Boolean,
+    hasCurrentChat: Boolean,
+    isStreaming: Boolean,
+    pendingFiles: {
+      type: Array,
+      default: () => [],
+    },
+    selectedChatModel: String,
+    thinkingEnabled: Boolean,
+    contextWindowUsagePercent: Number,
+    showQuickPromptButtons: Boolean,
+    quickPromptButtons: Array,
+    models: {
+      type: Array,
+      default: () => [],
+    },
+    thinkingTooltip: String,
+    statusBanner: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const emit = defineEmits([
+    'update:inputMessage',
+    'update:selectedChatModel',
+    'update:thinkingEnabled',
+    'update:pendingFiles',
+    'send',
+    'stop',
+    'sendQuickPrompt',
+  ]);
+
+  const onInputUpdate = val => emit('update:inputMessage', val);
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col justify-center overflow-y-auto px-4 py-8">
+    <div class="flex w-full flex-col gap-3">
+      <slot name="top"></slot>
+      <ChatInput
+        :model-value="inputMessage"
+        :pending-files="pendingFiles"
+        @update:model-value="onInputUpdate"
+        @update:pending-files="val => emit('update:pendingFiles', val)"
+        :is-loading="isLoading"
+        :has-current-chat="hasCurrentChat"
+        :is-streaming="isStreaming"
+        :status-banner="statusBanner"
+        no-border
+        @send="$emit('send')"
+        @stop="$emit('stop')"
+      >
+        <template #bottom-left>
+          <SvedaModelControls
+            :model-value="selectedChatModel"
+            @update:model-value="$emit('update:selectedChatModel', $event)"
+            :thinking-enabled="thinkingEnabled"
+            @update:thinking-enabled="$emit('update:thinkingEnabled', $event)"
+            :placeholder="t('modelSelectPlaceholder')"
+            :models="models"
+            :thinking-tooltip="thinkingTooltip"
+          />
+        </template>
+        <template #bottom-outside>
+          <SvedaContextUsageBar
+            :percent="contextWindowUsagePercent"
+            :tooltip="t('contextWindowPercent', { percent: contextWindowUsagePercent })"
+          />
+        </template>
+      </ChatInput>
+      <SvedaQuickPrompts
+        v-if="showQuickPromptButtons"
+        class="px-4"
+        :prompts="quickPromptButtons"
+        :title="t('quickPromptsTitle')"
+        :disabled="isLoading || isStreaming"
+        @select="$emit('sendQuickPrompt', $event)"
+      />
+    </div>
+  </div>
+</template>

package/src/components/shell/SvedaMaxStepsNotice.vue

@@ -0,0 +1,33 @@
+<script setup>
+  import { Button } from '../../ui/button';
+  import { Play } from 'lucide-vue-next';
+
+  defineProps({
+    message: { type: String, required: true },
+    continueLabel: { type: String, required: true },
+    loading: { type: Boolean, default: false },
+  });
+
+  const emit = defineEmits(['continue']);
+</script>
+
+<template>
+  <div class="flex shrink-0 justify-center px-4 py-2">
+    <div class="flex max-w-md flex-col items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-center shadow-sm">
+      <p class="text-xs text-foreground">
+        {{ message }}
+      </p>
+      <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        class="h-8 gap-2 rounded-[var(--sveda-radius)] px-3 text-xs"
+        :disabled="loading"
+        @click="emit('continue')"
+      >
+        <Play class="h-3.5 w-3.5" />
+        {{ continueLabel }}
+      </Button>
+    </div>
+  </div>
+</template>

package/src/components/shell/SvedaMinimizedTrigger.vue

@@ -0,0 +1,43 @@
+<script setup>
+  import { Button } from '../../ui/button';
+  import { computed } from 'vue';
+  import { svedaLauncherIconComponent } from '../../launcherIcons';
+
+  const props = defineProps({
+    label: { type: String, required: true },
+    icon: { type: String, default: 'sparkles' },
+    logoSrc: { type: String, default: '' },
+    logoAlt: { type: String, default: '' },
+  });
+
+  defineEmits(['open']);
+
+  const Icon = computed(() => svedaLauncherIconComponent(props.icon));
+
+  const triggerClass =
+    'flex h-10 min-w-[200px] items-center justify-start gap-2 rounded-bl-none rounded-br-none rounded-tl-[var(--sveda-radius)] rounded-tr-none bg-primary px-3 text-primary-foreground shadow-2xl transition-all hover:bg-primary/90 min-[768px]:min-w-0 min-[1872px]:h-14 min-[1872px]:justify-center min-[1872px]:gap-3 min-[1872px]:rounded-[var(--sveda-radius)] min-[1872px]:px-4 [&_svg]:!h-6 [&_svg]:!w-6 min-[1872px]:[&_svg]:!h-10 min-[1872px]:[&_svg]:!w-10';
+</script>
+
+<template>
+  <Button
+    size="lg"
+    :class="triggerClass"
+    @click="$emit('open')"
+  >
+    <img
+      v-if="logoSrc"
+      :src="logoSrc"
+      :alt="logoAlt"
+      class="h-6 w-6 flex-shrink-0 object-cover min-[1872px]:h-10 min-[1872px]:w-10"
+    />
+    <component
+      :is="Icon"
+      v-else
+      class="h-6 w-6 flex-shrink-0"
+    />
+    <span
+      v-if="label"
+      class="font-semibold"
+    >{{ label }}</span>
+  </Button>
+</template>

package/src/components/shell/SvedaModelControls.vue

@@ -0,0 +1,47 @@
+<script setup>
+  import SvedaModelSelect from './SvedaModelSelect.vue';
+  import { Switch } from '../../ui/switch';
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip';
+  import { Brain } from 'lucide-vue-next';
+  import { computed } from 'vue';
+
+  const chatModel = defineModel({ type: String, required: true });
+  const thinkingEnabled = defineModel('thinkingEnabled', { type: Boolean, default: true });
+
+  const props = defineProps({
+    placeholder: { type: String, required: true },
+    thinkingTooltip: { type: String, required: true },
+    models: { type: Array, default: () => [] },
+  });
+
+  const selectedSupportsThinking = computed(
+    () => props.models.some(option => option.id === chatModel.value && option.supportsThinking)
+  );
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <SvedaModelSelect
+      v-model="chatModel"
+      :placeholder="placeholder"
+      :models="models"
+    />
+    <TooltipProvider v-if="selectedSupportsThinking">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <div class="flex cursor-default items-center gap-1 rounded-md px-0.5 py-0.5 text-muted-foreground hover:bg-muted/50 hover:text-foreground">
+            <Brain class="h-3.5 w-3.5 shrink-0" />
+            <Switch
+              v-model="thinkingEnabled"
+              size="sm"
+              :aria-label="thinkingTooltip"
+            />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent class="max-w-xs">
+          {{ thinkingTooltip }}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </div>
+</template>

package/src/components/shell/SvedaModelSelect.vue

@@ -0,0 +1,32 @@
+<script setup>
+  import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+
+  const model = defineModel({ type: String, required: true });
+
+  defineProps({
+    placeholder: { type: String, required: true },
+    models: { type: Array, default: () => [] },
+  });
+</script>
+
+<template>
+  <Select v-model="model">
+    <SelectTrigger
+      class="h-7 w-fit min-w-[110px] border-none bg-transparent px-2 text-xs text-muted-foreground shadow-none hover:bg-muted/50 hover:text-foreground focus:ring-0 focus:ring-offset-0"
+    >
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectItem
+          v-for="option in models"
+          :key="option.id"
+          :value="option.id"
+          class="text-xs"
+        >
+          {{ option.label }}
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>

package/src/components/shell/SvedaQuickPrompts.vue

@@ -0,0 +1,44 @@
+<script setup>
+  import { Button } from '../../ui/button';
+
+  defineProps({
+    prompts: { type: Array, required: true },
+    disabled: { type: Boolean, default: false },
+    title: { type: String, required: true },
+  });
+
+  defineEmits(['select']);
+</script>
+
+<template>
+  <div
+    class="w-full"
+    role="group"
+    :aria-label="title"
+  >
+    <div class="quick-prompts-row -mx-1 flex gap-2 overflow-x-auto px-1 pb-1">
+      <Button
+        v-for="prompt in prompts"
+        :key="prompt.label"
+        type="button"
+        variant="secondary"
+        size="sm"
+        class="h-8 shrink-0 rounded-[var(--sveda-radius)] border border-border/60 bg-muted/80 px-3 text-xs font-normal text-muted-foreground shadow-none hover:bg-muted hover:text-foreground"
+        :disabled="disabled"
+        @click="$emit('select', prompt.prompt)"
+      >
+        {{ prompt.label }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .quick-prompts-row {
+    scrollbar-color: hsl(var(--foreground) / 0.2) transparent;
+  }
+
+  .quick-prompts-row::-webkit-scrollbar-track {
+    background: transparent;
+  }
+</style>

package/src/components/shell/SvedaResizeHandles.vue

@@ -0,0 +1,31 @@
+<script setup>
+  defineProps({
+    isMobile: { type: Boolean, required: true },
+    viewMode: { type: String, required: true },
+  });
+
+  defineEmits(['start-resize']);
+</script>
+
+<template>
+  <div
+    v-if="!isMobile && viewMode === 'fixed'"
+    class="absolute bottom-3 left-0 top-3 z-10 w-1 cursor-ew-resize hover:bg-primary/30"
+    @mousedown="$emit('start-resize', 'fixed-left', $event)"
+  ></div>
+  <div
+    v-if="!isMobile && viewMode === 'floating'"
+    class="absolute left-0 top-0 z-10 h-3 w-3 cursor-nw-resize rounded-br hover:bg-primary/20"
+    @mousedown="$emit('start-resize', 'top-left', $event)"
+  ></div>
+  <div
+    v-if="!isMobile && viewMode === 'floating'"
+    class="absolute left-3 right-3 top-0 z-10 h-1 cursor-n-resize hover:bg-primary/30"
+    @mousedown="$emit('start-resize', 'top', $event)"
+  ></div>
+  <div
+    v-if="!isMobile && viewMode === 'floating'"
+    class="absolute bottom-3 left-0 top-3 z-10 w-1 cursor-w-resize hover:bg-primary/30"
+    @mousedown="$emit('start-resize', 'left', $event)"
+  ></div>
+</template>

package/src/components/shell/SvedaTabs.vue

@@ -0,0 +1,123 @@
+<script setup>
+  import { Button } from '../../ui/button';
+  import { ScrollArea, ScrollBar } from '../../ui/scroll-area';
+  import { buildChatTabTitleMap } from '../../lib/chatTabs';
+  import { Loader2, Plus, X } from 'lucide-vue-next';
+  import { computed, unref } from 'vue';
+  import { useSvedaT } from '../../i18n/index';
+
+  const t = useSvedaT();
+
+  const props = defineProps({
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    currentChatId: {
+      type: String,
+      default: null,
+    },
+    streamingChatIds: {
+      type: Object,
+      default: () => new Set(),
+    },
+    unreadChatIds: {
+      type: Object,
+      default: () => new Set(),
+    },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const emit = defineEmits(['select-chat', 'close-tab', 'new-chat']);
+
+  const visibleTabs = computed(() => props.tabs.filter(tab => tab?.id));
+
+  const tabTitles = computed(() => buildChatTabTitleMap(visibleTabs.value, t));
+
+  const resolveIdSet = value => {
+    const resolved = unref(value);
+    if (resolved instanceof Set) {
+      return resolved;
+    }
+    return new Set();
+  };
+
+  const isStreaming = chatId => resolveIdSet(props.streamingChatIds).has(chatId);
+
+  const hasUnread = chatId => !isStreaming(chatId) && resolveIdSet(props.unreadChatIds).has(chatId);
+
+  const tabTriggerClass = chatId =>
+    [
+      'inline-flex h-10 max-w-56 shrink-0 items-center gap-1.5 whitespace-nowrap border-b-2 border-transparent px-4 py-2 text-sm font-medium text-foreground/70 transition-all hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      props.currentChatId === chatId
+        ? 'border-primary bg-muted/60 text-foreground shadow-sm'
+        : '',
+    ].join(' ');
+
+  const closeTab = (chatId, event) => {
+    event.stopPropagation();
+    emit('close-tab', chatId);
+  };
+</script>
+
+<template>
+  <div
+    v-if="visibleTabs.length > 0"
+    class="flex shrink-0 items-stretch border-b border-border/50 bg-background/70"
+    :class="compact ? 'px-3' : 'px-4 md:px-6'"
+  >
+    <ScrollArea class="min-w-0 flex-1">
+      <div class="flex h-12 min-w-max items-end gap-px px-1">
+        <div
+          v-for="tab in visibleTabs"
+          :key="tab.id"
+          role="button"
+          tabindex="0"
+          :class="tabTriggerClass(tab.id)"
+          @click="emit('select-chat', tab.id)"
+          @keydown.enter.prevent="emit('select-chat', tab.id)"
+          @keydown.space.prevent="emit('select-chat', tab.id)"
+        >
+          <Loader2
+            v-if="isStreaming(tab.id)"
+            class="h-3.5 w-3.5 shrink-0 animate-spin text-primary"
+            :aria-label="t('chatTabRunning')"
+          />
+          <span
+            v-else-if="hasUnread(tab.id)"
+            class="h-2 w-2 shrink-0 rounded-full bg-primary"
+            :aria-label="t('chatTabUnread')"
+          />
+          <span class="min-w-0 truncate">
+            {{ tabTitles.get(tab.id) }}
+          </span>
+          <button
+            type="button"
+            class="ml-0.5 rounded-sm p-0.5 text-muted-foreground opacity-70 hover:bg-background/80 hover:text-foreground hover:opacity-100"
+            :aria-label="t('closeChatTab')"
+            @mousedown.stop
+            @click.stop="closeTab(tab.id, $event)"
+          >
+            <X class="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+
+    <div class="flex shrink-0 items-center border-l border-border/40 pl-1">
+      <Button
+        variant="ghostTransparent"
+        size="icon"
+        class="h-9 w-9 shrink-0 text-muted-foreground hover:text-foreground"
+        :aria-label="t('newChat')"
+        @click="emit('new-chat')"
+      >
+        <Plus class="h-4 w-4" />
+      </Button>
+    </div>
+  </div>
+</template>

package/src/components/shell/SvedaToolbar.vue

@@ -0,0 +1,171 @@
+<script setup>
+  import { Button } from '../../ui/button';
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip';
+  import { History, Maximize2, MessageSquare, Minimize2, PanelRight, Sparkles, X } from 'lucide-vue-next';
+  import { computed } from 'vue';
+  import { useSvedaT } from '../../i18n/index';
+
+  const t = useSvedaT();
+
+  const props = defineProps({
+    isMobile: { type: Boolean, required: true },
+    viewMode: { type: String, required: true },
+    isImmersiveDesktop: { type: Boolean, required: true },
+    showHistorySidebar: { type: Boolean, required: true },
+    immersiveUiEnabled: { type: Boolean, default: true },
+    viewModeToggleEnabled: { type: Boolean, default: true },
+    title: { type: String, required: true },
+    viewModeFloatingLabel: { type: String, required: true },
+    viewModeFixedLabel: { type: String, required: true },
+    immersiveEnterLabel: { type: String, required: true },
+    immersiveExitLabel: { type: String, required: true },
+    immersiveBrandName: { type: String, default: '' },
+    immersiveBrandLogo: { type: String, default: null },
+  });
+
+  defineEmits([
+    'toggle-history-sidebar',
+    'exit-immersive',
+    'enter-immersive',
+    'toggle-view-mode',
+    'new-chat',
+    'minimize',
+  ]);
+
+  const headerClass = computed(() => {
+    const base =
+      'flex h-14 shrink-0 flex-row items-center justify-between border-b border-border/50 bg-background/70 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/70 md:px-6 xl:h-16';
+    if (props.viewMode === 'immersive') {
+      return `${base} rounded-none`;
+    }
+    if (props.isMobile || props.viewMode === 'fixed') {
+      return `${base} rounded-none`;
+    }
+    return `${base} rounded-t-[var(--sveda-radius)]`;
+  });
+</script>
+
+<template>
+  <TooltipProvider>
+    <header :class="headerClass">
+      <div
+        v-if="!isImmersiveDesktop"
+        class="flex min-w-0 flex-1 items-center gap-2"
+      >
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghostTransparent"
+              size="icon"
+              class="h-9 w-9 text-muted-foreground hover:text-foreground"
+              :class="{ 'bg-muted/60 text-foreground': showHistorySidebar }"
+              @click="$emit('toggle-history-sidebar')"
+            >
+              <History class="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ t('chatHistory') }}</p>
+          </TooltipContent>
+        </Tooltip>
+        <h2 class="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight text-foreground xl:text-base">
+          {{ title }}
+        </h2>
+      </div>
+      <div
+        v-else
+        class="flex min-w-0 flex-1 items-center gap-4"
+      >
+        <div class="w-[min(20rem,33vw)] min-w-0">
+          <div class="flex items-center gap-2">
+            <img
+              v-if="immersiveBrandLogo"
+              :src="immersiveBrandLogo"
+              :alt="immersiveBrandName"
+              class="size-7 shrink-0 rounded"
+            />
+            <Sparkles
+              v-else
+              class="size-5 shrink-0 text-primary"
+            />
+            <span class="truncate text-lg font-bold leading-none text-foreground">
+              {{ immersiveBrandName }}
+            </span>
+          </div>
+        </div>
+        <h2 class="min-w-0 flex-1 truncate text-left text-sm font-medium leading-tight text-foreground xl:text-base">
+          {{ title }}
+        </h2>
+      </div>
+      <div class="flex shrink-0 items-center gap-0.5">
+        <Tooltip v-if="immersiveUiEnabled && !isMobile && viewMode === 'immersive'">
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghostTransparent"
+              size="icon"
+              class="h-9 w-9 text-muted-foreground hover:text-foreground"
+              @click="$emit('exit-immersive')"
+            >
+              <Minimize2 class="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ immersiveExitLabel }}</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip v-if="immersiveUiEnabled && !isMobile && viewMode !== 'immersive'">
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghostTransparent"
+              size="icon"
+              class="h-9 w-9 text-muted-foreground hover:text-foreground"
+              @click="$emit('enter-immersive')"
+            >
+              <Maximize2 class="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ immersiveEnterLabel }}</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip v-if="viewModeToggleEnabled && !isMobile && viewMode !== 'immersive'">
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghostTransparent"
+              size="icon"
+              class="h-9 w-9 text-muted-foreground hover:text-foreground"
+              @click="$emit('toggle-view-mode')"
+            >
+              <PanelRight
+                v-if="viewMode === 'floating'"
+                class="h-4 w-4"
+              />
+              <MessageSquare
+                v-else
+                class="h-4 w-4"
+              />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ viewMode === 'floating' ? viewModeFixedLabel : viewModeFloatingLabel }}</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghostTransparent"
+              size="icon"
+              class="h-9 w-9 text-muted-foreground hover:text-foreground"
+              @click="$emit('minimize')"
+            >
+              <X class="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ t('toolbarMinimize') }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </header>
+  </TooltipProvider>
+</template>