SessionIQ Vue Widget (@sessioniq/widget-vue)

Overview

This package provides a pre-built Vue 3 component (AgentWidget) that acts as a user interface for interacting with the @sessioniq/client-sdk. It allows users to:

• Select an active analysis agent.
• Start and stop session recording.
• Trigger session analysis.
• View analysis status updates and results (including AI insights and suggestions) in a chat interface.
• Interact with the AI agent via chat messages after analysis is complete.

The widget handles communication with the SDK, including subscribing to real-time updates and sending commands like startRecording, stopRecording, analyzeSession, and sendChatMessage.

Installation

# Using npm (or pnpm or yarn)
npm install @sessioniq/widget-vue @sessioniq/client-sdk

Note: @sessioniq/client-sdk is a required peer dependency.

Usage

<script setup>
import { ref, onMounted } from "vue";
import { SessionIQSdk } from "@sessioniq/client-sdk";
import { AgentWidget } from "@sessioniq/widget-vue";
const isInitialized = ref(false);
const sdk = new SessionIQSdk();

onMounted(async () => {
  await sdk.init({
    clientId: "YOUR_CLIENT_ID", // matches the clientId in the SessionIQ dashboard
    logLevel: "debug", // optional, default is 'info'
  });
  isInitialized.value = true;
});
</script>
<template>
  <div>
    <AgentWidget v-if="isInitialized" :sdk="sdk" />
  </div>
</template>

Exports

This package exports:

• AgentWidget: The main Vue component.
• useWidget: A composable to control the widget's visibility programmatically.

Component Props (AgentWidget)

• sdk (Required): An initialized instance of SessionIQSdk from @sessioniq/client-sdk.
• position (Optional, default: 'bottom-right'): Controls the floating position of the widget button. Options: 'bottom-right', 'top-right', 'bottom-left', 'top-left', 'hidden'.

Composables

useWidget

Provides functions to control the widget UI:

import { useWidget } from "@sessioniq/widget-vue";

const { isWidgetOpen, toggleWidget, openWidget, closeWidget } = useWidget();

// Example usage:
// <button @click="openWidget">Open Support Widget</button>
// <p v-if="isWidgetOpen">Widget is currently open.</p>

• isWidgetOpen: A Ref<boolean> indicating if the widget panel is open.
• toggleWidget(): Toggles the widget panel's visibility.
• openWidget(): Opens the widget panel.
• closeWidget(): Closes the widget panel.

License

MIT License - Copyright (c) 2025 SessionIQ