esoft-ai-widgets-nexus-vue2

A Vue 2 plugin containing two AI chat components (NexusAiChat and NexusAiWidget) for internal Esoft / Softech applications, powered by the Nexus AI backend. It is compatible with Vue 2.7 using the native Composition API.

Prerequisites

| Peer Dependency | Version | | --------------- | --------- | | vue | ^2.7.16 | | vue-router | ^3.0.0 | | axios | ^1.0.0 | | moment | ^2.29.0 |

Installation

# From npm / internal registry
npm install esoft-ai-widgets-nexus-vue2

# Or directly from the local path (development)
npm install /path/to/esoft-ai-widgets-nexus-vue2

# Or from GitHub
npm install git+https://github.com/Softech-Technologies/esoft-ai-widgets-nexus-vue2.git

Setup & Initialization

Register the plugin once in your app entry point (main.js):

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import NexusAiPlugin from "esoft-ai-widgets-nexus-vue2";
import "esoft-ai-widgets-nexus-vue2/style.css"; // Required — include the widget styles

Vue.use(NexusAiPlugin, {
  apiBaseUrl: "https://api.your-domain.com", // Required
  chatBaseUrl: "https://chat.your-domain.com", // Required
  apiKey: "your-server-api-key", // Required — X-Api-Key header
  clientToken: "your-jwt-token", // Required — X-Client-Token / Bearer
  theme: {
    primary: "#f97316", // Optional — accent color
    primaryActive: "#ea580c", // Optional — darker shade for hover/active
  },
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Plugin Options (NexusAiOptions)

| Property | Type | Required | Description | | ------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | apiBaseUrl | string | ✅ Yes | AI Agents API Base URL for /memory/sessions and /memory/history endpoints | | chatBaseUrl | string | ✅ Yes | AI Agents API Base URL for the chat completion endpoint | | apiKey | string | ✅ Yes | AI Agents Server API key — sent as X-Api-Key header | | clientToken | string | ✅ Yes | JWT token used for authenticating your application APIs when invoked via AI Agent HTTP tools. Sent in the X-Client-Token request header. | | theme | NexusAiTheme | ❌ No | Optional theme overrides (see below) |

Theme Options (NexusAiTheme)

| Property | Type | Default | Description | | --------------- | -------- | --------- | --------------------------------------------- | | primary | string | #f97316 | Primary accent color (buttons, active states) | | primaryActive | string | #ea580c | Darker shade used on hover / active | | bg | string | #ffffff | Background override | | text | string | #1e293b | Text color override | | border | string | #e8ecf1 | Border color override |

Note: darkMode is no longer set at the plugin level. Use the darkMode prop on each component for fully reactive dark/light switching (see below).

Components

Both components are globally registered by the plugin. No individual imports needed.

<NexusAiChat>

A full-page chat interface with a sidebar (conversation history) and a main message view.

<template>
  <NexusAiChat :darkMode="isDark" />
</template>

Props

| Prop | Type | Default | Description | | ---------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- | | darkMode | boolean \| null | null | true = dark theme, false = light theme. null (omitted) = use plugin install default |

Routing Setup

Typically rendered on a dedicated route (e.g. /nexus-ai):

// router/index.js
{
  path: '/nexus-ai',
  name: 'NexusAi',
  component: () => import('@/views/nexus-ai/NexusAiPage.vue'),
}

<NexusAiWidget>

A floating chat bubble (fixed bottom-right). Clicking "Expand" navigates to /nexus-ai via vue-router (falls back to window.location.href if router is not available).

<template>
  <div>
    <main><!-- your app --></main>
    <NexusAiWidget :darkMode="isDark" />
  </div>
</template>

Props

| Prop | Type | Default | Description | | ---------- | ----------------- | ------- | ----------------------------------------------------------------------------------------- | | darkMode | boolean \| null | null | true = dark theme, false = light theme. null (omitted) = use plugin install default |

Dark Mode — Reactive Binding

The darkMode prop is fully reactive. Bind it to any computed or store getter and the widget updates instantly when the theme changes — no page refresh needed.

Example: Vuex (Keenthemes / Nucleus Frontend)

<script>
import { computed } from "vue";

export default {
  computed: {
    isDark() {
      return this.$store.getters.isDarkMode;
    },
  },
};
</script>

<template>
  <div>
    <NexusAiChat :darkMode="isDark" />
    <NexusAiWidget :darkMode="isDark" />
  </div>
</template>

Example: Pinia

<script setup>
import { computed } from "vue";
import { useThemeStore } from "@/stores/theme";

const theme = useThemeStore();
const isDark = computed(() => theme.mode === "dark");
</script>

<template>
  <NexusAiChat :darkMode="isDark" />
</template>

Example: data-theme attribute (no store)

<script setup>
import { ref, onMounted } from "vue";

const isDark = ref(document.documentElement.getAttribute("data-theme") === "dark");

// Watch for attribute changes (e.g. Keenthemes layout engine)
const observer = new MutationObserver(() => {
  isDark.value = document.documentElement.getAttribute("data-theme") === "dark";
});
onMounted(() => {
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["data-theme"],
  });
});
</script>

<template>
  <NexusAiChat :darkMode="isDark" />
</template>

Styling

The package ships a self-contained CSS bundle. Import it once in your app entry:

import "esoft-ai-widgets-nexus-vue2/style.css";

All widget styles are scoped under .nexus-ai-root so they do not leak into your application. Host app styles (Bootstrap, Tailwind, etc.) are prevented from interfering via high-specificity overrides.

Custom Colors

Pass a custom theme object when installing the plugin:

Vue.use(NexusAiPlugin, {
  // ... required options
  theme: {
    primary: "#40c431", // green accent
    primaryActive: "#34a828",
  },
});

Changelog

| Version | Notes | | ------- | -------------------------------------- | | 1.0.0 | Initial release of Vue 2 plain JS port | | 1.0.1 | Readme documentation updated |