@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

package/core/interceptors/index.ts

@@ -1,142 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Router } from "vue-router";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { notification } from "@shared/components/notifications/core/notification";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("interceptors");
-
-export function registerInterceptors(router: Router) {
-  const { fetch: originalFetch } = window;
-  const { signOut, isAuthenticated } = useUserManagement();
-
-  window.fetch = async (...args) => {
-    /**
-     * Overrides the global `fetch` function to handle API calls in demo mode.
-     * If `window.__DEMO_MODE__` is true, the fetch is cancelled and a warning is logged.
-     * Otherwise, the original `fetch` function is called.
-     * @param args - The arguments passed to the `fetch` function.
-     * @returns A promise that resolves to the response from the API call.
-     */
-    if (window.__DEMO_MODE__) {
-      logger.warn("CANCELLED FETCH WHILE IN __DEMO_MODE__: ", ...args);
-      logger.warn("Please logout and add APP_PLATFORM_URL into .env file of your application to enable API calls");
-      return new Promise((resolve: any) => {
-        /**
-         * This conditions are mocking login, currentuser API calls for demo purposes.
-         */
-        if (args[0] === "/api/platform/security/login") {
-          resolve({
-            status: 200,
-            text: async () => JSON.stringify({ succeeded: true }),
-          });
-        } else if (args[0] === "/api/platform/security/currentuser") {
-          notification.warning(
-            "You are currently in DEMO mode until the first page refresh. \n All API calls are disabled. Please add APP_PLATFORM_URL to your application's .env file to enable API calls.",
-            {
-              timeout: 10000,
-            },
-          );
-          resolve({
-            status: 200,
-            text: async () => JSON.stringify({ id: "demo_user_id", userName: "DEMO_USER" }),
-          });
-        } else {
-          resolve({
-            status: 200,
-            text: async () => JSON.stringify({}),
-          });
-        }
-      });
-    } else {
-      const [resource, init] = args;
-
-      function isApiRequest(input: RequestInfo | URL): boolean {
-        const raw = typeof input === "string"
-          ? input
-          : input instanceof Request
-            ? input.url
-            : input.toString();
-
-        try {
-          const url = new URL(raw, window.location.origin);
-          return url.origin === window.location.origin && url.pathname.startsWith("/api/");
-        } catch {
-          return false;
-        }
-      }
-
-      // Scope hardening only to platform API calls
-      if (!isApiRequest(resource)) {
-        return originalFetch(...args);
-      }
-
-      if (!navigator.onLine) {
-        logger.warn("Request blocked: browser is offline", resource);
-        return Promise.reject(new Error("Network unavailable. Please check your connection."));
-      }
-
-      // Always enforce timeout, but preserve external cancellation semantics
-      const controller = new AbortController();
-      let didTimeout = false;
-      const timeoutId = setTimeout(() => {
-        didTimeout = true;
-        controller.abort();
-      }, 30000);
-
-      const externalSignal = init?.signal;
-      const abortFromExternal = () => controller.abort();
-      if (externalSignal?.aborted) {
-        abortFromExternal();
-      } else if (externalSignal) {
-        externalSignal.addEventListener("abort", abortFromExternal, { once: true });
-      }
-
-      try {
-        const response = await originalFetch(resource, {
-          ...(init || {}),
-          signal: controller.signal,
-        });
-
-        /**
-         * If the response is unauthorized, logout the user
-         */
-        if (response.status === 401) {
-          if (isAuthenticated.value) {
-            signOut().then(() => {
-              redirect(router);
-              notification.error(
-                "Access Denied: Your session has expired or you do not have the necessary permissions.\nPlease log in again or contact the administrator for assistance.",
-              );
-            });
-          }
-        }
-
-        return response;
-      } catch (e) {
-        if (didTimeout) {
-          throw new Error("Request timed out. Please try again.");
-        }
-        throw e;
-      } finally {
-        clearTimeout(timeoutId);
-        if (externalSignal) {
-          externalSignal.removeEventListener("abort", abortFromExternal);
-        }
-      }
-    }
-  };
-
-  return window.fetch;
-}
-
-function redirect(router: Router) {
-  // redirect to login page if it exists
-  if (router && router.getRoutes().some((route) => route.path === "/login" || route.name === "Login")) {
-    router.currentRoute.value.path !== "/login" && router.push("/login");
-  } else {
-    // Use the origin to redirect to the root of the application if no login page exists.
-    // Usually this is the case when the application is used as a module.
-    window.location.href = window.location.origin + "/";
-  }
-}

package/core/plugins/ai-agent/README.md

@@ -1,336 +0,0 @@
-# AI Agent Plugin for VC-Shell
-
-A Vue plugin for integrating an AI assistant panel into VC-Shell applications.
-
-## Features
-
-- ENV-based configuration (`APP_AI_AGENT_URL`)
-- Automatic AI button in blade toolbars (via wildcard "*" support)
-- Two operation modes:
-  - **List blade** - batch operations with multiple selected items
-  - **Details blade** - single object editing with preview
-- Custom suggestions per blade
-- Reactive data binding between blade and agent
-- Simple integration API with minimal boilerplate
-
-## Installation
-
-### 1. Set Environment Variable
-
-```env
-APP_AI_AGENT_URL=https://your-ai-agent-url.com
-```
-
-### 2. Install Plugin in main.ts
-
-```typescript
-import { createApp } from "vue";
-import { aiAgentPlugin } from "@vc-shell/framework";
-
-const app = createApp(App);
-
-// Install with options (optional)
-app.use(aiAgentPlugin, {
-  config: {
-    title: "AI Assistant",
-    width: 400,
-  },
-  addGlobalToolbarButton: true, // default: true
-});
-```
-
-## Usage
-
-### List Blade (Batch Operations)
-
-```typescript
-// offers-list.vue
-import { ref, watch } from "vue";
-import { useAiAgentContext } from "@vc-shell/framework";
-
-const selectedOffers = ref<IOffer[]>([]);
-
-// Connect to AI agent
-useAiAgentContext({ dataRef: selectedOffers });
-
-// When table selection changes, pass full objects
-const onSelectionChanged = (items: IOffer[]) => {
-  selectedOffers.value = items;
-};
-```
-
-### Details Blade (Single Object)
-
-```typescript
-// offers-details.vue
-import { ref, watch } from "vue";
-import { useAiAgentContext } from "@vc-shell/framework";
-
-const offer = ref<IOffer>({});
-const aiData = ref<IOffer[]>([]); // Always array!
-
-// Sync single object to array
-watch(
-  offer,
-  (val) => {
-    aiData.value = val ? [val] : [];
-  },
-  { deep: true, immediate: true }
-);
-
-// Connect to AI agent with preview support
-const { previewState } = useAiAgentContext({ dataRef: aiData });
-
-// Use previewState.isActive to show preview indicator
-// Use previewState.changedFields to highlight changed fields
-```
-
-### Custom Suggestions
-
-```typescript
-useAiAgentContext({
-  dataRef: aiData,
-  suggestions: [
-    {
-      id: "translate",
-      title: "Translate description",
-      icon: "translation",
-      iconColor: "#FF4A4A",
-      prompt: "Translate the offer description to English",
-    },
-    {
-      id: "seo",
-      title: "Optimize SEO",
-      icon: "search",
-      iconColor: "#57AB79",
-      prompt: "Optimize SEO for this offer",
-    },
-  ],
-});
-```
-
-### Manual Panel Control
-
-```typescript
-import { useAiAgent } from "@vc-shell/framework";
-
-const { togglePanel, isOpen, openPanel, closePanel } = useAiAgent();
-
-// Toggle AI panel
-const handleAiClick = () => togglePanel();
-
-// Listen for messages from AI agent
-const { onMessage } = useAiAgent();
-onMessage((message) => {
-  if (message.type === "PREVIEW_CHANGES") {
-    // Handle preview changes
-  }
-});
-```
-
-## API Reference
-
-### aiAgentPlugin
-
-Vue plugin for AI agent integration.
-
-**Options:**
-
-| Option                  | Type                      | Default | Description                      |
-| ----------------------- | ------------------------- | ------- | -------------------------------- |
-| `config`                | `Partial<IAiAgentConfig>` | `{}`    | AI agent configuration           |
-| `addGlobalToolbarButton` | `boolean`                 | `true`  | Add AI button to all toolbars    |
-
-### useAiAgentContext
-
-Composable for binding blade data to AI agent context.
-
-**Options:**
-
-```typescript
-interface UseAiAgentContextOptions<T = Record<string, unknown>> {
-  /**
-   * Ref with data - ALWAYS an array:
-   * - For DETAILS blade: array with single object [item]
-   * - For LIST blade: array of selected objects [item1, item2, ...]
-   */
-  dataRef: Ref<T[]>;
-
-  /** Custom suggestions for this blade */
-  suggestions?: ISuggestion[];
-}
-```
-
-**Returns:**
-
-```typescript
-interface UseAiAgentContextReturn {
-  previewState: {
-    isActive: ComputedRef<boolean>;
-    changedFields: ComputedRef<string[]>;
-  };
-}
-```
-
-### useAiAgent
-
-Composable for panel control and communication.
-
-**Returns:**
-
-```typescript
-interface UseAiAgentReturn {
-  panelState: Ref<"closed" | "open" | "expanded">;
-  config: Ref<IAiAgentConfig>;
-  context: ComputedRef<IAiAgentContext>;
-  isOpen: ComputedRef<boolean>;
-  isExpanded: ComputedRef<boolean>;
-  totalItemsCount: ComputedRef<number>;
-  openPanel: () => void;
-  closePanel: () => void;
-  togglePanel: () => void;
-  expandPanel: () => void;
-  collapsePanel: () => void;
-  setConfig: (config: Partial<IAiAgentConfig>) => void;
-  sendMessage: (type: AiAgentMessageType, payload: unknown) => void;
-  onMessage: (handler: (event: IAiAgentMessage) => void) => () => void;
-}
-```
-
-### ISuggestion
-
-Custom suggestion card interface.
-
-```typescript
-interface ISuggestion {
-  id: string;
-  title: string;
-  icon: string;
-  iconColor?: string;
-  prompt: string;
-}
-```
-
-## PostMessage Protocol
-
-### Shell -> Agent
-
-**INIT_CONTEXT** (on panel open)
-
-```typescript
-{
-  type: "INIT_CONTEXT",
-  payload: {
-    userId: string,
-    locale: string,
-    blade: { id, name, title, param },
-    items: Record<string, unknown>[], // Always array
-    suggestions?: ISuggestion[],
-  }
-}
-```
-
-**UPDATE_CONTEXT** (on changes)
-
-```typescript
-{
-  type: "UPDATE_CONTEXT",
-  payload: {
-    blade: { id, name, title, param },
-    items: Record<string, unknown>[], // Always array of full objects
-    suggestions?: ISuggestion[],
-    locale?: string,
-  }
-}
-```
-
-### Agent -> Shell
-
-**PREVIEW_CHANGES** (form preview)
-
-```typescript
-{
-  type: "PREVIEW_CHANGES",
-  payload: {
-    data: Record<string, unknown>,
-    changedFields?: string[],
-  }
-}
-```
-
-**RELOAD_BLADE** (after save)
-
-```typescript
-{
-  type: "RELOAD_BLADE",
-  payload: { clearSelection?: boolean }
-}
-```
-
-**DOWNLOAD_FILE** (file download)
-
-```typescript
-{
-  type: "DOWNLOAD_FILE",
-  payload: {
-    filename: string,
-    contentType: string,
-    content: string // base64
-  }
-}
-```
-
-**NAVIGATE_TO_APP** (navigation)
-
-```typescript
-{
-  type: "NAVIGATE_TO_APP",
-  payload: { bladeName, param?, options? }
-}
-```
-
-## Architecture
-
-```
-Shell (VcApp)                          Agent (iframe)
-     │                                       │
-     │────── INIT_CONTEXT ─────────────────>│
-     │       (userId, locale, blade, items) │
-     │                                       │
-     │<───── CHAT_READY ────────────────────│
-     │                                       │
-     │────── UPDATE_CONTEXT ───────────────>│
-     │       (blade, items, suggestions)    │
-     │                                       │
-     │<───── PREVIEW_CHANGES ───────────────│
-     │       (updates form in shell)        │
-     │                                       │
-     │<───── RELOAD_BLADE ──────────────────│
-     │       (refreshes current blade)      │
-     │                                       │
-     │<───── DOWNLOAD_FILE ─────────────────│
-     │       (triggers file download)       │
-     └───────────────────────────────────────┘
-```
-
-## File Structure
-
-```
-framework/core/plugins/ai-agent/
-├── index.ts                    # Plugin entry point
-├── types.ts                    # TypeScript interfaces
-├── constants.ts                # Default values
-├── README.md                   # This file
-├── services/
-│   └── ai-agent-service.ts     # Panel state, postMessage
-├── composables/
-│   ├── index.ts
-│   ├── useAiAgent.ts           # Panel control
-│   └── useAiAgentContext.ts    # Data binding + preview
-└── components/
-    ├── index.ts
-    ├── VcAiAgentPanel.vue      # Main panel
-    └── _internal/
-        ├── VcAiAgentHeader.vue
-        └── VcAiAgentIframe.vue
-```

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

@@ -1,125 +0,0 @@
-<template>
-  <Transition name="ai-panel-slide">
-    <div
-      v-if="isOpen"
-      class="vc-ai-agent-panel"
-      :class="{
-        'vc-ai-agent-panel--expanded': isExpanded,
-      }"
-      :style="panelStyle"
-    >
-      <VcAiAgentHeader
-        :title="config.title"
-        :is-expanded="isExpanded"
-        :items-count="totalItemsCount"
-        @close="closePanel"
-        @expand="expandPanel"
-        @collapse="collapsePanel"
-      />
-
-      <div class="vc-ai-agent-panel__content">
-        <VcAiAgentIframe
-          :url="config.url"
-          @iframe-ready="onIframeReady"
-        />
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, onUnmounted, inject } from "vue";
-import { AiAgentServiceKey } from "@framework/injection-keys";
-import type { IAiAgentServiceInternal } from "@core/plugins/ai-agent/services/ai-agent-service";
-import VcAiAgentHeader from "@core/plugins/ai-agent/components/_internal/VcAiAgentHeader.vue";
-import VcAiAgentIframe from "@core/plugins/ai-agent/components/_internal/VcAiAgentIframe.vue";
-
-// Inject AI agent service
-const aiAgentService = inject(AiAgentServiceKey) as IAiAgentServiceInternal | undefined;
-
-if (!aiAgentService) {
-  console.error("[VcAiAgentPanel] AiAgentService not provided");
-}
-
-// Destructure service properties
-const config = computed(
-  () => 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);
-const totalItemsCount = computed(() => aiAgentService?.totalItemsCount.value ?? 0);
-
-// Panel style with dynamic width
-const panelStyle = computed(() => ({
-  width: isExpanded.value ? "50%" : `${config.value.width ?? 362}px`,
-}));
-
-// Panel control methods
-const closePanel = () => aiAgentService?.closePanel();
-const expandPanel = () => aiAgentService?.expandPanel();
-const collapsePanel = () => aiAgentService?.collapsePanel();
-
-// Handle iframe ready event
-const onIframeReady = (iframe: HTMLIFrameElement) => {
-  aiAgentService?._setIframeRef(iframe);
-};
-
-// Clean up iframe ref on unmount
-onUnmounted(() => {
-  aiAgentService?._setIframeRef(null);
-});
-</script>
-
-<style lang="scss">
-:root {
-  --ai-panel-bg: var(--additional-50);
-  --ai-panel-border-color: var(--neutrals-200);
-  --ai-panel-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
-  --ai-panel-header-bg: var(--primary-50);
-  --ai-panel-header-border: var(--neutrals-200);
-  --ai-panel-icon-color: var(--primary-500);
-  --ai-panel-title-color: var(--secondary-950);
-  --ai-panel-badge-bg: var(--primary-100);
-  --ai-panel-badge-color: var(--primary-700);
-  --ai-panel-button-color: var(--neutrals-600);
-  --ai-panel-button-hover-bg: var(--neutrals-100);
-  --ai-panel-button-hover-color: var(--neutrals-900);
-  --ai-panel-iframe-bg: var(--additional-50);
-  --ai-panel-placeholder-bg: var(--neutrals-50);
-  --ai-panel-placeholder-icon-color: var(--neutrals-300);
-  --ai-panel-placeholder-text-color: var(--neutrals-500);
-}
-
-// Slide transition for panel
-.ai-panel-slide-enter-active,
-.ai-panel-slide-leave-active {
-  transition: transform var(--app-panel-transition-duration, 0.3s)
-    var(--app-panel-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-.ai-panel-slide-enter-from,
-.ai-panel-slide-leave-to {
-  transform: translateX(100%);
-}
-
-.vc-ai-agent-panel {
-  @apply tw-flex tw-flex-col tw-h-full tw-shrink-0;
-  background-color: var(--ai-panel-bg);
-  box-shadow: var(--ai-panel-shadow);
-  // Width transition for expand/collapse
-  transition: width var(--app-panel-transition-duration, 0.3s)
-    var(--app-panel-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
-  overflow: hidden;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--ai-panel-border-color);
-
-  &--expanded {
-    // Additional expanded styles if needed
-  }
-
-  &__content {
-    @apply tw-flex-1 tw-overflow-hidden tw-flex tw-flex-col tw-pt-3;
-  }
-}
-</style>

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

@@ -1,102 +0,0 @@
-<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/atoms/vc-icon";
-import VcVirtoOzLogo from "@core/plugins/ai-agent/components/_internal/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>