feat(stage-tamagotchi): chat window

Author: nekomeowww

apps/stage-tamagotchi/src/main/index.ts

@@ -18,6 +18,7 @@ import { openDebugger, setupDebugger } from './app/debugger'
 import { emitAppBeforeQuit, emitAppReady, emitAppWindowAllClosed, onAppBeforeQuit } from './libs/bootkit/lifecycle'
 import { setElectronMainDirname } from './libs/electron/location'
 import { setupCaptionWindowManager } from './windows/caption'
+import { setupChatWindowReusableFunc } from './windows/chat'
 import { setupInlayWindow } from './windows/inlay'
 import { setupMainWindow } from './windows/main'
 import { setupSettingsWindowReusableFunc } from './windows/settings'
@@ -130,17 +131,20 @@ app.whenReady().then(async () => {
   const settingsWindow = injecta.provide('windows:settings', {
     build: () => setupSettingsWindowReusableFunc(),
   })
+  const chatWindow = injecta.provide('windows:chat', {
+    build: () => setupChatWindowReusableFunc(),
+  })
   const mainWindow = injecta.provide('windows:main', {
-    dependsOn: { settingsWindow },
+    dependsOn: { settingsWindow, chatWindow },
     build: async ({ dependsOn }) => setupMainWindow(dependsOn),
   })
   const captionWindow = injecta.provide('windows:caption', {
     dependsOn: { mainWindow },
-    build: async ({ dependsOn }) => setupCaptionWindowManager({ mainWindow: dependsOn.mainWindow }),
+    build: async ({ dependsOn }) => setupCaptionWindowManager(dependsOn),
   })
   const tray = injecta.provide('app:tray', {
     dependsOn: { mainWindow, settingsWindow, captionWindow },
-    build: async ({ dependsOn }) => setupTray(dependsOn as any),
+    build: async ({ dependsOn }) => setupTray(dependsOn),
   })
   injecta.invoke({
     dependsOn: { mainWindow, tray },

apps/stage-tamagotchi/src/main/windows/chat/index.ts

@@ -0,0 +1,34 @@
+import { join, resolve } from 'node:path'
+
+import { BrowserWindow, shell } from 'electron'
+
+import icon from '../../../../resources/icon.png?asset'
+
+import { baseUrl, getElectronMainDirname, load, withHashRoute } from '../../libs/electron/location'
+import { createReusableWindow } from '../../libs/electron/window-manager'
+
+export function setupChatWindowReusableFunc() {
+  return createReusableWindow(async () => {
+    const window = new BrowserWindow({
+      title: 'Chat',
+      width: 600.0,
+      height: 800.0,
+      show: false,
+      icon,
+      webPreferences: {
+        preload: join(__dirname, '../preload/index.mjs'),
+        sandbox: false,
+      },
+    })
+
+    window.on('ready-to-show', () => window.show())
+    window.webContents.setWindowOpenHandler((details) => {
+      shell.openExternal(details.url)
+      return { action: 'deny' }
+    })
+
+    await load(window, withHashRoute(baseUrl(resolve(getElectronMainDirname(), '..', 'renderer')), '/chat'))
+
+    return window
+  }).getWindow
+}

apps/stage-tamagotchi/src/main/windows/main/index.ts

@@ -27,6 +27,7 @@ interface AppConfig {
 
 export async function setupMainWindow(params: {
   settingsWindow: () => Promise<BrowserWindow>
+  chatWindow: () => Promise<BrowserWindow>
 }) {
   const {
     setup: setupConfig,
@@ -122,7 +123,7 @@ export async function setupMainWindow(params: {
 
   await load(window, baseUrl(resolve(getElectronMainDirname(), '..', 'renderer')))
 
-  setupMainWindowElectronInvokes({ window, settingsWindow: params.settingsWindow })
+  setupMainWindowElectronInvokes({ window, settingsWindow: params.settingsWindow, chatWindow: params.chatWindow })
 
   /**
    * This is a know issue (or expected behavior maybe) to Electron.

apps/stage-tamagotchi/src/main/windows/main/rpc/index.electron.ts

@@ -4,11 +4,15 @@ import { defineInvokeHandler } from '@unbird/eventa'
 import { createContext } from '@unbird/eventa/adapters/electron/main'
 import { ipcMain } from 'electron'
 
-import { electronOpenMainDevtools, electronOpenSettings } from '../../../../shared/eventa'
+import { electronOpenChat, electronOpenMainDevtools, electronOpenSettings } from '../../../../shared/eventa'
 import { createScreenService, createWindowService } from '../../../services/electron'
 import { toggleWindowShow } from '../../shared'
 
-export function setupMainWindowElectronInvokes(params: { window: BrowserWindow, settingsWindow: () => Promise<BrowserWindow> }) {
+export function setupMainWindowElectronInvokes(params: {
+  window: BrowserWindow
+  settingsWindow: () => Promise<BrowserWindow>
+  chatWindow: () => Promise<BrowserWindow>
+}) {
   // TODO: once we refactored eventa to support window-namespaced contexts,
   // we can remove the setMaxListeners call below since eventa will be able to dispatch and
   // manage events within eventa's context system.
@@ -21,4 +25,5 @@ export function setupMainWindowElectronInvokes(params: { window: BrowserWindow,
 
   defineInvokeHandler(context, electronOpenMainDevtools, () => params.window.webContents.openDevTools({ mode: 'detach' }))
   defineInvokeHandler(context, electronOpenSettings, async () => toggleWindowShow(await params.settingsWindow()))
+  defineInvokeHandler(context, electronOpenChat, async () => toggleWindowShow(await params.chatWindow()))
 }

apps/stage-tamagotchi/src/renderer/components/Widgets/ControlsIsland/index.vue

@@ -2,7 +2,6 @@
 import { HearingConfigDialog } from '@proj-airi/stage-ui/components'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
 import { defineInvoke } from '@unbird/eventa'
-import { createContext } from '@unbird/eventa/adapters/electron/renderer'
 import { useDark, useToggle } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
@@ -12,25 +11,26 @@ import ControlButton from './ControlButton.vue'
 import ControlButtonTooltip from './ControlButtonTooltip.vue'
 import IndicatorMicVolume from './IndicatorMicVolume.vue'
 
-import { electronOpenSettings, electronStartDraggingWindow } from '../../../../shared/eventa'
+import { electronOpenChat, electronOpenSettings, electronStartDraggingWindow } from '../../../../shared/eventa'
+import { useElectronEventaContext, useElectronEventaInvoke } from '../../../composables/electron-vueuse/use-electron-eventa-context'
 import { isLinux } from '../../../utils/platform'
 
 const isDark = useDark({ disableTransition: false })
 const toggleDark = useToggle(isDark)
 
 const settingsAudioDeviceStore = useSettingsAudioDevice()
+const context = useElectronEventaContext()
 const { enabled: isAudioEnabled } = storeToRefs(settingsAudioDeviceStore)
-
-const { context } = createContext(window.electron.ipcRenderer)
-const openSettings = defineInvoke(context, electronOpenSettings)
+const openSettings = useElectronEventaInvoke(electronOpenSettings)
+const openChat = useElectronEventaInvoke(electronOpenChat)
 
 /**
  * This is a know issue (or expected behavior maybe) to Electron.
  * We don't use this approach on Linux because it's not working.
  *
  * See `apps/stage-tamagotchi/src/main/windows/main/index.ts` for handler definition
  */
-const startDraggingWindow = !isLinux ? defineInvoke(context, electronStartDraggingWindow) : undefined
+const startDraggingWindow = !isLinux ? defineInvoke(context.value, electronStartDraggingWindow) : undefined
 
 // Expose whether hearing dialog is open so parent can disable click-through
 const hearingDialogOpen = ref(false)
@@ -50,6 +50,16 @@ defineExpose({ hearingDialogOpen })
         </template>
       </ControlButtonTooltip>
 
+      <ControlButtonTooltip>
+        <ControlButton @click="openChat">
+          <div i-solar:chat-line-line-duotone size-5 text="neutral-800 dark:neutral-300" />
+        </ControlButton>
+
+        <template #tooltip>
+          Open Chat
+        </template>
+      </ControlButtonTooltip>
+
       <ControlButtonTooltip>
         <HearingConfigDialog v-model:show="hearingDialogOpen">
           <div class="relative">

apps/stage-tamagotchi/src/shared/eventa.ts

@@ -4,6 +4,7 @@ export const electronStartTrackMousePosition = defineInvokeEventa('eventa:invoke
 export const electronStartDraggingWindow = defineInvokeEventa('eventa:invoke:electron:start-dragging-window')
 export const electronOpenMainDevtools = defineInvokeEventa('eventa:invoke:electron:windows:main:devtools:open')
 export const electronOpenSettings = defineInvokeEventa('eventa:invoke:electron:windows:settings:open')
+export const electronOpenChat = defineInvokeEventa('eventa:invoke:electron:windows:chat:open')
 export const electronOpenSettingsDevtools = defineInvokeEventa('eventa:invoke:electron:windows:settings:devtools:open')
 export const captionIsFollowingWindowChanged = defineEventa<boolean>('eventa:event:electron:windows:caption-overlay:is-following-window-changed')
 export const captionGetIsFollowingWindow = defineInvokeEventa<boolean>('eventa:invoke:electron:windows:caption-overlay:get-is-following-window')