@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/state/WidgetState.ts

@@ -1,3 +1,11 @@
+import { loader } from '@monaco-editor/react'
+import { ulid } from 'ulid'
+import { quickCommandQuestionsInterceptor } from '../chat-interceptors/quick-command-questions'
+import { createQuickCommandInterceptor } from '../chat-interceptors/quick-commands'
+import { sendMessageInterceptor } from '../chat-interceptors/send-message'
+import { AIWidgetFeatures, ChatFeatures, getFeaturesWithDefaults, GlobalFeatures } from '../features'
+import { ChatEntry } from './ChatEntry'
+import { ChatPropertiesWithOptionalFeatures, ChatState, MessageInterceptor } from './ChatState'
 import { ChatTabsController } from './ChatTabsController'
 import { ObservableState } from './ObservableState'
 
@@ -5,22 +13,97 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'steps' | 'tools' | 'resources',
   /**
    * KS to use when the right panel "ks-details" is open.
    */
   currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
+  /**
+   * The message to show in the tools panel or the steps panel.
+   */
+  currentMessageInPanel?: { chatId: string, messageId: number },
   /**
    * Whether or not the widget is in its minimized version.
    */
   isMinimized?: boolean,
+  /**
+   * Global features of the chat widget. These features don't depend on the chat currently selected.
+   */
+  features: GlobalFeatures,
+}
+
+interface Options {
+  /**
+   * Chat interceptors allows you to intercept chat messages, interpret them, modify them and even change the chat flow. See
+   * {@link ChatState} for more details.
+   * 
+   * These interceptors, in addition to the default interceptors, will be used when creating a new chat via `WidgetState#createChat`.
+   */
+  interceptors?: MessageInterceptor[],
+  /**
+   * Features to enable in the widget. If a feature is not set explicitly to false, it's interpreted as enabled.
+   * 
+   * These features will be used when creating a new chat via `WidgetState#createChat`. Updating chat features only influence new chats.
+   */
+  features?: Partial<AIWidgetFeatures>,
+  /**
+   * The initial values for the widget state.
+   * 
+   * The default value for each feature under `initial.features` is true.
+   */
+  initial?: Omit<WidgetProperties, 'features'>,
+  /**
+   * The initial tabs for the chat window.
+   */
+  chatTabs?: ChatTabsController,
 }
 
+/**
+ * Holds the full state of the AI Chat Widget.
+ * 
+ * This can be used to fully control the chat widget. This is the model of what gets rendered to the screen.
+ */
 export class WidgetState extends ObservableState<WidgetProperties> {
   readonly chatTabs: ChatTabsController
+  /**
+   * Chat interceptors to be used by default when creating a new chat.
+   */
+  interceptors: MessageInterceptor[] = []
+  /**
+   * Chat features to be used by default when creating a new chat.
+   */
+  chatFeatures: ChatFeatures
 
-  constructor(initial: WidgetProperties = {}, chatTabs?: ChatTabsController) {
-    super(initial)
+  constructor({ chatTabs, initial, interceptors = [], features }: Options = {}) {
+    const featuresWithDefaults = getFeaturesWithDefaults(features)
+    super({ ...initial, features: featuresWithDefaults })
+    this.chatFeatures = featuresWithDefaults
     this.chatTabs = chatTabs ?? new ChatTabsController()
+    this.interceptors = [
+      ...interceptors,
+      quickCommandQuestionsInterceptor,
+      createQuickCommandInterceptor(this, () => loader.__getMonacoInstance()?.editor),
+      sendMessageInterceptor,
+    ],
+    this.createChat()
+  }
+
+  /**
+   * Utility function for adding a new chat to the chat tabs. This also selects the new tab.
+   * @param properties the chat properties (initial state).
+   * @param entries the entries for the chat to start with.
+   * @returns the chat created.
+   */
+  createChat({ label, ...properties }: Partial<ChatPropertiesWithOptionalFeatures> = {}, entries: ChatEntry[] = []) {
+    const chat = new ChatState({
+      id: ulid(),
+      initial: { label: label || 'Chat', features: this.chatFeatures, ...properties },
+      entries,
+      interceptors: this.interceptors,
+      untitled: !label,
+    })
+    this.chatTabs.add(chat)
+    this.chatTabs.select(chat.id)
+    return chat
   }
 }

package/src/state/constants.ts

@@ -0,0 +1,13 @@
+import { FileSize } from './types'
+
+export const acceptedFileTypes = [
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls',*/ 'xlsx', 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
+  'cs', 'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
+  'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
+  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png', 'docx', 'pptx', 
+  'tiff', 'tif', 'bmp',
+]
+
+export const maxFileSize: FileSize = { value: 10, unit: 'MB' }
+
+export const maxUploadItems = 5

package/src/state/types.ts

@@ -4,5 +4,16 @@ export interface Labeled {
 }
 
 export interface LabeledWithImage extends Labeled {
-  image?: string,
+  image?: string | undefined | null,
+}
+
+export interface LabeledAgent extends LabeledWithImage {
+  builtIn?: boolean,
+  slug?: string,
+  visibility_level?: string,
+}
+
+export interface FileSize {
+  value: number,
+  unit: 'B' | 'KB' | 'MB' | 'GB',
 }

package/src/types.ts

@@ -1,3 +1,5 @@
+import { WithIcon } from '@stack-spot/citric-icons'
+import { BaseIconBoxProps } from '@stack-spot/citric-react'
 import { WithStyle } from '@stack-spot/portal-theme'
 
 export interface WithChildren<T = React.ReactNode> {
@@ -6,15 +8,30 @@ export interface WithChildren<T = React.ReactNode> {
 
 export type PropsOf<T extends React.FunctionComponent> = T extends React.FunctionComponent<infer P> ? P : never
 
-export interface ButtonAction extends WithStyle {
-  icon?: React.ReactElement,
+export type ButtonAction = {
   color?: string,
-  label: string,
+  label?: string,
+  ariaLabel?: string,
+  title?: string,
   onClick: () => any,
-}
+  appearance?: BaseIconBoxProps<any, any>['appearance'],
+  size?: BaseIconBoxProps<any, any>['size'],
+  disabled?: boolean,
+} & WithStyle & Partial<WithIcon>
+
 
 export interface MinimizedActions {
+  /**
+   * When the chat is minimized, a button to collapse the window is rendered. This function is called whenever this button is clicked.
+   */
   onCollapse?: () => void,
+  /**
+   * If `onCollapse` is clicked, the button to collapse is replaced by a button to expand. This function is called whenever the expand
+   * button is clicked. 
+   */
   onExpand?: () => void,
+  /**
+   * When the chat is minimized, a button to close the window is rendered. This function is called whenever this button is clicked.
+   */
   onClose?: () => void,
 }

package/src/utils/chat.ts

@@ -1,30 +1,31 @@
 import { FixedChatRequest } from '@stack-spot/portal-network'
-import { ulid } from 'ulid'
-import { ChatState, MessageInterceptor } from '../state/ChatState'
-import { WidgetState } from '../state/WidgetState'
+import appData from '../app-metadata.json'
+import { ChatEntry } from '../state/ChatEntry'
+import { ChatState } from '../state/ChatState'
 import { defaultLanguage } from './programming-languages'
 
-let next = 1
-
-export function createNewChat(widget: WidgetState, interceptors: MessageInterceptor[]) {
-  const id = ulid()
-  widget.chatTabs.add(new ChatState({ id, initial: { label: `Chat ${next}` }, interceptors }))
-  widget.chatTabs.select(id)
-  next++
-}
-
-export function buildConversationContext(state: ChatState): FixedChatRequest['context'] {
+/**
+ * Builds a conversation context from a ChatState.
+ * 
+ * The conversation context is needed by most backend services.
+ * 
+ * @param state the ChatState to build the context from.
+ * @returns the conversation context ready to be sent to the backend.
+ */
+export function buildConversationContext(state: ChatState, message?: ChatEntry): FixedChatRequest['context'] {
   return {
     workspace: state.get('workspace')?.id,
     conversation_id: state.id,
     stack_id: state.get('stack')?.id,
     language: state.get('codeLanguage') || (state.get('codeSelection') ? defaultLanguage : undefined),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
+    upload_ids: message?.getValue().upload?.map(f => f.id),
     agent_id: state.get('agent')?.id,
     agent_built_in: state.get('agent')?.builtIn,
     os: navigator.userAgent,
     platform: 'web-widget',
     platform_version: navigator.userAgent,
-    stackspot_ai_version: 'alpha',
+    stackspot_ai_version: appData.version,
+    selected_model_id: state.get('selected_model_id'),
   }
 }

package/src/utils/check-is-trial.ts

@@ -0,0 +1,6 @@
+import { NetworkClient } from '@stack-spot/portal-network'
+
+export const checkIsTrial = () => {
+  const trialInfo = NetworkClient.sessionManager?.getSession()?.getTokenData()?.trial_account_status
+  return !!trialInfo
+}

package/src/utils/copy-to-clipboard.ts

@@ -0,0 +1,29 @@
+function copyTextToClipboardFallback(text: string) {
+  const input = document.createElement('input')
+  input.value = text
+  input.style.position = 'absolute'
+  input.style.left = '-99999px'
+  document.body.appendChild(input)
+  input.select()
+
+  try {
+    document.execCommand('copy')
+  } catch {
+    /* empty */
+  }
+  finally {
+    document.body.removeChild(input)
+  }
+}
+
+/**
+ * Copies the provided text to the clipboard. If the Clipboard API is not supported,
+ * it falls back to using a hidden input element to perform the copy operation.
+ */
+export async function copyTextToClipboardWithFallback(text: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    copyTextToClipboardFallback(text)
+  }
+}

package/src/utils/date.ts

@@ -1,4 +1,4 @@
-import { Dictionary, Language, getLanguage, useLanguage } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, useLanguage } from '@stack-spot/portal-translate'
 
 const OneDay = 24 * 60 * 60 * 1000
 const timeFormatOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute:'2-digit' }
@@ -8,8 +8,18 @@ const fullFormatOptions: Intl.DateTimeFormatOptions = {
   month: 'long',
 }
 
-
-export function formatDateForChatMessage(date: Date, language: Language = getLanguage()) {
+/**
+ * Formats a date to show at the footer of a chat message.
+ * 
+ * @example
+ * - Today, 14:11
+ * - Yesterday, 09:00
+ * - October 26 at 10:53
+ * @param date the Date to format.
+ * @param language the language to use.
+ * @returns the formatted date.
+ */
+export function formatDateForChatMessage(date: Date, language = getLanguage(ptEn)) {
   const formatted: string[] = []
   const now = new Date()
   const isToday = date.toDateString() === now.toDateString()
@@ -21,13 +31,27 @@ export function formatDateForChatMessage(date: Date, language: Language = getLan
   return formatted.join(', ')
 }
 
+/**
+ * Uses the current language to format dates.
+ * @returns an object containing functions for formatting dates.
+ */
 export function useDateFormatter() {
-  const language = useLanguage()
+  const language = useLanguage(ptEn)
   return {
+    /**
+     * @param date the date to format using {@link formatDateForChatMessage}.
+     * @returns the formatted date according to the current language. If the language changes, this result also changes.
+     */
     formatForChatMessage: (date: Date) => formatDateForChatMessage(date, language),
   }
 }
 
+/**
+ * Subtracts `numberOfDays` from `date`.
+ * @param date 
+ * @param numberOfDays 
+ * @returns the resulting Date object.
+ */
 export function subtractDays(date: Date, numberOfDays: number) {
   return new Date(date.getTime() - 24 * numberOfDays * 60 * 60000)
 }

package/src/utils/download.ts

@@ -1,3 +1,8 @@
+/**
+ * Downloads `text` as a file named `filename`.
+ * @param filename the name of the file.
+ * @param text the content of the file.
+ */
 export function download(filename: string, text: string) {
   const element = document.createElement('a')
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))

package/src/utils/error.ts

@@ -0,0 +1,56 @@
+import { getLanguage, ptEn } from '@stack-spot/portal-translate'
+
+const httpErrors: Record<'en' | 'pt', Record<number, string>> = {
+  en: {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    413: 'Payload Too Large',
+    414: 'URI Too Long',
+    415: 'Unsupported Media Type',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+  },
+  pt: {
+    400: 'Requisição Inválida',
+    401: 'Não Autorizado',
+    403: 'Proibido',
+    404: 'Não Encontrado',
+    405: 'Método Não Permitido',
+    406: 'Não Aceitável',
+    408: 'Tempo de Requisição Esgotado',
+    409: 'Conflito',
+    410: 'Indisponível',
+    411: 'Comprimento Necessário',
+    413: 'Carga Muito Grande',
+    414: 'URI Muito Longa',
+    415: 'Tipo de Mídia Não Suportado',
+    429: 'Muitas Requisições',
+    500: 'Erro Interno do Servidor',
+    501: 'Não Implementado',
+    502: 'Gateway Inválido',
+    503: 'Serviço Indisponível',
+    504: 'Tempo de Gateway Esgotado',
+    505: 'Versão HTTP Não Suportada',
+  },
+}
+
+function getGenericErrorBasedOnStatus(status: number) {
+  return httpErrors[getLanguage(ptEn)][status] ?? `Unknown error. Status code: ${status}.`
+}
+
+export function treatHTMLInErrorMessage(text: string, status: number) {
+  return (!text.includes('<html>')) ? text : getGenericErrorBasedOnStatus(status)
+}

package/src/utils/knowledge-source.ts

@@ -1,6 +1,12 @@
-import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
+import { DocumentResponse, SourceKnowledgeSource, SourceProjectFile3, SourceStackAi } from '@stack-spot/portal-network/api/ai'
 import { KnowledgeSource } from '../state/ChatEntry'
 
+/**
+ * A document can come from the backend as something that resembles a JSON, but it is not. This function attempts to solve some issues and
+ * still interpret as a JSON.
+ * @param str the malformed JSON.
+ * @returns the object corresponding to parsed JSON or undefined if it wasn't possible to fix it.
+ */
 function attemptToParseMalFormedJson(str: string) {
   try {
     return JSON.parse(str)
@@ -21,6 +27,11 @@ function attemptToParseMalFormedJson(str: string) {
   }
 }
 
+/**
+ * Extracts the important part of a KS document to show for the user.
+ * @param document the document to parse.
+ * @returns an object containing the programming language of the KS, its code snippet and a textual description.
+ */
 export function extractCodeFromKSDocument(document: DocumentResponse): { language?: string, snippet: string, text?: string } {
   const language = (document?.metadata as any)?.language
   if (language) {
@@ -43,8 +54,13 @@ export function extractCodeFromKSDocument(document: DocumentResponse): { languag
   return typeof document === 'object' ? { language: 'json', snippet: JSON.stringify(document, null, 2) } : { snippet: String(document) }
 }
 
+/**
+ * Extracts all knowledge sources from a mix of sources that can be used to shape an AI agent's answer.
+ * @param sources a list with sources of any kind.
+ * @returns a list of knowledge sources in the format expected by the chat.
+ */
 export function genericSourcesToKnowledgeSources(
-  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile4)[] | undefined,
+  sources: (SourceStackAi | SourceKnowledgeSource | SourceProjectFile3)[] | undefined,
 ): KnowledgeSource[] | undefined {
   return sources?.filter(s => s.type === 'knowledge_source').map(ks => {
     const { document_id: documentId, document_score: documentScore, name, slug } = ks as SourceKnowledgeSource

package/src/utils/planning-tool.ts

@@ -0,0 +1,41 @@
+class PlanningToolDictionaryHelper {
+  static instance: PlanningToolDictionaryHelper | undefined
+  private toolExecutionIdPlanningStep: Record<string, string> = {}
+  private toolExecutionIdToolStep: Record<string, string> = {}
+  private stepId: Record<string, number> = {}
+
+  private constructor() {
+    PlanningToolDictionaryHelper.instance = this
+  }
+
+  static create() {
+    return PlanningToolDictionaryHelper.instance ?? new PlanningToolDictionaryHelper()
+  }
+
+  setMessageIdPlanningStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdPlanningStep[toolExecutionId] = messageId
+  }
+
+  setMessageIdToolStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdToolStep[toolExecutionId] = messageId
+  }
+  
+  setMessageIdForStepId(messageId: number, stepId: string){
+    this.stepId[stepId] = messageId
+  }
+
+  getMessageIdFromStepId(stepId: string){
+    return this.stepId[stepId]
+  }
+
+  getMessageIdPlanningStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdPlanningStep[toolExecutionId]
+  }
+
+  getMessageIdToolStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdToolStep[toolExecutionId]
+  }
+}
+
+export const planningToolDictionaryHelper = PlanningToolDictionaryHelper.create()
+

package/src/utils/programming-languages.ts

@@ -81,6 +81,11 @@ export const languages = [
     'label': 'CSS',
     'extensions': ['.css'],
   },
+  {
+    'value': 'csv',
+    'label': 'CSV',
+    'extensions': ['.csv'],
+  },
   {
     'value': 'd',
     'label': 'D',
@@ -351,6 +356,11 @@ export const languages = [
     'label': 'Redshift',
     'extensions': ['.sql'],
   },
+  {
+    'value': 'rego',
+    'label': 'Rego',
+    'extensions': ['.rego'],
+  },
   {
     'value': 'restructuredtext',
     'label': 'Restructured Text',

package/src/utils/string.ts

@@ -1,4 +1,8 @@
-// gets the size of a string removing control characters and spaces
+/**
+ * Gets the size of a string removing control characters and spaces
+ * @param str the string to count.
+ * @returns the count value.
+ */
 export function getSizeOfString(str: string): number {
   // eslint-disable-next-line no-control-regex
   const withoutSpacesAndControls = str.replace(/[\u0000-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069\s]/g, '')

package/src/utils/tools.ts

@@ -0,0 +1,32 @@
+
+export type ToolWithImage = { id?: string, image?: string, name: string, description?: string }
+
+interface Toolkit {
+  id?: string | null,
+  tools?: { id?: string, name?: string, description?: string, function?: { name: string, description?: string } }[] | null,
+  image_url?: string | null,
+  avatar?: string | null,
+}
+
+function findToolById(id: string, toolkits: Toolkit[]) {
+  for (const tk of toolkits ?? []) {
+    for (const t of tk.tools ?? []) {
+      if (t.id === id) return { tool: t, toolkit: tk }
+    }
+  }
+}
+
+export function toolById(id: string, toolkits: Toolkit[] | undefined): ToolWithImage {
+  // mcp tools are identified by "{toolkitId}/{functionName}"
+  const mcp = id.match(/(\w+)\/(.+)/)
+  if (mcp) {
+    const [, toolkitId, toolName] = mcp
+    const toolkit = toolkits?.find(tk => tk.id === toolkitId)
+    const tool = toolkit?.tools?.find(t => t.name === toolName)
+    return { id, image: toolkit?.avatar ?? undefined, name: toolName, description: tool?.function?.description }
+  }
+  const { tool, toolkit } = findToolById(id, toolkits ?? []) ?? {}
+  return (tool && toolkit)
+    ? { id, image: toolkit.avatar ?? toolkit.image_url ?? undefined, name: tool.name || id, description: tool?.description }
+    : { id, name: id }
+}

package/src/utils/update-tool-step.tsx

@@ -0,0 +1,27 @@
+import { ChatEntry, TextChatEntry } from '../state/ChatEntry'
+import { planningToolDictionaryHelper } from './planning-tool'
+
+export const updateToolStep = (messages: ChatEntry[], executionId: string, 
+  newStatus: 'pending' | 'running' | 'success' | 'error' | 'awaiting_approval') => {
+  
+  // if last message is a user message, no update in tool status is needed
+  if (messages[messages.length-1].getValue().agentType === 'user') return
+  
+  const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
+  const message = messages.find((message) => `${message.id}` === messageId)
+  let update = false
+  const messageValue = message?.getValue()
+  messageValue?.steps?.map((step) => {
+    if (step.type === 'step') {
+      const tool = step.attempts?.[0].tools?.[0]
+      if (tool?.executionId === executionId && step.status !== newStatus) {
+        step.status = newStatus
+        update = true
+      }
+    }
+  })
+  
+  if (update) {
+    message?.setValue({ ...messageValue as TextChatEntry })
+  }
+}

package/src/utils/upload/FileUpload.ts

@@ -0,0 +1,63 @@
+import { dataIntegrationClient } from '@stack-spot/portal-network'
+import { FileUploadType } from '@stack-spot/portal-network/api/dataIntegration'
+import { pull } from 'lodash'
+import { FileUploadStatus } from './types'
+
+export type FileUploadChangeListener = (status: FileUploadStatus) => void
+
+export class FileUpload {
+  readonly file: File
+  status: FileUploadStatus = 'pending'
+  readonly id: string
+  readonly type: FileUploadType
+  error?: any
+  uploadId?: string
+  private listeners: FileUploadChangeListener[] = []
+  private abortController = new AbortController()
+
+  constructor(file: File, type: FileUploadType = 'CONTEXT') {
+    this.file = file
+    this.type = type
+    this.id = `${Date.now()}-${Math.random()}`
+    this.upload()
+  }
+
+  private runListeners() {
+    this.listeners.forEach(l => l(this.status))
+  }
+
+  private async upload() {
+    try {
+      const [id] = await dataIntegrationClient.uploadFiles.mutate({ files: [this.file], type: this.type }, this.abortController.signal)
+      this.uploadId = id
+      this.status = 'success'
+    } catch (error) {
+      this.error = error
+      this.status = 'error'
+    }
+    this.runListeners()
+  }
+
+  stop() {
+    this.abortController.abort()
+  }
+
+  retry() {
+    if (this.status != 'error') return
+    this.status = 'pending'
+    this.runListeners()
+    this.upload()
+  }
+
+  onChange(listener: FileUploadChangeListener) {
+    this.listeners.push(listener)
+    return () => {
+      pull(this.listeners, listener)
+    }
+  }
+
+  destroy() {
+    this.listeners = []
+    this.stop()
+  }
+}