@vc-shell/framework 1.2.3 → 1.2.4-beta.2

package/core/plugins/ai-agent/components/_internal/VcAiAgentHeader.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="vc-ai-agent-header">
+    <div class="vc-ai-agent-header__icon">
+      <VcVirtoOzLogo :width="22" :height="24" show-dots />
+    </div>
+
+    <div class="vc-ai-agent-header__wrapper">
+      <div class="vc-ai-agent-header__content">
+        <div class="vc-ai-agent-header__title">
+          {{ title }}
+        </div>
+      </div>
+    </div>
+
+    <div class="vc-ai-agent-header__controls">
+      <div
+        v-if="isExpanded"
+        class="vc-ai-agent-header__button"
+        title="Collapse"
+        @click="$emit('collapse')"
+      >
+        <VcIcon icon="material-minimize" />
+      </div>
+      <div
+        v-else
+        class="vc-ai-agent-header__button"
+        title="Expand"
+        @click="$emit('expand')"
+      >
+        <VcIcon icon="material-toolbar" />
+      </div>
+      <div
+        class="vc-ai-agent-header__button"
+        title="Close"
+        @click="$emit('close')"
+      >
+        <VcIcon icon="material-close" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "../../../../../ui/components";
+import VcVirtoOzLogo from "./VcVirtoOzLogo.vue";
+
+defineProps<{
+  title?: string;
+  isExpanded: boolean;
+}>();
+
+defineEmits<{
+  (e: "close"): void;
+  (e: "expand"): void;
+  (e: "collapse"): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-ai-agent-header {
+  @apply tw-shrink-0 tw-flex tw-items-center tw-py-0 tw-px-6 tw-border-solid tw-border-b;
+  height: var(--blade-header-height, 70px);
+  background-color: var(--blade-header-background-color, var(--additional-50));
+  border-color: var(--blade-header-border-color, var(--neutrals-200));
+
+  &__left {
+    @apply tw-flex tw-flex-row tw-items-center;
+  }
+
+  &__icon {
+    @apply tw-mr-3;
+    color: var(--primary-500);
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-items-center tw-justify-between tw-grow tw-basis-0 tw-overflow-hidden;
+  }
+
+  &__content {
+    @apply tw-overflow-hidden;
+  }
+
+  &__title {
+    @apply tw-truncate tw-font-semibold;
+    color: var(--blade-header-title-color, var(--neutrals-950));
+    font-size: var(--blade-header-title-font-size, 19px);
+  }
+
+  &__controls {
+    @apply tw-flex tw-items-center;
+  }
+
+  &__button {
+    @apply tw-ml-2.5 tw-cursor-pointer;
+    color: var(--blade-header-button-color, var(--neutrals-400));
+
+    &:hover {
+      color: var(--blade-header-button-color-hover, var(--neutrals-500));
+    }
+  }
+}
+</style>

package/core/plugins/ai-agent/components/_internal/VcAiAgentIframe.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="vc-ai-agent-iframe">
+    <!-- Loading overlay -->
+    <Transition name="fade">
+      <VcAiAgentLoader v-if="isLoading && url" :text="$t('AI_AGENT.LOADING')" />
+    </Transition>
+
+    <iframe
+      v-if="url"
+      ref="iframeRef"
+      :src="url"
+      class="vc-ai-agent-iframe__frame"
+      :class="{ 'vc-ai-agent-iframe__frame--loading': isLoading }"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+      allow="clipboard-read; clipboard-write"
+      @load="onLoad"
+    />
+    <div v-else class="vc-ai-agent-iframe__placeholder">
+      <VcIcon icon="lucide-sparkles" size="xl" class="vc-ai-agent-iframe__placeholder-icon" />
+      <p class="vc-ai-agent-iframe__placeholder-text">AI Agent URL not configured</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch } from "vue";
+import { VcIcon } from "../../../../../ui/components";
+import VcAiAgentLoader from "./VcAiAgentLoader.vue";
+
+const props = defineProps<{
+  url: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "iframe-ready", iframe: HTMLIFrameElement): void;
+}>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const isLoading = ref(true);
+
+// Emit iframe ref as soon as it's available in the DOM (before @load)
+// This is critical because chatbot sends CHAT_READY before @load fires
+watch(iframeRef, (iframe) => {
+  if (iframe) {
+    emit("iframe-ready", iframe);
+  }
+}, { immediate: true });
+
+const onLoad = () => {
+  // Hide loader after iframe loads
+  isLoading.value = false;
+  console.debug("[VcAiAgentIframe] Iframe loaded");
+};
+
+onMounted(() => {
+  // Emit again on mount in case watch didn't catch it
+  if (iframeRef.value) {
+    emit("iframe-ready", iframeRef.value);
+  }
+});
+
+// Reset loading state when URL changes
+watch(() => props.url, () => {
+  isLoading.value = true;
+});
+</script>
+
+<style lang="scss">
+// Fade transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.vc-ai-agent-iframe {
+  @apply tw-w-full tw-h-full tw-flex tw-flex-col tw-relative;
+
+  &__frame {
+    @apply tw-w-full tw-h-full tw-border-0 tw-flex-1;
+    background-color: var(--ai-panel-iframe-bg, var(--additional-50));
+    transition: opacity 0.3s ease;
+
+    &--loading {
+      opacity: 0;
+    }
+  }
+
+  &__placeholder {
+    @apply tw-w-full tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4;
+    background-color: var(--ai-panel-placeholder-bg, var(--neutrals-50));
+  }
+
+  &__placeholder-icon {
+    color: var(--ai-panel-placeholder-icon-color, var(--neutrals-300));
+  }
+
+  &__placeholder-text {
+    @apply tw-text-sm tw-m-0;
+    color: var(--ai-panel-placeholder-text-color, var(--neutrals-500));
+  }
+}
+</style>

package/core/plugins/ai-agent/components/_internal/VcAiAgentLoader.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="vc-ai-agent-loader">
+    <div class="vc-ai-agent-loader__content">
+      <div class="vc-ai-agent-loader__logo">
+        <VcVirtoOzLogo :width="80" :height="87" animated />
+      </div>
+      <p v-if="text" class="vc-ai-agent-loader__text">{{ text }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VcVirtoOzLogo from "./VcVirtoOzLogo.vue";
+
+export interface Props {
+  /** Loading text to display */
+  text?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+@keyframes virto-oz-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes virto-oz-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 4px 15px rgba(255, 149, 51, 0.4));
+  }
+  25% {
+    filter: drop-shadow(0 4px 15px rgba(255, 79, 187, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 4px 15px rgba(28, 145, 252, 0.4));
+  }
+  75% {
+    filter: drop-shadow(0 4px 15px rgba(154, 45, 248, 0.4));
+  }
+}
+
+.vc-ai-agent-loader {
+  @apply tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-z-10;
+  background: linear-gradient(
+    135deg,
+    var(--additional-50) 0%,
+    var(--neutrals-50) 100%
+  );
+
+  &__content {
+    @apply tw-flex tw-flex-col tw-items-center tw-gap-5;
+  }
+
+  &__logo {
+    animation: virto-oz-float 2.5s ease-in-out infinite,
+      virto-oz-glow 4s linear infinite;
+  }
+
+  &__text {
+    @apply tw-text-sm tw-m-0 tw-font-medium;
+    color: var(--neutrals-600);
+  }
+}
+</style>

package/core/plugins/ai-agent/components/_internal/VcVirtoOzLogo.vue

@@ -0,0 +1,136 @@
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 99 108"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="vc-virto-oz-logo"
+  >
+    <!-- White hexagon background -->
+    <path
+      d="M40.1199 2.41576C45.6989 -0.805254 52.5724 -0.805253 58.1514 2.41576L89.2556 20.3738C94.8345 23.5948 98.2713 29.5475 98.2713 35.9895V71.9055C98.2713 78.3475 94.8345 84.3002 89.2556 87.5212L58.1514 105.479C52.5724 108.7 45.6989 108.7 40.1199 105.479L9.01574 87.5212C3.43678 84.3002 0 78.3475 0 71.9055V35.9895C0 29.5475 3.43678 23.5948 9.01574 20.3738L40.1199 2.41576Z"
+      fill="white"
+    />
+
+    <!-- Static gradient spiral pattern (using foreignObject with conic-gradient) -->
+    <g v-if="!animated" :clip-path="`url(#${clipPathId})`">
+      <g transform="matrix(0 -0.161514 0.160417 0 49.1357 53.9479)">
+        <foreignObject x="-334.01" y="-334.01" width="668.02" height="668.02">
+          <div
+            xmlns="http://www.w3.org/1999/xhtml"
+            style="background: conic-gradient(from 90deg, rgba(255, 149, 51, 1) 0deg, rgba(255, 79, 187, 1) 43.2deg, rgba(234, 255, 79, 1) 143.654deg, rgba(28, 145, 252, 1) 252.692deg, rgba(154, 45, 248, 1) 316.8deg, rgba(255, 149, 51, 1) 360deg); height: 100%; width: 100%; opacity: 1;"
+          />
+        </foreignObject>
+      </g>
+    </g>
+
+    <!-- Animated gradient spiral pattern (using linearGradient with animate) -->
+    <path
+      v-else
+      d="M72.9199 46.4165C73.2527 46.9495 73.5831 47.4996 73.9092 48.0679C78.4022 55.8976 79.0605 66.3551 76.7793 76.6079C74.5635 86.5668 69.6096 96.1504 62.9795 102.692L58.1514 105.48C52.5725 108.701 45.699 108.701 40.1201 105.48L21.665 94.8247C29.1398 95.4723 37.0781 94.4072 44.3848 91.9233C54.5984 88.4512 63.7463 82.1497 68.6807 73.6548C75.124 62.5619 75.4351 53.2694 72.9199 46.4165ZM56.5205 29.5093C65.5697 29.5331 75.1259 33.9964 83.0215 40.8853C89.9848 46.9608 95.5441 54.8286 98.2715 62.9478V71.9058C98.2715 78.3478 94.8348 84.301 89.2559 87.522L69.4658 98.9468C74.0688 92.6731 77.4601 84.9996 79.207 77.1479C81.5723 66.517 80.9666 55.3703 76.0654 46.8296C69.6817 35.7054 61.7917 30.789 54.6006 29.5396C55.2271 29.5179 55.867 29.5076 56.5205 29.5093ZM0 50.688C3.16812 57.476 8.04614 63.7935 13.8389 68.853C21.9305 75.9204 31.9368 80.6465 41.7578 80.6724C54.5833 80.706 62.7851 76.3308 67.4629 70.728C67.1684 71.2812 66.8584 71.8408 66.5303 72.4058C61.9844 80.2318 53.417 86.2251 43.584 89.5679C34.4355 92.6779 24.3375 93.4401 15.6328 91.3423L9.01562 87.522C3.43667 84.301 0 78.3478 0 71.9058V50.688ZM26.7559 10.1313C22.5672 16.2131 19.6599 23.483 18.2695 30.9126C16.3077 41.3962 17.3358 52.3558 22.2188 60.8647C28.6034 71.9905 36.4946 76.9061 43.6865 78.1548C43.0594 78.1765 42.4188 78.1868 41.7646 78.1851C32.7113 78.1612 23.2602 73.7801 15.4746 66.98C8.2197 60.6434 2.52684 52.3035 0 43.7075V35.9897C6.33247e-05 29.5479 3.43687 23.5955 9.01562 20.3745L26.7559 10.1313ZM51.2432 31.6978C54.0287 31.7659 57.0796 32.4389 60.1875 33.9976C58.8529 33.7029 57.5584 33.677 56.3965 33.9722L57.0088 36.3833C58.4774 36.0102 60.6741 36.4134 63.0332 37.8237C65.3553 39.212 67.6865 41.4953 69.375 44.5923C70.7081 47.0376 71.6489 50.015 71.8535 53.4839C71.4414 52.1828 70.818 51.0505 69.9824 50.1929L68.2012 51.9282C69.2585 53.0135 70.0076 55.1176 69.9658 57.8657C69.9246 60.5708 69.1121 63.731 67.2744 66.7417C65.8225 69.1203 63.7129 71.4251 60.8086 73.3374C61.7311 72.329 62.4012 71.2217 62.7266 70.0679L60.333 69.3931C59.9218 70.8514 58.4742 72.5523 56.0732 73.8901C53.71 75.207 50.5672 76.0837 47.041 75.9976C44.2551 75.9294 41.204 75.2549 38.0957 73.6958C39.4307 73.9907 40.7254 74.0184 41.8877 73.7231L41.2754 71.312C39.8069 71.6851 37.6101 71.2818 35.251 69.8716C32.9289 68.4834 30.5977 66.2 28.9092 63.103C27.5754 60.6565 26.6337 57.6775 26.4297 54.2065C26.8418 55.5096 27.4661 56.6438 28.3027 57.5024L30.084 55.7661C29.0267 54.6807 28.2775 52.5767 28.3193 49.8286C28.3606 47.1236 29.173 43.9633 31.0107 40.9526C32.4621 38.5751 34.5702 36.2706 37.4727 34.3589C36.5514 35.3666 35.8827 36.4736 35.5576 37.6265L37.9512 38.3013C38.3625 36.8429 39.8101 35.142 42.2109 33.8042C44.5742 32.4874 47.717 31.6116 51.2432 31.6978ZM40.1201 2.4165C45.6991 -0.804509 52.5724 -0.804509 58.1514 2.4165L75.6777 12.5356C68.4683 12.0708 60.8765 13.1991 53.8691 15.6333C43.6671 19.1774 34.5353 25.5492 29.6035 34.0396C23.1612 45.1305 22.8486 54.4223 25.3623 61.2749C25.0301 60.7429 24.7004 60.1936 24.375 59.6265C19.8639 51.765 18.8286 41.4457 20.7139 31.3706C22.4486 22.1007 26.633 13.1734 32.6709 6.71631L40.1201 2.4165ZM54.6855 17.9829C63.3703 14.966 72.9092 14.0715 81.3008 15.7817L89.2559 20.3745C94.8346 23.5955 98.2714 29.5479 98.2715 35.9897V56.4692C95.0606 49.9731 90.2759 43.9144 84.6562 39.0112C76.4636 31.8632 66.3524 27.0488 56.5273 27.0229C43.6978 26.9893 35.4935 31.3659 30.8164 36.9712C31.1117 36.4161 31.4247 35.8554 31.7539 35.2886C36.3024 27.4582 44.8633 21.395 54.6855 17.9829Z"
+      fill="url(#virto-oz-gradient-animated)"
+    />
+
+    <!-- White center circle -->
+    <path
+      d="M72.1266 54.0945C72.1266 60.0873 74.3028 71.0379 60.6238 82.8517C65.2871 73.0587 55.8339 77.1002 49.1209 77.1002C36.4152 77.1002 26.1152 66.8002 26.1152 54.0945C26.1152 41.3889 36.4152 31.0889 49.1209 31.0889C61.8266 31.0889 72.1266 41.3889 72.1266 54.0945Z"
+      fill="white"
+    />
+
+    <!-- Center dots (eyes) -->
+    <ellipse cx="49.12" cy="54.09" rx="4.05" ry="4.05" fill="#6C6C6C" />
+    <ellipse cx="60.62" cy="54.09" rx="4.05" ry="4.05" fill="#6C6C6C" />
+    <ellipse cx="37.62" cy="54.09" rx="4.05" ry="4.05" fill="#6C6C6C" />
+
+    <!-- Definitions -->
+    <defs>
+      <!-- Clip path for static conic gradient (spiral shape) -->
+      <clipPath v-if="!animated" :id="clipPathId">
+        <path
+          d="M72.9199 46.4165C73.2527 46.9495 73.5831 47.4996 73.9092 48.0679C78.4022 55.8976 79.0605 66.3551 76.7793 76.6079C74.5635 86.5668 69.6096 96.1504 62.9795 102.692L58.1514 105.48C52.5725 108.701 45.699 108.701 40.1201 105.48L21.665 94.8247C29.1398 95.4723 37.0781 94.4072 44.3848 91.9233C54.5984 88.4512 63.7463 82.1497 68.6807 73.6548C75.124 62.5619 75.4351 53.2694 72.9199 46.4165ZM56.5205 29.5093C65.5697 29.5331 75.1259 33.9964 83.0215 40.8853C89.9848 46.9608 95.5441 54.8286 98.2715 62.9478V71.9058C98.2715 78.3478 94.8348 84.301 89.2559 87.522L69.4658 98.9468C74.0688 92.6731 77.4601 84.9996 79.207 77.1479C81.5723 66.517 80.9666 55.3703 76.0654 46.8296C69.6817 35.7054 61.7917 30.789 54.6006 29.5396C55.2271 29.5179 55.867 29.5076 56.5205 29.5093ZM0 50.688C3.16812 57.476 8.04614 63.7935 13.8389 68.853C21.9305 75.9204 31.9368 80.6465 41.7578 80.6724C54.5833 80.706 62.7851 76.3308 67.4629 70.728C67.1684 71.2812 66.8584 71.8408 66.5303 72.4058C61.9844 80.2318 53.417 86.2251 43.584 89.5679C34.4355 92.6779 24.3375 93.4401 15.6328 91.3423L9.01562 87.522C3.43667 84.301 0 78.3478 0 71.9058V50.688ZM26.7559 10.1313C22.5672 16.2131 19.6599 23.483 18.2695 30.9126C16.3077 41.3962 17.3358 52.3558 22.2188 60.8647C28.6034 71.9905 36.4946 76.9061 43.6865 78.1548C43.0594 78.1765 42.4188 78.1868 41.7646 78.1851C32.7113 78.1612 23.2602 73.7801 15.4746 66.98C8.2197 60.6434 2.52684 52.3035 0 43.7075V35.9897C6.33247e-05 29.5479 3.43687 23.5955 9.01562 20.3745L26.7559 10.1313ZM51.2432 31.6978C54.0287 31.7659 57.0796 32.4389 60.1875 33.9976C58.8529 33.7029 57.5584 33.677 56.3965 33.9722L57.0088 36.3833C58.4774 36.0102 60.6741 36.4134 63.0332 37.8237C65.3553 39.212 67.6865 41.4953 69.375 44.5923C70.7081 47.0376 71.6489 50.015 71.8535 53.4839C71.4414 52.1828 70.818 51.0505 69.9824 50.1929L68.2012 51.9282C69.2585 53.0135 70.0076 55.1176 69.9658 57.8657C69.9246 60.5708 69.1121 63.731 67.2744 66.7417C65.8225 69.1203 63.7129 71.4251 60.8086 73.3374C61.7311 72.329 62.4012 71.2217 62.7266 70.0679L60.333 69.3931C59.9218 70.8514 58.4742 72.5523 56.0732 73.8901C53.71 75.207 50.5672 76.0837 47.041 75.9976C44.2551 75.9294 41.204 75.2549 38.0957 73.6958C39.4307 73.9907 40.7254 74.0184 41.8877 73.7231L41.2754 71.312C39.8069 71.6851 37.6101 71.2818 35.251 69.8716C32.9289 68.4834 30.5977 66.2 28.9092 63.103C27.5754 60.6565 26.6337 57.6775 26.4297 54.2065C26.8418 55.5096 27.4661 56.6438 28.3027 57.5024L30.084 55.7661C29.0267 54.6807 28.2775 52.5767 28.3193 49.8286C28.3606 47.1236 29.173 43.9633 31.0107 40.9526C32.4621 38.5751 34.5702 36.2706 37.4727 34.3589C36.5514 35.3666 35.8827 36.4736 35.5576 37.6265L37.9512 38.3013C38.3625 36.8429 39.8101 35.142 42.2109 33.8042C44.5742 32.4874 47.717 31.6116 51.2432 31.6978ZM40.1201 2.4165C45.6991 -0.804509 52.5724 -0.804509 58.1514 2.4165L75.6777 12.5356C68.4683 12.0708 60.8765 13.1991 53.8691 15.6333C43.6671 19.1774 34.5353 25.5492 29.6035 34.0396C23.1612 45.1305 22.8486 54.4223 25.3623 61.2749C25.0301 60.7429 24.7004 60.1936 24.375 59.6265C19.8639 51.765 18.8286 41.4457 20.7139 31.3706C22.4486 22.1007 26.633 13.1734 32.6709 6.71631L40.1201 2.4165ZM54.6855 17.9829C63.3703 14.966 72.9092 14.0715 81.3008 15.7817L89.2559 20.3745C94.8346 23.5955 98.2714 29.5479 98.2715 35.9897V56.4692C95.0606 49.9731 90.2759 43.9144 84.6562 39.0112C76.4636 31.8632 66.3524 27.0488 56.5273 27.0229C43.6978 26.9893 35.4935 31.3659 30.8164 36.9712C31.1117 36.4161 31.4247 35.8554 31.7539 35.2886C36.3024 27.4582 44.8633 21.395 54.6855 17.9829Z"
+        />
+      </clipPath>
+
+      <!-- Animated gradient -->
+      <linearGradient
+        v-if="animated"
+        id="virto-oz-gradient-animated"
+        gradientUnits="userSpaceOnUse"
+        x1="0"
+        y1="0"
+        x2="99"
+        y2="108"
+      >
+        <stop offset="0%" stop-color="#FF9533">
+          <animate
+            attributeName="stop-color"
+            values="#FF9533;#FF4FBB;#EAFF4F;#1C91FC;#9A2DF8;#FF9533"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop offset="25%" stop-color="#FF4FBB">
+          <animate
+            attributeName="stop-color"
+            values="#FF4FBB;#EAFF4F;#1C91FC;#9A2DF8;#FF9533;#FF4FBB"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop offset="50%" stop-color="#EAFF4F">
+          <animate
+            attributeName="stop-color"
+            values="#EAFF4F;#1C91FC;#9A2DF8;#FF9533;#FF4FBB;#EAFF4F"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop offset="75%" stop-color="#1C91FC">
+          <animate
+            attributeName="stop-color"
+            values="#1C91FC;#9A2DF8;#FF9533;#FF4FBB;#EAFF4F;#1C91FC"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop offset="100%" stop-color="#9A2DF8">
+          <animate
+            attributeName="stop-color"
+            values="#9A2DF8;#FF9533;#FF4FBB;#EAFF4F;#1C91FC;#9A2DF8"
+            dur="4s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+export interface Props {
+  /** Width in pixels */
+  width?: number;
+  /** Height in pixels */
+  height?: number;
+  /** Enable animated gradient */
+  animated?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  width: 22,
+  height: 24,
+  animated: false,
+});
+
+// Generate unique ID for clip path to avoid conflicts when multiple logos are rendered
+const clipPathId = computed(() => `virto-oz-clip-${Math.random().toString(36).substring(2, 11)}`);
+</script>
+
+<style lang="scss">
+.vc-virto-oz-logo {
+  display: block;
+}
+</style>

package/core/plugins/ai-agent/components/index.ts

@@ -0,0 +1 @@
+export { default as VcAiAgentPanel } from "./VcAiAgentPanel.vue";

package/core/plugins/ai-agent/composables/index.ts

@@ -0,0 +1,4 @@
+export { useAiAgent, provideAiAgentService, createAiAgentToolbarButton } from "./useAiAgent";
+export type { UseAiAgentReturn, ProvideAiAgentServiceOptions } from "./useAiAgent";
+
+export { useAiAgentContext, clearPreviewState } from "./useAiAgentContext";

package/core/plugins/ai-agent/composables/useAiAgent.ts

@@ -0,0 +1,231 @@
+import { inject, provide } from "vue";
+import { createAiAgentService, type IAiAgentServiceInternal } from "../services/ai-agent-service";
+import { AiAgentServiceKey, LanguageServiceKey, ToolbarServiceKey } from "../../../../injection-keys";
+import type {
+  IAiAgentService,
+  IAiAgentConfig,
+  IAiAgentMessage,
+  IAiAgentBladeContext,
+} from "../types";
+import { createLogger, InjectionError } from "../../../utilities";
+import { useUser } from "../../../composables/useUser";
+import { useBladeNavigation } from "../../../../shared/components/blade-navigation/composables";
+import { AI_AGENT_TOOLBAR_BUTTON_ID, AI_AGENT_TOOLBAR_BUTTON_ICON, AI_AGENT_TOOLBAR_BUTTON_TITLE } from "../constants";
+import type { IToolbarService } from "../../../services/toolbar-service";
+
+const logger = createLogger("use-ai-agent");
+
+/**
+ * Options for providing the AI agent service
+ */
+export interface ProvideAiAgentServiceOptions {
+  /** Initial configuration for the AI agent */
+  config?: Partial<IAiAgentConfig>;
+  /**
+   * Whether to add the AI button to all blade toolbars automatically.
+   * Default: true
+   */
+  addGlobalToolbarButton?: boolean;
+}
+
+/**
+ * Provides the AI agent service at the current component level.
+ * Should be called once at the app level (in VcApp or plugin install).
+ *
+ * @param options - Configuration options
+ */
+export function provideAiAgentService(options?: ProvideAiAgentServiceOptions): IAiAgentServiceInternal {
+  const languageService = inject(LanguageServiceKey);
+  const { user, getAccessToken } = useUser();
+  const { blades, openBlade, resolveBladeByName } = useBladeNavigation();
+
+  // Create the service
+  const service = createAiAgentService({
+    userGetter: () => {
+      if (!user.value) return undefined;
+      return {
+        id: user.value.id,
+        userName: user.value.userName,
+        isAdministrator: user.value.isAdministrator,
+        permissions: user.value.permissions,
+      };
+    },
+    bladeGetter: (): IAiAgentBladeContext | null => {
+      // Get the last (most recent) blade
+      const lastBlade = blades.value[blades.value.length - 1];
+      if (!lastBlade) return null;
+
+      return {
+        id: lastBlade.type?.name?.toLowerCase() ?? "unknown",
+        name: lastBlade.type?.name ?? "Unknown",
+        title: lastBlade.props?.navigation?.instance?.title,
+        param: lastBlade.props?.param,
+        options: lastBlade.props?.options,
+      };
+    },
+    localeGetter: () => languageService?.currentLocale.value ?? "en",
+    tokenGetter: getAccessToken,
+    navigateToBlade: (bladeName: string, param?: string, bladeOptions?: Record<string, unknown>) => {
+      const blade = resolveBladeByName(bladeName);
+      if (blade) {
+        openBlade({ blade, param, options: bladeOptions });
+        logger.debug(`Navigated to blade: ${bladeName}`);
+      } else {
+        logger.warn(`Blade not found: ${bladeName}`);
+      }
+    },
+    reloadBlade: () => {
+      // Emit reload on current blade if available (last blade in the list)
+      const lastBlade = blades.value[blades.value.length - 1];
+      if (lastBlade?.props?.navigation?.instance?.reload) {
+        lastBlade.props.navigation.instance.reload();
+        logger.debug("Current blade reloaded");
+      }
+    },
+    initialConfig: options?.config,
+  });
+
+  provide(AiAgentServiceKey, service);
+  logger.debug("AiAgentService provided");
+
+  // Register global toolbar button with wildcard "*" if enabled
+  const addGlobalToolbarButton = options?.addGlobalToolbarButton ?? true;
+  if (addGlobalToolbarButton) {
+    // Get toolbar service from injection (already created by VcShell plugin)
+    const toolbarService = inject<IToolbarService | null>(ToolbarServiceKey, null);
+    if (toolbarService) {
+      toolbarService.registerToolbarItem(
+        {
+          id: AI_AGENT_TOOLBAR_BUTTON_ID,
+          icon: AI_AGENT_TOOLBAR_BUTTON_ICON,
+          title: AI_AGENT_TOOLBAR_BUTTON_TITLE,
+          clickHandler: () => {
+            service.togglePanel();
+          },
+        },
+        "*", // Wildcard for all blades
+      );
+      logger.debug("Global AI toolbar button registered with wildcard '*'");
+    } else {
+      logger.warn("Toolbar service not available, AI button not registered");
+    }
+  }
+
+  return service;
+}
+
+/**
+ * Return type for useAiAgent composable
+ */
+export interface UseAiAgentReturn {
+  /** Current panel state ("closed" | "open" | "expanded") */
+  panelState: IAiAgentService["panelState"];
+  /** Panel configuration */
+  config: IAiAgentService["config"];
+  /** Current context (reactive) */
+  context: IAiAgentService["context"];
+  /** Whether panel is open (not closed) */
+  isOpen: IAiAgentService["isOpen"];
+  /** Whether panel is in expanded state */
+  isExpanded: IAiAgentService["isExpanded"];
+  /** Total count of items in current context */
+  totalItemsCount: IAiAgentService["totalItemsCount"];
+  /** Open the AI panel */
+  openPanel: () => void;
+  /** Close the AI panel */
+  closePanel: () => void;
+  /** Toggle panel open/close */
+  togglePanel: () => void;
+  /** Expand the panel to larger width */
+  expandPanel: () => void;
+  /** Collapse panel to normal width */
+  collapsePanel: () => void;
+  /** Update configuration */
+  setConfig: (config: Partial<IAiAgentConfig>) => void;
+  /** Send message to AI agent iframe */
+  sendMessage: IAiAgentService["sendMessage"];
+  /** Register message handler, returns unsubscribe function */
+  onMessage: (handler: (event: IAiAgentMessage) => void) => () => void;
+}
+
+/**
+ * Composable for interacting with the AI agent panel.
+ *
+ * @example
+ * ```typescript
+ * const { togglePanel, isOpen, onMessage } = useAiAgent();
+ *
+ * // Toggle AI panel
+ * const handleAiClick = () => togglePanel();
+ *
+ * // Listen for messages from AI agent
+ * onMessage((message) => {
+ *   if (message.type === 'PREVIEW_CHANGES') {
+ *     // Handle preview changes
+ *   }
+ * });
+ * ```
+ */
+export function useAiAgent(): UseAiAgentReturn {
+  const service = inject(AiAgentServiceKey);
+  if (!service) {
+    logger.error("AiAgentService not found. Did you forget to call provideAiAgentService()?");
+    throw new InjectionError("AiAgentService");
+  }
+
+  return {
+    // State
+    panelState: service.panelState,
+    config: service.config,
+    context: service.context,
+    isOpen: service.isOpen,
+    isExpanded: service.isExpanded,
+    totalItemsCount: service.totalItemsCount,
+
+    // Panel control
+    openPanel: service.openPanel,
+    closePanel: service.closePanel,
+    togglePanel: service.togglePanel,
+    expandPanel: service.expandPanel,
+    collapsePanel: service.collapsePanel,
+
+    // Configuration
+    setConfig: service.setConfig,
+
+    // Communication
+    sendMessage: service.sendMessage,
+    onMessage: service.onMessage,
+  };
+}
+
+/**
+ * Creates a toolbar button configuration for opening the AI agent.
+ * Can be used directly in blade toolbar definitions.
+ *
+ * @example
+ * ```typescript
+ * const bladeToolbar = [
+ *   createAiAgentToolbarButton(),
+ *   // ... other toolbar items
+ * ];
+ * ```
+ */
+export function createAiAgentToolbarButton(options?: { title?: string; icon?: string }) {
+  return {
+    id: "ai-agent-toggle",
+    icon: options?.icon ?? "lucide-sparkles",
+    title: options?.title ?? "AI Assistant",
+    clickHandler: () => {
+      try {
+        const service = inject(AiAgentServiceKey);
+        if (service) {
+          service.togglePanel();
+        } else {
+          logger.warn("AiAgentService not available for toolbar button");
+        }
+      } catch (e) {
+        logger.error("Failed to toggle AI panel:", e);
+      }
+    },
+  };
+}