- Replying to @{replyInputData?.sender?.username}
+ {t('chatInput.replyingTo')} @{replyInputData?.sender?.username}
}
+ aria-placeholder={t('chatInput.enterMessage')}
+ placeholder={{t('chatInput.placeholder')}
}
spellCheck={false}
/>
{streamerData?.livestream?.session_title}
@@ -150,19 +154,19 @@ const StreamerInfo = memo(
- Live for {convertDateToHumanReadable(streamerData?.livestream?.created_at)} with{" "} - {streamerData?.livestream?.viewer_count?.toLocaleString() || 0} viewers + {t('streamerInfo.liveFor', { + duration: convertDateToHumanReadable(streamerData?.livestream?.created_at), + viewers: streamerData?.livestream?.viewer_count?.toLocaleString() || 0 + })}
- Sign in with your
Kick account + {t('auth.signInWithKick')}
Kick account + {t('auth.signInWithKick')}
-
Use username and password for login? Continue to Kick.com
+{t('auth.kickLoginDescription')}
-
Already have a Kick account with Google or Apple login?
+{t('auth.googleAppleDescription')}
- Disclaimer: We do NOT save any emails or passwords. + Disclaimer: {t('auth.disclaimer')}
- Chatters: {chattersData?.streamerData?.user?.username || ""} + {t('chatters.title')}: {chattersData?.streamerData?.user?.username || ""}
{debouncedValue ? ( <> - Showing: {filteredChatters.length} of {chattersData?.chatters?.length || 0} + {t('chatters.showing')}: {filteredChatters.length} {t('chatters.of')} {chattersData?.chatters?.length || 0} ) : ( <> - Total: {chattersData?.chatters?.length || 0} + {t('chatters.total')}: {chattersData?.chatters?.length || 0} )}
@@ -102,14 +104,14 @@ const Chatters = () => {
- setDebouncedValue(e.target.value.trim())} />
+ setDebouncedValue(e.target.value.trim())} />
{chattersData?.chatters?.length ? (
{!filteredChatters?.length && debouncedValue ? (
{
) : (
- No results found
+ {t('chatters.noResults')}
) : (
-
)}
diff --git a/src/renderer/src/components/Dialogs/Search.jsx b/src/renderer/src/components/Dialogs/Search.jsx
index 3c34a4f..5b03d13 100644
--- a/src/renderer/src/components/Dialogs/Search.jsx
+++ b/src/renderer/src/components/Dialogs/Search.jsx
@@ -1,11 +1,13 @@
import "../../assets/styles/components/Chat/Message.scss";
import { useCallback, useEffect, useState, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
import { Virtuoso } from "react-virtuoso";
import { useDebounceValue } from "../../utils/hooks";
import X from "../../assets/icons/x-bold.svg";
import RegularMessage from "../Messages/RegularMessage";
const Search = () => {
+ const { t } = useTranslation();
const [searchData, setSearchData] = useState(null);
const [messages, setMessages] = useState([]);
const [debouncedValue, setDebouncedValue] = useDebounceValue("", 200);
@@ -139,20 +141,20 @@ const Search = () => {
{debouncedValue ? (
No chatters tracked yet
- As users type their username will appear here. +{t('chatters.noTrackingYet')}
+ {t('chatters.trackingDescription')}- Searching History in {searchData?.chatroomName} + {t('search.searchingHistory')} {searchData?.chatroomName}
- Messages: {filteredMessages.length} of{" "} + {t('search.messages')}: {filteredMessages.length} {t('chatters.of')}{" "} {messages?.filter((m) => m.type === "message")?.length || 0}
) : (- Searching History in {searchData?.chatroomName} + {t('search.searchingHistory')} {searchData?.chatroomName}
- Messages: {messages?.filter((m) => m.type === "message")?.length || 0} + {t('search.messages')}: {messages?.filter((m) => m.type === "message")?.length || 0}
)} @@ -164,7 +166,7 @@ const Search = () => {
setDebouncedValue(e.target.value.trim())}
ref={inputRef}
/>
@@ -173,7 +175,7 @@ const Search = () => {
{!filteredMessages?.length && debouncedValue ? (
{
+ const { t } = useTranslation();
+
return (
@@ -92,7 +93,7 @@ const AboutSection = ({ appInfo }) => {
- No messages found
+ {t('search.noResults')}
) : (
-
About KickTalk
-A chat client for Kick.com.
+{t('settings.about.title')}
+{t('settings.about.description')}
-
Meet the Creators
+{t('settings.about.meetCreators')}
@@ -22,23 +25,23 @@ const AboutSection = ({ appInfo }) => {
-
Kick Username:
+{t('settings.about.kickUsername')}:
DRKNESS_x
-Role:
-Developer & Designer
+{t('settings.about.role')}:
+{t('settings.about.developerDesigner')}
- Open Twitter
+ {t('settings.about.openTwitter')}
- Open Channel
+ {t('settings.about.openChannel')}
@@ -49,23 +52,23 @@ const AboutSection = ({ appInfo }) => {
-
Kick Username:
+{t('settings.about.kickUsername')}:
ftk789
-Role:
-Developer
+{t('settings.about.role')}:
+{t('settings.about.developer')}
- Open Twitter
+ {t('settings.about.openTwitter')}
- Open Channel
+ {t('settings.about.openChannel')}
@@ -76,14 +79,12 @@ const AboutSection = ({ appInfo }) => {
-
About KickTalk
+{t('settings.about.aboutKickTalk')}
- We created this application because we felt the current solution Kick was offering couldn't meet the needs of users - who want more from their chatting experience. From multiple chatrooms to emotes and native Kick functionality all in - one place. + {t('settings.about.appDescription')}
-
{/* Current Version:
+{t('settings.about.currentVersion')}:
{appInfo?.appVersion}
-
General
-Select what general app settings you want to change.
+{t('settings.general.title')}
+{t('settings.general.description')}
+ {/* Language Selection */}
+
+
+
);
};
diff --git a/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx b/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
index 1314aa8..b51aabb 100644
--- a/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
+++ b/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../../Shared/Tooltip";
import InfoIcon from "../../../../assets/icons/info-fill.svg?asset";
import clsx from "clsx";
import { Switch } from "../../../Shared/Switch";
const ModerationSection = ({ settingsData, onChange }) => {
+ const { t } = useTranslation();
+
return (
diff --git a/src/renderer/src/components/Messages/Message.jsx b/src/renderer/src/components/Messages/Message.jsx
index a9d0eb2..6c59d65 100644
--- a/src/renderer/src/components/Messages/Message.jsx
+++ b/src/renderer/src/components/Messages/Message.jsx
@@ -1,5 +1,6 @@
import "../../assets/styles/components/Chat/Message.scss";
import { useCallback, useRef, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
import ModActionMessage from "./ModActionMessage";
import RegularMessage from "./RegularMessage";
import EmoteUpdateMessage from "./EmoteUpdateMessage";
@@ -35,6 +36,7 @@ const Message = ({
chatroomName,
donators,
}) => {
+ const { t } = useTranslation();
const messageRef = useRef(null);
const getDeleteMessage = useChatStore(useShallow((state) => state.getDeleteMessage));
const [rightClickedEmote, setRightClickedEmote] = useState(null);
@@ -136,6 +138,7 @@ const Message = ({
}
};
+
const handleOpenEmoteLink = () => {
if (rightClickedEmote) {
let emoteUrl = "";
@@ -297,6 +300,8 @@ const Message = ({
message.type === "stvEmoteSetUpdate" && "emoteSetUpdate",
type === "dialog" && "dialogChatMessageItem",
shouldHighlightMessage && "highlighted",
+ message.isOptimistic && message.state === "optimistic" && "optimistic",
+ message.isOptimistic && message.state === "failed" && "failed",
)}
style={{
backgroundColor: shouldHighlightMessage ? rgbaObjectToString(settings?.notifications?.backgroundRgba) : "transparent",
@@ -328,6 +333,7 @@ const Message = ({
donatorBadges={donatorBadges}
subscriberBadges={subscriberBadges}
sevenTVEmotes={allStvEmotes}
+ sevenTVSettings={settings?.sevenTV}
userStyle={userStyle}
handleOpenUserDialog={handleOpenUserDialog}
userChatroomInfo={userChatroomInfo}
@@ -342,9 +348,9 @@ const Message = ({
{message.type === "system" && (
{message.content === "connection-pending"
- ? "Connecting to Channel..."
+ ? t('messages.connecting')
: message.content === "connection-success"
- ? "Connected to Channel"
+ ? t('messages.connected')
: message.content}
)}
diff --git a/src/renderer/src/components/Messages/MessagesHandler.jsx b/src/renderer/src/components/Messages/MessagesHandler.jsx
index 5981c3c..0b3bca4 100644
--- a/src/renderer/src/components/Messages/MessagesHandler.jsx
+++ b/src/renderer/src/components/Messages/MessagesHandler.jsx
@@ -1,5 +1,6 @@
import { memo, useMemo, useEffect, useState, useRef, useCallback } from "react";
import { Virtuoso } from "react-virtuoso";
+import { useTranslation } from "react-i18next";
import useChatStore from "../../providers/ChatProvider";
import Message from "./Message";
import MouseScroll from "../../assets/icons/mouse-scroll-fill.svg?asset";
@@ -18,6 +19,7 @@ const MessagesHandler = memo(
userId,
donators,
}) => {
+ const { t } = useTranslation();
const virtuosoRef = useRef(null);
const chatContainerRef = useRef(null);
const [silencedUserIds, setSilencedUserIds] = useState(new Set());
@@ -28,7 +30,7 @@ const MessagesHandler = memo(
if (!messages?.length) return [];
return messages.filter((message) => {
- if (message?.chatroom_id !== chatroomId) return false;
+ if (message?.chatroom_id != chatroomId) return false;
if (message?.type === "system" || message?.type === "mod_action") return true;
if (message?.type !== "reply" && message?.type !== "message") return true;
@@ -36,28 +38,6 @@ const MessagesHandler = memo(
});
}, [messages, chatroomId, silencedUserIds]);
- useEffect(() => {
- if (filteredMessages.length > 0 && !isPaused) {
- virtuosoRef.current?.scrollToIndex({
- index: filteredMessages.length - 1,
- behavior: "instant",
- align: "end",
- });
- }
- }, [chatroomId]);
-
- useEffect(() => {
- if (virtuosoRef.current && atBottom) {
- setTimeout(() => {
- virtuosoRef.current?.scrollToIndex({
- index: filteredMessages.length - 1,
- align: "start",
- behavior: "instant",
- });
- }, 0);
- }
- }, [filteredMessages, atBottom]);
-
const handleScroll = useCallback(
(e) => {
if (!e?.target) return;
@@ -79,23 +59,19 @@ const MessagesHandler = memo(
setIsPaused(newPausedState);
useChatStore.getState().handleChatroomPause(chatroomId, newPausedState);
- if (!newPausedState && filteredMessages?.length) {
- virtuosoRef.current?.scrollToIndex({
- index: filteredMessages.length - 1,
- behavior: "instant",
- align: "end",
- });
+ virtuosoRef.current?.scrollToIndex({
+ index: filteredMessages.length - 1,
+ align: "start",
+ behavior: "instant",
+ });
+
+ if (!newPausedState) {
setAtBottom(true);
}
};
const itemContent = useCallback(
(index, message) => {
- // if (!message?.id) {
- // console.warn("[MessagesHandler]: Message without ID at index:", index);
- // return null;
- // }
-
// Hide mod actions if the setting is disabled
if (message?.type === "mod_action" && !settings?.chatrooms?.showModActions) {
return false;
@@ -163,14 +139,12 @@ const MessagesHandler = memo(
itemContent={itemContent}
computeItemKey={computeItemKey}
onScroll={handleScroll}
- // followOutput={"auto"}
+ followOutput={isPaused ? false : "smooth"}
initialTopMostItemIndex={filteredMessages?.length - 1}
- // alignToBottom={true}
- // atBottomStateChange={setAtBottom}
- atBottomThreshold={100}
- overscan={20}
- increaseViewportBy={200}
- defaultItemHeight={45}
+ atBottomThreshold={6}
+ overscan={50}
+ increaseViewportBy={400}
+ defaultItemHeight={50}
style={{
height: "100%",
width: "100%",
@@ -180,8 +154,8 @@ const MessagesHandler = memo(
{!atBottom && (
@@ -189,7 +163,6 @@ const MessagesHandler = memo(
},
);
-// Add displayName for debugging
MessagesHandler.displayName = "MessagesHandler";
export default MessagesHandler;
diff --git a/src/renderer/src/components/Messages/ModActionMessage.jsx b/src/renderer/src/components/Messages/ModActionMessage.jsx
index fc41b25..fb586ec 100644
--- a/src/renderer/src/components/Messages/ModActionMessage.jsx
+++ b/src/renderer/src/components/Messages/ModActionMessage.jsx
@@ -1,9 +1,11 @@
import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
import { convertMinutesToHumanReadable } from "../../utils/ChatUtils";
import useCosmeticsStore from "../../providers/CosmeticsProvider";
import { useShallow } from "zustand/react/shallow";
const ModActionMessage = ({ message, chatroomId, allStvEmotes, subscriberBadges, chatroomName, userChatroomInfo }) => {
+ const { t } = useTranslation();
const { modAction, modActionDetails } = message;
const getUserStyle = useCosmeticsStore(useShallow((state) => state.getUserStyle));
@@ -51,14 +53,20 @@ const ModActionMessage = ({ message, chatroomId, allStvEmotes, subscriberBadges,
{isBanAction ? (
<>
{" "}
- {modAction === "banned" ? "permanently banned " : "timed out "}
+ {modAction === "banned"
+ ? t('messages.modAction.permanentlyBanned')
+ : t('messages.modAction.timedOut')
+ }{" "}
{" "}
- {modAction === "ban_temporary" && ` for ${convertMinutesToHumanReadable(duration)}`}
+ {modAction === "ban_temporary" && t('messages.modAction.forDuration', { duration: convertMinutesToHumanReadable(duration) })}
) : (
<>
{" "}
- {modAction === "unbanned" ? "unbanned" : "removed timeout on"}{" "}
+ {modAction === "unbanned"
+ ? t('messages.modAction.unbanned')
+ : t('messages.modAction.removedTimeoutOn')
+ }{" "}
)}
diff --git a/src/renderer/src/components/Messages/RegularMessage.jsx b/src/renderer/src/components/Messages/RegularMessage.jsx
index 352b7d0..d482b50 100644
--- a/src/renderer/src/components/Messages/RegularMessage.jsx
+++ b/src/renderer/src/components/Messages/RegularMessage.jsx
@@ -1,10 +1,12 @@
import { memo, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
import { MessageParser } from "../../utils/MessageParser";
import { KickBadges, KickTalkBadges, StvBadges } from "../Cosmetics/Badges";
import { getTimestampFormat } from "../../utils/ChatUtils";
import CopyIcon from "../../assets/icons/copy-simple-fill.svg?asset";
import ReplyIcon from "../../assets/icons/reply-fill.svg?asset";
import Pin from "../../assets/icons/push-pin-fill.svg?asset";
+import RetryIcon from "../../assets/icons/arrow-clockwise-fill.svg?asset";
import clsx from "clsx";
import ModActions from "./ModActions";
import useChatStore from "../../providers/ChatProvider";
@@ -26,6 +28,7 @@ const RegularMessage = memo(
isSearch = false,
settings,
}) => {
+ const { t } = useTranslation();
const getPinMessage = useChatStore((state) => state.getPinMessage);
const canModerate = useMemo(
@@ -59,6 +62,12 @@ const RegularMessage = memo(
getPinMessage(chatroomId, data);
}, [message?.id, message?.chatroom_id, message?.content, message?.sender, chatroomName, getPinMessage, chatroomId]);
+ const handleRetryMessage = useCallback(() => {
+ if (message.isOptimistic && message.state === "failed" && message.tempId) {
+ useChatStore.getState().retryFailedMessage(chatroomId, message.tempId);
+ }
+ }, [message.isOptimistic, message.state, message.tempId, chatroomId]);
+
const usernameStyle = useMemo(() => {
if (userStyle?.paint) {
return {
@@ -66,7 +75,9 @@ const RegularMessage = memo(
filter: userStyle.paint.shadows,
};
}
- return { color: message.sender.identity?.color };
+ return {
+ color: message.sender.identity?.color || 'var(--text-primary)'
+ };
}, [userStyle?.paint, message.sender.identity?.color]);
const messageContent = useMemo(
@@ -97,7 +108,9 @@ const RegularMessage = memo(
}, [canModerate, settings?.moderation?.quickModTools, message?.deleted, message?.sender?.username, chatroomName, username]);
return (
-
+
{
+ try {
+ return localStorage.getItem('kicktalk-language') || 'en';
+ } catch (error) {
+ console.warn('Could not access localStorage:', error);
+ return 'en';
+ }
+};
+
+i18n
+ .use(initReactI18next)
+ .init({
+ resources,
+ lng: getStoredLanguage(), // Use stored language
+ fallbackLng: 'en',
+
+ interpolation: {
+ escapeValue: false // React already does escaping
+ },
+
+ supportedLngs: ['en', 'es', 'pt'],
+
+ react: {
+ useSuspense: false
+ }
+ });
+
+// Listen for language changes and persist them
+i18n.on('languageChanged', (lng) => {
+ try {
+ localStorage.setItem('kicktalk-language', lng);
+ // Also save to app store if available
+ if (window.app?.store) {
+ window.app.store.set('language', lng);
+ }
+ } catch (error) {
+ console.warn('Could not save language preference:', error);
+ }
+});
+
+export default i18n;
diff --git a/src/renderer/src/utils/languageSync.js b/src/renderer/src/utils/languageSync.js
new file mode 100644
index 0000000..036fc49
--- /dev/null
+++ b/src/renderer/src/utils/languageSync.js
@@ -0,0 +1,67 @@
+/**
+ * Language synchronization utility
+ * Ensures all windows/dialogs stay in sync when language changes
+ */
+
+import i18n from './i18n';
+
+class LanguageSync {
+ constructor() {
+ this.listeners = new Set();
+ this.init();
+ }
+
+ init() {
+ // Listen for storage changes (from other windows)
+ window.addEventListener('storage', (e) => {
+ if (e.key === 'kicktalk-language' && e.newValue !== i18n.language) {
+ i18n.changeLanguage(e.newValue);
+ }
+ });
+
+ // Listen for i18n language changes
+ i18n.on('languageChanged', (lng) => {
+ this.notifyListeners(lng);
+ });
+ }
+
+ addListener(callback) {
+ this.listeners.add(callback);
+ return () => this.listeners.delete(callback);
+ }
+
+ notifyListeners(language) {
+ this.listeners.forEach(callback => {
+ try {
+ callback(language);
+ } catch (error) {
+ console.error('Language sync listener error:', error);
+ }
+ });
+ }
+
+ getCurrentLanguage() {
+ return i18n.language || 'en';
+ }
+
+ async changeLanguage(language) {
+ try {
+ await i18n.changeLanguage(language);
+
+ // Notify main process if available
+ if (window.app?.onLanguageChange) {
+ window.app.onLanguageChange(language);
+ }
+
+ return true;
+ } catch (error) {
+ console.error('Error changing language:', error);
+ return false;
+ }
+ }
+}
+
+// Create singleton instance
+const languageSync = new LanguageSync();
+
+export default languageSync;
diff --git a/src/renderer/src/utils/useLanguage.js b/src/renderer/src/utils/useLanguage.js
new file mode 100644
index 0000000..e7137d5
--- /dev/null
+++ b/src/renderer/src/utils/useLanguage.js
@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useState } from 'react';
+import languageSync from './languageSync';
+
+export const useLanguage = () => {
+ const { i18n } = useTranslation();
+ const [currentLanguage, setCurrentLanguage] = useState(languageSync.getCurrentLanguage());
+
+ useEffect(() => {
+ // Listen for language changes from sync utility
+ const unsubscribe = languageSync.addListener((language) => {
+ setCurrentLanguage(language);
+ });
+
+ return unsubscribe;
+ }, []);
+
+ const changeLanguage = useCallback(async (language) => {
+ const success = await languageSync.changeLanguage(language);
+ if (success) {
+ setCurrentLanguage(language);
+ }
+ return success;
+ }, []);
+
+ const getCurrentLanguage = useCallback(() => {
+ return currentLanguage;
+ }, [currentLanguage]);
+
+ const getAvailableLanguages = () => {
+ return [
+ { code: 'en', name: 'English', flag: '🇺🇸' },
+ { code: 'es', name: 'Español', flag: '🇪🇸' },
+ { code: 'pt', name: 'Português', flag: '🇧🇷' }
+ ];
+ };
+
+ return {
+ changeLanguage,
+ getCurrentLanguage,
+ getAvailableLanguages,
+ currentLanguage
+ };
+};
diff --git a/src/telemetry/index.js b/src/telemetry/index.js
new file mode 100644
index 0000000..e42b56c
--- /dev/null
+++ b/src/telemetry/index.js
@@ -0,0 +1,256 @@
+// Main telemetry module for KickTalk
+let initializeTelemetry, shutdown, MetricsHelper, TracingHelper, SpanStatusCode;
+
+try {
+ console.log('[Telemetry]: Loading telemetry modules...');
+ const instrumentation = require('./instrumentation');
+ const metrics = require('./metrics');
+ const tracing = require('./tracing');
+
+ initializeTelemetry = instrumentation.initializeTelemetry;
+ shutdown = instrumentation.shutdown;
+ MetricsHelper = metrics.MetricsHelper;
+ TracingHelper = tracing.TracingHelper;
+ SpanStatusCode = tracing.SpanStatusCode;
+
+ console.log('[Telemetry]: All modules loaded successfully');
+} catch (error) {
+ console.error('[Telemetry]: Failed to load telemetry modules:', error.message);
+ console.error('[Telemetry]: Full error:', error);
+
+ // Provide fallback implementations
+ initializeTelemetry = () => false;
+ shutdown = () => Promise.resolve();
+ MetricsHelper = {
+ startTimer: () => Date.now(),
+ endTimer: () => 0,
+ incrementWebSocketConnections: () => {},
+ decrementWebSocketConnections: () => {},
+ recordConnectionError: () => {},
+ recordReconnection: () => {},
+ recordMessageReceived: () => {},
+ recordMessageSent: () => {},
+ recordMessageSendDuration: () => {},
+ recordError: () => {},
+ recordRendererMemory: () => {},
+ recordDomNodeCount: () => {},
+ incrementOpenWindows: () => {},
+ decrementOpenWindows: () => {}
+ };
+ TracingHelper = {
+ addEvent: () => {},
+ setAttributes: () => {},
+ traceWebSocketConnection: (id, streamerId, callback) => callback(),
+ traceMessageFlow: (id, content, callback) => callback(),
+ traceKickAPICall: (endpoint, method, callback) => callback()
+ };
+ SpanStatusCode = { OK: 1, ERROR: 2 };
+}
+
+let telemetryInitialized = false;
+
+// Initialize telemetry system
+const initTelemetry = () => {
+ if (telemetryInitialized) {
+ console.log('[Telemetry]: Already initialized');
+ return true;
+ }
+
+ try {
+ const success = initializeTelemetry();
+ if (success) {
+ telemetryInitialized = true;
+ console.log('[Telemetry]: KickTalk telemetry initialized successfully');
+
+ // Prometheus metrics server is now integrated into the MeterProvider
+ console.log('[Telemetry]: Prometheus metrics available at http://localhost:9464/metrics');
+
+ // Record application start
+ KickTalkMetrics.recordApplicationStart();
+ TracingHelper.addEvent('application.start', {
+ 'app.version': require('../../package.json').version,
+ 'node.version': process.version,
+ 'electron.version': process.versions.electron
+ });
+ }
+ return success;
+ } catch (error) {
+ console.error('[Telemetry]: Failed to initialize:', error);
+ return false;
+ }
+};
+
+// Graceful shutdown
+const shutdownTelemetry = async () => {
+ if (!telemetryInitialized) return;
+
+ try {
+ // Metrics server shutdown is handled by the MeterProvider
+ await shutdown();
+ telemetryInitialized = false;
+ console.log('[Telemetry]: Shutdown complete');
+ } catch (error) {
+ console.error('[Telemetry]: Error during shutdown:', error);
+ }
+};
+
+// Check if telemetry is enabled (controlled by user settings)
+// This function will be overridden by the main process with actual settings
+let isTelemetryEnabled = () => {
+ // Default to false for privacy - main process will override this
+ return false;
+};
+
+// Extended metrics helper with application-specific methods
+const KickTalkMetrics = {
+ ...MetricsHelper,
+
+ // Application lifecycle
+ recordApplicationStart() {
+ TracingHelper.addEvent('application.lifecycle', {
+ 'lifecycle.event': 'start',
+ 'app.startup_time': Date.now()
+ });
+ },
+
+ recordApplicationShutdown() {
+ TracingHelper.addEvent('application.lifecycle', {
+ 'lifecycle.event': 'shutdown',
+ 'app.shutdown_time': Date.now()
+ });
+ },
+
+ // Chatroom operations
+ recordChatroomJoin(chatroomId, streamerId) {
+ this.incrementWebSocketConnections(chatroomId, streamerId);
+ TracingHelper.addEvent('chatroom.join', {
+ 'chatroom.id': chatroomId,
+ 'streamer.id': streamerId
+ });
+ },
+
+ recordChatroomLeave(chatroomId, streamerId) {
+ this.decrementWebSocketConnections(chatroomId, streamerId);
+ TracingHelper.addEvent('chatroom.leave', {
+ 'chatroom.id': chatroomId,
+ 'streamer.id': streamerId
+ });
+ },
+
+ // Error tracking
+ recordError(error, context = {}) {
+ const errorAttributes = {
+ 'error.name': error.name,
+ 'error.message': error.message,
+ 'error.stack': error.stack?.substring(0, 1000), // Limit stack trace size
+ ...context
+ };
+
+ TracingHelper.addEvent('error.occurred', errorAttributes);
+
+ // Categorize error types
+ const errorType = error.name || 'UnknownError';
+ if (errorType.includes('Network') || errorType.includes('Connection')) {
+ this.recordConnectionError(errorType, context.chatroomId);
+ }
+ }
+};
+
+// Extended tracing helper with application-specific methods
+const KickTalkTracing = {
+ ...TracingHelper,
+
+ // Trace complete message flow
+ traceMessageFlow(chatroomId, messageContent, callback) {
+ return this.traceMessageSend(chatroomId, messageContent, (span) => {
+ // Add message flow specific attributes
+ span.setAttributes({
+ 'message.flow': 'user_to_chat',
+ 'message.chatroom': chatroomId
+ });
+
+ return callback(span);
+ });
+ },
+
+ // Trace API calls with KickTalk specific context
+ traceKickAPICall(endpoint, method, callback) {
+ return this.traceAPIRequest(endpoint, method, (span) => {
+ span.setAttributes({
+ 'api.provider': 'kick.com',
+ 'api.client': 'kicktalk'
+ });
+
+ return callback(span);
+ });
+ },
+
+ // Trace emote loading operations
+ traceEmoteLoad(emoteProvider, emoteId, callback) {
+ return this.startActiveSpan('emote.load', (span) => {
+ span.setAttributes({
+ 'emote.provider': emoteProvider,
+ 'emote.id': emoteId,
+ 'emote.operation': 'load'
+ });
+
+ try {
+ const result = callback(span);
+
+ if (result && typeof result.then === 'function') {
+ return result
+ .then(res => {
+ span.setAttributes({
+ 'emote.load_success': true,
+ 'emote.cache_hit': res.fromCache || false
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return res;
+ })
+ .catch(error => {
+ span.setAttributes({
+ 'emote.load_success': false,
+ 'emote.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ });
+ } else {
+ span.setAttributes({
+ 'emote.load_success': true
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ span.setAttributes({
+ 'emote.load_success': false,
+ 'emote.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ }
+ });
+ }
+};
+
+module.exports = {
+ initTelemetry,
+ shutdownTelemetry,
+ isTelemetryEnabled,
+ isInitialized: () => telemetryInitialized,
+ metrics: KickTalkMetrics,
+ tracing: KickTalkTracing
+};
\ No newline at end of file
diff --git a/src/telemetry/instrumentation.js b/src/telemetry/instrumentation.js
new file mode 100644
index 0000000..d852558
--- /dev/null
+++ b/src/telemetry/instrumentation.js
@@ -0,0 +1,163 @@
+// OpenTelemetry tracing and metrics for KickTalk (Electron-compatible)
+// Based on SigNoz Electron sample: https://github.com/SigNoz/ElectronJS-otel-sample-app
+
+let tracer = null;
+let provider = null;
+let metricsProvider = null;
+
+try {
+ // Try to import from different packages - some versions have different locations
+ let BasicTracerProvider, SimpleSpanProcessor;
+
+ try {
+ ({ BasicTracerProvider } = require('@opentelemetry/sdk-trace-base'));
+ ({ SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base'));
+ } catch (sdkError) {
+ console.log('[OTEL]: Trying alternative SDK imports...');
+ ({ BasicTracerProvider } = require('@opentelemetry/sdk-trace-node'));
+ ({ SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-node'));
+ }
+
+ const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
+ const { trace } = require('@opentelemetry/api');
+ const pkg = require('../../package.json');
+
+ const isDev = process.env.NODE_ENV === 'development';
+
+ // Create a tracer provider without resource for Electron compatibility
+ provider = new BasicTracerProvider();
+
+ // Configure the OTLP exporter
+ const exporter = new OTLPTraceExporter({
+ url: 'http://localhost:4318/v1/traces',
+ headers: {
+ 'X-Custom-Header': 'kicktalk-telemetry'
+ }
+ });
+
+ // Add a simple span processor - check if method exists
+ if (typeof provider.addSpanProcessor === 'function') {
+ provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
+ console.log('[OTEL]: addSpanProcessor method available, using standard approach');
+ } else {
+ console.log('[OTEL]: addSpanProcessor method not available, trying alternative');
+ }
+
+ // Register the provider (only once)
+ if (typeof provider.register === 'function') {
+ provider.register();
+ console.log('[OTEL]: Provider registered successfully');
+ } else {
+ console.log('[OTEL]: Provider register method not available');
+ }
+
+ // Get a tracer
+ tracer = trace.getTracer('kicktalk', pkg.version);
+
+ console.log('[OTEL]: Manual instrumentation tracer initialized');
+
+ // Initialize metrics provider
+ try {
+ const { MeterProvider } = require('@opentelemetry/sdk-metrics');
+ const { OTLPMetricExporter } = require('@opentelemetry/exporter-metrics-otlp-http');
+ const { PeriodicExportingMetricReader } = require('@opentelemetry/sdk-metrics');
+ const { PrometheusExporter } = require('@opentelemetry/exporter-prometheus');
+ const { metrics } = require('@opentelemetry/api');
+ const http = require('http');
+
+ // Create Prometheus exporter
+ const prometheusExporter = new PrometheusExporter({
+ port: 9464,
+ endpoint: '/metrics',
+ }, () => {
+ console.log('[OTEL]: Prometheus metrics server started on http://localhost:9464/metrics');
+ });
+
+ // Create readers array
+ const readers = [
+ // OTLP exporter for external systems
+ new PeriodicExportingMetricReader({
+ exporter: new OTLPMetricExporter({
+ url: 'http://localhost:4318/v1/metrics',
+ headers: {
+ 'X-Custom-Header': 'kicktalk-telemetry'
+ }
+ }),
+ exportIntervalMillis: 10000, // Export every 10 seconds
+ }),
+ // Prometheus exporter for Grafana
+ prometheusExporter
+ ];
+
+ // Create metrics provider
+ metricsProvider = new MeterProvider({
+ readers: readers,
+ });
+
+ // Register the metrics provider
+ metrics.setGlobalMeterProvider(metricsProvider);
+ console.log('[OTEL]: Metrics provider initialized successfully with Prometheus and OTLP exporters');
+ } catch (metricsError) {
+ console.warn('[OTEL]: Failed to initialize metrics provider:', metricsError.message);
+ }
+} catch (error) {
+ console.error('[OTEL]: Failed to initialize tracer:', error.message);
+ // Create a no-op tracer
+ tracer = {
+ startSpan: (name) => ({
+ setAttributes: () => {},
+ addEvent: () => {},
+ recordException: () => {},
+ setStatus: () => {},
+ end: () => {}
+ })
+ };
+}
+
+// Graceful shutdown
+const shutdown = async () => {
+ const shutdownPromises = [];
+
+ if (provider) {
+ shutdownPromises.push(provider.shutdown());
+ }
+
+ if (metricsProvider) {
+ shutdownPromises.push(metricsProvider.shutdown());
+ }
+
+ if (shutdownPromises.length === 0) return;
+
+ try {
+ console.log('[OTEL]: Shutting down telemetry...');
+ await Promise.all(shutdownPromises);
+ console.log('[OTEL]: Telemetry shut down successfully');
+ } catch (error) {
+ console.error('[OTEL]: Error shutting down telemetry:', error);
+ }
+};
+
+// Initialize telemetry (already done above, just return status)
+const initializeTelemetry = () => {
+ const isInitialized = tracer !== null && provider !== null;
+
+ if (isInitialized) {
+ // Register shutdown handlers
+ process.on('SIGTERM', shutdown);
+ process.on('SIGINT', shutdown);
+ process.on('exit', shutdown);
+
+ console.log('[OTEL]: Telemetry ready for manual instrumentation');
+ return true;
+ }
+
+ console.log('[OTEL]: Using no-op tracer (telemetry disabled)');
+ return false;
+};
+
+module.exports = {
+ tracer,
+ provider,
+ initializeTelemetry,
+ shutdown
+};
\ No newline at end of file
diff --git a/src/telemetry/metrics.js b/src/telemetry/metrics.js
new file mode 100644
index 0000000..c4468c5
--- /dev/null
+++ b/src/telemetry/metrics.js
@@ -0,0 +1,333 @@
+// KickTalk metrics implementation
+const { metrics } = require('@opentelemetry/api');
+
+// Get the meter for KickTalk
+const meter = metrics.getMeter('kicktalk', require('../../package.json').version);
+
+// Connection Metrics - Track active connections in a Map for accurate counting
+const activeConnections = new Map();
+
+const websocketConnections = meter.createObservableGauge('kicktalk_websocket_connections_active', {
+ description: 'Number of active WebSocket connections',
+ unit: '1'
+});
+
+const websocketReconnections = meter.createCounter('kicktalk_websocket_reconnections_total', {
+ description: 'Total number of WebSocket reconnection attempts',
+ unit: '1'
+});
+
+const connectionErrors = meter.createCounter('kicktalk_connection_errors_total', {
+ description: 'Total number of connection errors',
+ unit: '1'
+});
+
+// Message Metrics
+const messagesSent = meter.createCounter('kicktalk_messages_sent_total', {
+ description: 'Total number of messages sent by user',
+ unit: '1'
+});
+
+const messagesReceived = meter.createCounter('kicktalk_messages_received_total', {
+ description: 'Total number of messages received from chat',
+ unit: '1'
+});
+
+const messageSendDuration = meter.createHistogram('kicktalk_message_send_duration_seconds', {
+ description: 'Time taken to send a message',
+ unit: 's',
+ boundaries: [0.01, 0.05, 0.1, 0.5, 1, 2, 5]
+});
+
+// API Metrics
+const apiRequestDuration = meter.createHistogram('kicktalk_api_request_duration_seconds', {
+ description: 'Time taken for API requests',
+ unit: 's',
+ boundaries: [0.1, 0.5, 1, 2, 5, 10, 30]
+});
+
+const apiRequests = meter.createCounter('kicktalk_api_requests_total', {
+ description: 'Total number of API requests',
+ unit: '1'
+});
+
+// Resource Metrics (using observableGauges for real-time values)
+const memoryUsage = meter.createObservableGauge('kicktalk_memory_usage_bytes', {
+ description: 'Application memory usage in bytes',
+ unit: 'By'
+});
+
+const cpuUsage = meter.createObservableGauge('kicktalk_cpu_usage_percent', {
+ description: 'CPU usage percentage',
+ unit: '%'
+});
+
+const openHandles = meter.createObservableGauge('kicktalk_open_handles_total', {
+ description: 'Number of open file/socket handles',
+ unit: '1'
+});
+
+const rendererMemoryUsage = meter.createObservableGauge('kicktalk_renderer_memory_usage_bytes', {
+ description: 'Renderer process memory usage in bytes',
+ unit: 'By'
+});
+
+const domNodeCount = meter.createObservableGauge('kicktalk_dom_node_count', {
+ description: 'Number of DOM nodes in the renderer process',
+ unit: '1'
+});
+
+// Storage for current values
+let currentRendererMemory = {
+ jsHeapUsedSize: 0,
+ jsHeapTotalSize: 0
+};
+let currentDomNodeCount = 0;
+
+const openWindows = meter.createUpDownCounter('kicktalk_open_windows', {
+ description: 'Number of open windows',
+ unit: '1'
+});
+
+const upStatus = meter.createObservableGauge('kicktalk_up', {
+ description: 'Application status (1=up, 0=down)',
+ unit: '1'
+});
+
+const gcDuration = meter.createHistogram('kicktalk_gc_duration_seconds', {
+ description: 'Garbage collection duration',
+ unit: 's'
+});
+
+// Callback for resource metrics
+memoryUsage.addCallback((observableResult) => {
+ const memUsage = process.memoryUsage();
+ observableResult.observe(memUsage.heapUsed, {
+ type: 'heap_used'
+ });
+ observableResult.observe(memUsage.heapTotal, {
+ type: 'heap_total'
+ });
+ observableResult.observe(memUsage.rss, {
+ type: 'rss'
+ });
+ observableResult.observe(memUsage.external, {
+ type: 'external'
+ });
+});
+
+cpuUsage.addCallback((observableResult) => {
+ const cpuUsageValue = process.cpuUsage();
+ const totalUsage = (cpuUsageValue.user + cpuUsageValue.system) / 1000000; // Convert to seconds
+ observableResult.observe(totalUsage, {
+ type: 'total'
+ });
+});
+
+// Handle count approximation using process._getActiveHandles (Node.js specific)
+openHandles.addCallback((observableResult) => {
+ try {
+ // This is a Node.js internal API, use with caution
+ const handles = process._getActiveHandles ? process._getActiveHandles().length : 0;
+ const requests = process._getActiveRequests ? process._getActiveRequests().length : 0;
+
+ observableResult.observe(handles + requests, {
+ type: 'total'
+ });
+ } catch (error) {
+ // Fallback if internal APIs are not available
+ observableResult.observe(0);
+ }
+});
+
+// Application uptime status
+upStatus.addCallback((observableResult) => {
+ // Application is up if this callback is running
+ observableResult.observe(1);
+});
+
+// Renderer memory usage callback
+rendererMemoryUsage.addCallback((observableResult) => {
+ observableResult.observe(currentRendererMemory.jsHeapUsedSize, { type: 'js_heap_used' });
+ observableResult.observe(currentRendererMemory.jsHeapTotalSize, { type: 'js_heap_total' });
+});
+
+// DOM node count callback
+domNodeCount.addCallback((observableResult) => {
+ observableResult.observe(currentDomNodeCount);
+});
+
+// Active WebSocket connections callback
+websocketConnections.addCallback((observableResult) => {
+ // Group connections by unique attribute sets and count them
+ const connectionCounts = new Map();
+
+ for (const [connectionKey, attributes] of activeConnections) {
+ const key = JSON.stringify(attributes);
+ connectionCounts.set(key, (connectionCounts.get(key) || 0) + 1);
+ }
+
+ for (const [attributesJson, count] of connectionCounts) {
+ const attributes = JSON.parse(attributesJson);
+ observableResult.observe(count, attributes);
+ }
+});
+
+// GC monitoring setup
+try {
+ const v8 = require('v8');
+ const performanceObserver = require('perf_hooks').PerformanceObserver;
+
+ // Monitor GC events using Performance Observer
+ const gcObserver = new performanceObserver((list) => {
+ const entries = list.getEntries();
+ entries.forEach((entry) => {
+ if (entry.entryType === 'gc') {
+ gcDuration.record(entry.duration / 1000, {
+ kind: entry.detail?.kind || 'unknown'
+ });
+ }
+ });
+ });
+
+ gcObserver.observe({ entryTypes: ['gc'] });
+} catch (error) {
+ // GC monitoring not available, continue without it
+ console.warn('GC monitoring unavailable:', error.message);
+}
+
+// Metrics helper functions
+const MetricsHelper = {
+ // Connection metrics
+ incrementWebSocketConnections(chatroomId, streamerId, streamerName = null) {
+ const attributes = {
+ chatroom_id: chatroomId,
+ streamer_id: streamerId
+ };
+ if (streamerName) attributes.streamer_name = streamerName;
+
+ const connectionKey = `${chatroomId}_${streamerId}`;
+ activeConnections.set(connectionKey, attributes);
+ console.log(`[Metrics] WebSocket INCREMENT for ${streamerName || 'unknown'} (${chatroomId}) - Active: ${activeConnections.size}`);
+ },
+
+ decrementWebSocketConnections(chatroomId, streamerId, streamerName = null) {
+ const connectionKey = `${chatroomId}_${streamerId}`;
+ const removed = activeConnections.delete(connectionKey);
+ console.log(`[Metrics] WebSocket DECREMENT for ${streamerName || 'unknown'} (${chatroomId}) - Removed: ${removed} - Active: ${activeConnections.size}`);
+ },
+
+ recordReconnection(chatroomId, reason = 'unknown') {
+ websocketReconnections.add(1, {
+ chatroom_id: chatroomId,
+ reason
+ });
+ },
+
+ recordConnectionError(errorType, chatroomId = null) {
+ const attributes = { error_type: errorType };
+ if (chatroomId) attributes.chatroom_id = chatroomId;
+
+ connectionErrors.add(1, attributes);
+ },
+
+ // Message metrics
+ recordMessageSent(chatroomId, messageType = 'regular', streamerName = null) {
+ const attributes = {
+ chatroom_id: chatroomId,
+ message_type: messageType
+ };
+ if (streamerName) attributes.streamer_name = streamerName;
+
+ messagesSent.add(1, attributes);
+ },
+
+ recordMessageReceived(chatroomId, messageType = 'regular', senderId = null, streamerName = null) {
+ const attributes = {
+ chatroom_id: chatroomId,
+ message_type: messageType
+ };
+ if (senderId) attributes.sender_id = senderId;
+ if (streamerName) attributes.streamer_name = streamerName;
+
+ messagesReceived.add(1, attributes);
+ },
+
+ recordMessageSendDuration(duration, chatroomId, success = true) {
+ messageSendDuration.record(duration, {
+ chatroom_id: chatroomId,
+ success: success.toString()
+ });
+ },
+
+ // API metrics
+ recordAPIRequest(endpoint, method, statusCode, duration) {
+ apiRequests.add(1, {
+ endpoint,
+ method,
+ status_code: statusCode.toString()
+ });
+
+ apiRequestDuration.record(duration, {
+ endpoint,
+ method,
+ status_code: statusCode.toString()
+ });
+ },
+
+ // Utility function to time operations
+ startTimer() {
+ return process.hrtime.bigint();
+ },
+
+ endTimer(startTime) {
+ const endTime = process.hrtime.bigint();
+ return Number(endTime - startTime) / 1e9; // Convert nanoseconds to seconds
+ },
+
+ recordGCDuration(duration, kind) {
+ gcDuration.record(duration, {
+ kind
+ });
+ },
+
+ recordRendererMemory(memory) {
+ currentRendererMemory.jsHeapUsedSize = memory.jsHeapUsedSize || 0;
+ currentRendererMemory.jsHeapTotalSize = memory.jsHeapTotalSize || 0;
+ },
+
+ recordDomNodeCount(count) {
+ currentDomNodeCount = count || 0;
+ },
+
+ incrementOpenWindows() {
+ openWindows.add(1);
+ },
+
+ decrementOpenWindows() {
+ openWindows.add(-1);
+ }
+};
+
+module.exports = {
+ meter,
+ metrics: {
+ websocketConnections,
+ websocketReconnections,
+ connectionErrors,
+ messagesSent,
+ messagesReceived,
+ messageSendDuration,
+ apiRequestDuration,
+ apiRequests,
+ memoryUsage,
+ cpuUsage,
+ openHandles,
+ gcDuration,
+ rendererMemoryUsage,
+ domNodeCount,
+ openWindows,
+ upStatus
+ },
+ MetricsHelper
+};
\ No newline at end of file
diff --git a/src/telemetry/prometheus-server.js b/src/telemetry/prometheus-server.js
new file mode 100644
index 0000000..2fb79d4
--- /dev/null
+++ b/src/telemetry/prometheus-server.js
@@ -0,0 +1,131 @@
+// Prometheus metrics HTTP server for KickTalk
+const http = require('http');
+
+let metricsServer = null;
+let isServerRunning = false;
+
+// Start Prometheus metrics server
+const startMetricsServer = (port = 9464) => {
+ if (isServerRunning) {
+ console.log('[Metrics]: Server already running');
+ return;
+ }
+
+ try {
+ // Try to use PrometheusRegistry from OpenTelemetry
+ let PrometheusRegistry;
+ try {
+ const { PrometheusRegistry: PR } = require('@opentelemetry/exporter-prometheus');
+ PrometheusRegistry = PR;
+ } catch (error) {
+ console.warn('[Metrics]: @opentelemetry/exporter-prometheus not available, using fallback');
+ PrometheusRegistry = null;
+ }
+
+ if (PrometheusRegistry) {
+ // Create the registry with proper configuration
+ const registry = new PrometheusRegistry({
+ port: port,
+ endpoint: '/metrics',
+ });
+
+ // Start the registry (this creates the HTTP server internally)
+ registry.startServer().then(() => {
+ isServerRunning = true;
+ console.log(`[Metrics]: Prometheus server started on http://localhost:${port}/metrics`);
+ }).catch((error) => {
+ console.error('[Metrics]: Failed to start Prometheus server:', error.message);
+ // Fall through to fallback implementation
+ throw error;
+ });
+
+ return true;
+ } else {
+ throw new Error('PrometheusRegistry not available');
+ }
+ } catch (error) {
+ console.error('[Metrics]: Error setting up Prometheus server:', error.message);
+
+ // Fallback: create a simple HTTP server that returns basic metrics
+ try {
+ const { metrics } = require('@opentelemetry/api');
+
+ metricsServer = http.createServer((req, res) => {
+ if (req.url === '/metrics' && req.method === 'GET') {
+ res.writeHead(200, {
+ 'Content-Type': 'text/plain; version=0.0.4; charset=utf-8'
+ });
+
+ // Basic health metric
+ const uptime = process.uptime();
+ const memUsage = process.memoryUsage();
+
+ let output = '';
+ output += '# HELP kicktalk_up Application is running\n';
+ output += '# TYPE kicktalk_up gauge\n';
+ output += 'kicktalk_up 1\n';
+
+ output += '# HELP kicktalk_uptime_seconds Application uptime in seconds\n';
+ output += '# TYPE kicktalk_uptime_seconds counter\n';
+ output += `kicktalk_uptime_seconds ${uptime}\n`;
+
+ output += '# HELP kicktalk_memory_heap_used_bytes Memory heap used in bytes\n';
+ output += '# TYPE kicktalk_memory_heap_used_bytes gauge\n';
+ output += `kicktalk_memory_heap_used_bytes ${memUsage.heapUsed}\n`;
+
+ output += '# HELP kicktalk_memory_heap_total_bytes Memory heap total in bytes\n';
+ output += '# TYPE kicktalk_memory_heap_total_bytes gauge\n';
+ output += `kicktalk_memory_heap_total_bytes ${memUsage.heapTotal}\n`;
+
+ res.end(output);
+ } else {
+ res.writeHead(404, { 'Content-Type': 'text/plain' });
+ res.end('404 Not Found - Try /metrics\n');
+ }
+ });
+
+ metricsServer.listen(port, '0.0.0.0', () => {
+ isServerRunning = true;
+ console.log(`[Metrics]: Fallback metrics server started on http://0.0.0.0:${port}/metrics`);
+ });
+
+ metricsServer.on('error', (error) => {
+ console.error('[Metrics]: Metrics server error:', error.message);
+ isServerRunning = false;
+ });
+
+ return true;
+ } catch (fallbackError) {
+ console.error('[Metrics]: Failed to create fallback metrics server:', fallbackError.message);
+ return false;
+ }
+ }
+};
+
+// Stop Prometheus metrics server
+const stopMetricsServer = () => {
+ if (!isServerRunning) {
+ return;
+ }
+
+ try {
+ if (metricsServer) {
+ metricsServer.close(() => {
+ console.log('[Metrics]: Metrics server stopped');
+ isServerRunning = false;
+ metricsServer = null;
+ });
+ } else {
+ console.log('[Metrics]: Metrics server stopped');
+ isServerRunning = false;
+ }
+ } catch (error) {
+ console.error('[Metrics]: Error stopping metrics server:', error.message);
+ }
+};
+
+module.exports = {
+ startMetricsServer,
+ stopMetricsServer,
+ isRunning: () => isServerRunning
+};
\ No newline at end of file
diff --git a/src/telemetry/tracing.js b/src/telemetry/tracing.js
new file mode 100644
index 0000000..13aa896
--- /dev/null
+++ b/src/telemetry/tracing.js
@@ -0,0 +1,343 @@
+// KickTalk distributed tracing implementation - Manual instrumentation
+const { tracer } = require('./instrumentation');
+
+// Import OpenTelemetry API with fallbacks
+let trace, context, SpanStatusCode, SpanKind;
+try {
+ ({ trace, context, SpanStatusCode, SpanKind } = require('@opentelemetry/api'));
+} catch (error) {
+ // Fallback for when API is not available
+ SpanStatusCode = { OK: 1, ERROR: 2 };
+ SpanKind = { INTERNAL: 0, CLIENT: 3, PRODUCER: 5 };
+ trace = { getActiveSpan: () => null };
+ context = {};
+}
+
+// Tracing helper functions
+const TracingHelper = {
+ // Start a new span with common KickTalk attributes
+ startSpan(name, options = {}) {
+ const span = tracer.startSpan(name, {
+ kind: options.kind || SpanKind.INTERNAL,
+ attributes: {
+ 'service.name': 'kicktalk',
+ 'service.version': require('../../package.json').version,
+ ...options.attributes
+ }
+ });
+
+ return span;
+ },
+
+ // Start a span with automatic context propagation
+ startActiveSpan(name, callback, options = {}) {
+ // Use manual span management since Electron doesn't support auto-context
+ const span = this.startSpan(name, options);
+ try {
+ const result = callback(span);
+ if (result && typeof result.then === 'function') {
+ return result.finally(() => span.end());
+ } else {
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ span.recordException(error);
+ span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
+ span.end();
+ throw error;
+ }
+ },
+
+ // WebSocket connection tracing
+ traceWebSocketConnection(chatroomId, streamerId, callback) {
+ return this.startActiveSpan('websocket.connect', (span) => {
+ span.setAttributes({
+ 'websocket.chatroom_id': chatroomId,
+ 'websocket.streamer_id': streamerId,
+ 'websocket.operation': 'connect'
+ });
+
+ try {
+ const result = callback(span);
+
+ // Handle both sync and async results
+ if (result && typeof result.then === 'function') {
+ return result
+ .then(res => {
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return res;
+ })
+ .catch(error => {
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ });
+ } else {
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ }
+ }, {
+ kind: SpanKind.CLIENT,
+ attributes: {
+ 'network.protocol.name': 'websocket'
+ }
+ });
+ },
+
+ // Message sending tracing
+ traceMessageSend(chatroomId, messageContent, callback) {
+ return this.startActiveSpan('message.send', (span) => {
+ span.setAttributes({
+ 'message.chatroom_id': chatroomId,
+ 'message.length': messageContent.length,
+ 'message.type': 'user_message',
+ 'messaging.operation': 'send'
+ });
+
+ // Don't include actual message content for privacy
+ const startTime = Date.now();
+
+ try {
+ const result = callback(span);
+
+ if (result && typeof result.then === 'function') {
+ return result
+ .then(res => {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'message.send_duration_ms': duration,
+ 'message.success': true
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return res;
+ })
+ .catch(error => {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'message.send_duration_ms': duration,
+ 'message.success': false,
+ 'message.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ });
+ } else {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'message.send_duration_ms': duration,
+ 'message.success': true
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'message.send_duration_ms': duration,
+ 'message.success': false,
+ 'message.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ }
+ }, {
+ kind: SpanKind.PRODUCER
+ });
+ },
+
+ // API request tracing
+ traceAPIRequest(endpoint, method, callback) {
+ return this.startActiveSpan('api.request', (span) => {
+ span.setAttributes({
+ 'http.method': method,
+ 'http.url': endpoint,
+ 'http.request.method': method,
+ 'url.full': endpoint
+ });
+
+ const startTime = Date.now();
+
+ try {
+ const result = callback(span);
+
+ if (result && typeof result.then === 'function') {
+ return result
+ .then(res => {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'http.response.status_code': res.status || 200,
+ 'http.request.duration_ms': duration
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return res;
+ })
+ .catch(error => {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'http.response.status_code': error.status || error.response?.status || 500,
+ 'http.request.duration_ms': duration,
+ 'http.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ });
+ } else {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'http.response.status_code': 200,
+ 'http.request.duration_ms': duration
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ const duration = Date.now() - startTime;
+ span.setAttributes({
+ 'http.response.status_code': error.status || error.response?.status || 500,
+ 'http.request.duration_ms': duration,
+ 'http.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ }
+ }, {
+ kind: SpanKind.CLIENT
+ });
+ },
+
+ // User action tracing (e.g., joining chatroom)
+ traceUserAction(action, chatroomId, callback) {
+ return this.startActiveSpan(`user.${action}`, (span) => {
+ span.setAttributes({
+ 'user.action': action,
+ 'user.chatroom_id': chatroomId,
+ 'user.operation': action
+ });
+
+ try {
+ const result = callback(span);
+
+ if (result && typeof result.then === 'function') {
+ return result
+ .then(res => {
+ span.setAttributes({
+ 'user.action_success': true
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return res;
+ })
+ .catch(error => {
+ span.setAttributes({
+ 'user.action_success': false,
+ 'user.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ });
+ } else {
+ span.setAttributes({
+ 'user.action_success': true
+ });
+ span.setStatus({ code: SpanStatusCode.OK });
+ span.end();
+ return result;
+ }
+ } catch (error) {
+ span.setAttributes({
+ 'user.action_success': false,
+ 'user.error': error.name
+ });
+ span.recordException(error);
+ span.setStatus({
+ code: SpanStatusCode.ERROR,
+ message: error.message
+ });
+ span.end();
+ throw error;
+ }
+ }, {
+ kind: SpanKind.INTERNAL
+ });
+ },
+
+ // Get current trace context for correlation
+ getCurrentTraceId() {
+ const activeSpan = trace.getActiveSpan();
+ if (activeSpan) {
+ const spanContext = activeSpan.spanContext();
+ return spanContext.traceId;
+ }
+ return null;
+ },
+
+ // Add event to current span
+ addEvent(name, attributes = {}) {
+ const activeSpan = trace.getActiveSpan();
+ if (activeSpan) {
+ activeSpan.addEvent(name, attributes);
+ }
+ },
+
+ // Set attribute on current span
+ setAttributes(attributes) {
+ const activeSpan = trace.getActiveSpan();
+ if (activeSpan) {
+ activeSpan.setAttributes(attributes);
+ }
+ }
+};
+
+module.exports = {
+ tracer,
+ TracingHelper,
+ trace,
+ context,
+ SpanStatusCode,
+ SpanKind
+};
\ No newline at end of file
diff --git a/utils/config.js b/utils/config.js
index de93e8c..cd8feb4 100644
--- a/utils/config.js
+++ b/utils/config.js
@@ -20,6 +20,10 @@ const schema = {
type: "boolean",
default: false,
},
+ compactChatroomsList: {
+ type: "boolean",
+ default: false,
+ },
showTabImages: {
type: "boolean",
default: true,
@@ -34,6 +38,7 @@ const schema = {
alwaysOnTop: false,
dialogAlwaysOnTop: false,
wrapChatroomsList: false,
+ compactChatroomsList: false,
showTabImages: true,
timestampFormat: "disabled",
},
diff --git a/utils/services/connectionManager.js b/utils/services/connectionManager.js
new file mode 100644
index 0000000..3930320
--- /dev/null
+++ b/utils/services/connectionManager.js
@@ -0,0 +1,341 @@
+import SharedKickPusher from "./kick/sharedKickPusher.js";
+import SharedStvWebSocket from "./seventv/sharedStvWebSocket.js";
+
+class ConnectionManager {
+ constructor() {
+ this.kickPusher = new SharedKickPusher();
+ this.stvWebSocket = new SharedStvWebSocket();
+ this.initializationInProgress = false;
+ this.emoteCache = new Map(); // Cache for global/common emotes
+ this.globalStvEmotesCache = null; // Cache for global 7TV emotes
+
+ // Callbacks to avoid circular imports
+ this.storeCallbacks = null;
+
+ // Connection configuration
+ this.config = {
+ staggerDelay: 200, // ms between batches
+ batchSize: 3, // chatrooms per batch
+ maxConcurrentEmoteFetches: 5,
+ };
+ }
+
+ async initializeConnections(chatrooms, eventHandlers = {}, storeCallbacks = {}) {
+ if (this.initializationInProgress) {
+ console.log("[ConnectionManager] Initialization already in progress");
+ return;
+ }
+
+ this.initializationInProgress = true;
+ this.storeCallbacks = storeCallbacks;
+ console.log(`[ConnectionManager] Starting optimized initialization for ${chatrooms.length} chatrooms`);
+
+ try {
+ // Set up event handlers
+ this.setupEventHandlers(eventHandlers);
+
+ // Start shared connections
+ await this.startSharedConnections();
+
+ // Initialize chatrooms in staggered batches
+ await this.initializeChatroomsInBatches(chatrooms);
+
+ // Batch fetch emotes
+ await this.batchFetchEmotes(chatrooms);
+
+ console.log("[ConnectionManager] Initialization completed successfully");
+ } catch (error) {
+ console.error("[ConnectionManager] Error during initialization:", error);
+ throw error;
+ } finally {
+ this.initializationInProgress = false;
+ }
+ }
+
+ setupEventHandlers(handlers) {
+ // Set up KickPusher event handlers
+ if (handlers.onKickMessage) {
+ this.kickPusher.addEventListener("message", handlers.onKickMessage);
+ }
+ if (handlers.onKickChannel) {
+ this.kickPusher.addEventListener("channel", handlers.onKickChannel);
+ }
+ if (handlers.onKickConnection) {
+ this.kickPusher.addEventListener("connection", handlers.onKickConnection);
+ }
+ if (handlers.onKickSubscriptionSuccess) {
+ this.kickPusher.addEventListener("subscription_success", handlers.onKickSubscriptionSuccess);
+ }
+
+ // Set up 7TV event handlers
+ if (handlers.onStvMessage) {
+ this.stvWebSocket.addEventListener("message", handlers.onStvMessage);
+ }
+ if (handlers.onStvOpen) {
+ this.stvWebSocket.addEventListener("open", handlers.onStvOpen);
+ }
+ if (handlers.onStvConnection) {
+ this.stvWebSocket.addEventListener("connection", handlers.onStvConnection);
+ }
+ }
+
+ async startSharedConnections() {
+ console.log("[ConnectionManager] Starting shared connections...");
+
+ // Start both connections in parallel
+ const kickPromise = new Promise((resolve) => {
+ const onConnection = (event) => {
+ if (event.detail.content === "connection-success") {
+ this.kickPusher.removeEventListener("connection", onConnection);
+ resolve();
+ }
+ };
+ this.kickPusher.addEventListener("connection", onConnection);
+ this.kickPusher.connect();
+ });
+
+ const stvPromise = new Promise((resolve) => {
+ const onConnection = (event) => {
+ if (event.detail.content === "connection-success") {
+ this.stvWebSocket.removeEventListener("connection", onConnection);
+ resolve();
+ }
+ };
+ this.stvWebSocket.addEventListener("connection", onConnection);
+ this.stvWebSocket.connect();
+ });
+
+ // Wait for both connections with timeout
+ await Promise.race([
+ Promise.all([kickPromise, stvPromise]),
+ new Promise((_, reject) => setTimeout(() => reject(new Error("Connection timeout")), 10000)),
+ ]);
+
+ console.log("[ConnectionManager] Shared connections established");
+ }
+
+ async initializeChatroomsInBatches(chatrooms) {
+ console.log(`[ConnectionManager] Initializing ${chatrooms.length} chatrooms in batches of ${this.config.batchSize}`);
+
+ // Sort chatrooms by priority (you can customize this logic)
+ const prioritizedChatrooms = this.prioritizeChatrooms(chatrooms);
+
+ // Split into batches
+ const batches = this.chunkArray(prioritizedChatrooms, this.config.batchSize);
+
+ for (let i = 0; i < batches.length; i++) {
+ const batch = batches[i];
+ console.log(`[ConnectionManager] Processing batch ${i + 1}/${batches.length} (${batch.length} chatrooms)`);
+
+ // Process batch in parallel
+ const batchPromises = batch.map((chatroom) => this.addChatroom(chatroom));
+ await Promise.allSettled(batchPromises);
+
+ // Add delay between batches (except for the last one)
+ if (i < batches.length - 1) {
+ await this.delay(this.config.staggerDelay);
+ }
+ }
+
+ console.log("[ConnectionManager] All chatrooms initialized");
+ }
+
+ async addChatroom(chatroom) {
+ try {
+ // Add to KickPusher
+ this.kickPusher.addChatroom(chatroom.id, chatroom.streamerData.id, chatroom);
+
+ // Add to 7TV WebSocket
+ const stvId = chatroom.streamerData?.user_id || "0";
+ const stvEmoteSetId = chatroom.channel7TVEmotes?.[0]?.id || "0";
+
+ this.stvWebSocket.addChatroom(chatroom.id, chatroom.streamerData.user_id, stvId, stvEmoteSetId);
+
+ // Fetch initial messages for this chatroom
+ await this.fetchInitialMessages(chatroom);
+
+ // Fetch initial chatroom info (including livestream status)
+ await this.fetchInitialChatroomInfo(chatroom);
+
+ console.log(`[ConnectionManager] Added chatroom ${chatroom.id} (${chatroom.streamerData?.user?.username})`);
+ } catch (error) {
+ console.error(`[ConnectionManager] Error adding chatroom ${chatroom.id}:`, error);
+ }
+ }
+
+ async removeChatroom(chatroomId) {
+ this.kickPusher.removeChatroom(chatroomId);
+ this.stvWebSocket.removeChatroom(chatroomId);
+ console.log(`[ConnectionManager] Removed chatroom ${chatroomId}`);
+ }
+
+ async batchFetchEmotes(chatrooms) {
+ console.log("[ConnectionManager] Starting batch emote fetching...");
+
+ // Fetch global 7TV emotes first (cached)
+ await this.fetchGlobalStvEmotes();
+
+ // Batch fetch channel-specific emotes
+ const emoteFetchPromises = chatrooms.map((chatroom) => this.fetchChatroomEmotes(chatroom));
+
+ // Process in batches to avoid overwhelming the APIs
+ const emoteBatches = this.chunkArray(emoteFetchPromises, this.config.maxConcurrentEmoteFetches);
+
+ for (const batch of emoteBatches) {
+ await Promise.allSettled(batch);
+ await this.delay(100); // Small delay between batches
+ }
+
+ console.log("[ConnectionManager] Batch emote fetching completed");
+ }
+
+ async fetchGlobalStvEmotes() {
+ if (this.globalStvEmotesCache) {
+ console.log("[ConnectionManager] Using cached global 7TV emotes");
+ return this.globalStvEmotesCache;
+ }
+
+ try {
+ // Fetch global 7TV emotes (implementation would depend on your existing API)
+ // This is a placeholder - you'd implement the actual API call
+ console.log("[ConnectionManager] Fetching global 7TV emotes...");
+ // const globalEmotes = await window.app.seventv.getGlobalEmotes();
+ // this.globalStvEmotesCache = globalEmotes;
+ console.log("[ConnectionManager] Global 7TV emotes cached");
+ } catch (error) {
+ console.error("[ConnectionManager] Error fetching global 7TV emotes:", error);
+ }
+ }
+
+ async fetchChatroomEmotes(chatroom) {
+ const cacheKey = `${chatroom.streamerData?.slug}`;
+
+ if (this.emoteCache.has(cacheKey)) {
+ console.log(`[ConnectionManager] Using cached emotes for ${chatroom.streamerData?.user?.username}`);
+ return this.emoteCache.get(cacheKey);
+ }
+
+ try {
+ console.log(`[ConnectionManager] Fetching emotes for ${chatroom.streamerData?.user?.username}`);
+
+ // Fetch Kick emotes
+ const kickEmotes = await window.app.kick.getEmotes(chatroom.streamerData?.slug);
+
+ // Cache the result
+ this.emoteCache.set(cacheKey, kickEmotes);
+
+ return kickEmotes;
+ } catch (error) {
+ console.error(`[ConnectionManager] Error fetching emotes for ${chatroom.streamerData?.user?.username}:`, error);
+ return null;
+ }
+ }
+
+ prioritizeChatrooms(chatrooms) {
+ // Sort chatrooms by priority - you can customize this logic
+ return chatrooms.sort((a, b) => {
+ // Prioritize live streamers
+ if (a.isStreamerLive && !b.isStreamerLive) return -1;
+ if (!a.isStreamerLive && b.isStreamerLive) return 1;
+
+ // Then by last activity or other criteria
+ return 0;
+ });
+ }
+
+ chunkArray(array, size) {
+ const chunks = [];
+ for (let i = 0; i < array.length; i += size) {
+ chunks.push(array.slice(i, i + size));
+ }
+ return chunks;
+ }
+
+ delay(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+ }
+
+ // Status methods
+ getConnectionStatus() {
+ return {
+ kick: {
+ state: this.kickPusher.getConnectionState(),
+ chatrooms: this.kickPusher.getChatroomCount(),
+ channels: this.kickPusher.getSubscribedChannelCount(),
+ },
+ stv: {
+ state: this.stvWebSocket.getConnectionState(),
+ chatrooms: this.stvWebSocket.getChatroomCount(),
+ events: this.stvWebSocket.getSubscribedEventCount(),
+ },
+ emoteCache: {
+ size: this.emoteCache.size,
+ globalCached: !!this.globalStvEmotesCache,
+ },
+ };
+ }
+
+ // Fetch initial messages for a chatroom
+ async fetchInitialMessages(chatroom) {
+ try {
+ const response = await window.app.kick.getInitialChatroomMessages(chatroom.streamerData.id);
+
+ if (!response?.data?.data) {
+ console.log(`[ConnectionManager] No initial messages data for chatroom ${chatroom.id}`);
+ return;
+ }
+
+ const data = response.data.data;
+
+ // Use callbacks to avoid circular imports
+ if (this.storeCallbacks) {
+ // Handle initial pinned message
+ if (data?.pinned_message) {
+ this.storeCallbacks.handlePinnedMessageCreated?.(chatroom.id, data.pinned_message);
+ } else {
+ this.storeCallbacks.handlePinnedMessageDeleted?.(chatroom.id);
+ }
+
+ // Add initial messages to the chatroom
+ if (data?.messages) {
+ this.storeCallbacks.addInitialChatroomMessages?.(chatroom.id, data.messages.reverse());
+ console.log(`[ConnectionManager] Loaded ${data.messages.length} initial messages for chatroom ${chatroom.id}`);
+ }
+ }
+ } catch (error) {
+ console.error(`[ConnectionManager] Error fetching initial messages for chatroom ${chatroom.id}:`, error);
+ }
+ }
+
+ // Fetch initial chatroom info (including livestream status)
+ async fetchInitialChatroomInfo(chatroom) {
+ try {
+ const response = await window.app.kick.getChannelChatroomInfo(chatroom.streamerData.slug);
+ console.log(response);
+
+ if (!response?.data) {
+ return;
+ }
+
+ // Use callbacks to avoid circular imports
+ if (this.storeCallbacks) {
+ const isLive = response.data?.livestream?.is_live || false;
+ this.storeCallbacks.handleStreamStatus?.(chatroom.id, response.data, isLive);
+ }
+ } catch (error) {
+ console.error(`[ConnectionManager] Error fetching initial chatroom info for chatroom ${chatroom.id}:`, error);
+ }
+ }
+
+ // Cleanup method
+ cleanup() {
+ console.log("[ConnectionManager] Cleaning up connections...");
+ this.kickPusher.close();
+ this.stvWebSocket.close();
+ this.emoteCache.clear();
+ this.globalStvEmotesCache = null;
+ this.initializationInProgress = false;
+ }
+}
+
+export default ConnectionManager;
diff --git a/utils/services/kick/kickPusher.js b/utils/services/kick/kickPusher.js
index 3dcf798..5443522 100644
--- a/utils/services/kick/kickPusher.js
+++ b/utils/services/kick/kickPusher.js
@@ -1,10 +1,11 @@
class KickPusher extends EventTarget {
- constructor(chatroomNumber, streamerId) {
+ constructor(chatroomNumber, streamerId, streamerName = null) {
super();
this.reconnectDelay = 5000;
this.chat = null;
this.chatroomNumber = chatroomNumber;
this.streamerId = streamerId;
+ this.streamerName = streamerName;
this.shouldReconnect = true;
this.socketId = null;
}
@@ -31,6 +32,15 @@ class KickPusher extends EventTarget {
this.chat.addEventListener("open", async () => {
console.log(`Connected to Kick.com Streamer Chat: ${this.chatroomNumber}`);
+
+ // Record WebSocket connection
+ try {
+ const streamerName = this.streamerName || `chatroom_${this.chatroomNumber}`;
+ console.log(`[Telemetry] WebSocket connected - chatroomId: ${this.chatroomNumber}, streamerId: ${this.streamerId}, streamerName: ${streamerName}`);
+ await window.app?.telemetry?.recordWebSocketConnection?.(this.chatroomNumber, this.streamerId, true, streamerName);
+ } catch (error) {
+ console.warn('[Telemetry]: Failed to record WebSocket connection:', error);
+ }
setTimeout(() => {
if (this.chat && this.chat.readyState === WebSocket.OPEN) {
@@ -58,17 +68,41 @@ class KickPusher extends EventTarget {
this.chat.addEventListener("error", (error) => {
console.log(`Error occurred: ${error.message}`);
+
+ // Record connection error
+ try {
+ window.app?.telemetry?.recordConnectionError?.(this.chatroomNumber, error.message || 'unknown');
+ } catch (telemetryError) {
+ console.warn('[Telemetry]: Failed to record connection error:', telemetryError);
+ }
+
this.dispatchEvent(new CustomEvent("error", { detail: error }));
});
this.chat.addEventListener("close", () => {
console.log(`Connection closed for chatroom: ${this.chatroomNumber}`);
+
+ // Record WebSocket disconnection
+ try {
+ const streamerName = this.streamerName || `chatroom_${this.chatroomNumber}`;
+ window.app?.telemetry?.recordWebSocketConnection?.(this.chatroomNumber, this.streamerId, false, streamerName);
+ } catch (error) {
+ console.warn('[Telemetry]: Failed to record WebSocket disconnection:', error);
+ }
this.dispatchEvent(new Event("close"));
if (this.shouldReconnect) {
setTimeout(() => {
console.log(`Attempting to reconnect to chatroom: ${this.chatroomNumber}...`);
+
+ // Record reconnection attempt
+ try {
+ window.app?.telemetry?.recordReconnection?.(this.chatroomNumber, 'websocket_close');
+ } catch (error) {
+ console.warn('[Telemetry]: Failed to record reconnection:', error);
+ }
+
this.connect();
}, this.reconnectDelay);
} else {
@@ -180,6 +214,19 @@ class KickPusher extends EventTarget {
jsonData.event === `App\\Events\\UserBannedEvent` ||
jsonData.event === `App\\Events\\UserUnbannedEvent`
) {
+ // Record received message for ChatMessageEvent
+ if (jsonData.event === `App\\Events\\ChatMessageEvent`) {
+ try {
+ const messageData = JSON.parse(jsonData.data);
+ const messageType = messageData.type || 'regular';
+ const senderId = messageData.sender?.id;
+ const streamerName = this.streamerName || `chatroom_${this.chatroomNumber}`;
+ await window.app?.telemetry?.recordMessageReceived?.(this.chatroomNumber, messageType, senderId, streamerName);
+ } catch (error) {
+ console.warn('[Telemetry]: Failed to record received message:', error);
+ }
+ }
+
this.dispatchEvent(new CustomEvent("message", { detail: jsonData }));
}
diff --git a/utils/services/kick/sharedKickPusher.js b/utils/services/kick/sharedKickPusher.js
new file mode 100644
index 0000000..da0ccd4
--- /dev/null
+++ b/utils/services/kick/sharedKickPusher.js
@@ -0,0 +1,376 @@
+class SharedKickPusher extends EventTarget {
+ constructor() {
+ super();
+ this.reconnectDelay = 5000;
+ this.chat = null;
+ this.shouldReconnect = true;
+ this.socketId = null;
+ this.chatrooms = new Map(); // Map of chatroomId -> chatroom info
+ this.subscribedChannels = new Set(); // Track subscribed channels
+ this.userEventsSubscribed = false; // Track if user events are subscribed
+ this.connectionState = 'disconnected'; // disconnected, connecting, connected
+ this.reconnectAttempts = 0;
+ this.maxReconnectAttempts = 10;
+ }
+
+ addChatroom(chatroomId, streamerId, chatroomData) {
+ this.chatrooms.set(chatroomId, {
+ chatroomId,
+ streamerId,
+ chatroomData,
+ channels: [
+ `channel_${streamerId}`,
+ `channel.${streamerId}`,
+ `chatrooms.${chatroomId}`,
+ `chatrooms.${chatroomId}.v2`,
+ `chatroom_${chatroomId}`,
+ ],
+ });
+
+ // If we're already connected, subscribe to this chatroom's channels
+ if (this.connectionState === 'connected') {
+ this.subscribeToChatroomChannels(chatroomId);
+ }
+ }
+
+ removeChatroom(chatroomId) {
+ const chatroom = this.chatrooms.get(chatroomId);
+ if (chatroom && this.connectionState === 'connected') {
+ this.unsubscribeFromChatroomChannels(chatroomId);
+ }
+ this.chatrooms.delete(chatroomId);
+
+ // If no more chatrooms, close the connection
+ if (this.chatrooms.size === 0) {
+ this.close();
+ }
+ }
+
+ connect() {
+ if (!this.shouldReconnect) {
+ console.log("[SharedKickPusher] Not connecting. Disabled reconnect.");
+ return;
+ }
+
+ if (this.connectionState === 'connecting' || this.connectionState === 'connected') {
+ console.log("[SharedKickPusher] Already connecting/connected");
+ return;
+ }
+
+ this.connectionState = 'connecting';
+ console.log(`[SharedKickPusher] Connecting to Kick WebSocket for ${this.chatrooms.size} chatrooms`);
+
+ this.chat = new WebSocket(
+ "wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=8.4.0-rc2&flash=false",
+ );
+
+ this.dispatchEvent(
+ new CustomEvent("connection", {
+ detail: {
+ type: "system",
+ content: "connection-pending",
+ chatrooms: Array.from(this.chatrooms.keys()),
+ },
+ }),
+ );
+
+ this.chat.addEventListener("open", () => {
+ console.log("[SharedKickPusher] Connected to Kick WebSocket");
+ this.reconnectAttempts = 0;
+
+ // Wait for connection_established event before subscribing
+ });
+
+ this.chat.addEventListener("error", (error) => {
+ console.log(`[SharedKickPusher] Error occurred: ${error.message}`);
+ this.connectionState = 'disconnected';
+ this.dispatchEvent(new CustomEvent("error", { detail: error }));
+ });
+
+ this.chat.addEventListener("close", () => {
+ console.log("[SharedKickPusher] Connection closed");
+ this.connectionState = 'disconnected';
+ this.socketId = null;
+ this.userEventsSubscribed = false;
+ this.subscribedChannels.clear();
+
+ this.dispatchEvent(new Event("close"));
+
+ if (this.shouldReconnect && this.reconnectAttempts < this.maxReconnectAttempts) {
+ this.reconnectAttempts++;
+ setTimeout(() => {
+ console.log(`[SharedKickPusher] Attempting to reconnect (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+ this.connect();
+ }, this.reconnectDelay * this.reconnectAttempts);
+ } else {
+ console.log("[SharedKickPusher] Not reconnecting - connection was closed intentionally or max attempts reached");
+ }
+ });
+
+ this.chat.addEventListener("message", async (event) => {
+ try {
+ const dataString = event.data;
+ const jsonData = JSON.parse(dataString);
+
+ // Handle connection established
+ if (jsonData.event === "pusher:connection_established") {
+ this.connectionState = 'connected';
+ this.socketId = JSON.parse(jsonData.data).socket_id;
+ console.log(`[SharedKickPusher] Connection established: socket ID - ${this.socketId}`);
+
+ // Subscribe to all chatroom channels
+ await this.subscribeToAllChannels();
+
+ this.dispatchEvent(
+ new CustomEvent("connection", {
+ detail: {
+ type: "system",
+ content: "connection-success",
+ chatrooms: Array.from(this.chatrooms.keys()),
+ },
+ }),
+ );
+ }
+
+ // Handle subscription success
+ if (jsonData.event === "pusher_internal:subscription_succeeded") {
+ const chatroomId = this.extractChatroomIdFromChannel(jsonData.channel);
+ if (chatroomId) {
+ console.log(`[SharedKickPusher] Subscription successful for chatroom: ${chatroomId}`);
+ this.dispatchEvent(
+ new CustomEvent("subscription_success", {
+ detail: {
+ chatroomId,
+ channel: jsonData.channel,
+ },
+ }),
+ );
+ }
+ }
+
+ // Handle chat messages and events
+ if (
+ jsonData.event === `App\\Events\\ChatMessageEvent` ||
+ jsonData.event === `App\\Events\\MessageDeletedEvent` ||
+ jsonData.event === `App\\Events\\UserBannedEvent` ||
+ jsonData.event === `App\\Events\\UserUnbannedEvent`
+ ) {
+ const chatroomId = this.extractChatroomIdFromChannel(jsonData.channel);
+ if (chatroomId) {
+ this.dispatchEvent(
+ new CustomEvent("message", {
+ detail: {
+ chatroomId,
+ event: jsonData.event,
+ data: jsonData.data,
+ channel: jsonData.channel,
+ },
+ }),
+ );
+ }
+ }
+
+ // Handle channel events
+ if (
+ jsonData.event === `App\\Events\\LivestreamUpdated` ||
+ jsonData.event === `App\\Events\\StreamerIsLive` ||
+ jsonData.event === `App\\Events\\StopStreamBroadcast` ||
+ jsonData.event === `App\\Events\\PinnedMessageCreatedEvent` ||
+ jsonData.event === `App\\Events\\PinnedMessageDeletedEvent` ||
+ jsonData.event === `App\\Events\\ChatroomUpdatedEvent` ||
+ jsonData.event === `App\\Events\\PollUpdateEvent` ||
+ jsonData.event === `App\\Events\\PollDeleteEvent`
+ ) {
+ const chatroomId = this.extractChatroomIdFromChannel(jsonData.channel);
+ if (chatroomId) {
+ this.dispatchEvent(
+ new CustomEvent("channel", {
+ detail: {
+ chatroomId,
+ event: jsonData.event,
+ data: jsonData.data,
+ channel: jsonData.channel,
+ },
+ }),
+ );
+ }
+ }
+ } catch (error) {
+ console.log(`[SharedKickPusher] Error in message processing: ${error.message}`);
+ this.dispatchEvent(new CustomEvent("error", { detail: error }));
+ }
+ });
+ }
+
+ async subscribeToAllChannels() {
+ if (!this.chat || this.chat.readyState !== WebSocket.OPEN) {
+ console.log("[SharedKickPusher] Cannot subscribe - WebSocket not open");
+ return;
+ }
+
+ // Subscribe to user events (only once)
+ await this.subscribeToUserEvents();
+
+ // Subscribe to all chatroom channels
+ for (const [chatroomId] of this.chatrooms) {
+ await this.subscribeToChatroomChannels(chatroomId);
+ }
+ }
+
+ async subscribeToUserEvents() {
+ if (this.userEventsSubscribed) return;
+
+ const user_id = localStorage.getItem("kickId");
+ if (!user_id) {
+ console.log("[SharedKickPusher] No user ID found, skipping private event subscriptions");
+ return;
+ }
+
+ const userEvents = [`private-userfeed.${user_id}`, `private-channelpoints-${user_id}`];
+ console.log("[SharedKickPusher] Subscribing to user events:", userEvents);
+
+ for (const event of userEvents) {
+ try {
+ console.log("[SharedKickPusher] Subscribing to private event:", event);
+ const AuthToken = await window.app.kick.getKickAuthForEvents(event, this.socketId);
+
+ if (AuthToken.auth) {
+ this.chat.send(
+ JSON.stringify({
+ event: "pusher:subscribe",
+ data: { auth: AuthToken.auth, channel: event },
+ }),
+ );
+ this.subscribedChannels.add(event);
+ console.log("[SharedKickPusher] Subscribed to event:", event);
+ }
+ } catch (error) {
+ console.error("[SharedKickPusher] Error subscribing to event:", error);
+ }
+ }
+
+ this.userEventsSubscribed = true;
+ }
+
+ async subscribeToChatroomChannels(chatroomId) {
+ const chatroom = this.chatrooms.get(chatroomId);
+ if (!chatroom) {
+ console.log(`[SharedKickPusher] Chatroom ${chatroomId} not found`);
+ return;
+ }
+
+ // Subscribe to basic chatroom channels
+ for (const channel of chatroom.channels) {
+ if (!this.subscribedChannels.has(channel)) {
+ this.chat.send(
+ JSON.stringify({
+ event: "pusher:subscribe",
+ data: { auth: "", channel },
+ }),
+ );
+ this.subscribedChannels.add(channel);
+ }
+ }
+
+ console.log(`[SharedKickPusher] Subscribed to channels for chatroom: ${chatroomId}`);
+
+ // Subscribe to livestream event if streamer is live
+ if (chatroom.chatroomData?.streamerData?.livestream !== null) {
+ const livestreamId = chatroom.chatroomData.streamerData.livestream.id;
+ const liveEventToSubscribe = `private-livestream.${livestreamId}`;
+
+ try {
+ console.log(`[SharedKickPusher] Subscribing to livestream event for chatroom ${chatroomId}:`, liveEventToSubscribe);
+
+ const AuthToken = await window.app.kick.getKickAuthForEvents(liveEventToSubscribe, this.socketId);
+
+ if (AuthToken.auth && !this.subscribedChannels.has(liveEventToSubscribe)) {
+ this.chat.send(
+ JSON.stringify({
+ event: "pusher:subscribe",
+ data: { auth: AuthToken.auth, channel: liveEventToSubscribe },
+ }),
+ );
+ this.subscribedChannels.add(liveEventToSubscribe);
+ console.log("[SharedKickPusher] Subscribed to livestream event:", liveEventToSubscribe);
+ }
+ } catch (error) {
+ console.error("[SharedKickPusher] Error subscribing to livestream event:", error);
+ }
+ } else {
+ console.log(`[SharedKickPusher] Chatroom ${chatroomId} is not live, skipping livestream subscription`);
+ }
+ }
+
+ unsubscribeFromChatroomChannels(chatroomId) {
+ const chatroom = this.chatrooms.get(chatroomId);
+ if (!chatroom) return;
+
+ for (const channel of chatroom.channels) {
+ if (this.subscribedChannels.has(channel)) {
+ this.chat.send(
+ JSON.stringify({
+ event: "pusher:unsubscribe",
+ data: { channel },
+ }),
+ );
+ this.subscribedChannels.delete(channel);
+ }
+ }
+
+ console.log(`[SharedKickPusher] Unsubscribed from channels for chatroom: ${chatroomId}`);
+ }
+
+ extractChatroomIdFromChannel(channel) {
+ // Extract chatroom ID from channel names like "chatrooms.12345.v2"
+ const match = channel.match(/chatrooms\.(\d+)(?:\.v2)?$/);
+ return match ? match[1] : null;
+ }
+
+ close() {
+ console.log("[SharedKickPusher] Closing shared connection");
+ this.shouldReconnect = false;
+ this.connectionState = 'disconnected';
+
+ if (this.chat && this.chat.readyState === WebSocket.OPEN) {
+ try {
+ // Unsubscribe from all channels
+ for (const channel of this.subscribedChannels) {
+ this.chat.send(
+ JSON.stringify({
+ event: "pusher:unsubscribe",
+ data: { channel },
+ }),
+ );
+ }
+
+ this.subscribedChannels.clear();
+ this.chat.close();
+ this.chat = null;
+ this.socketId = null;
+ this.userEventsSubscribed = false;
+
+ console.log("[SharedKickPusher] WebSocket connection closed");
+ } catch (error) {
+ console.error("[SharedKickPusher] Error during closing of connection:", error);
+ }
+ }
+ }
+
+ // Get connection status
+ getConnectionState() {
+ return this.connectionState;
+ }
+
+ // Get number of subscribed channels
+ getSubscribedChannelCount() {
+ return this.subscribedChannels.size;
+ }
+
+ // Get number of chatrooms
+ getChatroomCount() {
+ return this.chatrooms.size;
+ }
+}
+
+export default SharedKickPusher;
\ No newline at end of file
diff --git a/utils/services/seventv/sharedStvWebSocket.js b/utils/services/seventv/sharedStvWebSocket.js
new file mode 100644
index 0000000..e304b09
--- /dev/null
+++ b/utils/services/seventv/sharedStvWebSocket.js
@@ -0,0 +1,584 @@
+// This shared websocket class optimizes 7TV connections by using a single WebSocket for all chatrooms
+// Original websocket class originally made by https://github.com/Fiszh and edited by ftk789 and Drkness
+
+const cosmetics = {
+ paints: [],
+ badges: [],
+};
+
+const updateCosmetics = async (body) => {
+ if (!body?.object) {
+ return;
+ }
+
+ const { object } = body;
+
+ if (object?.kind === "BADGE") {
+ if (!object?.user) {
+ const data = object.data;
+
+ const foundBadge = cosmetics.badges.find(
+ (badge) => badge && badge.id === (data && data.id === "00000000000000000000000000" ? data.ref_id : data.id),
+ );
+
+ if (foundBadge) {
+ return;
+ }
+
+ cosmetics.badges.push({
+ id: data.id === "00000000000000000000000000" ? data.ref_id || "default_id" : data.id,
+ title: data.tooltip,
+ url: `https:${data.host.url}/${data.host.files[data.host.files.length - 1].name}`,
+ });
+ }
+ }
+
+ if (object?.kind === "PAINT") {
+ if (!object.user) {
+ const data = object.data;
+
+ const foundPaint = cosmetics.paints.find(
+ (paint) => paint && paint.id === (data && data.id === "00000000000000000000000000" ? data.ref_id : data.id),
+ );
+
+ if (foundPaint) {
+ return;
+ }
+
+ const randomColor = "#00f742";
+
+ let push = {};
+
+ if (data.stops.length) {
+ const normalizedColors = data.stops.map((stop) => ({
+ at: stop.at * 100,
+ color: stop.color,
+ }));
+
+ const gradient = normalizedColors.map((stop) => `${argbToRgba(stop.color)} ${stop.at}%`).join(", ");
+
+ if (data.repeat) {
+ data.function = `repeating-${data.function}`;
+ }
+
+ data.function = data.function.toLowerCase().replace("_", "-");
+
+ let isDeg_or_Shape = `${data.angle}deg`;
+
+ if (data.function !== "linear-gradient" && data.function !== "repeating-linear-gradient") {
+ isDeg_or_Shape = data.shape;
+ }
+
+ push = {
+ id: data.id === "00000000000000000000000000" ? data.ref_id || "default_id" : data.id,
+ name: data.name,
+ style: data.function,
+ shape: data.shape,
+ backgroundImage:
+ `${data.function || "linear-gradient"}(${isDeg_or_Shape}, ${gradient})` ||
+ `${data.style || "linear-gradient"}(${data.shape || ""} 0deg, ${randomColor}, ${randomColor})`,
+ shadows: null,
+ KIND: "non-animated",
+ url: data.image_url,
+ };
+ } else {
+ push = {
+ id: data.id === "00000000000000000000000000" ? data.ref_id || "default_id" : data.id,
+ name: data.name,
+ style: data.function,
+ shape: data.shape,
+ backgroundImage:
+ `url('${[data.image_url]}')` ||
+ `${data.style || "linear-gradient"}(${data.shape || ""} 0deg, ${randomColor}, ${randomColor})`,
+ shadows: null,
+ KIND: "animated",
+ url: data.image_url,
+ };
+ }
+
+ // SHADOWS
+ let shadow = null;
+
+ if (data.shadows.length) {
+ const shadows = data.shadows;
+
+ shadow = await shadows
+ .map((shadow) => {
+ let rgbaColor = argbToRgba(shadow.color);
+
+ rgbaColor = rgbaColor.replace(/rgba\((\d+), (\d+), (\d+), (\d+(\.\d+)?)\)/, `rgba($1, $2, $3)`);
+
+ return `drop-shadow(${rgbaColor} ${shadow.x_offset}px ${shadow.y_offset}px ${shadow.radius}px)`;
+ })
+ .join(" ");
+
+ push["shadows"] = shadow;
+ }
+
+ cosmetics.paints.push(push);
+ }
+ } else if (
+ object?.name === "Personal Emotes" ||
+ object?.name === "Personal Emotes Set" ||
+ object?.user ||
+ object?.id === "00000000000000000000000000" ||
+ (object?.flags && (object.flags === 11 || object.flags === 4))
+ ) {
+ if (object?.id === "00000000000000000000000000" && object?.ref_id) {
+ object.id = object.ref_id;
+ }
+ } else if (object?.kind == "BADGE") {
+ const data = object.data;
+
+ const foundBadge = cosmetics.badges.find(
+ (badge) => badge && badge.id === (data && data.id === "00000000000000000000000000" ? data.ref_id : data.id),
+ );
+
+ if (foundBadge) {
+ return;
+ }
+
+ cosmetics.badges.push({
+ id: data.id === "00000000000000000000000000" ? data.ref_id || "default_id" : data.id,
+ title: data.tooltip,
+ url: `https:${data.host.url}/${data.host.files[data.host.files.length - 1].name}`,
+ });
+ } else {
+ console.log("[Shared7TV] Didn't process cosmetics:", body);
+ }
+};
+
+class SharedStvWebSocket extends EventTarget {
+ constructor() {
+ super();
+ this.startDelay = 1000;
+ this.maxRetrySteps = 5;
+ this.reconnectAttempts = 0;
+ this.chat = null;
+ this.shouldReconnect = true;
+ this.connectionState = 'disconnected'; // disconnected, connecting, connected
+ this.chatrooms = new Map(); // Map of chatroomId -> channel data
+ this.subscribedEvents = new Set(); // Track subscribed events
+ this.userEventSubscribed = false; // Track global user events
+ }
+
+ addChatroom(chatroomId, channelKickID, stvId = "0", stvEmoteSetId = "0") {
+ this.chatrooms.set(chatroomId, {
+ channelKickID: String(channelKickID),
+ stvId,
+ stvEmoteSetId,
+ });
+
+ // If we're already connected, subscribe to this chatroom's events
+ if (this.connectionState === 'connected') {
+ this.subscribeToChatroomEvents(chatroomId);
+ }
+ }
+
+ removeChatroom(chatroomId) {
+ const chatroomData = this.chatrooms.get(chatroomId);
+ if (chatroomData && this.connectionState === 'connected') {
+ this.unsubscribeFromChatroomEvents(chatroomId);
+ }
+ this.chatrooms.delete(chatroomId);
+
+ // If no more chatrooms, close the connection
+ if (this.chatrooms.size === 0) {
+ this.close();
+ }
+ }
+
+ connect() {
+ if (!this.shouldReconnect) {
+ console.log(`[Shared7TV]: Not connecting to WebSocket - reconnect disabled`);
+ return;
+ }
+
+ if (this.connectionState === 'connecting' || this.connectionState === 'connected') {
+ console.log("[Shared7TV]: Already connecting/connected");
+ return;
+ }
+
+ this.connectionState = 'connecting';
+ console.log(`[Shared7TV]: Connecting to WebSocket for ${this.chatrooms.size} chatrooms (attempt ${this.reconnectAttempts + 1})`);
+
+ this.chat = new WebSocket("wss://events.7tv.io/v3?app=kicktalk&version=420.69");
+
+ this.chat.onerror = (event) => {
+ console.log(`[Shared7TV]: WebSocket error:`, event);
+ this.connectionState = 'disconnected';
+ this.handleConnectionError();
+ };
+
+ this.chat.onclose = (event) => {
+ console.log(`[Shared7TV]: WebSocket closed. Code: ${event.code}, Reason: ${event.reason}`);
+ this.connectionState = 'disconnected';
+ this.subscribedEvents.clear();
+ this.userEventSubscribed = false;
+ this.handleReconnection();
+ };
+
+ this.chat.onopen = async () => {
+ console.log(`[Shared7TV]: Connection opened successfully`);
+ this.connectionState = 'connected';
+ this.reconnectAttempts = 0;
+
+ await this.delay(1000);
+
+ // Subscribe to events for all chatrooms
+ await this.subscribeToAllEvents();
+
+ // Setup message handler
+ this.setupMessageHandler();
+
+ // Dispatch connection event
+ this.dispatchEvent(
+ new CustomEvent("connection", {
+ detail: {
+ type: "system",
+ content: "connection-success",
+ chatrooms: Array.from(this.chatrooms.keys()),
+ },
+ }),
+ );
+ };
+ }
+
+ handleConnectionError() {
+ this.reconnectAttempts++;
+ console.log(`[Shared7TV]: Connection error. Attempt ${this.reconnectAttempts}`);
+ }
+
+ handleReconnection() {
+ if (!this.shouldReconnect) {
+ console.log(`[Shared7TV]: Reconnection disabled`);
+ return;
+ }
+
+ // exponential backoff: start * 2^(step-1)
+ // cap at maxRetrySteps, so after step 5 it stays at start * 2^(maxRetrySteps-1)
+ const step = Math.min(this.reconnectAttempts, this.maxRetrySteps);
+ const delay = this.startDelay * Math.pow(2, step - 1);
+
+ console.log(`[Shared7TV]: Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts + 1})`);
+
+ setTimeout(() => {
+ this.connect();
+ }, delay);
+ }
+
+ async subscribeToAllEvents() {
+ // Subscribe to user events (only once for all chatrooms)
+ await this.subscribeToUserEvents();
+
+ // Subscribe to events for each chatroom
+ for (const [chatroomId] of this.chatrooms) {
+ await this.subscribeToChatroomEvents(chatroomId);
+ }
+ }
+
+ async subscribeToChatroomEvents(chatroomId) {
+ const chatroomData = this.chatrooms.get(chatroomId);
+ if (!chatroomData) {
+ console.log(`[Shared7TV]: Chatroom ${chatroomId} not found`);
+ return;
+ }
+
+ const { channelKickID, stvId, stvEmoteSetId } = chatroomData;
+
+ // Subscribe to cosmetic events
+ if (channelKickID !== "0") {
+ await this.subscribeToCosmeticEvents(chatroomId, channelKickID);
+ await this.subscribeToEntitlementEvents(chatroomId, channelKickID);
+
+ // Only subscribe to emote set events if we have a valid emote set ID
+ if (stvEmoteSetId !== "0") {
+ await this.subscribeToEmoteSetEvents(chatroomId, stvEmoteSetId);
+ }
+ }
+ }
+
+ unsubscribeFromChatroomEvents(chatroomId) {
+ // Note: 7TV doesn't have explicit unsubscribe, so we just remove tracking
+ // The events will be filtered out in the message handler
+ console.log(`[Shared7TV]: Unsubscribing events for chatroom ${chatroomId}`);
+ }
+
+ /**
+ * Subscribe to user events (global, only once)
+ */
+ async subscribeToUserEvents() {
+ if (this.userEventSubscribed || !this.chat || this.chat.readyState !== WebSocket.OPEN) {
+ return;
+ }
+
+ // Find any chatroom with a valid stvId
+ const chatroomWithStvId = Array.from(this.chatrooms.values()).find(data => data.stvId !== "0");
+ if (!chatroomWithStvId) {
+ console.log(`[Shared7TV]: No valid stvId found for user events`);
+ return;
+ }
+
+ const eventKey = `user.*:${chatroomWithStvId.stvId}`;
+ if (this.subscribedEvents.has(eventKey)) {
+ return;
+ }
+
+ const subscribeUserMessage = {
+ op: 35,
+ t: Date.now(),
+ d: {
+ type: "user.*",
+ condition: { object_id: chatroomWithStvId.stvId },
+ },
+ };
+
+ this.chat.send(JSON.stringify(subscribeUserMessage));
+ this.subscribedEvents.add(eventKey);
+ this.userEventSubscribed = true;
+ console.log(`[Shared7TV]: Subscribed to user.* events`);
+ }
+
+ /**
+ * Subscribe to cosmetic events for a specific chatroom
+ */
+ async subscribeToCosmeticEvents(chatroomId, channelKickID) {
+ if (!this.chat || this.chat.readyState !== WebSocket.OPEN) {
+ console.log(`[Shared7TV]: Cannot subscribe to cosmetic events - WebSocket not ready`);
+ return;
+ }
+
+ const eventKey = `cosmetic.*:${channelKickID}`;
+ if (this.subscribedEvents.has(eventKey)) {
+ return;
+ }
+
+ const subscribeAllCosmetics = {
+ op: 35,
+ t: Date.now(),
+ d: {
+ type: "cosmetic.*",
+ condition: { platform: "KICK", ctx: "channel", id: channelKickID },
+ },
+ };
+
+ this.chat.send(JSON.stringify(subscribeAllCosmetics));
+ this.subscribedEvents.add(eventKey);
+ console.log(`[Shared7TV]: Subscribed to cosmetic.* events for chatroom ${chatroomId}`);
+ }
+
+ /**
+ * Subscribe to entitlement events for a specific chatroom
+ */
+ async subscribeToEntitlementEvents(chatroomId, channelKickID) {
+ if (!this.chat || this.chat.readyState !== WebSocket.OPEN) {
+ console.log(`[Shared7TV]: Cannot subscribe to entitlement events - WebSocket not ready`);
+ return;
+ }
+
+ const eventKey = `entitlement.*:${channelKickID}`;
+ if (this.subscribedEvents.has(eventKey)) {
+ return;
+ }
+
+ const subscribeAllEntitlements = {
+ op: 35,
+ t: Date.now(),
+ d: {
+ type: "entitlement.*",
+ condition: { platform: "KICK", ctx: "channel", id: channelKickID },
+ },
+ };
+
+ this.chat.send(JSON.stringify(subscribeAllEntitlements));
+ this.subscribedEvents.add(eventKey);
+ console.log(`[Shared7TV]: Subscribed to entitlement.* events for chatroom ${chatroomId}`);
+
+ this.dispatchEvent(
+ new CustomEvent("open", {
+ detail: {
+ body: "SUBSCRIBED",
+ type: "entitlement.*",
+ chatroomId,
+ },
+ }),
+ );
+ }
+
+ /**
+ * Subscribe to emote set events for a specific chatroom
+ */
+ async subscribeToEmoteSetEvents(chatroomId, stvEmoteSetId) {
+ if (!this.chat || this.chat.readyState !== WebSocket.OPEN) {
+ console.log(`[Shared7TV]: Cannot subscribe to emote set events - WebSocket not ready`);
+ return;
+ }
+
+ const eventKey = `emote_set.*:${stvEmoteSetId}`;
+ if (this.subscribedEvents.has(eventKey)) {
+ return;
+ }
+
+ const subscribeAllEmoteSets = {
+ op: 35,
+ t: Date.now(),
+ d: {
+ type: "emote_set.*",
+ condition: { object_id: stvEmoteSetId },
+ },
+ };
+
+ this.chat.send(JSON.stringify(subscribeAllEmoteSets));
+ this.subscribedEvents.add(eventKey);
+ console.log(`[Shared7TV]: Subscribed to emote_set.* events for chatroom ${chatroomId}`);
+ }
+
+ setupMessageHandler() {
+ this.chat.onmessage = (event) => {
+ try {
+ const msg = JSON.parse(event.data);
+
+ if (!msg?.d?.body) return;
+
+ const { body, type } = msg.d;
+
+ // Find which chatroom this event belongs to
+ const chatroomId = this.findChatroomForEvent(body, type);
+
+ switch (type) {
+ case "user.update":
+ this.dispatchEvent(
+ new CustomEvent("message", {
+ detail: {
+ body,
+ type: "user.update",
+ chatroomId,
+ },
+ }),
+ );
+ break;
+
+ case "emote_set.update":
+ this.dispatchEvent(
+ new CustomEvent("message", {
+ detail: {
+ body,
+ type: "emote_set.update",
+ chatroomId,
+ },
+ }),
+ );
+ break;
+
+ case "cosmetic.create":
+ updateCosmetics(body);
+
+ this.dispatchEvent(
+ new CustomEvent("message", {
+ detail: {
+ body: cosmetics,
+ type: "cosmetic.create",
+ chatroomId,
+ },
+ }),
+ );
+ break;
+
+ case "entitlement.create":
+ if (body.kind === 10) {
+ this.dispatchEvent(
+ new CustomEvent("message", {
+ detail: {
+ body,
+ type: "entitlement.create",
+ chatroomId,
+ },
+ }),
+ );
+ }
+ break;
+ }
+ } catch (error) {
+ console.log("[Shared7TV] Error parsing message:", error);
+ }
+ };
+ }
+
+ findChatroomForEvent(body, type) {
+ // Try to identify which chatroom this event belongs to
+ // This is a best-effort approach since 7TV events don't always include channel context
+
+ // For user events, broadcast to all chatrooms
+ if (type.startsWith("user.")) {
+ return null; // null means broadcast to all chatrooms
+ }
+
+ // For emote_set events, find chatroom by emote set ID
+ if (type.startsWith("emote_set.") && body?.object_id) {
+ for (const [chatroomId, data] of this.chatrooms) {
+ if (data.stvEmoteSetId === body.object_id) {
+ return chatroomId;
+ }
+ }
+ }
+
+ // For cosmetic and entitlement events, they should include channel context
+ // but if not, we'll broadcast to all chatrooms
+ return null;
+ }
+
+ delay(ms) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+ }
+
+ close() {
+ console.log(`[Shared7TV]: Closing shared connection`);
+ this.shouldReconnect = false;
+ this.connectionState = 'disconnected';
+
+ if (this.chat) {
+ try {
+ if (this.chat.readyState === WebSocket.OPEN || this.chat.readyState === WebSocket.CONNECTING) {
+ console.log(`[Shared7TV]: WebSocket state: ${this.chat.readyState}, closing...`);
+ this.chat.close();
+ }
+ this.chat = null;
+ this.subscribedEvents.clear();
+ this.userEventSubscribed = false;
+ console.log(`[Shared7TV]: Shared connection closed`);
+ } catch (error) {
+ console.error(`[Shared7TV]: Error during closing of connection:`, error);
+ }
+ } else {
+ console.log(`[Shared7TV]: No active connection to close`);
+ }
+ }
+
+ // Get connection status
+ getConnectionState() {
+ return this.connectionState;
+ }
+
+ // Get number of subscribed events
+ getSubscribedEventCount() {
+ return this.subscribedEvents.size;
+ }
+
+ // Get number of chatrooms
+ getChatroomCount() {
+ return this.chatrooms.size;
+ }
+}
+
+const argbToRgba = (color) => {
+ if (color < 0) {
+ color = color >>> 0;
+ }
+
+ const red = (color >> 24) & 0xff;
+ const green = (color >> 16) & 0xff;
+ const blue = (color >> 8) & 0xff;
+ return `rgba(${red}, ${green}, ${blue}, 1)`;
+};
+
+export default SharedStvWebSocket;
\ No newline at end of file
+
+
+
+ {t('settings.language')}
+{t('settings.languageDescription')}
+
+
+
- Always on Top
+ {t('settings.general.alwaysOnTop')}
+
+
+ onChange("general", {
+ ...settingsData?.general,
+ autoUpdate: checked,
+ })
+ }
+ />
+
+
+ Auto Update
+
+
+
+
+
+
+
+
+
+ Automatically check for and download KickTalk updates on startup
+ {
/>
+
+
+ onChange("general", {
+ ...settingsData?.general,
+ compactChatroomsList: checked,
+ })
+ }
+ />
+
+
+ Compact Chatroom List
+
+
+
+
+
+
+
+
+
+ + Display chatroom tabs in a more compact layout to save + space +
+ {
};
const NotificationsSection = ({ settingsData, onChange }) => {
- const [notificationFiles, setNotificationFiles] = useState([]);
const [openColorPicker, setOpenColorPicker] = useState(false);
const handleColorChange = useCallback(
@@ -503,14 +580,9 @@ const NotificationsSection = ({ settingsData, onChange }) => {
const getNotificationFiles = useCallback(async () => {
const files = await window.app.notificationSounds.getAvailable();
- setNotificationFiles(files);
return files;
}, []);
- useEffect(() => {
- getNotificationFiles();
- }, [getNotificationFiles]);
-
return (
+
+ {/* Telemetry Section */}
+
@@ -783,6 +855,47 @@ const NotificationsSection = ({ settingsData, onChange }) => {
+
+
+
+ Telemetry & Analytics
+Control data collection and usage analytics.
+
+
+
+
+
+
+ onChange("telemetry", {
+ ...settingsData?.telemetry,
+ enabled: checked,
+ })
+ }
+ />
+
+
+ Enable Telemetry
+
+
+
+
+
+
+
+
+
+ Allow KickTalk to collect anonymous usage data to help improve the application. This includes app performance metrics, error reports, and feature usage statistics. No personal chat data is collected.
+
-
Moderation
-Customize your moderation experience.
+{t('settings.moderation.title')}
+{t('settings.moderation.description')}
@@ -18,7 +21,7 @@ const ModerationSection = ({ settingsData, onChange }) => {
active: settingsData?.moderation?.quickModTools,
})}>
@@ -259,27 +261,27 @@ const User = () => {
-
@@ -31,8 +35,10 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -41,7 +47,7 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -53,8 +59,10 @@ const EmoteUpdateMessage = ({ message }) => {
- Quick Mod Tools
+ {t('settings.moderation.quickModTools')}
- 
-
+
diff --git a/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx b/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
index 5d96ebf..fefc2a2 100644
--- a/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
+++ b/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
@@ -1,8 +1,12 @@
+import { useTranslation } from "react-i18next";
import KickTalkLogo from "../../../assets/logos/KickTalkLogo.svg?asset";
import SignOut from "../../../assets/icons/sign-out-bold.svg?asset";
import clsx from "clsx";
-const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => (
+const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => {
+ const { t } = useTranslation();
+
+ return (
Enable quick moderation tools in chat messages
+{t('settings.moderation.quickModToolsDescription')}
@@ -12,34 +16,34 @@ const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => (
active: activeSection === "info",
})}
onClick={() => setActiveSection("info")}>
- About KickTalk
+ {t('settings.menu.aboutKickTalk')}
-
General
+{t('settings.menu.general')}
-
Chat
+{t('settings.menu.chat')}
{/*
-);
+ );
+};
export default SettingsMenu;
diff --git a/src/renderer/src/components/Dialogs/User.jsx b/src/renderer/src/components/Dialogs/User.jsx
index 6febf5c..3ddc315 100644
--- a/src/renderer/src/components/Dialogs/User.jsx
+++ b/src/renderer/src/components/Dialogs/User.jsx
@@ -1,5 +1,6 @@
import "../../assets/styles/dialogs/UserDialog.scss";
import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
import { userKickTalkBadges } from "../../../../../utils/kickTalkBadges";
import clsx from "clsx";
import Message from "../Messages/Message";
@@ -17,6 +18,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../Sha
// TODO: Add Slider/Custom Timeout to User Dialog
const User = () => {
+ const { t } = useTranslation();
const [dialogData, setDialogData] = useState(null);
const [userProfile, setUserProfile] = useState(null);
const [userLogs, setUserLogs] = useState([]);
@@ -196,7 +198,7 @@ const User = () => {
-
Following since:
+{t('userDialog.followingSince')}:
{userProfile?.following_since ? new Date(userProfile?.following_since).toLocaleDateString(undefined, { @@ -209,11 +211,11 @@ const User = () => {
-
@@ -230,9 +232,9 @@ const User = () => {
!kickUsername
}
onClick={silenceUser}>
- {isUserSilenced ? "Unmute User" : "Mute User"}
+ {isUserSilenced ? t('userDialog.unmuteUser') : t('userDialog.muteUser')}
Subscribed for
+{t('userDialog.subscribedFor')}
{userProfile?.subscribed_for > 1 || userProfile?.subscribed_for < 1 - ? `${userProfile?.subscribed_for} months` - : `${userProfile?.subscribed_for} month`} + ? t('userDialog.monthsPlural', { count: userProfile?.subscribed_for }) + : t('userDialog.monthsSingular', { count: userProfile?.subscribed_for })} .
- 
+
Unban User
+{t('userDialog.unban')}
{/*
@@ -19,7 +23,7 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -296,7 +298,7 @@ const User = () => {
-
diff --git a/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx b/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
index de70a12..7374754 100644
--- a/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
+++ b/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
@@ -1,6 +1,8 @@
+import { useTranslation } from "react-i18next";
import stvLogo from "../../assets/logos/stvLogo.svg?asset";
const EmoteUpdateMessage = ({ message }) => {
+ const { t } = useTranslation();
return (
<>
{message.data.added?.length > 0 &&
@@ -9,8 +11,10 @@ const EmoteUpdateMessage = ({ message }) => {
Ban User
+{t('userDialog.ban')}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Added
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.added')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
{e.name}
- Made by: {e.owner?.display_name}
+ {t('messages.emoteUpdate.madeBy', { creator: e.owner?.display_name })}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Removed
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.removed')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
{e.name}
- Made by: {e.owner?.display_name}
+ {t('messages.emoteUpdate.madeBy', { creator: e.owner?.display_name })}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Renamed
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.renamed')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
- Scroll To Bottom
- 
+ {t('messages.scrollToBottom')}
+
)}
{settings?.general?.timestampFormat !== "disabled" && {timestamp}}
{shouldShowModActions && 
+ {t('common.add')}
+
)}
diff --git a/src/renderer/src/components/Navbar/ChatroomTab.jsx b/src/renderer/src/components/Navbar/ChatroomTab.jsx
index 6a8b0cb..489421f 100644
--- a/src/renderer/src/components/Navbar/ChatroomTab.jsx
+++ b/src/renderer/src/components/Navbar/ChatroomTab.jsx
@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useMemo } from "react";
import { Draggable } from "@hello-pangea/dnd";
import {
ContextMenu,
@@ -9,6 +9,7 @@ import {
} from "../Shared/ContextMenu";
import clsx from "clsx";
import useChatStore from "../../providers/ChatProvider";
+import { useShallow } from "zustand/react/shallow";
import X from "../../assets/icons/x-bold.svg?asset";
const ChatroomTab = memo(
@@ -27,8 +28,11 @@ const ChatroomTab = memo(
renameInputRef,
settings,
}) => {
- const chatroomMessages = useChatStore((state) => state.messages[chatroom.id] || []);
- const unreadCount = chatroomMessages.filter((message) => !message.isRead && message.type !== "system").length;
+ const chatroomMessages = useChatStore(useShallow((state) => state.messages[chatroom.id] || []));
+
+ const unreadCount = useMemo(() => {
+ return chatroomMessages.filter((message) => !message.isRead && message.type !== "system").length;
+ }, [chatroomMessages]);
return (
diff --git a/src/renderer/src/components/Navbar/MentionsTab.jsx b/src/renderer/src/components/Navbar/MentionsTab.jsx
index 16886b5..d142817 100644
--- a/src/renderer/src/components/Navbar/MentionsTab.jsx
+++ b/src/renderer/src/components/Navbar/MentionsTab.jsx
@@ -1,31 +1,39 @@
import { memo } from "react";
import clsx from "clsx";
import X from "../../assets/icons/x-bold.svg?asset";
+import NotificationIcon from "../../assets/icons/notification-bell.svg?asset";
const MentionsTab = memo(({ currentChatroomId, onSelectChatroom, onRemoveMentionsTab }) => {
- return (
-
{messageContent}
- {canModerate && !message?.deleted && (
-
+ {message.isOptimistic && message.state === "failed" ? (
+ // Show retry and copy buttons for failed messages
+ <>
+
+
+
+ ) : (
+ // Show normal action buttons for successful messages
+ <>
+ {canModerate && !message?.deleted && (
+
+ )}
+
+ {!message?.deleted && (
+
+ )}
+
+
+
)}
-
- {!message?.deleted && (
-
- )}
-
-
);
diff --git a/src/renderer/src/components/Messages/ReplyMessage.jsx b/src/renderer/src/components/Messages/ReplyMessage.jsx
index c02e695..2576807 100644
--- a/src/renderer/src/components/Messages/ReplyMessage.jsx
+++ b/src/renderer/src/components/Messages/ReplyMessage.jsx
@@ -8,6 +8,7 @@ import { memo, useMemo } from "react";
const ReplyMessage = ({
message,
sevenTVEmotes,
+ sevenTVSettings,
subscriberBadges,
kickTalkBadges,
donatorBadges,
@@ -45,6 +46,7 @@ const ReplyMessage = ({
type="reply"
message={message?.metadata?.original_message}
sevenTVEmotes={sevenTVEmotes}
+ sevenTVSettings={sevenTVSettings}
userChatroomInfo={userChatroomInfo}
chatroomId={chatroomId}
chatroomName={chatroomName}
diff --git a/src/renderer/src/components/Navbar.jsx b/src/renderer/src/components/Navbar.jsx
index c3b60f9..820382c 100644
--- a/src/renderer/src/components/Navbar.jsx
+++ b/src/renderer/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
import "../assets/styles/components/Navbar.scss";
import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import useChatStore from "../providers/ChatProvider";
import Plus from "../assets/icons/plus-bold.svg?asset";
import X from "../assets/icons/x-bold.svg?asset";
@@ -13,13 +13,16 @@ import ChatroomTab from "./Navbar/ChatroomTab";
import MentionsTab from "./Navbar/MentionsTab";
const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
+ const { t } = useTranslation();
const { settings } = useSettings();
- const connections = useChatStore((state) => state.connections);
const addChatroom = useChatStore((state) => state.addChatroom);
const removeChatroom = useChatStore((state) => state.removeChatroom);
const renameChatroom = useChatStore((state) => state.renameChatroom);
const reorderChatrooms = useChatStore((state) => state.reorderChatrooms);
- const orderedChatrooms = useChatStore((state) => state.getOrderedChatrooms());
+ const chatrooms = useChatStore((state) => state.chatrooms);
+ const orderedChatrooms = useMemo(() => {
+ return [...chatrooms].sort((a, b) => (a.order || 0) - (b.order || 0));
+ }, [chatrooms]);
const hasMentionsTab = useChatStore((state) => state.hasMentionsTab);
const addMentionsTab = useChatStore((state) => state.addMentionsTab);
const removeMentionsTab = useChatStore((state) => state.removeMentionsTab);
@@ -67,8 +70,6 @@ const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
};
const handleRemoveChatroom = async (chatroomId) => {
- if (!connections[chatroomId]) return;
-
const currentIndex = orderedChatrooms.findIndex((chatroom) => chatroom.id === chatroomId);
await removeChatroom(chatroomId);
@@ -199,7 +200,14 @@ const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
return (
<>
-
+
{(provided) => (
@@ -262,35 +270,35 @@ const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
-
-
Add Chatroom
-Enter a channel name to add a new chatroom
+{t('navbar.addChatroom')}
+{t('navbar.addChatroomDescription')}
-
Add Mentions Tab
-Add a tab to view all your mentions & highlights in all chats in one place
+{t('navbar.addMentionsTab')}
+{t('navbar.addMentionsDescription')}
onSelectChatroom("mentions")}
- onMouseDown={(e) => {
- if (e.button === 1) {
- onRemoveMentionsTab();
- }
- }}
- className={clsx("chatroomStreamer", currentChatroomId === "mentions" && "chatroomStreamerActive")}>
-
+ );
});
MentionsTab.displayName = "MentionsTab";
diff --git a/src/renderer/src/components/Shared/LanguageSelector.jsx b/src/renderer/src/components/Shared/LanguageSelector.jsx
new file mode 100644
index 0000000..2de9a75
--- /dev/null
+++ b/src/renderer/src/components/Shared/LanguageSelector.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLanguage } from '../../utils/useLanguage';
+import { useSettings } from '../../providers/SettingsProvider';
+import clsx from 'clsx';
+import './LanguageSelector.scss';
+
+const LanguageSelector = ({ className, showFlags = true, compact = false }) => {
+ const { t } = useTranslation();
+ const { changeLanguage, getCurrentLanguage, getAvailableLanguages } = useLanguage();
+ const { updateSettings } = useSettings();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const languages = getAvailableLanguages();
+ const currentLanguage = getCurrentLanguage();
+ const currentLangData = languages.find(lang => lang.code === currentLanguage);
+
+ const handleLanguageChange = async (languageCode) => {
+ try {
+ // Change language using the hook
+ await changeLanguage(languageCode);
+
+ // Also persist in settings store
+ await updateSettings('language', languageCode);
+
+ setIsOpen(false);
+
+ console.log(`Language successfully changed to: ${languageCode}`);
+ } catch (error) {
+ console.error('Error changing language:', error);
+ }
+ };
+
+ return (
+
- Mentions
-
-
+
+
+
+ {isOpen && (
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/src/renderer/src/components/Shared/LanguageSelector.scss b/src/renderer/src/components/Shared/LanguageSelector.scss
new file mode 100644
index 0000000..56e04f3
--- /dev/null
+++ b/src/renderer/src/components/Shared/LanguageSelector.scss
@@ -0,0 +1,178 @@
+.language-selector {
+ position: relative;
+ display: inline-block;
+
+ .language-selector-button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: var(--bg-input);
+ border: 1px solid var(--border-primary);
+ border-radius: 6px;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-size: 14px;
+ font-family: inherit;
+
+ &:hover {
+ background: var(--bg-hover);
+ border-color: var(--border-hover);
+ }
+
+ &:focus {
+ outline: none;
+ border-color: var(--border-focus);
+ background: var(--input-focus);
+ box-shadow: 0 0 0 1px var(--border-focus);
+ }
+
+ .language-flag {
+ font-size: 16px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ }
+
+ .language-name {
+ min-width: 60px;
+ text-align: left;
+ color: var(--text-primary);
+ font-weight: 500;
+ }
+
+ .dropdown-arrow {
+ font-size: 10px;
+ transition: transform 0.2s ease;
+ color: var(--text-tertiary);
+
+ &.rotated {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .language-dropdown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--bg-dialog-secondary);
+ border: 1px solid var(--border-dialog);
+ border-radius: 6px;
+ box-shadow: var(--shadow-dialog);
+ z-index: 1000;
+ overflow: hidden;
+ margin-top: 4px;
+ backdrop-filter: blur(10px);
+
+ .language-option {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 10px 12px;
+ background: transparent;
+ border: none;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-size: 14px;
+ font-family: inherit;
+
+ &:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ }
+
+ &.active {
+ background: var(--bg-selected);
+ color: var(--text-primary);
+ font-weight: 600;
+ border-left: 3px solid var(--text-success);
+ }
+
+ .language-flag {
+ font-size: 16px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ }
+
+ .language-name {
+ flex: 1;
+ text-align: left;
+ font-weight: 500;
+ }
+
+ .check-mark {
+ color: var(--text-success);
+ font-weight: bold;
+ font-size: 12px;
+ }
+ }
+ }
+
+ &.compact {
+ .language-selector-button {
+ padding: 6px 8px;
+ min-width: auto;
+
+ .language-name {
+ min-width: 30px;
+ font-size: 12px;
+ font-weight: 600;
+ }
+ }
+
+ .language-dropdown {
+ min-width: 120px;
+ }
+ }
+
+ &.open {
+ .language-selector-button {
+ border-color: var(--border-focus);
+ background: var(--input-focus);
+ box-shadow: 0 0 0 1px var(--border-focus);
+ }
+ }
+}
+
+/* Animation and smooth transitions - matching other components */
+.language-dropdown {
+ animation: fadeIn 0.2s ease-out, zoomIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* Focus and accessibility improvements */
+.language-selector-button:focus-visible {
+ outline: 2px solid var(--border-focus);
+ outline-offset: 2px;
+}
+
+.language-option:focus-visible {
+ outline: 2px solid var(--border-focus);
+ outline-offset: -2px;
+ background: var(--bg-hover);
+}
diff --git a/src/renderer/src/components/TitleBar.jsx b/src/renderer/src/components/TitleBar.jsx
index 0977a74..80adc37 100644
--- a/src/renderer/src/components/TitleBar.jsx
+++ b/src/renderer/src/components/TitleBar.jsx
@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
import Minus from "../assets/icons/minus-bold.svg?asset";
import Square from "../assets/icons/square-bold.svg?asset";
@@ -8,11 +9,13 @@ import GearIcon from "../assets/icons/gear-fill.svg?asset";
import "../assets/styles/components/TitleBar.scss";
import clsx from "clsx";
import Updater from "./Updater";
+import useChatStore from "../providers/ChatProvider";
const TitleBar = () => {
- const [userData, setUserData] = useState(null);
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const [appInfo, setAppInfo] = useState({});
+ const currentUser = useChatStore((state) => state.currentUser);
+ const cacheCurrentUser = useChatStore((state) => state.cacheCurrentUser);
useEffect(() => {
const getAppInfo = async () => {
@@ -20,24 +23,13 @@ const TitleBar = () => {
setAppInfo(appInfo);
};
- const fetchUserData = async () => {
- try {
- const data = await window.app.kick.getSelfInfo();
- const kickId = localStorage.getItem("kickId");
-
- if (!kickId && data?.id) {
- localStorage.setItem("kickId", data.id);
- }
-
- setUserData(data);
- } catch (error) {
- console.error("[TitleBar]: Failed to fetch user data:", error);
- }
- };
-
getAppInfo();
- fetchUserData();
- }, []);
+
+ // Cache user info if not already cached
+ if (!currentUser) {
+ cacheCurrentUser();
+ }
+ }, [currentUser, cacheCurrentUser]);
const handleAuthBtn = useCallback((e) => {
const cords = [e.clientX, e.clientY];
@@ -52,39 +44,35 @@ const TitleBar = () => {
+ {languages.map((language) => (
+
+ ))}
+
+ )}
+
- {userData?.id ? (
+ {currentUser?.id ? (
) : (
)}
-
- {settingsModalOpen && (
-
No Chatrooms
-Add a chatroom by using "CTRL"+"t" or clicking Add button
+{t('chat.addChatroom')}
- Created by DRKNESS and ftk789 + {t('loader.createdBy')} DRKNESS and ftk789
{appVersion &&v{appVersion}
}