feat: support authentication, updates for Streamer.bot v0.2.5

apps/docs/app/components/streamerbot/StreamerbotPlayground.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { StreamerbotClientOptions } from '@streamerbot/client';
 import { useStreamerbot } from '@streamerbot/vue';
 
-const host = ref<string>('127.0.0.1');
-const port = ref<number>(8080);
-const endpoint = ref<string>('/');
+const state = ref<StreamerbotClientOptions>({
+  host: '127.0.0.1',
+  port: 8080,
+  endpoint: '/',
+  password: '',
+  immediate: false,
+});
 
 const {
   client,
@@ -12,29 +17,34 @@ const {
   error,
   connect,
   disconnect,
-} = useStreamerbot({
-  host,
-  port,
-  endpoint
-});
+} = useStreamerbot(state);
 
 // Disconnect on config change
-watch([host, port, endpoint], () => disconnect());
+watch(state, () => disconnect(), { deep: true });
 
-function reconnect() {
-  disconnect();
-  connect();
+async function reconnect() {
+  try {
+    await connect();
+  } catch (e) {
+    console.error(e);
+  }
 }
 
 const clientOptionsCode = computed(() => {
   return `const client = new StreamerbotClient({
-  host: '${host.value}',
-  port: ${port.value},
-  endpoint: '${endpoint.value}'
+  host: '${state.value.host}',
+  port: ${state.value.port},
+  endpoint: '${state.value.endpoint}',
+  password: '${state.value.password.replace(/./g, '*')}',
 });`;
 });
 
 const lastRequestResponse = ref<any>();
+
+watch(client, (client) => {
+  if (!client) return;
+  client.on('Twitch.ChatMessage', (data) => console.log('Twitch.Chat', data));
+});
 </script>
 
 <template>
@@ -46,21 +56,29 @@ const lastRequestResponse = ref<any>();
         </h3>
       </template>
 
-      <div class="flex gap-1">
-        <UFormGroup label="Host">
-          <UInput v-model="host" placeholder="127.0.0.1" />
-        </UFormGroup>
-        <UFormGroup label="Port">
-          <UInput v-model.number="port" placeholder="8080" />
-        </UFormGroup>
-        <UFormGroup label="Endpoint">
-          <UInput v-model="endpoint" placeholder="/" />
-        </UFormGroup>
-      </div>
+      <UForm :state class="grid grid-rows-2 grid-cols-12 gap-3" @submit="() => reconnect()">
+        <div class="grid grid-cols-subgrid col-span-12 ">
+          <UFormGroup label="Host" class="col-span-6">
+            <UInput v-model="state.host" placeholder="127.0.0.1" />
+          </UFormGroup>
+          <UFormGroup label="Port" class="col-span-3">
+            <UInput v-model.number="state.port" placeholder="8080" />
+          </UFormGroup>
+          <UFormGroup label="Endpoint" class="col-span-3">
+            <UInput v-model="state.endpoint" placeholder="/" />
+          </UFormGroup>
+        </div>
+
+        <div class="col-span-full">
+          <UFormGroup label="Password" hint="Optional">
+            <UInput v-model="state.password" type="password" autocomplete="none" />
+          </UFormGroup>
+        </div>
+      </UForm>
 
       <template #footer>
         <div v-if="status === 'CLOSED'">
-          <UButton color="gray" block trailing-icon="i-mdi-wifi" @click="() => reconnect()">
+          <UButton color="gray" block trailing-icon="i-mdi-wifi" :loading="status === 'CONNECTING'" @click="() => reconnect()">
             Connect
           </UButton>
         </div>
@@ -112,6 +130,7 @@ const lastRequestResponse = ref<any>();
           <UButton color="gray" @click="async () => lastRequestResponse = await client.getUserGlobals('twitch', 'test')">Get Twitch User Globals (test)</UButton>
           <UButton color="gray" @click="async () => lastRequestResponse = await client.getUserGlobal('twitch', '54601714')">Get Twitch User Global</UButton>
           <UButton color="gray" @click="async () => lastRequestResponse = await client.getUserGlobal('twitch', '54601714', 'test')">Get Twitch User Global (test)</UButton>
+          <UButton color="gray" @click="async () => lastRequestResponse = await client.sendMessage('twitch', 'test', false, false)">Send Twitch Chat Message</UButton>
         </div>
         <div class="col-span-2 p-3 rounded-lg bg-gray-900 max-h-[600px] overflow-auto">
           <code class="whitespace-pre">{{ lastRequestResponse }}</code>

apps/docs/content/3.api/0.config.md

@@ -34,6 +34,13 @@ If you've modified your `WebSocket Server` settings in Streamer.bot, make sure t
   ```
   ::
 
+  ::field{name=password type=String}
+  Change the password to match your Streamer.bot `WebSocket Server` authentication settings, if enabled.
+  ```ts
+  const client = new StreamerbotClient({ password: 'LyfeSaverSeventyFourIsMyDaddy' });
+  ```
+  ::
+
   ::field{name=scheme type="`ws` | `wss`"}
   Only change this if you are using a secure tunnel or otherwise know what you are doing.
   - Default: `ws`

apps/docs/content/3.api/1.requests.md

@@ -914,4 +914,54 @@ const response = await client.getUserGlobal('twitch', '12345678');
 // Fetch a specific user global variable by user ID and variable name
 const response = await client.getUserGlobal('twitch', '12345678', 'test');
 ```
+::
+
+## `sendMessage`
+_Requires Streamer.bot v0.2.5_
+
+Send a chat message to the selected platform
+
+#### Signature
+`sendMessage(platform: 'twitch' | 'youtube' | 'trovo', message: string, bot = false, internal = true): Promise<SendMessageResponse>`{lang=ts}
+
+#### Parameters
+::field-group
+  ::field{name=platform type="'twitch' | 'youtube' | 'trovo'" required}
+  Select the platform to send the message to
+  ::
+  ::field{name=message type=string required}
+  Enter the content of the message to send
+  ::
+  ::field{name=bot type=boolean default=false}
+  - Default: `false`{lang=ts}
+  Send with the bot account?
+  ::
+  ::field{name=internal type=boolean default=true}
+  - Default: `true`{lang=ts}
+  Send as an `Internal` message
+
+  Useful in combination with the `Ignore Internal` option on [Commands](https://docs.streamer.bot/guide/commands)
+  ::
+::
+
+#### Response Type
+::code-group
+```ts [SendMessageResponse.ts]
+type SendMessageResponse = StreamerbotResponse<{
+  id: string;
+  status: 'ok' | 'error';
+  error?: string;
+}>;
+```
+::
+
+#### Examples
+::code-group
+```ts [Request]
+// Send a message with the Twitch broadcaster account
+const response = await client.sendMessage('twitch', 'Hello, world!');
+
+// Send a message with the Twitch bot account
+const response = await client.getUserGlobal('twitch', 'Hello, from bot account!', true);
+```
 ::

apps/docs/package.json

@@ -10,19 +10,19 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.1",
-    "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/mdi": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.4",
+    "@iconify-json/carbon": "^1.2.3",
+    "@iconify-json/heroicons": "^1.2.1",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/mdi": "^1.2.1",
+    "@iconify-json/simple-icons": "^1.2.7",
     "@iconify-json/skill-icons": "^1.2.0",
     "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/devtools": "^1.5.1",
+    "@nuxt/devtools": "^1.5.2",
     "@nuxt/eslint-config": "^0.5.7",
     "@nuxt/fonts": "^0.9.2",
-    "@nuxt/image": "^1.8.0",
-    "@nuxt/ui-pro": "^1.4.3",
+    "@nuxt/image": "^1.8.1",
+    "@nuxt/ui-pro": "^1.4.4",
     "@streamerbot/client": "workspace:^",
     "@streamerbot/vue": "workspace:^",
     "@vueuse/nuxt": "^11.1.0",

apps/toolkit/package.json

@@ -13,24 +13,24 @@
     "@streamerbot/client": "workspace:^",
     "@streamerbot/vue": "workspace:^",
     "@vueuse/core": "^9.13.0",
-    "pinia": "^2.2.2",
+    "pinia": "^2.2.4",
     "prismjs": "^1.29.0",
     "timestamp-nano": "^1.0.1",
     "uuid": "^9.0.1",
-    "vue": "^3.5.8",
+    "vue": "^3.5.12",
     "vue-router": "^4.4.5",
     "vuetify": "^3.7.2",
     "webfontloader": "^1.6.28",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.2",
-    "@types/node": "^18.19.52",
+    "@types/node": "^18.19.55",
     "@types/prismjs": "^1.26.4",
     "@types/uuid": "^9.0.8",
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-vue": "^4.6.2",
-    "sass": "^1.79.3",
+    "sass": "^1.79.5",
     "typescript": "^4.9.5",
     "vite": "^5.4.8",
     "vite-plugin-pages": "^0.32.3",

apps/toolkit/src/stores/streamerbot.store.ts

@@ -11,10 +11,10 @@ export const useStreamerbotStore = defineStore('streamerbot', () => {
   const MAX_LOGS_LENGTH = 1000;
 
   // Configuration (LocalStorage)
-  const host = useStorage('sb:toolkit:host', DefaultStreamerbotClientOptions.host);
-  const port = useStorage('sb:toolkit:port', DefaultStreamerbotClientOptions.port);
-  const endpoint = useStorage('sb:toolkit:endpoint', DefaultStreamerbotClientOptions.endpoint);
-  const isNewConnection = useStorage('sb:toolkit:new', true);
+  const host = useStorage('sb:toolkit:host', () => DefaultStreamerbotClientOptions.host);
+  const port = useStorage('sb:toolkit:port', () => DefaultStreamerbotClientOptions.port);
+  const endpoint = useStorage('sb:toolkit:endpoint', () => DefaultStreamerbotClientOptions.endpoint);
+  const isNewConnection = useStorage('sb:toolkit:new', () => true);
 
   // Client Connection State
   const { client, error, status, connect, data } = useStreamerbot({

examples/nodejs/index.js

@@ -4,4 +4,4 @@ const client = new StreamerbotClient();
 
 client.on('Twitch.ChatMessage', ({ data }) => {
   console.log(`[Twitch.ChatMessage] ${data.message.displayName}: ${data.message.message}`);
-});
+});