@vc-shell/framework 1.2.3-beta.0 → 1.2.3-beta.1

package/core/plugins/ai-agent/components/VcAiAgentPanel.vue

@@ -43,7 +43,7 @@ if (!aiAgentService) {
 
 // Destructure service properties
 const config = computed(
-  () => aiAgentService?.config.value ?? { url: "", title: "AI Assistant", width: 360, expandedWidth: 500 },
+  () => aiAgentService?.config.value ?? { url: "", title: "AI Assistant", width: 362, expandedWidth: 500 },
 );
 const isOpen = computed(() => aiAgentService?.isOpen.value ?? false);
 const isExpanded = computed(() => aiAgentService?.isExpanded.value ?? false);
@@ -51,7 +51,7 @@ const totalItemsCount = computed(() => aiAgentService?.totalItemsCount.value ??
 
 // Panel style with dynamic width
 const panelStyle = computed(() => ({
-  width: isExpanded.value ? "50%" : `${config.value.width ?? 350}px`,
+  width: isExpanded.value ? "50%" : `${config.value.width ?? 362}px`,
 }));
 
 // Panel control methods

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

@@ -1,88 +1,7 @@
 <template>
   <div class="vc-ai-agent-header">
     <div class="vc-ai-agent-header__icon">
-      <svg
-        width="22"
-        height="24"
-        viewBox="0 0 22 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.92406 0.537357C10.165 -0.179119 11.6939 -0.179119 12.9349 0.537357L19.8535 4.5319C21.0945 5.24838 21.8589 6.57248 21.8589 8.00543V15.9945C21.8589 17.4275 21.0945 18.7516 19.8535 19.4681L12.9349 23.4626C11.6939 24.1791 10.165 24.1791 8.92406 23.4626L2.00541 19.4681C0.764459 18.7516 0 17.4275 0 15.9945V8.00543C0 6.57248 0.764459 5.24838 2.00541 4.5319L8.92406 0.537357Z"
-          fill="white"
-        />
-        <g
-          clip-path="url(#paint0_angular_1004_8813_clip_path)"
-          data-figma-skip-parse="true"
-        >
-          <g transform="matrix(0 -0.0359275 0.0356829 0 10.9297 12.0001)">
-            <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(155, 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;
-                "
-              ></div
-            ></foreignObject>
-          </g>
-        </g>
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M16.4395 10.6925C17.4389 12.4342 17.5855 14.7605 17.0781 17.0412C16.5847 19.2587 15.479 21.3907 14.002 22.8459L12.9346 23.463C11.6937 24.1793 10.1647 24.1794 8.92383 23.463L4.81641 21.091C6.48014 21.2357 8.24755 21.0003 9.87402 20.4474C12.1457 19.6751 14.1798 18.2734 15.2773 16.3839C16.7064 13.9237 16.7787 11.8621 16.2246 10.339C16.296 10.4538 16.3694 10.5705 16.4395 10.6925ZM12.5723 6.5646C14.5851 6.56993 16.7106 7.56255 18.4668 9.09488C20.0162 10.4468 21.2529 12.1974 21.8594 14.0041V15.9943C21.8594 17.4272 21.0944 18.7514 19.8535 19.4679L15.4492 22.0109C16.4736 20.6151 17.2295 18.9083 17.6182 17.1613C18.1443 14.7966 18.0091 12.3169 16.9189 10.4171C15.5014 7.94691 13.7497 6.85357 12.1523 6.57339C12.2894 6.56875 12.4294 6.56423 12.5723 6.5646ZM0 11.2697C0.704632 12.7816 1.7891 14.1898 3.0791 15.3166C4.87894 16.8885 7.10461 17.9397 9.28906 17.9455C12.1367 17.9529 13.9586 16.9824 15 15.7394C14.9357 15.8599 14.8712 15.9836 14.7998 16.1066C13.7886 17.8473 11.8825 19.1804 9.69531 19.924C7.65984 20.6159 5.41309 20.7847 3.47656 20.3175L2.00586 19.4679C0.764906 18.7514 0 17.4272 0 15.9943V11.2697ZM5.95215 2.2521C5.01991 3.60523 4.37186 5.22291 4.0625 6.87613C3.62624 9.20794 3.85535 11.6456 4.94141 13.5382C6.36156 16.013 8.11707 17.1052 9.7168 17.383C9.57761 17.3878 9.43521 17.3931 9.29004 17.3927C7.27637 17.3873 5.17407 16.4121 3.44238 14.8996C1.82788 13.4893 0.56156 11.633 0 9.71988V8.00601C0 6.57306 0.764906 5.24885 2.00586 4.53238L5.95215 2.2521ZM11.3975 7.05093C12.0141 7.06601 12.6881 7.21751 13.376 7.5607C13.0837 7.49777 12.8006 7.49218 12.5459 7.55679L12.6816 8.09292C13.0083 8.00995 13.4967 8.1005 14.0215 8.41421C14.538 8.72301 15.057 9.23022 15.4326 9.91909C15.7285 10.4617 15.9343 11.1225 15.9805 11.8918C15.8889 11.6052 15.7517 11.3555 15.5674 11.1662L15.1709 11.5519C15.406 11.7933 15.5727 12.2611 15.5635 12.8722C15.5543 13.4739 15.3736 14.1772 14.9648 14.8468C14.642 15.3757 14.171 15.8854 13.5254 16.3107C13.73 16.0867 13.8799 15.8413 13.9521 15.5851L13.4189 15.4347C13.3275 15.7591 13.0058 16.1381 12.4717 16.4357C11.9461 16.7285 11.2471 16.9236 10.4629 16.9044C9.84516 16.8893 9.1696 16.7382 8.48047 16.3937C8.77503 16.4579 9.06081 16.4638 9.31738 16.3986L9.18066 15.8625C8.85403 15.9453 8.36539 15.8557 7.84082 15.5421C7.32436 15.2334 6.80623 14.7251 6.43066 14.0363C6.13467 13.4934 5.92691 12.8324 5.88086 12.0626C5.97253 12.3504 6.11088 12.6013 6.2959 12.7912L6.69141 12.4044C6.45639 12.163 6.28955 11.6951 6.29883 11.0841C6.30799 10.4824 6.48868 9.77922 6.89746 9.10952C7.21926 8.58233 7.68762 8.07306 8.33008 7.64859C8.12755 7.87138 7.97995 8.11577 7.9082 8.37027L8.44141 8.52066C8.53286 8.19625 8.8546 7.81729 9.38867 7.51968C9.91427 7.22684 10.6133 7.0318 11.3975 7.05093ZM8.92383 0.537258C10.1647 -0.179152 11.6937 -0.17902 12.9346 0.537258L16.832 2.78726C15.2289 2.68408 13.5406 2.93545 11.9824 3.47671C9.71315 4.26504 7.68197 5.68288 6.58496 7.57144C5.15353 10.0358 5.08346 12.1004 5.64062 13.6242C5.56755 13.507 5.49251 13.3876 5.4209 13.2628C4.41748 11.5142 4.18713 9.21872 4.60645 6.97769C4.99237 4.91536 5.92418 2.92968 7.26758 1.49331L8.92383 0.537258ZM12.1641 4.00015C14.0959 3.32907 16.2174 3.13043 18.084 3.51089L19.8535 4.53238C21.0944 5.24887 21.8594 6.57311 21.8594 8.00601V12.5626C21.1452 11.1171 20.0805 9.7689 18.8301 8.67788C17.0078 7.08795 14.7586 6.01663 12.5732 6.01089C9.72539 6.00349 7.90267 6.97374 6.86133 8.21695C6.92577 8.09606 6.9918 7.97218 7.06348 7.84878C8.07528 6.10725 9.97945 4.75906 12.1641 4.00015Z"
-          data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.30980393290519714,&#34;b&#34;:0.73333334922790527,&#34;a&#34;:1.0},&#34;position&#34;:0.11999999731779099},{&#34;color&#34;:{&#34;r&#34;:0.60888892412185669,&#34;g&#34;:1.0,&#34;b&#34;:0.30980393290519714,&#34;a&#34;:1.0},&#34;position&#34;:0.39903846383094788},{&#34;color&#34;:{&#34;r&#34;:0.10980392247438431,&#34;g&#34;:0.56862747669219971,&#34;b&#34;:0.98823529481887817,&#34;a&#34;:1.0},&#34;position&#34;:0.70192307233810425},{&#34;color&#34;:{&#34;r&#34;:0.60392159223556519,&#34;g&#34;:0.17647059261798859,&#34;b&#34;:0.97254902124404907,&#34;a&#34;:1.0},&#34;position&#34;:0.87999999523162842},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.30980393290519714,&#34;b&#34;:0.73333334922790527,&#34;a&#34;:1.0},&#34;position&#34;:0.11999999731779099},{&#34;color&#34;:{&#34;r&#34;:0.60888892412185669,&#34;g&#34;:1.0,&#34;b&#34;:0.30980393290519714,&#34;a&#34;:1.0},&#34;position&#34;:0.39903846383094788},{&#34;color&#34;:{&#34;r&#34;:0.10980392247438431,&#34;g&#34;:0.56862747669219971,&#34;b&#34;:0.98823529481887817,&#34;a&#34;:1.0},&#34;position&#34;:0.70192307233810425},{&#34;color&#34;:{&#34;r&#34;:0.60392159223556519,&#34;g&#34;:0.17647059261798859,&#34;b&#34;:0.97254902124404907,&#34;a&#34;:1.0},&#34;position&#34;:0.87999999523162842},{&#34;color&#34;:{&#34;r&#34;:1.0,&#34;g&#34;:0.58431375026702881,&#34;b&#34;:0.20000000298023224,&#34;a&#34;:1.0},&#34;position&#34;:1.0}],&#34;transform&#34;:{&#34;m00&#34;:3.8149642949888984e-13,&#34;m01&#34;:71.365898132324219,&#34;m02&#34;:-24.753261566162109,&#34;m10&#34;:-71.855010986328125,&#34;m11&#34;:-5.4860135260525328e-14,&#34;m12&#34;:47.927650451660156},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"
-        />
-        <path
-          d="M16.0431 12.0324C16.0431 13.3654 16.5272 15.8012 13.4845 18.4291C14.5218 16.2507 12.419 17.1497 10.9259 17.1497C8.09967 17.1497 5.80859 14.8586 5.80859 12.0324C5.80859 9.20615 8.09967 6.91504 10.9259 6.91504C13.752 6.91504 16.0431 9.20615 16.0431 12.0324Z"
-          fill="white"
-        />
-        <ellipse
-          cx="10.9283"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <ellipse
-          cx="13.4849"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <ellipse
-          cx="8.36968"
-          cy="12.0328"
-          rx="0.898978"
-          ry="0.898992"
-          fill="#6C6C6C"
-        />
-        <defs>
-          <clipPath id="paint0_angular_1004_8813_clip_path">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M16.4395 10.6925C17.4389 12.4342 17.5855 14.7605 17.0781 17.0412C16.5847 19.2587 15.479 21.3907 14.002 22.8459L12.9346 23.463C11.6937 24.1793 10.1647 24.1794 8.92383 23.463L4.81641 21.091C6.48014 21.2357 8.24755 21.0003 9.87402 20.4474C12.1457 19.6751 14.1798 18.2734 15.2773 16.3839C16.7064 13.9237 16.7787 11.8621 16.2246 10.339C16.296 10.4538 16.3694 10.5705 16.4395 10.6925ZM12.5723 6.5646C14.5851 6.56993 16.7106 7.56255 18.4668 9.09488C20.0162 10.4468 21.2529 12.1974 21.8594 14.0041V15.9943C21.8594 17.4272 21.0944 18.7514 19.8535 19.4679L15.4492 22.0109C16.4736 20.6151 17.2295 18.9083 17.6182 17.1613C18.1443 14.7966 18.0091 12.3169 16.9189 10.4171C15.5014 7.94691 13.7497 6.85357 12.1523 6.57339C12.2894 6.56875 12.4294 6.56423 12.5723 6.5646ZM0 11.2697C0.704632 12.7816 1.7891 14.1898 3.0791 15.3166C4.87894 16.8885 7.10461 17.9397 9.28906 17.9455C12.1367 17.9529 13.9586 16.9824 15 15.7394C14.9357 15.8599 14.8712 15.9836 14.7998 16.1066C13.7886 17.8473 11.8825 19.1804 9.69531 19.924C7.65984 20.6159 5.41309 20.7847 3.47656 20.3175L2.00586 19.4679C0.764906 18.7514 0 17.4272 0 15.9943V11.2697ZM5.95215 2.2521C5.01991 3.60523 4.37186 5.22291 4.0625 6.87613C3.62624 9.20794 3.85535 11.6456 4.94141 13.5382C6.36156 16.013 8.11707 17.1052 9.7168 17.383C9.57761 17.3878 9.43521 17.3931 9.29004 17.3927C7.27637 17.3873 5.17407 16.4121 3.44238 14.8996C1.82788 13.4893 0.56156 11.633 0 9.71988V8.00601C0 6.57306 0.764906 5.24885 2.00586 4.53238L5.95215 2.2521ZM11.3975 7.05093C12.0141 7.06601 12.6881 7.21751 13.376 7.5607C13.0837 7.49777 12.8006 7.49218 12.5459 7.55679L12.6816 8.09292C13.0083 8.00995 13.4967 8.1005 14.0215 8.41421C14.538 8.72301 15.057 9.23022 15.4326 9.91909C15.7285 10.4617 15.9343 11.1225 15.9805 11.8918C15.8889 11.6052 15.7517 11.3555 15.5674 11.1662L15.1709 11.5519C15.406 11.7933 15.5727 12.2611 15.5635 12.8722C15.5543 13.4739 15.3736 14.1772 14.9648 14.8468C14.642 15.3757 14.171 15.8854 13.5254 16.3107C13.73 16.0867 13.8799 15.8413 13.9521 15.5851L13.4189 15.4347C13.3275 15.7591 13.0058 16.1381 12.4717 16.4357C11.9461 16.7285 11.2471 16.9236 10.4629 16.9044C9.84516 16.8893 9.1696 16.7382 8.48047 16.3937C8.77503 16.4579 9.06081 16.4638 9.31738 16.3986L9.18066 15.8625C8.85403 15.9453 8.36539 15.8557 7.84082 15.5421C7.32436 15.2334 6.80623 14.7251 6.43066 14.0363C6.13467 13.4934 5.92691 12.8324 5.88086 12.0626C5.97253 12.3504 6.11088 12.6013 6.2959 12.7912L6.69141 12.4044C6.45639 12.163 6.28955 11.6951 6.29883 11.0841C6.30799 10.4824 6.48868 9.77922 6.89746 9.10952C7.21926 8.58233 7.68762 8.07306 8.33008 7.64859C8.12755 7.87138 7.97995 8.11577 7.9082 8.37027L8.44141 8.52066C8.53286 8.19625 8.8546 7.81729 9.38867 7.51968C9.91427 7.22684 10.6133 7.0318 11.3975 7.05093ZM8.92383 0.537258C10.1647 -0.179152 11.6937 -0.17902 12.9346 0.537258L16.832 2.78726C15.2289 2.68408 13.5406 2.93545 11.9824 3.47671C9.71315 4.26504 7.68197 5.68288 6.58496 7.57144C5.15353 10.0358 5.08346 12.1004 5.64062 13.6242C5.56755 13.507 5.49251 13.3876 5.4209 13.2628C4.41748 11.5142 4.18713 9.21872 4.60645 6.97769C4.99237 4.91536 5.92418 2.92968 7.26758 1.49331L8.92383 0.537258ZM12.1641 4.00015C14.0959 3.32907 16.2174 3.13043 18.084 3.51089L19.8535 4.53238C21.0944 5.24887 21.8594 6.57311 21.8594 8.00601V12.5626C21.1452 11.1171 20.0805 9.7689 18.8301 8.67788C17.0078 7.08795 14.7586 6.01663 12.5732 6.01089C9.72539 6.00349 7.90267 6.97374 6.86133 8.21695C6.92577 8.09606 6.9918 7.97218 7.06348 7.84878C8.07528 6.10725 9.97945 4.75906 12.1641 4.00015Z"
-            />
-          </clipPath>
-        </defs>
-      </svg>
+      <VcVirtoOzLogo :width="22" :height="24" show-dots />
     </div>
 
     <div class="vc-ai-agent-header__wrapper">
@@ -123,6 +42,7 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "../../../../../ui/components";
+import VcVirtoOzLogo from "./VcVirtoOzLogo.vue";
 
 defineProps<{
   title?: string;

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

@@ -1,77 +1,107 @@
-<template>
-  <div class="vc-ai-agent-iframe">
-    <iframe
-      v-if="url"
-      ref="iframeRef"
-      :src="url"
-      class="vc-ai-agent-iframe__frame"
-      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";
-
-const props = defineProps<{
-  url: string;
-}>();
-
-const emit = defineEmits<{
-  (e: "iframe-ready", iframe: HTMLIFrameElement): void;
-}>();
-
-const iframeRef = ref<HTMLIFrameElement | null>(null);
-
-// 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 = () => {
-  // onLoad is now just for logging/debugging, ref is already emitted
-  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);
-  }
-});
-</script>
-
-<style lang="scss">
-.vc-ai-agent-iframe {
-  @apply tw-w-full tw-h-full tw-flex tw-flex-col;
-
-  &__frame {
-    @apply tw-w-full tw-h-full tw-border-0 tw-flex-1;
-    background-color: var(--ai-panel-iframe-bg, var(--additional-50));
-  }
-
-  &__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>
+<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/composables/useAiAgentContext.ts

@@ -130,9 +130,14 @@ function getTargetForChanges<T>(dataRef: Ref<T> | Ref<T[]>): T | undefined {
  * });
  * ```
  */
-export function useAiAgentContext<T extends { id: string; objectType: string; name: string; [key: string]: unknown }>(
-  options: UseAiAgentContextOptions<T>,
-): UseAiAgentContextReturn {
+export function useAiAgentContext<
+  T extends {
+    id: string | undefined;
+    objectType: string | undefined;
+    name?: string | undefined;
+    [key: string]: unknown;
+  },
+>(options: UseAiAgentContextOptions<T>): UseAiAgentContextReturn {
   const { dataRef, suggestions } = options;
 
   // Try to get the service (may not be available if plugin not installed)