@lokutor/sdk 1.1.22 → 1.1.24

package/dist/index.d.mts

@@ -613,6 +613,10 @@ interface ConversationalPanelConfig {
     curtainBgSrc?: string;
     /** Tool definitions for LLM function calling */
     tools?: any[];
+    /** Maximum conversation duration in seconds (default 300) */
+    maxDuration?: number;
+    /** Seconds of silence before auto-close (default 30) */
+    silenceTimeout?: number;
 }
 declare class ConversationalPanel {
     private cfg;
@@ -623,6 +627,8 @@ declare class ConversationalPanel {
     private connectingSound;
     private connectingFadeTimer;
     private isRunning;
+    private _locked;
+    private _lastSpeechTime;
     private el;
     private curtain;
     private curtainTitle;
@@ -633,6 +639,7 @@ declare class ConversationalPanel {
     private timerEl;
     private canvas;
     private muteBtn;
+    private muteSvg;
     private stopBtn;
     private visualizerWrap;
     onTranscription?: (text: string) => void;

package/dist/index.d.ts

@@ -613,6 +613,10 @@ interface ConversationalPanelConfig {
     curtainBgSrc?: string;
     /** Tool definitions for LLM function calling */
     tools?: any[];
+    /** Maximum conversation duration in seconds (default 300) */
+    maxDuration?: number;
+    /** Seconds of silence before auto-close (default 30) */
+    silenceTimeout?: number;
 }
 declare class ConversationalPanel {
     private cfg;
@@ -623,6 +627,8 @@ declare class ConversationalPanel {
     private connectingSound;
     private connectingFadeTimer;
     private isRunning;
+    private _locked;
+    private _lastSpeechTime;
     private el;
     private curtain;
     private curtainTitle;
@@ -633,6 +639,7 @@ declare class ConversationalPanel {
     private timerEl;
     private canvas;
     private muteBtn;
+    private muteSvg;
     private stopBtn;
     private visualizerWrap;
     onTranscription?: (text: string) => void;

package/dist/index.js

@@ -1474,6 +1474,13 @@ var PANEL_CSS = (
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
+  @media (max-width: 640px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
+    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
+    .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
+    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
+  }
 `
 );
 var styleInjected = false;
@@ -1493,6 +1500,8 @@ var ConversationalPanel = class {
   connectingSound = null;
   connectingFadeTimer = null;
   isRunning = false;
+  _locked = false;
+  _lastSpeechTime = 0;
   // Cached DOM refs
   el;
   curtain;
@@ -1504,6 +1513,7 @@ var ConversationalPanel = class {
   timerEl;
   canvas;
   muteBtn;
+  muteSvg;
   stopBtn;
   visualizerWrap;
   // Callbacks
@@ -1585,6 +1595,7 @@ var ConversationalPanel = class {
     this.timerEl = this.el.querySelector(".cv-timer");
     this.canvas = this.el.querySelector(".cv-canvas");
     this.muteBtn = this.el.querySelector(".cv-btn--mute");
+    this.muteSvg = this.muteBtn.querySelector("svg");
     this.stopBtn = this.el.querySelector(".cv-btn--end");
     this.visualizerWrap = this.el.querySelector(".cv-visualizer-wrap");
     this.startBtn.addEventListener("click", () => this.start());
@@ -1599,6 +1610,10 @@ var ConversationalPanel = class {
   /** Start the conversation (called when user clicks "Start Conversation" or externally) */
   async start() {
     if (this.isRunning) return;
+    if (this._locked) {
+      this.showError("This session has ended. Refresh the page to start a new one.");
+      return;
+    }
     this.isRunning = true;
     this.startBtn.disabled = true;
     this.errorEl.classList.remove("is-visible");
@@ -1632,6 +1647,7 @@ var ConversationalPanel = class {
           this.onTranscription?.(text);
         },
         onResponse: (text) => {
+          this._lastSpeechTime = Date.now();
           this.onResponse?.(text);
         },
         onToolCall: (tool) => {
@@ -1758,12 +1774,26 @@ var ConversationalPanel = class {
   // ─── internal helpers ────────────────────────────────────
   startTimer() {
     let elapsed = 0;
+    const maxDur = this.cfg.maxDuration || 300;
+    const silentMax = this.cfg.silenceTimeout || 30;
+    this._lastSpeechTime = Date.now();
     this.timerEl.textContent = "00:00";
     this.timerTicker = window.setInterval(() => {
       elapsed++;
       const m = Math.floor(elapsed / 60).toString().padStart(2, "0");
       const s = (elapsed % 60).toString().padStart(2, "0");
       this.timerEl.textContent = `${m}:${s}`;
+      if (elapsed >= maxDur) {
+        this._locked = true;
+        this.stop();
+        this.showError("Conversation time limit reached. Refresh to start a new one.");
+        return;
+      }
+      if (Date.now() - this._lastSpeechTime > silentMax * 1e3) {
+        this._locked = true;
+        this.stop();
+        this.showError("Session ended due to inactivity. Refresh to start a new one.");
+      }
     }, 1e3);
   }
   toggleMute() {
@@ -1773,12 +1803,8 @@ var ConversationalPanel = class {
       this.muteBtn.classList.toggle("is-muted", muted);
       const span = this.muteBtn.querySelector("span");
       if (span) span.textContent = muted ? "Unmute" : "Mute";
-      if (muted) {
-        this.agent.pauseAudio?.();
-        this.visualizer?.setDeactivated?.(true);
-      } else {
-        this.agent.resumeAudio?.();
-        this.visualizer?.setDeactivated?.(false);
+      if (this.muteSvg) {
+        this.muteSvg.innerHTML = muted ? '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="23" y1="1" x2="1" y2="23"/>' : '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/>';
       }
     } catch (_) {
     }

package/dist/index.mjs

@@ -1427,6 +1427,13 @@ var PANEL_CSS = (
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
+  @media (max-width: 640px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
+    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
+    .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
+    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
+  }
 `
 );
 var styleInjected = false;
@@ -1446,6 +1453,8 @@ var ConversationalPanel = class {
   connectingSound = null;
   connectingFadeTimer = null;
   isRunning = false;
+  _locked = false;
+  _lastSpeechTime = 0;
   // Cached DOM refs
   el;
   curtain;
@@ -1457,6 +1466,7 @@ var ConversationalPanel = class {
   timerEl;
   canvas;
   muteBtn;
+  muteSvg;
   stopBtn;
   visualizerWrap;
   // Callbacks
@@ -1538,6 +1548,7 @@ var ConversationalPanel = class {
     this.timerEl = this.el.querySelector(".cv-timer");
     this.canvas = this.el.querySelector(".cv-canvas");
     this.muteBtn = this.el.querySelector(".cv-btn--mute");
+    this.muteSvg = this.muteBtn.querySelector("svg");
     this.stopBtn = this.el.querySelector(".cv-btn--end");
     this.visualizerWrap = this.el.querySelector(".cv-visualizer-wrap");
     this.startBtn.addEventListener("click", () => this.start());
@@ -1552,6 +1563,10 @@ var ConversationalPanel = class {
   /** Start the conversation (called when user clicks "Start Conversation" or externally) */
   async start() {
     if (this.isRunning) return;
+    if (this._locked) {
+      this.showError("This session has ended. Refresh the page to start a new one.");
+      return;
+    }
     this.isRunning = true;
     this.startBtn.disabled = true;
     this.errorEl.classList.remove("is-visible");
@@ -1585,6 +1600,7 @@ var ConversationalPanel = class {
           this.onTranscription?.(text);
         },
         onResponse: (text) => {
+          this._lastSpeechTime = Date.now();
           this.onResponse?.(text);
         },
         onToolCall: (tool) => {
@@ -1711,12 +1727,26 @@ var ConversationalPanel = class {
   // ─── internal helpers ────────────────────────────────────
   startTimer() {
     let elapsed = 0;
+    const maxDur = this.cfg.maxDuration || 300;
+    const silentMax = this.cfg.silenceTimeout || 30;
+    this._lastSpeechTime = Date.now();
     this.timerEl.textContent = "00:00";
     this.timerTicker = window.setInterval(() => {
       elapsed++;
       const m = Math.floor(elapsed / 60).toString().padStart(2, "0");
       const s = (elapsed % 60).toString().padStart(2, "0");
       this.timerEl.textContent = `${m}:${s}`;
+      if (elapsed >= maxDur) {
+        this._locked = true;
+        this.stop();
+        this.showError("Conversation time limit reached. Refresh to start a new one.");
+        return;
+      }
+      if (Date.now() - this._lastSpeechTime > silentMax * 1e3) {
+        this._locked = true;
+        this.stop();
+        this.showError("Session ended due to inactivity. Refresh to start a new one.");
+      }
     }, 1e3);
   }
   toggleMute() {
@@ -1726,12 +1756,8 @@ var ConversationalPanel = class {
       this.muteBtn.classList.toggle("is-muted", muted);
       const span = this.muteBtn.querySelector("span");
       if (span) span.textContent = muted ? "Unmute" : "Mute";
-      if (muted) {
-        this.agent.pauseAudio?.();
-        this.visualizer?.setDeactivated?.(true);
-      } else {
-        this.agent.resumeAudio?.();
-        this.visualizer?.setDeactivated?.(false);
+      if (this.muteSvg) {
+        this.muteSvg.innerHTML = muted ? '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="23" y1="1" x2="1" y2="23"/>' : '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/>';
       }
     } catch (_) {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lokutor/sdk",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "JavaScript/TypeScript SDK for Lokutor Real-time Voice AI",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/conversational-panel.ts

@@ -214,6 +214,13 @@ const PANEL_CSS = /*css*/ `
   }
   .cv-error.is-visible { display: flex; }
   .cv-error-icon { color: var(--cv-accent); flex-shrink: 0; }
+  @media (max-width: 640px) {
+    .cv-panel { aspect-ratio: 3 / 4; max-height: 600px; border-radius: 20px; padding: 1rem 0; }
+    .cv-curtain-content { padding: 0.75rem; gap: 0.5rem; }
+    .cv-curtain-title { font-size: clamp(1rem, 5cqi, 1.6rem); }
+    .cv-curtain-btn { padding: 0.5rem 1.25rem; font-size: clamp(0.7rem, 2cqi, 0.85rem); }
+    .cv-visualizer-wrap { width: clamp(100px, 50cqi, 200px); height: clamp(100px, 50cqi, 200px); }
+  }
 `;
 
 let styleInjected = false;
@@ -249,6 +256,10 @@ export interface ConversationalPanelConfig {
   curtainBgSrc?: string;
   /** Tool definitions for LLM function calling */
   tools?: any[];
+  /** Maximum conversation duration in seconds (default 300) */
+  maxDuration?: number;
+  /** Seconds of silence before auto-close (default 30) */
+  silenceTimeout?: number;
 }
 
 export class ConversationalPanel {
@@ -260,6 +271,8 @@ export class ConversationalPanel {
   private connectingSound: HTMLAudioElement | null = null;
   private connectingFadeTimer: number | null = null;
   private isRunning = false;
+  private _locked = false;
+  private _lastSpeechTime = 0;
 
   // Cached DOM refs
   private el!: HTMLElement;
@@ -272,6 +285,7 @@ export class ConversationalPanel {
   private timerEl!: HTMLElement;
   private canvas!: HTMLCanvasElement;
   private muteBtn!: HTMLElement;
+  private muteSvg!: SVGElement;
   private stopBtn!: HTMLElement;
   private visualizerWrap!: HTMLElement;
 
@@ -361,6 +375,7 @@ export class ConversationalPanel {
     this.timerEl = this.el.querySelector('.cv-timer')!;
     this.canvas = this.el.querySelector('.cv-canvas')!;
     this.muteBtn = this.el.querySelector('.cv-btn--mute')!;
+    this.muteSvg = this.muteBtn.querySelector('svg')!;
     this.stopBtn = this.el.querySelector('.cv-btn--end')!;
     this.visualizerWrap = this.el.querySelector('.cv-visualizer-wrap')!;
 
@@ -379,6 +394,10 @@ export class ConversationalPanel {
   /** Start the conversation (called when user clicks "Start Conversation" or externally) */
   async start() {
     if (this.isRunning) return;
+    if (this._locked) {
+      this.showError('This session has ended. Refresh the page to start a new one.');
+      return;
+    }
     this.isRunning = true;
     this.startBtn.disabled = true;
     this.errorEl.classList.remove('is-visible');
@@ -417,6 +436,7 @@ export class ConversationalPanel {
           this.onTranscription?.(text);
         },
         onResponse: (text: string) => {
+          this._lastSpeechTime = Date.now();
           this.onResponse?.(text);
         },
         onToolCall: (tool: any) => {
@@ -548,12 +568,30 @@ export class ConversationalPanel {
 
   private startTimer() {
     let elapsed = 0;
+    const maxDur = this.cfg.maxDuration || 300;
+    const silentMax = this.cfg.silenceTimeout || 30;
+    this._lastSpeechTime = Date.now();
     this.timerEl.textContent = '00:00';
     this.timerTicker = window.setInterval(() => {
       elapsed++;
       const m = Math.floor(elapsed / 60).toString().padStart(2, '0');
       const s = (elapsed % 60).toString().padStart(2, '0');
       this.timerEl.textContent = `${m}:${s}`;
+
+      // Check max duration
+      if (elapsed >= maxDur) {
+        this._locked = true;
+        this.stop();
+        this.showError('Conversation time limit reached. Refresh to start a new one.');
+        return;
+      }
+
+      // Check silence timeout
+      if (Date.now() - this._lastSpeechTime > silentMax * 1000) {
+        this._locked = true;
+        this.stop();
+        this.showError('Session ended due to inactivity. Refresh to start a new one.');
+      }
     }, 1000);
   }
 
@@ -564,12 +602,10 @@ export class ConversationalPanel {
       this.muteBtn.classList.toggle('is-muted', muted);
       const span = this.muteBtn.querySelector('span');
       if (span) span.textContent = muted ? 'Unmute' : 'Mute';
-      if (muted) {
-        this.agent.pauseAudio?.();
-        this.visualizer?.setDeactivated?.(true);
-      } else {
-        this.agent.resumeAudio?.();
-        this.visualizer?.setDeactivated?.(false);
+      if (this.muteSvg) {
+        this.muteSvg.innerHTML = muted
+          ? '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="23" y1="1" x2="1" y2="23"/>'
+          : '<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/>';
       }
     } catch (_) {}
   }